/* App de áreas · HIVICO (rediseño 18-oct-2026)
   Herramienta diaria de las áreas: «qué me toca y súbelo». Distinta del panel de Dirección (azul marino, Archivo).
   Paleta: papel de bitácora, verde de uniforme, amarillo de chaleco reflejante sólo para «hoy», rojo de alto.
   Tipos: Barlow Semi Condensed (señalética: títulos, cifras, la ronda) + Atkinson Hyperlegible (lectura, para personal no técnico).
   El elemento memorable es la ronda: la semana como el recorrido de un guardia, un punto de control por cada cosa que toca. */
:root {
  --papel: #F4F6F3; --hoja: #FFFFFF; --tinta: #1D2B26; --tinta2: #4E5D57; --linea: #D9E0DB; --niebla: #EAEFEB;
  --pino: #2E5E4E; --pino2: #23493C; --chaleco: #E8C547; --alto: #B3261E; --revision: #4F6A8F; --ambar: #9A6B00;
  --t-cap: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; --t-txt: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --r: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.55 var(--t-txt); }
a { color: var(--pino); }
:focus-visible { outline: 3px solid var(--chaleco); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--t-cap); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: .005em; }
button, input, textarea, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- armazón: riel lateral en escritorio, barra inferior en celular ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.riel { background: var(--tinta); color: #DCE6E0; padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.marca { font-family: var(--t-cap); font-weight: 700; font-size: 22px; color: #fff; padding: 0 10px; }
.marca small { display: block; font: 400 13px/1.3 var(--t-txt); color: #9FB2A8; margin-top: 2px; }
.riel nav { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.riel a.op { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #DCE6E0; text-decoration: none; font-weight: 700; }
.riel a.op:hover { background: #2A3B35; }
.riel a.op.on { background: var(--pino); color: #fff; }
.riel a.op .n { margin-left: auto; background: var(--chaleco); color: var(--tinta); border-radius: 99px; font: 700 12px/1 var(--t-txt); padding: 4px 7px; }
.riel .pie { margin-top: auto; padding: 10px; font-size: 14px; color: #9FB2A8; }
.riel .pie button { background: none; border: 1px solid #45574F; color: #DCE6E0; border-radius: 8px; padding: 6px 12px; cursor: pointer; margin-top: 8px; }
.riel select { margin: 14px 4px 0; padding: 8px; border-radius: 8px; border: 0; background: #2A3B35; color: #fff; }
main { padding: 34px clamp(18px, 4vw, 56px) 90px; max-width: 1180px; width: 100%; }
.cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cab h1 { font-size: 40px; }
.cab .fecha { color: var(--tinta2); }
.barra { display: none; }

/* ---------- inicio: titular y ronda ---------- */
.titular { font-family: var(--t-cap); font-weight: 600; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; max-width: 22ch; margin: 4px 0 6px; }
.titular b { font-weight: 700; }
.bajada { color: var(--tinta2); max-width: 64ch; margin: 0 0 18px; }
.ronda { position: relative; margin: 26px 0 34px; padding: 34px 6px 46px; overflow-x: auto; }
.ronda .via { position: absolute; left: 14px; right: 14px; top: 52px; height: 4px; background: var(--linea); border-radius: 2px; }
.ronda .via i { position: absolute; inset: 0; background: var(--tinta); border-radius: 2px; transform-origin: left; }
.ronda ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; min-width: max-content; position: relative; }
.ronda li { width: 92px; flex: none; text-align: center; position: relative; }
.ronda .pc { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--tinta); background: var(--hoja); display: grid; place-items: center;
  font: 700 15px/1 var(--t-cap); color: var(--tinta); cursor: pointer; position: relative; }
.ronda .pc.vencido { background: var(--alto); border-color: var(--alto); color: #fff; }
.ronda .pc.hoy { border-color: var(--chaleco); box-shadow: 0 0 0 5px rgba(232, 197, 71, .35); }
.ronda .pc.revision { background: linear-gradient(90deg, var(--revision) 50%, var(--hoja) 50%); border-color: var(--revision); color: #fff; }
.ronda .pc.listo { background: var(--pino); border-color: var(--pino); color: #fff; }
.ronda .dia { font: 600 15px/1.2 var(--t-cap); margin-top: 8px; }
.ronda .dia small { display: block; font: 400 13px/1.2 var(--t-txt); color: var(--tinta2); }
.ronda li.marca-hoy::before { content: 'hoy'; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--chaleco); color: var(--tinta);
  font: 700 13px/1 var(--t-txt); padding: 5px 9px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .ronda.arranca .via i { animation: via 900ms cubic-bezier(.2, .7, .2, 1) both; }
  .ronda.arranca .pc { animation: punto 380ms ease-out both; animation-delay: calc(var(--k) * 70ms + 250ms); }
  @keyframes via { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes punto { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* ---------- listas de trabajo ---------- */
.grupo { margin: 26px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.grupo h2 { font-size: 24px; }
.grupo .c { color: var(--tinta2); }
.fila { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; background: var(--hoja); border-left: 5px solid var(--linea);
  padding: 14px 16px; border-radius: 0 var(--r) var(--r) 0; margin-bottom: 8px; }
.fila.vencido { border-left-color: var(--alto); }
.fila.hoy, .fila.semana { border-left-color: var(--chaleco); }
.fila.revision { border-left-color: var(--revision); }
.fila.listo { border-left-color: var(--pino); }
.fila .que { font-weight: 700; }
.fila .det { color: var(--tinta2); font-size: 14.5px; margin-top: 2px; }
.fila .plazo { font: 600 16px/1.2 var(--t-cap); text-align: right; white-space: nowrap; }
.fila .plazo small { display: block; font: 400 13px/1.3 var(--t-txt); color: var(--tinta2); }
.fila .plazo.rojo { color: var(--alto); }
.acc { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.btn { background: var(--pino); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--pino2); }
.btn.sec { background: var(--hoja); color: var(--tinta); border: 1.5px solid var(--linea); }
.btn.sec:hover { border-color: var(--tinta2); }
.btn.alto { background: var(--alto); }
.btn:disabled { opacity: .55; cursor: wait; }
.vacio { background: var(--hoja); border: 1.5px dashed var(--linea); border-radius: var(--r); padding: 22px; color: var(--tinta2); }
.vacio b { color: var(--tinta); }
.nota { background: var(--niebla); border-radius: var(--r); padding: 14px 16px; max-width: 76ch; }
.err { color: var(--alto); font-weight: 700; }
.ok { color: var(--pino); font-weight: 700; }
.chip { display: inline-block; border-radius: 99px; padding: 2px 10px; font-size: 13px; font-weight: 700; background: var(--niebla); color: var(--tinta); white-space: nowrap; }
.chip.alto { background: #F6DCDA; color: var(--alto); }
.chip.revision { background: #E1E8F2; color: var(--revision); }
.chip.pino { background: #DCEBE4; color: var(--pino); }
.chip.ambar { background: #F7EDC8; color: #6B4C00; }

/* ---------- cifras del área ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 2px solid var(--tinta); margin: 8px 0 18px; }
.cifras div { padding: 12px 14px 4px 0; }
.cifras b { display: block; font: 700 34px/1 var(--t-cap); }
.cifras span { color: var(--tinta2); font-size: 14px; }

/* ---------- auditoría ---------- */
.obs { background: var(--hoja); border-radius: 0 var(--r) var(--r) 0; border-left: 6px solid var(--linea); margin: 0 0 16px; }
.obs.Crítica { border-left-color: var(--alto); } .obs.Relevante { border-left-color: #C77700; } .obs.Media { border-left-color: var(--chaleco); } .obs.Menor { border-left-color: var(--linea); }
.obs > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
.obs > summary::-webkit-details-marker { display: none; }
.obs .num { font: 600 15px/1.2 var(--t-cap); color: var(--tinta2); }
.obs h3 { font-size: 21px; font-weight: 600; max-width: 70ch; }
.obs .lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.avance { width: 120px; height: 8px; background: var(--niebla); border-radius: 99px; overflow: hidden; }
.avance i { display: block; height: 100%; background: var(--pino); }
.obs .cuerpo { padding: 0 18px 18px; }
.bloque { max-width: 78ch; margin: 4px 0 14px; }
.bloque h4 { font-size: 17px; margin-bottom: 4px; }
.bloque p { margin: 0 0 6px; }
.fuente { font-size: 14px; color: var(--tinta2); }
.criterio { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 12px 14px; margin: 6px 0 16px; max-width: 78ch; }
.criterio li { margin: 2px 0; }
.punto { border-top: 1.5px solid var(--linea); padding: 16px 0 6px; display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; }
.punto .letra { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--tinta); display: grid; place-items: center; font: 700 17px/1 var(--t-cap); }
.punto.validado .letra { background: var(--pino); border-color: var(--pino); color: #fff; }
.punto.regresado .letra { border-color: var(--alto); color: var(--alto); }
.punto.enviada .letra { border-color: var(--revision); color: var(--revision); }
.pide { font-size: 17px; font-weight: 700; max-width: 70ch; }
.pide-sub { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 15px; max-width: 78ch; }
.pide-sub dt { color: var(--tinta2); }
.pide-sub dd { margin: 0; }
.pasos { display: flex; gap: 0; margin: 12px 0 8px; flex-wrap: wrap; }
.pasos span { font-size: 13.5px; padding: 5px 12px 5px 18px; background: var(--niebla); color: var(--tinta2); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); margin-right: -4px; }
.pasos span:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); padding-left: 12px; border-radius: 6px 0 0 6px; }
.pasos span.on { background: var(--tinta); color: #fff; font-weight: 700; }
.pasos span.on.alto { background: var(--alto); }
.pasos span.on.pino { background: var(--pino); }
.pasos span.on.revision { background: var(--revision); }
.historia { list-style: none; margin: 8px 0 4px; padding: 0 0 0 14px; border-left: 2px solid var(--linea); font-size: 14.5px; }
.historia li { margin: 0 0 8px; position: relative; }
.historia li::before { content: ''; position: absolute; left: -20px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.historia li.sube::before { background: var(--revision); } .historia li.aceptado::before { background: var(--pino); } .historia li.regresado::before { background: var(--alto); }
.historia .cuando { color: var(--tinta2); }
.archivo { display: inline-flex; gap: 6px; align-items: center; background: var(--niebla); border-radius: 6px; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 14px; text-decoration: none; color: var(--tinta); }
.ruta { font-size: 13px; color: var(--tinta2); word-break: break-all; }

/* ---------- revisión (Consultoría): lo pedido junto a lo enviado ---------- */
.rev { background: var(--hoja); border-radius: var(--r); margin-bottom: 18px; overflow: hidden; border: 1.5px solid var(--linea); }
.rev .tope { padding: 12px 18px; background: var(--niebla); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.rev .tope b { font-family: var(--t-cap); font-size: 19px; }
.rev .dos { display: grid; grid-template-columns: 1fr 1fr; }
.rev .dos > div { padding: 16px 18px; }
.rev .dos > div + div { border-left: 1.5px solid var(--linea); }
.rev h4 { font-size: 16px; margin-bottom: 6px; color: var(--tinta2); font-weight: 600; }
.rev iframe, .rev img.vista { width: 100%; height: 340px; border: 1.5px solid var(--linea); border-radius: 8px; margin-top: 8px; background: var(--niebla); object-fit: contain; }
.rev .decide { border-top: 1.5px solid var(--linea); padding: 14px 18px; display: grid; gap: 10px; }
.rev .decide .botones { display: flex; gap: 10px; flex-wrap: wrap; }
textarea, input[type=text], input[type=url], input[type=password], input:not([type]) { width: 100%; border: 1.5px solid var(--linea); border-radius: 8px; padding: 10px 12px; background: var(--hoja); }
textarea:focus, input:focus { border-color: var(--pino); }
label.et { display: block; font-weight: 700; margin: 12px 0 4px; }
label.et small { font-weight: 400; color: var(--tinta2); }

/* ---------- subir: panel lateral ---------- */
.velo { position: fixed; inset: 0; background: rgba(29, 43, 38, .45); display: flex; justify-content: flex-end; z-index: 20; }
.cajon { background: var(--papel); width: min(520px, 100%); height: 100%; overflow-y: auto; padding: 26px 24px 30px; box-shadow: -12px 0 40px rgba(29, 43, 38, .25); }
@media (prefers-reduced-motion: no-preference) { .cajon { animation: entra 220ms ease-out; } @keyframes entra { from { transform: translateX(40px); opacity: 0; } } }
.cajon h2 { font-size: 28px; margin-bottom: 6px; }
label.suelta, .suelta { display: block; border: 2px dashed var(--tinta2); border-radius: var(--r); padding: 22px; text-align: center; background: var(--hoja); cursor: pointer; margin-top: 8px; }
.suelta.sobre { border-color: var(--pino); background: #E6F0EB; }
.suelta input { display: none; }
.suelta b { font: 700 19px/1.2 var(--t-cap); display: block; margin-bottom: 4px; }
.zona { margin-top: 10px; max-width: 78ch; }
.lista-arch { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14.5px; }
.lista-arch li { padding: 4px 0; border-bottom: 1px solid var(--linea); }
.pie-cajon { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.recibido { background: #DCEBE4; border-radius: var(--r); padding: 16px; }

/* ---------- tablas (Dirección, vencimientos) ---------- */
.tabla { width: 100%; border-collapse: collapse; background: var(--hoja); border-radius: var(--r); overflow: hidden; font-size: 15px; }
.tabla th { text-align: left; font: 600 14px/1.2 var(--t-cap); color: var(--tinta2); padding: 10px 12px; border-bottom: 2px solid var(--tinta); background: var(--hoja); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla td.n { text-align: right; font: 600 16px/1.2 var(--t-cap); }
.envolver { overflow-x: auto; }
.punto-sem { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.punto-sem.rojo { background: var(--alto); } .punto-sem.amarillo { background: var(--chaleco); } .punto-sem.verde { background: var(--pino); }

/* ---------- calendario ---------- */
.mes { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mes h2 { font-size: 26px; min-width: 9ch; }
.siete { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.siete .dn { font: 600 14px/1 var(--t-cap); color: var(--tinta2); padding: 4px; }
.siete .d { background: var(--hoja); min-height: 86px; border-radius: 8px; padding: 6px; cursor: pointer; border: 1.5px solid transparent; overflow: hidden; }
.siete .d.vac { background: transparent; cursor: default; }
.siete .d.hoy { border-color: var(--chaleco); box-shadow: inset 0 0 0 2px var(--chaleco); }
.siete .d .nu { font: 700 15px/1 var(--t-cap); }
.siete .d .ev { display: block; font-size: 12px; line-height: 1.25; margin-top: 4px; padding-left: 6px; border-left: 3px solid; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.detalle-dia { margin-top: 12px; }

/* ---------- avisos ---------- */
.aviso { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 12px 14px; background: var(--hoja); border-bottom: 1px solid var(--linea); align-items: start; }
.aviso:first-child { border-radius: var(--r) var(--r) 0 0; } .aviso:last-child { border-radius: 0 0 var(--r) var(--r); border-bottom: 0; }
.aviso.nuevo { box-shadow: inset 4px 0 0 var(--chaleco); }
.aviso .f { font: 600 15px/1.3 var(--t-cap); color: var(--tinta2); }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrar .lado { background: var(--tinta); color: #E7EEE9; padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: space-between; }
.entrar .lado h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 600; max-width: 12ch; color: #fff; }
.entrar .lado p { max-width: 40ch; color: #B9C8C0; }
.entrar form { padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: center; max-width: 520px; }
.entrar form h2 { font-size: 30px; margin-bottom: 8px; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .riel { display: none; }
  .barra { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--tinta); z-index: 10; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .barra a { color: #DCE6E0; text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 6px 8px; border-radius: 8px; text-align: center; position: relative; }
  .barra a.on { background: var(--pino); color: #fff; }
  .barra a .n { position: absolute; top: -2px; right: -2px; background: var(--chaleco); color: var(--tinta); border-radius: 99px; font-size: 11px; padding: 1px 5px; }
  .barra select { max-width: 120px; background: #2A3B35; color: #fff; border: 0; border-radius: 8px; font-size: 12.5px; }
  main { padding: 20px 16px 96px; }
  .cab h1 { font-size: 30px; }
  .fila { grid-template-columns: 1fr; }
  .fila .plazo { text-align: left; }
  .acc { justify-content: flex-start; }
  .rev .dos { grid-template-columns: 1fr; }
  .rev .dos > div + div { border-left: 0; border-top: 1.5px solid var(--linea); }
  .obs > summary { grid-template-columns: 1fr; }
  .obs .lado { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; }
  .punto { grid-template-columns: 36px 1fr; }
  .pide-sub { grid-template-columns: 1fr; } .pide-sub dt { margin-top: 4px; }
  .entrar { grid-template-columns: 1fr; } .entrar .lado { padding: 36px 24px; } .entrar form { padding: 30px 24px; }
  .aviso { grid-template-columns: 1fr; }
  .siete .d { min-height: 56px; } .siete .d .ev { display: none; } .siete .d.tiene::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); margin-top: 6px; }
}

/* ---------- Dirección: una tira por área, legible de un vistazo ---------- */
.areas { display: grid; gap: 8px; margin: 10px 0 20px; }
.area-t { display: grid; grid-template-columns: minmax(170px, 1.1fr) 2fr minmax(150px, .8fr) minmax(170px, .9fr); gap: 6px 22px; align-items: center; text-decoration: none; color: var(--tinta);
  background: var(--hoja); border-left: 8px solid var(--linea); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; }
.area-t:hover { background: #FBFCFB; box-shadow: inset 0 0 0 1.5px var(--linea); }
.area-t.rojo { border-left-color: var(--alto); } .area-t.amarillo { border-left-color: var(--chaleco); } .area-t.verde { border-left-color: var(--pino); }
.area-t .nom { font: 700 21px/1.1 var(--t-cap); }
.area-t .hechos { font-size: 15px; }
.area-t .mini { display: grid; gap: 4px; font-size: 13px; color: var(--tinta2); }
.area-t .mini .avance { width: 100%; }
@media (max-width: 860px) { .area-t { grid-template-columns: 1fr 1fr; } .area-t .nom, .area-t .hechos { grid-column: 1 / -1; } }

/* 18-oct: botón visible de subida y aviso de plazo vencido */
.suelta .boton-subir{display:inline-block;font-size:17px;padding:12px 22px;margin-bottom:6px;pointer-events:none}
.cerrado{margin-top:10px;padding:12px 14px;border-left:4px solid #B3261E;background:#FBEAE8;border-radius:6px}

.suelta.muestra{cursor:default;opacity:.92}
.suelta.muestra .boton-subir{filter:saturate(.9)}

/* ---------- 18-oct (noche): «Lo que hay que solventar», documento por documento ---------- */
.obs.solv.rojo { border-left-color: var(--alto); } .obs.solv.amarillo { border-left-color: var(--chaleco); } .obs.solv.verde { border-left-color: var(--pino); }
.alertas-de { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.alerta-c { display: inline-block; font: 600 14px/1.3 var(--t-cap); padding: 3px 10px; border-radius: 6px; background: var(--niebla); }
.alerta-c.rojo { background: #F6DCDA; color: var(--alto); } .alerta-c.amarillo { background: #F7EDC8; color: #6B4C00; } .alerta-c.verde { background: #DCEBE4; color: var(--pino); }
.paso4 { border-top: 1px solid var(--linea); padding: 12px 0 4px; }
.paso4 h4 { font-size: 18px; margin-bottom: 4px; }
.paso4 p, .paso4 ul { margin: 4px 0; max-width: 80ch; }
.pide-todo { background: #FBF7E6; border: 1px solid #EADBA0; border-radius: var(--r); padding: 12px 16px; margin: 8px 0; }
.pide-todo li { font-size: 17px; margin: 4px 0; }
.plazo-grande { font: 700 20px/1.2 var(--t-cap); color: var(--tinta); }
pre.literal { white-space: pre-wrap; font: 14.5px/1.5 var(--t-txt); background: var(--hoja); border: 1px solid var(--linea); border-radius: 8px; padding: 12px; max-width: 90ch; }
.ad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ad > div { background: var(--niebla); border-radius: 8px; padding: 10px 12px; } .ad b { display: block; font-family: var(--t-cap); } .ad span { font-size: 14.5px; }
.renglones { margin: 10px 0 4px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); padding: 10px; }
.ren-cab { margin-bottom: 8px; }
.ren-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ren-filtros select, .ren-filtros input { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--hoja); min-width: 180px; }
.ren { display: grid; grid-template-columns: minmax(180px, 1.1fr) 2fr auto; gap: 4px 14px; align-items: start; background: var(--hoja); border-left: 4px solid var(--linea); border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 6px 0; }
.ren.regresado { border-left-color: var(--alto); } .ren.enviado { border-left-color: var(--revision); } .ren.aceptado { border-left-color: var(--pino); }
.ren-det { font-size: 13.5px; }
.ren-sub { grid-column: 1 / -1; } .ren-sub > summary { list-style: none; display: inline-block; cursor: pointer; } .ren-sub > summary::-webkit-details-marker { display: none; }
.btn.boton-subir { font-size: 17px; padding: 11px 20px; }
.que.grande { font-size: 19px; line-height: 1.35; }
.aviso-grande { max-width: 760px; } .aviso-grande h2 { font-size: 30px; }
.sem-p { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--linea); vertical-align: middle; }
.sem-p.rojo { background: var(--alto); } .sem-p.amarillo { background: var(--chaleco); } .sem-p.verde { background: var(--pino); }
@media (max-width: 760px) { .ren { grid-template-columns: 1fr; } .ad { grid-template-columns: 1fr; } }
.cajon.aviso-grande { width: min(780px, 100%); }

/* ---------- 18-oct (noche): qué tiene que hacer, renglón en una frase, lista de consulta y vista global en líneas ---------- */
.que-hacer { background: var(--hoja); border: 2px solid var(--pino); border-radius: var(--r); padding: 14px 18px; margin: 4px 0 14px; max-width: 78ch; }
.que-hacer h4 { font-size: 22px; color: var(--pino); margin-bottom: 6px; }
.que-hacer p { font-size: 17.5px; margin: 6px 0; }
.sub-grupo { margin: 16px 0 4px; border-top: 1px solid var(--linea); padding-top: 10px; }
.sub-grupo h5 { font: 700 18px/1.2 var(--t-cap); margin: 0; }
.sub-grupo p { margin: 2px 0 0; }
.ren { grid-template-columns: 1fr auto; }
.ren-txt { min-width: 0; }
.ren-llano { font-size: 16.5px; margin: 0 0 3px; max-width: 80ch; }
.ren-fuente > summary { cursor: pointer; display: inline; } .ren-fuente p { margin: 4px 0 0; font-size: 13px; }
.ren.consulta { border-left-color: var(--niebla); }
.lista-enc { margin: 14px 0; background: var(--niebla); border-radius: var(--r); padding: 10px 14px; }
.lista-enc > summary { cursor: pointer; }
.lista-enc .renglones { margin-top: 10px; }
.lineas-g { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.linea-g { display: grid; grid-template-columns: 14px minmax(140px, 1fr) minmax(220px, 3fr) minmax(150px, 1.1fr) minmax(110px, .8fr) auto; gap: 10px; align-items: center;
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 14px; }
.lg-area { font-weight: 700; } .lg-que b { font-weight: 700; } .lg-monto { font-variant-numeric: tabular-nums; text-align: right; }
.traza { margin-top: 20px; }
@media (max-width: 760px) {
  .linea-g { grid-template-columns: 14px 1fr auto; }
  .linea-g .lg-que, .linea-g .lg-falta, .linea-g .lg-monto { grid-column: 2 / -1; text-align: left; }
}

/* ---------- 18-oct (noche): mensajes ---------- */
.msj-nuevo select, .msj-nuevo textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--hoja); }
.hilo { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 16px; margin: 10px 0; max-width: 820px; }
.hilo-tema { font: 700 15px/1.3 var(--t-cap); color: var(--pino); margin-bottom: 8px; }
.msj { padding: 8px 12px; border-radius: 10px; margin: 6px 0; max-width: 92%; }
.msj p { margin: 4px 0 0; }
.msj.de-area { background: var(--niebla); } .msj.de-co { background: #E3EEE8; margin-left: auto; border-left: 3px solid var(--pino); }
.msj-quien { font-size: 13px; color: var(--tinta2); font-weight: 700; }
.msj-adj { margin: 6px 0 0; padding-left: 18px; }
.fResp textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; margin-top: 8px; }
.ren-msj { display: block; margin-top: 6px; }

/* 18-oct (noche): tarjeta del área en tres bloques — lo que encontramos · lo que tiene que entregar · plazo y cómo lo revisamos */
.cuerpo.tres { display: grid; gap: 14px; }
.bloque3 { border-top: 1px solid var(--linea); padding-top: 12px; max-width: 82ch; }
.bloque3 > h4 { font-size: 22px; margin-bottom: 6px; }
.bloque3 .encontramos { font-size: 18px; line-height: 1.5; margin: 0; }
.bloque3.entregar { border: 2px solid var(--pino); border-radius: var(--r); background: var(--hoja); padding: 14px 18px; }
.bloque3.entregar > h4 { color: var(--pino); }
.lista-entregar { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.lista-entregar > li { font-size: 17.5px; padding-left: 4px; }
.lista-entregar > li::marker { font: 700 20px var(--t-cap); color: var(--pino); }
.ent-fila { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.ent-txt { margin: 0; }
.ent-txt .cuenta { display: block; font-size: 15px; color: var(--tinta2); font-weight: 700; margin-top: 2px; }
.ent-est { margin-top: 4px; }
.ent-fila .boton-subir { flex: none; white-space: nowrap; }
.ent-det { margin-top: 6px; }
.ent-det > summary { cursor: pointer; color: var(--pino); font-weight: 700; font-size: 15px; }
.dir-det { border: 1px dashed var(--linea); border-radius: var(--r); padding: 10px 14px; background: var(--niebla); }
.dir-det > summary { cursor: pointer; font: 700 17px var(--t-cap); }
.dir-det h5 { font: 700 16px var(--t-cap); margin: 10px 0 2px; }
@media (max-width: 700px) { .ent-fila { flex-direction: column; } .ent-fila .boton-subir { width: 100%; } }