/* style.css - Estilos compartidos de la app (shell + componentes reutilizados en todas las páginas).
   Paleta: misma tonalidad que "ILF Calculation tool" (pasteles fríos + fondo neutro claro). */

:root {
    --pastel-blue: #A8D8EA;
    --pastel-blue-dark: #6FB6D6;
    --pastel-green: #B6E2D3;
    --pastel-green-dark: #7FC8A9;
    --pastel-pink: #F7C6C7;
    --pastel-pink-dark: #E89EA0;
    --pastel-yellow: #FDF1BA;
    --pastel-yellow-dark: #F5DE85;
    --pastel-purple: #D9C5F0;
    --pastel-purple-dark: #B79CE0;
    --ink: #3A3A45;
    --ink-light: #6B6B78;
    --bg: #FAFBFC;
    --card-bg: #FFFFFF;
    --border: #E6E9EF;
    --shadow: 0 2px 10px rgba(58, 58, 69, 0.06);
    --radius: 12px;

    --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, .05);
    --sidebar-active-bg: rgba(168, 216, 234, .35);
    --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-expanded 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;
    font-size: .9rem;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   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); color: #1B4A5C; font-weight: 600; }
.app-sidebar .nav-group { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
.app-sidebar .nav-group-label {
    padding: 10px 20px 4px; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-light);
}

/* 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: 40px; }
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(0,0,0,.4); z-index: 1035; }

@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(0,0,0,.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; }
}

/* ---------------------------------------------------------------------
   Componentes compartidos (botones pastel, tarjetas, tablas, badges)
   --------------------------------------------------------------------- */
/* Selector compuesto (.btn.btn-pastel-*) a propósito: Bootstrap define ".btn { background-color:
   transparent }" y, al cargarse después de este archivo, empataba en especificidad y ganaba por
   orden de aparición — el color sólo se notaba en :hover (única regla sin colisión). Duplicar la
   clase sube la especificidad y garantiza el color pastel también en reposo. */
.btn.btn-pastel-blue   { background: var(--pastel-blue);   color: #1B4A5C; border:none; }
.btn.btn-pastel-red    { background: var(--pastel-pink);   color: #6E2426; border:none; }
.btn.btn-pastel-teal   { background: var(--pastel-purple); color: #422E66; border:none; }
.btn.btn-pastel-yellow { background: var(--pastel-yellow); color: var(--ink); border:none; }
.btn.btn-pastel-gray   { background: #EEF0F4;              color: var(--ink); border:none; }
.btn.btn-pastel-blue:hover   { background: var(--pastel-blue-dark);   color: #fff; }
.btn.btn-pastel-red:hover    { background: var(--pastel-pink-dark);   color: #fff; }
.btn.btn-pastel-teal:hover   { background: var(--pastel-purple-dark); color: #fff; }
.btn.btn-pastel-yellow:hover { background: var(--pastel-yellow-dark); color: var(--ink); }
.btn.btn-pastel-gray:hover   { background: #E1E4EA;                   color: var(--ink); }

.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card-bg); }
.table thead th { background: #F3F6FA; color: var(--ink-light); border-top: none; text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; }
tfoot td { font-weight: 700; background: #F3F6FA; }

/* Recuadros de totales (Total Prima + por estatus) — usados en Main.php y charts.php */
.metrics-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.metric-box { display: inline-flex; flex-direction: column; gap: 2px; border-radius: var(--radius); padding: 10px 18px; }
.metric-box .metric-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.metric-box .metric-value { font-size: 1.3rem; font-weight: 700; }
.metric-box.metric-total     { background: var(--pastel-blue-dark); color: #fff; }
.metric-box.metric-ganada    { background: var(--pastel-green);  color: #1E4E3B; }
.metric-box.metric-perdida   { background: var(--pastel-pink);   color: #6E2426; }
.metric-box.metric-pendiente { background: var(--pastel-yellow); color: var(--ink); }
.metric-box.metric-cotizada  { background: var(--pastel-blue);   color: #1B4A5C; }
.metric-box.metric-other     { background: #EEF0F4;              color: var(--ink-light); }

/* Barra de filtros: label + select en línea + botones Aplicar/Reset */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.filter-bar label { display: inline-block; margin: 0; font-weight: 600; color: var(--ink-light); font-size: .85rem; white-space: nowrap; }
.filter-bar select.form-control { width: auto; }

.badge-ganada    { background: var(--pastel-green);  color: #1E4E3B; }
.badge-perdida   { background: var(--pastel-pink);   color: #6E2426; }
.badge-pendiente { background: var(--pastel-yellow); color: var(--ink); }
.badge-cotizada  { background: var(--pastel-blue);   color: #1B4A5C; }
.badge-other     { background: #EEF0F4;              color: var(--ink-light); }

/* ---------------------------------------------------------------------
   Formularios / botones / alertas genéricos (sin Bootstrap) - login.php
   --------------------------------------------------------------------- */
label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: 5px;
}

input[type=text], input[type=number], input[type=password], input[type=email], textarea, select {
    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;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--pastel-blue-dark);
    box-shadow: 0 0 0 3px rgba(111, 182, 214, 0.25);
}

.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;
}
.btn:active { transform: scale(0.98); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-error { background: #FDEAEA; color: #A33; border: 1px solid #F5C6C6; }
.alert-success { background: #E9F7EF; color: #1E7A4C; border: 1px solid #C6E9D6; }

/* ---------------------------------------------------------------------
   Mostrar/ocultar contraseña (login, change_password, admin_users) y
   badges de rol (admin_users.php)
   --------------------------------------------------------------------- */
.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); }

.badge-role-admin { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: var(--pastel-blue); color: #1B4A5C; }
.badge-role-user  { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: #EEF0F4; color: var(--ink-light); }

/* ---------------------------------------------------------------------
   Buscador tipo "escribí y elegí" (NAICS en el modal de Cotización,
   Main.php) — lista de sugerencias posicionada debajo del input.
   --------------------------------------------------------------------- */
.typeahead-wrap { position: relative; }
.typeahead-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    max-height: 260px;
    overflow-y: auto;
    margin-top: 2px;
}
.typeahead-results .typeahead-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: .85rem;
    border-bottom: 1px solid var(--border);
}
.typeahead-results .typeahead-item:last-child { border-bottom: none; }
.typeahead-results .typeahead-item:hover,
.typeahead-results .typeahead-item.active { background: var(--sidebar-hover-bg); }
.typeahead-results .typeahead-item strong { color: var(--pastel-blue-dark); }
.typeahead-results .typeahead-empty { padding: 8px 12px; font-size: .85rem; color: var(--ink-light); }

.naics-info-box {
    margin-top: 6px;
    padding: 8px 12px;
    background: #F3F6FA;
    border-radius: 8px;
    font-size: .8rem;
    color: var(--ink-light);
}
.naics-info-box strong { color: var(--ink); }

/* ---------------------------------------------------------------------
   Página de login - login.php
   --------------------------------------------------------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFFFFF 0%, var(--pastel-blue) 100%);
}
.login-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 40px;
    width: 400px;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    text-align: center;
}
.login-card h1 { font-size: 1.2rem; margin: 0 0 4px; color: var(--ink); font-weight: 700; }
.login-card p.sub { color: var(--ink-light); font-size: 0.85rem; margin-bottom: 28px; }
.login-card label { text-align: left; }

/* Campos con label flotante (formato de UserManagementKit/pages/login.php) */
.login-card .inputBox { position: relative; text-align: left; }
.login-card .inputBox input {
    width: 100%; padding: .625rem 0; font-size: 1rem; color: var(--ink); letter-spacing: .062rem;
    margin-bottom: 1.875rem; border: none; border-bottom: .065rem solid var(--border);
    border-radius: 0; outline: none; background: transparent; box-sizing: border-box;
}
.login-card .inputBox input:focus { box-shadow: none; border-bottom-color: var(--pastel-blue-dark); }
.login-card .inputBox input.has-toggle { padding-right: 1.875rem; }
.login-card .inputBox label {
    position: absolute; top: 0; left: 0; padding: .625rem 0; margin: 0; font-size: 1rem; font-weight: 400;
    color: var(--ink-light); pointer-events: none; transition: .5s;
}
.login-card .inputBox input:focus ~ label,
.login-card .inputBox input:not(:placeholder-shown) ~ label {
    top: -1.125rem; color: var(--pastel-blue-dark); font-size: .75rem;
}
.login-card .inputBox .password-toggle { top: .5rem; right: 0; transform: none; padding: .125rem; }
.login-card .btn { width: 100%; margin-top: 8px; padding: 11px; }
.login-card .forgot-link { display: block; margin-top: 14px; font-size: .85rem; color: var(--pastel-blue-dark); text-decoration: none; font-weight: 600; }
.login-card .forgot-link:hover { text-decoration: underline; }