* { margin:0; padding:0; box-sizing:border-box; }
.contenedor-panel { font-family:'Figtree', sans-serif; background:#f8fafc; min-height:100vh; display:flex; }

/* Panel izquierdo (hero) por defecto con gradiente */
.left-panel {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 25%, #1d4ed8 60%, #1e40af 100%);
  position: relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.left-panel::before {
  content:''; position:absolute; inset:0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>') center/cover;
}
.left-panel .left-content { position:relative; z-index:1; text-align:center; color:#fff; padding:2rem; }
.left-panel .left-content h2 { font-size:2.4rem; font-weight:600; margin-bottom:1rem; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.left-panel .left-content p { font-size:1.05rem; opacity:.95; max-width:460px; line-height:1.6; margin:0 auto; }

/* Variante: imagen de fondo (añade la clase left-panel--image) */
.left-panel--image { background: #000; }
.left-panel--image::before { content:none; } /* para que no se superponga el svg */
.left-panel--image { background: url('/images/login/full.jpg') no-repeat center center / cover; }

/* Panel derecho (formulario) */
.right-panel { flex:1; background:#fff; display:flex; align-items:center; justify-content:center; padding:2rem; position:relative; }
.form-shell, .login-container { width:100%; max-width:440px; padding:0 1rem; }

/* Enlace superior derecho */
.top-right-link { position:absolute; top:1.5rem; right:1.5rem; color:#6b7280; text-decoration:none; font-size:.875rem; }
.top-right-link:hover { color:#2563eb; text-decoration:underline; }

/* Encabezados / branding */
.header, .login-header { text-align:center; margin-bottom:2rem; }
.logo { height:70px; margin-bottom:1rem; }
.brand { color:#2563eb; font-size:1.1rem; font-weight:700; }
.title, .welcome-text { font-size:1.5rem; font-weight:600; color:#1f2937; margin-top:.25rem; }
.logo-box, .contpaq-logo { width:60px; height:60px; background:#2563eb; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; box-shadow:0 4px 12px rgba(37,99,235,.3); }
.logo-box i, .contpaq-logo i { color:#fff; font-size:1.6rem; }
.brand-text { color:#2563eb; font-size:1.5rem; font-weight:700; margin-bottom:.5rem; }

/* Formularios */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.9rem; font-weight:500; color:#374151; margin-bottom:.5rem; }
.required { color:#ef4444; }
.form-input, .form-control-custom, .form-control-alike {
  width:100%; padding:.875rem 1rem; border:1.5px solid #d1d5db; border-radius:8px; font-size:1rem;
  transition:all .2s ease; background:#fff;
}
.form-input:focus, .form-control-custom:focus, .form-control-alike:focus {
  outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-input::placeholder { color:#9ca3af; }

/* Campo password + toggle */
.password-field { position:relative; }
.password-toggle { position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; color:#6b7280; cursor:pointer; padding:.25rem; }
.password-toggle:hover { color:#2563eb; }

/* Botones (login/register/reset) */
.login-button, .action-button {
  width:100%; background:#2563eb; color:#fff; border:none; padding:.875rem 1.5rem; border-radius:8px;
  font-size:1rem; font-weight:600; cursor:pointer; transition:all .2s ease;
  box-shadow:0 4px 12px rgba(37,99,235,.3);
}
.login-button:hover, .action-button:hover { background:#1d4ed8; transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.4); }
.login-button:active, .action-button:active { transform:translateY(0); }

/* Recuerdame / opciones */
.form-options { display:flex; justify-content:flex-start; align-items:center; margin:1.25rem 0; }
.remember-me { display:flex; align-items:center; gap:.5rem; }
.remember-me input { width:1rem; height:1rem; accent-color:#2563eb; }
.remember-me label { font-size:.875rem; color:#6b7280; cursor:pointer; }

/* Links inferiores */
.below-links, .register-link { text-align:center; margin-top:1rem; }
.register-link { padding-top:1.5rem; border-top:1px solid #e5e7eb; }
.below-links a, .register-link a, .forgot-password { color:#2563eb; text-decoration:none; font-weight:500; font-size:.875rem; }
.below-links a:hover, .register-link a:hover, .forgot-password:hover { text-decoration:underline; }

/* Tarjeta ligera y alertas */
.card-like { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.card-body { padding:1.25rem; }
.alert { border-radius:10px; }

/* Steps / nav tabs */
.nav-steps-wrapper { margin-bottom:1rem; }
.nav-tabs .nav-link { font-weight:600; }
.nav-tabs .nav-link.disabled { cursor:not-allowed; }

    ul.text-red-600{
        color: #b91c1c;
        font-weight: 600;
        list-style: none;
        padding-left: 0;
    }

/* Responsive */
@media (max-width: 768px) {
  .contenedor-panel { flex-direction:column; }
  .left-panel { min-height:200px; flex:none; }
  .right-panel { flex:1; padding:1rem; }
  .left-panel .left-content h2 { font-size:1.8rem; }
}