/* style.css - Estilos compartidos de la app (antes embebidos inline en cada página). */

:root {
    /* Paleta pastel (misma tonalidad que ILF Calculation tool) */
    --pastel-blue: #A8D8EA;
    --pastel-blue-dark: #6FB6D6;
    --pastel-blue-ink: #1B4A5C;

    --pastel-green: #B6E2D3;
    --pastel-green-dark: #7FC8A9;
    --pastel-green-ink: #1E4E3B;

    --pastel-pink: #F7C6C7;
    --pastel-pink-dark: #E89EA0;
    --pastel-pink-ink: #6E2426;

    --pastel-yellow: #FDF1BA;
    --pastel-yellow-dark: #F5DD7E;
    --pastel-yellow-ink: #7A6A1A;

    --pastel-purple: #D9C5F0;
    --pastel-purple-dark: #C2A8E8;
    --pastel-purple-ink: #422E66;

    --ink: #3A3A45;
    --ink-light: #6B6B78;
    --bg: #FAFBFC;
    --card-bg: #FFFFFF;
    --border: #E6E9EF;
    --shadow: 0 2px 10px rgba(58, 58, 69, 0.06);
    --radius: 12px;

    /* Rampas profundas para estados fuertes (income/expense) */
    --green-pale: #EAF7F1;
    --green-deep: #1E7A4C;
    --pink-pale: #FDF2F2;
    --pink-deep: #A33333;

    --sidebar-w-expanded: 220px;
    --sidebar-w: var(--sidebar-w-expanded);
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --sidebar-bg: var(--card-bg);
    --sidebar-text: var(--ink);
    --sidebar-hover-bg: rgba(58,58,69,.06);
    --sidebar-active-bg: rgba(58,58,69,.10);
    --sidebar-active-border: var(--pastel-blue-dark);
}

/* Menú "autohide": activado con el botón de flecha del sidebar (includes/footer.php),
   guardado en localStorage y reaplicado antes del render en includes/header.php. Al
   contraerse, --sidebar-w pasa a valer --sidebar-w-collapsed, así que el sidebar Y el
   contenido/topbar (que usan var(--sidebar-w) para su ancho/margen) se achican juntos. Al
   pasar el mouse por encima, el sidebar contraído crece a --sidebar-w por encima del
   contenido (position: fixed, sin volver a tocar --sidebar-w) en vez de empujarlo, para que
   el resto de la página no salte con cada hover. */
html.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }

html, body { height: 100%; margin: 0; }
body {
    background: var(--bg);
    min-height: 100vh;
    position: relative;
    /* Misma familia tipográfica que ILF Calculation tool, en toda la app.
       !important porque Bootstrap (cargado vía $extra_head después de este
       stylesheet en varias páginas) también fija font-family en body. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---------------------------------------------------------------------
   Shell de app autenticada (sidebar + topbar) - includes/header.php
   --------------------------------------------------------------------- */
.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    z-index: 1040; transition: transform .25s ease, width .2s ease;
}
.app-sidebar .sidebar-logo { padding: 16px; text-align: center; background: var(--sidebar-bg); }
.app-sidebar .sidebar-logo img { max-width: 70px; height: auto; display: block; margin: 0 auto; transition: max-width .2s ease; }
.app-sidebar .sidebar-collapse-toggle {
    display: flex; align-items: center; justify-content: center; width: 100%;
    padding: 8px 0; border: none; border-bottom: 1px solid var(--border);
    background: transparent; color: var(--ink-light); font-size: 1.1rem; cursor: pointer;
}
.app-sidebar .sidebar-collapse-toggle:hover { background: var(--sidebar-hover-bg); color: var(--ink); }
.app-sidebar nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
.app-sidebar nav a {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px;
    color: var(--sidebar-text); text-decoration: none;
    font-size: 1rem; border-left: 4px solid transparent; white-space: nowrap;
}
.app-sidebar nav a i { width: 22px; flex-shrink: 0; text-align: center; font-size: 1.1rem; }
.app-sidebar nav a .nav-label { transition: opacity .15s ease; }
.app-sidebar nav a:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
.app-sidebar nav a.active { background: var(--sidebar-active-bg); border-left-color: var(--sidebar-active-border); font-weight: 600; }

/* Contraído: sólo íconos, centrados; el nombre y el label de grupo desaparecen sin ocupar
   espacio. Al pasar el mouse, el sidebar vuelve a su ancho normal *por encima* del contenido
   (no empuja nada) y los nombres reaparecen. */
html.sidebar-collapsed .app-sidebar .sidebar-logo img { max-width: 32px; }
html.sidebar-collapsed .app-sidebar .sidebar-collapse-toggle i { transform: rotate(180deg); }
html.sidebar-collapsed .app-sidebar nav a { justify-content: center; padding: 12px 0; }
html.sidebar-collapsed .app-sidebar nav a .nav-label,
html.sidebar-collapsed .app-sidebar .nav-group-label {
    opacity: 0; width: 0; overflow: hidden; pointer-events: none;
}
/* var(--sidebar-w) ya vale --sidebar-w-collapsed acá arriba (regla de más arriba) — el hover
   necesita el ancho expandido real (--sidebar-w-expanded, que no se pisa nunca). */
html.sidebar-collapsed .app-sidebar:hover {
    width: var(--sidebar-w-expanded);
    box-shadow: 2px 0 14px rgba(58,58,69,.18);
}
html.sidebar-collapsed .app-sidebar:hover .sidebar-logo img { max-width: 70px; }
html.sidebar-collapsed .app-sidebar:hover .sidebar-collapse-toggle i { transform: none; }
html.sidebar-collapsed .app-sidebar:hover nav a { justify-content: flex-start; padding: 12px 20px; }
html.sidebar-collapsed .app-sidebar:hover nav a .nav-label,
html.sidebar-collapsed .app-sidebar:hover .nav-group-label {
    opacity: 1; width: auto; pointer-events: auto;
}
.app-topbar {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h);
    background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center;
    padding: 0 16px; z-index: 1030; gap: 12px;
}
.app-topbar .topbar-toggle {
    display: none; border: none; background: transparent; font-size: 1.5rem;
    line-height: 1; cursor: pointer; color: var(--pastel-blue-dark); padding: 4px 8px;
}
.app-topbar h1 { font-size: 1.5rem; margin: 0; font-weight: 700; color: var(--ink); }
.app-topbar .topbar-user {
    margin-left: auto; display: flex; align-items: center; gap: 12px;
    font-size: 1rem; color: var(--ink-light); white-space: nowrap;
}
.app-topbar .topbar-user a { color: var(--pastel-blue-dark); text-decoration: none; font-weight: 600; }
.app-topbar .topbar-user a:hover { text-decoration: underline; }

.app-content { margin-left: var(--sidebar-w); margin-top: var(--topbar-h); padding: 20px; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(58,58,69,.4); z-index: 1035; }

.tarjeta-toast {
    position: fixed; top: 70px; right: 20px; z-index: 2000;
    background: var(--pastel-yellow); color: var(--ink); padding: 12px 18px; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(58,58,69,.2); font-size: .88rem; max-width: 360px;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
}
.tarjeta-toast.show { opacity: 1; transform: translateY(0); }

/* Página de error "duro" del sistema (conexión, permisos, CSRF) —
   render_fatal_error() en includes/init.php. */
.error-page-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.error-toast-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FDEAEA;
    color: var(--pink-deep);
    border: 1px solid #F5C6C6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 24px;
    max-width: 420px;
    font-size: .95rem;
}
.error-toast-box i { font-size: 1.6rem; flex-shrink: 0; }

@media (max-width: 768px) {
    /* El menú "autohide" (contraer a íconos + expandir al pasar el mouse) es un concepto de
       escritorio — en mobile el sidebar ya se abre/cierra completo con el botón de hamburguesa,
       así que acá se fuerza siempre al ancho expandido y se oculta el botón de contraer. */
    .app-sidebar { transform: translateX(-100%); box-shadow: 2px 0 12px rgba(58,58,69,.2); width: var(--sidebar-w-expanded); }
    .app-sidebar.open { transform: translateX(0); }
    .app-sidebar .sidebar-collapse-toggle { display: none; }
    .app-topbar { left: 0; }
    .app-topbar .topbar-toggle { display: inline-block; }
    .app-content { margin-left: 0; padding: 16px; }
    .sidebar-backdrop.show { display: block; }

    /* El estado "contraído" se guarda en localStorage y no se resetea sólo por achicar la
       ventana — sin esto, abrir el menú hamburguesa con "autohide" activado desde una sesión
       de escritorio previa mostraría el sidebar mobile angosto, sin nombres. Mismos selectores
       que la regla "contraído" de más arriba (misma especificidad), así que gana por venir
       después en la hoja de estilos. */
    html.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-expanded); }
    html.sidebar-collapsed .app-sidebar nav a { justify-content: flex-start; padding: 12px 20px; }
    html.sidebar-collapsed .app-sidebar nav a .nav-label,
    html.sidebar-collapsed .app-sidebar .nav-group-label {
        opacity: 1; width: auto; pointer-events: auto;
    }
    html.sidebar-collapsed .app-sidebar .sidebar-logo img { max-width: 70px; }
}

@media (max-width: 480px) {
    .app-topbar h1 { font-size: 1.15rem; }
    .topbar-user .topbar-user-name { display: none; }
}

/* ---------------------------------------------------------------------
   Página de login - login.php (mismo formato que QuotationForms:
   login-logo fijo arriba a la izquierda + login-wrap con gradiente vívido
   + login-card blanca centrada, ver UserManagementKit/pages/login.php)
   --------------------------------------------------------------------- */
.login-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    max-width: 70px;
    height: auto;
    z-index: 10;
}
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #ffffff 0%, #eaf6fd 45%, #b9e3f7 100%);
}
.login-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(58,58,69,0.15);
    padding: 40px;
    width: 340px;
    max-width: calc(100% - 40px);
    text-align: center;
    box-sizing: border-box;
}
.login-card img { height: 64px; margin-bottom: 12px; }
.login-card h1 { font-size: 1.2rem; margin: 0 0 4px; color: var(--ink); }
.login-card p.sub { color: var(--ink-light); font-size: 0.85rem; margin-bottom: 20px; }

/* Floating label (mismo patrón que UserManagementKit/pages/login.php, origen QuotationForms) —
   sólo para campos envueltos en .inputBox (hoy, login.php). forgot_password.php/reset_password.php
   siguen con el input "boxed" de más abajo (label antes del input, no float), así que estas
   reglas van scopeadas a .inputBox para no afectarlas. */
.login-card .inputBox { position: relative; }
.login-card .inputBox input[type="text"],
.login-card .inputBox input[type="password"] {
    width: 100%;
    padding: 0.625rem 0;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: 0.062rem;
    margin-bottom: 1.875rem;
    border: none;
    border-bottom: 1px solid var(--border);
    outline: none;
    background: transparent;
    box-sizing: border-box;
}
.login-card .inputBox input.has-toggle { padding-right: 1.875rem; }
.login-card .inputBox input[type="text"]:focus,
.login-card .inputBox input[type="password"]:focus {
    border-bottom-color: var(--pastel-blue-dark);
    box-shadow: none;
}
.login-card .inputBox label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.625rem 0;
    font-size: 1rem;
    color: var(--ink-light);
    pointer-events: none;
    transition: 0.2s;
}
.login-card .inputBox input:focus ~ label,
.login-card .inputBox input:valid ~ label {
    top: -1.125rem;
    left: 0;
    color: var(--pastel-blue-dark);
    font-size: 0.75rem;
}
.login-card .inputBox .password-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0;
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    padding: 0.125rem;
    line-height: 1;
}
.login-card .inputBox .password-toggle:hover { color: var(--pastel-blue-dark); }

.login-card label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: 5px;
    text-align: left;
}
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--ink);
    background: #FBFCFD;
    box-sizing: border-box;
    margin-bottom: 16px;
}
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="email"]:focus {
    outline: none;
    border-color: var(--pastel-blue-dark);
    box-shadow: 0 0 0 3px rgba(111, 182, 214, 0.25);
}

.login-card .password-wrap { position: relative; }
.login-card .password-wrap input { padding-right: 38px; }
.login-card .password-toggle {
    position: absolute;
    top: 9px;
    right: 10px;
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.login-card .password-toggle:hover { color: var(--pastel-blue-dark); }

.login-card .forgot-link {
    display: block;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--pastel-blue-dark);
    text-decoration: none;
    font-weight: 600;
}
.login-card .forgot-link:hover { text-decoration: underline; }

.login-card .btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.login-card .btn:active { transform: scale(0.98); }
.login-card .btn-primary {
    background: var(--pastel-blue);
    color: var(--pastel-blue-ink);
    width: 100%;
    margin-top: 8px;
    padding: 11px;
}
.login-card .btn-primary:hover { background: var(--pastel-blue-dark); color: #fff; }

.login-card .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.login-card .alert-error { background: #FDEAEA; color: var(--pink-deep); border: 1px solid #F5C6C6; }
.login-card .alert-success { background: var(--green-pale); color: var(--green-deep); border: 1px solid #C6E9D6; }

/* ---------------------------------------------------------------------
   Password show/hide toggle reutilizable fuera del login (change_password,
   admin_users, etc.) - misma estructura .password-wrap/.password-toggle.
   --------------------------------------------------------------------- */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 38px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.password-toggle:hover { color: var(--pastel-blue-dark); }

/* ---------------------------------------------------------------------
   Subgrupo "Administración" del sidebar (includes/nav_config.php) - sólo
   visible para usuarios con role = admin.
   --------------------------------------------------------------------- */
.app-sidebar .nav-group-label {
    padding: 12px 20px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-light);
}

/* ---------------------------------------------------------------------
   Badges de rol (admin_users.php)
   --------------------------------------------------------------------- */
.badge-role-admin {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--pastel-blue);
    color: var(--pastel-blue-ink);
}
.badge-role-user {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--border);
    color: var(--ink-light);
}