/**
 * q-login.css — Sistema de diseño Quasar · Fase 2 (login registro apple.com)
 * Página centrada, mucho blanco, card estrecha con sombra flotante, inputs
 * grandes y botón pill de ancho completo. Carga en loginLayout.php DESPUÉS
 * de los css del template de login (los sobrescribe). Requiere q-tokens.css.
 */

body.erp-login-page {
    background: var(--q-surface);
    font-family: var(--q-font);
    -webkit-font-smoothing: antialiased;
}

/* Hero centrado, títulos con el tracking del sistema */
.erp-login-hero .titan-title-size-1 {
    color: var(--q-text-secondary);
    letter-spacing: 0.35em;
    font-size: var(--q-text-sm);
    font-weight: 600;
}
.erp-login-hero .titan-title-size-4 {
    color: var(--q-text);
    font-weight: 600;
    letter-spacing: var(--q-tracking-tight);
}

/* Card estrecha: 380px, radio 14, sombra flotante */
.login-box {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.login-box-body {
    background: var(--q-surface);
    border: 1px solid var(--q-hairline);
    border-radius: var(--q-radius-l);
    box-shadow: var(--q-shadow-2);
    padding: var(--q-space-6) var(--q-space-5);
}

/* Inputs grandes (44px) */
.login-box-body .form-control {
    background-color: var(--q-surface);
    color: var(--q-text);
    height: 44px;
    font-size: 15px;
    border: 1px solid var(--q-border-input);
    border-radius: var(--q-radius-m);
    box-shadow: none;
    padding-left: var(--q-space-4);
    transition: border-color var(--q-dur-fast) var(--q-ease),
                box-shadow var(--q-dur-fast) var(--q-ease);
}
.login-box-body .form-control:focus {
    border-color: var(--q-accent);
    box-shadow: var(--q-focus-ring);
    outline: none;
}
.login-box-body .form-control-feedback { line-height: 44px; color: var(--q-gray-400); }

/* Botón pill de ancho completo con el acento */
.login-box-body .btn-erp-login,
.login-box-body input[type="submit"] {
    background: var(--q-accent-strong);
    color: #fff;
    border: none;
    border-radius: var(--q-radius-m);   /* mismo radio que los inputs: un solo lenguaje en la tarjeta */
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    width: 100%;
    transition: background-color var(--q-dur-fast) var(--q-ease),
                transform var(--q-dur-fast) var(--q-ease);
}
.login-box-body .btn-erp-login:hover,
.login-box-body input[type="submit"]:hover { background: var(--q-accent-strong-hover); color: #fff; }
.login-box-body .btn-erp-login:active,
.login-box-body input[type="submit"]:active { background: var(--q-accent-strong-active); transform: scale(0.99); }

/* Microcopy: errores claros bajo el campo, enlaces discretos */
.login-box-body .errorMessage,
.login-box-body .help-block { color: var(--q-danger-text); font-size: var(--q-text-sm); }
.login-box-body a { color: var(--q-accent); font-size: var(--q-text-sm); }
.login-box-body a:hover { color: var(--q-accent-hover); }

/* Navbar del login y CTA de registro alineados al sistema */
.erp-login-page .navbar-custom .navbar-brand {
    color: var(--q-text);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.erp-login-page .module-extra-small.bg-dark {
    background: var(--q-bg);
}
.erp-login-page .callout-text h4 { color: var(--q-text); font-weight: 600; }
.erp-login-page .callout-text p { color: var(--q-text-secondary); }
.erp-login-page .callout-btn-box .btn-round {
    background: var(--q-surface);
    color: var(--q-accent);
    border: 1px solid var(--q-border-input);
    border-radius: var(--q-radius-pill);
    font-weight: 600;
}
.erp-login-page .callout-btn-box .btn-round:hover { background: var(--q-gray-50); color: var(--q-accent-hover); }

/* Footer del login */
.erp-login-page .footer { background: var(--q-surface); border-top: 1px solid var(--q-hairline); }
.erp-login-page .footer .copyright { color: var(--q-text-secondary); }

/* ---- Absorbido de custom.css (archivo retirado): base del template de login ---- */
body.erp-login-page .home-section.erp-login-hero {
    background: var(--q-surface) !important;
    background-image: none !important;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 40px;
}
body.erp-login-page .home-section.erp-login-hero:before,
body.erp-login-page .home-section.bg-dark-30:before { display: none !important; }
body.erp-login-page .titan-caption .font-alt { color: var(--q-text) !important; }
body.erp-login-page .login-box-body.erp-login-card { color: var(--q-gray-700); }
body.erp-login-page #resetPassword {
    color: var(--q-accent) !important;          /* es un enlace: color de enlace del sistema */
    display: inline-block;
    margin-top: var(--q-space-4);
    font-size: var(--q-text-sm);
    font-weight: 500;
    text-decoration: none;
}
body.erp-login-page #resetPassword:hover { color: var(--q-accent-hover) !important; text-decoration: underline; }
body.erp-login-page .navbar-custom {
    background: var(--q-chrome-bg) !important;
    border-bottom: 1px solid var(--q-gray-200);
    box-shadow: none;
}
body.erp-login-page .navbar-custom .navbar-brand { color: var(--q-text) !important; }
body.erp-login-page .module-extra-small.bg-dark,
body.erp-login-page .module.bg-dark-60,
body.erp-login-page footer.footer.bg-dark {
    background: var(--q-surface) !important;
    color: var(--q-gray-700);
    border-top: 1px solid var(--q-gray-200);
}
body.erp-login-page .module-extra-small.bg-dark .callout-text h4,
body.erp-login-page .module-extra-small.bg-dark .callout-text p,
body.erp-login-page footer.footer.bg-dark .copyright { color: var(--q-text-secondary) !important; }
body.erp-login-page .module.bg-dark-60 { background-image: none !important; }

/* --- Marca: isotipo + wordmark (2026-08-19) --------------------------------
   Isotipo = apple-touch-icon (Q blanca sobre azul de marca), radio del
   sistema. Mismo bloque en login (q-login.css) y app (q-shell.css). */
.q-brand { display: inline-flex; align-items: center; gap: var(--q-space-2); }
.q-brand-mark { width: 28px; height: 28px; border-radius: 7px; flex: none; display: block; }
.q-brand-text { line-height: 1; }
.erp-login-page .navbar-custom .navbar-brand.q-brand { display: inline-flex; height: auto; }

/* --- Revisión UI/UX del login (2026-08-19), medida en el DOM ---------------- */
/* 1. La barra medía 89px con la marca en x=150; la app tiene 50px y la marca
      en x=23. Misma marca, misma barra: 50px y margen izquierdo del sistema. */
body.erp-login-page .navbar-custom { min-height: 50px; padding: 0; }           /* el theme ponía 15px 0 → 81px */
body.erp-login-page .navbar-custom .container { width: auto; max-width: none; margin: 0; padding: 0; } /* barra de borde a borde, como en la app */
body.erp-login-page .navbar-custom .navbar-header { padding: 0; margin: 0; }
body.erp-login-page .navbar-custom .navbar-brand.q-brand {
    height: 50px; padding: 0; margin: 0 0 0 23px;   /* 23px = eje de la marca en la app */
}
/* 2. El theme del login metía letter-spacing:2px en los inputs (herencia de
      "style.css"). Texto de formulario va sin tracking, como en toda la app. */
.login-box-body .form-control,
.login-box-body .form-control::placeholder { letter-spacing: 0; }
/* 3. Ritmo vertical del bloque con la escala del sistema: kicker→título 16,
      título→tarjeta 32; dentro de la tarjeta los grupos a 16. El title tenía
      line-height 1.8 (86px para 48px de fuente): pasa a 1.15. */
.erp-login-hero .titan-title-size-1.mb-30 { margin-bottom: var(--q-space-4) !important; }
.erp-login-hero .titan-title-size-4.mb-40 { margin-bottom: var(--q-space-6) !important; line-height: 1.15; }
.login-box-body .form-group { margin-bottom: var(--q-space-4); }