/* ------------------------------------------------------------------
   Materiales de NANOTEC.

   La regla que ordena todo esto: el COLOR SOLO APARECE DONDE SIGNIFICA
   ALGO. No hay acento decorativo. Los únicos colores de la interfaz son
   los tres que cargan sentido (entra / sale / urge), y por eso el ojo va
   directo a la cifra que hay que mirar. La jerarquía se hace con tamaño
   y peso, no con color.

   El fondo es cálido a propósito: el gris azulado anterior es lo que
   hacía que el sistema se leyera como software genérico.
   ------------------------------------------------------------------ */
:root {
    --navy: #0B3246;          /* navy oficial NANOTEC: barra, titulares, totales */
    --navy-800: #14465F;      /* variante para hover/estado activo sobre oscuro */

    /* --teal se conserva como NOMBRE porque 31 sitios de las vistas lo
       referencian; ya no es teal, es el navy de la marca. Al sacar los
       estilos en línea a clases estas dos variables desaparecen. */
    --teal: #0B3246;
    --teal-dark: #14465F;

    --bg: #F6F4F1;            /* hueso: el suelo */
    --surface: #FFFFFF;       /* superficies de trabajo */
    --border: #E5E1DC;        /* línea fina, cálida */
    --border-strong: #C9C3BA;
    --text: #1F2426;          /* texto principal */
    --text-muted: #6E7377;    /* texto secundario */
    --text-faint: #A8A29A;    /* etiquetas y apoyos */

    /* Los tres pigmentos con significado. */
    --ok: #2F6B4F;            /* verde pino: lo que entra */
    --danger: #A03A32;        /* óxido: lo que sale */
    --warn: #9A6B1F;          /* ocre: lo que urge */

    /* Sin sombra: las superficies se separan del fondo por una línea de
       1px, no por relieve. La sombra blanda era parte del aspecto genérico. */
    --shadow-card: none;
    --radius: 3px;
    --radius-lg: 3px;
}

* { box-sizing: border-box; }

/* Ninguna imagen desborda su contenedor. */
img { max-width: 100%; height: auto; }

body {
    margin: 0;
    font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    /* Cifras tabulares en todo el sistema: cada dígito ocupa lo mismo, así
       las columnas de montos se leen de un vistazo en vez de tener que
       contar posiciones. En un CRM esto se agradece más que nada. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Barra superior ---------- */
.topbar {
    background: var(--navy);
    color: #fff;
    padding: 0 28px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(11, 50, 70, 0.18);
}

.topbar .brand {
    display: flex;
    align-items: center;
    height: 100%;
}

.topbar .brand img {
    height: 40px;
    display: block;
    /* El logo es navy; lo volvemos blanco para el fondo oscuro. */
    filter: brightness(0) invert(1);
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar nav a {
    color: #8FA6B4;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
}

.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.topbar nav a.active {
    color: #fff;
    background: transparent;
    box-shadow: inset 0 -2px 0 #fff;
}

.topbar form { display: inline; margin-left: 6px; }

.topbar button.link {
    background: none;
    border: none;
    color: #B9C7D0;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius);
}

.topbar button.link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* ---------- Contenedor ---------- */
.container {
    max-width: 1160px;
    margin: 32px auto;
    padding: 0 28px;
}

/* Pantallas de tablero: más anchas, para aprovechar los laterales con una
   columna de gráficos/widgets. */
.container-wide { max-width: 1560px; }

/* Pantallas con tablas muy anchas (p. ej. Suministro): usan todo el ancho de
   la ventana para evitar el scroll lateral. */
.container-full { max-width: none; }

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.dash-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
}

/* Variante apilada: la columna lateral (donas/calendario) pasa a ir debajo
   del contenido principal, a todo el ancho, en vez de al lado. Útil cuando
   la fila de botones de acciones necesita todo el ancho para no partirse
   en varias líneas. */
.dash-grid-apilado {
    grid-template-columns: minmax(0, 1fr);
}
.dash-grid-apilado .dash-side {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}

@media (max-width: 1024px) {
    /* minmax(0, 1fr) — no "1fr" — para que la columna pueda encogerse por
       debajo de su min-content y no desborde en pantallas angostas. */
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-side { position: static; }
}

/* Los ítems de grid/flex que contienen tablas o texto ancho deben poder
   encogerse; sin esto su min-content empuja el ancho y desborda. */
.dash-main, .dash-side { min-width: 0; }

/* Enlaces de contenido (no botones): navy con una línea tenue debajo.
   Sin color de acento: el color queda reservado para lo que significa. */
.container a:not(.btn) {
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--border-strong);
}

.container a:not(.btn):hover { border-bottom-color: var(--navy); }

/* ---------- Títulos ---------- */
h1 {
    color: var(--navy);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

h2 {
    color: var(--navy);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

h3 {
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
}

/* ---------- Tarjetas ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
}

/* ---------- Ficha de datos (pares etiqueta/valor) ----------
   Para cabeceras de detalle (proyecto, cliente, etc.): rejilla compacta y
   alineada en vez de líneas sueltas muy espaciadas. */
.datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px 28px;
}

.datos-grid .dato { min-width: 0; }

.datos-grid .k {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.datos-grid .v {
    font-size: 14px;
    color: var(--text);
    line-height: 1.35;
}

/* Separador sutil entre columnas del mismo renglón en pantallas anchas. */
@media (min-width: 721px) {
    .datos-grid.datos-grid--lined .dato {
        padding-left: 20px;
        border-left: 1px solid var(--border);
    }
}

/* Fila de botones más compacta (menos padding/tamaño) para que quepan todos
   en una sola línea cuando son muchos, como en la barra de Administración. */
.actions-bar-compact .btn {
    padding: 8px 12px;
    font-size: 13px;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .05s;
}

.btn:hover { background: var(--teal-dark); }
.btn:active { transform: scale(0.98); }

/* Botón secundario (contorno) para acciones menos prominentes. */
.btn-secondary {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--border-strong);
}

.btn-secondary:hover { background: #EFECE7; }

/* ---------- Tablas ---------- */
table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    text-align: left;
    padding: 10px 12px;
    background: transparent;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-faint);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

tbody td, tfoot td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #FBFAF8; }

tfoot td {
    border-top: 1px solid var(--navy);
    border-bottom: none;
    background: transparent;
    font-weight: 600;
}

/* ---------- Texto vacío / notas ---------- */
.empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px 0;
}

/* ---------- Barra de acciones ---------- */
.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

/* ---------- Formularios ---------- */
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 5px;
    margin-top: 14px;
}

input:not([type=checkbox]):not([type=radio]), select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

input[type=checkbox], input[type=radio] {
    accent-color: var(--teal);
    width: auto;
    cursor: pointer;
}

.error {
    color: #b3261e;
    font-size: 13px;
    margin-top: 4px;
}

/* ---------- Login ---------- */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Isotipo gigante en tono sobre tono, abajo a la izquierda, como efecto de diseño. */
.login-bg-mark {
    position: absolute;
    left: -130px;
    bottom: -130px;
    width: min(75vw, 560px);
    max-width: none;
    filter: brightness(0) invert(1);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.login-card {
    width: 100%;
    max-width: 360px;
    position: relative;
    z-index: 1;
}

.login-card h1 { text-align: center; }

.login-logo {
    display: block;
    height: 44px;
    margin: 0 auto 20px;
}

/* Botón sobre una cabecera navy: relleno blanco y texto navy. El botón normal
   es navy sobre navy y se perdía dentro del título. */
.btn-sobre-navy,
.btn-sobre-navy:link,
.btn-sobre-navy:visited {
    background: var(--surface);
    color: var(--navy);
    border: 1px solid var(--surface);
    padding: 5px 14px;
    font-weight: 600;
}

.btn-sobre-navy:hover {
    background: #EFECE7;
    color: var(--navy);
}

/* Dato secundario apilado debajo del principal en una celda (marca/modelo bajo
   el ítem, costo real bajo el costo). Es lo que permite que la tabla de la
   cotización entre en pantalla sin scroll lateral. */
.sub-dato {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.35;
}

/* Franja de arriba de la cotización: Resumen y Balance en horizontal, para
   dejarle a la tabla de ítems todo el ancho de la pantalla. */
.cotizacion-resumen {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 24px;
}

/* Las tres tarjetas terminan a la misma altura: desalineadas, la franja se ve
   como tres cosas sueltas en vez de una sola. */
.cotizacion-resumen > .card {
    height: 100%;
    margin: 0;
}

/* Las cifras se reparten el ancho en columnas iguales. Con anchos fijos y
   flex-wrap, la última quedaba sola en una fila a medias. */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.cifra {
    background: #FAF9F7;
    border-radius: 10px;
    padding: 12px 14px;
}

/* Rejilla de la cotización: 2 columnas en escritorio, 1 en móvil. */
.cotizacion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

/* ---------- Navbar: menú hamburguesa ----------
   Se colapsa antes que el resto del contenido (900px): con 7 enlaces + campana
   + botón "Salir", la barra horizontal no cabe en teléfonos apaisados ni en
   tablets pequeñas. El contenido sigue con su propio breakpoint (720px). */
@media (max-width: 900px) {
    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
    }

    .nav-toggle { display: block; }

    .topbar nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-top: 10px;
    }

    .topbar nav.open { display: flex; }

    .topbar nav a,
    .topbar form {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------- Móvil / pantallas angostas ---------- */
@media (max-width: 720px) {
    .container {
        margin: 18px auto;
        padding: 0 14px;
    }

    .card { padding: 16px; }

    h1 { font-size: 20px; }

    /* Barra de acciones: título y botones apilados, cada botón a ancho completo
       (uno por fila) para que no queden apretados de a dos en el teléfono. */
    .actions-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .actions-bar > div { width: 100%; }
    .actions-bar .btn,
    .actions-bar form,
    .actions-bar form .btn {
        width: 100%;
        box-sizing: border-box;
    }
    .actions-bar .btn { text-align: center; }

    .cotizacion-grid { grid-template-columns: 1fr; }
    .cotizacion-resumen { grid-template-columns: 1fr; }
    .cotizacion-resumen > .card { height: auto; }

    /* Grids de columnas FIJAS (definidos en estilos en línea de cada vista) →
       una sola columna en móvil. Los grids repeat(auto-fit, minmax()) ya
       colapsan solos, así que no se tocan; el calendario repeat(7,1fr) tampoco. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:1fr auto 1fr"],
    [style*="grid-template-columns: 1fr auto 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Filas flex con gap: que envuelvan en vez de desbordar horizontalmente. */
    [style*="display:flex"][style*="gap:"],
    [style*="display: flex"][style*="gap:"] {
        flex-wrap: wrap;
    }

    /* Las tablas anchas se deslizan horizontalmente en vez de aplastarse. */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* En móvil los botones de ancho cómodo evitan textos apretados. */
    .actions-bar .btn { white-space: nowrap; }
}

/* ---------- Rejilla de cifras (KPI) ----------
   Todas las cifras alineadas a la MISMA altura, aunque unas etiquetas ocupen
   una línea y otras dos. Antes cada tarjeta empezaba su cifra donde terminaba
   su etiqueta, y la fila entera se veía desordenada. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px;
}

.kpi {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
}

/* La etiqueta reserva dos líneas siempre: es lo que alinea las cifras. */
.kpi .kpi-k {
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1.35;
    min-height: 2.7em;
}

.kpi .kpi-v {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--navy);
    margin-top: 2px;
}

/* El símbolo va del mismo tamaño y color que la cifra, pegado a ella: la
   moneda es parte del número, no una nota al margen. */
.kpi .kpi-v .sim {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.kpi .kpi-d {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 6px;
}

/* ---------- Barra de navegación por botones ----------
   Rejilla de anchos IGUALES en vez de botones de ancho libre: con etiquetas
   de largo distinto la fila quedaba dentada y las dos líneas no casaban. */
.nav-botones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 8px;
    width: 100%;
}

.nav-botones .btn {
    /* Que envuelvan antes que truncarse: un rótulo cortado ("Directorio de
       proveedor…") es peor que uno de dos líneas. El grid los deja igual de
       altos aunque uno envuelva. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    line-height: 1.3;
    min-height: 38px;
}