/* ============================================================================
   agentesCA — hoja única de estilos.

   Dos capas en cascada explícita (@layer). `sistema` es el diseño vigente y
   gana siempre, sin importar la especificidad del selector heredado.
   `heredado` es lo que todavía no se reescribió, pantalla por pantalla: se
   achica en cada iteración del rediseño y el objetivo es que quede vacía.
   ========================================================================== */
@layer heredado, sistema;

@layer heredado {
  /* --- Licitaciones (story 3-2; 8-1 la rediseña): filter-bar + tabla densa --- */

  /* Filter-bar 8-1: una fila de chips que despliegan su panel al click. */
  .filter-bar-wrap { margin-bottom: 1rem; }
  .filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .5rem .6rem; margin-bottom: .6rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  }
  .filter-bar .chip {
    padding: .38rem .8rem; border: 1px solid var(--border); border-radius: 999px;
    background: #fff; font-size: .84rem; cursor: pointer; color: var(--text);
    display: inline-flex; align-items: center; gap: .35rem;
  }
  .filter-bar .chip:hover { border-color: var(--accent); }
  .filter-bar .chip[aria-expanded="true"] {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .filter-bar .chip-activo { border-color: var(--accent); }
  .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .filter-bar .chip[aria-expanded="true"] .chip-dot { background: #fff; }
  .filter-bar-sep { flex: 1; }
  .filter-bar .filtro-check { font-size: .84rem; display: inline-flex; gap: .35rem; align-items: center; }
  .filter-bar .btn-filtrar { padding: .38rem .9rem; font-size: .84rem; }
  .filter-bar .btn-limpiar { font-size: .82rem; }

  /* Paneles desplegables: una fila que fluye, inline bajo la barra. */
  .filtro-panel {
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end;
    padding: .6rem .8rem; margin-bottom: .8rem;
    border: 1px dashed var(--border); border-radius: 10px; background: var(--card);
  }
  .filtro-panel[hidden] { display: none; }
  .filtro-panel .filtro { display: block; margin: 0; min-width: 9rem; }
  .filtro { display: block; margin: .5rem 0; }
  .filtro span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
  .filtro input, .filtro select {
    width: 100%;
    padding: .4rem .55rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .88rem;
    background: #fff;
    color: var(--text);
  }
  .filtro input:focus, .filtro select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .filtro-panel .filtro-fecha input { width: 8.5rem; }
  /* htmx: feedback mientras el parcial esta en vuelo (AC1 "al instante") */
  .htmx-request .filtros, .htmx-request.filtros { opacity: .6; }
  .htmx-request { transition: opacity .15s ease; }

  .btn-filtrar {
    padding: .5rem 1.1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .9rem;
    cursor: pointer;
  }
  .btn-limpiar { color: var(--muted); font-size: .88rem; text-decoration: underline; }

  .licitaciones-estado { color: var(--muted); font-size: .85rem; margin: 0 0 .6rem; }
  /* Tabla densa (8-1): columnas chicas, scroll horizontal SIEMPRE visible
     (scrollbar gruesa) y thead sticky en el scroll vertical. */
  .tabla-scroll {
    overflow: auto; -webkit-overflow-scrolling: touch;
    max-height: 72vh;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  }
  .tabla-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
  .tabla-scroll::-webkit-scrollbar-track { background: transparent; }
  .tabla-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
  .tabla-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  .licitaciones-tabla { width: 100%; border-collapse: collapse; font-size: .78rem; }
  .licitaciones-tabla th,
  .licitaciones-tabla td {
    text-align: left;
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: top;
  }
  .licitaciones-tabla th {
    color: var(--muted); font-weight: 600;
    position: sticky; top: 0; z-index: 2; background: var(--card);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 1px 0 var(--border);
  }
  /* Densidad 8-1: texto largo truncado con ellipsis + tooltip via title. */
  .licitaciones-tabla td .truncado {
    display: inline-block; max-width: 22rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  }
  .licitaciones-tabla td.col-monto { text-align: right; font-variant-numeric: tabular-nums; }
  .licitaciones-tabla td .hora { color: var(--muted); font-size: .74rem; margin-left: .25rem; }
  .fila-licitacion:hover { background: #faf9f6; }
  .licitaciones-vacia { text-align: center; color: var(--muted); padding: 1.2rem !important; white-space: normal !important; }

  /* Mobile ocasional: filter-bar fluye, tablas siguen con scroll. */
  @media (max-width: 640px) {
    main.seccion { padding: 0 .75rem 1.5rem; }
    .filter-bar { gap: .4rem; }
    .filter-bar .chip { padding: .3rem .6rem; font-size: .8rem; }
    .licitaciones-tabla { font-size: .74rem; }
    .licitaciones-tabla td .truncado { max-width: 12rem; }
    .detalle-grid { grid-template-columns: 1fr; }
    .gestion-estado { grid-template-columns: 1fr; }
  }


  /* --- Detalle de licitación (story 3-3) --- */

  .detalle-header h1 { margin: 0 0 .3rem; font-size: 1.35rem; }
  .detalle-sub { color: var(--muted); font-size: .9rem; margin: 0 0 1.2rem; }
  .detalle-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .9rem 1.1rem 1.1rem;
    margin: 0 0 1rem;
  }
  .detalle-panel h2 { margin: 0 0 .6rem; font-size: 1rem; color: var(--muted); }
  .pliego-ok { color: var(--accent); font-size: .9rem; margin: 0; }
  .pliego-descarga { font-weight: 600; text-decoration: underline; margin-left: .3rem; }
  .pliego-no { color: var(--danger-text); background: var(--danger-bg); padding: .6rem .8rem; border-radius: 6px; font-size: .9rem; margin: 0; }
  .pliego-quitar { margin-top: .75rem; }
  .docs-lista { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); }
  .docs-lista .doc-fecha { margin-left: .5rem; }

  /* Grilla de los 20 campos del informe; las columnas de texto largo ocupan
     dos celdas para leerse sin scroll horizontal (AC1/AC5 responsive). */
  .detalle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .1rem 1.2rem; margin: 0; }
  .detalle-campo { padding: .35rem 0; border-bottom: 1px dashed var(--border); }
  .detalle-campo dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .detalle-campo dd { margin: .15rem 0 0; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .detalle-campo.col-objeto, .detalle-campo.col-descripcion { grid-column: 1 / -1; }
  .detalle-campo.editado dt::before { content: ""; }
  .insignia {
    background: #efe7d6; color: #7a5c1e; border-radius: 999px;
    font-size: .68rem; padding: .05rem .5rem; margin-left: .4rem;
    text-transform: none; letter-spacing: 0;
  }
  .detalle-campo .vacio { color: var(--border); }
  .detalle-campo .hash { font-size: .74rem; color: var(--muted); word-break: break-all; }

  .gestion-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
  .gestion-bloque { margin-bottom: .8rem; }
  .gestion-bloque h3 { margin: 0 0 .3rem; font-size: .85rem; color: var(--muted); }
  .gestion-pendiente { color: var(--muted); font-size: .88rem; margin: 0; }
  .gestion-placeholder { color: var(--muted); font-size: .78rem; font-style: italic; margin: .6rem 0 0; }
  .comentarios-lista { list-style: none; margin: 0; padding: 0; }
  .comentarios-lista li { border-bottom: 1px dashed var(--border); padding: .45rem 0; }
  .comentarios-lista p { margin: .2rem 0 0; font-size: .92rem; white-space: pre-wrap; }
  .comentario-autor { font-weight: 600; font-size: .85rem; }
  .comentario-fecha { color: var(--muted); font-size: .78rem; margin-left: .5rem; }
  .detalle-volver { margin-top: 1.2rem; }
  .detalle-volver a { color: var(--accent); font-size: .9rem; }


  /* Panel de control (story 5-1: listado de usuarios + alta) */
  .panel-hola { font-size: 1.05rem; margin: 0.5rem 0 1rem; }
  .panel-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
  .panel-tabla th,
  .panel-tabla td {
    text-align: left; padding: .45rem .6rem;
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .panel-tabla th { color: var(--muted); font-weight: 600; }
  .panel-tabla td:first-child { white-space: normal; }
  .panel-vacia { text-align: center; color: var(--muted); padding: 1.2rem !important; white-space: normal !important; }
  .chip-estado {
    border-radius: 999px; font-size: .72rem; padding: .12rem .55rem; font-weight: 600;
  }
  .chip-estado.estado-activo { background: #e7efe7; color: var(--accent); }
  .chip-estado.estado-inactivo { background: var(--danger-bg); color: var(--danger-text); }
  .chip-estado.estado-pendiente { background: #efe7d6; color: #7a5c1e; }
  .panel-hint { color: var(--muted); font-size: .82rem; margin: .6rem 0 1.2rem; }
  .alta-form { max-width: 26rem; }
  .alta-campo { display: block; margin: .8rem 0 .3rem; font-size: .85rem; color: var(--muted); }
  .alta-campo input {
    display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
    border: 1px solid var(--border); border-radius: 6px; font-size: .92rem;
  }
  .alta-campo input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .alta-error { display: block; color: var(--danger-text); font-size: .8rem; margin-top: .25rem; }
  .alta-form .btn-filtrar { margin-top: .8rem; }
  .panel-links { line-height: 1.9; padding-left: 1.2rem; }
  .panel-links a { font-weight: 600; }
  .panel-nota { color: var(--texto-suave, #666); font-size: 0.92rem; margin-top: 1.5rem; }

  /* Story 4-1: badges de gestión en la tabla (Asignación / Decisión) y alta de
     comentarios en el detalle (AC5). Mismo lenguaje visual que .insignia (3-3). */
  .badge { display: inline-block; border-radius: 999px; font-size: .72rem;
    padding: .1rem .55rem; white-space: nowrap; }
  .badge-asignado { background: #e3ece0; color: #2f4a35; }
  .badge-sin-asignar { background: #efece6; color: var(--muted); }
  .badge-decision-cotizar { background: #dbeadd; color: #24512c; }
  .badge-decision-no_cotizar { background: var(--danger-bg); color: var(--danger-text); }
  .badge-decision-pendiente { background: #efe7d6; color: #7a5c1e; }
  /* Story 13-14: ingesta por mail — badge hermano del origen (tabla y
     ficha). El de remitente desconocido comparte lenguaje con "pendiente"
     (amarillo neutro): llama la atencion sin gritar peligro. */
  .badge-ingesta { background: #e3e9f2; color: #2a4a6b; }
  .badge-ingesta-desconocido { background: #efe7d6; color: #7a5c1e; }
  .licitaciones-tabla td.col-asignacion,
  .licitaciones-tabla td.col-decision { white-space: normal; min-width: 7rem; }
  .aviso-exito { color: #2f4a35; background: #dbeadd; padding: .5rem .8rem;
    border-radius: 6px; font-size: .9rem; margin: 0 0 .6rem; }
  .comentario-form { margin-top: .7rem; display: flex; flex-direction: column;
    gap: .45rem; max-width: 34rem; }
  .comentario-label { font-size: .78rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em; }
  .comentario-form textarea { font: inherit; font-size: .92rem; padding: .5rem .6rem;
    border: 1px solid var(--border); border-radius: 6px; background: var(--card);
    color: var(--text); resize: vertical; }
  .comentario-form button { align-self: flex-start; background: var(--accent);
    color: #fff; border: 0; border-radius: 6px; padding: .45rem 1.1rem;
    font: inherit; font-size: .9rem; cursor: pointer; }

  /* Story 5-2: acciones inline por fila en el panel de usuarios */
  .panel-acciones { display: flex; gap: .35rem; align-items: center;
    flex-wrap: wrap; }
  .form-inline { display: inline; margin: 0; }
  .btn-mini { font: inherit; font-size: .78rem; padding: .25rem .6rem;
    border: 1px solid var(--border); border-radius: 5px; background: var(--card);
    color: var(--text); cursor: pointer; }
  .btn-mini:disabled { opacity: .45; cursor: not-allowed; }
  .btn-mini-alerta { color: var(--danger-text); border-color: var(--danger-text); }
  .panel-editar { font-size: .78rem; color: var(--accent); margin-left: .35rem; }

  /* Story 4-5: correccion de datos del informe */
  .editar-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
  .editar-form label { display: flex; flex-direction: column; gap: .25rem;
    font-size: .85rem; color: var(--muted); }
  .editar-form select, .editar-form input { min-width: 14rem; }
  .editar-form button, .editar-revertir button { background: var(--accent);
    color: #fff; border: 0; border-radius: 6px; padding: .45rem 1.1rem;
    font: inherit; font-size: .9rem; cursor: pointer; }
  .editar-revertir { margin-top: .75rem; display: flex; gap: .75rem;
    align-items: flex-end; }
  .editar-revertir button { background: #8a8f98; }
  .editar-activos { margin-top: .6rem; font-size: .85rem; color: var(--muted); }


  /* Stories 4-6/5-4: vista de auditoría */
  .auditoria-filtros { display: flex; flex-wrap: wrap; gap: .6rem;
    align-items: flex-end; margin: .75rem 0 1rem; }
  .auditoria-filtros label { display: flex; flex-direction: column; gap: .2rem;
    font-size: .8rem; color: var(--muted); }
  .auditoria-filtros select, .auditoria-filtros input { font: inherit;
    font-size: .85rem; padding: .3rem .45rem; }
  .auditoria-filtros button { background: var(--accent); color: #fff; border: 0;
    border-radius: 6px; padding: .4rem 1rem; font: inherit; font-size: .85rem;
    cursor: pointer; }
  .auditoria-limpiar { font-size: .8rem; color: var(--muted);
    margin-left: .25rem; }
  .auditoria-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
  .auditoria-tabla th, .auditoria-tabla td { border-bottom: 1px solid var(--border);
    padding: .35rem .5rem; text-align: left; vertical-align: top; }
  .auditoria-tabla th { color: var(--muted); font-weight: 600; }
  .audit-fecha { white-space: nowrap; color: var(--muted); }
  .audit-valor { max-width: 16rem; overflow-wrap: anywhere; }
  .auditoria-paginacion { margin-top: .75rem; font-size: .82rem;
    color: var(--muted); }

  .panel-tipo-form { display: inline-flex; gap: .25rem; align-items: center; }
  .panel-tipo-select { font: inherit; font-size: .78rem; padding: .2rem .3rem;
    max-width: 9.5rem; }



  .filtro-check { display: inline-flex; gap: .35rem; align-items: center;
    font-size: .85rem; color: var(--muted); }




  /* ─── Story 7-2: dashboard BI (KPIs, rankings con data-bars, evolución) ──
     Sección que quedó sin CSS en el cierre original; el markup ya existía. */
  .kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3); margin: 0 0 var(--space-4);
  }
  .kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem;
  }
  .kpi-num { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .kpi-lbl { font-size: var(--fs-xs); color: var(--muted); }
  .ranking {
    min-width: 0; overflow-x: auto;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .7rem .85rem;
    box-shadow: var(--shadow-sm);
  }
  .ranking h2 { font-size: var(--fs-md); margin: 0 0 .4rem; }
  .ranking table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .ranking th, .ranking td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .ranking th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); }
  .ranking td.num, .ranking th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .ranking tr:last-child td { border-bottom: none; }
  .evolucion {
    min-width: 0;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .8rem .9rem;
    box-shadow: var(--shadow-sm);
  }
  .evolucion h2 { font-size: var(--fs-md); margin: 0; }
  .kpi-acento { border-color: var(--accent); background: var(--accent-tint); }
  .kpi-acento .kpi-num { color: var(--accent-strong); }

  /* Rediseño dataviz skill (12-3): evolución mensual como línea (1 serie,
     toggle Cantidad/USD por radio+CSS), con capa real de hover — crosshair
     + tooltip (dashboard_charts.js), no solo <title> nativo. */
  .evo-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem;
  }
  .evo-modo-toggle {
    display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
    padding: 2px; gap: 2px; background: var(--bg-raised);
  }
  .evo-modo-toggle input { position: absolute; opacity: 0; pointer-events: none; }
  .evo-modo-toggle label {
    font-size: .74rem; padding: .25rem .7rem; border-radius: 999px;
    cursor: pointer; color: var(--muted); user-select: none;
  }
  .evo-modo-toggle input:checked + label { background: var(--accent); color: #fff; font-weight: 600; }
  .evo-modo-toggle input:focus-visible + label { outline: var(--focus-ring); outline-offset: 1px; }
  .evo-chart-wrap { width: 100%; position: relative; }
  .evo-svg { width: 100%; height: 11rem; display: block; overflow: visible; touch-action: none; }
  .evo-eje { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
  .evo-linea {
    fill: none; stroke: var(--series-1); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  }
  .evo-punto { fill: var(--series-1); stroke: var(--card); stroke-width: 2; }
  .evo-punto-hit { fill: transparent; cursor: crosshair; }
  .evo-crosshair { stroke: var(--border-strong); stroke-width: 1; display: none; pointer-events: none; }
  .evo-end-label {
    position: absolute; right: 0; transform: translateY(-1.4rem);
    font-size: .78rem; font-weight: 700; color: var(--text); text-align: right;
    background: var(--card); padding: 0 0 0 .3rem; white-space: nowrap;
    font-variant-numeric: tabular-nums; pointer-events: none;
  }
  /* Toggle Cantidad/USD: el radio y el chart NO son hermanos directos (el
     input vive dentro de .evo-modo-toggle > .evo-head; el chart es hermano
     de .evo-head dentro de <section class="evolucion">), así que un
     combinador ~ no llega — se usa :has() en el ancestro común en su lugar
     (soportado en todos los navegadores evergreen; sin JS requerido). */
  .evo-serie-usd { display: none; }
  .evo-end-label-usd { display: none; }
  .evolucion:has(#evo-modo-usd:checked) .evo-serie-cant { display: none; }
  .evolucion:has(#evo-modo-usd:checked) .evo-serie-usd { display: block; }
  .evolucion:has(#evo-modo-usd:checked) .evo-end-label-cant { display: none; }
  .evolucion:has(#evo-modo-usd:checked) .evo-end-label-usd { display: block; }
  .evo-eje-x {
    display: flex; justify-content: space-between; margin-top: .3rem;
    font-size: .68rem; color: var(--muted);
  }
  .evo-tooltip {
    position: absolute; display: none; pointer-events: none; z-index: 5;
    transform: translate(-50%, -100%) translateY(-10px);
    background: var(--chart-tooltip-bg); color: #fff; border-radius: var(--radius);
    padding: .35rem .6rem; font-size: .74rem; line-height: 1.3; white-space: nowrap;
    box-shadow: var(--shadow-md);
  }
  .evo-tooltip-val { font-weight: 700; font-variant-numeric: tabular-nums; }
  .evo-tooltip-lbl { color: rgba(255,255,255,.72); font-size: .68rem; }

  /* Cotizado USD por resultado y por mes (12-4) — barras AGRUPADAS
     (no apiladas), specs de marca: grosor <=24px, cap superior 4px,
     clickeables (drill-down htmx -> popup). */
  .evo-resultado-chart-wrap { position: relative; }
  .evo-resultado-legend { display: flex; gap: 1rem; flex-wrap: wrap; }
  .evo-resultado-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .76rem; color: var(--text); font-weight: 500;
  }
  .evo-resultado-chip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

  /* Popup de drill-down (12-4): mismo patrón visual que #pp-xls-dlg
     (overlay fijo + caja centrada). Contenido swapeado por htmx. */
  .cot-modal {
    position: fixed; inset: 0; z-index: 10010; background: rgba(7, 44, 74, .45);
    display: none; align-items: center; justify-content: center; padding: 1rem;
  }
  .cot-modal.is-open { display: flex; }
  .cot-modal-box {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 1.4rem; width: 96vw; max-width: 1180px;
    max-height: 85vh; overflow-y: auto; position: relative;
  }
  .cot-modal-close {
    position: absolute; top: .7rem; right: .7rem; width: 28px; height: 28px;
    border-radius: 999px; border: none; background: var(--bg-raised); color: var(--muted);
    font-size: .9rem; cursor: pointer; line-height: 1;
  }
  .cot-modal-close:hover { background: var(--border); color: var(--text); }
  .cot-modal-title { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--text); padding-right: 2rem; }

  /* --- 12-6: 6 gráficos nuevos (funnel, heatmap, tasa, antigüedad, canal,
     waterfall) — reusan .evolucion/.evo-head como card; specs propias por
     tipo de marca (dataviz skill: grosor de marca fino, gap de 2px entre
     segmentos, labels directos selectivos). */


  /* 3. Heatmap comercial x mes — rampa secuencial de 1 solo hue (azul),
     nunca arcoíris (dataviz skill). */
  .heatmap-wrap { overflow-x: auto; }
  .heatmap-table { border-collapse: separate; border-spacing: 2px; font-size: .72rem; }
  .heatmap-table th { font-weight: 600; color: var(--muted); padding: .25rem .4rem; text-align: center; white-space: nowrap; }
  .heatmap-table th:first-child { text-align: left; color: var(--text); }
  .heatmap-cell {
    width: 2.4rem; height: 1.6rem; text-align: center; border-radius: 3px;
    font-variant-numeric: tabular-nums; color: var(--text); cursor: default;
  }

  /* 6. Tendencia de tasa (línea, single-serie, reusa .evo-svg/.evo-linea) */
  .chart-tasa .evo-punto-hit { fill: transparent; cursor: crosshair; }


  /* 9. USD cotizado por canal — barras horizontales, 1 hue categórico */
  .hbar-chart { display: flex; flex-direction: column; gap: .5rem; }
  /* 2026-09-08: columnas fijas de 7rem reventaban cuando la card pasó a ocupar
     1/4 del ancho; ahora la etiqueta se encoge y el valor toma lo que necesita. */
  .hbar-row { display: grid; grid-template-columns: minmax(3.5rem, 7rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
  .hbar-lbl { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hbar-track { height: 1.2rem; background: var(--bg-raised); border-radius: 4px; overflow: hidden; }
  .hbar-bar { height: 100%; background: var(--series-1); border-radius: 4px; min-width: 2px; transition: width .2s ease; }
  .hbar-val { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }


  .cot-modal-sub { margin: 0 0 .8rem; font-size: .8rem; color: var(--muted); }
  .cot-modal-tabla-wrap { overflow-x: auto; }
  .cot-modal-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
  .cot-modal-tabla th, .cot-modal-tabla td {
    text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border);
  }
  .cot-modal-tabla td:nth-child(2), .cot-modal-tabla td:nth-child(3) { white-space: normal; word-break: break-word; }
  .cot-modal-tabla th:not(.num), .cot-modal-tabla td:not(.num) { white-space: nowrap; }
  .cot-modal-tabla th:nth-child(2), .cot-modal-tabla td:nth-child(2),
  .cot-modal-tabla th:nth-child(3), .cot-modal-tabla td:nth-child(3) { white-space: normal; }
  .cot-modal-tabla th { color: var(--muted); font-weight: 600; font-size: .72rem; }
  .cot-modal-tabla td.num, .cot-modal-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .cot-modal-fila { cursor: pointer; }
  .cot-modal-fila:hover, .cot-modal-fila:focus-visible { background: var(--accent-tint); outline: none; }
  .cot-modal-back {
    background: none; border: none; color: var(--brand-blue); font-size: .82rem;
    cursor: pointer; padding: 0 0 .8rem; font-weight: 600;
  }
  .cot-modal-back:hover { text-decoration: underline; }
  .cot-modal-detalle { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; font-size: .84rem; }
  .cot-modal-detalle dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
  .cot-modal-detalle dd { margin: 0; color: var(--text); }
  .cotizaciones-estado, .cotizaciones-hint { color: var(--muted); font-size: var(--fs-sm); margin: .3rem 0; }
  .cotizaciones-header {
    margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  }
  .cotizaciones-header h1 { margin: 0; }
  /* Story 12-2: botón de actualizar como icono ↻ — el texto "Actualizar
     ahora" queda SOLO en el title (tooltip nativo al hover/focus), sin ocupar
     lugar en la fila. Gira suave al hover como micro-feedback. */
  .btn-refresh {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; padding: 0;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--muted); cursor: pointer;
    font-size: 1.05rem; line-height: 1;
  }
  .btn-refresh:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
  .btn-refresh:hover span { transform: rotate(90deg); }
  .btn-refresh span { display: inline-block; transition: transform .35s ease; }
  .btn-refresh:active span { transform: rotate(180deg); }
  .cotizaciones-filtros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3); margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3); background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  .cotizaciones-filtros fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem; margin: 0; }
  .cotizaciones-filtros legend { font-size: var(--fs-xs); color: var(--muted); padding: 0 .3rem; }
  .filtros-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .5rem; align-content: start; }
  .cotizaciones-filtros .filtro { display: block; width: auto; margin: 0; }
  .filtros-acciones { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; }
  @media (max-width: 640px) {
    .cotizaciones-filtros { grid-template-columns: 1fr; }
    .filtros-grupo { grid-template-columns: 1fr; }
  }

  /* ====================================================================   Story 10-2: licitaciones — sort por columna, edicion inline y toggles.
     =========================================================================== */
  /* Story 12-2: nombre de columna clickeable (abre el filtro, como Precios)
     + botón ⇅ aparte que ordena (antes 10-2 era al revés). */
  .th-label {
    color: inherit; text-decoration: none; cursor: pointer;
    border-radius: 4px; padding: 1px 3px; margin: -1px -3px;
  }
  .th-label:hover { color: var(--accent-strong); background: var(--accent-tint); }
  .th-label-activo { color: var(--accent-strong); font-weight: 700; }
  .th-label-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); margin-left: 4px; vertical-align: middle;
  }
  .th-label-sin-filtro { cursor: default; }
  .th-orden {
    color: var(--muted); text-decoration: none; display: inline-flex;
    align-items: center; white-space: nowrap; margin-left: 3px;
    border-radius: 4px; padding: 1px 3px;
  }
  .th-orden:hover { color: var(--accent-strong); background: var(--accent-tint); }
  .th-orden-activo { color: var(--accent-strong); font-weight: 700; }
  .th-orden .flecha { font-size: .72em; }
  /* Edicion inline de Asignacion/Decision: <details> con badge como summary. */
  details.inline-edit { display: inline-block; }
  details.inline-edit > summary {
    list-style: none; cursor: pointer; display: inline-flex;
  }
  details.inline-edit > summary::-webkit-details-marker { display: none; }
  details.inline-edit[open] > summary { margin-bottom: .3rem; }
  .inline-form { display: flex; gap: .3rem; align-items: center; }
  .inline-select {
    font-size: var(--fs-xs); max-width: 11rem; padding: .15rem .25rem;
  }
  .btn-inline {
    font-size: var(--fs-xs); padding: .15rem .5rem; cursor: pointer;
    background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius);
  }
  .btn-inline:hover { background: var(--accent-strong); }

  /* .th-embudo: reemplazado por .th-label/.th-orden (story 12-2). */

  /* ─── Story 10-3/10-4: tabs por área, badge de filtros y sort en th ─── */
  .cotizaciones-tabs {
    display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem;
  }
  .cotiz-tab {
    padding: .35rem .85rem; border: 1px solid var(--border-strong);
    border-radius: 999px; background: var(--card); color: var(--text);
    text-decoration: none; font-size: .875rem;
  }
  .cotiz-tab:hover { border-color: var(--accent); }
  .cotiz-tab-activa {
    background: var(--accent); border-color: var(--accent);
    color: #fff; font-weight: 600;
  }
  .filtros-badge {
    display: inline-block; margin-left: .35rem; width: 7px; height: 7px;
    border-radius: 50%; background: var(--accent);
  }
  .cotiz-th-sort { color: inherit; text-decoration: none; }
  .cotiz-th-sort:hover { color: var(--accent-strong); }
  .cotiz-sort-ind { font-size: .7rem; margin-left: .25rem; color: var(--accent-strong); }
  /* Story 12-2: mismo patrón nombre=filtro / botón=orden que Precios y
     Licitaciones, aplicado a la tabla de Cotizaciones. */
  .cotiz-th-label {
    font: inherit; background: none; border: none;
    color: inherit; text-decoration: none; cursor: pointer;
    border-radius: 4px; padding: 1px 3px; margin: -1px -3px;
  }
  .cotiz-th-label:hover { color: var(--accent-strong); background: var(--accent-tint); }
  .cotiz-th-label-activo { color: var(--accent-strong); font-weight: 700; }
  .cotiz-th-label-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); margin-left: 4px; vertical-align: middle;
  }
  .cotiz-th-ordbtn {
    color: var(--muted); text-decoration: none; display: inline-flex;
    align-items: center; white-space: nowrap; margin-left: 3px;
    border-radius: 4px; padding: 1px 3px; font-size: .7rem;
  }
  .cotiz-th-ordbtn:hover { color: var(--accent-strong); background: var(--accent-tint); }
  .cotiz-th-ordbtn-activo { color: var(--accent-strong); font-weight: 700; }

  /* ====================================================================   Story 11-2: licitaciones — Monto angosta, Objeto absorbe el ancho.
     ===========================================================================
     Los th/td llevan clase por columna (col-<nombre>, loop generico del
     template). Monto: ancho minimo legible, sin wrap (los numeros de
     moneda ya son tabular-nums); Objeto/Descripcion: el span .truncado
     se estira todo lo que libera Monto (min-width en la celda hace que
     el algoritmo auto de la tabla le asigne el ancho sobrante). */
  .licitaciones-tabla th.col-monto,
  .licitaciones-tabla td.col-monto {
    width: 1%;
    min-width: 7rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .licitaciones-tabla th.col-objeto,
  .licitaciones-tabla td.col-objeto,
  .licitaciones-tabla td.col-descripcion {
    min-width: 24rem;
  }
  /* En pantallas angostas el min-width de Objeto baja para que el scroll
     horizontal no se dispare (el max-width del span .truncado acompana). */
  @media (max-width: 640px) {
    .licitaciones-tabla th.col-monto,
    .licitaciones-tabla td.col-monto { min-width: 5.5rem; }
    .licitaciones-tabla th.col-objeto,
    .licitaciones-tabla td.col-objeto,
    .licitaciones-tabla td.col-descripcion { min-width: 16rem; }
  }
  /* ─── Story 11-3: checkbox "Acceso a Cotizaciones" en el alta del panel ─── */
  .alta-check {
    display: flex; flex-direction: row; align-items: center; gap: .45rem;
  }
  .alta-check input[type="checkbox"] { width: auto; margin: 0; }

  /* Story 12-2: dashboard — TODOS los filtros (área + período) en UNA sola
     línea compacta; wrap solo en viewport angosto. */
  .dash-fila-sup {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .5rem .65rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .dash-fila-sup .cotizaciones-tabs { margin: 0; gap: .35rem; }
  .dash-fila-sep {
    width: 1px; align-self: stretch; min-height: 1.4rem;
    background: var(--border); margin: 0 .1rem;
  }
  .periodo-form {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  }
  .periodo-form .filtro {
    display: inline-flex; margin: 0; min-width: 0;
  }
  .filtro-fecha-mini input {
    padding: .3rem .4rem; font-size: .78rem; width: 8.4rem;
    border: 1px solid var(--border); border-radius: 6px;
  }
  .periodo-form .btn-mini { font-size: .78rem; }
  .periodo-preset { font-size: .76rem; padding: .3rem .65rem; }
  /* Barra de filtros del dashboard (12-5): Unidad de Negocio / Comercial /
     Tipo de Negocio / Canal / Resultado / Cliente — multi-select, hover o
     clic abre el checklist. Mismo patrón visual que .precios-col-filtro. */
  .dbf-bar { display: flex; gap: .4rem; flex-wrap: wrap; }
  .dbf-item { position: relative; }
  .dbf-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 999px;
    padding: .35rem .85rem; font-size: .8rem; color: var(--text); cursor: pointer;
    font-family: inherit; white-space: nowrap;
  }
  .dbf-btn:hover { border-color: var(--border-strong); }
  .dbf-btn-activo { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  .dbf-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--accent);
    color: #fff; font-size: .68rem; font-weight: 700; padding: 0 .3rem;
  }
  .dbf-pop {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: .6rem; width: 15rem;
  }
  .dbf-item.is-open .dbf-pop { display: block; }
  .dbf-buscar {
    width: 100%; box-sizing: border-box; padding: .35rem .5rem; margin-bottom: .4rem;
    border: 1px solid var(--border); border-radius: var(--radius); font-size: .8rem; font-family: inherit;
  }
  .dbf-lista { max-height: 12rem; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; }
  .dbf-opcion {
    display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem;
    border-radius: var(--radius); font-size: .82rem; color: var(--text); cursor: pointer;
  }
  .dbf-opcion:hover { background: var(--bg-raised); }
  .dbf-opcion input { margin: 0; flex-shrink: 0; }
  .dbf-opcion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbf-vacio { margin: .3rem 0; font-size: .8rem; }
  .dbf-acciones { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
  .dbf-limpiar { background: none; border: none; color: var(--muted); font-size: .78rem; cursor: pointer; padding: .2rem .3rem; }
  .dbf-limpiar:hover { color: var(--text); text-decoration: underline; }

  /* ===== Analista / estado del análisis (sprint 13, story 13-3) ============ */
  /* Badge de la tabla: una columna angosta, sin color semántico fuerte — la
     paleta muted del resto del sitio. El significado va en el title. */
  .licitaciones-tabla th.col-analisis,
  .licitaciones-tabla td.col-analisis { width: 1%; white-space: nowrap; text-align: center; }
  .badge-analisis { font-size: .85rem; line-height: 1; }
  .badge-analisis.con { color: var(--accent, #1f4e79); }
  .badge-analisis.sin { color: var(--muted, #9b938a); }

  /* Bloque "Análisis" de la ficha: mismo tono que .detalle-panel.datos. */
  .detalle-panel.analisis .analisis-tabla { width: 100%; border-collapse: collapse; }
  .detalle-panel.analisis .analisis-tabla th { text-align: left; width: 14rem; vertical-align: top;
    padding: .35rem .6rem .35rem 0; font-weight: 600; }
  .detalle-panel.analisis .analisis-tabla td { padding: .35rem 0; vertical-align: top; }
  .detalle-panel.analisis .analisis-tabla tr + tr th,
  .detalle-panel.analisis .analisis-tabla tr + tr td { border-top: 1px solid var(--border, #e6e1da); }
  .detalle-panel.analisis .analisis-sin { color: var(--muted, #9b938a); margin: 0; }

  /* ===== Analista HVAC (sprint 13, story 13-6): sección de hilos ============ */
  /* Misma paleta muted del sitio: superficies card, bordes heredados, acento
     verde solo en el botón y en el estado "Analizando…". */
  .analista-header h1 { margin: 0 0 .2rem; font-size: 1.4rem; }
  .analista-sub { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; }
  .analista-layout { display: flex; gap: 1.2rem; align-items: flex-start; }
  .analista-hilos {
    flex: 0 0 16rem; max-width: 16rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .7rem;
  }
  .analista-btn-nuevo {
    width: 100%; background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius); padding: .45rem .6rem; font-weight: 600;
    font-size: .85rem; cursor: pointer; font-family: inherit;
  }
  .analista-btn-nuevo:hover { background: var(--accent-strong); }
  .analista-hilos-lista { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
  .analista-hilos-lista a {
    display: block; padding: .45rem .5rem; border-radius: var(--radius);
    color: var(--text); text-decoration: none; border: 1px solid transparent;
  }
  .analista-hilos-lista a:hover { background: var(--bg-raised); }
  .analista-hilos-lista a.analista-hilo-activo {
    border-color: var(--border-strong); background: var(--bg-raised);
  }
  .analista-hilo-titulo { display: block; font-weight: 600; font-size: .85rem; }
  .analista-hilo-meta-linea { display: block; color: var(--muted); font-size: .72rem; margin-top: .1rem; }
  .analista-hilo-preview {
    display: block; color: var(--muted); font-size: .75rem; margin-top: .15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .analista-hilo-estado {
    display: inline-block; margin-top: .2rem; font-size: .7rem; font-weight: 600;
    color: var(--accent-strong); background: var(--accent-tint);
    border-radius: 999px; padding: .05rem .45rem;
  }
  .analista-panel { flex: 1 1 auto; min-width: 0; }
  .analista-hilo {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .9rem;
  }
  .analista-hilo-meta { margin: 0 0 .6rem; color: var(--muted); font-size: .75rem; }
  .analista-mensajes { display: flex; flex-direction: column; gap: .5rem; max-height: 28rem; overflow-y: auto; padding-right: .2rem; }
  .analista-msg { border: 1px solid var(--border); border-radius: var(--radius); padding: .45rem .6rem; max-width: 46rem; }
  .analista-msg.user { background: var(--bg-raised); align-self: flex-end; }
  .analista-msg.assistant { background: var(--card); }
  .analista-msg.system { background: var(--warn-bg); }
  .analista-msg-rol {
    display: inline-block; font-size: .68rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem;
  }
  .analista-msg-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
  .analista-jobs { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
  .analista-job { margin: 0; font-size: .82rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
  .analista-job-activo { color: var(--accent-strong); }
  .analista-estado-dot {
    width: .5rem; height: .5rem; border-radius: 999px; background: var(--accent);
    animation: analista-pulso 1.2s ease-in-out infinite;
  }
  @keyframes analista-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  .analista-job-error { color: var(--danger-text); background: var(--danger-bg); border-radius: var(--radius); padding: .35rem .55rem; }
  .analista-job-cancelado { color: var(--muted); }
  .analista-job-form { display: inline; }
  .analista-btn-chico {
    background: var(--card); border: 1px solid var(--border-strong);
    border-radius: var(--radius); padding: .2rem .55rem; font-size: .75rem;
    cursor: pointer; font-family: inherit; color: var(--text);
  }
  .analista-btn-chico:hover { background: var(--bg-raised); }
  .analista-composer { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
  .analista-composer-label { font-size: .78rem; color: var(--muted); }
  .analista-composer textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    padding: .5rem .6rem; font-family: inherit; font-size: .88rem;
  }
  .analista-btn-enviar {
    align-self: flex-end; background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius); padding: .45rem 1rem; font-weight: 600;
    font-size: .85rem; cursor: pointer; font-family: inherit;
  }
  .analista-btn-enviar:hover { background: var(--accent-strong); }
  .analista-aviso {
    margin: 0 0 .5rem; color: var(--warn-text); background: var(--warn-bg);
    border-radius: var(--radius); padding: .35rem .55rem; font-size: .8rem;
  }
  .analista-vacio { color: var(--muted); font-size: .85rem; }
  /* Adjuntos del hilo (13-8): lista compacta colgada del mensaje user y
     artefactos de salida descargables. Mismo lenguaje visual que .insignia. */
  .analista-composer-adjuntos { display: flex; align-items: center; gap: .6rem; justify-content: space-between; flex-wrap: wrap; }
  .analista-composer-adjuntos input[type="file"] { font-size: .78rem; color: var(--muted); max-width: 22rem; }
  .analista-adjuntos { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
  .analista-adjunto { font-size: .78rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
  .analista-adjunto-nombre { font-weight: 600; overflow-wrap: anywhere; }
  .analista-adjunto-meta { color: var(--muted); }
  .analista-adjunto a { color: var(--accent-strong); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; overflow-wrap: anywhere; }
  .analista-adjunto a:hover { text-decoration: underline; }
  .analista-adjunto-icono { font-size: .95rem; }
  .analista-artefactos { margin-top: .7rem; border: 1px dashed var(--border); border-radius: var(--radius); padding: .5rem .65rem; }
  .analista-artefactos-titulo { margin: 0 0 .35rem; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

  /* Re-análisis del asistente en la ficha (story 13-9): reusa la gramática
     de .analisis-tabla (13-3) con rótulo propio para convivir con el bloque
     del pipeline (dos análisis, no uno en lugar del otro). Sin colores
     nuevos: mismos tokens --ok/--warn/--danger que el resto del sitio. */
  .reanalisis-wrapper { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border, #e6e1da); }
  .reanalisis-titulo { margin: 0 0 .55rem; font-size: .95rem; color: var(--muted); }
  .reanalisis-historial { margin: 0 0 .5rem; font-size: .8rem; }
  .reanalisis-historial summary { cursor: pointer; color: var(--muted); }
  .reanalisis-historial-lista { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--muted); }
  .reanalisis-lista { margin: 0; padding-left: 1.1rem; }
  .reanalisis-lista li { margin: .15rem 0; }
  .reanalisis-fuente { color: var(--muted); font-size: .78rem; }
  .reanalisis-materiales { width: 100%; border-collapse: collapse; margin-top: .2rem; }
  .reanalisis-materiales th, .reanalisis-materiales td { text-align: left; padding: .2rem .5rem .2rem 0; border-bottom: 1px solid var(--border, #e6e1da); font-size: .82rem; }
  .reanalisis-materiales thead th { color: var(--muted); font-weight: 600; }
  .badge-recomendacion-cotizar { background: #dbeadd; color: #24512c; }
  .badge-recomendacion-no_cotizar { background: var(--danger-bg, #f6e2e2); color: var(--danger-text, #8a3033); }
  .badge-recomendacion-pendiente { background: #efe7d6; color: #7a5c1e; }
  .badge-severidad-alta { background: var(--danger-bg, #f6e2e2); color: var(--danger-text, #8a3033); }
  .badge-severidad-media { background: #efe7d6; color: #7a5c1e; }
  .badge-severidad-baja { background: var(--ok-bg, #dbeadd); color: #24512c; }

  /* Pantallas angostas: la lista de hilos pasa arriba del panel. */
  @media (max-width: 56rem) {
    .analista-layout { flex-direction: column; }
    .analista-hilos { flex: 1 1 auto; max-width: none; width: 100%; }
  }



  /* Paso 1 del flujo de licitaciones (2026-09-08): ¿se analiza? */
  .badge-analizar-si { background: var(--status-good-tint, #e6f4ea); color: var(--status-good, #1e7b34); }
  .badge-analizar-no { background: var(--bg-raised); color: var(--muted); }





  /* Selector de métrica del heatmap (2026-09-08): Recibidas / Cotizadas /
     Ganadas, en CSS puro — radios ocultos + selector `~` desde el input hasta
     la tabla. Mismo patrón que el toggle Cantidad/USD de 12-3: sin JS, y
     sobrevive a un swap htmx del panel porque no hay estado que reinicializar.

     Los radios viven ANTES de .heatmap-wrap en el DOM y las tablas adentro,
     así que el combinador general `~` los alcanza desde el contenedor común. */
  .hm-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
  .hm-radio { position: absolute; opacity: 0; pointer-events: none; }
  .hm-lbl {
    padding: .18rem .6rem; font-size: var(--fs-xs); color: var(--muted);
    cursor: pointer; user-select: none; white-space: nowrap;
  }
  .hm-lbl + .hm-radio + .hm-lbl { border-left: 1px solid var(--border); }
  .hm-radio:checked + .hm-lbl { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  .hm-radio:focus-visible + .hm-lbl { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* Por defecto sólo se ve la primera (Recibidas, que es la que va `checked`). */
  .hm-tabla { display: none; }
  .evo-head:has(#hm-recibidas:checked) ~ .heatmap-wrap .hm-tabla-recibidas,
  .evo-head:has(#hm-cotizadas:checked) ~ .heatmap-wrap .hm-tabla-cotizadas,
  .evo-head:has(#hm-ganadas:checked)   ~ .heatmap-wrap .hm-tabla-ganadas { display: table; }
}

@layer sistema {
  /* ============================================================================
     agentesCA — Sistema de diseño v4 (rediseño integral 2026-09-08)

     Consola de operaciones. La convención de la categoría, ejecutada en serio:
     rail de navegación persistente, tabla como componente protagonista, y una
     sola gramática para botones, campos, píldoras de estado y superficies.

     Marca: paleta y tipografía del sitio público (cagroup.com.ar), vendorizadas.
     Regla A3 (cero CDN): Montserrat vive en app/static/fonts/, no en Google.

     Elevación declarada UNA vez: lo que está en reposo lleva borde y NADA de
     sombra; la sombra queda para lo que flota sobre la página (popovers,
     modales). Un borde de 1px bajo una sombra difusa es la "tarjeta fantasma".
     ========================================================================== */

  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400;
    font-display: swap; src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500;
    font-display: swap; src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600;
    font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
  @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700;
    font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); }

  :root {
    /* ── superficies ── */
    --bg: #f5f6f7;            /* piso de la página */
    --card: #ffffff;          /* superficie elevada en reposo */
    --bg-raised: #eef1f4;     /* hover / inset / pista de barra */
    --bg-hover: #fafbfc;      /* hover de fila de tabla */
    --text: #1f2c37;
    --muted: #546271;
    --faint: #8897a4;
    --border: #e4e8ec;
    --border-strong: #cfd6dd;

    /* ── marca CA Group (tokens del sitio público) ── */
    --brand-navy: #072c4a;
    --brand-navy-deep: #041e34;
    --brand-blue: #0a3e65;
    --accent: #1e7d36;
    --accent-hover: #239442;
    --accent-strong: #17632b;
    --accent-tint: #e8f3eb;
    --accent-ring: rgba(30, 125, 54, .22);

    /* ── semánticos: vocabulario cerrado, los mismos tres significan lo mismo
          en licitaciones, en cotizaciones y en el dashboard ── */
    --ok-bg: #e8f3eb;      --ok-text: #17632b;
    --warn-bg: #fdf3e0;    --warn-text: #7a5a12;
    --danger-bg: #fceae6;  --danger-text: #8a3226;
    --neutral-bg: #eef1f4; --neutral-text: #546271;

    /* ── escala tipográfica ── */
    --fs-2xs: .6875rem;   /* 11px — etiquetas de píldora */
    --fs-xs: .75rem;      /* 12px — cabeceras de tabla, meta */
    --fs-sm: .8125rem;    /* 13px — cuerpo denso, filas de tabla */
    --fs-md: .875rem;     /* 14px — cuerpo */
    --fs-lg: 1rem;        /* 16px — título de sección */
    --fs-xl: 1.25rem;     /* 20px — título de página */
    --fs-2xl: 1.5rem;     /* 24px — cifra de KPI */
    --lh-tight: 1.25;
    --lh: 1.55;
    --track-tight: -.02em;

    /* ── espaciado ── */
    --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
    --space-4: 1rem;   --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;

    /* ── forma (radios de marca: 4 / 6 / 10 / píldora) ── */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* ── elevación: reposo = borde; flotante = sombra ── */
    --shadow-pop: 0 4px 14px -2px rgba(7, 44, 74, .12), 0 12px 28px -10px rgba(7, 44, 74, .18);
    --shadow-modal: 0 24px 64px -12px rgba(4, 30, 52, .38);
    --shadow-sm: none;   /* retrocompat: la elevación en reposo es el borde */
    --shadow-md: var(--shadow-pop);

    /* ── controles ── */
    --control-h: 2rem;
    --control-h-sm: 1.625rem;
    --focus-ring: 2px solid var(--accent);
    --transition: .12s cubic-bezier(.4, 0, .2, 1);

    /* ── shell ── */
    --rail-w: 14.5rem;

    /* ── series de gráficos (identidad categórica, no marca) ── */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --chart-tooltip-bg: #1f2c37;
    /* status de gráficos: bueno/malo/pendiente, nunca una "serie 4" */
    --status-good: #1e7d36;
    --status-warning: #d99518;
    --status-serious: #d4713f;
    --status-critical: #c0392b;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    align-items: stretch;
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fs-md);
    line-height: var(--lh);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ── superficies del navegador: lo que no dibujamos también lleva el diseño ── */
  ::selection { background: #cfe4d7; color: #12331d; }
  :root { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: var(--border-strong) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }
  :focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

  /* ── tipografía ── */
  h1, h2, h3, h4 { font-weight: 600; letter-spacing: var(--track-tight); line-height: var(--lh-tight); color: var(--text); }
  h1 { font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
  h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
  h3 { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
  p { margin: 0 0 var(--space-3); }
  a { color: var(--accent-strong); text-decoration-thickness: .07em; text-underline-offset: .18em; }
  a:hover { color: var(--accent); }
  .muted { color: var(--muted); }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
  [hidden] { display: none !important; }
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  .saltar {
    position: absolute; left: var(--space-3); top: -3rem; z-index: 100;
    background: var(--card); color: var(--accent-strong); font-size: var(--fs-sm);
    font-weight: 600; padding: .5rem .9rem; border: 1px solid var(--accent);
    border-radius: var(--radius); box-shadow: var(--shadow-pop);
    transition: top var(--transition);
  }
  .saltar:focus { top: var(--space-3); }

  /* ── iconos: sprite SVG propio, trazo 1.5, un solo peso ── */
  .ico {
    width: 1.125rem; height: 1.125rem; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ico-sm { width: .875rem; height: .875rem; }

  /* ============================================================================
     SHELL — rail de navegación persistente + lienzo
     ========================================================================== */
  /* El rail se estira a todo el alto de la página (para que el fondo blanco
     llegue hasta abajo) y su CONTENIDO es lo que queda pegado al viewport. */
  .rail {
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    align-self: stretch;
    background: var(--card);
    border-right: 1px solid var(--border);
    z-index: 40;
  }
  .rail-interior {
    position: sticky;
    top: 0;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-3);
  }
  .rail-marca { display: block; padding: 0 var(--space-2) var(--space-2); }
  .rail-marca img { display: block; width: 8.5rem; height: auto; }
  .rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: var(--space-1); }
  .rail-grupo { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint); padding: var(--space-3) var(--space-2) var(--space-1); }
  .rail-nav a {
    display: flex; align-items: center; gap: .55rem;
    min-height: 2rem; padding: .3rem .55rem;
    border-radius: var(--radius);
    color: var(--muted); text-decoration: none;
    font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
    transition: background var(--transition), color var(--transition);
  }
  .rail-nav a .ico { color: var(--faint); transition: color var(--transition); }
  .rail-nav a:hover { background: var(--bg-raised); color: var(--text); }
  .rail-nav a:hover .ico { color: var(--muted); }
  .rail-nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  .rail-nav a[aria-current="page"] .ico { color: var(--accent); }
  .rail-pie { border-top: 1px solid var(--border); padding-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
  .rail-usuario {
    display: block; padding: 0 var(--space-2);
    font-size: var(--fs-xs); color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rail-salir { display: flex; margin: 0; }
  .rail-salir button {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .3rem .55rem; border: 0; border-radius: var(--radius);
    background: none; color: var(--muted); font: inherit;
    font-size: var(--fs-sm); cursor: pointer; text-align: left;
    transition: background var(--transition), color var(--transition);
  }
  .rail-salir button:hover { background: var(--danger-bg); color: var(--danger-text); }

  main.seccion {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-5) var(--space-5) var(--space-7);
  }
  main.auth {
    flex: 1 1 auto;
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
  }

  /* Angosto: el rail se acuesta arriba y la nav rueda en horizontal.
     Sin JavaScript y sin menú desplegable: son enlaces, siguen siendo enlaces. */
  @media (max-width: 60rem) {
    body { flex-direction: column; }
    .rail {
      flex: none; width: auto; align-self: stretch;
      border-right: 0; border-bottom: 1px solid var(--border);
      position: sticky; top: 0;
    }
    .rail-interior {
      position: static; max-height: none;
      flex-direction: row; align-items: center; gap: var(--space-3);
      padding: var(--space-2) var(--space-3);
    }
    .rail-marca { padding: 0; }
    .rail-marca img { width: 6.25rem; }
    .rail-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: var(--space-1); scrollbar-width: none; }
    .rail-nav::-webkit-scrollbar { display: none; }
    .rail-grupo { display: none; }
    .rail-pie { border-top: 0; padding-top: 0; flex-direction: row; align-items: center; gap: var(--space-2); margin-left: auto; }
    .rail-usuario { display: none; }
    .rail-salir button span { display: none; }
    main.seccion { padding: var(--space-4) var(--space-3) var(--space-6); }
  }

  /* ============================================================================
     CABECERA DE PÁGINA — título, recuento, acción primaria
     ========================================================================== */
  .pagina-cabecera,
  .precios-header, .licitaciones-header, .cotizaciones-header, .detalle-header, .analista-header {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin: 0 0 var(--space-4);
  }
  .pagina-cabecera h1,
  .precios-header h1, .licitaciones-header h1, .cotizaciones-header h1,
  .detalle-header h1, .analista-header h1 {
    margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: var(--track-tight);
  }
  .pagina-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

  /* ============================================================================
     CONTROLES — una sola gramática
     ========================================================================== */
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="date"], input[type="number"], input[type="tel"], select, textarea {
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0 .55rem;
    height: var(--control-h);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  textarea { height: auto; padding: .45rem .6rem; line-height: var(--lh); resize: vertical; }
  select { padding-right: .3rem; }
  input::placeholder, textarea::placeholder { color: var(--faint); }
  input:hover, select:hover, textarea:hover { border-color: var(--faint); }
  input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
  }
  input:disabled, select:disabled, textarea:disabled { background: var(--bg-raised); color: var(--faint); cursor: not-allowed; }

  .btn, .btn-filtrar, .btn-inline, .btn-mini, .pp-btn, .analista-btn-nuevo,
  .analista-btn-enviar, .analista-btn-chico, .comentario-form button,
  .editar-form button, .editar-revertir button, .auditoria-filtros button,
  .login-form button, .pp-btn-upload {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    height: var(--control-h);
    padding: 0 .8rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
    line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .btn-primario, .btn-filtrar, .analista-btn-nuevo, .analista-btn-enviar,
  .comentario-form button, .editar-form button, .auditoria-filtros button,
  .login-form button, .pp-btn-mail {
    background: var(--accent); color: #fff; border-color: var(--accent);
  }
  .btn-primario:hover, .btn-filtrar:hover, .analista-btn-nuevo:hover, .analista-btn-enviar:hover,
  .comentario-form button:hover, .editar-form button:hover, .auditoria-filtros button:hover,
  .login-form button:hover, .pp-btn-mail:hover {
    background: var(--accent-hover); border-color: var(--accent-hover);
  }
  .btn-primario:active, .btn-filtrar:active, .login-form button:active { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn-secundario, .btn-mini, .analista-btn-chico, .pp-btn-xls, .editar-revertir button {
    background: var(--card); border-color: var(--border-strong); color: var(--text);
  }
  .btn-secundario:hover, .btn-mini:hover, .analista-btn-chico:hover, .pp-btn-xls:hover, .editar-revertir button:hover {
    background: var(--bg-raised); border-color: var(--faint);
  }
  .btn-ghost { background: transparent; color: var(--accent-strong); }
  .btn-ghost:hover { background: var(--accent-tint); }
  .btn-danger, .btn-mini-alerta { background: var(--card); border-color: var(--border-strong); color: var(--danger-text); }
  .btn-danger:hover, .btn-mini-alerta:hover { background: var(--danger-bg); border-color: var(--danger-text); }
  .btn:disabled, .btn-mini:disabled, .pp-btn:disabled, button:disabled {
    opacity: .45; cursor: not-allowed;
  }
  .btn-mini, .btn-inline, .analista-btn-chico { height: var(--control-h-sm); padding: 0 .6rem; font-size: var(--fs-xs); }
  .btn-inline { background: var(--accent); color: #fff; border-color: var(--accent); }
  .btn-inline:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn-limpiar, .auditoria-limpiar, .precios-limpiar, .link-button, .dbf-limpiar {
    background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm);
    color: var(--muted); text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
  }
  .btn-limpiar:hover, .auditoria-limpiar:hover, .precios-limpiar:hover, .link-button:hover, .dbf-limpiar:hover { color: var(--text); }
  .precios-limpiar { text-decoration: none; height: var(--control-h-sm); padding: 0 .6rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); }
  .login-form button { width: 100%; }

  /* ============================================================================
     SUPERFICIES — reposo con borde, sin sombra
     ========================================================================== */
  .login-card, .detalle-panel, .kpi, .ranking, .evolucion,
  .tabla-scroll, .filter-bar, .filtro-panel, .dash-fila-sup, .cotizaciones-filtros,
  .precios-toolbar, .analista-hilos, .analista-hilo {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
  }

  .login-card { padding: var(--space-6); width: 100%; max-width: 23rem; }
  .login-card .login-marca { display: block; width: 8.75rem; height: auto; margin: 0 0 var(--space-5); }
  .login-card h1 { font-size: var(--fs-lg); color: var(--text); margin: 0 0 var(--space-1); }
  .login-card .subtitle { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--space-5); }
  .login-form label, .alta-campo { display: block; margin: 0 0 var(--space-1); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
  .login-form input, .alta-campo input { width: 100%; }
  .login-form label + label, .login-form label:not(:first-child) { margin-top: var(--space-3); }
  .login-form button { margin-top: var(--space-5); }
  .codigo-input {
    font-size: var(--fs-xl); font-weight: 600; letter-spacing: .5rem;
    text-align: center; height: 3rem; padding-left: .5rem;
    font-variant-numeric: tabular-nums;
  }
  .mfa-reenviar, .reset-link { margin-top: var(--space-4); text-align: center; font-size: var(--fs-sm); }
  .reset-link a { color: var(--muted); }

  /* ============================================================================
     AVISOS — el problema y la salida, con una sola gramática
     ========================================================================== */
  .aviso, .alert-error, .alert-ok, .aviso-exito, .analista-aviso, .pliego-no {
    display: block; padding: .5rem .75rem;
    border-radius: var(--radius); font-size: var(--fs-sm);
    margin: 0 0 var(--space-3);
  }
  .aviso-ok, .alert-ok, .aviso-exito { background: var(--ok-bg); color: var(--ok-text); }
  .aviso-error, .alert-error, .pliego-no { background: var(--danger-bg); color: var(--danger-text); }
  .aviso-info { background: var(--bg-raised); color: var(--muted); }
  .analista-aviso { background: var(--warn-bg); color: var(--warn-text); }

  /* ============================================================================
     TABLAS — el componente protagonista
     ========================================================================== */
  .tabla-scroll { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 72vh; }
  .licitaciones-tabla, .precios-tabla, .panel-tabla, .auditoria-tabla,
  .cot-modal-tabla, .ranking table, .analisis-tabla {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--fs-sm);
  }
  .licitaciones-tabla th, .precios-tabla th, .panel-tabla th, .auditoria-tabla th,
  .cot-modal-tabla th, .ranking th {
    position: sticky; top: 0; z-index: 2;
    background: var(--card);
    text-align: left; font-weight: 600; font-size: var(--fs-xs);
    color: var(--muted); letter-spacing: .01em;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
  }
  .licitaciones-tabla td, .precios-tabla td, .panel-tabla td, .auditoria-tabla td,
  .cot-modal-tabla td, .ranking td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  .licitaciones-tabla tbody tr:last-child td, .precios-tabla tbody tr:last-child td,
  .panel-tabla tbody tr:last-child td, .auditoria-tabla tbody tr:last-child td,
  .ranking tbody tr:last-child td { border-bottom: 0; }
  .fila-licitacion:hover, .precios-fila:hover, .panel-tabla tbody tr:hover,
  .auditoria-tabla tbody tr:hover { background: var(--bg-hover); }
  td.num, th.num, td.col-monto, th.col-monto { text-align: right; font-variant-numeric: tabular-nums; }
  .licitaciones-vacia, .panel-vacia {
    text-align: center; color: var(--muted); padding: var(--space-6) !important;
    white-space: normal !important;
  }

  /* ============================================================================
     PÍLDORAS DE ESTADO — vocabulario cerrado: el mismo color significa lo mismo
     en licitaciones, en cotizaciones y en el panel
     ========================================================================== */
  .badge, .chip-estado, .insignia, .analista-hilo-estado {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: var(--radius-pill);
    padding: .1rem .5rem;
    font-size: var(--fs-2xs); font-weight: 600; line-height: 1.5;
    white-space: nowrap;
    background: var(--neutral-bg); color: var(--neutral-text);
  }
  .badge-asignado, .badge-decision-cotizar, .chip-estado.estado-activo,
  .badge-analizar-si, .analista-hilo-estado { background: var(--ok-bg); color: var(--ok-text); }
  .badge-sin-asignar, .badge-analizar-no, .chip-estado.estado-inactivo-neutro { background: var(--neutral-bg); color: var(--neutral-text); }
  .badge-decision-pendiente, .chip-estado.estado-pendiente, .insignia { background: var(--warn-bg); color: var(--warn-text); }
  .badge-decision-no_cotizar, .chip-estado.estado-inactivo { background: var(--danger-bg); color: var(--danger-text); }

  /* ============================================================================
     FILTROS — una fila, no un panel lateral
     ========================================================================== */
  .filter-bar, .dash-fila-sup, .precios-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3);
  }
  .chip, .cotiz-tab, .dbf-btn, .periodo-preset {
    display: inline-flex; align-items: center; gap: .35rem;
    height: var(--control-h-sm); padding: 0 .7rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--card); color: var(--text);
    font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .chip:hover, .cotiz-tab:hover, .dbf-btn:hover, .periodo-preset:hover { background: var(--bg-raised); border-color: var(--faint); }
  .chip[aria-expanded="true"], .cotiz-tab-activa, .dbf-btn-activo, .chip-activo {
    background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); font-weight: 600;
  }
  .chip[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .chip[aria-expanded="true"] .chip-dot { background: #fff; }
  .filtro-panel { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-end;
    padding: var(--space-3); margin: 0 0 var(--space-3); border-style: solid; }
  .filtro span { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
  .filtro input, .filtro select { width: 100%; }
  .filtro-check { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
  .filter-bar-sep { flex: 1; }
  .htmx-request .filtros, .htmx-request.filtros { opacity: .55; }
  .htmx-request { transition: opacity var(--transition); }

  /* ============================================================================
     FLOTANTES — lo único que lleva sombra
     ========================================================================== */
  .precios-sugerencias, .precios-col-filtro, .dbf-pop, .pp-toast-flotante {
    box-shadow: var(--shadow-pop); border-color: var(--border);
  }
  .cot-modal-box, #pp-xls-dlg .pp-xls-box, #pp-up-dlg .pp-up-box, #pp-cart {
    box-shadow: var(--shadow-modal);
  }
  .cot-modal, #pp-xls-dlg, #pp-up-dlg { background: rgba(4, 30, 52, .45); }

  /* ============================================================================
     MOVIMIENTO — un solo momento autorado: el avance por las tres puertas
     ========================================================================== */
  @keyframes puerta-abre {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
  .gestion-bloque[data-puerta="abierta"] { animation: puerta-abre .14s cubic-bezier(.16, 1, .3, 1) both; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }

  /* ==========================================================================
     FICHA DE LICITACIÓN — la progresión por las tres puertas
     ======================================================================== */
  .miga { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs);
    color: var(--muted); margin: 0 0 var(--space-2); }
  .miga a { color: var(--muted); text-decoration: none; }
  .miga a:hover { color: var(--accent-strong); text-decoration: underline; }
  .miga-sep { color: var(--border-strong); }

  .detalle-header { display: block; margin-bottom: var(--space-4); }
  .detalle-sub { color: var(--muted); font-size: var(--fs-sm); margin: .2rem 0 0; }
  /* D41: link al portal de origen en la bajada de la ficha. Discreto (es
     navegación, no una acción sobre la obra) pero con subrayado al hover y el
     glifo de "se abre afuera". El fallback a la portada del portal va en gris:
     vale menos que el link a la ficha real y se tiene que notar. */
  .enlace-origen { color: var(--brand-blue); text-decoration: none;
    white-space: nowrap; font-weight: 500; }
  .enlace-origen:hover, .enlace-origen:focus-visible { text-decoration: underline; }
  .enlace-origen[data-tipo="portal"] { color: var(--muted); font-weight: 400; }
  .detalle-panel { padding: var(--space-4) var(--space-5) var(--space-5); margin: 0 0 var(--space-4); }
  .detalle-panel h2 { font-size: var(--fs-md); margin: 0 0 var(--space-3); }
  .detalle-grid { gap: 0 var(--space-5); }
  .detalle-campo { padding: .45rem 0; border-bottom: 1px solid var(--border); }
  .detalle-campo dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faint); }
  .detalle-campo dd { margin: .1rem 0 0; font-size: var(--fs-sm); }
  .detalle-campo .vacio { color: var(--border-strong); }
  .analisis-tabla td, .analisis-tabla th { font-size: var(--fs-sm); }
  .detalle-volver { margin-top: var(--space-5); font-size: var(--fs-sm); }
  .detalle-volver a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
  .detalle-volver a:hover { text-decoration: underline; }

  /* Los tres pasos: una progresión con marcador, conector y estado, no tres
     cajas iguales una al lado de la otra. El estado lo calcula el server. */
  .pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
  .paso {
    counter-increment: paso; position: relative;
    display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: var(--space-3); padding: 0 0 var(--space-5);
  }
  .paso:last-child { padding-bottom: 0; }
  .paso::before {
    content: counter(paso); grid-column: 1; grid-row: 1;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xs); font-weight: 700; line-height: 1;
    border: 1px solid var(--border-strong); background: var(--card); color: var(--faint);
    position: relative; z-index: 1;
  }
  .paso::after {
    content: ""; position: absolute; left: .75rem; top: 1.6rem; bottom: .2rem;
    width: 1px; background: var(--border); transform: translateX(-.5px);
  }
  .paso:last-child::after { display: none; }
  .paso[data-estado="cumplido"]::before { background: var(--accent); border-color: var(--accent); color: #fff; }
  .paso[data-estado="cumplido"]::after { background: var(--accent); opacity: .3; }
  .paso[data-estado="activo"]::before { border-color: var(--accent); color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
  .paso[data-estado="bloqueado"] .gestion-bloque { opacity: .55; }
  .paso > .gestion-bloque { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; padding-top: .1rem; }
  .gestion-bloque h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin: 0 0 var(--space-2); }
  .gestion-bloque p { font-size: var(--fs-sm); margin: 0 0 var(--space-2); }
  .gestion-pendiente, .gestion-nota, .gestion-placeholder { color: var(--muted); font-size: var(--fs-sm); }
  .gestion-placeholder { font-style: normal; }
  .decidir-form, .asignar-form, .editar-form, .editar-revertir, .auditoria-filtros {
    display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; margin: 0;
  }
  .decidir-label, .asignar-label, .editar-form label, .editar-revertir label, .auditoria-filtros label {
    display: flex; flex-direction: column; gap: .2rem;
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  }
  .comentarios-lista li { border-bottom: 1px solid var(--border); padding: var(--space-2) 0; }
  .comentarios-lista li:last-child { border-bottom: 0; }
  .comentario-form { margin-top: var(--space-3); display: flex; flex-direction: column;
    gap: var(--space-2); max-width: 34rem; align-items: flex-start; }
  .comentario-form textarea { width: 100%; }
  .comentario-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
    text-transform: none; letter-spacing: 0; }

  /* ==========================================================================
     TABLA DE LICITACIONES — que las columnas de gestión entren en pantalla
     ======================================================================== */
  .licitaciones-tabla th.col-objeto, .licitaciones-tabla td.col-objeto,
  .licitaciones-tabla td.col-descripcion { min-width: 15rem; }
  .licitaciones-tabla td .truncado { max-width: 19rem; }
  .licitaciones-tabla td .hora { color: var(--faint); font-size: var(--fs-xs); margin-left: .3rem; }
  .licitaciones-tabla th.col-monto, .licitaciones-tabla td.col-monto { min-width: 6rem; }
  .th-label, .cotiz-th-label, .precios-th-label { font-weight: 600; }
  .th-orden, .cotiz-th-ordbtn, .precios-sortbtn { display: inline-flex; align-items: center; }
  .th-orden .ico, .cotiz-th-ordbtn .ico, .precios-sortbtn .ico { width: .75rem; height: .75rem; stroke-width: 2; }
  .badge-analisis { display: inline-flex; align-items: center; justify-content: center; }
  .badge-analisis .ico { width: .875rem; height: .875rem; stroke-width: 2.25; }
  .badge-analisis.con { color: var(--accent); }
  .badge-analisis.sin { color: var(--border-strong); }
  details.inline-edit > summary { list-style: none; cursor: pointer; display: inline-flex; }
  details.inline-edit > summary::-webkit-details-marker { display: none; }
  details.inline-edit > summary:hover .badge { box-shadow: 0 0 0 2px var(--accent-ring); }

  /* ==========================================================================
     AJUSTES DE LOTE — revisión visual 2026-09-08
     ======================================================================== */
  /* Títulos de card: una talla menos que un título de sección de página. */
  .evolucion h2, .ranking h2, .detalle-panel h2, .cot-modal-title { font-size: var(--fs-md); }

  /* KPIs: la cifra nunca se parte en dos líneas y la etiqueta no desborda. */
  /* Filas parejas: auto-fit dejaba el sexto KPI huérfano en una segunda fila.
     Las columnas se declaran por breakpoint para que 6 tiles entren siempre
     en 2 filas de 3 (o en una sola fila en pantallas muy anchas). */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  @media (min-width: 46rem) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 100rem) {
    .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .kpi-num { font-size: var(--fs-xl); }
  }
  .kpi { padding: var(--space-3) var(--space-4); gap: .2rem; min-height: 5.5rem; justify-content: center; }
  .kpi-num { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--track-tight);
    line-height: 1.1; white-space: nowrap; }
  .kpi-lbl { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
  .kpi-acento { border-color: var(--accent); background: var(--accent-tint); }
  .kpi-acento .kpi-num { color: var(--accent-strong); }

  /* Alta de usuario: el check y su etiqueta en la misma línea. */
  .alta-check { display: flex; flex-direction: row; align-items: center; gap: .45rem;
    font-weight: 500; color: var(--text); font-size: var(--fs-sm); }
  .alta-check input[type="checkbox"] { width: auto; margin: 0; }
  .alta-form { max-width: 26rem; }
  .panel-hola { font-size: var(--fs-md); color: var(--muted); margin: -.25rem 0 var(--space-5); }
  .panel-hint { color: var(--muted); font-size: var(--fs-xs); margin: var(--space-2) 0 var(--space-5); max-width: 52rem; }
  .panel-acciones { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
  .panel-tipo-select { max-width: 9.5rem; height: var(--control-h-sm); font-size: var(--fs-xs); }

  /* Eje de meses: 12 etiquetas no entran pegadas — se achican y respiran. */
  .evo-eje-x { font-size: var(--fs-2xs); color: var(--faint); gap: .15rem; overflow: hidden; }
  .evo-eje-x span { white-space: nowrap; }
  .heatmap-table { font-size: var(--fs-xs); }
  .heatmap-cell { border-radius: var(--radius-sm); }
  .hm-toggle { border-color: var(--border-strong); }
  .hm-radio:checked + .hm-lbl { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }

  /* Placeholder de campo vacío: legible, sin competir con el dato real. */
  .detalle-campo .vacio { color: var(--muted); }

  /* Botón de refresco: icono real, no una flecha de texto. */
  .btn-refresh { width: 1.75rem; height: 1.75rem; }
  .btn-refresh .ico { width: 1rem; height: 1rem; }

  /* Tabla de licitaciones: las columnas de gestión tienen que entrar. */
  .licitaciones-tabla { font-size: var(--fs-xs); }
  .licitaciones-tabla th, .licitaciones-tabla td { padding: .4rem .5rem; }
  .licitaciones-tabla th.col-objeto, .licitaciones-tabla td.col-objeto,
  .licitaciones-tabla td.col-descripcion { min-width: 11rem; }
  .licitaciones-tabla td .truncado { max-width: 15rem; }
  .licitaciones-tabla td.col-asignacion, .licitaciones-tabla td.col-decision { min-width: 6rem; }
  .inline-select { max-width: 9rem; height: var(--control-h-sm); font-size: var(--fs-xs); }

  /* Analista: el título y su explicación se apilan, no compiten en una fila. */
  .analista-header { display: block; margin-bottom: var(--space-4); }
  .analista-sub { color: var(--muted); font-size: var(--fs-sm); margin: .2rem 0 0; max-width: 60ch; }
  .analista-layout { gap: var(--space-4); }
  .analista-hilos { padding: var(--space-3); }
  .analista-hilo { padding: var(--space-4); }
  .analista-vacio { color: var(--muted); font-size: var(--fs-sm); }
  .analista-msg { border-radius: var(--radius); font-size: var(--fs-sm); }
  .analista-msg-rol { font-size: var(--fs-2xs); letter-spacing: .05em; color: var(--faint); }

  /* Cotizaciones: la tabla respira dentro de su tarjeta. */
  .cotizaciones-estado { margin: 0 0 var(--space-2); font-size: var(--fs-xs); }
  .cotizaciones-resultados .tabla-scroll { margin-top: var(--space-2); }
  .cotiz-th-label, .th-label { color: inherit; }
}

/* ==========================================================================
   Addendum 2026-09-09 (13-20/13-21/13-22/13-23/13-24) — acciones rápidas de
   la tabla + toggles on/off + multiselección. Va AL FINAL a propósito: el
   CSS gana por cascada (misma decisión del rediseño 9-1).
   ========================================================================== */

/* 13-21 (D25): columna "Analizar" — misma compresión que Asignación/Decisión. */
  .licitaciones-tabla th.col-gestion,
  .licitaciones-tabla td.col-gestion {
    white-space: normal; min-width: 6rem;
  }
  .badge-sin-definir { background: var(--neutral-bg); color: var(--neutral-text); }

/* 13-22/13-23 (D26-D29): toggle on/off CSS puro — input nativo oculto +
   label-chip hermano (mismo selector que el hm-toggle del heatmap). El estado
   AUTORITATIVO es server-side (data-filtro-activo); el :checked solo pinta. */
  .filtro-toggle { display: inline-flex; align-items: center; }
  .filtro-toggle input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
  }
  .filtro-toggle label.chip { cursor: pointer; user-select: none; }
  /* 2026-09-18: el estado del toggle se ve en el FONDO, no solo en el borde.
     Lo tiene que pintar el :checked y no el .chip-activo del server: al
     clickear un chip, htmx reemplaza SOLO #licitaciones-resultados y la barra
     de filtros no se re-renderiza, asi que hasta acá el chip quedaba con el
     fondo viejo y el unico cambio visible era 1px de borde. Mismo tratamiento
     que .chip-multi:has(input:checked). Los atributos del server
     (data-filtro-activo, .chip-activo, .chip-dot) se siguen renderizando
     igual: son el contrato de los tests 3-2, solo dejan de ser lo que pinta. */
  .filtro-toggle label.chip {
    background: var(--card); border-color: var(--border-strong);
    color: var(--text); font-weight: 500;
  }
  .filtro-toggle input[type="checkbox"]:checked + label.chip {
    background: var(--accent-tint); border-color: var(--accent);
    color: var(--accent-strong); font-weight: 600;
  }
  .filtro-toggle input[type="checkbox"]:checked + label.chip .chip-dot {
    background: var(--accent-strong);
  }
  .filtro-toggle input[type="checkbox"]:not(:checked) + label.chip .chip-dot {
    background: transparent;
  }
  .filtro-toggle input[type="checkbox"]:focus-visible + label.chip {
    outline: 2px solid var(--accent); outline-offset: -2px;
  }

/* 13-24 (D30): multiselección por checkboxes-chip dentro del panel. */
  .filtro-multi {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  }
  .filtro-multi-label {
    font-size: var(--fs-xs); color: var(--muted); min-width: 6rem;
  }
  .chip-multi {
    display: inline-flex; gap: .3rem; align-items: center; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px;
    padding: .25rem .6rem; font-size: .8rem;
  }
  .chip-multi input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
  }
  .chip-multi:hover { border-color: var(--accent); }
  .chip-multi:has(input:checked) {
    border-color: var(--accent); background: var(--accent-tint);
    color: var(--accent-strong); font-weight: 600;
  }
  .chip-multi:has(input:checked) .chip-dot { background: var(--accent-strong); }
  .chip-multi:has(input:focus-visible) {
    outline: 2px solid var(--accent); outline-offset: -2px;
  }
  .chip-multi .chip-dot { width: 5px; height: 5px; border-radius: 50%;
    background: transparent; display: inline-block; }

  /* --- Story 13-22/13-25: Ajustes del análisis + feedback ------------------ */
  .ajustes-migas { margin: 0 0 .3rem; font-size: .8rem; color: var(--muted); }
  .ajustes-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 1px solid var(--border, #ddd); }
  .ajustes-tabs a { padding: .45rem .8rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
  .ajustes-tabs a.activo { color: var(--text, inherit); border-bottom-color: var(--accent, #2f6f4a); font-weight: 600; }
  .ajustes-export { font-size: .8rem; color: var(--muted); margin: 0 0 1rem; }
  .ajustes-export-warn { color: var(--danger-text, #8a2b2b); }
  .ajustes-ruta { font-family: ui-monospace, monospace; font-size: .75rem; }
  .ajustes-intro { max-width: 70ch; font-size: .9rem; }
  .ajustes-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
  .ajustes-col textarea, .ajustes-una textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
  .ajustes-una { max-width: 80ch; margin-bottom: 1.5rem; }
  .ajustes-n { color: var(--muted); font-weight: 400; font-size: .85rem; }
  .ajustes-ayuda { font-size: .8rem; color: var(--muted); margin: .2rem 0 .5rem; }
  .ajustes-check { display: block; font-size: .8rem; margin: .4rem 0; }
  .ajustes-meta { font-size: .75rem; color: var(--muted); margin: .4rem 0 0; }
  .ajustes-hist summary { cursor: pointer; font-size: .8rem; color: var(--muted); }
  .ajustes-hist li { margin: .4rem 0; font-size: .8rem; }
  .ajustes-hist-cab { font-weight: 600; margin-right: .5rem; }
  .ajustes-diff-mas { color: var(--ok-text, #2f4a35); margin-right: .6rem; }
  .ajustes-diff-menos { color: var(--danger-text, #8a2b2b); margin-right: .6rem; }
  .ajustes-diff-igual { color: var(--muted); }
  .ajustes-hist-texto { white-space: pre-wrap; background: var(--bg-raised); padding: .4rem .6rem; font-size: .78rem; max-height: 8rem; overflow: auto; }
  .ajustes-lecciones { padding-left: 1.4rem; }
  .ajustes-feedback td, .ajustes-feedback th { font-size: .8rem; vertical-align: top; }
  .analista-link-ajustes { font-weight: 600; text-decoration: none; }
  .feedback-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 0; font-size: .85rem; }
  .feedback-form { display: flex; gap: .3rem; align-items: center; margin: 0; }
  .feedback-comentario { min-width: 16rem; font-size: .8rem; }
  .feedback-activo { outline: 2px solid var(--accent, #2f6f4a); }
  .feedback-aviso { color: var(--muted); font-size: .78rem; }

/* ============================================================================
   DASHBOARD COMERCIAL v2 — rediseño 2026-09-12
   Jerarquía en cinco actos: KPIs con variación y sparkline → evolución
   apilada por desenlace + funnel del período → tasa mensual + pipeline
   abierto → comerciales → orígenes + clientes nuevos. Mismo @layer sistema
   (bloques con el mismo nombre se concatenan), tokens y gramática de DESIGN.md.
   ========================================================================== */
@layer sistema {
  :root {
    /* Segmento "Sin respuesta" del gráfico principal: gris DELIBERADO — en el
       vocabulario cerrado de la app el gris es "sin estado", y acá marca el
       desenlace muerto. No es un slot categórico (el validador de paleta lo
       marcaría por chroma): la identidad la refuerzan leyenda, tooltip y el
       drill-down a tabla. CVD del resto de la pila validado: peor par
       ámbar↔verde ΔE 14,2 (protan) — scripts/validate_palette.js. */
    --seg-sin-respuesta: #8699ad;
    /* Escalón claro del embudo (rampa ordinal de series-1, validada:
       #8db7e5 → #2a78d6, contraste del extremo claro 2,09:1). */
    --series-1-suave: #8db7e5;
  }

  /* ── encabezado: título + frescura del dato ─────────────────────────── */
  .dash-header { align-items: flex-start; }
  .dash-header > div { margin-right: auto; }
  .dash-sync { margin: .15rem 0 0; color: var(--faint); font-size: var(--fs-xs); }

  /* ── grilla de 12 columnas: cada card declara cuánto merece ─────────── */
  .dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-3);
  }
  .dash-grid > section { grid-column: 1 / -1; padding: var(--space-4) var(--space-5) var(--space-5); }
  @media (min-width: 680px) and (max-width: 1079.98px) {
    .dash-grid > .d-span-4, .dash-grid > .d-span-5 { grid-column: span 6; }
  }
  @media (min-width: 1080px) {
    .dash-grid > .d-span-8 { grid-column: span 8; }
    .dash-grid > .d-span-7 { grid-column: span 7; }
    .dash-grid > .d-span-5 { grid-column: span 5; }
    .dash-grid > .d-span-4 { grid-column: span 4; }
  }
  .card-sub { margin: .15rem 0 0; color: var(--muted); font-size: var(--fs-xs); max-width: 62ch; }
  .evo-head { align-items: flex-start; margin-bottom: var(--space-3); }

  /* ── KPIs: etiqueta + delta, cifra, contexto y sparkline ────────────── */
  .kpi { position: relative; gap: .3rem; justify-content: flex-start; min-height: 6.75rem; }
  .kpi-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .3rem .6rem; flex-wrap: wrap;
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  }
  /* La cifra grande va en dígitos proporcionales: tabular-nums es para
     columnas que alinean, no para un display de 24px (se afloja el "1"). */
  .kpi-num { font-variant-numeric: normal; font-feature-settings: normal; }
  .kpi-sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
  .kpi-alerta { color: var(--warn-text); font-weight: 600; }
  .kpi-delta {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: var(--fs-2xs); font-weight: 700; line-height: 1.4;
    padding: 0 .4rem; border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .kpi-delta[data-buena="true"] { background: var(--ok-bg); color: var(--ok-text); }
  .kpi-delta[data-buena="false"] { background: var(--danger-bg); color: var(--danger-text); }
  .kpi-delta svg { width: 7px; height: 7px; fill: currentColor; flex: none; }
  .kpi-delta svg.abajo { transform: rotate(180deg); }
  .kpi-delta em { font-style: normal; font-weight: 500; opacity: .8; }
  .kpi-spark { width: 100%; height: 1.6rem; margin-top: auto; display: block; overflow: visible; }
  .kpi-spark polyline {
    fill: none; stroke: var(--faint); stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  }
  .kpi-spark circle { fill: var(--series-1); stroke: var(--card); stroke-width: 1.5; }
  .kpi-acento .kpi-spark circle { fill: var(--accent-strong); }

  /* ── evolución mensual (variante elegida 2026-09-14): filas por mes ──
     barra apilada horizontal + números exactos. El .stk-gridline y el
     .stk-mes también los usa el funnel mensual. */
  .stk-body-cant { display: none; }
  .chart-evolucion:has(#evo-modo-cant:checked) .stk-body-usd { display: none; }
  .chart-evolucion:has(#evo-modo-cant:checked) .stk-body-cant { display: block; }
  .stk-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
  .stk-gridline span {
    position: absolute; right: calc(100% + .5rem); top: 0; transform: translateY(-50%);
    font-size: var(--fs-2xs); color: var(--faint); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .stk-seg { border: none; padding: 0; margin: 0; cursor: pointer; display: block; transition: filter var(--transition); }
  .stk-seg:hover, .stk-seg:focus-visible, .stk-seg.is-hover { filter: brightness(1.12); }
  .stk-seg:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
  .stk-mes {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: .35rem; font-size: var(--fs-2xs); color: var(--faint); white-space: nowrap;
  }
  .evt-scroll { overflow-x: auto; }
  .evt-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
  .evt-tabla thead th {
    color: var(--muted); font-weight: 600; font-size: var(--fs-xs);
    padding: .3rem .5rem; border-bottom: 1px solid var(--border-strong);
    text-align: left; white-space: nowrap;
  }
  .evt-tabla thead th[title] { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: .2em; }
  .evt-tabla td, .evt-tabla tbody th { padding: .32rem .5rem; border-bottom: 1px solid var(--border); }
  .evt-tabla tbody tr:last-child td, .evt-tabla tbody tr:last-child th { border-bottom: 0; }
  .evt-tabla tbody tr:hover { background: var(--bg-hover); }
  .evt-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .evt-mes { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; text-align: left; }
  .evt-total { font-weight: 700; }
  .evt-cero { color: var(--border-strong); }
  .evt-celda-barra { width: 36%; min-width: 11rem; }
  .evt-track { background: var(--bg-raised); border-radius: var(--radius-sm); height: 1rem; }
  .evt-bar { display: flex; gap: 2px; height: 100%; min-width: 4px; }
  .evt-bar .stk-seg { min-width: 2px; height: 100%; flex-basis: 0; }
  .evt-bar .stk-seg:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .evt-bar .stk-seg:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .evt-bar .stk-seg:only-child { border-radius: var(--radius-sm); }

  /* ── funnel de conversión por mes (2026-09-13): series ANIDADAS ─────── */
  .fm-legend { margin-bottom: var(--space-2); }
  .fm-plot {
    position: relative; height: 11rem;
    margin: var(--space-2) 0 1.6rem 2.2rem;
    border-bottom: 1px solid var(--border-strong);
  }
  .fm-cols { display: flex; height: 100%; align-items: flex-end; gap: 2px; }
  .fm-col { flex: 1; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: var(--radius-sm); }
  .fm-col:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
  .fm-track { position: relative; width: 100%; max-width: 22px; height: 100%; }
  .fm-bar { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px; border-radius: 4px 4px 0 0; }
  /* La card es angosta (span 4): con 12 meses las etiquetas se pisan —
     se muestra una por medio SIEMPRE en este gráfico (el title del hover
     y el tooltip llevan el mes exacto). */
  .chart-funnel-mes .stk-mes { display: none; }
  .chart-funnel-mes .fm-col:nth-child(2n+1) .stk-mes { display: block; }
  .fm-rec { background: var(--series-1-suave); }
  .fm-cot { background: var(--series-1); }
  .fm-gan { background: var(--status-good); }

  /* ── tasa de conversión: eje real, promedio de referencia ───────────── */
  .tasa-plot { position: relative; margin-left: 2.6rem; }
  .tasa-plot .evo-svg { height: 11.5rem; }
  .tasa-grid { stroke: var(--border); stroke-width: .5; shape-rendering: crispEdges; }
  .tasa-prom { stroke: var(--faint); stroke-width: 1; shape-rendering: crispEdges; }
  .tasa-eje-y {
    position: absolute; right: calc(100% + .45rem); top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: var(--fs-2xs); color: var(--faint); text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .tasa-eje-y span { transform: translateY(-50%); line-height: 1; }
  .tasa-eje-y span:first-child { transform: translateY(-15%); }
  .tasa-eje-y span:last-child { transform: translateY(-85%); }
  .tasa-prom-lbl {
    position: absolute; right: 0;
    font-size: var(--fs-2xs); color: var(--muted); background: var(--card);
    padding: 0 .25rem; line-height: 1.4; pointer-events: none;
  }
  .tasa-wrap .evo-eje-x { margin-left: 2.6rem; }

  /* ── pipeline abierto por antigüedad (USD manda, la cantidad acompaña) ─ */
  .antig-chart { display: flex; align-items: flex-end; gap: .9rem; height: 11rem; padding-top: .4rem; }
  .antig-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; justify-content: flex-end; }
  .antig-val { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; height: 1.1em; }
  .antig-track { width: 100%; max-width: 3rem; flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--border-strong); }
  .antig-bar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; }
  .antig-lbl { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; margin-top: .1rem; }
  .antig-n { font-size: var(--fs-2xs); color: var(--faint); }

  /* ── conversión por comercial: fila con barra de magnitud inline ────── */
  .rk { display: flex; flex-direction: column; gap: .65rem; }
  .rk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .05rem .7rem; align-items: baseline; }
  .rk-nombre { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-datos { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rk-datos b { color: var(--text); font-weight: 700; }
  .rk-tasa { grid-column: 2; grid-row: 2; font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; }
  .rk-tasa em { font-style: normal; color: var(--faint); }
  .rk-track { grid-column: 1; grid-row: 2; align-self: center; height: 6px; background: var(--bg-raised); border-radius: 3px; }
  .rk-bar { height: 100%; background: var(--series-1); border-radius: 3px; min-width: 2px; }

  /* ── orígenes del negocio: una card, cuatro dimensiones en tabs ─────── */
  .org-panel { display: none; }
  .chart-origenes:has(#org-area:checked)    .org-panel-area,
  .chart-origenes:has(#org-tipo:checked)    .org-panel-tipo,
  .chart-origenes:has(#org-canal:checked)   .org-panel-canal,
  .chart-origenes:has(#org-cliente:checked) .org-panel-cliente { display: block; }
  .chart-origenes .hbar-row { grid-template-columns: minmax(4.5rem, 9rem) minmax(0, 1fr) auto; }

  /* ── clientes nuevos: columnas chicas + quién los trajo ─────────────── */
  .mini-cols { display: flex; align-items: flex-end; gap: .3rem; height: 7.5rem; padding-top: .3rem; }
  .mini-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; height: 100%; justify-content: flex-end; }
  .mini-val { font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; height: 1em; }
  .mini-track { position: relative; width: 100%; max-width: 1.7rem; flex: 1; border-bottom: 1px solid var(--border-strong); }
  .mini-bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--series-1); border-radius: 3px 3px 0 0; min-height: 1px; }
  .mini-lbl { font-size: var(--fs-2xs); color: var(--faint); white-space: nowrap; }
  .nuevos-tops { display: flex; flex-direction: column; gap: .35rem; margin: var(--space-3) 0 0; }
  .nuevos-tops > div { display: flex; gap: .6rem; align-items: baseline; font-size: var(--fs-sm); }
  .nuevos-tops dt {
    flex: none; min-width: 6rem;
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faint);
  }
  .nuevos-tops dd { margin: 0; color: var(--muted); }
  .nuevos-tops b { color: var(--text); font-variant-numeric: tabular-nums; }

  /* ── estado vacío con salida, no nueve cards diciendo "sin datos" ───── */
  .dash-vacio {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5); text-align: center;
  }
  .dash-vacio h2 { margin: 0 0 var(--space-2); }
  .dash-vacio p { color: var(--muted); margin: 0 0 var(--space-4); }

  /* ── pie de higiene de datos ────────────────────────────────────────── */
  .dash-pie {
    display: flex; flex-wrap: wrap; gap: .3rem var(--space-4);
    margin: 0 0 var(--space-4); color: var(--faint); font-size: var(--fs-xs);
  }

  /* ── responsive fino ────────────────────────────────────────────────── */
  @media (max-width: 479.98px) {
    .kpis { grid-template-columns: minmax(0, 1fr); }
    .kpi-num { font-size: var(--fs-xl); }
  }
  @media (max-width: 679.98px) {
    /* La mitad de las etiquetas del eje X alcanza en un viewport angosto;
       con space-between las impares quedan en su posición real. */
    .tasa-wrap .evo-eje-x span:nth-child(2n) { display: none; }
    .evt-tabla { min-width: 30rem; font-size: var(--fs-xs); }
    .stk-mes { display: none; }
    .fm-col:nth-child(2n+1) .stk-mes { display: block; }
    .antig-chart { gap: .5rem; height: 9rem; }
    .mini-lbl { display: none; }
    .mini-col:nth-child(2n+1) .mini-lbl { display: block; }
    .kpi { min-height: 0; }
    .rk-nombre { white-space: normal; }
  }
}

/* ==========================================================================
   PRECIOS — rediseño integral de la sección (2026-09-13).
   Dos vistas (Catálogo | Excluidos), exclusiones gestionables, carrito en
   panel lateral (adiós FAB), historial con variación, iconos del sprite.
   Va en @layer sistema: la capa heredado ya no tiene CSS de esta sección.
   ========================================================================== */
@layer sistema {

  /* ── Cabecera: título + metadatos del dato; acciones a la derecha ── */
  .precios-header { align-items: flex-start; }
  .precios-titulo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .precios-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2); margin: 0;
    font-size: var(--fs-xs); color: var(--muted);
  }
  .precios-estado { color: var(--muted); }
  .precios-estado.estado-error {
    color: var(--danger-text); background: var(--danger-bg);
    padding: .15rem .6rem; border-radius: var(--radius-pill);
  }
  .precios-tc-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    height: var(--control-h-sm); padding: 0 .65rem;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--bg-raised); color: var(--muted);
    font-size: var(--fs-xs); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .precios-tc-badge.precios-tc-warning {
    background: var(--warn-bg); color: var(--warn-text); border-color: transparent;
  }
  .precios-acciones {
    margin-left: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  }

  /* Alertas: checkbox como switch de verdad (estado visible de un vistazo). */
  .pp-alerta {
    display: inline-flex; align-items: center; gap: .4rem;
    height: var(--control-h); padding: 0 .5rem;
    border-radius: var(--radius);
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
    cursor: pointer; user-select: none;
  }
  .pp-alerta:hover { background: var(--bg-raised); }
  .pp-alerta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .pp-alerta-pista, .excl-switch-pista {
    flex: none; width: 1.9rem; height: 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    position: relative;
    transition: background var(--transition);
  }
  .pp-alerta-pista::after, .excl-switch-pista::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: .78rem; height: .78rem; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(7, 44, 74, .3);
    transition: transform var(--transition);
  }
  .pp-alerta input:checked ~ .pp-alerta-pista,
  .excl-switch input:checked ~ .excl-switch-pista { background: var(--accent); }
  .pp-alerta input:checked ~ .pp-alerta-pista::after,
  .excl-switch input:checked ~ .excl-switch-pista::after { transform: translateX(.78rem); }
  .pp-alerta input:focus-visible ~ .pp-alerta-pista,
  .excl-switch input:focus-visible ~ .excl-switch-pista {
    outline: var(--focus-ring); outline-offset: 2px;
  }
  .pp-alerta input:disabled ~ .pp-alerta-pista { opacity: .45; }
  .pp-alerta:has(input:disabled) { cursor: default; color: var(--faint); }
  .pp-alerta:has(input:disabled):hover { background: transparent; }

  /* Carrito: botón de header con contador (el panel es un drawer lateral). */
  .pp-cart-btn { position: relative; }
  .pp-cart-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
    border-radius: var(--radius-pill);
    background: var(--accent); color: #fff;
    font-size: var(--fs-2xs); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .pp-btn-upload { background: var(--accent); border-color: var(--accent); color: #fff; }
  .pp-btn-upload:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

  /* ── Tabs de vista (misma píldora que las tabs de cotizaciones) ── */
  .precios-tabs {
    display: flex; align-items: center; gap: var(--space-1);
    margin: 0 0 var(--space-3);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
  }
  .precios-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    height: var(--control-h); padding: 0 .8rem;
    border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--muted);
    font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .precios-tab:hover { background: var(--bg-raised); color: var(--text); }
  .precios-tab[aria-selected="true"] {
    background: var(--accent-tint); color: var(--accent-strong); font-weight: 600;
  }
  .precios-tab-n {
    font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--bg-raised); color: var(--muted);
    border-radius: var(--radius-pill); padding: .1rem .45rem;
  }
  .precios-tab[aria-selected="true"] .precios-tab-n { background: #fff; color: var(--accent-strong); }

  /* ── Toolbar del catálogo (la tarjeta de filter-bar la da la gramática) ── */
  .precios-toolbar { margin: 0 0 var(--space-3); }
  .precios-search { position: relative; flex: 1 1 20rem; max-width: 38rem; min-width: 0; }
  .precios-search-ico {
    position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
    width: .95rem; height: .95rem; color: var(--faint); pointer-events: none;
  }
  .precios-search input { width: 100%; padding-left: 2rem; }
  .precios-sugerencias {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 50; margin: 0; padding: .25rem; list-style: none;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); max-height: 19rem; overflow-y: auto;
  }
  .precios-sugerencia {
    padding: .4rem .55rem; font-size: var(--fs-sm); cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .precios-sugerencia:hover, .precios-sugerencia.is-activa {
    background: var(--accent-tint); color: var(--accent-strong);
  }
  .precios-cont { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .precios-acciones-sep { flex: 1; }

  /* Chips de filtros activos (fila propia, solo cuando hay). */
  .precios-filtros {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
    font-size: var(--fs-xs);
  }
  .precios-filtros-lbl { color: var(--faint); font-weight: 600; }
  .precios-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .precios-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    height: var(--control-h-sm); padding: 0 .3rem 0 .7rem;
    border: 1px solid var(--accent); border-radius: var(--radius-pill);
    background: var(--accent-tint); color: var(--accent-strong);
    font-size: var(--fs-xs); font-weight: 600;
  }
  .precios-chip-lbl { font-weight: 700; }
  .precios-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; padding: 0;
    border: none; border-radius: 50%;
    background: transparent; color: var(--accent-strong); cursor: pointer;
  }
  .precios-chip-x:hover { background: var(--accent); color: #fff; }
  .precios-chip-x .ico { width: .7rem; height: .7rem; }

  /* ── Tabla del catálogo ── */
  .precios-tabla-scroll { max-height: none; }
  .precios-tabla { min-width: 56rem; }
  .precios-tabla td.num { white-space: nowrap; }
  /* Encabezados de columnas numéricas alineados con sus cifras. */
  .precios-tabla th[data-col="precio_ars"], .precios-tabla th[data-col="precio_usd"] { text-align: right; }
  .precios-th-cart { width: 2.4rem; text-align: center; }
  #pp-cart-hdr { display: inline-flex; cursor: pointer; color: var(--muted); border-radius: var(--radius-sm); }
  #pp-cart-hdr:hover { color: var(--accent); }
  .precios-tabla td.pp-add-cell { text-align: center; width: 2.4rem; padding-right: 0; }
  .pp-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
    border: none; border-radius: 50%;
    background: var(--accent); color: #fff; cursor: pointer;
    transition: background var(--transition);
  }
  .pp-add:hover { background: var(--accent-strong); }
  .pp-add .ico { width: .8rem; height: .8rem; stroke-width: 2; }
  .precios-fila { cursor: pointer; }
  .precios-fila.is-hist-open { background: var(--bg-raised); }
  .precios-td-fecha { white-space: nowrap; }
  .precios-stale {
    display: inline-flex; vertical-align: -2px;
    margin-left: .3rem; color: var(--warn-text); cursor: help;
  }
  .precios-tabla th, .precios-tabla td { padding-left: .5rem; padding-right: .5rem; }
  .precios-td-prov, .precios-td-mat {
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .precios-td-mat { max-width: 19rem; }
  .precios-marca {
    display: inline-block; margin-right: .4rem; padding: .05rem .4rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-bg); color: var(--neutral-text);
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .03em;
    vertical-align: 1px;
  }
  .precios-td-cod { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .precios-origen {
    display: inline-block; padding: .08rem .45rem;
    border-radius: var(--radius-pill);
    background: var(--neutral-bg); color: var(--neutral-text);
    font-size: var(--fs-2xs); font-weight: 600;
  }
  .precios-td-acciones { text-align: right; white-space: nowrap; width: 4.6rem; }
  .btn-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; padding: 0;
    border: none; border-radius: var(--radius);
    background: transparent; color: var(--faint); cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .btn-icono:hover { background: var(--bg-raised); color: var(--text); }
  .precios-excluir:hover, .excl-regla-borrar:hover { background: var(--danger-bg); color: var(--danger-text); }
  .precios-hist-btn .ico { transition: transform var(--transition); }
  .precios-hist-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }

  /* Estado vacío: dice qué hacer y lo ofrece. */
  .precios-vacia {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted);
    font-size: var(--fs-sm);
  }
  .precios-vacia p { margin: 0; }
  .precios-vacia-row td { border-bottom: 0; }

  /* ── Historial por código (panel inline bajo la fila) ── */
  .precios-hist-row > td { padding: 0 !important; border-bottom: 1px solid var(--border); }
  .precios-hist {
    background: var(--bg); border-top: 1px solid var(--border);
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .precios-hist-hd {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .precios-hist-title { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
  .precios-hist-n {
    margin-left: .5rem; font-weight: 500; color: var(--muted); font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }
  .precios-hist-acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .precios-hist-tabla {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--fs-xs);
  }
  .precios-hist-tabla th {
    text-align: left; font-weight: 600; font-size: var(--fs-2xs);
    color: var(--muted); padding: .35rem .55rem;
    border-bottom: 1px solid var(--border-strong);
    background: transparent; position: static;
  }
  .precios-hist-tabla td { padding: .35rem .55rem; border-bottom: 1px solid var(--border); }
  .precios-hist-tabla tbody tr:last-child td { border-bottom: 0; }
  .precios-hist-tabla th.num, .precios-hist-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .precios-hist-doc a {
    display: inline-flex; align-items: center; gap: .25rem;
    color: var(--accent-strong); text-decoration: none; font-weight: 600;
  }
  .precios-hist-doc a:hover { text-decoration: underline; }
  .precios-var { display: inline-flex; align-items: center; gap: .15rem; color: var(--muted); white-space: nowrap; }
  .precios-var .ico { width: .7rem; height: .7rem; }
  .precios-var-fuerte { font-weight: 700; color: var(--text); }
  .precios-var-na { color: var(--faint); }

  /* ── Paginación ── */
  .precios-pag {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-3); font-size: var(--fs-xs);
  }
  .precios-pag-info { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
  .precios-pag-size { height: var(--control-h-sm); font-size: var(--fs-xs); }
  .precios-pag button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 .45rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--card); color: var(--text);
    font-family: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .precios-pag button:hover { background: var(--bg-raised); border-color: var(--faint); }
  .precios-pag button.is-activa {
    background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
  }
  .precios-pag button .ico { width: .75rem; height: .75rem; }
  .precios-pag-sig .ico { transform: rotate(180deg); }

  /* ── Encabezados: filtro en el título + botón de orden (12-1) ── */
  .precios-th-sort { white-space: nowrap; }
  .precios-th-label {
    cursor: pointer; user-select: none; border-radius: var(--radius-sm);
    padding: 2px 4px; margin: -2px -4px;
    display: inline-flex; align-items: center; gap: .25rem;
  }
  .precios-th-label:hover { color: var(--accent-strong); background: var(--accent-tint); }
  .precios-th-filtro-ico { display: none; align-items: center; }
  .precios-th-filtro-ico .ico { width: .7rem; height: .7rem; }
  .precios-th-label:hover .precios-th-filtro-ico,
  .precios-th-label:focus-visible .precios-th-filtro-ico,
  .precios-th-label.has-filtro .precios-th-filtro-ico { display: inline-flex; }
  .precios-th-label.has-filtro { color: var(--accent-strong); font-weight: 700; }
  .precios-sortbtn {
    margin-left: 2px; cursor: pointer; color: var(--faint);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: var(--radius-sm);
    padding: 2px 3px; vertical-align: middle;
  }
  .precios-sortbtn:hover { color: var(--accent-strong); background: var(--accent-tint); }
  .precios-sortbtn.is-activo { color: var(--accent-strong); }

  /* Popover del filtro por columna (flota: sombra pop, no borde+sombra). */
  .precios-col-filtro {
    position: fixed; z-index: 1000;
    display: flex; flex-direction: column; gap: var(--space-2);
    min-width: 13rem; padding: var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--card);
  }
  .precios-col-filtro .pcf-titulo { font-weight: 600; font-size: var(--fs-sm); }
  .precios-col-filtro label { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); }
  .precios-col-filtro input { flex: 1; min-width: 6rem; }
  .precios-col-filtro .pcf-acciones { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
  .precios-col-filtro .pcf-acciones .pp-btn { width: auto; flex: 1; margin: 0; }
  .precios-col-filtro-lista { width: 17rem; }
  .pcf-buscar { width: 100%; }
  .pcf-lista-acciones { display: flex; gap: .7rem; }
  .pcf-lista-acciones .link-button { font-size: var(--fs-2xs); }
  .pcf-lista {
    max-height: 12rem; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem .15rem;
  }
  .pcf-item {
    display: flex !important; align-items: center; gap: .4rem;
    font-size: var(--fs-xs); padding: .2rem .5rem; cursor: pointer; border-radius: var(--radius-sm);
  }
  .pcf-item:hover { background: var(--bg-raised); }
  .pcf-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pcf-item input { flex: none; cursor: pointer; height: auto; }
  .pcf-vacio, .pcf-mas { color: var(--muted); font-size: var(--fs-2xs); padding: .3rem .5rem; }

  /* ── Vista Excluidos ── */
  .excl-toolbar { margin-bottom: var(--space-3); }
  .excl-resumen { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .excl-lista { display: flex; flex-direction: column; gap: var(--space-2); }
  .excl-regla {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  .excl-regla-fila {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
  }
  .excl-switch { display: inline-flex; align-items: center; cursor: pointer; flex: none; position: relative; }
  .excl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .excl-switch input:disabled ~ .excl-switch-pista { opacity: .45; }
  .excl-regla-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 14rem; }
  .excl-regla-nombre {
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .excl-regla-detalle {
    display: flex; align-items: center; gap: var(--space-2); min-width: 0;
    font-size: var(--fs-2xs); color: var(--muted);
  }
  .excl-tipo {
    flex: none; padding: .08rem .45rem; border-radius: var(--radius-pill);
    background: var(--neutral-bg); color: var(--neutral-text);
    font-weight: 600; letter-spacing: .02em;
  }
  .excl-regla-valor {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .excl-regla-invalida { color: var(--danger-text); font-weight: 600; }
  .excl-regla-n {
    display: inline-flex; align-items: center; gap: .3rem; flex: none;
    height: var(--control-h-sm); padding: 0 .6rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--card); color: var(--text);
    font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
    font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .excl-regla-n:hover:not(:disabled) { background: var(--bg-raised); border-color: var(--faint); }
  .excl-regla-n:disabled { color: var(--faint); cursor: default; border-color: var(--border); }
  .excl-regla-n .excl-regla-reg { color: var(--muted); font-weight: 500; }
  .excl-regla-n .ico { transition: transform var(--transition); }
  .excl-regla-n[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .excl-regla-meta {
    flex: none; color: var(--faint); font-size: var(--fs-2xs); white-space: nowrap;
  }
  .excl-regla.is-inactiva .excl-regla-info,
  .excl-regla.is-inactiva .excl-regla-n,
  .excl-regla.is-inactiva .excl-regla-meta { opacity: .55; }
  .excl-regla-items { padding: 0 var(--space-3) var(--space-3); }
  .excl-items-tabla { background: var(--bg); }
  .excl-items-tabla td:nth-child(2) {
    max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .excl-items-mas { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-2xs); }
  .excl-incompletos {
    margin: var(--space-3) 0 0; color: var(--faint); font-size: var(--fs-2xs); max-width: 75ch;
  }
  .excl-vacia { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--card); }

  /* ── Velos y diálogos (flotan: sombra modal sobre velo navy) ── */
  .pp-velo {
    position: fixed; inset: 0; z-index: 10004;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 30, 52, .45);
    padding: var(--space-4);
  }
  .pp-dlg-box {
    background: var(--card); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: var(--space-4) var(--space-5) var(--space-5);
    width: 26rem; max-width: 100%; max-height: 85vh; overflow-y: auto;
  }
  .pp-dlg-hd {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-3);
  }
  .pp-dlg-hd h3 {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: 0; font-size: var(--fs-lg);
  }
  .pp-dlg-campo { margin-bottom: var(--space-3); }
  .pp-dlg-campo label {
    display: block; margin-bottom: .25rem;
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  }
  .pp-dlg-campo input[type="text"], .pp-dlg-campo select { width: 100%; }
  .pp-dlg-campo input[type="file"] { width: 100%; height: auto; padding: .3rem; font-size: var(--fs-xs); }
  .pp-dlg-acciones { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
  .pp-dlg-acciones .pp-btn { flex: 1; margin: 0; width: auto; }
  .pp-dlg-acciones .btn-primario, .pp-dlg-acciones .btn-secundario, .pp-dlg-acciones .btn-danger { flex: 1; }

  /* Nueva exclusión: selector de tipo + vista previa en vivo. */
  .excl-dlg-tipos { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
  .excl-dlg-tipo {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    height: var(--control-h); padding: 0 .8rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    cursor: pointer; user-select: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .excl-dlg-tipo:hover { background: var(--bg-raised); }
  .excl-dlg-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .excl-dlg-tipo:has(input:checked) {
    background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong);
  }
  .excl-dlg-tipo:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
  .excl-dlg-preview {
    margin: 0; min-height: 2.4em;
    font-size: var(--fs-xs); color: var(--muted);
  }
  .excl-dlg-preview.es-ok { color: var(--accent-strong); font-weight: 600; }
  .excl-dlg-preview.es-aviso { color: var(--warn-text); font-weight: 600; }
  .excl-confirm-texto { margin: 0; font-size: var(--fs-sm); color: var(--text); }
  .btn-danger { border: 1px solid var(--border-strong); }

  /* ── Carrito: drawer lateral ── */
  #pp-cart-velo {
    position: fixed; inset: 0; z-index: 10002;
    background: rgba(4, 30, 52, .45);
  }
  #pp-cart {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 10003;
    width: 24rem; max-width: 92vw;
    background: var(--card); border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    transform: translateX(102%);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
  }
  #pp-cart.is-abierto { transform: translateX(0); visibility: visible; }
  #pp-cart .pp-cart-hd {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }
  #pp-cart .pp-cart-title {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0; font-size: var(--fs-lg); color: var(--text);
  }
  #pp-cart .pp-cart-body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); }
  #pp-cart .pp-cart-ft { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
  .pp-cart-vacio { color: var(--muted); font-size: var(--fs-sm); text-align: center; padding-top: var(--space-6); }
  .pp-cart-vacio .ico { vertical-align: -3px; color: var(--accent); }
  .pp-cart-item {
    display: flex; gap: var(--space-2); align-items: flex-start;
    padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
  }
  .pp-cart-item .pp-ci-info { flex: 1; min-width: 0; }
  .pp-cart-item .pp-ci-mat { font-size: var(--fs-xs); color: var(--text); white-space: normal; word-break: break-word; }
  .pp-cart-item .pp-ci-sub { font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
  .pp-cart-item .pp-ci-right { text-align: right; min-width: 4.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
  .pp-cart-item input.pp-ci-qty { width: 3.2rem; height: var(--control-h-sm); padding: 0 .3rem; font-size: var(--fs-xs); }
  .pp-cart-tot { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-2); }
  .pp-cart-tot-lbl { font-weight: 700; color: var(--text); margin-bottom: .2rem; font-size: var(--fs-sm); }
  .pp-tot-row { display: flex; justify-content: space-between; padding: .15rem 0; font-size: var(--fs-sm); }
  .pp-tot-val { font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
  .pp-cart-ft .pp-btn { width: 100%; margin-top: var(--space-2); }
  .pp-btn-empty { display: block; margin: var(--space-2) auto 0; }

  /* Subir precios / columnas del Excel: cajas de diálogo. */
  .pp-up-box #pp-up-tpl { width: 100%; margin-bottom: var(--space-4); }
  .pp-xls-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem var(--space-3); }
  .pp-xls-col {
    display: flex; align-items: center; gap: .45rem;
    padding: .25rem .3rem; border-radius: var(--radius-sm);
    font-size: var(--fs-sm); color: var(--text); cursor: pointer;
  }
  .pp-xls-col:hover { background: var(--bg-raised); }
  .pp-xls-col input { height: auto; }

  /* ── Toast (con acción opcional) ── */
  #pp-toast {
    position: fixed; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
    z-index: 10005;
    display: none; align-items: center; gap: var(--space-3);
    max-width: min(34rem, calc(100vw - 2rem));
    background: var(--brand-navy-deep); color: #fff;
    padding: .6rem 1rem; border-radius: var(--radius-lg);
    font-size: var(--fs-sm); box-shadow: var(--shadow-pop);
  }
  .pp-toast-accion {
    flex: none; background: transparent; border: none; padding: 0;
    color: #9fd4ae; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
    text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
  }
  .pp-toast-accion:hover { color: #fff; }

  /* ── Responsive: la sección entera se apila con gracia ── */
  @media (max-width: 60rem) {
    .precios-header { flex-direction: column; align-items: stretch; }
    .precios-acciones { margin-left: 0; }
    .precios-tabs { overflow-x: auto; }
    .precios-toolbar { flex-wrap: wrap; }
    .precios-search { flex: 1 1 100%; max-width: none; }
    .precios-cont { order: 3; }
    .precios-limpiar { order: 2; margin-left: auto; }
    .excl-regla-fila { align-items: flex-start; }
    .excl-regla-meta { flex-basis: 100%; order: 5; white-space: normal; }
    #pp-cart { width: 100vw; max-width: 100vw; border-left: 0; }
    .pp-xls-cols { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    #pp-cart, .pp-alerta-pista, .excl-switch-pista,
    .pp-alerta-pista::after, .excl-switch-pista::after { transition: none; }
  }
}

/* Story 14-6 (D45): botones de descarga del análisis en la ficha y del
   Excel consolidado en la tabla de licitaciones. */
.descargas-analisis { display: flex; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.btn-descarga {
  display: inline-block;
  padding: .38rem .9rem;
  font-size: .84rem;
  border: 1px solid var(--border, #e6e1da);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #3b3835);
  background: var(--card, #f8f6f2);
}
.btn-descarga:hover { border-color: var(--accent, #1f4e79); color: var(--accent, #1f4e79); }

/* 2026-09-15 (pedido del usuario): dos accesos que vivían como link de texto
   pasan a botón — «Ajustes del análisis» en el Analista HVAC y el enlace al
   portal de origen en la ficha de cada licitación. Van sin @layer, como los
   botones de 14-6: son la acción visible de su cabecera. */
.detalle-titulo, .analista-titulo {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, .75rem);
  flex-wrap: wrap;
}
.detalle-titulo h1, .analista-titulo h1 { margin: 0; }
.btn-portal, .btn-ajustes {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-size: var(--fs-md, .875rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--radius, 6px);
  text-decoration: none;
  border: 1px solid var(--accent, #1e7d36);
  background: var(--accent, #1e7d36);
  color: #fff;
}
.btn-portal:hover, .btn-portal:focus-visible,
.btn-ajustes:hover, .btn-ajustes:focus-visible {
  background: var(--accent-hover, #239442);
  border-color: var(--accent-hover, #239442);
  color: #fff;
  text-decoration: none;
}
/* D41: cuando el origen no publica el link de la licitación el botón lleva a
   la portada — mismo tamaño, menos peso visual, porque promete menos. */
.btn-portal[data-tipo="portal"] {
  background: var(--card, #fff);
  color: var(--text, #1f2c37);
  border-color: var(--border-strong, #cfd6dd);
}
.btn-portal[data-tipo="portal"]:hover, .btn-portal[data-tipo="portal"]:focus-visible {
  background: var(--bg-raised, #eef1f4);
  color: var(--text, #1f2c37);
  border-color: var(--faint, #8897a4);
}
.btn-ajustes-ico { font-size: 1.05em; }
@media (max-width: 40rem) {
  .detalle-titulo, .analista-titulo { align-items: stretch; }
  .btn-portal, .btn-ajustes { width: 100%; justify-content: center; }
}

/* 2026-09-17 (pedido del usuario): en la tabla de licitaciones lo que se lee es
   el Objeto; Apertura, Monto y Escaneo son datos duros que solo necesitan su
   propio ancho. Van sin @layer, como los botones de arriba: esta es la última
   palabra sobre el ancho de esas columnas. */
.licitaciones-tabla th.col-fecha_apertura, .licitaciones-tabla td.col-fecha_apertura,
.licitaciones-tabla th.col-fecha_escaneo, .licitaciones-tabla td.col-fecha_escaneo,
.licitaciones-tabla th.col-monto, .licitaciones-tabla td.col-monto {
  width: 1%;
  white-space: nowrap;
}
.licitaciones-tabla th.col-fecha_apertura,
.licitaciones-tabla td.col-fecha_apertura { min-width: 7rem; }
.licitaciones-tabla th.col-fecha_escaneo,
.licitaciones-tabla td.col-fecha_escaneo { min-width: 5rem; }
.licitaciones-tabla th.col-monto,
.licitaciones-tabla td.col-monto { min-width: 5.5rem; }
/* Objeto se queda con todo el ancho que sueltan las tres de arriba. */
.licitaciones-tabla th.col-objeto, .licitaciones-tabla td.col-objeto,
.licitaciones-tabla td.col-descripcion { min-width: 32rem; width: auto; }
.licitaciones-tabla td .truncado { max-width: 44rem; }
@media (max-width: 64rem) {
  .licitaciones-tabla th.col-objeto, .licitaciones-tabla td.col-objeto,
  .licitaciones-tabla td.col-descripcion { min-width: 18rem; }
  .licitaciones-tabla td .truncado { max-width: 24rem; }
}
@media (max-width: 40rem) {
  .licitaciones-tabla th.col-objeto, .licitaciones-tabla td.col-objeto,
  .licitaciones-tabla td.col-descripcion { min-width: 12rem; }
  .licitaciones-tabla td .truncado { max-width: 14rem; }
}

/* ============================================================================
   SECCIONES DEL PLIEGO POR FAMILIA EN LA FICHA (story 19-3, D87 enmendada).

   Bloque AGREGADO AL FINAL: no edita, no reordena ni pisa ninguna regla
   existente (este archivo se reparte por historia). Va dentro de @layer
   sistema porque usa los tokens y la gramática de controles del rediseño: no
   escribe una segunda identidad visual y por eso sigue cualquier tema
   (ningún color literal acá). El panel es SOLO LECTURA: no hay casillas ni
   botón de envío al Analista.
   ========================================================================== */
@layer sistema {
  .secciones-pliego { padding: var(--space-3) var(--space-4) var(--space-4); }
  .secciones-resumen {
    margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }
  .secciones-doc { color: var(--text); font-weight: 600; }
  .familias-lista, .secciones-lista { list-style: none; margin: 0; padding: 0; }
  .familias-lista { display: grid; gap: var(--space-2); }

  /* Una cabecera plegable por familia: `<details>` nativo (abre sin JS). */
  .secciones-pliego details.familia {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card);
  }
  .familia-cabecera {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-raised); cursor: pointer;
    font-size: var(--fs-md); font-weight: 600; color: var(--text);
    list-style: none;
    border-radius: var(--radius-sm);
  }
  .familia-cabecera::-webkit-details-marker { display: none; }
  .familia-cabecera:hover { color: var(--accent-strong); }
  .familia-cabecera:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
  .familia-nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  /* Flecha propia: el marcador nativo no se ve igual en todos los navegadores. */
  .familia-cabecera::after { content: "▾"; flex: 0 0 auto; color: var(--faint); font-size: var(--fs-xs); }
  details.familia[open] > .familia-cabecera::after { content: "▴"; }
  .familia-cantidad {
    flex: 0 0 auto; min-width: 1.6rem; text-align: center;
    padding: .05rem .5rem; border-radius: var(--radius-pill);
    background: var(--neutral-bg); color: var(--neutral-text);
    font-size: var(--fs-2xs); font-weight: 600;
  }

  /* "Abrir todo / Cerrar todo" por familia: lo enciende `secciones.js`
     (marca `html.con-js`). Sin JS no hay botón que no haga nada. */
  .familia-acciones { display: none; }
  html.con-js .familia-acciones {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    padding: var(--space-2) var(--space-3) 0;
  }
  .btn-accion-familia {
    padding: .2rem .6rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--card); color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: var(--fs-2xs); font-weight: 600;
    transition: background var(--transition), color var(--transition);
  }
  .btn-accion-familia:hover { background: var(--bg-raised); color: var(--text); }
  .btn-accion-familia:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

  .secciones-lista { padding: 0 var(--space-3) var(--space-2); }
  .secciones-lista > li + li { border-top: 1px solid var(--border); }

  /* Cada sección es un `<details>`: el título, la etiqueta fina, el rubro y
     las páginas en la cabecera; el texto llega al abrir. */
  details.seccion > .seccion-cabecera {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-1);
    cursor: pointer; list-style: none;
    font-size: var(--fs-sm); color: var(--text);
  }
  details.seccion > .seccion-cabecera::-webkit-details-marker { display: none; }
  details.seccion > .seccion-cabecera:hover .seccion-titulo { color: var(--accent-strong); }
  details.seccion > .seccion-cabecera:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  .seccion-titulo { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
  .seccion-paginas {
    flex: 0 0 auto; color: var(--faint); font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
  }

  /* Chips del rediseño (misma gramática que la barra de filtros, más chicos):
     la etiqueta fina del clasificador y, en especificaciones, el rubro — con
     `hvac` destacado, que es el rubro de CA Group. */
  .secciones-pliego .chip {
    height: auto; padding: .1rem .55rem; cursor: default;
    font-size: var(--fs-2xs);
  }
  .secciones-pliego .chip-rubro { background: var(--bg-raised); border-color: var(--border); color: var(--muted); }
  .secciones-pliego .chip-rubro-hvac {
    background: var(--accent-tint); border-color: var(--accent);
    color: var(--accent-strong); font-weight: 700;
  }

  /* El texto de la sección: `<pre>` con scroll VERTICAL y corte de palabra
     (nunca scroll horizontal, ni a 360 px). */
  .seccion-texto { padding: 0 var(--space-1) var(--space-2); }
  .seccion-ver-texto { color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 600; }
  .seccion-texto-cab {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--fs-2xs);
  }
  .seccion-texto-meta { min-width: 0; overflow-wrap: anywhere; }
  .seccion-texto-pre {
    margin: 0; max-height: 24rem; overflow: auto;
    padding: var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-raised); color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-xs); line-height: var(--lh);
    white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .seccion-texto-error { margin: 0 0 var(--space-2); color: var(--danger-text); font-size: var(--fs-xs); }
  .seccion-texto-vacio { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--fs-2xs); }
  .secciones-nota { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--fs-2xs); }

  /* Celular (360 px): menos padding, título de la sección en su renglón y
     texto más alto. El panel no scrollea en horizontal en ningún ancho. */
  @media (max-width: 640px) {
    .secciones-pliego { padding: var(--space-2) var(--space-2) var(--space-3); }
    .familia-cabecera { padding: var(--space-2); }
    .familia-acciones { padding: var(--space-2) var(--space-2) 0; }
    .secciones-lista { padding: 0 var(--space-2) var(--space-2); }
    .seccion-titulo { flex-basis: 100%; }
    .seccion-texto-pre { max-height: 60vh; padding: var(--space-2); }
  }
}

/* ── fin 19-3 ── */


/* ── 20-2: login con la cuenta bloqueada ── */
@layer sistema {
  .reset-link .reset-link-destacado { font-weight: 600; color: var(--accent-strong); }
}
/* ── fin 20-2 ── */

/* ── 20-3: franja de "ver como" (solo lectura, D101) ── */
@layer sistema {
  .ver-como-franja {
    position: sticky; top: 0; z-index: 30;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
    padding: var(--space-2) var(--space-5);
    background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid var(--border-strong);
    font-size: var(--fs-sm);
  }
  .ver-como-franja span { display: inline-flex; align-items: center; gap: .4rem; }
  .ver-como-franja form { margin: 0; }
  @media (max-width: 720px) { .ver-como-franja { margin: 0 0 var(--space-3); } }
  .plan-cartel.solo-lectura { position: static; transform: none; margin: var(--space-6) auto; }
  .panel-ver-como { display: block; margin-top: .3rem; }
}
/* ── fin 20-3 ── */

/* ── 20-3: aviso de solo lectura de "ver como" ── */
@layer sistema {
  .plan-cartel {
    max-width: 32rem; margin: var(--space-6) auto; padding: var(--space-5);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    text-align: center;
  }
  .plan-cartel h1 { margin: 0 0 var(--space-3); font-size: var(--fs-xl); color: var(--text); }
  .plan-cartel p { margin: 0 0 var(--space-3); color: var(--muted); line-height: var(--lh); }
  .plan-cartel-acciones { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
  .plan-cartel-acciones .btn { text-decoration: none; }
}
/* ── fin aviso solo lectura ── */