/* HIDROSCI — sistema visual
   Referencia: planos técnicos y memorias de cálculo. Papel cálido, líneas de 1 px,
   tipografía condensada para rótulos, monoespaciada para cifras y consecutivos. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fuentes-h/plex-sans-400.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fuentes-h/plex-sans-400-italic.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fuentes-h/plex-sans-500.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fuentes-h/plex-sans-600.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fuentes-h/plex-sans-700.ttf) format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(/fuentes-h/barlow-condensed-500.ttf) format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/fuentes-h/barlow-condensed-600.ttf) format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/fuentes-h/barlow-condensed-700.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/fuentes-h/plex-mono-400.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fuentes-h/plex-mono-500.ttf) format("truetype"); }

:root {
  --papel: #f5f2eb;
  --papel-2: #ebe6da;
  --hoja: #fdfcf9;
  --tinta: #121e26;
  --tinta-2: #3c4a54;
  --tinta-3: #6c7880;
  --linea: #dbd4c6;
  --linea-fuerte: #b9b09e;
  --llama: #d9531e;
  --llama-osc: #b13f12;
  --llama-tenue: #f7e1d4;
  --agua: #13729b;
  --agua-tenue: #dcebf1;
  --verde: #2e7651;
  --verde-tenue: #dcebe1;
  --ambar: #b57c06;
  --ambar-tenue: #f5e8c8;
  --rojo: #bb321c;
  --rojo-tenue: #f5dad3;
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --lateral: 232px;
  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--tinta);
  background: var(--papel);
  font-feature-settings: "tnum" 0;
}
a { color: var(--agua); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tinta); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--cond); font-weight: 600; letter-spacing: .01em; margin: 0; line-height: 1.15; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 .75em; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 24px 0; }
.mono, code { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-family: var(--mono); font-size: 13.5px; text-align: right; white-space: nowrap; letter-spacing: -.02em; }
.suave { color: var(--tinta-3); }
.sub { display: block; font-size: 13px; color: var(--tinta-3); margin-top: 1px; font-weight: 400; }
.peq { font-size: 13px; }
.rotulo {
  font: 600 11.5px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-3);
}
.oculto-movil { }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ Estructura */

.marco {
  display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh;
  /* la franja lateral sigue hasta el final aunque la página sea más alta que la ventana */
  background: linear-gradient(to right, var(--papel-2) calc(var(--lateral) - 1px), var(--linea) calc(var(--lateral) - 1px), var(--linea) var(--lateral), transparent var(--lateral));
}

.lateral {
  background: var(--papel-2);
  border-right: 1px solid var(--linea);
  padding: 18px 0 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; text-decoration: none; color: var(--tinta); }
.marca img { width: 46px; height: 46px; mix-blend-mode: multiply; }
.marca b { display: block; font: 700 21px/1 var(--cond); letter-spacing: .06em; }
.marca span { display: block; font: 500 11.5px/1.25 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; }
.marca.clara { padding: 0; color: #fff; }
.marca.clara img { mix-blend-mode: normal; background: #fff; border-radius: 50%; padding: 3px; width: 52px; height: 52px; }
.marca.clara span { color: #9fb0ba; }

.nav { display: flex; flex-direction: column; }
.nav .grupo { font: 600 11.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); padding: 18px 18px 6px; }
.nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 18px 7px 15px;
  border-left: 3px solid transparent;
  color: var(--tinta-2);
  text-decoration: none;
  font: 500 14.5px/1.2 var(--sans);
  letter-spacing: .02em;
}
.nav a:hover { background: rgba(255,255,255,.45); color: var(--tinta); }
.nav a.activo { border-left-color: var(--llama); color: var(--tinta); background: var(--hoja); font-weight: 600; }
.nav a .cuenta { font: 500 11px/1 var(--mono); background: var(--llama); color: #fff; padding: 3px 5px; border-radius: 2px; }

.sesion { margin-top: auto; padding: 16px 18px 0; border-top: 1px solid var(--linea); }
.sesion .quien { display: flex; gap: 10px; align-items: center; }
.sesion .ini { width: 32px; height: 32px; display: grid; place-items: center; background: var(--tinta); color: var(--papel); font: 600 12.5px/1 var(--sans); letter-spacing: .05em; border-radius: 2px; }
.sesion .nombre { font-weight: 600; font-size: 14px; line-height: 1.2; }
.sesion .rol { font-size: 12px; color: var(--tinta-3); }
.sesion form { margin-top: 10px; }

.principal { min-width: 0; padding: 26px 34px 64px; }
.barra-movil { display: none; }

/* Encabezado de página */
.cabeza { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--tinta); }
.cabeza .ceja { font: 500 12.5px/1 var(--mono); color: var(--llama-osc); letter-spacing: .02em; margin-bottom: 7px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cabeza .ceja a { color: inherit; }
.cabeza p { margin: 6px 0 0; color: var(--tinta-2); max-width: 72ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ------------------------------------------------------------------ Controles */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 13.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 15px 9px;
  border-radius: var(--r);
  border: 1px solid var(--tinta);
  background: var(--hoja);
  color: var(--tinta);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn.primario { background: var(--llama); border-color: var(--llama); color: #fff; }
.btn.primario:hover { background: var(--llama-osc); border-color: var(--llama-osc); }
.btn.oscuro { background: var(--tinta); color: var(--papel); }
.btn.oscuro:hover { background: #000; }
.btn.plano { border-color: transparent; background: transparent; color: var(--agua); padding-left: 6px; padding-right: 6px; }
.btn.plano:hover { background: var(--agua-tenue); color: var(--tinta); }
.btn.peligro { border-color: var(--rojo); color: var(--rojo); }
.btn.peligro:hover { background: var(--rojo); color: #fff; }
.btn.chico { padding: 7px 10px 6px; font-size: 12.5px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

label { display: block; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span:first-child { font: 600 11.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.campo small { color: var(--tinta-3); font-size: 12.5px; line-height: 1.35; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%;
  font: 400 15px/1.3 var(--sans);
  color: var(--tinta);
  background: var(--hoja);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  padding: 9px 10px;
  min-height: 40px;
}
select {
  appearance: none;
  padding-right: 30px;
  background: var(--hoja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23121e26' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
}
input.cifra { font-family: var(--mono); font-size: 14.5px; text-align: right; letter-spacing: -.02em; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--agua); outline-offset: 1px; }
input[readonly] { background: var(--papel); color: var(--tinta-2); }
input[type=file] { font: 400 14px var(--sans); max-width: 100%; }
input[type=checkbox], input[type=radio] { accent-color: var(--llama); width: 17px; height: 17px; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; }
.check input { margin-top: 2px; flex: none; }

.rejilla { display: grid; gap: 14px 18px; grid-template-columns: repeat(12, 1fr); }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-6 { grid-column: span 6; } .c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; } .c-2 { grid-column: span 2; }

/* ------------------------------------------------------------------ Bloques */

.bloque { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); margin-bottom: 22px; }
.bloque > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px 12px; border-bottom: 1px solid var(--linea); }
.bloque > header h2 { font-size: 18px; display: flex; gap: 10px; align-items: baseline; }
.bloque > header h2 .n { font: 500 12px/1 var(--mono); color: var(--llama-osc); }
.bloque .cuerpo { padding: 16px 18px; }
.bloque .pie { padding: 12px 18px; border-top: 1px solid var(--linea); background: var(--papel); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.dos { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.dos > * { min-width: 0; }

/* Cifras clave: cinta de medidas, no tarjetas */
.cinta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--tinta); border-radius: var(--r); background: var(--hoja); margin-bottom: 24px; }
.cinta > div { padding: 14px 16px 13px; border-right: 1px solid var(--linea); position: relative; }
.cinta > div:last-child { border-right: 0; }
.cinta .valor { font: 600 27px/1.05 var(--cond); letter-spacing: .01em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.cinta .valor small { font: 500 13px var(--mono); color: var(--tinta-3); margin-left: 4px; }
.cinta .nota { font-size: 12.5px; color: var(--tinta-3); margin-top: 3px; }
.cinta > div.alerta::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--rojo); }
.cinta > div.atencion::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--ambar); }

/* Pares rótulo / valor */
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; font-size: 14.5px; }
.ficha dt { font: 600 11.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Tablas */

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th {
  text-align: left;
  font: 600 11.5px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-3);
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--tinta);
  white-space: nowrap;
  background: var(--hoja);
}
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:hover td { background: #faf7f0; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla tfoot td { border-top: 1px solid var(--tinta); font-weight: 600; background: var(--papel); }
.tabla .id { font: 500 13px/1.3 var(--mono); white-space: nowrap; }
.tabla .id a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); }
.tabla .id a:hover { border-color: var(--llama); color: var(--llama-osc); }
.tabla .sub { display: block; font-size: 13px; color: var(--tinta-3); margin-top: 1px; }
.tabla .id .sub { font-family: var(--sans); white-space: normal; letter-spacing: 0; min-width: 180px; max-width: 340px; }
.tabla.compacta td { padding: 7px 10px; }
.vacio { padding: 34px 18px; text-align: center; color: var(--tinta-3); }
.vacio b { display: block; font: 600 17px var(--cond); color: var(--tinta-2); margin-bottom: 4px; }

/* ------------------------------------------------------------------ Estado y semáforo */

.estado {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 7px 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  color: var(--tinta-2);
  background: var(--hoja);
}
.estado::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.estado.borrador, .estado.devuelta { color: var(--tinta-3); }
.estado.pendiente-aprobacion, .estado.cambios-solicitados, .estado.en-tramite, .estado.pendiente { color: var(--ambar); }
.estado.aprobada, .estado.enviada, .estado.en-seguimiento, .estado.planeacion, .estado.en-compra { color: var(--agua); }
.estado.ganada, .estado.cumplido, .estado.ejecutada, .estado.recibida, .estado.atendida { color: var(--verde); }
.estado.ejecucion { color: var(--llama-osc); }
.estado.perdida, .estado.rechazada, .estado.anulada { color: var(--rojo); }
.estado.vencida, .estado.cerrada, .estado.no-aplica { color: var(--tinta-3); }
.estado.devuelta::before, .estado.vencida::before { background: transparent; border: 1px solid currentColor; }

.clase { display: inline-grid; place-items: center; width: 22px; height: 22px; font: 700 12.5px/1 var(--sans); border: 1px solid var(--tinta); border-radius: 2px; }
.clase.b { background: var(--tinta); color: var(--papel); }

.semaforo { display: inline-flex; gap: 3px; vertical-align: middle; }
.semaforo i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: transparent; }
.semaforo.verde i:nth-child(3) { background: var(--verde); border-color: var(--verde); }
.semaforo.amarillo i:nth-child(2) { background: var(--ambar); border-color: var(--ambar); }
.semaforo.rojo i:nth-child(1) { background: var(--rojo); border-color: var(--rojo); }

.marca-verde { color: var(--verde); } .marca-amarillo { color: var(--ambar); } .marca-rojo { color: var(--rojo); }

/* Barra de consumo de presupuesto */
.consumo { position: relative; height: 8px; background: var(--papel-2); border-radius: 1px; overflow: hidden; min-width: 80px; }
.consumo span { position: absolute; inset: 0 auto 0 0; background: var(--agua); }
.consumo.amarillo span { background: var(--ambar); }
.consumo.rojo span { background: var(--rojo); }
.consumo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 85%; border-left: 1px dashed var(--tinta-3); }

/* ------------------------------------------------------------------ Avisos */

.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; border: 1px solid; border-left-width: 4px; font-size: 14.5px; background: var(--hoja); }
.aviso.ok { border-color: var(--verde); }
.aviso.error { border-color: var(--rojo); background: #fdf6f4; }
.aviso.atencion { border-color: var(--ambar); background: #fdf9ef; }
.aviso.info { border-color: var(--agua); }
.aviso b.t { font: 600 11.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .05em; flex: none; }
.aviso.ok b.t { color: var(--verde); } .aviso.error b.t { color: var(--rojo); } .aviso.atencion b.t { color: var(--ambar); } .aviso.info b.t { color: var(--agua); }
.aviso ul { margin: 4px 0 0; padding-left: 18px; }

/* Lista de requisitos (soportes, pendientes) */
.requisitos { list-style: none; margin: 0; padding: 0; }
.requisitos li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--linea); font-size: 14.5px; }
.requisitos li:last-child { border-bottom: 0; }
.requisitos .marca-req { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--linea-fuerte); border-radius: 2px; display: grid; place-items: center; }
.requisitos li.ok .marca-req { border-color: var(--verde); background: var(--verde); }
.requisitos li.ok .marca-req::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.requisitos li.falta { color: var(--tinta-2); }

/* Pestañas */
.pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--linea-fuerte); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.pestanas a { padding: 10px 16px 9px; font: 600 14px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a.activo { color: var(--tinta); border-bottom-color: var(--llama); }
.pestanas a .cuenta { font: 500 11px var(--mono); color: var(--llama-osc); margin-left: 4px; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { min-width: 160px; }
.filtros .campo.ancho { flex: 1; min-width: 220px; }

/* Bitácora / línea de tiempo */
.bitacora { list-style: none; margin: 0; padding: 0; }
.bitacora li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.bitacora li:last-child { border-bottom: 0; }
.bitacora .cuando { font: 500 12px/1.35 var(--mono); color: var(--tinta-3); }
.bitacora .tipo { font: 600 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--agua); }
.bitacora .tipo.cambio-estado { color: var(--tinta-3); }
.bitacora p { margin: 3px 0 0; font-size: 14.5px; }
.bitacora .autor { font-size: 12.5px; color: var(--tinta-3); }

/* Pipeline */
.pipeline { display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr)); gap: 0; border: 1px solid var(--tinta); border-radius: var(--r); background: var(--hoja); overflow-x: auto; }
.pipeline .col { border-right: 1px solid var(--linea); min-width: 172px; display: flex; flex-direction: column; }
.pipeline .col:last-child { border-right: 0; }
.pipeline .col > header { padding: 12px 14px 10px; border-bottom: 1px solid var(--linea); background: var(--papel); }
.pipeline .col > header .total { font: 600 20px/1.1 var(--cond); margin-top: 6px; }
.pipeline .col > header .total small { font: 500 12px var(--mono); color: var(--tinta-3); }
.pipeline .tarjeta { display: block; padding: 11px 14px; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); }
.pipeline .tarjeta:hover { background: #faf6ee; }
.pipeline .tarjeta .id { font: 500 12px var(--mono); color: var(--llama-osc); }
.pipeline .tarjeta .cli { font-weight: 600; font-size: 14px; line-height: 1.25; margin: 2px 0; }
.pipeline .tarjeta .pie-t { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tinta-3); gap: 8px; }
.pipeline .tarjeta .pie-t .num { font-size: 12.5px; color: var(--tinta); }
.pipeline .mas { padding: 10px 14px; font-size: 13px; color: var(--tinta-3); }

/* Proporciones horizontales (motivos de pérdida, edades de cartera) */
.proporcion { list-style: none; margin: 0; padding: 0; }
.proporcion li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px dashed var(--linea); font-size: 14px; }
.proporcion li:last-child { border-bottom: 0; }
.proporcion .barra { grid-column: 1 / -1; height: 6px; background: var(--papel-2); }
.proporcion .barra span { display: block; height: 100%; background: var(--tinta-2); }
.proporcion .barra.llama span { background: var(--llama); }
.proporcion .barra.rojo span { background: var(--rojo); }
.proporcion .barra.ambar span { background: var(--ambar); }
.proporcion .barra.agua span { background: var(--agua); }

/* Ítems repetibles en formularios */
.renglones { width: 100%; border-collapse: collapse; }
.renglones th { font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); text-align: left; padding: 0 6px 6px; }
.renglones td { padding: 4px 6px; vertical-align: top; }
.renglones td:first-child { padding-left: 0; }
.renglones input, .renglones select { min-height: 38px; }

/* Detalles plegables */
details.plegable { border-top: 1px solid var(--linea); }
details.plegable > summary { cursor: pointer; list-style: none; padding: 11px 0; font: 600 13.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--agua); }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before { content: "+"; display: inline-block; width: 16px; font-family: var(--mono); }
details.plegable[open] > summary::before { content: "−"; }
details.plegable > div { padding: 4px 0 14px; }

/* Archivos */
.archivos { list-style: none; margin: 0; padding: 0; }
.archivos li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14px; flex-wrap: wrap; }
.archivos li:last-child { border-bottom: 0; }
.archivos .ext { font: 600 10.5px/1 var(--mono); width: 38px; padding: 6px 0; text-align: center; border: 1px solid var(--tinta-2); border-radius: 2px; flex: none; text-transform: uppercase; }
.archivos .ext.pdf { border-color: var(--rojo); color: var(--rojo); }
.archivos .ext.xls { border-color: var(--verde); color: var(--verde); }
.archivos .datos { flex: 1; min-width: 160px; }
.archivos .datos a { font-weight: 500; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Ingreso */

.ingreso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--hoja); }
.ingreso .plano {
  background-color: var(--tinta);
  /* Cuadrícula de papel milimetrado: cubre todo el panel, sea cual sea su proporción. */
  background-image: linear-gradient(#24343e 1px, transparent 1px), linear-gradient(90deg, #24343e 1px, transparent 1px);
  background-size: 20px 20px;
  color: #dfe6ea;
  padding: 44px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ingreso .plano svg.red { position: absolute; top: 120px; right: 0; bottom: 70px; width: 72%; height: calc(100% - 190px); opacity: .55; }
/* La red se desvanece hacia la izquierda para no competir con el titular. */
.ingreso .plano::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tinta) 0%, rgba(18, 30, 38, .92) 30%, rgba(18, 30, 38, 0) 62%); z-index: 1; pointer-events: none; }
.ingreso .plano > :not(svg) { z-index: 2; }
.ingreso .plano > * { position: relative; }
.ingreso .plano .titulo { font: 600 clamp(38px, 4.6vw, 62px)/0.98 var(--cond); color: #fff; letter-spacing: .005em; max-width: 11ch; }
.ingreso .plano .titulo em { font-style: normal; color: #f08a5a; }
.ingreso .plano .lema { font: 500 14px/1.5 var(--sans); color: #a9b7bf; max-width: 46ch; margin-top: 18px; }
.ingreso .plano .normas { font: 500 12px/1 var(--mono); letter-spacing: .04em; color: #7f949f; display: flex; gap: 16px; flex-wrap: wrap; }
.ingreso .formulario { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.ingreso .formulario > div { width: 100%; max-width: 370px; }
.ingreso .formulario .marca { padding: 0 0 30px; }
.ingreso .formulario .marca img { width: 62px; height: 62px; }
.ingreso h1 { font-size: 26px; margin-bottom: 6px; }
.ingreso form { display: grid; gap: 16px; margin-top: 24px; }
.ingreso .alterno { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-3); }

/* ------------------------------------------------------------------ Extranet */

.portal-cabeza { background: var(--tinta); color: #fff; }
.portal-cabeza .dentro { max-width: 1160px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.portal-cabeza .marca { padding: 0; color: #fff; }
.portal-cabeza .marca img { mix-blend-mode: normal; background: #fff; border-radius: 50%; padding: 3px; }
.portal-cabeza .marca span { color: #9fb0ba; }
.portal-cabeza .btn { border-color: #5d6f7a; background: transparent; color: #fff; }
.portal-cuerpo { max-width: 1160px; margin: 0 auto; padding: 28px 24px 60px; }
.calendario { list-style: none; margin: 0; padding: 0; }
.calendario li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.calendario .dia { text-align: center; border: 1px solid var(--tinta); border-radius: 2px; padding: 5px 0 4px; background: var(--hoja); }
.calendario .dia b { display: block; font: 700 22px/1 var(--cond); }
.calendario .dia span { font: 600 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .01em; color: var(--tinta-3); }
.calendario li.hecho .dia { border-color: var(--linea-fuerte); color: var(--tinta-3); }

/* ------------------------------------------------------------------ Campo (sin conexión) */

.conexion { display: inline-flex; gap: 7px; align-items: center; font: 600 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.conexion::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.conexion.fuera::before { background: var(--rojo); }
.cola { list-style: none; margin: 0; padding: 0; }
.cola li { padding: 10px 0; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }

/* ------------------------------------------------------------------ Error */
.logo-papel { mix-blend-mode: multiply; }
.error-pag { max-width: 560px; margin: 12vh auto; padding: 0 24px; }
.error-pag .codigo { font: 500 13px var(--mono); color: var(--llama-osc); }
.error-pag h1 { font-size: 34px; margin: 10px 0 12px; }

/* ------------------------------------------------------------------ Impresión */
@media print {
  .lateral, .barra-movil, .acciones, .pestanas, form, .btn { display: none !important; }
  .marco { display: block; }
  .principal { padding: 0; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------ Móvil primero en campo */

@media (max-width: 1100px) {
  .dos { grid-template-columns: 1fr; }
  .principal { padding: 22px 22px 64px; }
}

@media (max-width: 860px) {
  .marco { display: block; background: none; }
  .lateral {
    position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: 280px; height: 100%;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 0 100vmax rgba(18, 30, 38, 0);
  }
  body.menu-abierto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(18, 30, 38, .45); }
  .barra-movil {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 20;
    background: var(--papel-2); border-bottom: 1px solid var(--linea);
    padding: 8px 16px;
  }
  .barra-movil .marca { padding: 0; }
  .barra-movil .marca img { width: 34px; height: 34px; }
  .barra-movil .marca b { font-size: 18px; }
  .barra-movil button { font: 600 12.5px var(--sans); text-transform: uppercase; letter-spacing: .05em; background: none; border: 1px solid var(--tinta); border-radius: var(--r); padding: 9px 12px 8px; color: var(--tinta); }
  .principal { padding: 18px 16px 80px; }
  h1 { font-size: 25px; }
  .cabeza { margin-bottom: 18px; }
  .cabeza .acciones { width: 100%; }
  .cabeza .acciones .btn { flex: 1; }
  .rejilla > [class*="c-"] { grid-column: span 12; }
  .rejilla.movil-2 > [class*="c-"] { grid-column: span 6; }
  .cinta { grid-template-columns: 1fr 1fr; }
  .cinta > div { border-bottom: 1px solid var(--linea); }
  .cinta > div:nth-child(2n) { border-right: 0; }
  .cinta .valor { font-size: 22px; }
  .oculto-movil { display: none !important; }

  /* Tablas a fichas apiladas */
  table.apilable thead { display: none; }
  table.apilable, table.apilable tbody, table.apilable tr, table.apilable td { display: block; width: 100%; }
  table.apilable tr { border-bottom: 1px solid var(--linea-fuerte); padding: 10px 0; }
  table.apilable td { border: 0; padding: 3px 14px; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  table.apilable td::before { content: attr(data-r); font: 600 11.5px/1.9 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); text-align: left; flex: none; }
  table.apilable td[data-r=""]::before { content: none; }
  table.apilable td.titular { display: block; text-align: left; padding-bottom: 6px; }
  table.apilable td.titular::before { content: none; }
  table.apilable tfoot { display: block; }

  .renglones thead { display: none; }
  .renglones tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
  .renglones td { padding: 0; }
  .renglones td.ancho { grid-column: 1 / -1; }

  .ingreso { grid-template-columns: 1fr; }
  .ingreso .plano { padding: 28px 22px; min-height: 230px; }
  .ingreso .plano .normas { display: none; }
  .bitacora li { grid-template-columns: 1fr; gap: 2px; }
  .ficha { grid-template-columns: 1fr; gap: 0 0; }
  .ficha dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------- Correo y avisos */
.estado.enviado, .estado.activo { color: var(--verde); }
.estado.fallido { color: var(--rojo); }
.estado.omitido, .estado.apagado { color: var(--tinta-3); }
.estado.omitido::before, .estado.apagado::before { background: transparent; border: 1px solid currentColor; }
.eventos-grupo { margin: 0 0 22px; }
.eventos-grupo > h3 { font: 600 11.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--llama-osc); margin: 0 0 8px; }
.marca-ext { font: 600 11.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--agua); border: 1px solid currentColor; padding: 2px 5px; border-radius: 2px; margin-left: 6px; vertical-align: 1px; }
.lista-destinos { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--tinta-2); }
.lista-destinos span + span::before { content: "·"; margin-right: 10px; color: var(--tinta-3); }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.variables { display: flex; flex-wrap: wrap; gap: 6px; }
.variables code { font: 500 12px var(--mono); background: var(--papel); border: 1px solid var(--linea); padding: 2px 6px; border-radius: 2px; color: var(--tinta); }
textarea.plantilla { font: 400 13.5px/1.55 var(--mono); min-height: 260px; }
.previa { border: 1px solid var(--linea); background: #f5f2eb; width: 100%; height: 560px; display: block; }
.previa-asunto { font: 600 15px var(--sans, inherit); padding: 10px 12px; border: 1px solid var(--linea); border-bottom: 0; background: var(--hoja); }
.previa-asunto small { display: block; font: 500 11px var(--mono); color: var(--tinta-3); letter-spacing: .04em; margin-bottom: 3px; text-transform: uppercase; }
.prueba-estado { font-size: 13px; margin-top: 6px; }
.prueba-estado.ok { color: var(--verde); }
.prueba-estado.mal { color: var(--rojo); }
.ayuda-smtp { font-size: 13px; color: var(--tinta-2); margin: 0; padding-left: 18px; }
.ayuda-smtp li { margin: 4px 0; }
.descargas { display: flex; flex-wrap: wrap; gap: 8px; }
.envio-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.envio-oferta .check { font-size: 13px; }
@media (max-width: 860px) { .previa { height: 480px; } }
.tabla-eventos { table-layout: fixed; width: 100%; }
@media (max-width: 860px) { .tabla-eventos { table-layout: auto; } .tabla-eventos colgroup { display: none; } }
.alerta-texto { color: var(--rojo); font-weight: 600; }
.nav a .cuenta { margin-left: 6px; font: 600 11px/1 var(--mono); background: var(--llama); color: #fff; padding: 2px 5px; border-radius: 2px; }
.estado.recibida { color: var(--ambar); }
.estado.asignada, .estado.en-elaboracion { color: var(--agua); }
.estado.cotizada { color: var(--verde); }
.estado.descartada { color: var(--tinta-3); }
.pipeline.previas .col { background: var(--papel-2); }

/* ---------------------------------------------------------------- Créditos */
.creditos { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 48px; padding: 14px 0 6px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--tinta-3); }
.creditos span:first-child { margin-right: auto; }
.creditos a { color: var(--tinta-2); text-decoration-color: var(--linea-fuerte); }
.creditos a:hover { color: var(--agua); }
.ingreso .formulario { flex-direction: column; }
.ingreso .formulario > .creditos { width: 100%; max-width: 370px; margin-top: 40px; }
@media (max-width: 860px) { .creditos span:first-child { margin-right: 0; width: 100%; } }
.tabla td.mono { white-space: nowrap; }