/* Agregados de la version nueva: grilla de computo, K, control y avisos.
   Se apoya en las variables de app.css (tema CLARO: --bg #f0f0f0,
   --surface #fff, --text #1a1a1a, --red #E10600). */

.spacer { flex: 1; }
.text-muted { color: var(--muted, #777); }
.mt8 { margin-top: 8px; } .mb8 { margin-bottom: 8px; }

/* ── tabs ─────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; max-width: 1400px; margin: 22px auto 0; padding: 0 20px; }
.section { display: none; max-width: 1400px; margin: 0 auto; padding: 16px 20px 60px; }
.section.active { display: block; }

/* ── grillas ──────────────────────────────────────────── */
.grilla { width: 100%; border-collapse: collapse; font-size: 13px; }
.grilla th {
  text-align: left; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted, #777); font-weight: 800; padding: 8px; border-bottom: 1px solid rgba(0,0,0,.12);
  position: sticky; top: 0; background: var(--surface, #fff); z-index: 2;
}
.grilla td { padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: middle; }
.grilla tbody tr:hover { background: rgba(0,0,0,.025); }
.grilla tfoot td { border-top: 2px solid rgba(0,0,0,.15); border-bottom: 0; padding-top: 10px; }
.grilla .num, .grilla .der { text-align: right; font-variant-numeric: tabular-nums; }
.grilla input, .grilla select { margin: 0; padding: 5px 7px; font-size: 13px; }
.grilla input.cant { width: 100px; text-align: right; }
.grilla input.sector { width: 140px; }
.grilla input.precio { width: 120px; text-align: right; }
/* La fecha del precio propio, debajo del precio y en chico: está para
   cuando el visitante la quiera corregir, no para llamar la atención. */
.grilla input.precio-fecha {
  display: block; width: 120px; margin-top: 3px; margin-left: auto;
  font-size: .72rem; padding: 2px 4px; color: var(--tenue, #8d9393);
}
.grilla .cod { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--muted, #777); white-space: nowrap; }
.grilla .fila-rubro td {
  background: rgba(0,0,0,.05); font-weight: 800; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; border-left: 3px solid var(--rubro, #E10600);
}
.tabla-scroll { max-height: 62vh; overflow: auto; }
.icon-btn { background: none; border: 0; color: var(--muted, #777); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.icon-btn:hover { background: rgba(0,0,0,.07); color: #111; }
.icon-btn.peligro:hover { background: rgba(225,6,0,.12); color: #E10600; }

/* ── etiquetas ────────────────────────────────────────── */
.tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.tag.propio { background: rgba(26,122,58,.14); color: #14682f; }
.tag.catalogo { background: rgba(0,0,0,.06); color: #777; }
.tag.sin-precio { background: rgba(225,6,0,.12); color: #c00500; }
.tag.manual { background: rgba(179,134,0,.16); color: #8a6800; }
.tag.mat { background: rgba(0,87,184,.12); color: #0057b8; }
.tag.mo { background: rgba(26,122,58,.14); color: #14682f; }
.tag.eq { background: rgba(179,92,0,.14); color: #a35400; }

/* ── coeficiente K ────────────────────────────────────── */
.k-input { width: 90px; text-align: right; margin: 0; padding: 5px 8px; }
.k-resultado {
  margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,.05);
  font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-left: 3px solid var(--red, #E10600);
}
.k-resultado strong { font-size: 22px; color: var(--text, #1a1a1a); font-variant-numeric: tabular-nums; }
.k-resultado .text-muted { font-size: 11px; }

/* ── incidencia ───────────────────────────────────────── */
.incidencia { display: flex; height: 34px; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,.06); }
.incidencia div {
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  color: #fff; white-space: nowrap; overflow: hidden; min-width: 0;
}
.incidencia .i-mat { background: #0057b8; } .incidencia .i-mo { background: #1a7a3a; } .incidencia .i-eq { background: #e67e00; }
.incidencia-leyenda { display: flex; gap: 18px; margin-top: 8px; font-size: 11.5px; color: var(--muted, #777); flex-wrap: wrap; }
.incidencia-leyenda strong { color: var(--text, #1a1a1a); }

/* ── rubros ───────────────────────────────────────────── */
.rubro-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.rubro-nombre { font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.rubro-punto { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.rubro-monto { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rubro-barra { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(0,0,0,.07); overflow: hidden; }
.rubro-barra span { display: block; height: 100%; }
.rubro-summary-total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 8px;
  border-top: 2px solid rgba(0,0,0,.15); font-weight: 800; font-size: 14px; }

/* ── control de coherencia ────────────────────────────── */
.control-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.control-kpi { background: rgba(0,0,0,.04); border-radius: 6px; padding: 12px 16px; min-width: 150px; }
.control-kpi .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.control-kpi .l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #777); }
.control-kpi.alerta .v { color: #c00500; }
.control-kpi.ok .v { color: #1a7a3a; }
.ratio { font-weight: 800; font-variant-numeric: tabular-nums; }
.ratio.grave { color: #c00500; } .ratio.leve { color: #a35400; }

/* ── modales / listas ─────────────────────────────────── */
.lista-scroll { max-height: 52vh; overflow: auto; margin-top: 10px; }
.mapeo-preview { margin-top: 12px; max-height: 220px; overflow: auto; border-radius: 4px; background: rgba(0,0,0,.03); }
.mapeo-preview table { font-size: 11.5px; width: 100%; border-collapse: collapse; }
.mapeo-preview td, .mapeo-preview th { padding: 4px 8px; border-bottom: 1px solid rgba(0,0,0,.07); white-space: nowrap; text-align: left; }
.mapeo-campo { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.mapeo-campo label { font-size: 12px; color: var(--muted, #777); }
.mapeo-campo select { margin: 0; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #777); cursor: pointer; }
.chk input { width: auto; margin: 0; }

/* ── toast ────────────────────────────────────────────── */
#toast-zona { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast-msg {
  background: #1a1a1a; color: #fff; border-left: 3px solid var(--red, #E10600); padding: 11px 16px;
  border-radius: 4px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 380px;
  animation: entra .18s ease-out;
}
.toast-msg.ok { border-left-color: #1a7a3a; } .toast-msg.error { border-left-color: #E10600; }
.toast-msg.aviso { border-left-color: #e0a800; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.aviso-fila { display: flex; gap: 10px; align-items: flex-start; background: rgba(224,168,0,.12);
  border-left: 3px solid #e0a800; padding: 10px 12px; border-radius: 4px; font-size: 12.5px; margin-bottom: 10px; }

@media (max-width: 900px) {
  .budget-bottom-grid { grid-template-columns: 1fr; }
  .obra-header-grid { grid-template-columns: 1fr 1fr; }
  .grilla .col-hide { display: none; }
}

/* ── cabecera de la obra y barra de totales ──────────────────────
   Estaban en el skin viejo; se reescriben con la tipografia de la
   marca. La barra es lo unico que el que presupuesta mira de reojo
   mientras toca el K, asi que va pegada arriba al hacer scroll.    */
.obra-header-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px;
}
.obra-field { display: flex; flex-direction: column; gap: 5px; }
.obra-field label { margin: 0; }
.obra-field input { margin: 0; width: 100%; }

.budget-bottom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }

.param-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--border);
}
.param-row:last-child { border-bottom: none; }
.param-row label { margin: 0; flex: 1; }
.param-row .k-input { width: 92px; margin: 0; text-align: right; }

.resumen-general-bar {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: var(--ink-900); color: var(--white);
  border-left: 3px solid var(--red-500); margin: 14px 0; padding: 14px 18px;
}
.rg-block { flex: 1; min-width: 132px; padding: 0 14px; }
.rg-sep { width: 1px; background: rgba(255,255,255,.14); flex: 0 0 1px; }
.rg-label {
  font-family: var(--title); font-weight: 600; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 5px;
}
.rg-value {
  font-family: var(--title); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rg-total-block { flex: 1.25; }
.rg-total { color: var(--red-500); font-weight: 800; font-size: 1.3rem; }

.k-resultado {
  font-family: var(--title); font-size: .8rem; color: var(--gray-700);
  border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px;
}
.k-resultado strong { color: var(--red-500); font-weight: 700; font-size: 1rem; }

@media (max-width: 900px) {
  .obra-header-grid { grid-template-columns: 1fr 1fr; }
  .budget-bottom-grid { grid-template-columns: 1fr; }
  .rg-sep { display: none; }
  .rg-block { flex: 1 1 45%; padding: 8px 0; }
}
@media (max-width: 520px) {
  .obra-header-grid { grid-template-columns: 1fr; }
  .rg-block { flex: 1 1 100%; }
}

/* ── ventanas ────────────────────────────────────────────────────
   El CSS original las pegaba al borde de abajo (venia de una app de
   celular). En escritorio van centradas; en pantalla chica vuelven
   abajo, que es donde llega el pulgar.                             */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(11,11,11,.55); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--red-500); border-radius: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 22px 24px; width: 100%; max-height: 86vh; overflow-y: auto;
}
.modal-title {
  font-family: var(--title); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -.01em; color: var(--ink-900); margin-bottom: 14px;
}
.lista-scroll { max-height: 54vh; overflow-y: auto; margin-top: 10px; }

@media (max-width: 640px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-height: 88vh; }
}

/* ═══════════════ PLAN DE TRABAJO ═══════════════ */
.plan-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-700);
       font-family: var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
.chk input { width: auto; margin: 0; }

.plan-grilla input.mini { width: 78px; margin: 0; padding: .35rem .4rem; text-align: right; font-size: .78rem; }
.plan-grilla input.pred { width: 120px; margin: 0; padding: .35rem .4rem; font-size: .78rem; }
.plan-grilla input.mal { border-color: var(--red-500); background: var(--red-050); }
.plan-grilla td.fecha { font-family: var(--title); font-size: .78rem; white-space: nowrap; color: var(--gray-700); }
/* la ruta critica no se marca solo con color: tambien con un borde,
   para el que no distingue el rojo del gris */
.plan-grilla tr.critica td:first-child,
.gantt tr.critica td.g-tarea { border-left: 3px solid var(--red-500); }
.tag.critica { background: var(--red-050); color: var(--red-500); border: 1px solid var(--red-500);
               font-size: .62rem; padding: .1em .45em; font-family: var(--title); font-weight: 600; }
.tag.ok { background: #eaf3ec; color: var(--success); font-size: .62rem; padding: .1em .45em; }
.tag.aviso { background: #fbf1e3; color: var(--aviso); font-size: .62rem; padding: .1em .45em; }

/* ── el gantt ───────────────────────────────────────────── */
.gantt { width: 100%; border-collapse: collapse; font-size: 12px; }
.gantt th { font-family: var(--title); font-weight: 600; font-size: .6rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--gray-600); padding: 6px 4px;
            border-bottom: 1px solid var(--gray-300); text-align: center; }
.gantt th.g-tarea { text-align: left; width: 280px; min-width: 220px; }
.gantt td { border-bottom: 1px solid var(--border); padding: 3px 4px; }
.gantt td.g-tarea { font-size: 11.5px; line-height: 1.35; padding-left: 6px; }
.gantt td.g-tarea .cod { font-size: .68rem; }
.gantt .g-fechas { display: block; font-family: var(--title); font-size: .62rem; color: var(--gray-500); }
.gantt td.g-mes { min-width: 58px; padding: 6px 3px; vertical-align: middle; }
.g-barra { height: 16px; background: var(--ink-800); color: #fff; border-radius: 0;
           font-family: var(--title); font-weight: 600; font-size: .58rem; line-height: 16px;
           text-align: center; overflow: hidden; white-space: nowrap; }
.g-barra.critica { background: var(--red-500); }
.gantt tfoot td { border-top: 2px solid var(--ink-900); border-bottom: none; vertical-align: bottom;
                  height: 54px; text-align: center; }
.g-avance { background: var(--red-dim2); margin: 0 auto; width: 70%; min-height: 2px; }
.g-pct { display: block; font-family: var(--title); font-size: .6rem; color: var(--gray-600); margin-top: 2px; }
.gantt .g-rango { display: block; font-weight: 400; letter-spacing: 0; text-transform: none;
                  font-size: .58rem; color: var(--gray-500); }

/* ── las curvas ─────────────────────────────────────────── */
.curvas { width: 100%; height: auto; max-width: 100%; display: block; }
.c-grilla { stroke: var(--border); stroke-width: 1; }
.c-eje { font-family: var(--title); font-size: 10px; fill: var(--gray-600); }
.c-eje.der { text-anchor: end; } .c-eje.medio { text-anchor: middle; }
.c-eje.tenue { fill: var(--gray-500); font-size: 9px; }
.c-plan { fill: none; stroke: var(--gray-500); stroke-width: 2; }
.c-plan-pt { fill: var(--gray-500); }
.c-real { fill: none; stroke: var(--red-500); stroke-width: 2.5; }
.c-real-pt { fill: var(--red-500); }
/* punteada = proyeccion. Lo que ya se certifico va lleno. */
.c-proy { fill: none; stroke: var(--red-500); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: .75; }
.c-leyenda { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px;
             color: var(--gray-700); align-items: center; }
.c-leyenda i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 5px; }
.c-m-plan { background: var(--gray-500); }
.c-m-real { background: var(--red-500); }
.c-m-proy { background: repeating-linear-gradient(90deg, var(--red-500) 0 5px, transparent 5px 9px); }
.c-ok { color: var(--success); font-weight: 600; }
.c-mal { color: var(--red-500); font-weight: 600; }

@media (max-width: 720px) {
  .gantt th.g-tarea { width: 150px; min-width: 130px; }
  .plan-grilla input.mini { width: 62px; }
}

/* `display:flex` le gana a [hidden]: sin esto, el campo que se esconde
   por JS sigue en pantalla. */
[hidden] { display: none !important; }

/* ── hitos y predecesoras ───────────────────────────────────────── */
.plan-grilla tr.hito td { background: var(--gray-050); font-family: var(--title); font-size: .76rem; }
.plan-grilla tr.hito td strong { letter-spacing: .06em; }
.pred-btn { width: 100%; text-align: left; background: none; border: 1px solid transparent;
            padding: .3rem .4rem; cursor: pointer; font: inherit; }
.pred-btn:hover { border-color: var(--gray-300); background: #fff; }
.pred-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pred-chip { font-family: var(--title); font-weight: 600; font-size: .66rem; background: var(--ink-900);
             color: #fff; padding: .1rem .35rem; }
.pred-inicio { font-family: var(--title); font-weight: 600; font-size: .62rem; letter-spacing: .1em;
               color: var(--gray-500); }
/* una tarea suelta no es un error de calculo: es un olvido, y tiene que
   verse como tal y no como una decision */
.pred-inicio.suelta { color: var(--aviso); }
.tag.suelta { background: #fbf1e3; color: var(--aviso); font-size: .6rem; padding: .1em .4em;
              font-family: var(--title); font-weight: 600; }

.pred-op { display: flex; align-items: center; gap: 10px; padding: .5rem .6rem;
           border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.pred-op:hover { background: var(--gray-050); }
.pred-op input { width: auto; margin: 0; }
.pred-op .cod { min-width: 78px; }
.pred-desc { flex: 1; }
.pred-op.no { opacity: .45; cursor: not-allowed; }

/* ── seguimiento de obra ────────────────────────────────────────── */
.dato-fijo { font-family: var(--title); font-weight: 600; font-size: .9rem; padding: .6rem .7rem;
             border: 1px solid var(--border); background: var(--gray-050); color: var(--ink-800); }
.explicacion { border-left: 3px solid var(--gray-300); background: var(--gray-050);
               padding: .7rem .9rem; margin-top: 12px; font-size: 12.5px; line-height: 1.6;
               color: var(--gray-700); }
.explicacion strong { color: var(--ink-900); }
/* el rendimiento que salio del analisis se ve distinto del que se fijo
   a mano: uno sigue al catalogo, el otro no */
.plan-grilla input.mini.auto { color: var(--gray-500); font-style: italic; }
.plan-grilla input.mini.auto::placeholder { color: var(--gray-600); font-style: normal; }
/* ── feriados ───────────────────────────────────────────────────── */
.feriados-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.feriado-chip { font-size: 11px; background: var(--gray-050); border: 1px solid var(--border);
                padding: .2rem .5rem; color: var(--gray-700); }
.feriado-chip b { font-family: var(--title); font-weight: 600; color: var(--ink-800); }
.feriado-chip.propio { border-color: var(--red-500); color: var(--red-500); }
.feriado-chip.propio b { color: var(--red-500); }
/* el rubro de obra en el que cae la tarea: es lo que la ata */
.nodo-tag { display: inline-block; font-family: var(--title); font-size: .58rem;
            letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500);
            border: 1px solid var(--border); padding: .05rem .35rem; margin-left: 6px;
            vertical-align: 1px; }
.aviso-fila { display: flex; gap: 10px; align-items: stretch; background: var(--gray-050);
              border: 1px solid var(--border); padding: .7rem .8rem; margin-bottom: 8px;
              font-size: 12.5px; line-height: 1.55; }
.aviso-fila.grave { background: var(--red-050); border-color: var(--red-dim2); }
.aviso-fila.grave .aviso-marca { background: var(--red-500); }
/* ── el indice de tareas ────────────────────────────────────────── */
.indice-cap { margin-bottom: 12px; }
.indice-titulo { font-family: var(--title); font-weight: 700; font-size: .66rem; letter-spacing: .18em;
                 text-transform: uppercase; color: var(--red-500); margin-bottom: 6px; }
.indice-rubros { display: flex; flex-wrap: wrap; gap: 6px; }
.indice-rubro { font-family: var(--sans); font-size: 12px; text-align: left; cursor: pointer;
                background: #fff; border: 1px solid var(--gray-300); padding: .35rem .6rem; }
.indice-rubro span { font-family: var(--title); font-weight: 600; color: var(--gray-500); margin-left: 4px; }
.indice-rubro:hover { border-color: var(--red-500); }
.indice-rubro.abierto { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.indice-rubro.abierto span { color: var(--gray-300); }
#indice-tareas { margin-top: 8px; border-left: 3px solid var(--ink-900); padding-left: 8px; }
/* el boton que se toca primero tiene que verse primero */
.btn.btn-grande { font-size: .78rem; padding: .85rem 1.4rem; }
.vacio-computo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 2.6rem 1rem; }
.vacio-computo > div:first-child { font-size: .95rem; color: var(--gray-700); }

/* ═══════════════ CONTROL DE OBRA ═══════════════ */
.ctl-grilla input[type=date] { margin: 0; padding: .3rem .35rem; font-size: .74rem; width: 130px; }
.ctl-grilla input.mini { width: 64px; margin: 0; padding: .3rem .35rem; text-align: right; }
.ctl-grilla td { vertical-align: middle; }
.ctl-grilla tr.critica td:first-child { border-left: 3px solid var(--red-500); }
.est, .sit { display: inline-block; font-family: var(--title); font-weight: 600; font-size: .6rem;
             letter-spacing: .06em; text-transform: uppercase; padding: .12rem .4rem; white-space: nowrap; }
.est.fin { background: #eaf3ec; color: var(--success); }
.est.eje { background: var(--ink-900); color: #fff; }
.est.no  { background: var(--gray-100); color: var(--gray-500); }
.sit.mal  { color: var(--red-500); border: 1px solid var(--red-500); }
.sit.bien { color: var(--success); border: 1px solid var(--success); }
.sit.ok   { color: var(--gray-700); border: 1px solid var(--gray-300); }
.sit.nada { color: var(--gray-500); }
.c-cliente { fill: none; stroke: var(--ink-800); stroke-width: 2; }
.c-empresa { fill: none; stroke: var(--gray-500); stroke-width: 2; stroke-dasharray: 2 3; }
.c-corte { stroke: var(--red-500); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.c-m-cliente { background: var(--ink-800); }
.c-m-empresa { background: repeating-linear-gradient(90deg, var(--gray-500) 0 2px, transparent 2px 5px); }
.link-manual { font-family: var(--title); font-weight: 600; font-size: .78rem; color: var(--red-500);
               text-decoration: none; border-bottom: 1px solid var(--red-dim2); }
.link-manual:hover { border-bottom-color: var(--red-500); }
.ctl-grilla .alarma { display: inline-block; margin-top: 3px; font-size: .7rem; color: var(--red-500);
                      max-width: 190px; line-height: 1.3; font-weight: 600; }

/* ── El semáforo de la antigüedad del precio ──────────────────────
   Hasta 30 días verde, hasta 90 amarillo, después rojo. Los 90 son
   la misma ventana con la que el APU da por vigente un precio de
   proveedor: el color dice lo mismo que decide el cálculo.        */
.edad { font-size: .72rem; line-height: 1.35; }
.edad-verde    { color: #1a7f40; }
.edad-amarillo { color: #b26a00; }
.edad-rojo     { color: #c8102e; }
@media (prefers-color-scheme: dark) {
  .edad-verde    { color: #4ec27d; }
  .edad-amarillo { color: #d99a2b; }
  .edad-rojo     { color: #ff6b5e; }
}

/* ══════════════════ OBRAS Y DATOS ══════════════════ */
[hidden] { display: none !important; }
.btn-chico { padding: .42rem .75rem; font-size: .6rem; }

.obra-barra { background: var(--white); border-bottom: 1px solid var(--border); }
.obra-barra-inner {
  max-width: 1400px; margin: 0 auto; padding: .55rem var(--gutter);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.obra-barra-label { font-family: var(--title); font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); }
#obra-selector { min-width: 240px; max-width: 100%; padding: .4rem .5rem; border: 1px solid var(--gray-300); font-size: .82rem; background: var(--white); }

.obras-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.obras-tabla th { text-align: left; font-family: var(--title); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); border-bottom: 1px solid var(--gray-300); padding: .45rem; }
.obras-tabla td { padding: .5rem .45rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.obras-tabla tr.actual td { background: var(--gray-050); }
.obras-acciones { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }

.detail-table.hist td.n, .detail-table.hist th.n { text-align: right; white-space: nowrap; }
.detail-table.hist td.sube { color: var(--red-500); font-weight: 600; }
.detail-table.hist td.baja { color: var(--success); font-weight: 600; }

.aviso-drive {
  position: fixed; right: 16px; bottom: 16px; z-index: 1200; width: min(360px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--gray-300); border-top: 3px solid var(--red-500);
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 14px 16px;
}
.aviso-drive-titulo { font-family: var(--title); font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.aviso-drive p { font-size: .8rem; color: var(--gray-600); margin: 0 0 10px; line-height: 1.5; }

@media (max-width: 620px) {
  #obra-selector { min-width: 0; flex: 1 1 100%; }
}
.obra-barra-inner #obra-selector { width: auto; flex: 0 1 380px; margin: 0; }
.obra-barra-inner .obra-barra-label { margin: 0; }
@media (max-width: 620px) { .obra-barra-inner #obra-selector { flex: 1 1 100%; } }

.link-datos { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--title); font-size: .72rem;
  color: var(--gray-600); text-decoration: underline; text-underline-offset: 3px; }
.link-datos:hover { color: var(--red-500); }
.datos-ya { font-size: .84rem; margin: 6px 0 4px; }
.datos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .datos-dos { grid-template-columns: 1fr; } }

/* control de obra: inicio cargado después de la fecha de corte */
.tag-corte {
  display: inline-block; margin-top: 4px; padding: .15rem .45rem;
  font-family: var(--title); font-weight: 700; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aviso); background: #fff4e5; border: 1px solid #f0c48a; white-space: nowrap; cursor: help;
}
.tag-corte.mal { color: var(--red-500); background: var(--red-050); border-color: var(--red-dim2); }