:root {
    /* === Paleta de marca TDigital — reutilizable en todo el panel admin === */
    --navy: #1E2744;
    --blue: #3BC4FF;
    --purple: #7C5FF8;
    --blue2: #073E98;
    --gray: #898989;

    /* Alias semánticos usados en esta pantalla */
    --text-primary: var(--navy);
    --text-secondary: #5B6478;
    --text-muted: var(--gray);
    --border-default: #DDE1E9;
    --surface-input: #F6F7FA;
    --accent-link: var(--purple);
    --radius-pill: 999px;
    --radius-md: 10px;
  }

  /* === Tipografía ===
     HankRnd Black no disponible como archivo — sustituido por Baloo 2 (Google Fonts).
     Reemplazar el @font-face de abajo cuando se reciba el archivo real. */
  @font-face {
    font-family: 'HankRnd Black Fallback';
    src: url('https://fonts.gstatic.com/s/baloo2/v37/wXKvE3kTposypRydzWmDuDo6mCFq.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
  }
  /* Montserrat se carga vía <link> en el <head> en vez de @import,
     para no bloquear el renderizado — ver <link> agregado abajo. */

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--text-primary);
  }

  .font-display {
    font-family: 'HankRnd Black Fallback', system-ui, sans-serif;
    font-weight: 800;
  }

  .login-layout {
    min-height: 100vh;
    display: flex;
  }

  /* ---------- Panel izquierdo: formulario ---------- */
  .login-panel-form {
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
  }

  .login-form-wrap { width: 100%; max-width: 360px; }

  .login-title {
    font-size: 30px;
    margin: 0 0 32px;
  }

  .field-group { margin-bottom: 18px; }
  .field-group:nth-of-type(2) { margin-bottom: 22px; }

  .field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .field-input {
    width: 100%;
    background: var(--surface-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
  }
  .field-input:focus {
    outline: none;
    border-color: var(--blue2);
    box-shadow: 0 0 0 3px rgba(59,196,255,0.35);
  }

  /* Espacio reservado para mensaje de error de autenticación.
     El backend PHP debe inyectar aquí el texto (ej. "Correo o contraseña incorrectos")
     cuando el login falle, y remover/ocultar el bloque cuando no haya error. */
  .login-error {
    display: none; /* cambiar a "display:flex" (o quitar este estilo inline) cuando haya error */
    align-items: center;
    gap: 8px;
    background: rgba(229,72,77,0.08);
    border: 1px solid rgba(229,72,77,0.25);
    color: #b5262b;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
  }
  /* <!-- MENSAJE DE ERROR DE LOGIN: el backend PHP inserta/activa este bloque
       cuando $error_login esté presente. Ejemplo:
       <div class="login-error" style="display:flex;"><span>&#9888;</span> Correo o contraseña incorrectos.</div>
  --> */

  .btn-submit {
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 14px 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s ease;
  }
  .btn-submit:hover { background: #2a3557; }

  .login-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
  }

  .remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .remember-label input[type="checkbox"] { accent-color: var(--purple); }

  .forgot-link {
    font-size: 13px;
    color: var(--accent-link);
    font-weight: 600;
    text-decoration: none;
  }
  .forgot-link:hover { text-decoration: underline; }

  /* ---------- Panel derecho: marca ---------- */
  .login-panel-brand {
    flex: 1;
    background: var(--navy);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    overflow: hidden; /* evita que el ícono de fondo se filtre fuera del panel */
  }

  .brand-watermark {
    position: absolute;
    width: 520px;
    max-width: none;
    opacity: 0.14;
    left: -80px;
    top: -60px;
    pointer-events: none;
  }

  .brand-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
  }

  .brand-lockup {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .brand-lockup svg, .brand-lockup img.brand-logo-img { height: 44px; width: auto; }
  .brand-seal-sub {
    font-weight: 600;
    font-size: 15px;
    color: rgba(255,255,255,0.68);
  }

  .brand-tagline {
    font-size: 17px;
    color: rgba(255,255,255,0.68);
    max-width: 320px;
    line-height: 1.5;
    margin: 0;
  }

  .btn-outline {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .btn-outline:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.8);
  }

  /* CTA solid: la solicitud de cuenta de prueba es la acción primaria del
     panel de marca, por eso se invierte respecto al "Contáctanos" fantasma. */
  .btn-outline.btn-outline-strong {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
  }
  .btn-outline.btn-outline-strong:hover {
    background: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
    color: var(--navy);
  }

  /* <!-- CTA agrupado: "¿No tienes una cuenta?" + Contáctanos + separador "o" +
       Solicita una cuenta de prueba. Se permite el salto de línea para que en
       anchos reducidos el segundo botón baje sin desbordar el panel. --> */
  .brand-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .brand-cta-question {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.72);
  }
  .brand-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .brand-cta-sep {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
  }

  /* ---------- Responsivo ---------- */
  /* En pantallas angostas se prioriza el formulario: el panel de marca (con el
     ícono TD de fondo) se colapsa a una franja superior compacta en vez de
     ocupar el 50% del ancho, o se oculta por completo según el criterio del
     desarrollador (ver clase alternativa .brand-hidden-mobile más abajo). */
  @media (max-width: 860px) {
    .login-layout { flex-direction: column; }

    .login-panel-brand {
      flex: none;
      order: -1;
      padding: 32px 24px;
      min-height: 0;
    }
    .brand-watermark { opacity: 0.08; width: 320px; }
    .brand-lockup svg, .brand-lockup img.brand-logo-img { height: 32px; }
    .brand-tagline { display: none; } /* oculta tagline en mobile para ahorrar espacio */
    .brand-content { gap: 14px; }

    .login-panel-form { padding: 40px 24px; }
  }

  /* Alternativa: si se prefiere ocultar el panel de marca por completo en mobile
     en vez de colapsarlo, aplicar esta clase al <div class="login-panel-brand">
     desde PHP/JS según viewport, o usar este media query en su lugar:
  @media (max-width: 860px) {
    .login-panel-brand.brand-hidden-mobile { display: none; }
  }
  */