/* Gestión de proyectos AV — sistema de diseño "B · Preciso" (el mismo del CRM CBS).
   Geist + Geist Mono, neutros fríos, un solo acento azul, botón principal en tinta.
   Se carga después de Bootstrap 5.3 y lo gobierna con tokens:

     1. Primitivos   la paleta y las medidas crudas. No se usan directo en componentes.
     2. Semánticos   qué significa cada color (texto, superficie, acento, peligro…).
     3. Componente   cómo se ve cada pieza (--btn-*, --card-*, --tabla-*…) y su puente a --bs-*.

   Regla: un componente nuevo lee tokens semánticos o de componente, nunca valores sueltos. */

@font-face {
    font-family: "Geist";
    src: url("../vendor/geist/Geist-Variable.dfa48d5a8537.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../vendor/geist/GeistMono-Variable.308360d8a547.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ===================================================================== */
/* 1. Primitivos                                                          */
/* ===================================================================== */
:root {
    --gris-0: #ffffff;
    --gris-25: oklch(0.992 0.002 250);
    --gris-50: oklch(0.985 0.003 255);
    --gris-75: oklch(0.978 0.003 255);
    --gris-100: oklch(0.955 0.004 255);
    --gris-150: oklch(0.94 0.004 255);
    --gris-200: oklch(0.93 0.004 255);
    --gris-300: oklch(0.9 0.005 255);
    --gris-500: oklch(0.58 0.01 255);
    --gris-600: oklch(0.52 0.01 255);
    --gris-700: oklch(0.4 0.01 255);
    --gris-800: oklch(0.32 0.012 255);
    --gris-900: oklch(0.21 0.01 255);

    --azul-50: oklch(0.96 0.02 255);
    --azul-500: oklch(0.55 0.16 255);
    --azul-600: oklch(0.47 0.16 255);

    --verde-50: oklch(0.97 0.025 155);
    --verde-600: oklch(0.48 0.1 155);
    --rojo-50: oklch(0.97 0.02 20);
    --rojo-600: oklch(0.52 0.17 20);
    --rojo-700: oklch(0.45 0.17 20);
    --ambar-50: oklch(0.975 0.03 85);
    --ambar-600: oklch(0.52 0.1 70);

    --fuente: "Geist", "Segoe UI", system-ui, sans-serif;
    --fuente-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --texto-xs: 11.5px;
    --texto-sm: 12.5px;
    --texto-base: 13.5px;
    --texto-lg: 15px;
    --texto-xl: 20px;

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-fuerte: 600;

    --radio-sm: 6px;
    --radio: 8px;
    --radio-lg: 10px;
    --radio-pill: 999px;

    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 12px;
    --espacio-4: 16px;
    --espacio-5: 20px;
    --espacio-6: 24px;
    --espacio-8: 32px;

    --sombra-sm: 0 1px 2px oklch(0.2 0.01 255 / 0.05);
    --sombra: 0 1px 3px oklch(0.2 0.01 255 / 0.06), 0 1px 2px oklch(0.2 0.01 255 / 0.04);
    --sombra-lg: 0 12px 32px oklch(0.2 0.01 255 / 0.14);

    --transicion: .12s ease;
}

/* ===================================================================== */
/* 2. Semánticos                                                          */
/* ===================================================================== */
:root {
    --color-fondo: var(--gris-25);
    --color-superficie: var(--gris-0);
    --color-superficie-sutil: var(--gris-50);
    --color-superficie-hover: var(--gris-100);

    --color-borde: var(--gris-200);
    --color-borde-suave: var(--gris-150);
    --color-borde-fuerte: var(--gris-300);

    --color-texto: var(--gris-900);
    --color-texto-2: var(--gris-700);
    --color-texto-tenue: var(--gris-600);
    --color-texto-mudo: var(--gris-500);

    --color-tinta: var(--gris-900);
    --color-tinta-hover: var(--gris-800);
    --color-sobre-tinta: var(--gris-0);

    --color-acento: var(--azul-500);
    --color-acento-hover: var(--azul-600);
    --color-acento-fondo: var(--azul-50);
    --color-acento-anillo: oklch(0.55 0.16 255 / 0.16);

    --color-exito: var(--verde-600);
    --color-exito-fondo: var(--verde-50);
    --color-peligro: var(--rojo-600);
    --color-peligro-hover: var(--rojo-700);
    --color-peligro-fondo: var(--rojo-50);
    --color-aviso: var(--ambar-600);
    --color-aviso-fondo: var(--ambar-50);
    --color-calculado-fondo: var(--azul-50);   /* campos que calcula el servidor (como en la plantilla) */
}

/* ===================================================================== */
/* 3. Componente                                                          */
/* ===================================================================== */
:root {
    /* Botones */
    --btn-alto: 32px;
    --btn-alto-sm: 26px;
    --btn-padding-x: 12px;
    --btn-padding-x-sm: 8px;
    --btn-gap: 6px;
    --btn-radio: var(--radio-sm);
    --btn-fuente: var(--texto-base);
    --btn-fuente-sm: var(--texto-sm);
    --btn-peso: var(--peso-medio);
    --btn-icono-tamano: 14px;
    --btn-anillo-foco: 0 0 0 3px var(--color-acento-anillo);

    /* Tarjetas */
    --card-fondo: var(--color-superficie);
    --card-borde: var(--color-borde);
    --card-radio: var(--radio-lg);
    --card-padding: var(--espacio-4);
    --card-sombra: var(--sombra-sm);

    /* Tablas */
    --tabla-cabecera-fondo: var(--color-superficie-sutil);
    --tabla-cabecera-texto: var(--color-texto-tenue);
    --tabla-borde: var(--color-borde-suave);
    --tabla-fila-hover: oklch(0.55 0.16 255 / 0.04);
    --tabla-padding-y: 8px;
    --tabla-padding-x: 12px;
    --tabla-alto-max: 520px;
    /* Costeo de la cotización: columna lateral angosta y alto del panel de la tabla (scroll interno). */
    --costeo-lateral-ancho: 260px;
    --costeo-tabla-alto: max(460px, calc(100vh - 210px));
    --costeo-notas-alto: 8.5rem;
    --costeo-lista-tablas-alto: 14rem;
    --costeo-thead-alto: 2.25rem;   /* cabecera de columnas de la tabla: la sección fija se pega debajo */   /* más tablas que esto: scroll interno, las notas no bajan */
    --historial-panel-ancho: min(400px, calc(100vw - 32px));
    --historial-panel-alto: min(70vh, 34rem);
    /* Ficha de un registro (cliente): columna lateral (contactos, sedes, notas) y filtro de cada tarjeta. */
    --ficha-lateral-ancho: 360px;
    --ficha-avatar-tamano: 44px;
    --ficha-buscador-ancho: 13rem;
    --ficha-detalles-ancho: min(320px, calc(100vw - 32px));
    --documentos-panel-ancho: min(560px, calc(100vw - 32px));
    --documentos-panel-alto: min(70vh, 34rem);
    /* Colores del costeo: la «Γ» (columna lateral + cabecera de la tabla) en un azul grisáceo; la zona
       de los ítems en blanco. */
    --costeo-marco: oklch(0.94 0.016 232);
    --costeo-marco-borde: oklch(0.875 0.014 238);
    --costeo-marco-hover: oklch(0.915 0.018 232);
    --costeo-sombra: 0 1px 2px oklch(0.2 0.02 250 / 0.08), 0 6px 18px -4px oklch(0.2 0.02 250 / 0.16);
    --costeo-seccion-fondo: oklch(0.905 0.012 240);
    --costeo-seccion-borde: oklch(0.8 0.02 240);
    --costeo-seccion-sombra: 0 3px 5px -3px oklch(0.2 0.02 250 / 0.22);
    --tabla-col-descripcion: 240px;   /* más filas que esto: scroll interno con cabecera y subtotal fijos */

    /* Campos */
    --campo-alto: 34px;
    --campo-borde: var(--color-borde-fuerte);
    --campo-radio: var(--radio-sm);
    --campo-fondo: var(--color-superficie);
    --campo-foco: var(--color-acento);

    /* Modal */
    --modal-ancho: min(980px, calc(100vw - 32px));
    --modal-radio: var(--radio-lg);
    --modal-sombra: var(--sombra-lg);
    --menu-sombra: var(--sombra-lg);   /* menús y paneles desplegables (historial, documentos, detalles…) */

    /* Indicadores (KPI) */
    --kpi-fondo: var(--color-superficie);
    --kpi-borde: var(--color-borde);
    --kpi-valor: 22px;
    --kpi-valor-compacto: var(--texto-lg);

    /* Sidebar y dashboard */
    --sidebar-ancho: 232px;
    --sidebar-fondo: var(--gris-75);
    --dashboard-alto-max: 420px;   /* cada sección del inicio: más filas que esto, scroll interno */

    /* Combobox buscable (la lista se monta en body, por encima del modal de Bootstrap) */
    --combo-z: 1100;
    --combo-alto-max: 320px;

    /* Chips (pills) */
    --chip-sombra: 0 1px 2px oklch(0.2 0.02 250 / 0.08), 0 2px 6px -2px oklch(0.2 0.02 250 / 0.14);
    --chip-aviso-fondo: var(--color-aviso-fondo);
    --chip-aviso-texto: var(--color-aviso);
    --chip-aviso-borde: oklch(0.89 0.07 85);

    /* Insignias */
    --insignia-radio: var(--radio-pill);
    --insignia-fuente: var(--texto-xs);
}

/* Puente a Bootstrap: sus componentes leen nuestros tokens. */
:root {
    --bs-body-font-family: var(--fuente);
    --bs-body-font-size: var(--texto-base);
    --bs-body-color: var(--color-texto);
    --bs-body-bg: var(--color-fondo);
    --bs-border-color: var(--color-borde);
    --bs-border-radius: var(--radio);
    --bs-border-radius-sm: var(--radio-sm);
    --bs-border-radius-lg: var(--radio-lg);
    --bs-link-color: var(--color-acento);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--color-acento-hover);
    --bs-font-monospace: var(--fuente-mono);
    --bs-secondary-color: var(--color-texto-tenue);
}

/* ===================================================================== */
/* Base                                                                   */
/* ===================================================================== */
body { font-family: var(--fuente); font-size: var(--texto-base); color: var(--color-texto); background: var(--color-fondo); -webkit-font-smoothing: antialiased; }
a { color: var(--color-acento); text-decoration: none; }
a:hover { color: var(--color-acento-hover); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
h1, .h1 { font-size: var(--texto-xl); font-weight: var(--peso-fuerte); letter-spacing: -0.01em; margin: 0; }
h2, .h2 { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); margin: 0; }
.texto-tenue { color: var(--color-texto-tenue); }
.texto-mudo { color: var(--color-texto-mudo); }
.texto-peligro { color: var(--color-peligro); }
.texto-exito { color: var(--color-exito); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--fuente-mono); }
.mono, .sin-corte { white-space: nowrap; }

/* ===================================================================== */
/* Estructura                                                             */
/* ===================================================================== */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; align-items: stretch; }
.app-main { flex: 1 1 auto; min-width: 0; }
.app-sidebar {
    position: sticky; top: 0; width: var(--sidebar-ancho); flex: 0 0 var(--sidebar-ancho);
    height: 100vh; height: 100dvh; overflow-y: auto;
    background: var(--sidebar-fondo); border-right: 1px solid var(--color-borde);
    display: flex; flex-direction: column; padding: var(--espacio-3) var(--espacio-2);
}
.sidebar-brand {
    display: flex; align-items: center; gap: var(--espacio-2); padding: 10px 12px; margin-bottom: var(--espacio-3);
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    color: var(--color-texto); font-weight: var(--peso-fuerte); font-size: var(--texto-sm);
}
.sidebar-brand:hover { color: var(--color-texto); border-color: var(--color-borde-fuerte); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
    display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px;
    border: 1px solid transparent; border-radius: var(--radio-sm); color: var(--color-texto-2);
    transition: background-color var(--transicion), color var(--transicion);
}
.sidebar-link .bi { font-size: 15px; width: 16px; text-align: center; }
.sidebar-link:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.sidebar-link.active { background: var(--color-superficie); border-color: var(--color-borde); color: var(--color-texto); font-weight: var(--peso-medio); box-shadow: var(--sombra-sm); }
.sidebar-link.active .bi { color: var(--color-acento); }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--color-borde); padding: var(--espacio-3) var(--espacio-2) 0; display: flex; align-items: center; gap: var(--espacio-2); }
.sidebar-usuario { flex: 1 1 auto; min-width: 0; }
.sidebar-nombre { font-size: var(--texto-sm); font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-admin { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; color: var(--color-sobre-tinta); background: var(--color-tinta);
    font-size: 11px; font-weight: var(--peso-fuerte); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

.barra-superior {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4);
    height: 52px; padding: 0 var(--espacio-6);
    background: var(--color-superficie); border-bottom: 1px solid var(--color-borde);
}
.marca { display: inline-flex; align-items: center; gap: var(--espacio-2); color: var(--color-texto); font-weight: var(--peso-fuerte); }
.marca:hover { color: var(--color-texto); }
.marca-icono {
    width: 24px; height: 24px; border-radius: var(--radio-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-tinta); color: var(--color-sobre-tinta); font-size: 13px;
}
.barra-usuario { display: inline-flex; align-items: center; gap: var(--espacio-2); color: var(--color-texto-tenue); }
.contenido { max-width: 1240px; margin: 0 auto; padding: var(--espacio-6); }
.encabezado-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espacio-4); flex-wrap: wrap; margin-bottom: var(--espacio-5); }
.migas { display: flex; align-items: center; gap: var(--espacio-1); font-size: var(--texto-sm); color: var(--color-texto-mudo); margin-bottom: var(--espacio-1); }
.migas a { color: var(--color-texto-tenue); }
.acciones { display: flex; align-items: center; gap: var(--espacio-2); flex-wrap: wrap; }
.pila { display: flex; flex-direction: column; gap: var(--espacio-5); }

/* ===================================================================== */
/* Botones: .btn + variante. Cada variante solo asigna tokens.            */
/* ===================================================================== */
.btn {
    --bs-btn-padding-x: var(--btn-padding-x);
    --bs-btn-padding-y: 0;
    --bs-btn-font-family: var(--fuente);
    --bs-btn-font-size: var(--btn-fuente);
    --bs-btn-font-weight: var(--btn-peso);
    --bs-btn-border-radius: var(--btn-radio);
    --bs-btn-focus-box-shadow: var(--btn-anillo-foco);
    --bs-btn-disabled-opacity: .45;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
    height: var(--btn-alto); white-space: nowrap;
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn .bi { font-size: var(--btn-icono-tamano); line-height: 1; }
.btn-sm { --bs-btn-padding-x: var(--btn-padding-x-sm); --bs-btn-font-size: var(--btn-fuente-sm); height: var(--btn-alto-sm); }

/* Principal: la acción que importa en la pantalla. Tinta, no azul. */
.btn-principal {
    --bs-btn-color: var(--color-sobre-tinta);
    --bs-btn-bg: var(--color-tinta);
    --bs-btn-border-color: var(--color-tinta);
    --bs-btn-hover-color: var(--color-sobre-tinta);
    --bs-btn-hover-bg: var(--color-tinta-hover);
    --bs-btn-hover-border-color: var(--color-tinta-hover);
    --bs-btn-active-color: var(--color-sobre-tinta);
    --bs-btn-active-bg: var(--color-tinta-hover);
    --bs-btn-active-border-color: var(--color-tinta-hover);
    --bs-btn-disabled-color: var(--color-sobre-tinta);
    --bs-btn-disabled-bg: var(--color-tinta);
    --bs-btn-disabled-border-color: var(--color-tinta);
}
/* Secundario: acciones de apoyo. Superficie con borde. */
.btn-secundario {
    --bs-btn-color: var(--color-texto);
    --bs-btn-bg: var(--color-superficie);
    --bs-btn-border-color: var(--color-borde-fuerte);
    --bs-btn-hover-color: var(--color-texto);
    --bs-btn-hover-bg: var(--color-superficie-hover);
    --bs-btn-hover-border-color: var(--color-borde-fuerte);
    --bs-btn-active-color: var(--color-texto);
    --bs-btn-active-bg: var(--color-superficie-hover);
    --bs-btn-active-border-color: var(--color-borde-fuerte);
    --bs-btn-disabled-color: var(--color-texto-tenue);
    --bs-btn-disabled-bg: var(--color-superficie);
    --bs-btn-disabled-border-color: var(--color-borde);
    box-shadow: var(--sombra-sm);
}
/* Acento: crear/agregar dentro de una sección. */
.btn-acento {
    --bs-btn-color: var(--color-acento);
    --bs-btn-bg: var(--color-acento-fondo);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-sobre-tinta);
    --bs-btn-hover-bg: var(--color-acento);
    --bs-btn-hover-border-color: var(--color-acento);
    --bs-btn-active-color: var(--color-sobre-tinta);
    --bs-btn-active-bg: var(--color-acento-hover);
    --bs-btn-active-border-color: var(--color-acento-hover);
}
/* Fantasma: acciones discretas en filas (editar). */
.btn-fantasma {
    --bs-btn-color: var(--color-texto-tenue);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-texto);
    --bs-btn-hover-bg: var(--color-superficie-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--color-texto);
    --bs-btn-active-bg: var(--color-superficie-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--color-texto-tenue);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}
/* Peligro: eliminar. Contorno rojo, se llena al pasar. */
.btn-peligro {
    --bs-btn-color: var(--color-peligro);
    --bs-btn-bg: var(--color-superficie);
    --bs-btn-border-color: var(--color-peligro);
    --bs-btn-hover-color: var(--color-sobre-tinta);
    --bs-btn-hover-bg: var(--color-peligro);
    --bs-btn-hover-border-color: var(--color-peligro);
    --bs-btn-active-color: var(--color-sobre-tinta);
    --bs-btn-active-bg: var(--color-peligro-hover);
    --bs-btn-active-border-color: var(--color-peligro-hover);
}
/* Solo ícono: cuadrado. Siempre con aria-label o title. */
.btn-icono { --bs-btn-padding-x: 0; width: var(--btn-alto); }
.btn-icono.btn-sm { width: var(--btn-alto-sm); }
/* ===================================================================== */
/* Tarjetas, secciones y datos                                            */
/* ===================================================================== */
.tarjeta {
    background: var(--card-fondo); border: 1px solid var(--card-borde);
    border-radius: var(--card-radio); box-shadow: var(--card-sombra);
}
.tarjeta-cuerpo { padding: var(--card-padding); }
.tarjeta-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); flex-wrap: wrap;
    padding: var(--espacio-3) var(--card-padding); border-bottom: 1px solid var(--card-borde);
}
.tarjeta-titulo { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.tarjeta-titulo .bi { color: var(--color-texto-mudo); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-3); }
.dato-etiqueta { display: flex; align-items: center; gap: var(--espacio-1); font-size: var(--texto-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-mudo); margin-bottom: 2px; }
.dato-valor { color: var(--color-texto); }
.dato-sub { color: var(--color-texto-tenue); font-size: var(--texto-sm); }

.insignia {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
    border-radius: var(--insignia-radio); font-size: var(--insignia-fuente); font-weight: var(--peso-medio);
    background: var(--color-superficie-hover); color: var(--color-texto-2);
}
.insignia-acento { background: var(--color-acento-fondo); color: var(--color-acento); }
.insignia-exito { background: var(--color-exito-fondo); color: var(--color-exito); }
.insignia-peligro { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.insignia-aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); }

/* Indicadores grandes (Costo total, Venta, Utilidad) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--espacio-3); }
.kpi { background: var(--kpi-fondo); border: 1px solid var(--kpi-borde); border-radius: var(--radio); padding: var(--espacio-3) var(--espacio-4); }
.kpi-etiqueta { font-size: var(--texto-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-mudo); }
.kpi-valor { font-size: var(--kpi-valor-compacto); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.kpi-grande .kpi-valor { font-size: var(--kpi-valor); }
.kpis-compactos { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.calculo { margin-top: var(--espacio-3); padding: var(--espacio-3); border-radius: var(--radio); background: var(--color-calculado-fondo); }

/* ===================================================================== */
/* Tablas                                                                 */
/* ===================================================================== */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: var(--tabla-padding-y) var(--tabla-padding-x); border-bottom: 1px solid var(--tabla-borde); vertical-align: middle; }
.tabla thead th {
    background: var(--tabla-cabecera-fondo); color: var(--tabla-cabecera-texto);
    font-size: var(--texto-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.tabla tbody tr:hover { background: var(--tabla-fila-hover); }
.tabla tfoot td { font-weight: var(--peso-fuerte); border-bottom: 0; background: var(--tabla-cabecera-fondo); }
.tabla .col-accion { width: 1%; white-space: nowrap; text-align: right; }
.tabla .col-n { width: 1%; color: var(--color-texto-mudo); }
.tabla .col-desc { min-width: var(--tabla-col-descripcion); }
.tabla-scroll { overflow-x: auto; }
/* Tabla con altura máxima: el cuerpo hace scroll; cabecera y pie quedan pegados arriba y abajo.
   Sin overscroll-behavior: al llegar al final, la rueda sigue con la página (no se queda atrapada).
   Solo lo que flota encima (panel del historial, tabla en pantalla completa) lo contiene. */
.tabla-limitada { max-height: var(--tabla-alto-max); overflow: auto; }
.tabla-limitada thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--tabla-borde); }
.tabla-limitada tfoot td { position: sticky; bottom: 0; z-index: 2; box-shadow: inset 0 1px 0 var(--tabla-borde); }
.tarjeta > .tabla-limitada:last-child { border-radius: 0 0 var(--card-radio) var(--card-radio); }

.panel-limitado { max-height: var(--dashboard-alto-max); overflow-x: hidden; }   /* nunca scroll horizontal: las filas se adaptan */
.panel-limitado .tabla td { word-break: normal; overflow-wrap: anywhere; }
.panel-limitado .tabla .num { white-space: normal; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--espacio-5); align-items: start; }
.texto-largo { white-space: pre-wrap; }

/* Bloque para agregar una sección más (debajo de la última tabla). */
.agregar-bloque {
    display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); flex-wrap: wrap;
    padding: var(--espacio-4); border: 1px dashed var(--color-borde-fuerte); border-radius: var(--card-radio);
    background: var(--color-superficie-sutil);
}
.tabla-compacta th, .tabla-compacta td { padding: 4px 8px; font-size: var(--texto-sm); }
.fila-error td { background: var(--color-peligro-fondo); }
.vacio { padding: var(--espacio-6); text-align: center; color: var(--color-texto-mudo); }
.vacio .bi { display: block; font-size: 24px; margin-bottom: var(--espacio-2); }

.desglose { margin-top: var(--espacio-2); border: 1px solid var(--color-borde-suave); border-radius: var(--radio-sm); background: var(--color-superficie-sutil); }
.desglose-toggle { font-size: var(--texto-sm); color: var(--color-texto-tenue); padding: 0; border: 0; background: none; display: inline-flex; align-items: center; gap: 4px; }
.desglose-toggle:hover { color: var(--color-texto); }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--espacio-4); }
.resumen-fila { display: flex; justify-content: space-between; gap: var(--espacio-3); padding: 6px 0; }
.resumen-fila + .resumen-fila { border-top: 1px solid var(--color-borde-suave); }
.resumen-total { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); border-top: 2px solid var(--color-texto) !important; padding-top: var(--espacio-2); }

/* ===================================================================== */
/* Formularios                                                            */
/* ===================================================================== */
.form-control, .form-select {
    min-height: var(--campo-alto); font-size: var(--texto-base);
    border-color: var(--campo-borde); border-radius: var(--campo-radio); background-color: var(--campo-fondo);
}
.form-control:focus, .form-select:focus { border-color: var(--campo-foco); box-shadow: var(--btn-anillo-foco); }
.form-label { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--color-texto-2); margin-bottom: 4px; }
.form-text { font-size: var(--texto-xs); color: var(--color-texto-mudo); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-3) var(--espacio-4); }
.campo-ancho { grid-column: 1 / -1; }
.campo-error .form-control, .campo-error .form-select { border-color: var(--color-peligro); }
.errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: var(--color-peligro); font-size: var(--texto-sm); }
.texto-pegado { white-space: pre; tab-size: 20; font-size: var(--texto-sm); }
.seccion-form { display: flex; align-items: center; gap: var(--espacio-2); font-size: var(--texto-base); font-weight: var(--peso-fuerte); margin-bottom: var(--espacio-3); }
.seccion-form .bi { color: var(--color-texto-mudo); }
.campo-calculado .form-control { background: var(--color-calculado-fondo); border-style: dashed; color: var(--color-texto-2); }
.selector-modo { display: flex; gap: var(--espacio-2); flex-wrap: wrap; }
.selector-modo .btn-check:checked + .btn { --bs-btn-active-bg: var(--color-tinta); --bs-btn-active-color: var(--color-sobre-tinta); --bs-btn-active-border-color: var(--color-tinta); }
.panel-pestanas { border: 1px solid var(--color-borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); padding: var(--espacio-3); background: var(--color-superficie); }
.rechazo { margin-bottom: var(--espacio-3); }
.buscador { max-width: 380px; }

/* ===================================================================== */
/* Actividad / historial                                                  */
/* ===================================================================== */
.eventos { list-style: none; margin: 0; padding: 0; }
.evento { display: flex; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-bottom: 1px solid var(--color-borde-suave); }
.evento:last-child { border-bottom: 0; }
.evento-avatar { margin-top: 2px; }
.evento-ia .evento-avatar, .evento-avatar-ia { background: var(--color-acento); }
.evento-cuerpo { flex: 1 1 auto; min-width: 0; }
.evento-cambios { margin: 4px 0 0; padding-left: 18px; font-size: var(--texto-sm); }
.evento-args { font-size: var(--texto-xs); color: var(--color-texto-tenue); margin-top: 4px; white-space: pre-wrap; word-break: break-all; }
.evento-fecha { font-size: var(--texto-xs); color: var(--color-texto-mudo); margin-top: 4px; }
.evento-peticion { font-style: italic; color: var(--color-texto-2); margin: 2px 0; }
.evento-registros { margin: 4px 0 0; padding-left: 18px; font-size: var(--texto-sm); }
.evento-detalle { font-size: var(--texto-xs); color: var(--color-texto-mudo); }
.evento-detalle summary { cursor: pointer; }
.peticion { padding: var(--espacio-4); border-bottom: 1px solid var(--color-borde-suave); }
.peticion:last-child { border-bottom: 0; }
.peticion-texto { font-size: var(--texto-lg); font-weight: var(--peso-medio); }
.peticion-acciones { list-style: none; margin: var(--espacio-2) 0 0; padding: 0 0 0 var(--espacio-4); border-left: 2px solid var(--color-borde); }
.peticion-acciones li { padding: 6px 0; }
.eventos .vacio { list-style: none; }

/* ===================================================================== */
/* Combobox buscable (buscable.js). La lista vive en body, no en la sección.  */
/* ===================================================================== */
.combo-select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.combo { position: relative; }
.combo-lista {
    position: fixed; z-index: var(--combo-z); margin: 0; padding: 4px; list-style: none;
    max-height: var(--combo-alto-max); overflow-y: auto;
    background: var(--color-superficie); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
}
.combo-opcion { padding: 6px 10px; border-radius: var(--radio-sm); cursor: pointer; }
.combo-opcion:hover, .combo-opcion.activa { background: var(--color-acento-fondo); color: var(--color-acento-hover); }
.combo-opcion.seleccionada { font-weight: var(--peso-medio); }
.combo-vacio { padding: 8px 10px; color: var(--color-texto-mudo); }

/* Menús y paneles desplegables (Bootstrap): flotan sobre la página, con la misma sombra que el combobox. */
.dropdown-menu { --bs-dropdown-box-shadow: var(--menu-sombra); box-shadow: var(--bs-dropdown-box-shadow); }

/* ===================================================================== */
/* Modal (Bootstrap) con scroll interno                                  */
/* ===================================================================== */
.modal { --bs-modal-width: var(--modal-ancho); --bs-modal-border-radius: var(--modal-radio); --bs-modal-box-shadow: var(--modal-sombra); --bs-modal-border-color: var(--color-borde); }
.modal-header, .modal-footer { border-color: var(--color-borde); }
.modal-title { display: inline-flex; align-items: center; gap: var(--espacio-2); font-size: var(--texto-lg); font-weight: var(--peso-fuerte); }
/* El <form> envuelve cabecera, cuerpo y pie: tiene que ser columna flexible para que el cuerpo
   (y no el diálogo entero) sea el que hace scroll cuando el contenido no cabe. */
.modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-dialog-scrollable .modal-form { overflow: hidden; }
.modal-footer { justify-content: space-between; }
.modal-footer > .acciones-principales { order: 2; }   /* primero en el HTML (Enter), a la derecha en pantalla */
.modal-cargando { padding: var(--espacio-8); text-align: center; color: var(--color-texto-mudo); }
/* La misma pieza fuera del modal (página completa cuando no hay JS). */
.pagina-modal { max-width: 900px; margin: 0 auto; background: var(--card-fondo); border: 1px solid var(--card-borde); border-radius: var(--modal-radio); box-shadow: var(--card-sombra); }

/* ===================================================================== */
/* Mensajes                                                               */
/* ===================================================================== */
.mensajes { position: fixed; top: 64px; right: var(--espacio-6); z-index: 1080; display: flex; flex-direction: column; gap: var(--espacio-2); width: min(420px, calc(100vw - 32px)); }
.mensaje {
    display: flex; align-items: flex-start; gap: var(--espacio-2); padding: 10px 12px;
    border-radius: var(--radio); border: 1px solid var(--color-borde); background: var(--color-superficie); box-shadow: var(--sombra-lg);
}
.mensaje .bi { margin-top: 1px; }
.mensaje-success .bi { color: var(--color-exito); }
.mensaje-error { border-color: var(--color-peligro); }
.mensaje-error .bi { color: var(--color-peligro); }
.mensaje .btn-close { margin-left: auto; font-size: 10px; }

/* ===================================================================== */
/* Login                                                                  */
/* ===================================================================== */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--espacio-4); }
.login .tarjeta { width: min(380px, 100%); }


/* ---------- Editor de texto enriquecido (TipTap) y texto rico ---------- */
:root {
    --editor-alto-min: 220px;
    --editor-alto-max: 50vh;
}
.editor-fuente { display: none; }   /* el <textarea> sigue en el formulario, solo que oculto */
.editor-rico { border: 1px solid var(--campo-borde); border-radius: var(--campo-radio); background: var(--campo-fondo); }
.editor-rico:focus-within { border-color: var(--campo-foco); box-shadow: var(--btn-anillo-foco); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--color-borde-suave); background: var(--color-superficie-sutil); border-radius: var(--campo-radio) var(--campo-radio) 0 0; }
.editor-separador { width: 1px; background: var(--color-borde); margin: 4px 4px; }
.editor-boton.activo { background: var(--color-acento-fondo); color: var(--color-acento); }
.editor-area { max-height: var(--editor-alto-max); overflow: auto; }
.editor-contenido { min-height: var(--editor-alto-min); padding: var(--espacio-3) var(--espacio-4); outline: none; white-space: pre-wrap; word-wrap: break-word; }
.editor-contenido > :first-child { margin-top: 0; }
.editor-contenido .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--color-acento-fondo); opacity: .6; pointer-events: none; }
.editor-contenido td, .editor-contenido th { position: relative; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: relative; }
.ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--color-texto); }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }

.texto-rico, .editor-contenido { line-height: 1.55; }
.texto-rico p, .editor-contenido p { margin: 0 0 var(--espacio-2); }
.texto-rico h2, .editor-contenido h2 { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); margin: var(--espacio-4) 0 var(--espacio-2); }
.texto-rico h3, .editor-contenido h3 { font-size: var(--texto-base); font-weight: var(--peso-fuerte); margin: var(--espacio-3) 0 var(--espacio-1); }
.texto-rico h4, .editor-contenido h4 { font-size: var(--texto-sm); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .04em; margin: var(--espacio-3) 0 var(--espacio-1); }
.texto-rico ul, .texto-rico ol, .editor-contenido ul, .editor-contenido ol { margin: 0 0 var(--espacio-2); padding-left: var(--espacio-5); }
.texto-rico blockquote, .editor-contenido blockquote { margin: var(--espacio-2) 0; padding: var(--espacio-1) 0 var(--espacio-1) var(--espacio-3); border-left: 3px solid var(--color-borde); color: var(--color-texto-2); }
.texto-rico hr, .editor-contenido hr { border: 0; border-top: 1px solid var(--color-borde); margin: var(--espacio-3) 0; }
.texto-rico table, .editor-contenido table { width: 100%; border-collapse: collapse; margin: var(--espacio-2) 0 var(--espacio-3); table-layout: fixed; }
.texto-rico th, .texto-rico td, .editor-contenido th, .editor-contenido td { border: 1px solid var(--tabla-borde); padding: var(--tabla-padding-y) var(--tabla-padding-x); vertical-align: top; min-width: 3em; }
.texto-rico th, .editor-contenido th { background: var(--tabla-cabecera-fondo); color: var(--tabla-cabecera-texto); text-align: left; font-weight: var(--peso-medio); }
.texto-rico > :last-child { margin-bottom: 0; }

/* ---------- Pestañas de la cotización ---------- */
.pestanas { display: flex; gap: var(--espacio-1); border-bottom: 1px solid var(--color-borde); }
.pestana { display: inline-flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-4); margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0; color: var(--color-texto-2); text-decoration: none; font-weight: var(--peso-medio); }
.pestana:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.pestana.activa { background: var(--color-superficie); border-color: var(--color-borde); color: var(--color-texto); }
.pestana .bi { color: var(--color-texto-mudo); }
.pestana.activa .bi { color: var(--color-acento); }

/* ---------- Almacén de documentos ---------- */
.almacen-ruta { display: flex; align-items: center; gap: var(--espacio-2); font-size: var(--texto-xs); color: var(--color-texto-mudo); margin-bottom: var(--espacio-3); min-width: 0; }
.almacen-ruta .mono, .pdf-guardado .mono { white-space: normal; overflow-wrap: anywhere; }
.carpeta { border: 1px solid var(--color-borde-suave); border-radius: var(--radio); margin-bottom: var(--espacio-3); }
.carpeta:last-child { margin-bottom: 0; }
.carpeta-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-3); background: var(--color-superficie-sutil); border-bottom: 1px solid var(--color-borde-suave); border-radius: var(--radio) var(--radio) 0 0; }
.carpeta-icono { color: var(--color-aviso); }
.carpeta-nombre { font-weight: var(--peso-medio); }
.carpeta-acciones { margin-left: auto; }
.carpeta-acciones form, .archivo form { display: inline; margin: 0; }
.archivos { list-style: none; margin: 0; padding: var(--espacio-1) 0; }
.archivo { display: flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-1) var(--espacio-3); min-width: 0; }
.archivo a { overflow-wrap: anywhere; }
.archivo-icono { color: var(--color-texto-mudo); }
.archivo-datos { font-size: var(--texto-xs); color: var(--color-texto-mudo); margin-left: auto; white-space: nowrap; }
.pdf-guardado { font-size: var(--texto-xs); color: var(--color-texto-mudo); margin-top: 2px; }
.arbol, .arbol ul { list-style: none; margin: 0; padding: 0; }
.arbol ul { padding-left: var(--espacio-5); border-left: 1px dashed var(--color-borde); margin-left: 9px; }
.arbol summary { display: flex; align-items: center; gap: var(--espacio-2); padding: 3px 0; cursor: pointer; list-style: none; }
.arbol summary::-webkit-details-marker { display: none; }
.arbol summary::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: var(--texto-xs); color: var(--color-texto-mudo); transition: transform var(--transicion); }
.arbol details[open] > summary::before { transform: rotate(90deg); }
.arbol .archivo { padding-left: var(--espacio-5); }
.arbol-enlace { font-size: var(--texto-xs); }
.ruta-windows { display: flex; align-items: center; gap: var(--espacio-2); flex-wrap: wrap; }
.ruta-windows .mono { white-space: normal; overflow-wrap: anywhere; }
.evento-anexo { font-size: var(--texto-sm); color: var(--color-texto-2); margin-top: 2px; overflow-wrap: anywhere; }
.evento-anexo .bi { color: var(--color-texto-mudo); }
.almacen-pendientes { display: flex; align-items: flex-start; gap: var(--espacio-3); margin-bottom: var(--espacio-3); }
.almacen-pendientes > div { flex: 1; min-width: 0; }
.almacen-pendientes form { margin: 0; }
.almacen-pendientes-error { font-size: var(--texto-xs); margin-top: 2px; overflow-wrap: anywhere; }

/* ---------- Secciones de una tabla del costeo ---------- */
.tabla .fila-seccion td { background: var(--color-superficie-sutil); font-weight: var(--peso-fuerte); color: var(--color-texto); border-top: 1px solid var(--color-borde); }
.tabla .fila-seccion .bi-collection { color: var(--color-acento); }
.tabla .fila-seccion td.col-accion { width: auto; white-space: nowrap; }
.tabla .fila-seccion .acciones { flex-wrap: nowrap; gap: 0; }
.tabla .fila-subtotal-seccion td { font-weight: var(--peso-medio); color: var(--color-texto-2); border-bottom: 1px solid var(--color-borde); }
.tabla .vacio-seccion { color: var(--color-texto-mudo); font-size: var(--texto-sm); }
.tabla tfoot .fila-pie-detalle td { font-weight: var(--peso-normal); color: var(--color-texto-2); }

/* ---------- Selección y orden de ítems en el costeo ---------- */
.tabla .col-sel { width: 2.25rem; padding-right: 0; }
.tabla .col-sel .form-check-input { margin: 0; cursor: pointer; }
.tabla td.col-accion { white-space: nowrap; }
.acciones-fila { display: flex; justify-content: flex-end; gap: 0; }
.acciones-fila .btn-icono[disabled] { opacity: .2; border-color: transparent; background: transparent; }
.barra-seleccion { display: none; align-items: center; flex-wrap: wrap; gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-4); background: var(--color-acento-fondo); border-bottom: 1px solid var(--color-borde); }
.tarjeta:has(.col-sel input[name="items"]:checked) .barra-seleccion { display: flex; }
.barra-seleccion-cuenta { font-weight: var(--peso-medio); color: var(--color-acento); }
.barra-seleccion-destino { display: inline-flex; align-items: center; gap: var(--espacio-2); margin: 0; font-size: var(--texto-sm); }
.barra-seleccion-destino .form-select { width: auto; min-width: 12rem; }
.tabla tbody tr:has(.col-sel input:checked) td { background: var(--color-acento-fondo); }

/* ======================================================================== */
/* Cabecera de una ficha (cotización, cliente): título, chips y acciones.  */
/* ======================================================================== */
.ficha-cabecera .migas { margin-bottom: var(--espacio-2); }
.ficha-cabecera-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espacio-4); flex-wrap: wrap; }
.ficha-cabecera-titulo { flex: 1 1 22rem; min-width: 0; }   /* los chips se acomodan aquí; las acciones no bajan de línea */
.ficha-cabecera-titulo:has(> .ficha-avatar) { display: flex; align-items: center; gap: var(--espacio-3); }
.ficha-cabecera-nombre { min-width: 0; }
.ficha-cabecera h1 { font-size: var(--texto-xl); margin: 0 0 var(--espacio-2); }
/* Nombre y, al lado, lo que se abre desde él (Documentos). */
.ficha-cabecera-linea { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-3); margin-bottom: var(--espacio-2); }
.ficha-cabecera-linea h1 { margin: 0; }
/* Inicial del registro (cliente): cuadro con borde, como los chips. */
.ficha-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: var(--ficha-avatar-tamano); height: var(--ficha-avatar-tamano);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); box-shadow: var(--chip-sombra);
    font-size: var(--texto-lg); font-weight: var(--peso-fuerte); color: var(--color-texto);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--color-borde);
    border-radius: var(--radio-pill); font-size: var(--texto-sm); color: var(--color-texto-2); background: var(--color-superficie);
    text-decoration: none; white-space: nowrap; line-height: 1.5;
}
a.chip:hover, button.chip:hover { border-color: var(--color-acento); color: var(--color-acento); }
.chip .bi { color: var(--color-texto-mudo); }
/* Falta un dato que conviene llenar (cotización sin cliente o sin proyecto, cliente sin NIT…): amarillo suave. */
.chip-aviso { color: var(--chip-aviso-texto); background: var(--chip-aviso-fondo); border-color: var(--chip-aviso-borde); }
.chip-aviso .bi { color: var(--chip-aviso-texto); }
a.chip-aviso:hover, button.chip-aviso:hover { color: var(--chip-aviso-texto); border-color: var(--chip-aviso-texto); }
.ficha-cabecera .chip { box-shadow: var(--chip-sombra); }
.chip-acento { color: var(--color-acento); background: var(--color-acento-fondo); border-color: transparent; }
.chip-acento .bi { color: var(--color-acento); }
.chip-exito { color: var(--color-exito); background: var(--color-exito-fondo); border-color: transparent; }
.chip-exito .bi { color: var(--color-exito); }
.chip-peligro { color: var(--color-peligro); background: var(--color-peligro-fondo); border-color: transparent; }
.chip-peligro .bi { color: var(--color-peligro); }
.ficha-cabecera-acciones { display: flex; align-items: center; gap: var(--espacio-2); flex: 0 0 auto; }
.menu-acciones form { margin: 0; }
.menu-acciones .dropdown-item { display: flex; align-items: center; gap: var(--espacio-2); }
/* «Detalles» de la cabecera: los datos del registro en un menú desplegable. */
.ficha-detalles { width: var(--ficha-detalles-ancho); padding: var(--espacio-3) var(--espacio-4); font-size: var(--texto-base); }
.ficha-detalles.show { display: flex; flex-direction: column; gap: var(--espacio-3); }
/* «Documentos» junto al nombre: la tarjeta del almacén dentro de un panel, como el del historial.
   El cuerpo hace scroll y lo contiene (flota encima: la página de atrás no se mueve). */
.documentos-panel { width: var(--documentos-panel-ancho); padding: 0; overflow: hidden; font-size: var(--texto-base); }
.documentos-panel.show { display: flex; flex-direction: column; max-height: var(--documentos-panel-alto); }
.documentos-panel > .tarjeta { display: flex; flex-direction: column; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.documentos-panel .tarjeta-cuerpo { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* Cuerpo de la ficha: columna principal y lateral (contactos, sedes, notas). */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) var(--ficha-lateral-ancho); gap: var(--espacio-5); align-items: start; }
.ficha-principal, .ficha-lateral { min-width: 0; }
/* Filtro de una tarjeta (formulario GET): estado y buscador del alto de un .btn-sm. */
.ficha-filtro { display: flex; align-items: center; gap: var(--espacio-2); margin: 0; }
.ficha-filtro :is(.form-control, .form-select, .input-group-text) { height: var(--btn-alto-sm); min-height: 0; padding-top: 0; padding-bottom: 0; font-size: var(--texto-sm); }
.ficha-filtro .form-select { width: auto; line-height: calc(var(--btn-alto-sm) - 2px); }
.ficha-filtro .input-group { width: var(--ficha-buscador-ancho); flex-wrap: nowrap; }
.ficha-filtro .filtro-activo { border-color: var(--color-acento); color: var(--color-acento); background-color: var(--color-acento-fondo); }
/* Lo que viene (Ventas, Tickets, Activos): recuadros punteados, como .agregar-bloque. */
.proximamente { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--espacio-3); }
.proximamente-item {
    display: flex; align-items: flex-start; gap: var(--espacio-3); padding: var(--espacio-3);
    border: 1px dashed var(--color-borde-fuerte); border-radius: var(--radio); background: var(--color-superficie-sutil);
}
.proximamente-item > .bi { font-size: var(--texto-lg); color: var(--color-texto-mudo); }
.proximamente-titulo { font-weight: var(--peso-medio); }
@media (max-width: 1100px) { .ficha { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================== */
/* Costeo de la cotización: lateral (tablas, cliente, notas, historial) y   */
/* el panel de la tabla, que es lo principal.                               */
/* ======================================================================== */
.costeo { display: flex; flex-direction: column; gap: var(--espacio-4); }
.total-cabecera-boton { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: var(--color-texto); padding: 2px 10px; border-radius: var(--radio); }
.total-cabecera-boton:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.total-cabecera-etiqueta { font-size: var(--texto-xs); color: var(--color-texto-mudo); }
.total-cabecera-valor { font-family: var(--fuente-mono); font-size: 1.5rem; font-weight: var(--peso-fuerte); white-space: nowrap; line-height: 1.2; }
.total-cabecera-valor .bi { font-size: var(--texto-sm); color: var(--color-texto-mudo); }

.costeo-cuerpo { display: grid; grid-template-columns: var(--costeo-lateral-ancho) minmax(0, 1fr); gap: var(--espacio-4); align-items: start; }
.costeo-lateral {
    display: flex; flex-direction: column; gap: var(--espacio-3); min-width: 0;
    position: sticky; top: var(--espacio-4); max-height: calc(100vh - 2 * var(--espacio-4)); overflow-y: auto;
}
.costeo-principal { min-width: 0; }
.costeo-lateral .tarjeta-cabecera { padding: var(--espacio-2) var(--espacio-3); }
.costeo-lateral .tarjeta-titulo { font-size: var(--texto-sm); }
.costeo-lateral .tarjeta-cuerpo { padding: var(--espacio-3); font-size: var(--texto-sm); }
/* Notas: el alto máximo es del texto, nunca del formulario de edición. */
.notas-expandir { display: none; }
.costeo-lateral .notas-expandir { display: inline-flex; }
.costeo-lateral .notas-texto { max-height: var(--costeo-notas-alto); overflow-y: auto; }
.costeo-lateral #seccion-notas.expandido .notas-texto { max-height: none; }
.costeo-lateral #seccion-notas textarea { min-height: 10rem; }

/* Historial de la cotización: botón con ícono en la cabecera; al abrirlo carga los cambios (HTMX). */
.historial-panel { width: var(--historial-panel-ancho); padding: 0; overflow: hidden; }
.historial-panel.show { display: flex; flex-direction: column; max-height: var(--historial-panel-alto); }
.historial-panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-3); border-bottom: 1px solid var(--color-borde-suave); font-weight: var(--peso-fuerte); font-size: var(--texto-sm); }
.historial-panel-cabecera .bi-clock-history { color: var(--color-texto-mudo); margin-right: 6px; }
.historial-panel-lista { overflow-y: auto; overscroll-behavior: contain; font-size: var(--texto-sm); }
.historial-panel-lista .evento { padding: var(--espacio-2) var(--espacio-3); }
.historial-panel-cargando { padding: var(--espacio-4); color: var(--color-texto-mudo); font-size: var(--texto-sm); }

/* Lista de tablas */
.lista-tablas { padding: var(--espacio-2); }
.lista-tablas-cabecera { display: flex; justify-content: space-between; font-size: var(--texto-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-mudo); padding: var(--espacio-1) var(--espacio-2) var(--espacio-2); }
.lista-tablas-items {
    display: flex; flex-direction: column; gap: 4px; position: relative;   /* offsetTop de cada tabla, relativo a la lista */
    max-height: var(--costeo-lista-tablas-alto); overflow-y: auto;
    padding: 2px; margin: -2px;   /* que la sombra de la tabla activa no se corte con el scroll */
}
.lista-tabla {
    display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio); border: 1px solid transparent;
    color: var(--color-texto); text-decoration: none;
}
.lista-tabla:hover { background: var(--color-superficie-hover); color: var(--color-texto); }
.lista-tabla.active { background: var(--color-superficie); border-color: var(--color-borde); box-shadow: inset 3px 0 0 var(--color-tinta), var(--sombra-sm); font-weight: var(--peso-medio); }
.lista-tabla-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-tabla-total { font-size: var(--texto-xs); color: var(--color-texto-mudo); white-space: nowrap; }
/* Tablas que no suman al total (no incluidas o archivadas): atenuadas. */
.lista-tabla-fuera { color: var(--color-texto-mudo); font-style: italic; }
.lista-tabla-fuera .lista-tabla-total { text-decoration: line-through; }
.lista-tablas-archivadas { margin-top: var(--espacio-2); border-top: 1px dashed var(--costeo-marco-borde); padding-top: var(--espacio-2); }
.lista-tablas-archivadas > summary { display: flex; align-items: center; gap: 6px; padding: var(--espacio-1) var(--espacio-2); font-size: var(--texto-xs); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-mudo); cursor: pointer; }
.lista-tablas-archivadas[open] > summary { margin-bottom: 4px; }
.tabla .fila-no-cuenta td { color: var(--color-texto-mudo); }
.lista-tablas-vacia { padding: var(--espacio-2); margin: 0; font-size: var(--texto-sm); }
.lista-tablas-agregar {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--espacio-2); padding: var(--espacio-2);
    border: 1.5px dashed var(--color-exito); border-radius: var(--radio); color: var(--color-exito); background: var(--color-exito-fondo);
    text-decoration: none; font-weight: var(--peso-medio);
}
.lista-tablas-agregar:hover { color: var(--color-exito); filter: brightness(.97); }

/* Panel de la tabla: cabecera, cuerpo con scroll interno y barra inferior. */
.costeo-tablas > .panel-tabla { display: none; }
.costeo-tablas > .panel-tabla.active { display: flex; }
.panel-tabla { flex-direction: column; height: var(--costeo-tabla-alto); overflow: hidden; }
.panel-tabla-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-bottom: 1px solid var(--color-borde-suave); }
.panel-tabla-cabecera form { margin: 0; }
.panel-tabla-titulo { min-width: 0; flex: 1; }
.panel-tabla-titulo h2 { font-size: var(--texto-lg); margin: 0; padding-left: var(--espacio-3); border-left: 3px solid var(--color-tinta); line-height: 1.3; }
.panel-tabla-meta { display: flex; flex-wrap: wrap; gap: var(--espacio-3); font-size: var(--texto-sm); color: var(--color-texto-mudo); margin-top: 4px; padding-left: calc(var(--espacio-3) + 3px); }
.panel-tabla-cuerpo { flex: 1; min-height: 0; overflow: auto; }
/* Dentro del panel la tabla va un poco más compacta, para que quepan todas las columnas sin scroll lateral. */
.panel-tabla-cuerpo .tabla { font-size: var(--texto-sm); }
.panel-tabla-cuerpo .tabla th, .panel-tabla-cuerpo .tabla td { padding-left: var(--espacio-2); padding-right: var(--espacio-2); }
.panel-tabla-cuerpo .tabla td.num { white-space: nowrap; }
.panel-tabla-cuerpo .tabla .col-desc { min-width: 12rem; }
.panel-tabla-cuerpo .acciones-fila .btn-icono { width: 1.75rem; height: 1.75rem; padding: 0; }
@media (max-width: 1440px) { :root { --costeo-lateral-ancho: 230px; } .panel-tabla-cuerpo .tabla .col-desc { min-width: 10rem; } }
.panel-tabla-cuerpo thead th { position: sticky; top: 0; z-index: 2; background: var(--tabla-cabecera-fondo); box-shadow: inset 0 -1px 0 var(--tabla-borde); }
.panel-tabla-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-4); border-top: 1px solid var(--color-borde); background: var(--color-superficie-sutil); }
.grupo-botones { display: inline-flex; }
.grupo-botones .btn { border-radius: 0; }
.grupo-botones .btn:first-child { border-radius: var(--btn-radio) 0 0 var(--btn-radio); }
.grupo-botones .btn:last-child { border-radius: 0 var(--btn-radio) var(--btn-radio) 0; }
.grupo-botones .btn + .btn { margin-left: -1px; }
.panel-tabla-totales { display: flex; align-items: center; gap: var(--espacio-2); flex-wrap: wrap; margin-left: auto; }
.panel-tabla-total { white-space: nowrap; }
.panel-tabla-total strong { font-size: var(--texto-lg); margin-left: 6px; }
.panel-tabla.expandida { position: fixed; inset: var(--espacio-4); z-index: 1040; height: auto; box-shadow: var(--sombra-lg); }
.panel-tabla.expandida .panel-tabla-cuerpo { overscroll-behavior: contain; }   /* flota encima: la página de atrás no se mueve */
.panel-vacio { text-align: center; padding: var(--espacio-8) var(--espacio-4); color: var(--color-texto-mudo); }
.panel-vacio > .bi { font-size: 2rem; }

/* Colores del costeo: la «Γ» (lateral + cabecera de la tabla) en --costeo-marco, los ítems en blanco. */
.costeo .tarjeta { box-shadow: var(--costeo-sombra); border-color: var(--costeo-marco-borde); }
.costeo-lateral { padding: 2px 4px 12px; }   /* aire para que la sombra no se corte con el scroll */
.costeo-lateral .tarjeta { background: var(--costeo-marco); }
.costeo-lateral .tarjeta-cabecera { border-bottom-color: var(--costeo-marco-borde); }
.lista-tabla:hover { background: var(--costeo-marco-hover); }
.lista-tabla.active { border-color: var(--costeo-marco-borde); }
.panel-tabla-cabecera { background: var(--costeo-marco); border-bottom-color: var(--costeo-marco-borde); }
.panel-tabla-pie { background: var(--color-superficie); }
.tabla .fila-seccion td {
    position: relative; z-index: 1; background: var(--costeo-seccion-fondo);
    border-top: 1px solid var(--costeo-seccion-borde); box-shadow: var(--costeo-seccion-sombra);
}
/* Al bajar por la tabla, el nombre de la sección se queda pegado bajo la cabecera de columnas hasta
   que llega la siguiente sección (que se pinta encima). La cabecera tiene alto fijo para saber dónde. */
.panel-tabla-cuerpo thead th { height: var(--costeo-thead-alto); }
.panel-tabla-cuerpo .tabla .fila-seccion td { position: sticky; top: var(--costeo-thead-alto); }
.tabla .fila-seccion td:first-child { box-shadow: inset 3px 0 0 var(--color-tinta), var(--costeo-seccion-sombra); }

/* Nombre editable en el sitio (tabla y sección): se ve como texto; al pasar el mouse, como campo. */
.renombrar { margin: 0; min-width: 0; }
.renombrar h2 { margin: 0; }
.renombrar-caja { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; cursor: text; border-radius: var(--radio-sm); }
.renombrar-campo {
    font: inherit; color: inherit; min-width: 4ch; max-width: 100%; width: 100%;
    padding: 1px 6px; margin: -1px -6px; border: 1px solid transparent; border-radius: var(--radio-sm); background: transparent;
    text-overflow: ellipsis;
}
@supports (field-sizing: content) { .renombrar-campo { field-sizing: content; width: auto; } }
.renombrar-campo:hover { border-color: var(--costeo-marco-borde); background: oklch(1 0 0 / 0.55); }
.renombrar-campo:focus { outline: none; border-color: var(--campo-foco); background: var(--campo-fondo); box-shadow: 0 0 0 3px var(--color-acento-anillo); text-overflow: clip; }
.renombrar-icono { font-size: .8em; color: var(--color-texto-mudo); opacity: 0; transition: opacity .12s; }
.renombrar-caja:hover .renombrar-icono { opacity: 1; }
.renombrar-campo:focus + .renombrar-icono { opacity: 0; }
.renombrar[data-enviando] .renombrar-campo { opacity: .6; }
.renombrar-seccion { display: inline-block; vertical-align: middle; }
.renombrar-seccion .renombrar-campo { font-weight: var(--peso-fuerte); }

/* Resumen (popup) */
.resumen-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--espacio-5); }

@media (max-width: 1100px) {
    .costeo-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .costeo-lateral { position: static; max-height: none; overflow: visible; order: 2; }
    .ficha-cabecera-acciones { flex-wrap: wrap; }
}

/* Documentos del SharePoint anterior: un ícono discreto junto al nombre (se usan poco). */
.anteriores { display: inline-block; vertical-align: middle; }
h1 .anteriores-boton { font-size: var(--texto-base); }
.anteriores-boton .bi { color: var(--color-texto-mudo); }
.anteriores-menu { max-width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; font-size: var(--texto-sm); }
.anteriores-menu .dropdown-item, .anteriores-menu .dropdown-item-text { display: flex; align-items: center; gap: var(--espacio-2); white-space: normal; }
.anteriores-externo { margin-left: auto; font-size: var(--texto-xs); color: var(--color-texto-mudo); }
.anteriores-sin-enlace { color: var(--color-texto-mudo); }