/* =========================================================================
   QUEMPIN · Formulación de proyectos — estilos propios.

   El sistema de marca (Lato embebida, paleta oficial, tema claro/oscuro,
   cabecera negra con filete naranjo) vive en css/brand.css, copiado sin
   cambios de la Calculadora Técnica y los Tableros Financieros QUEMPIN.
   Aquí van los componentes de esta herramienta, con el mismo lenguaje que
   esas dos: tarjetas KPI con borde de estado (Análisis Financiero), barra de
   filtros y paleta de marca con texturas (Centro de Costos), pestañas fijas,
   control segmentado y columnas calculadas sombreadas (Calculadora Técnica).

   Colores de datos: solo los 4 oficiales (Orange 021 C, Black C, Cool Gray 11 C
   y Cool Gray 7 C). Cuando se necesitan más categorías se usan rayas y puntos
   con esos mismos colores, nunca un tono inventado. Verde/ámbar/rojo quedan
   reservados a los semáforos (estado del dato), igual que en Finanzas.
   ========================================================================= */

.viz-root {
  font-size: 14px;
  line-height: 1.5;
  /* Gris de texto auxiliar con más contraste (mismo ajuste que Finanzas: 5,6:1) */
  --text-muted: #666560;
  --status-good: #087a08;
  --status-warning: #8c5900;
  --status-bad: #d1282e;
  --status-good-soft: rgba(12, 163, 12, 0.11);
  --status-warning-soft: rgba(201, 133, 0, 0.14);
  --status-bad-soft: rgba(209, 40, 46, 0.11);
  --orange-soft: rgba(255, 81, 0, 0.09);
  --chip-hover: rgba(255, 81, 0, 0.10);
  --tinte-calculado: rgba(255, 81, 0, 0.045);
  --bar-outline: transparent;
  --input-ink: #1a1a1a;
  --shadow-pop: 0 14px 38px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
  --alto-barra: 50px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    --text-muted: #a6a49d;
    --status-good: #3fb950;
    --status-warning: #d29922;
    --status-bad: #f85149;
    --status-good-soft: rgba(63, 185, 80, 0.14);
    --status-warning-soft: rgba(210, 153, 34, 0.16);
    --status-bad-soft: rgba(248, 81, 73, 0.14);
    --orange-soft: rgba(255, 81, 0, 0.14);
    --chip-hover: rgba(255, 81, 0, 0.16);
    --tinte-calculado: rgba(255, 81, 0, 0.07);
    --bar-outline: rgba(255, 255, 255, 0.30);
    --input-ink: #ffffff;
    --shadow-pop: 0 14px 38px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] .viz-root {
  --text-muted: #a6a49d;
  --status-good: #3fb950;
  --status-warning: #d29922;
  --status-bad: #f85149;
  --status-good-soft: rgba(63, 185, 80, 0.14);
  --status-warning-soft: rgba(210, 153, 34, 0.16);
  --status-bad-soft: rgba(248, 81, 73, 0.14);
  --orange-soft: rgba(255, 81, 0, 0.14);
  --chip-hover: rgba(255, 81, 0, 0.16);
  --tinte-calculado: rgba(255, 81, 0, 0.07);
  --bar-outline: rgba(255, 255, 255, 0.30);
  --input-ink: #ffffff;
  --shadow-pop: 0 14px 38px rgba(0, 0, 0, 0.55);
}

.viz-root { display: flex; flex-direction: column; }
main { flex: 1 0 auto; outline: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0 0 8px; }
a { color: var(--brand-orange-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
.viz-root :is(button, select, input, textarea, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.print-only { display: none; }

/* ---- Cabecera: complementos a brand.css --------------------------------- */
.viz-logo { text-decoration: none; }
@media (max-width: 600px) { .viz-logo img { display: none; } }   /* el título ya se corta en el teléfono */
.viz-titleblock p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-titleblock p strong { color: #ffffff; font-weight: 700; }
/* Navegación de secciones: mismo componente que el menú entre tableros de Finanzas */
.viz-modnav { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 14px; padding-top: 10px; }
.viz-modnav-inner { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-end; }
.viz-modnav-tab {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 12px; border-radius: 6px 6px 0 0; font-size: 12.5px; font-weight: 700;
  color: #98989a; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.viz-modnav-tab span { overflow: hidden; text-overflow: ellipsis; }
a.viz-modnav-tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.viz-modnav-tab.is-active { color: #ffffff; border-bottom-color: #ff5100; }
a.viz-modnav-tab.is-active:hover { background: none; }
.viz-modnav-tab .sep { color: #54565a; font-weight: 400; }
@media (max-width: 640px) {
  .viz-header .viz-modnav-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .viz-modnav-tab { flex: 0 0 auto; }
}

/* ---- Pie ------------------------------------------------------------------ */
.viz-footer { font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 1.6; padding-top: 28px; }
.viz-footer strong { color: var(--text-secondary); }
.viz-footer a { color: var(--brand-orange-ink); font-weight: 700; }

/* ---- Página ------------------------------------------------------------- */
.page { padding-bottom: 24px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 20px; }
.page-head h2 { font-size: 21px; font-weight: 900; line-height: 1.25; }
.page-head p { font-size: 13.5px; color: var(--text-secondary); margin: 4px 0 0; max-width: 820px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.section { margin-top: 30px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 12px; }
.section-head p { margin: 0; font-size: 12px; color: var(--text-muted); }
/* Título de sección: mayúsculas como en los tableros QUEMPIN, con el cuadrado
   naranjo del manual de marca */
.seccion-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); margin: 0;
}
.seccion-titulo::before { content: ''; width: 8px; height: 8px; background: var(--brand-orange); flex: 0 0 auto; }
.seccion-titulo .tn { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-muted); }
.en-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.en-vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--status-good); }
.en-vivo.err { color: var(--status-bad); font-weight: 700; }
.en-vivo.err::before { background: var(--status-bad); }
.en-vivo.saving::before { background: var(--brand-orange); }
/* Indicador de guardado del editor: ocupa siempre el mismo espacio, sea «Guardando…» o un texto largo,
   para que la cabecera no cambie de alto ni de ancho en cada tecla y la página no salte. Toma el ancho de
   los botones sin ensancharlos (width 0 + min-width 100%) y reserva dos líneas; lo que no quepa se corta
   con «…» y queda completo en el title. */
#save-state { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 0; min-width: 100%;
  height: 2.9em; line-height: 1.45; overflow: hidden; overflow-wrap: anywhere; text-align: right; }
#save-state::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }

/* ---- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--gridline); background: var(--surface-card); color: var(--text-primary);
  font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--brand-orange); }
.btn svg, .ico svg, .pop-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
/* Acción principal: naranjo de marca con texto negro (contraste 6,4:1), como "Abrir calculadora" */
.btn-primario { background: var(--brand-orange); border-color: var(--brand-orange); color: #000000; font-weight: 900; }
.btn-primario:hover { filter: brightness(1.08); border-color: var(--brand-orange); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--chip-hover); border-color: transparent; }
.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.btn-danger { color: var(--status-bad); }
.btn-danger:hover { border-color: var(--status-bad); background: var(--status-bad-soft); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .caret { width: 12px; height: 12px; margin-left: -2px; opacity: .7; }
/* Área de toque de 24 px sin mover el texto que lo rodea */
.link-btn { display: inline-block; background: none; border: 0; padding: 3px 0; margin: -3px 0; color: var(--brand-orange-ink); font-weight: 700; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--gridline); background: var(--surface-card); }
.icon-btn.del:hover { color: var(--status-bad); }
.icon-btn[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Formularios ----------------------------------------------------------- */
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }
.fila-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .fila-campos.tres { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo.doble { grid-column: span 2; }
.campo > label, .campo > .label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.campo .hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.input, .select, .textarea {
  width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--gridline); border-radius: 6px; background: var(--surface-card); color: var(--text-primary);
}
.textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--baseline); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 1px; }
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .input { padding-right: 32px; }
.input-affix .affix { position: absolute; right: 10px; color: var(--text-muted); font-size: 12.5px; pointer-events: none; }
.input-affix.pre .input { padding-left: 24px; padding-right: 10px; }
.input-affix.pre .affix { left: 10px; right: auto; }

/* Menús desplegables nativos: flecha propia (la del navegador se veía distinta en
   cada sistema), lista con los colores del tema y marca naranja cuando un filtro
   está activo (mismo criterio que la barra de filtros del Centro de Costos). */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
  text-overflow: ellipsis; white-space: nowrap;
}
select option, select optgroup { background: var(--surface-card); color: var(--text-primary); font-weight: 400; }
select optgroup { font-weight: 700; color: var(--text-secondary); }
select.is-set { border-color: var(--brand-orange) !important; box-shadow: inset 0 0 0 1px var(--brand-orange); }
/* La lista abierta, con la estética de las listas propias (.pop) en vez de la del sistema:
   Chrome y Edge la dejan dibujar desde la versión 135 (appearance: base-select). Los demás
   navegadores siguen mostrando la del sistema, con los colores de arriba. */
@supports (appearance: base-select) {
  select:not([multiple]), ::picker(select) { appearance: base-select; }
  select::picker-icon { display: none; }   /* la flecha es la propia, de arriba */
  /* En este modo no hay «…»: un texto largo se corta antes de la flecha en vez de pasarle por encima */
  select:not([multiple]) { overflow: clip; overflow-clip-margin: content-box; }
  ::picker(select) {
    margin-block: 4px; padding: 5px; max-height: min(340px, 70vh); overflow-y: auto;
    background: var(--surface-card); color: var(--text-primary);
    border: 1px solid var(--border-hairline); border-radius: 10px; box-shadow: var(--shadow-pop);
  }
  select option { gap: 8px; padding: 8px 10px; border-radius: 6px; line-height: 1.3; background: transparent; cursor: pointer; }
  select option:hover, select option:focus-visible { background: var(--chip-hover); outline: none; }
  select option:focus-visible { box-shadow: inset 0 0 0 1px var(--brand-orange); }
  select option:checked { color: var(--brand-orange-ink); font-weight: 700; }
  select option::checkmark { color: var(--brand-orange-ink); font-weight: 900; }
  select option:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
  select optgroup legend { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
}

/* Control segmentado (mismo componente que el selector GLP / Gas Natural) */
.segmentado {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; flex: 0 0 auto;
  border: 1px solid var(--gridline); background: var(--surface-card);
}
.segmentado label { position: relative; display: block; }
.segmentado input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmentado span { display: block; padding: 5px 12px; border-radius: 6px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.segmentado label:hover span { color: var(--text-primary); }
.segmentado input:checked + span { background: var(--brand-orange); color: #000000; font-weight: 900; }
.segmentado input:focus-visible + span { outline: 2px solid var(--brand-orange-ink); outline-offset: 1px; }
.segmentado.sm { padding: 2px; border-radius: 7px; }
.segmentado.sm span { padding: 3px 9px; font-size: 12px; border-radius: 5px; }

/* ---- Paneles, tarjetas ----------------------------------------------------- */
.panel { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 12px; padding: 18px 20px; min-width: 0; }
.panel + .panel { margin-top: 16px; }
.panel .seccion-titulo { margin-bottom: 14px; }
.panel-sub { font-size: 12px; color: var(--text-muted); margin: -8px 0 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.grid-2 > .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.grid-2 > .col > .panel + .panel { margin-top: 0; }
.bloque + .bloque { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-hairline); }

.nota {
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--brand-orange);
  border-radius: 8px; padding: 10px 14px; color: var(--text-secondary); font-size: 13px; margin-bottom: 14px;
}
.nota > span { flex: 1 1 320px; }
.nota strong { color: var(--text-primary); }
/* Carpeta compartida (proyectos del equipo por OneDrive): aviso en la lista y línea de estado */
.nota.compartida-nota { align-items: center; }
.nota.pulso-detenido { border-left-color: var(--status-bad); }   /* procesador del intercambio detenido (js/pulso.js) */
.nota > .actions { flex: 0 1 auto; }
/* Teléfono (2026-10-16): los dos botones del aviso de la carpeta van lado a lado; uno por fila, el
   aviso medía 167 px y es el que más se ve en el teléfono, que no puede conectar la carpeta. */
@media (max-width: 600px) {
  .nota.compartida-nota > .actions { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .nota.compartida-nota > .actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; white-space: normal; text-align: center; line-height: 1.2; }
  .nota.compartida-nota > .actions .btn svg { display: none; }
}
.compartida-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.compartida-linea[hidden] { display: none; }
.chip.solo-aqui { display: inline-block; margin-top: 4px; font-size: 11px; }
#ed-compartida .nota { margin: 0 0 12px; }

/* Pendientes del equipo (js/pendientes.js, 2026-10-14): por ofertar, pasar a la Planilla y borradores
   en Sistema QUEMPIN, arriba de la lista de proyectos. Desplegable (2026-10-15): plegada es una línea
   con las cantidades y el cierre más próximo */
.pend { margin: 0 0 18px; }
.pend-sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px;
  min-height: 46px; padding: 8px 14px; cursor: pointer; list-style: none;
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--brand-orange); border-radius: 8px;
}
.pend-sum::-webkit-details-marker { display: none; }
.pend-sum:hover .pl-accion { text-decoration: underline; }
.pend-sum-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.pend-res { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--text-secondary); }
.pend-cnt b { color: var(--text-primary); font-weight: 900; font-variant-numeric: tabular-nums; }
.pend .pl-accion::before { content: 'Ver'; }
.pend[open] .pl-accion::before { content: 'Ocultar'; }
.pend[open] .pl-accion::after { transform: rotate(-135deg) translateY(-1px); }
.pend-desc { margin: 10px 0; font-size: 12.5px; color: var(--text-muted); }
.pend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; align-items: start; }
.pend-b { background: var(--surface-card); border: 1px solid var(--border-hairline); border-top: 3px solid var(--brand-orange); border-radius: 10px; padding: 12px 14px 10px; min-width: 0; }
.pend-b-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.pend-b-h h4 { margin: 0; font-size: 14px; font-weight: 900; color: var(--text-primary); }
.pend-n { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--orange-soft); color: var(--brand-orange-ink); font-size: 12px; font-weight: 900; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.pend-acc-h { margin-left: auto; }
.pend-b-d { margin: 4px 0 6px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.pend-lista { list-style: none; margin: 0; padding: 0; }
.pend-fila { display: flex; align-items: flex-start; gap: 6px 10px; padding: 9px 0; border-top: 1px solid var(--gridline); }
.pend-t { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; }
.pend-t > .chip-plazo { margin: 0 6px 2px 0; vertical-align: 1px; }
.pend-t b { color: var(--text-primary); }
.pend-sub { display: block; margin-top: 1px; font-size: 12px; color: var(--text-muted); }
.pend-acc { flex: 0 0 auto; display: flex; gap: 6px; }
.pend-campos { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 4px; }
.pend-campos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12.5px; }
.pc-l { color: var(--text-secondary); }
.pc-hoy { font-size: 12px; color: var(--text-muted); }
.pend-fuente { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); }
.pend-mas { margin-top: 6px; font-size: 12.5px; }
.pend-nota { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--gridline); font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.btn-acento { border-color: var(--brand-orange); color: var(--brand-orange-ink); font-weight: 700; }
.btn-acento:hover { background-image: linear-gradient(var(--orange-soft), var(--orange-soft)); }
/* «Pegar desde Excel» en las tablas de costos (js/pegar.js): el texto pegado y su vista previa */
.pg-texto { width: 100%; min-height: 120px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; white-space: pre; overflow-x: auto; resize: vertical; }
.pg-opciones { align-items: end; margin-top: 10px; }
.pg-iva { align-self: center; font-size: 13px; }
.pg-previa:empty { display: none; }
.pg-previa { margin-top: 10px; }
.pg-res { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
.pg-aviso { margin: 0; font-size: 13px; color: var(--status-warning); }
.pg-tabla { font-size: 12.5px; }
.pg-tabla td, .pg-tabla th { padding: 6px 10px; }
/* Aviso de cierre de la licitación (fecha de cierre de la Planilla): lista, encabezado del proyecto y pendientes */
.chip-plazo svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.chip-plazo.info { font-weight: 700; }
td .chip-plazo { display: inline-flex; margin-top: 4px; }
#ed-meta .chip-plazo { margin-left: 2px; }

/* ---- KPIs (tarjetas de Análisis Financiero / Centro de Costos) -------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 8px; }
@media (max-width: 600px) { .kpi-value { font-size: 19px; } .kpi-card { padding: 11px 12px 12px; } }
.kpi-card {
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--border-hairline);
  border-radius: 10px; padding: 13px 16px 14px; min-width: 0;
}
.kpi-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 23px; font-weight: 900; line-height: 1.2; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value .kpi-linea { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; } /* una línea por moneda */
.kpi-value .unit { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.kpi-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.kpi-card.accent { border-left-color: var(--brand-orange); }
.kpi-card.accent .kpi-value { color: var(--brand-orange-ink); }
.kpi-card.sem-ok { border-left-color: var(--status-good); }
.kpi-card.sem-warn { border-left-color: var(--status-warning); }
.kpi-card.sem-bad { border-left-color: var(--status-bad); }
.kpi-card.sem-ok .kpi-value { color: var(--status-good); }
.kpi-card.sem-warn .kpi-value { color: var(--status-warning); }
.kpi-card.sem-bad .kpi-value { color: var(--status-bad); }
.kpi-card.hero { background-image: linear-gradient(var(--orange-soft), var(--orange-soft)); border-color: var(--brand-orange); border-left-color: var(--brand-orange); }
.kpi-card.hero .kpi-value { color: var(--text-primary); }

/* Icono "i" con explicación en el tooltip (igual que en Finanzas) */
/* El círculo mide 15 px, pero el área de toque es de 24 px (WCAG 2.5.8) */
.info-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 24px; margin: -5px -5px; border-radius: 50%; color: var(--text-muted);
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1; cursor: help; user-select: none;
  text-transform: none; letter-spacing: 0; font-family: Georgia, 'Times New Roman', serif;
}
.info-icon::before { content: ''; position: absolute; inset: 4.5px; border: 1px solid currentColor; border-radius: 50%; }
.info-icon:hover, .info-icon:focus-visible { color: var(--brand-orange-ink); outline: none; }

/* Chips de semáforo: estado por forma (icono) y color */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.chip.ok { background: var(--status-good-soft); color: var(--status-good); }
.chip.warn { background: var(--status-warning-soft); color: var(--status-warning); }
.chip.bad { background: var(--status-bad-soft); color: var(--status-bad); }
.chip.info, .chip.na { background: var(--surface-1); color: var(--text-secondary); border: 1px solid var(--gridline); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.dot.ok { background: var(--status-good); } .dot.warn { background: var(--status-warning); } .dot.bad { background: var(--status-bad); }
.dot.na, .dot.info { background: var(--brand-gray-7); }
.tone-ok { color: var(--status-good); } .tone-warn { color: var(--status-warning); } .tone-bad { color: var(--status-bad); }

/* Estado del proyecto: solo colores de marca, distinguibles también por forma */
.estado {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; line-height: 1.3;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.estado[data-e="Borrador"] { background: var(--surface-1); color: var(--text-secondary); border: 1px dashed var(--brand-gray-7); }
.estado[data-e="En revisión"] { background: var(--brand-gray-11); color: #ffffff; }
.estado[data-e="Enviada"] { background: var(--orange-soft); color: var(--brand-orange-ink); border-color: var(--brand-orange); }
.estado[data-e="Adjudicada"] { background: var(--brand-orange); color: #000000; font-weight: 900; }
.estado[data-e="Perdida"] { background: var(--brand-black); color: #ffffff; border-color: var(--bar-outline); }
.estado[data-e="Descartada"] {
  color: var(--text-secondary); border-color: var(--brand-gray-7);
  background: repeating-linear-gradient(135deg, var(--gridline) 0 2px, var(--surface-card) 2px 5px);
}
button.estado { cursor: pointer; font-family: inherit; min-height: 24px; }
button.estado svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.code-badge {
  display: inline-block; font-weight: 900; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap;
  color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--gridline); border-radius: 5px; padding: 1px 7px;
}
.ver { font-size: 11px; color: var(--text-muted); margin-left: 5px; font-weight: 700; }
.pcode {
  display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; flex: 0 0 auto;
  font-size: 11px; font-weight: 900; border-radius: 4px; background: var(--brand-black); color: #ffffff; box-shadow: inset 0 0 0 1px var(--bar-outline);
}
.pcode.none { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--gridline); }
/* Partida base (PB): sus costos se dividen en partes iguales entre las demás partidas (2026-10-09) */
.pcode.base { background: var(--brand-orange); color: #000000; box-shadow: none; }
.hint-linea .pcode.base { margin-right: 4px; vertical-align: 1px; }
.tbl tr.fila-base td { background: var(--orange-soft); }
.tbl tbody tr.fila-base:hover td { background: var(--orange-soft); }
.tbl tr.fila-base td.reparto-base { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.reparto-base b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.etq-base { display: inline-block; margin-right: 4px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-orange-ink); }
@media (max-width: 640px) { .tbl-apilable tr.fila-base { background: var(--orange-soft); } .tbl-apilable td.reparto-base { grid-column: 1 / -1; } }

/* ---- Barra de pestañas fija con lectura en vivo (Calculadora Técnica) ------- */
.barra-pestanas {
  position: sticky; top: 0; z-index: 20;
  background: var(--page-plane); border-bottom: 1px solid var(--gridline); margin: 0 0 22px;
}
.barra-pestanas-interior { display: flex; align-items: center; gap: 0 20px; flex-wrap: wrap; }
/* Pasos del editor: número (✓ al completarse, ! con errores), nombre y cantidad */
.pasos-bar { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 0 -1px -10px; }
.pasos-bar::-webkit-scrollbar { display: none; }
.paso-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 48px;
  padding: 10px 10px 9px; background: none; border: none; border-bottom: 3px solid transparent;
  font-weight: 700; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.paso-tab:hover { color: var(--text-primary); }
.paso-tab.active { color: var(--brand-orange-ink); border-bottom-color: var(--brand-orange); }
.paso-tab:focus-visible { outline-offset: -2px; }
.paso-marca {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 900; line-height: 1; border: 1.5px solid var(--brand-gray-7); color: var(--text-secondary); background: var(--surface-card);
}
.paso-tab.est-ok .paso-marca { background: var(--text-primary); border-color: var(--text-primary); color: var(--page-plane); }
.paso-tab.est-err .paso-marca { background: var(--status-bad); border-color: var(--status-bad); color: #ffffff; }
.paso-tab.est-warn .paso-marca { background: var(--status-warning); border-color: var(--status-warning); color: #ffffff; }
.paso-tab.active .paso-marca { box-shadow: 0 0 0 2px var(--page-plane), 0 0 0 4px var(--brand-orange); }
.paso-tab.active.est-pend .paso-marca { background: var(--brand-orange); border-color: var(--brand-orange); color: #000000; }
.paso-tab .count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--gridline); color: var(--text-secondary); font-size: 11px; line-height: 17px; text-align: center; }
.paso-sep { flex: 0 0 14px; height: 1.5px; background: var(--gridline); }
.lectura { display: flex; align-items: stretch; gap: 0; margin-left: auto; padding: 6px 0; flex: 0 0 auto; }
.lectura-item { padding: 0 14px; border-left: 1px solid var(--gridline); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lectura-item:first-child { border-left: 0; padding-left: 0; }
.lectura-item:last-child { padding-right: 0; }
.lectura-item .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); white-space: nowrap; }
.lectura-item .v { font-size: 15px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.lectura-item button.v { background: none; border: 0; padding: 0; min-height: 26px; cursor: pointer; color: inherit; }
@media (max-width: 1060px) {
  .lectura { order: -1; width: 100%; padding-top: 10px; }
  .lectura-item { flex: 1 1 0; }
}
/* Pasos y lectura en una sola fila en el escritorio (2026-10-16): a 1366 px la lectura (precio, margen,
   alertas) bajaba a una segunda fila y la barra medía 102 px, con el contenido empezando a 494 px. */
@media (min-width: 1061px) {
  .barra-pestanas-interior { flex-wrap: nowrap; }
  .paso-tab { padding-left: 8px; padding-right: 8px; gap: 7px; }
  .paso-sep { flex-basis: 10px; }
  .lectura-item { padding: 0 10px; }
}
@media (min-width: 1061px) and (max-width: 1440px) { .paso-opc { display: none; } }

/* ---- Encabezado del editor ------------------------------------------------ */
.editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 2px 0 16px; }
.editor-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 420px; }
.editor-title h2 { font-size: 22px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.editor-title h2.sin-titulo { color: var(--text-muted); }
.editor-title .meta { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; color: var(--text-secondary); font-size: 12.5px; }
.editor-title .meta .sep { color: var(--baseline); }
.editor-title .meta .m-opc { display: contents; }   /* cliente, responsable y fecha: en el teléfono no van (ver abajo) */
.editor-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* Teléfono (2026-10-14): el encabezado del proyecto ocupaba ~540 px antes del primer campo. Cliente,
   responsable y fecha quedan en «Datos»; deshacer y rehacer pasan al menú «⋯»; «Exportar Excel» queda
   como ícono, y el aviso de guardado comparte la fila con los botones, en una línea. */
@media (max-width: 600px) {
  .editor-title { gap: 4px; }
  .editor-title h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .editor-title .meta { gap: 4px 8px; }
  .editor-title .meta .m-opc, .editor-title .meta .sep:has(+ .meta-carpeta) { display: none; }
  .editor-title .meta .meta-carpeta { max-width: 100%; min-width: 0; }
  .editor-title .meta .meta-carpeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .editor-head .editor-actions { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; }
  .editor-head .editor-actions .actions { order: 2; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  #ed-deshacer, #ed-rehacer { display: none; }
  #ed-excel { width: 44px; padding: 0; justify-content: center; }
  #ed-excel .bt-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #save-state { order: 1; flex: 1 1 auto; width: auto; min-width: 0; height: 1.45em; -webkit-line-clamp: 1; align-self: center; font-size: 12px; }
  .rc-nav { margin-bottom: 8px; }
  .lectura { padding-top: 4px; }
}

/* ---- Tablas (viz-table de los tableros) ------------------------------------- */
.tabla-contenedor { position: relative; overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: 10px; background: var(--surface-card); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; color: inherit; }
/* Más de 300 filas (app.js, FILAS_TABLA_LARGA): diseño fijo con los anchos del <colgroup> */
.tbl.tbl-larga { table-layout: fixed; }
.tbl.tbl-larga td { overflow: hidden; }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); padding: 10px 8px; border-bottom: 1px solid var(--gridline); white-space: nowrap; vertical-align: bottom;
}
.tbl th:first-child, .tbl td:first-child { padding-left: 14px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 10px; }
.tbl th.num { text-align: right; }
.tbl th .th-sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
.tbl th.group-th { text-align: center; border-bottom-color: var(--border-hairline); }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--gridline); vertical-align: middle; font-variant-numeric: tabular-nums; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-1); }
.tbl tfoot td { font-weight: 900; border-top: 1.5px solid var(--brand-gray-7); padding: 10px 8px; }
.tbl .code { font-weight: 900; color: var(--text-secondary); font-size: 12px; white-space: nowrap; width: 1%; }
/* Columnas que se calculan solas: sombreadas en naranjo muy tenue, como en la Memoria de Cálculo */
.tbl .calc { background: var(--tinte-calculado); }
.tbl tbody tr:hover td.calc { background: var(--tinte-calculado); }
.tbl .calc.strong { font-weight: 900; }
.tbl .cell-actions { white-space: nowrap; text-align: right; width: 1%; }
.tbl .cell-actions > * { vertical-align: middle; }
.tbl tr.has-error td:first-child { box-shadow: inset 3px 0 0 var(--status-bad); }
.tbl tr.has-warn td:first-child { box-shadow: inset 3px 0 0 var(--status-warning); }
.tbl tr.flash td { animation: flash 1.4s ease-out; }
@keyframes flash { from { background-color: rgba(255, 81, 0, .22); } to { background-color: transparent; } }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }
.tbl .empty-row td { text-align: center; color: var(--text-muted); padding: 30px 8px; }
.tbl th.ordenable { cursor: pointer; user-select: none; }
.tbl th.ordenable:hover { color: var(--text-primary); }
.tbl th .orden { font-size: 9px; margin-left: 3px; opacity: .5; }
.tbl th.es-orden { color: var(--text-primary); }
.tbl th.es-orden .orden { opacity: 1; color: var(--brand-orange-ink); }

/* Celdas editables */
.ci {
  width: 100%; min-width: 64px; height: 32px; padding: 0 8px; font-size: 13px;
  border: 1px solid var(--gridline); border-radius: 5px; background: var(--surface-card); color: var(--input-ink);
}
.ci:hover { border-color: var(--baseline); }
.ci:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 0; border-color: transparent; }
.ci.num { text-align: right; }
.ci.desc { min-width: 220px; }
.ci.w-xxs { min-width: 46px; max-width: 58px; padding: 0 6px; }
.ci.w-xs { min-width: 62px; max-width: 78px; }
.ci.w-sm { min-width: 80px; max-width: 110px; }
.ci.w-md { min-width: 110px; }
.tbl td:has(> .ci.desc) { width: 40%; }
.tbl.mo td:has(> .ci.desc) { width: auto; }
.tbl.mo .ci.desc { min-width: 160px; }

.tbl-toolbar { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.tbl-toolbar .left, .tbl-toolbar .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtro { display: inline-flex; align-items: center; gap: 8px; }
.filtro label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.filtro select { min-height: 34px; font-size: 13px; padding: 6px 30px 6px 10px; border: 1px solid var(--gridline); border-radius: 7px; background-color: var(--surface-card); max-width: 320px; }

/* ---- Selectores propios (partida, unidad, catálogo, menús) ----------------- */
.picker {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 150px; max-width: 250px; height: 32px; padding: 0 8px 0 5px;
  border: 1px solid var(--gridline); border-radius: 5px; background: var(--surface-card); color: var(--text-primary);
  cursor: pointer; text-align: left; font-size: 13px;
}
.picker:hover { border-color: var(--baseline); }
.picker[aria-expanded="true"] { border-color: var(--brand-orange); box-shadow: inset 0 0 0 1px var(--brand-orange); }
.picker .txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .txt.muted { color: var(--text-muted); font-style: italic; }
.picker .chev { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--text-muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.picker.error { border-color: var(--status-bad); background-image: linear-gradient(var(--status-bad-soft), var(--status-bad-soft)); }
.combo { position: relative; display: flex; align-items: center; }
.combo .ci { padding-right: 26px; }
.combo .ci.w-xs { min-width: 78px; max-width: 96px; }
.combo-btn {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 24px; display: grid; place-items: center;
  border: 0; border-radius: 0 4px 4px 0; background: transparent; color: var(--text-muted); cursor: pointer;
}
.combo-btn:hover { color: var(--brand-orange-ink); background: var(--chip-hover); }
.combo-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.pop {
  position: fixed; z-index: 1600; min-width: 220px; max-width: min(440px, calc(100vw - 16px));
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: 10px; box-shadow: var(--shadow-pop);
  padding: 5px; display: flex; flex-direction: column;
}
.pop[hidden] { display: none; }
.pop-list { overflow-y: auto; max-height: 340px; display: flex; flex-direction: column; gap: 1px; }
.pop-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px 10px 4px; }
.pop-sep { height: 1px; background: var(--gridline); margin: 4px 6px; flex: 0 0 auto; }
.pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: inherit; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; cursor: pointer; line-height: 1.3;
}
.pop-item:hover, .pop-item.is-active { background: var(--chip-hover); }
.pop-item:focus-visible { outline: none; background: var(--chip-hover); box-shadow: inset 0 0 0 1px var(--brand-orange); }
.pop-item[disabled] { opacity: .45; cursor: not-allowed; background: transparent; }
/* La herramienta en que se está (menú Herramientas): se lee normal, con «Estás aquí» */
.pop-item.actual[disabled] { opacity: 1; cursor: default; box-shadow: inset 3px 0 0 var(--brand-orange); }
.pop-item.actual .pi-right { font-size: 11px; font-weight: 700; color: var(--brand-orange-ink); }
.pop-item svg { color: var(--text-muted); }
.pop-item:hover svg, .pop-item.is-active svg { color: var(--brand-orange-ink); }
.pop-item .pi-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pop-item .pi-title { font-weight: 700; overflow-wrap: anywhere; }
.pop-item .pi-desc { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.pop-item .pi-right { margin-left: auto; font-size: 12px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 8px; }
.pop-item .check { width: 16px; flex: 0 0 auto; color: var(--brand-orange-ink); font-weight: 900; text-align: center; }
.pop-item.danger, .pop-item.danger svg { color: var(--status-bad); }
.pop-item.danger:hover { background: var(--status-bad-soft); }
.pop-item[aria-selected="true"] .pi-title { color: var(--brand-orange-ink); }
.pop-search { margin: 2px 2px 6px; }
.pop-search input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--gridline); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); font-size: 13px; }
.pop-empty { padding: 14px 10px; color: var(--text-muted); font-size: 12.5px; text-align: center; }
.pop-foot { border-top: 1px solid var(--gridline); margin-top: 4px; padding: 6px 6px 2px; font-size: 12px; }

/* ---- Barra de filtros del listado (Centro de Costos) ------------------------ */
.viz-filterbar { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 14px 16px 12px; margin-bottom: 16px; }
.viz-filtergrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; }
.viz-filtergrid .span-6 { grid-column: span 6; }
.viz-filtergrid .span-3 { grid-column: span 3; }
.viz-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.viz-field label { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.viz-field input, .viz-field select { font-size: 13px; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border-hairline); background-color: var(--surface-1); color: var(--text-primary); width: 100%; min-width: 0; height: 34px; }
.viz-field select { padding-right: 30px; }
.viz-field input.is-set { border-color: var(--brand-orange); box-shadow: inset 0 0 0 1px var(--brand-orange); }
.viz-filterfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gridline); min-height: 28px; }
.viz-resultcount { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.viz-resultcount strong { color: var(--text-primary); }
.viz-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.viz-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 999px; padding: 3px 6px 3px 10px; cursor: pointer; }
.viz-chip .k { color: var(--text-muted); }
.viz-chip .v { font-weight: 700; }
.viz-chip .x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; line-height: 1; color: var(--text-muted); background: var(--gridline); }
.viz-chip:hover .x { background: var(--brand-orange); color: #000; }
.viz-clearbtn { font-size: 12px; font-weight: 700; background: transparent; border: 1px solid var(--border-hairline); color: var(--text-secondary); border-radius: 7px; padding: 5px 12px; cursor: pointer; margin-left: auto; }
.viz-clearbtn:hover { background: var(--surface-1); color: var(--text-primary); }
@media (max-width: 760px) {
  .viz-filtergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viz-filtergrid .span-6 { grid-column: span 2; }
  .viz-filtergrid .span-3 { grid-column: span 1; }
}

.proj-title { font-weight: 700; color: var(--text-primary); }
.proj-sub { font-size: 12px; color: var(--text-muted); }

/* ---- Lista de proyectos: sin desplazamiento lateral -------------------------
   Sin ancho mínimo. Hasta 1100 px el responsable y la utilidad por día-hombre pasan a una
   línea de Proyecto y de Margen; hasta 900 px también la fecha y las alertas (a Proyecto y
   Código). Bajo 640 px la tabla se apila en tarjetas (.tbl-apilable) y muestra todo. */
.tbl.tbl-lista { min-width: 0; }
.tbl-lista .proj-carpeta { width: 0; min-width: 100%; } /* la carpeta larga se corta con «…» y no ensancha la tabla */
.tbl-lista .en-linea { display: none; }
.tbl-lista .sub-celda { margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--text-muted); white-space: normal; }
/* El proyecto se lleva el espacio que sobra antes que la columna del estado */
@media (min-width: 641px) { .tbl-lista td.col-titulo { min-width: 200px; width: 26%; } }
@media (min-width: 641px) and (max-width: 1100px) {
  .tbl-lista .col-resp, .tbl-lista .col-dh { display: none; }
  .tbl-lista div.en-linea.l1 { display: block; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .tbl-lista .col-fecha, .tbl-lista .col-alertas { display: none; }
  .tbl-lista div.en-linea.l2 { display: block; margin-top: 5px; }
  .tbl-lista span.en-linea.l2 { display: inline; }
  .tbl-lista td.code .ver { display: block; margin: 3px 0 0; }
}

/* ---- Tarjetas tipo hub (inicio vacío y guía) ------------------------------- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hub-card {
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hub-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); border-color: var(--baseline); }
@media (prefers-reduced-motion: reduce) { .hub-card, .hub-card:hover { transition: none; transform: none; } }
.hub-card-cabecera { display: flex; align-items: center; gap: 14px; }
.hub-card .icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--page-plane); color: var(--brand-orange-ink); }
.hub-card .icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hub-card h3 { font-size: 16px; font-weight: 900; }
.hub-normas { font-size: 11.5px; font-weight: 700; color: var(--brand-orange-ink); margin-top: 3px; }
.hub-card p.desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.hub-card .btn { align-self: flex-start; margin-top: auto; }

/* ---- Gráficos: paleta de marca con texturas --------------------------------- */
/* Asignación fija por categoría (la identidad no depende del orden):
   Materiales Cool Gray 11 · Equipos Cool Gray 7 · Mano de obra Black ·
   Otros rayas naranjas 45° · GG + imprevistos puntos Cool Gray 11 · Utilidad Orange 021 C.
   Validado para daltonismo: ΔE ≥ 22 entre vecinos. Los grises no tienen croma, por eso
   todo gráfico lleva leyenda con valores y su tabla. */
.cat-mat { background-color: var(--brand-gray-11); }
.cat-eq { background-color: var(--brand-gray-7); }
.cat-mo { background-color: var(--brand-black); }
.cat-otros { background-color: var(--surface-card); background-image: repeating-linear-gradient(45deg, var(--brand-orange) 0 2.5px, transparent 2.5px 6px); }
.cat-gg { background-color: var(--surface-card); background-image: radial-gradient(circle, var(--brand-gray-11) 1.5px, transparent 1.9px); background-size: 6px 6px; background-position: 1px 1px; }
.cat-util { background-color: var(--brand-orange); }
.cat-otros, .cat-gg { box-shadow: inset 0 0 0 1px var(--brand-gray-7); }
.cat-mat, .cat-eq, .cat-mo, .cat-util { box-shadow: inset 0 0 0 1px var(--bar-outline); }

/* Estados del proyecto en gráficos y leyendas (mismo criterio que .estado) */
.eb-borrador { background-color: var(--brand-gray-7); box-shadow: inset 0 0 0 1px var(--bar-outline); }
.eb-revision { background-color: var(--brand-gray-11); box-shadow: inset 0 0 0 1px var(--bar-outline); }
.eb-enviada { background-color: var(--surface-card); background-image: repeating-linear-gradient(45deg, var(--brand-orange) 0 2.5px, transparent 2.5px 6px); box-shadow: inset 0 0 0 1px var(--brand-orange); }
.eb-adjudicada { background-color: var(--brand-orange); }
.eb-perdida { background-color: var(--brand-black); box-shadow: inset 0 0 0 1px var(--bar-outline); }
.eb-descartada { background-color: var(--surface-card); background-image: repeating-linear-gradient(135deg, var(--brand-gray-7) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--brand-gray-7); }

.stack { display: flex; gap: 2px; height: 26px; }
.stack .seg { height: 100%; min-width: 3px; flex-basis: 0; }
.stack .seg:first-child { border-radius: 4px 0 0 4px; }
.stack .seg:last-child { border-radius: 0 4px 4px 0; }
.stack .seg:only-child { border-radius: 4px; }
.stack .seg:hover { filter: brightness(1.12); }
.stack.lg { height: 34px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

.leyenda { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
.leyenda td { padding: 6px 4px; border-bottom: 1px solid var(--gridline); font-variant-numeric: tabular-nums; }
.leyenda td:first-child { padding-left: 0; }
.leyenda td:last-child { padding-right: 0; }
.leyenda tr.cero td { color: var(--text-muted); }
.leyenda tfoot td { font-weight: 900; border-bottom: 0; border-top: 1.5px solid var(--brand-gray-7); }
.leyenda .nombre { display: flex; align-items: center; gap: 9px; }
.leyenda-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-secondary); margin-top: 10px; }
.leyenda-inline span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-inline .swatch { width: 10px; height: 10px; border-radius: 2px; }

/* Barras por partida */
.pbar { display: grid; grid-template-columns: minmax(120px, 230px) minmax(0, 1fr) 110px; gap: 12px; align-items: center; font-size: 12.5px; margin-bottom: 9px; }
.pbar .nom { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pbar .nom span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar .pista { min-width: 0; }
.pbar .stack { height: 18px; }
.pbar .val { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Medidor con marcas de umbral (escala fija, como el gráfico de Nota de Finanzas) */
.medidor { position: relative; height: 10px; border-radius: 5px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--gridline); margin: 10px 0 4px; }
.medidor .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--brand-orange); max-width: 100%; }
.medidor .fill.ok { background: var(--status-good); } .medidor .fill.warn { background: var(--status-warning); } .medidor .fill.bad { background: var(--status-bad); }
.medidor .tick { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--text-primary); opacity: .55; }
.medidor .tick.dash { border-left-style: dotted; }
.medidor-escala { position: relative; height: 14px; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.medidor-escala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.medidor-escala span:first-child { transform: none; }
.medidor-escala span.end { transform: translateX(-100%); }

/* ---- Resumen: layout entradas | resultados (Calculadora Técnica) ------------ */
.section-first { margin-top: 0; }
.section[id] { scroll-margin-top: 96px; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.calc-layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .calc-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
  .calc-layout.parejo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-resultados { position: sticky; top: calc(var(--alto-barra) + 14px); max-height: calc(100vh - var(--alto-barra) - 28px); overflow-y: auto; border-radius: 12px; }
}
.panel-t { font-size: 12.5px; font-weight: 900; color: var(--text-secondary); margin: 0 0 12px; }

/* Aviso de validación sobre el resumen (el detalle está en "Alertas") */
.aviso {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 18px; padding: 10px 14px;
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--status-bad); border-radius: 8px;
  font-size: 13px; color: var(--text-secondary);
}
.aviso.warn { border-left-color: var(--status-warning); }
.aviso .ico { color: var(--status-bad); font-weight: 900; }
.aviso.warn .ico { color: var(--status-warning); }
.aviso b { color: var(--text-primary); }
.aviso .motivo { flex: 1 1 220px; }
.aviso .ir { margin-left: auto; min-height: 24px; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--brand-orange-ink); cursor: pointer; white-space: nowrap; }

/* Precio de la oferta como ecuación: costo + utilidad = neto + IVA = con IVA */
.eq { display: flex; align-items: stretch; }
.eq-card { flex: 1 1 0; min-width: 0; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 12px 14px 13px; }
.eq-card .l { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.eq-card .v { font-size: clamp(17px, 1.75vw, 21px); font-weight: 900; line-height: 1.2; margin-top: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-card .s { font-size: 11.5px; line-height: 1.35; color: var(--text-secondary); margin-top: 3px; }
.eq-card.util .v { color: var(--brand-orange-ink); }
.eq-card.hero { flex-grow: 1.3; border-color: var(--brand-orange); box-shadow: inset 3px 0 0 var(--brand-orange); background-image: linear-gradient(var(--orange-soft), var(--orange-soft)); }
.eq-card.hero .l { color: var(--text-primary); }
.eq-card.hero .v { font-size: clamp(20px, 2.1vw, 25px); }
.eq-op {
  flex: 0 0 auto; align-self: center; position: relative; z-index: 1; width: 24px; height: 24px; margin: 0 -5px;
  display: grid; place-items: center; border-radius: 50%; background: var(--page-plane); border: 1px solid var(--gridline);
  color: var(--text-secondary); font-size: 14px; font-weight: 900; line-height: 1;
}
@media (max-width: 860px) {
  .eq { flex-direction: column; }
  .eq-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .eq-card .v, .eq-card.hero .v { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 18px; }
  .eq-card.hero .v { font-size: 21px; }
  .eq-op { margin: -7px 0; }
}

/* Editor de utilidad por partida: sin ancho mínimo y con títulos y controles que se parten,
   para que la tabla quepa junto a «Valores para la cotización» sin barra lateral */
.util-tbl { min-width: 0; }
.util-tbl th { white-space: normal; }
.util-tbl .pnom { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.util-tbl .pnom .t { font-weight: 700; line-height: 1.3; }
.util-tbl .pnom .s { font-size: 11.5px; color: var(--text-muted); }
.util-tbl .dot { margin-right: 7px; }
.util-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.util-edit .ci { width: 110px; min-width: 70px; }
.util-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--gridline); background: var(--surface-1); border-radius: 10px 10px 0 0; }
.util-quick .lbl { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.util-quick .input-affix { width: 96px; }
.util-quick .input { min-height: 32px; padding: 4px 26px 4px 8px; font-size: 13px; }
.util-quick .grupo-btn { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.grid-2.iguales { align-items: stretch; }
.grid-2.iguales > .panel + .panel { margin-top: 0; }
.grid-2.iguales .pbar { grid-template-columns: minmax(96px, 190px) minmax(0, 1fr) 96px; }
.btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn[aria-disabled="true"]:hover { border-color: var(--gridline); }

/* Evaluación inmediata bajo la tabla de utilidad */
.eval { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-top: 12px; }
.eval-item { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--brand-gray-7); border-radius: 10px; padding: 12px 14px 8px; min-width: 0; }
.eval-item.s-ok { border-left-color: var(--status-good); }
.eval-item.s-warn { border-left-color: var(--status-warning); }
.eval-item.s-bad { border-left-color: var(--status-bad); }
.eval-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eval-n { font-size: 12.5px; font-weight: 900; }
.eval-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 4px; font-size: 22px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.eval-sub { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.eval-txt { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 6px; }

/* Valores por partida para la cotización, con botón de copiar */
.cotiz { padding: 16px 16px 12px; }
.cotiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel .cotiz-head .seccion-titulo { margin: 0; }
.cotiz-sub { font-size: 12px; color: var(--text-muted); margin: 3px 0 0 16px; }
.cotiz-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gridline); }
.cotiz-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 10px; padding: 8px 0; border-bottom: 1px solid var(--gridline); }
.cotiz-list .pcode { align-self: start; margin-top: 1px; }
.cotiz-nom .t { font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cotiz-nom .s { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.cotiz-v { font-size: 14px; font-weight: 900; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cotiz-tot { padding-top: 6px; }
.cotiz-tot .fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 10px; padding: 2px 0; font-size: 13px; color: var(--text-secondary); }
.cotiz-tot .v { text-align: right; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cotiz-tot .fila.principal { padding: 4px 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--gridline); font-size: 14px; font-weight: 900; color: var(--text-primary); }
.cotiz-tot .fila.principal .v { font-size: 18px; font-weight: 900; }
.cotiz-nota { font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0; }
.icon-btn.copiar { width: 28px; height: 28px; border-color: var(--gridline); background: var(--surface-card); }
.icon-btn.copiar svg { width: 14px; height: 14px; }
.icon-btn.copiar:hover { color: var(--brand-orange-ink); border-color: var(--brand-orange); }
.icon-btn.copiar.hecho, .icon-btn.copiar.hecho:hover { color: var(--status-good); border-color: var(--status-good); background: var(--status-good-soft); }
.btn.hecho, .btn.hecho:hover { color: var(--status-good); border-color: var(--status-good); }
.copiar-txt {
  display: inline-block; padding: 4px 2px; margin: -4px -2px; background: none; border: 0; font: inherit; font-weight: 700; color: var(--text-secondary); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px; font-variant-numeric: tabular-nums;
}
.copiar-txt:hover { color: var(--brand-orange-ink); }
.copiar-txt.hecho { color: var(--status-good); }

/* KPIs de evaluación, por grupo */
.kpi-grupo + .kpi-grupo { margin-top: 18px; }
.kpi-grupo-t { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.kpi-grupo-t::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--gridline); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.kpi { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 3px solid var(--brand-gray-7); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi.s-ok { border-left-color: var(--status-good); }
.kpi.s-warn { border-left-color: var(--status-warning); }
.kpi.s-bad { border-left-color: var(--status-bad); }
.kpi-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.kpi-name { font-weight: 900; font-size: 13.5px; line-height: 1.3; }
.kpi .kpi-value { font-size: 26px; margin-top: 2px; }
.kpi-read { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.kpi .barra-kpi { height: 10px; margin: 10px 0 4px; }
.kpi .barra-kpi .resto { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--gridline); }
.kpi details { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--gridline); }
.kpi summary { min-height: 26px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--brand-orange-ink); list-style: none; display: flex; align-items: center; gap: 5px; }
.kpi summary::-webkit-details-marker { display: none; }
.kpi summary::before { content: '+'; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: var(--orange-soft); font-size: 12px; line-height: 1; }
.kpi details[open] summary::before { content: '−'; }
.kpi details p { font-size: 12.5px; color: var(--text-secondary); margin: 7px 0 0; }
.kpi details .kpi-origin { font-size: 11.5px; color: var(--text-muted); }
.formula { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; background: var(--surface-1); border: 1px solid var(--gridline); padding: 3px 6px; border-radius: 4px; display: inline-block; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 900; padding: 1px 6px; border-radius: 4px; background: var(--surface-1); color: var(--text-secondary); border: 1px solid var(--gridline); text-transform: uppercase; letter-spacing: .03em; }
.tag.new { background: var(--brand-orange); border-color: var(--brand-orange); color: #000; }

/* Sensibilidad: oferta actual frente al escenario */
.comp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.comp-tbl th { padding: 0 8px 8px; border-bottom: 1px solid var(--gridline); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); vertical-align: bottom; }
.comp-tbl th.num { text-align: right; }
.comp-tbl td { padding: 8px; border-bottom: 1px solid var(--gridline); font-variant-numeric: tabular-nums; }
.comp-tbl th:first-child, .comp-tbl td:first-child { padding-left: 0; }
.comp-tbl th:last-child, .comp-tbl td:last-child { padding-right: 0; }
.comp-tbl tr:last-child td { border-bottom: 0; }
.comp-tbl tr.clave td { font-weight: 900; }
.sens-lectura { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--gridline); font-size: 12px; color: var(--text-secondary); }
@media (max-width: 520px) { .comp-tbl { font-size: 12px; } .comp-tbl th, .comp-tbl td { padding-left: 5px; padding-right: 5px; } }

/* Sensibilidad */
.sens-row { display: grid; grid-template-columns: 110px 1fr 96px; gap: 12px; align-items: center; margin-bottom: 12px; }
.sens-row label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.sens-row input[type="range"] { width: 100%; height: 24px; accent-color: var(--brand-orange); }
.sens-row .input { min-height: 34px; }

/* Resumen por partida (APU) */
.apu-toggle { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); width: 24px; height: 24px; border-radius: 5px; display: inline-grid; place-items: center; }
.apu-toggle:hover { background: var(--chip-hover); color: var(--brand-orange-ink); }
.apu-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.apu-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.apu-row > td { background: var(--surface-1); padding: 0 12px 14px 44px !important; }
.apu-panel { border: 1.5px solid var(--brand-orange); border-radius: 10px; background: var(--surface-card); padding: 6px 14px 10px; }
.apu-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.apu-table td, .apu-table th { padding: 5px 8px; border-bottom: 1px solid var(--gridline); text-align: left; }
.apu-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 700; }
.apu-table tr:last-child td { border-bottom: 0; }
.apu-cat td { font-weight: 900; color: var(--text-primary); padding-top: 10px; }
.apu-cat .nombre { display: inline-flex; align-items: center; gap: 8px; }

/* Alertas ("Qué mirar primero" de Análisis Financiero) */
.lista-atencion { list-style: none; margin: 0; padding: 4px 18px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; }
.lista-atencion li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--gridline); font-size: 13px; }
.lista-atencion li:last-child { border-bottom: none; }
.lista-atencion .marca { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; margin-top: 5px; align-self: flex-start; }
.lista-atencion .marca.error { background: var(--status-bad); }
.lista-atencion .marca.warn { background: var(--status-warning); }
.lista-atencion .marca.info { background: var(--brand-gray-7); }
.lista-atencion .motivo { color: var(--text-secondary); line-height: 1.45; }
.lista-atencion .ir { flex: 0 0 auto; margin-left: auto; min-height: 24px; font-size: 12px; color: var(--brand-orange-ink); background: none; border: none; cursor: pointer; white-space: nowrap; font-weight: 700; }
.vacio-ok { font-size: 13px; color: var(--status-good); font-weight: 700; padding: 12px 16px; background: var(--status-good-soft); border-radius: 10px; }

/* Guía */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.guide-card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 12px; padding: 18px; }
.guide-card h3 { font-size: 15px; font-weight: 900; margin-bottom: 6px; }
.guide-card dl { margin: 12px 0 0; display: grid; gap: 8px; }
.guide-card dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.guide-card dd { margin: 0; font-size: 13px; color: var(--text-secondary); }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; counter-reset: paso; }
.paso { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 12px; padding: 14px 16px; }
.paso::before { counter-increment: paso; content: counter(paso); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--brand-orange); color: #000; font-weight: 900; font-size: 13px; margin-bottom: 8px; }
.paso h4 { font-size: 14px; font-weight: 900; margin-bottom: 4px; }
.paso p { font-size: 12.5px; color: var(--text-secondary); margin: 0; }

/* ---- Pasos del editor: encabezado, ayuda, pie y subpestañas ------------------ */
.paso-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 18px; }
.paso-head-txt { flex: 1 1 420px; min-width: 0; }
.paso-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: 20px; font-weight: 900; line-height: 1.2; margin: 0 0 4px; }
.paso-num { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-orange-ink); }
.paso-proposito { font-size: 13.5px; color: var(--text-secondary); margin: 0; max-width: 780px; }
.ayuda { flex: 0 0 auto; }
.ayuda[open] { flex: 1 1 100%; }
.ayuda summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; list-style: none; cursor: pointer;
  border: 1px solid var(--gridline); border-radius: 999px; background: var(--surface-card);
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
}
.ayuda summary::-webkit-details-marker { display: none; }
.ayuda summary:hover { color: var(--brand-orange-ink); border-color: var(--brand-orange); }
.ayuda[open] summary { color: var(--brand-orange-ink); border-color: var(--brand-orange); }
.ayuda summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ayuda-body {
  margin-top: 10px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--brand-orange); border-radius: 8px; font-size: 13px; color: var(--text-secondary);
}
.ayuda-body p { margin: 0 0 6px; }
.ayuda-body p:last-child { margin: 0; }
.ayuda-body b { color: var(--text-primary); }

.paso-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--gridline); }
.paso-falta { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--status-warning); text-align: center; }
.paso-pie .btn svg { order: 2; }
.btn-sig { background: var(--text-primary); border-color: var(--text-primary); color: var(--page-plane); }
.btn-sig:hover { border-color: var(--brand-orange); box-shadow: inset 0 -3px 0 var(--brand-orange); }
.marca-pop { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; background: var(--brand-gray-7); }
.marca-pop.error { background: var(--status-bad); }
.marca-pop.warn { background: var(--status-warning); }

.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.subtab {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; min-width: 150px;
  padding: 8px 12px; border: 1px solid var(--gridline); border-radius: 10px; background: var(--surface-card);
  color: var(--text-secondary); cursor: pointer; text-align: left;
}
.subtab:hover { border-color: var(--baseline); color: var(--text-primary); }
.subtab.active { border-color: var(--brand-orange); box-shadow: inset 0 0 0 1px var(--brand-orange); background-image: linear-gradient(var(--orange-soft), var(--orange-soft)); color: var(--text-primary); }
.subtab .st-t { font-size: 13px; font-weight: 900; }
.subtab .st-v { grid-column: 2 / -1; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.subtab .count { min-width: 20px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--gridline); font-size: 11px; line-height: 17px; text-align: center; color: var(--text-secondary); }
.subtab .count.err { background: var(--status-bad-soft); border-color: transparent; color: var(--status-bad); font-weight: 700; }

/* Secciones plegables con sus valores resumidos en el título */
.plegable { padding: 0; }
.plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 56px; cursor: pointer; list-style: none; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary .seccion-titulo { margin: 0; }
.plegable .pl-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plegable .pl-res { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.plegable[open] .pl-res { display: none; }
.pl-accion { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand-orange-ink); }
.pl-accion::before { content: 'Editar'; }
.plegable[open] .pl-accion::before { content: 'Ocultar'; }
.pl-accion::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.plegable[open] .pl-accion::after { transform: rotate(-135deg) translateY(-1px); }
.plegable > summary:hover .pl-accion { text-decoration: underline; }
.pl-cuerpo { padding: 0 18px 16px; }
.grupo-plegable { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.grupo-plegable > .panel + .panel { margin-top: 0; }
.grupo-plegable-t { margin: 4px 2px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.grupo-plegable-t .tn, .sub-t .tn { font-weight: 400; text-transform: none; letter-spacing: 0; }
.pie-param { margin: 2px 2px 0; font-size: 12.5px; color: var(--text-secondary); }
.sub-t { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin: 0 0 10px; }
.sub-t .tn { color: var(--text-muted); }
.opc { font-weight: 400; color: var(--text-muted); }
.plegable-sec > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 28px; cursor: pointer; list-style: none; }
.plegable-sec > summary::-webkit-details-marker { display: none; }
.plegable-sec > summary .pl-res { font-size: 12px; color: var(--text-muted); }
.plegable-sec > summary::after { content: 'Ver'; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand-orange-ink); }
.plegable-sec[open] > summary::after { content: 'Ocultar'; }

/* Mano de obra: personas × días de cada nivel en una sola celda */
.pxd { display: flex; align-items: center; gap: 4px; }
.pxd .por { color: var(--text-muted); font-size: 12px; }
.tbl .lvl-th { text-align: left; }
.tbl .veces { color: var(--text-secondary); }

/* Veredicto de la evaluación: cuatro preguntas */
.veredicto { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: 4px solid var(--brand-gray-7); border-radius: 12px; padding: 16px 20px 8px; }
.veredicto.s-ok { border-left-color: var(--status-good); }
.veredicto.s-warn { border-left-color: var(--status-warning); }
.veredicto.s-bad { border-left-color: var(--status-bad); }
.ver-titular { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 900; margin-bottom: 6px; }
.ver-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; background: var(--surface-1); border: 1px solid var(--gridline); flex: 0 0 auto; }
.veredicto.s-ok .ver-ico { background: var(--status-good-soft); color: var(--status-good); border-color: transparent; }
.veredicto.s-warn .ver-ico { background: var(--status-warning-soft); color: var(--status-warning); border-color: transparent; }
.veredicto.s-bad .ver-ico { background: var(--status-bad-soft); color: var(--status-bad); border-color: transparent; }
.ver-lista { list-style: none; margin: 0; padding: 0; }
.ver-lista li { display: grid; grid-template-columns: 104px minmax(160px, 250px) minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--gridline); font-size: 13px; }
.ver-lista .chip { justify-self: start; }
.ver-q { font-weight: 900; }
.ver-a { color: var(--text-secondary); }
.ver-lista .ir { display: inline-block; min-height: 24px; margin-left: 6px; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--brand-orange-ink); cursor: pointer; white-space: nowrap; }
@media (max-width: 760px) {
  .ver-lista li { grid-template-columns: auto minmax(0, 1fr); }
  .ver-a { grid-column: 1 / -1; }
}

/* ---- Listado: estados como filtro directo ------------------------------------ */
.viz-filtergrid .span-8 { grid-column: span 8; }
.viz-filtergrid .span-4 { grid-column: span 4; }
.filtro-estados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.filtro-estados .fe-l { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.chip-estado { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.chip-estado .swatch { width: 10px; height: 10px; border-radius: 2px; }
.chip-estado .k { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip-estado:hover:not([disabled]) { border-color: var(--brand-orange); }
.chip-estado.on { border-color: var(--brand-orange); box-shadow: inset 0 0 0 1px var(--brand-orange); background-image: linear-gradient(var(--orange-soft), var(--orange-soft)); }
.chip-estado[disabled] { opacity: .5; cursor: default; }

/* ---- Inicio: el flujo en 5 pasos --------------------------------------------- */
.hub-card-cabecera h3 { margin: 0; }
.pasos-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; counter-reset: pm; }
.pasos-mini li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 48px; position: relative; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; font-size: 12.5px; color: var(--text-secondary); }
.pasos-mini li::before { counter-increment: pm; content: counter(pm); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-orange); color: #000; font-weight: 900; font-size: 12.5px; }
.pasos-mini b { font-size: 13.5px; color: var(--text-primary); }
/* Inicio vacío: las seis etapas del recorrido; las que se hacen aquí, marcadas */
.pasos-mini-intro { margin: -4px 0 12px; font-size: 13px; color: var(--text-secondary); max-width: 820px; }
.pasos-mini.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasos-mini.seis li::before { background: var(--surface-card); color: var(--text-secondary); border: 1.5px solid var(--brand-gray-7); }
.pasos-mini.seis li.aqui { border-color: var(--brand-orange); box-shadow: inset 3px 0 0 var(--brand-orange); }
.pasos-mini.seis li.aqui::before { background: var(--brand-orange); color: #000000; border-color: var(--brand-orange); }
.pasos-mini .pm-donde { font-size: 11.5px; font-weight: 700; color: var(--brand-orange-ink); }
@media (max-width: 900px) { .pasos-mini.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pasos-mini.seis { grid-template-columns: 1fr; } }
.section-head a { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; }

/* ---- Guía de uso ------------------------------------------------------------- */
.guia-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guia-paso { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 14px 18px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 12px; }
.gp-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-orange); color: #000; font-weight: 900; }
.guia-paso h4 { font-size: 15px; font-weight: 900; margin: 3px 0 4px; }
.guia-paso h4 .tn { font-weight: 400; color: var(--text-muted); }
.guia-paso p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.guia-paso .gp-tip { margin-top: 4px; font-size: 12.5px; }
.guia-lectura { margin: 0; padding-left: 18px; color: var(--text-secondary); display: grid; gap: 6px; font-size: 13px; }
.guia-lectura strong { color: var(--text-primary); }
.guia-ref { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px 20px; align-items: start; }
.kpi-ref { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; margin-bottom: 8px; }
.kpi-ref > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; min-height: 44px; cursor: pointer; list-style: none; }
.kpi-ref > summary::-webkit-details-marker { display: none; }
.kpi-ref > summary::after { content: '+'; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--orange-soft); color: var(--brand-orange-ink); font-weight: 900; }
.kpi-ref[open] > summary::after { content: '−'; }
.kr-n { font-weight: 900; font-size: 13.5px; }
.kr-q { grid-column: 1; font-size: 12.5px; color: var(--text-secondary); }
.kpi-ref dl { margin: 0; padding: 0 14px 12px; display: grid; gap: 6px; }
.kpi-ref dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.kpi-ref dd { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* ---- Configuración ------------------------------------------------------------ */
.cfg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .cfg-grid { grid-template-columns: 1fr 1fr; } }
.modal-body .sub-t { margin-top: 6px; }

/* ---- Indicadores compactos ----------------------------------------------------- */
.kpi-name { display: flex; align-items: center; gap: 8px; }

/* ---- Mano de obra: cabe en 1366 px ------------------------------------------------ */
.tbl.mo .picker { min-width: 130px; max-width: 190px; }
.tbl.mo .ci.desc { min-width: 140px; }
.tbl.mo .ci.w-xxs { min-width: 40px; max-width: 48px; padding: 0 5px; }

/* ---- Móvil: las tablas de edición se leen como tarjetas ---------------------------- */
@media (max-width: 640px) {
  .tabla-contenedor:has(> .tbl-apilable), .tabla-contenedor:has(> .util-quick) { overflow: visible; border: 0; background: none; }
  .tbl-apilable { min-width: 0 !important; display: block; font-size: 13px; }
  .tbl-apilable thead { display: none; }
  .tbl-apilable tbody, .tbl-apilable tfoot { display: block; }
  .tbl-apilable tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; }
  .tbl-apilable td { grid-column: span 3; display: block; padding: 0 !important; border: 0 !important; min-width: 0; width: auto !important; background: none !important; }
  .tbl-apilable td.tercio { grid-column: span 2; }
  .tbl-apilable td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .tbl-apilable td.num { text-align: left; }
  .tbl-apilable td.code, .tbl-apilable td.cell-actions { display: flex; }
  .tbl-apilable .code-badge + .ver { display: inline; }
  .tbl-apilable td.code { grid-column: 1 / span 3; grid-row: 1; align-self: center; }
  .tbl-apilable td.cell-actions { grid-column: 4 / span 3; grid-row: 1; flex-direction: row; justify-content: flex-end; align-items: center; }
  .tbl-apilable td:first-child:not(.code), .tbl-apilable td.col-titulo,
  .tbl-apilable td:has(> .ci.desc), .tbl-apilable td:has(> .picker) { grid-column: 1 / -1; }
  .tbl-apilable td.lvl { grid-column: span 2; }
  .tbl-apilable td.code:has(+ td > .ci.desc) { grid-column: 1 / span 1; }
  .tbl-apilable td.code + td:has(> .ci.desc) { grid-row: 1; grid-column: 2 / span 4; }
  .tbl-apilable td.code + td:has(> .ci.desc)::before { display: none; }
  .tbl-apilable td.code:has(+ td > .ci.desc) ~ td.cell-actions { grid-column: 6; }
  .tbl-apilable .ci, .tbl-apilable .picker, .tbl-apilable .combo { width: 100%; max-width: none !important; min-width: 0 !important; }
  .tbl-apilable .ci { height: 40px; font-size: 16px; }
  .tbl-apilable .pxd .ci { flex: 1 1 0; }
  .tbl-apilable .util-edit .ci { flex: 1 1 auto; width: auto; }
  .tbl-apilable tr.has-error { box-shadow: inset 3px 0 0 var(--status-bad); }
  .tbl-apilable tr.has-warn { box-shadow: inset 3px 0 0 var(--status-warning); }
  .tbl-apilable tr.empty-row, .tbl-apilable tfoot tr { display: block; }
  .tbl-apilable tr.empty-row td { display: block; text-align: center; }
  .tbl-apilable tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; background: var(--surface-1); }
  .tbl-apilable tfoot td:empty { display: none; }
  .tbl-apilable tfoot td { display: inline-block; }
  .tbl-apilable tfoot td[data-label]::before { font-size: 10.5px; }
  .tbl-lista tr.clickable td.col-titulo .proj-title { font-size: 14px; }
  .subtab { min-width: 0; flex: 1 1 140px; }
  .paso-pie .btn { flex: 1 1 auto; }
}

/* Composición del precio: leyenda con monto y porcentaje en una línea */
.leyenda-comp { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; }
.leyenda-comp li { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-comp .n { color: var(--text-secondary); }
.leyenda-comp .v { font-weight: 900; font-variant-numeric: tabular-nums; }
.leyenda-comp .p { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Simulador: resultado del escenario junto a su semáforo */
.sens-chip { display: inline-flex; align-items: center; min-height: 24px; }

/* Cabecera: en pantallas angostas los botones quedan solo con su ícono */
.viz-theme-toggle.hb { display: inline-flex; align-items: center; gap: 7px; }
.viz-theme-toggle.hb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
@media (max-width: 600px) {
  .viz-header .viz-container { flex-wrap: nowrap; gap: 10px; }
  .viz-titleblock { min-width: 0; }
  .viz-titleblock h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .viz-theme-toggle.hb { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .viz-theme-toggle.hb .hb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .viz-header .viz-modnav { margin-top: 10px; padding-top: 6px; }
  .editor-head { margin-bottom: 10px; }
  .editor-title h2 { font-size: 19px; }
  .editor-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .paso-head { margin-bottom: 12px; }
  .paso-titulo { font-size: 18px; }
  .subtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .subtab { position: relative; grid-template-columns: minmax(0, 1fr); padding: 7px 8px; min-width: 0; }
  .subtab .swatch { display: none; }
  .subtab .count { position: absolute; top: -8px; right: -4px; background: var(--surface-card); }
  .subtab .st-t { font-size: 12px; line-height: 1.2; }
  .subtab .st-v { grid-column: 1 / -1; font-size: 11px; }
  .tbl-apilable td.dos-tercios { grid-column: span 4; }
  .tbl-apilable td.veces > span { font-size: 13px; }
  .viz-footer { padding-top: 18px; }
}

/* Utilidad y precio: meta del margen bajo el total, y aviso breve si falta el presupuesto */
.meta-margen { font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: normal; }
.meta-margen span { white-space: nowrap; }
.hint-linea { font-size: 12.5px; color: var(--text-secondary); margin: 10px 2px 0; }
/* Alertas dentro del veredicto */
.lista-atencion.en-veredicto { margin: 4px 0 10px; padding: 2px 14px; background: var(--surface-1); }

/* Datos del proyecto en móvil: los campos cortos van de a dos */
@media (max-width: 600px) {
  .fila-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .fila-campos .campo.ancho, .fila-campos .campo:has(textarea) { grid-column: 1 / -1; }
  .fila-campos .campo:has(#f-titulo), .fila-campos .campo:has(#f-cliente) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .pasos-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos-mini li { padding: 10px 10px 10px 42px; }
  .pasos-mini li::before { left: 10px; top: 10px; }
}

/* ---- Diálogo, toast, tooltip --------------------------------------------------- */
dialog#modal {
  border: 1px solid var(--border-hairline); border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 32px));
  background: var(--surface-card); color: var(--text-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px;
}
dialog#modal.wide { width: min(820px, calc(100vw - 32px)); }
dialog#modal::backdrop { background: rgba(0, 0, 0, .55); }
.leyenda-inline .viz-chip { font-size: 12px; }
.leyenda-inline .viz-chip .swatch { width: 10px; height: 10px; border-radius: 2px; }
.leyenda-inline .viz-chip:hover { border-color: var(--brand-orange); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-hairline); }
.modal-head h2 { font-size: 15px; font-weight: 900; }
.modal-body { padding: 16px 20px 6px; }
.modal-body p, .modal-body li { color: var(--text-secondary); }
.modal-body ul { padding-left: 18px; margin: 8px 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; flex-wrap: wrap; }
.modal-foot .izq { margin-right: auto; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px);
  background: #000000; color: #ffffff; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 13px;
  border-left: 3px solid var(--brand-orange); box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1700; max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-left-color: #f85149; }

/* Tooltip en negro oficial, fijo en ambos temas (igual que Finanzas) */
.viz-tooltip {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1650;
  background: #000000; color: #ffffff; font-size: 11.5px; line-height: 1.4; padding: 7px 10px; border-radius: 6px;
  max-width: 280px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .1s ease-out;
}
.viz-tooltip.show { opacity: 1; }
.viz-tooltip b { display: block; margin-bottom: 1px; }
.viz-tooltip .tt-hint { color: #98989a; font-size: 10.5px; margin-top: 3px; }

/* ---- Responsive ---------------------------------------------------------------- */
@media (max-width: 760px) {
  .campo.doble { grid-column: 1 / -1; }
  .editor-actions { align-items: flex-start; width: 100%; }
  #save-state { text-align: left; }
  .sens-row { grid-template-columns: 1fr 96px; }
  .sens-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .pbar { grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 10px; }
  .pbar .pista { grid-column: 1 / -1; grid-row: 2; }
  .lectura-item { padding: 0 8px; }
  .lectura-item .v { font-size: 13.5px; }
}
@media (max-width: 600px) {
  .viz-titleblock p { display: none; }
  .viz-header { padding: 14px 0; }
  .page-head h2 { font-size: 19px; }
  .panel { padding: 16px; }
  .pasos-bar { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 28px; }
  .lectura-item.opt { display: none; }
}
@media screen and (max-width: 600px), screen and (pointer: coarse) {
  .input, .select, .textarea, .viz-field input, .viz-field select { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; }
  .viz-theme-toggle { min-height: 40px; }
  .icon-btn, .icon-btn.copiar { width: 40px; height: 40px; }
}

/* ---- Impresión (resumen del proyecto) -------------------------------------------- */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body, .viz-root { background: #ffffff !important; color: #000000; }
  .viz-root { padding: 0; --surface-card: #ffffff; --surface-1: #fafafa; --gridline: #e1e0d9; --text-primary: #111; --text-secondary: #52514e; --text-muted: #666560; --bar-outline: transparent; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .viz-header, .barra-pestanas, .viz-footer, .no-print, #toast, #pop, .viz-tooltip, .editor-head, .util-quick, .kpi details, .apu-toggle { display: none !important; }
  .print-only { display: block; }
  .print-salto { break-before: page; }
  .plegable-sec > summary::after, .pl-accion { display: none !important; }
  .viz-container { max-width: none; padding: 0; }
  .calc-layout { display: block; }
  .calc-resultados { position: static; margin-top: 14px; max-height: none; overflow: visible; }
  .copiar-txt { text-decoration: none; color: inherit; }
  .panel, .kpi-card, .kpi, .eq-card, .eval-item, .tabla-contenedor, .lista-atencion { break-inside: avoid; }
  .kpi-card, .kpi, .tabla-contenedor, .lista-atencion { box-shadow: none; }
  .section { margin-top: 16px; }
  .tbl { min-width: 0 !important; font-size: 10px; }
  .tabla-contenedor { overflow: visible; }
  .ci, .segmentado { border-color: transparent; background: none; }
  .en-vivo, .sens-row input[type="range"] { display: none !important; }
  .sens-row { grid-template-columns: 1fr 96px; }
  .print-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 3px solid #ff5100; padding-bottom: 8px; margin-bottom: 14px; }
  .print-head img { width: 4.2cm; height: auto; margin: .3cm .6cm .3cm .2cm; } /* mínimo 4 cm y área de seguridad del manual */
}

/* ---- SharePoint: ingreso, cuenta, carpetas de oferta y papelera ---------------------- */
.login-wrap { display: flex; justify-content: center; padding: 28px 0 12px; }
.login-card { width: min(460px, 100%); gap: 12px; }
.login-card:hover { transform: none; }
.login-card h2 { font-size: 17px; font-weight: 900; }
.login-card h3 { font-size: 15px; font-weight: 900; margin-top: 6px; }
.login-card .campo { margin: 4px 0 0; }
.login-card .btn { justify-content: center; }
.login-ms { width: 100%; min-height: 44px; font-weight: 700; }
.login-ms svg { width: 18px; height: 18px; }
.login-msg { font-size: 12.5px; color: var(--text-secondary); margin: 4px 0 0; min-height: 1em; }
.login-msg:empty { display: none; }
.login-msg.err { color: var(--status-bad); font-weight: 700; }
.login-msg.ok { color: var(--status-good); font-weight: 700; }
.cuenta-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-btn[hidden] { display: none; }
.cuenta-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--status-good); }
.cuenta-dot.pendiente { background: var(--brand-orange); }
.page-head .back { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 4px; font-size: 12.5px; color: var(--text-secondary); text-decoration: none; font-weight: 700; }
.cell-actions .btn + .btn { margin-left: 6px; }
.link-btn.peligro { color: var(--status-bad); }

/* Carpeta de la oferta en la lista y en el encabezado del proyecto */
.proj-carpeta, .meta-carpeta { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 12px; }
.proj-carpeta { display: flex; margin-top: 2px; }
.proj-carpeta span, .meta-carpeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-carpeta svg, .meta-carpeta svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a.meta-carpeta { color: var(--text-secondary); text-decoration: none; max-width: 340px; }
a.meta-carpeta:hover { color: var(--brand-orange-ink); text-decoration: underline; }
/* Modo local: la carpeta de la oferta donde queda el Excel, con el punto de su estado */
button.meta-carpeta { max-width: 340px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
button.meta-carpeta:hover { color: var(--brand-orange-ink); }
button.meta-carpeta:hover span:not(.dot) { text-decoration: underline; }
button.meta-carpeta .dot { margin: 0 0 0 2px; flex: 0 0 auto; }
#ed-oferta .nota { margin: 0 0 12px; }
.oferta-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0; font-size: 13px; }
.oferta-dl dt { font-weight: 700; color: var(--text-muted); }
.oferta-dl dd { margin: 0; overflow-wrap: anywhere; }
.cp-pie { margin: 8px 0 0; }

/* Selector de la carpeta de oferta */
.cp-lista { max-height: min(46vh, 420px); overflow-y: auto; margin: 10px 0 6px; border: 1px solid var(--gridline); border-radius: 10px; background: var(--surface-card); }
.cp-grupo { position: sticky; top: 0; z-index: 1; padding: 6px 12px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--page-plane); border-bottom: 1px solid var(--gridline); }
.cp-grupo[hidden], .cp-fila[hidden] { display: none; }
.cp-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border-hairline); background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.cp-fila:last-child { border-bottom: 0; }
.cp-fila:hover { background: var(--surface-1); }
/* El foco se ve como contorno: la barra naranja queda solo para la carpeta elegida */
.cp-fila:focus-visible { background: var(--surface-1); outline: 2px solid var(--brand-orange); outline-offset: -2px; }
.cp-fila.actual { box-shadow: inset 3px 0 0 var(--baseline); }
.cp-fila .code-badge { flex: 0 0 auto; min-width: 44px; text-align: center; }
.cp-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cp-t b { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.cp-sub { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.cp-sub.cp-aviso { color: var(--status-warning); font-weight: 700; }
/* Es un formulario: la fila elegida queda marcada y se confirma con el botón principal (2026-10-06) */
.cp-fila.sel { background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--brand-orange); }
.cp-check { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--gridline); color: transparent; }
.cp-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cp-fila.sel .cp-check { background: var(--brand-orange); border-color: var(--brand-orange); color: #000000; }
.cp-fila .chip { flex: 0 0 auto; }
.cp-barra { display: flex; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; }
.cp-barra .campo { flex: 1 1 260px; margin-bottom: 0; }
.cp-barra .btn { min-height: 38px; }
.cp-lista[hidden] { display: none; }
.cp-vacio { margin: 10px 0; padding: 14px 16px; border: 1px dashed var(--gridline); border-radius: 10px; text-align: center; color: var(--text-secondary); }
.cp-vacio[hidden] { display: none; }
/* Carpeta nueva, sin salir del formulario */
.cp-nueva { margin: 12px 0 0; padding: 12px 16px 14px; border: 1px solid var(--border-hairline); border-left: 3px solid var(--brand-orange); border-radius: 10px; background: var(--surface-1); }
.cp-nueva[hidden] { display: none; }
.cp-nueva[aria-busy="true"] { opacity: .75; }
.cp-nueva-t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 900; color: var(--text-primary); }
.cp-nueva-t svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-nueva .fila-campos { grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); }
.cp-nueva .campo { margin-bottom: 8px; }
.cp-nueva .actions { margin-top: 8px; }
.cp-previa { margin: 0; min-height: 1.4em; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.cp-previa.err { color: var(--status-bad); font-weight: 700; }
.cp-previa .muted { font-weight: 400; }
.cp-nueva:not([hidden]) ~ .cp-lista { max-height: min(30vh, 280px); }
/* Con el panel abierto, el aviso de «sin coincidencias» y la invitación a elegir sobran */
.cp-nueva:not([hidden]) ~ .cp-vacio, .cp-nueva:not([hidden]) ~ .cp-elegida:has(> .muted:only-child) { display: none; }
/* Lo elegido y lo que el proyecto toma de la planilla */
.cp-elegida { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 4px; min-height: 22px; font-size: 13px; color: var(--text-secondary); }
.cp-elegida:empty { display: none; }
.cp-el-t { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); }
.cp-el-t svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--status-good); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cp-el-pl { padding-left: 22px; font-size: 12.5px; }
.cp-elegida .check-l { padding-left: 22px; margin: 4px 0 0; }
.cp-ini { max-width: 380px; margin: 10px 0 4px; }
.cp-ini .input { max-width: 120px; text-transform: uppercase; }
.campo .hint.err, .hint.err { color: var(--status-bad); font-weight: 700; }
.input[aria-invalid="true"] { border-color: var(--status-bad); box-shadow: inset 0 0 0 1px var(--status-bad); }
@media (max-width: 600px) {
  .cp-nueva .fila-campos { grid-template-columns: 1fr; }
  .cp-barra .btn { width: 100%; }
}

/* Proyectos guardados solo en el navegador */
.loc-lista { display: flex; flex-direction: column; margin: 10px 0; border: 1px solid var(--gridline); border-radius: 10px; }
.loc-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border-hairline); }
.loc-fila:last-child { border-bottom: 0; }
.loc-t { flex: 1; min-width: 160px; font-weight: 700; }

/* ---- Análisis Financiero: envío de costos por la carpeta de intercambio ---------------- */
#af-otro[hidden] { display: none; }
.af-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.af-panel .af-texto { flex: 1 1 320px; min-width: 0; }
.af-panel .actions { flex: 0 0 auto; }
.af-linea { margin: 0 0 6px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.af-linea:last-child { margin-bottom: 0; }
.af-linea .chip { margin-right: 6px; }
.af-aviso { color: var(--status-warning); font-weight: 700; }
.af-nota { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }
.af-tabla { min-width: 0; margin-top: 4px; }
.af-origen { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: normal; }
.af-tabla tr.cambia td.nuevo { font-weight: 900; }
.af-tabla tr.pisa td.hoy { color: var(--status-warning); }
.af-tabla th { white-space: normal; }
@media (max-width: 600px) {
  .af-tabla { font-size: 12.5px; }
  .af-tabla th, .af-tabla td, .af-tabla th:first-child, .af-tabla td:first-child, .af-tabla th:last-child, .af-tabla td:last-child { padding-left: 6px; padding-right: 6px; }
}
.check-l { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 2px 0 10px; }

/* Gate de contraseña: el mismo de los Tableros Financieros (misma clave y mismo aspecto).
   Es hermano de .viz-root, por eso repite la tipografía. */
.viz-gate {
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: #000000;
  padding: 20px;
}
.viz-gate-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 32px 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.viz-gate-card img { height: 52px; margin-bottom: 14px; }
.viz-gate-card h2 { font-size: 15px; color: #fff; margin: 0 0 4px; font-weight: 700; }
.viz-gate-card p.hint { font-size: 12px; color: #98989a; margin: 0 0 18px; line-height: 1.5; }
.viz-gate-card input {
  width: 100%; font-family: inherit; font-size: 14px; text-align: center;
  padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: #000000; color: #fff; margin-bottom: 10px;
}
.viz-gate-card input:focus { outline: 2px solid #ff5100; outline-offset: 1px; }
.viz-gate-card button {
  width: 100%; font-family: inherit; font-size: 13px; font-weight: 900;
  padding: 10px 12px; border-radius: 8px; border: none;
  background: #ff5100; color: #000000; cursor: pointer;
}
.viz-gate-card button:hover { filter: brightness(1.12); }
.viz-gate-error { font-size: 12px; color: #ff8a4d; min-height: 16px; margin-top: 10px; }

/* ---- Otras herramientas QUEMPIN (plan de integración, 2026-10-01) ---- */
.req-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.req-fila .input { max-width: 160px; }
.combo .input { padding-right: 30px; }
.combo .combo-btn { width: 28px; border-radius: 0 5px 5px 0; }
.campo .combo { width: 100%; }
.req-fila .combo { width: auto; }
.req-abrir { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; white-space: nowrap; }
.req-abrir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.costo-ref { display: flex; align-items: center; gap: 4px; }
.icon-btn.precio-ref { width: 28px; height: 28px; font-weight: 900; font-size: 13px; color: var(--text-secondary); border: 1px solid var(--gridline); border-radius: 6px; }
.icon-btn.precio-ref.usado { color: var(--brand-orange-ink); border-color: var(--brand-orange); }
.pr-tabla { min-width: 0; }
.pr-tabla .pr-usar { white-space: nowrap; text-align: right; }
.pr-tabla .pr-usar .btn { margin-left: 4px; }
.sens-sesgo { margin-top: 12px; }
.sens-nota { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.herr-pulso { margin: 12px 0 0; }
.herr-pulso.detenido { color: var(--text-primary); font-weight: 700; }
/* Costos y venta del Análisis Financiero en un solo bloque */
.herr-af .af-panel { flex-direction: column; align-items: stretch; gap: 6px; }
.herr-af .af-panel .af-texto { flex: 0 0 auto; }
.herr-af .af-panel .actions { margin-top: 0; padding-top: 0; }
.herr-af .herr-venta { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-hairline); }
.herr-af .herr-venta:empty { display: none; }
.af-extra { border: 1px solid var(--border-hairline); border-radius: 10px; padding: 10px 14px 4px; margin: 14px 0 0; }
.af-extra legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.af-extra .check-l { align-items: flex-start; line-height: 1.45; }
.af-extra .check-l input { margin-top: 3px; flex: 0 0 auto; }

/* ---- El recorrido del proyecto (js/flujo.js; 2026-10-06) -----------------------------------------
   Barra arriba del editor (dónde está el proyecto y qué sigue) y pestaña «Seguimiento» con la línea de
   tiempo: cada etapa con su herramienta, su estado y sus acciones. Desde el 2026-10-09 la barra va
   plegada en una línea (lo principal son los pasos de la formulación) y en el seguimiento solo la etapa
   actual va abierta. */
#ed-recorrido:empty { display: none; }
.rc-nav { margin: 4px 0 0; }   /* dentro de .editor-title, bajo los datos del proyecto */
.rc-barra { border: 1px solid var(--border-hairline); border-radius: 10px; }
.rc-barra[open] { background: var(--surface-card); }
.rcb-resumen {
  display: flex; align-items: center; gap: 4px 10px; min-height: 36px; padding: 4px 10px 4px 12px; border-radius: 9px;
  list-style: none; cursor: pointer; font-size: 12.5px; color: var(--text-secondary); user-select: none;
}
.rcb-resumen::-webkit-details-marker { display: none; }
.rcb-resumen:hover { background: var(--surface-1); }
.rcb-resumen:focus-visible { outline-offset: -2px; }
.rc-barra[open] .rcb-resumen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rcb-rotulo { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; padding-right: 10px; border-right: 1px solid var(--gridline); }
.rcb-resumen .rcb-marca { width: 20px; height: 20px; font-size: 10.5px; }
.rcb-res-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcb-res-t b { font-weight: 700; color: var(--text-primary); }
.rcb-resumen.rc-actual .rcb-res-det { color: var(--brand-orange-ink); font-weight: 700; }
.rcb-ver { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.rcb-resumen:hover .rcb-ver { color: var(--text-primary); }
.rcb-ver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.rc-barra[open] .rcb-ver svg { transform: rotate(180deg); }
.rc-barra:not([open]) .rcb-ver-cerrar, .rc-barra[open] .rcb-ver-abrir { display: none; }
.rcb-panel { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 6px 8px 6px 6px; border-top: 1px solid var(--gridline); }
@media (max-width: 600px) { .rcb-rotulo, .rcb-ver-abrir, .rcb-ver-cerrar { display: none; } }
@media (prefers-reduced-motion: reduce) { .rcb-ver svg { transition: none; } }
.rcb-etapas { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rcb-etapas::-webkit-scrollbar { display: none; }
/* relative: el texto para lectores de pantalla (posición absoluta) queda dentro del carrusel y no ensancha la página */
.rcb-etapa { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.rcb-etapa + .rcb-etapa::before { content: ''; flex: 0 0 12px; height: 1.5px; margin: 0 3px; background: var(--gridline); }
.rcb-etapa.rc-hecha + .rcb-etapa::before { background: var(--text-primary); }
.rcb-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 9px 4px 5px;
  border: 0; border-radius: 8px; background: none; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer;
}
.rcb-btn:hover { background: var(--surface-1); }
.rcb-btn:hover .rcb-t { color: var(--brand-orange-ink); }
.rcb-btn:focus-visible { outline-offset: -2px; }
.rcb-marca {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  font-size: 11px; font-weight: 900; line-height: 1; border: 1.5px solid var(--brand-gray-7); color: var(--text-secondary); background: var(--surface-card);
}
.rcb-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rcb-t { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.rcb-det { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
/* El detalle se lee en la etapa actual; en las demás, en el tooltip y el seguimiento (y lo oye un lector de pantalla) */
.rcb-etapa:not([aria-current]) .rcb-det { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rcb-etapa.rc-hecha .rcb-marca, .rcb-resumen.rc-hecha .rcb-marca { background: var(--text-primary); border-color: var(--text-primary); color: var(--page-plane); }
.rcb-etapa.rc-hecha .rcb-t { font-weight: 400; color: var(--text-secondary); }
.rcb-etapa.rc-actual .rcb-btn { background: var(--orange-soft); }
.rcb-etapa.rc-actual .rcb-marca, .rcb-resumen.rc-actual .rcb-marca { background: var(--brand-orange); border-color: var(--brand-orange); color: #000000; }
.rcb-etapa.rc-actual .rcb-det { color: var(--brand-orange-ink); }
.rcb-etapa.rc-espera .rcb-btn { background: var(--surface-1); }
.rcb-etapa.rc-espera .rcb-marca, .rcb-resumen.rc-espera .rcb-marca { border-style: dashed; }
.rcb-etapa.rc-omitida, .rcb-etapa.rc-no-aplica { opacity: .6; }
.rcb-etapa.rc-no-aplica .rcb-t { text-decoration: line-through; text-decoration-thickness: 1px; }
.rcb-sigue { display: flex; align-items: center; gap: 6px 12px; flex: 0 1 auto; margin-left: auto; padding-left: 14px; border-left: 1px solid var(--gridline); min-height: 40px; }
.rcb-sigue-t { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.rcb-sigue-t b { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-orange-ink); }
.rc-barra.espera .rcb-sigue-t b, .rc-barra.fin .rcb-sigue-t b { color: var(--text-secondary); }
.rcb-sigue .btn { min-height: 34px; }
@media (max-width: 860px) {
  .rcb-sigue { width: 100%; margin-left: 0; padding: 6px 4px 2px; border-left: 0; border-top: 1px solid var(--gridline); justify-content: space-between; }
  .rcb-etapas { mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-right: 24px; }
}
@media (max-width: 600px) { .rcb-sigue .btn { flex: 1 1 auto; } }

/* Pestaña «Seguimiento», separada de los cinco pasos de la formulación */
.paso-sep-seg { flex: 0 0 1px; height: 26px; margin: 0 8px 0 12px; background: var(--gridline); }
.paso-seg .paso-marca svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.paso-seg.active .paso-marca { background: var(--brand-orange); border-color: var(--brand-orange); color: #000000; }
.paso-aviso { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange); flex: 0 0 auto; }

/* Seguimiento: la línea de tiempo con las seis etapas */
.recorrido { margin: 0 0 16px; }
.recorrido > .nota { margin-bottom: 14px; }
.rc-linea { list-style: none; margin: 0; padding: 0; max-width: 960px; }
.rcl { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 14px; padding: 0 0 8px; }
/* La línea que une las etapas: oscura hasta donde ya se avanzó */
.rcl::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--gridline); }
.rcl:last-child::before { display: none; }
.rcl.rc-hecha::before { background: var(--text-primary); }
.rcl-marca {
  position: relative; z-index: 1; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 13px; font-weight: 900; line-height: 1; border: 2px solid var(--brand-gray-7); color: var(--text-secondary); background: var(--page-plane);
}
.rcl-cuerpo { min-width: 0; padding: 4px 0 0; }
.rcl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.rcl-t { font-size: 15px; font-weight: 900; margin: 0; }
.rcl-donde { font-size: 12px; color: var(--text-muted); }
.rcl-det { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.rcl-hace { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); max-width: 820px; }
.rcl-herr { margin-top: 10px; padding: 12px 14px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 10px; max-width: 920px; }
/* Etapas plegadas (las que no son la actual): una línea que se despliega para ver el detalle */
.rcl-plegada .rcl-cuerpo { padding: 0; }
.rcl-plegada .rcl-head {
  align-items: center; min-height: 32px; padding: 3px 10px; margin-left: -10px; border-radius: 8px;
  list-style: none; cursor: pointer; user-select: none;
}
.rcl-plegada .rcl-head::-webkit-details-marker { display: none; }
.rcl-plegada .rcl-head:hover { background: var(--surface-1); }
.rcl-plegada .rcl-head:focus-visible { outline-offset: -2px; }
.rcl-plegada .rcl-t { font-size: 14px; font-weight: 700; }
.rcl-plegada.rc-hecha .rcl-t { color: var(--text-secondary); }
.rcl-ver { display: inline-flex; margin-left: auto; color: var(--text-muted); }
.rcl-plegada .rcl-head:hover .rcl-ver { color: var(--text-primary); }
.rcl-ver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.rcl-plegada details[open] > .rcl-head .rcl-ver svg { transform: rotate(180deg); }
.rcl-plegada details[open] { padding-bottom: 10px; }
/* La etapa actual: abierta y destacada, con lo que sigue adentro */
.rcl-actual { padding-bottom: 14px; }
.rcl-actual > .rcl-cuerpo {
  margin: -2px 0 0; padding: 12px 18px 16px; background: var(--surface-card);
  border: 1.5px solid var(--brand-orange); border-radius: 12px;
}
.rcl-ahora { margin: 0 0 2px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-orange-ink); }
.rcl-actual .rcl-t { font-size: 19px; }
.rcl-actual .rcl-det { font-size: 12.5px; }
.rc-sigue { margin: 12px 0 0; padding: 10px 14px; background: var(--orange-soft); border-left: 3px solid var(--brand-orange); border-radius: 8px; }
.rc-sigue.espera, .rc-sigue.fin { background: var(--surface-1); }
.rc-sigue.espera { border-left-color: var(--brand-gray-7); }
.rc-sigue.fin { border-left-color: var(--text-primary); }
.rc-sigue-t { margin: 0 0 2px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-orange-ink); }
.rc-sigue.espera .rc-sigue-t, .rc-sigue.fin .rc-sigue-t { color: var(--text-secondary); }
.rc-sigue-x { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.rc-sigue .actions { margin-top: 10px; }
/* Dentro de la tarjeta, el detalle de la herramienta va sin otro recuadro */
.rcl-actual .rcl-herr { margin-top: 14px; padding: 12px 0 0; background: none; border: 0; border-top: 1px solid var(--gridline); border-radius: 0; max-width: none; }
/* La acción que sigue ya está arriba como botón principal: su copia en el detalle no se repite */
.rcl-actual[data-sigue="ir-req"] .rcl-herr [data-accion="ir-req"],
.rcl-actual[data-sigue="ir-paso"] .rcl-herr [data-accion="ir-paso"],
.rcl-actual[data-sigue="oferta-elegir"] .rcl-herr [data-act="oferta-elegir"],
.rcl-actual[data-sigue="herr-cotizacion"] .rcl-herr [data-act="herr-cotizacion"],
.rcl-actual[data-sigue="herr-planilla"] .rcl-herr [data-act="herr-planilla"],
.rcl-actual[data-sigue="herr-venta"] .rcl-herr [data-act="herr-venta"],
.rcl-actual[data-sigue="enviar-af"] .rcl-herr [data-act="enviar-af"],
.rcl-actual[data-sigue="abrir-af"] .rcl-herr a[href*="analisis-financiero"] { display: none; }
.rcl-herr .actions { margin-top: 8px; }
.rcl-herr .af-linea svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rcl-pasos { margin: 6px 0 4px; padding-left: 20px; font-size: 13px; color: var(--text-secondary); }
.rcl-pasos li { margin: 2px 0; }
.rcl.rc-hecha .rcl-marca { background: var(--text-primary); border-color: var(--text-primary); color: var(--page-plane); }
.rcl.rc-actual .rcl-marca { background: var(--brand-orange); border-color: var(--brand-orange); color: #000000; box-shadow: 0 0 0 4px var(--orange-soft); }
.rcl.rc-actual .rcl-det { color: var(--brand-orange-ink); }
.rcl.rc-espera .rcl-marca { border-style: dashed; }
.rcl.rc-omitida .rcl-cuerpo, .rcl.rc-no-aplica .rcl-cuerpo, .rcl.rc-pendiente .rcl-cuerpo { opacity: .78; }
.rcl.rc-no-aplica .rcl-t { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 600px) {
  .rcl { grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; }
  .rcl-marca { width: 26px; height: 26px; font-size: 12px; }
  .rcl::before { left: 12px; top: 26px; }
  .rcl-herr { padding: 10px 12px; }
  .rcl-actual > .rcl-cuerpo { padding: 10px 12px 12px; }
  .rcl-actual .rcl-t { font-size: 17px; }
}
/* La etapa nueva se resalta un instante cuando el proyecto avanza (marcarSiAvanzo) */
@keyframes rc-cambio { 0% { box-shadow: 0 0 0 0 rgba(255, 81, 0, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(255, 81, 0, 0); } }
.rcb-etapa.rc-cambio .rcb-marca, .rcb-resumen.rc-cambio .rcb-marca, .rcl.rc-cambio .rcl-marca { animation: rc-cambio .9s ease-out 2; }
.rcl.rc-cambio .rcl-herr { transition: background-color .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .rcb-etapa.rc-cambio .rcb-marca, .rcb-resumen.rc-cambio .rcb-marca, .rcl.rc-cambio .rcl-marca { animation: none; } .rcl-ver svg { transition: none; } }
.paso-pie-fin { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) { .paso-pie-fin { display: flex; width: 100%; } .paso-pie-fin .btn { flex: 1 1 auto; } }
/* Lista: qué sigue con cada oferta, bajo su estado */
.sigue-corto { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--brand-orange-ink); white-space: normal; max-width: 150px; line-height: 1.3; }
.sigue-corto.espera, .sigue-corto.fin { color: var(--text-muted); font-weight: 600; }
/* Carta Gantt (opcional, 2026-10-13; js/gantt.js). La pestaña va aparte de los pasos, como el seguimiento. */
.paso-opc { padding: 0 6px; border-radius: 999px; border: 1px dashed var(--baseline); color: var(--text-muted); font-size: 10.5px; line-height: 16px; font-weight: 700; text-transform: lowercase; }
.paso-gantt.active .paso-opc { border-style: solid; border-color: var(--brand-orange); color: var(--brand-orange-ink); }
.g-toolbar { margin-top: 22px; align-items: center; }
.g-toolbar .right { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.g-resumen.kpis { margin: 4px 0 18px; }
.g-resumen .kpi-value { font-size: 20px; }
.tbl-gantt { table-layout: fixed; width: 100%; }
.tbl-gantt col.c-n { width: 44px; } .tbl-gantt col.c-resp { width: 130px; } .tbl-gantt col.c-dias { width: 74px; }
.tbl-gantt col.c-pred { width: 112px; } .tbl-gantt col.c-nad { width: 142px; } .tbl-gantt col.c-av { width: 82px; }
.tbl-gantt col.c-fecha { width: 96px; } .tbl-gantt col.c-acc { width: 44px; }
.tbl-gantt td.calc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-gantt .ci { width: 100%; min-width: 0; }
.tbl-gantt .g-num { font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tbl-gantt tr.g-critica td.code { box-shadow: inset 3px 0 0 var(--brand-orange); }
.tbl-gantt tr.g-critica .g-num { color: var(--brand-orange-ink); }
.tbl-gantt tr.g-par td { background-color: var(--orange-soft); }
.g-tarea { display: flex; align-items: center; gap: 6px; min-width: 0; }
.g-tarea .ci { flex: 1 1 auto; }
.g-tarea .pcode { flex: 0 0 auto; }
.g-rombo { flex: 0 0 auto; width: 9px; height: 9px; background: var(--text-primary); transform: rotate(45deg); margin: 0 3px; }
.tbl-gantt tr.g-hito .ci.desc { font-weight: 700; }
.g-es-hito { color: var(--text-muted); font-size: 12px; }
.g-vacio { padding: 18px 20px; border: 1px dashed var(--baseline); border-radius: 10px; background: var(--surface-card); max-width: 760px; }
.g-vacio p { margin: 0 0 12px; }
.g-lamina-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 8px; }
.g-lamina-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* La lámina (la misma figura del PDF) toma sus colores de estas variables y sigue el modo oscuro.
   El PDF usa los colores de papel de js/gantt.js (COLOR). */
.gantt-lienzo {
  --g-critica: #ff5100; --g-critica-avance: #b23a00; --g-tarea: #54565a; --g-tarea-avance: #1c1a18; --g-hito: #000000;
  --g-texto: #171513; --g-suave: #52514e; --g-muted: #898781; --g-grilla: #e1e0d9; --g-base: #c3c2b7; --g-finde: #f4f2ee; --g-fondo: #ffffff;
  background: var(--g-fondo); border: 1px solid var(--gridline); border-radius: 10px; padding: 10px; overflow-x: auto;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .gantt-lienzo {
    --g-critica-avance: #8f2e00; --g-tarea: #6e7075; --g-tarea-avance: #d9d7d0; --g-hito: #f4f2ee; --g-texto: #f4f2ee;
    --g-suave: #c3c2b7; --g-muted: #8f8d86; --g-grilla: #34322e; --g-base: #4d4b46; --g-finde: #2a2825; --g-fondo: var(--surface-card);
  }
}
:root[data-theme="dark"] .gantt-lienzo {
  --g-critica-avance: #8f2e00; --g-tarea: #6e7075; --g-tarea-avance: #d9d7d0; --g-hito: #f4f2ee; --g-texto: #f4f2ee;
  --g-suave: #c3c2b7; --g-muted: #8f8d86; --g-grilla: #34322e; --g-base: #4d4b46; --g-finde: #2a2825; --g-fondo: var(--surface-card);
}
.gantt-lienzo svg { display: block; max-width: none; }
.gantt-svg .g-banda, .gantt-svg .g-barra { cursor: pointer; }
.gantt-svg .g-banda.on { fill: var(--orange-soft) !important; }
.gantt-svg .g-barra { transition: opacity .12s; }
.gantt-svg .g-barra:hover { opacity: .82; }
.g-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 2px 0; color: var(--text-secondary); }
.g-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.g-leyenda > span[hidden] { display: none; }
.g-leyenda .gl-nota { flex: 1 1 260px; justify-content: flex-end; text-align: right; }
.g-leyenda i { display: inline-block; flex: 0 0 auto; }
.gl-barra { width: 18px; height: 8px; border-radius: 2px; background: #6e7075; }
.gl-barra.gl-critica { background: var(--brand-orange); }
.gl-barra.gl-avance { background: linear-gradient(to bottom, transparent 30%, var(--text-primary) 30% 70%, transparent 70%) no-repeat left / 60% 100%, #6e7075; }
.gl-holgura { width: 18px; height: 6px; border-bottom: 1px dashed var(--text-muted); border-right: 1px solid var(--text-muted); }
.gl-rombo { width: 8px; height: 8px; margin: 0 3px; background: var(--text-primary); transform: rotate(45deg); }
.gl-hoy { width: 0; height: 12px; margin: 0 6px; border-left: 2px dashed var(--brand-orange); }
.g-pie-borrar { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
@media (max-width: 1100px) and (min-width: 641px) { .tbl-gantt .g-opc { display: none; } }
@media (max-width: 640px) {
  .tbl-gantt { table-layout: auto; }
  .tbl-gantt td[data-label="Tarea"] { grid-column: 1 / -1; }
  .g-toolbar .right { margin-left: 0; width: 100%; }
  .g-toolbar .right .btn { flex: 1 1 auto; }
  .g-lamina-ctl { width: 100%; }
  .g-lamina-ctl .btn { flex: 1 1 auto; }
  .g-leyenda .gl-nota { display: none; }
}
/* Oportunidad de Mercado Público que llega del tablero «Oportunidades» (js/oportunidad.js, 2026-10-16):
   los datos con que nace el proyecto, en una grilla que se acomoda al ancho */
.nota-op { align-items: center; }
.nota-op .op-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 18px; margin: 8px 0 0; }
.nota-op .op-datos > div { min-width: 0; }
.nota-op .op-datos > div:nth-child(-n+2) { grid-column: 1 / -1; }   /* título y organismo: largos, en su fila */
.nota-op .op-datos dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.nota-op .op-datos dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }