/* Atalaya · diseño propio (docs/MARCA.md): papel cálido, piedra y ocre, serif para leer y sans para operar.
   Filetes en vez de sombras, radios por jerarquía, nada se mueve solo. */
@import url("/fuentes/fuentes.css");
:root {
  --piedra: #1f4b5c; --piedra-2: #e3edf0; --piedra-3: #163a48; --ocre: #b8742a; --ocre-2: #f6ead8;
  --papel: #f4f1ea; --hoja: #fffdf8; --tinta: #1c2328; --tinta-2: #55626a; --linea: #d8d2c4; --linea-2: #ebe6da;
  --ok: #2a6f47; --ok-2: #e2efe6; --alerta: #a8401f; --alerta-2: #f6e3dc; --ojo: #7a5d15; --ojo-2: #f7efd9;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-campo: 3px; --r-boton: 4px; --r-hoja: 6px; --paso: 120ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 16px/1.55 var(--serif); }
button, input, select, textarea { font: inherit; }
a { color: var(--piedra); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--piedra-3); }
::selection { background: var(--ocre-2); }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }

/* ── Encabezado ─────────────────────────────────────────────────────────── */
.barra { display: flex; align-items: center; gap: 22px; padding: 0 20px; height: 56px; background: var(--piedra); color: #fff; position: sticky; top: 0; z-index: 5; }
.marca { font-family: var(--serif); font-weight: 600; font-size: 21px; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 9px; letter-spacing: .2px; }
.marca:hover { color: #fff; }
.torre { width: 16px; height: 24px; background: var(--ocre); clip-path: polygon(0 100%, 0 30%, 20% 30%, 20% 0, 40% 0, 40% 30%, 60% 30%, 60% 0, 80% 0, 80% 30%, 100% 30%, 100% 100%); }
.nav { display: flex; gap: 2px; margin-left: auto; font-family: var(--sans); }
.nav a { color: rgba(255,255,255,.82); text-decoration: none; padding: 7px 11px; border-radius: var(--r-boton); font-size: 14.5px; transition: background var(--paso), color var(--paso); }
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav a.activo { background: #fff; color: var(--piedra-3); font-weight: 600; }
.nav a.activo:hover { background: #fff; color: var(--piedra-3); }
.pepita { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--ocre); color: #fff; font-size: 11px; font-weight: 700; text-align: center; margin-left: 4px; vertical-align: 2px; font-family: var(--sans); }
.menu { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: var(--r-boton); padding: 6px 10px; font-family: var(--sans); font-size: 14px; display: none; align-items: center; gap: 7px; cursor: pointer; }
.menu svg { width: 18px; height: 18px; }

/* ── Lienzo ─────────────────────────────────────────────────────────────── */
.app { max-width: 1000px; margin: 0 auto; padding: 22px 20px 70px; }
.pie { max-width: 1000px; margin: 0 auto; padding: 18px 20px 36px; color: var(--tinta-2); font-size: 13.5px; font-family: var(--sans); border-top: 1px solid var(--linea); display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.pie b { color: var(--tinta); font-family: var(--serif); font-size: 15px; }
h1 { font-size: 30px; line-height: 1.2; margin: 6px 0 14px; font-weight: 600; letter-spacing: -.2px; }
h2 { font-size: 22px; line-height: 1.25; margin: 26px 0 10px; font-weight: 600; }
h3 { font-size: 17px; margin: 14px 0 8px; font-weight: 600; }
p { margin: 6px 0; }
.dim { color: var(--tinta-2); }
.ui { font-family: var(--sans); }
.hoja { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 16px 18px; margin: 12px 0; }
.hoja > h2:first-child, .hoja > h3:first-child { margin-top: 0; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.col { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.col > .hoja { margin: 0; }
.esqueleto { height: 14px; margin: 10px 0; border-radius: 3px; background: linear-gradient(90deg, var(--linea-2), #f7f4ee, var(--linea-2)); background-size: 200% 100%; animation: esq 1.2s linear infinite; }
.esqueleto.t { height: 24px; width: 60%; }
@keyframes esq { to { background-position: -200% 0; } }

/* ── Formularios ────────────────────────────────────────────────────────── */
label { display: block; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: 4px; }
.campo { margin: 10px 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--linea); border-radius: var(--r-campo); background: #fff; color: var(--tinta); font-family: var(--sans); font-size: 15px; transition: border-color var(--paso), box-shadow var(--paso); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--piedra); box-shadow: 0 0 0 3px var(--piedra-2); }
input[type=file] { font-family: var(--sans); font-size: 14px; }
textarea { min-height: 80px; line-height: 1.5; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--piedra); border-radius: var(--r-boton); background: var(--piedra); color: #fff; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 600; text-decoration: none; line-height: 1.2; transition: background var(--paso), border-color var(--paso), color var(--paso); }
.btn:hover { background: var(--piedra-3); border-color: var(--piedra-3); color: #fff; }
.btn.sec { background: transparent; color: var(--piedra); }
.btn.sec:hover { background: var(--piedra-2); color: var(--piedra-3); }
.btn.peligro { background: transparent; color: var(--alerta); border-color: var(--alerta); }
.btn.peligro:hover { background: var(--alerta-2); }
.btn.chico { min-height: 32px; padding: 4px 11px; font-size: 13.5px; font-weight: 500; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn svg { width: 15px; height: 15px; }
.etq { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-family: var(--sans); font-weight: 600; background: var(--piedra-2); color: var(--piedra); vertical-align: 1px; white-space: nowrap; }
/* Una etiqueta con texto largo (el motivo de un contrato: «sector 811123 (…)») parte línea: sin esto la fila desbordaba el celular a 390 px. */
.etq.suelta { white-space: normal; }
.etq.ojo { background: var(--ojo-2); color: var(--ojo); } .etq.mal { background: var(--alerta-2); color: var(--alerta); } .etq.gris { background: var(--linea-2); color: var(--tinta-2); font-weight: 500; } .etq.ok { background: var(--ok-2); color: var(--ok); }

/* ── Listas de procesos ─────────────────────────────────────────────────── */
.lista { list-style: none; padding: 0; margin: 0; }
.lista > li { border-top: 1px solid var(--linea); padding: 14px 0; }
.lista > li:first-child { border-top: 0; }
.proc { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; }
.proc .t { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 0 0 2px; }
.proc .t a { color: var(--tinta); text-decoration: none; }
.proc .t a:hover { color: var(--piedra); text-decoration: underline; }
.proc .m { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); line-height: 1.6; }
.proc .m b { color: var(--tinta); font-size: 14.5px; }
.proc .acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cierre { font-family: var(--sans); font-weight: 600; }
.cierre.pronto { color: var(--ojo); } .cierre.urgente { color: var(--alerta); } .cierre.paso { color: var(--tinta-2); font-weight: 500; }

/* ── Tablas, citas, estados ─────────────────────────────────────────────── */
.desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px -4px; padding: 0 4px; }
.tabla { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.tabla th { color: var(--tinta-2); font-weight: 600; font-size: 13px; border-bottom-color: var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td b { font-variant-numeric: tabular-nums; }
.cita { font-size: 12.5px; color: var(--tinta-2); font-family: var(--sans); border-left: 2px solid var(--ocre); padding-left: 8px; margin: 5px 0 0; line-height: 1.45; }
.cumple { color: var(--ok); font-weight: 600; } .nocumple { color: var(--alerta); font-weight: 600; } .verif { color: var(--ojo); font-weight: 600; }
.senal { padding: 9px 12px 9px 14px; background: var(--ojo-2); border-left: 3px solid var(--ojo); border-radius: 0 var(--r-boton) var(--r-boton) 0; margin: 6px 0; font-family: var(--sans); font-size: 14px; }
.senal.urgente { background: var(--alerta-2); border-left-color: var(--alerta); }
.senal.ok { background: var(--ok-2); border-left-color: var(--ok); }
.vacio { padding: 28px 20px; text-align: left; color: var(--tinta-2); border: 1px dashed var(--linea); border-radius: var(--r-hoja); background: var(--hoja) url("/fondo-niveles.svg") right bottom / 420px no-repeat; }
.vacio b { color: var(--tinta); }
.pasos { counter-reset: p; padding: 0; list-style: none; margin: 12px 0; }
.pasos li { counter-increment: p; padding: 7px 0 7px 38px; position: relative; }
.pasos li::before { content: counter(p); position: absolute; left: 0; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ocre); color: var(--ocre); font: 600 13px/24px var(--sans); text-align: center; }
.pasos li.hecho::before { background: var(--ok); border-color: var(--ok); color: #fff; content: "✓"; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { background: var(--hoja); border: 1px solid var(--linea); color: var(--tinta); border-radius: var(--r-boton); padding: 4px 10px; font-family: var(--sans); font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.chip:has(input:checked) { background: var(--piedra-2); border-color: var(--piedra); color: var(--piedra); }
.chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font-size: 15px; line-height: 1; }
.sug { max-height: 240px; overflow: auto; border: 1px solid var(--linea); border-radius: var(--r-campo); background: #fff; }
.sug div { padding: 8px 11px; cursor: pointer; border-top: 1px solid var(--linea-2); font-family: var(--sans); font-size: 14px; }
.sug div:hover { background: var(--piedra-2); }
.aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: var(--r-boton); font-family: var(--sans); font-size: 14px; max-width: min(92vw, 560px); z-index: 9; box-shadow: 0 6px 18px rgba(28,35,40,.25); }
.plan { border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 16px; background: #fff; }
.plan.actual { border-color: var(--piedra); box-shadow: inset 0 0 0 1px var(--piedra); }
.plan .precio { font-size: 26px; font-weight: 600; font-family: var(--serif); margin: 4px 0; }
details summary { cursor: pointer; font-family: var(--sans); font-size: 14px; color: var(--piedra); font-weight: 600; }
details.hoja summary { margin: -4px 0; }
.barra-filtro { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; font-family: var(--sans); font-size: 14px; }
.barra-filtro select, .barra-filtro input { width: auto; min-height: 36px; padding: 5px 9px; }
pre.texto { white-space: pre-wrap; font: inherit; margin: 4px 0; overflow-wrap: anywhere; }

/* ── Portada ────────────────────────────────────────────────────────────── */
.portada { display: grid; gap: 28px; grid-template-columns: 1.15fr .85fr; align-items: start; padding: 26px 0 10px; background: url("/fondo-niveles.svg") right top / 760px no-repeat; }
.portada h1 { font-size: 40px; line-height: 1.12; margin: 8px 0 16px; letter-spacing: -.4px; }
.portada .ante { font-family: var(--sans); color: var(--ocre); font-weight: 600; font-size: 14px; margin: 0; }
.portada .lead { font-size: 18px; color: var(--tinta-2); max-width: 54ch; }
.portada .cta { margin: 20px 0 6px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.portada .cta a:not(.btn) { font-family: var(--sans); font-weight: 600; }
.muestra { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 0; overflow: hidden; }
.muestra .cab { background: var(--piedra-2); color: var(--piedra); padding: 9px 14px; font: 600 13px var(--sans); }
.muestra .cuerpo { padding: 12px 14px; }
.muestra .cuerpo p { margin: 4px 0; font-size: 14.5px; }
.muestra .cita { margin-top: 2px; }
.planes-portada { display: grid; gap: 10px; }
.planes-portada .plan { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 11px 14px; }
.planes-portada .plan .precio { font-size: 20px; margin: 0; }
.planes-portada .plan .que { grid-column: 1 / -1; font-family: var(--sans); font-size: 13px; color: var(--tinta-2); }
.hechos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 30px 0 10px; border-top: 1px solid var(--linea); padding-top: 18px; }
.hechos b { font-family: var(--serif); font-size: 17px; display: block; }
.hechos span { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); }

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .barra { padding: 0 14px; gap: 12px; }
  .menu { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--piedra-3); padding: 8px 10px 12px; flex-direction: column; gap: 2px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
  .nav.abierto { display: flex; }
  .nav a { font-size: 16px; padding: 11px 12px; }
  .app { padding: 16px 16px 60px; }
  h1 { font-size: 26px; } h2 { font-size: 20px; }
  .proc { grid-template-columns: 1fr; } .proc .acc { justify-content: flex-start; }
  .portada { grid-template-columns: 1fr; background-size: 520px; padding-top: 10px; }
  .portada h1 { font-size: 30px; }
  .pie { grid-template-columns: 1fr; }
  .btn { min-height: 44px; } .btn.chico { min-height: 36px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select { min-height: 44px; font-size: 16px; }
  .tabla { font-size: 13.5px; } .tabla th, .tabla td { padding: 7px 7px; }
  .vacio { background-size: 300px; }
}
@media print {
  .barra, .pie, .aviso, .btn, .barra-filtro, .acc, .menu { display: none !important; }
  body { background: #fff; font-size: 12.5px; } .app { max-width: none; padding: 0; }
  .hoja { break-inside: avoid; border-color: #bbb; } a { color: inherit; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } html { scroll-behavior: auto; } }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Utilidades (reemplazan estilos en línea: la CSP no los permite) ─────── */
.peq { font-size: 13px; font-family: var(--sans); } .med { font-size: 14.5px; font-family: var(--sans); }
.angosta { max-width: 440px; margin: 28px auto; } .angosta.media { max-width: 560px; margin-top: 18px; }
.al-pie { align-self: end; } .quebrar { word-break: break-all; } .w80 { width: 80%; } .w70 { width: 70%; } .w160 { width: 160px; }
.alta { min-height: 200px; } .cortas { max-height: 140px; overflow: auto; } .espaciada { margin: 12px 0; } .arriba { margin-top: 3px; }
.alinear-pie { gap: 8px; flex-wrap: wrap; align-items: flex-end; } .suelto { padding: 6px 0; }
.marcar { display: flex; gap: 8px; align-items: flex-start; color: inherit; font-size: 14.5px; font-weight: 400; font-family: var(--sans); }
.pepita[hidden], [hidden] { display: none !important; }
input[type=file] { padding: 8px 0; }

/* ── Portada: película, gráficas, demostraciones ───────────────────────── */
.ante { font-family: var(--sans); color: var(--ocre); font-weight: 600; font-size: 14px; margin: 0; letter-spacing: .01em; }
.lead { font-size: 18px; color: var(--tinta-2); max-width: 60ch; line-height: 1.5; }
.anima { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.anima.visto { opacity: 1; transform: none; }
.grafica { width: 100%; height: auto; display: block; font-family: var(--sans); overflow: visible; }
.grafica .barra-g { fill: var(--piedra); transform-origin: bottom; transform: scaleY(0); transition: transform .7s cubic-bezier(.2,.7,.2,1) var(--retraso, 0ms); }
.grafica .barra-g.h { transform-origin: left; transform: scaleX(0); }
.visto .grafica .barra-g { transform: none; }
.grafica .val { font-size: 12.5px; font-weight: 600; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.grafica .val.ocre { fill: var(--ocre); }
.grafica .eje, .grafica .etq-g { font-size: 11.5px; fill: var(--tinta-2); }
.grafica .base { stroke: var(--linea); stroke-width: 1; } .grafica .tick { stroke: var(--linea); }
.grafica .punto { fill: var(--piedra); opacity: 0; transition: opacity .5s ease var(--retraso, 0ms); } .grafica .punto.gana { fill: var(--ocre); stroke: #fff; stroke-width: 2; }
.visto .grafica .punto { opacity: 1; }
.dona { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; }
.dona svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.dona .arco-fondo { fill: none; stroke: var(--linea-2); stroke-width: 16; }
.dona .arco { fill: none; stroke-width: 16; opacity: 0; transition: opacity .5s ease var(--retraso, 0ms); }
.visto .dona .arco { opacity: 1; }
.leyenda { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 13.5px; }
.leyenda li { display: flex; gap: 8px; align-items: center; padding: 2px 0; } .leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .leyenda b { margin-left: auto; font-variant-numeric: tabular-nums; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; margin: 8px 0 18px; }
.cifras b { font-family: var(--serif); font-size: 34px; font-weight: 600; display: block; line-height: 1.1; color: var(--piedra); font-variant-numeric: tabular-nums; }
.cifras span { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); }
.peli { position: relative; background: var(--piedra-3); color: #fff; border-radius: var(--r-hoja); aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; box-shadow: 0 20px 40px -24px rgba(22,58,72,.7); }
.peli-cuadro { position: absolute; inset: 0 0 64px 0; padding: 5% 6%; display: grid; align-content: center; gap: 12px; }
.peli-cuadro.entra > * { animation: peli-entra .6s cubic-bezier(.2,.7,.2,1) both; }
.peli-cuadro.entra > *:nth-child(2) { animation-delay: .12s; } .peli-cuadro.entra > *:nth-child(3) { animation-delay: .24s; } .peli-cuadro.entra > *:nth-child(4) { animation-delay: .36s; }
@keyframes peli-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.peli h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.15; margin: 0; }
.peli p { font-family: var(--sans); font-size: clamp(14px, 1.5vw, 19px); margin: 0; color: rgba(255,255,255,.85); }
.peli .eti { display: inline-block; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ocre); letter-spacing: .02em; }
.peli .ficha { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 12px 14px; font-family: var(--sans); font-size: clamp(12px, 1.3vw, 15px); line-height: 1.5; }
.peli .ficha b { color: #fff; } .peli .ficha .cita { color: rgba(255,255,255,.7); border-left-color: var(--ocre); }
.peli .lista-peli { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.peli .lista-peli li { font-family: var(--sans); font-size: clamp(13px, 1.4vw, 17px); padding-left: 26px; position: relative; }
.peli .lista-peli li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ocre); }
.peli .lista-peli li.si::before { background: var(--ocre); }
.peli .num { font-family: var(--serif); font-size: clamp(40px, 6vw, 84px); font-weight: 600; line-height: 1; color: var(--ocre); }
.peli .pila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.peli .pila > div { background: rgba(255,255,255,.08); border-radius: 6px; padding: 10px 12px; font-family: var(--sans); font-size: clamp(12px, 1.3vw, 15px); }
.peli .pila b { display: block; color: var(--ocre); font-size: clamp(16px, 2vw, 24px); font-family: var(--serif); }
.peli-sub { position: absolute; left: 0; right: 0; bottom: 42px; text-align: center; padding: 0 6%; font-family: var(--sans); font-size: clamp(13px, 1.4vw, 17px); }
.peli-sub:not(:empty) { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.peli-ctl { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: rgba(0,0,0,.25); }
.peli-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ocre); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.peli-btn svg { width: 20px; height: 20px; fill: currentColor; }
.peli-barra { flex: 1; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; } .peli-barra i { display: block; height: 100%; width: 0; background: var(--ocre); }
.peli-n { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.paso-demo { display: grid; grid-template-columns: 44px 1fr; gap: 14px; margin: 26px 0; }
.paso-n { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ocre); color: var(--ocre); font: 600 16px/32px var(--sans); text-align: center; }
.paso-c > h2 { margin-top: 2px; }
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.demos .hoja { margin: 0; display: grid; gap: 6px; align-content: start; }
.demos .hoja .t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.franja { background: var(--piedra); color: #fff; margin: 34px -20px; padding: 36px 20px; }
.franja .dentro { max-width: 1000px; margin: 0 auto; }
.franja h2 { color: #fff; margin-top: 0; } .franja .lead { color: rgba(255,255,255,.8); } .franja .ante { color: var(--ocre); }
.franja a { color: #fff; }
@media (max-width: 760px) { .dona { grid-template-columns: 110px 1fr; } .dona svg { width: 110px; height: 110px; } .peli .pila { grid-template-columns: 1fr; } .paso-demo { grid-template-columns: 32px 1fr; gap: 10px; } .paso-n { width: 28px; height: 28px; font-size: 13px; line-height: 24px; } .franja { margin: 26px -16px; padding: 28px 16px; } }
@media (prefers-reduced-motion: reduce) { .anima { opacity: 1; transform: none; transition: none; } .grafica .barra-g, .grafica .punto, .dona .arco { transform: none; opacity: 1; transition: none; } .peli-cuadro.entra > * { animation: none; } }

/* ── Portada nueva ─────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding: 30px 0 18px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.5px; margin: 10px 0 16px; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--ocre); }
.hero .cta { margin: 22px 0 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-peli { width: 100%; }
.bloque { padding: 34px 0 6px; }
.bloque > h2 { font-size: clamp(24px, 3vw, 34px); max-width: 30ch; margin: 6px 0 14px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin: 12px 0; }
.dos .hoja { margin: 0; } .dos p { max-width: 52ch; }
.pasos-l { position: relative; display: grid; gap: 22px; padding-left: 56px; margin: 18px 0; }
.linea-pasos { position: absolute; left: 21px; top: 6px; bottom: 6px; width: 4px; height: calc(100% - 12px); }
.linea-pasos path { stroke: var(--ocre); stroke-width: 2; fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s ease .2s; }
.visto .linea-pasos path { stroke-dashoffset: 0; }
.paso-l { position: relative; }
.paso-l-n { position: absolute; left: -56px; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--papel); border: 2px solid var(--ocre); color: var(--ocre); font: 600 18px/40px var(--sans); text-align: center; }
.paso-l h3 { margin: 6px 0 4px; font-size: 19px; } .paso-l p { margin: 0; max-width: 60ch; }
.marco { margin: 24px 0 0; } .marco img { width: 100%; height: auto; display: block; border: 1px solid var(--linea); border-radius: var(--r-hoja); box-shadow: 0 24px 50px -30px rgba(31,75,92,.45); }
.marco figcaption { margin-top: 8px; }
.demo-card { text-decoration: none; color: var(--tinta); transition: border-color var(--paso), transform var(--paso); }
.demo-card:hover { border-color: var(--ocre); transform: translateY(-2px); color: var(--tinta); }
.franja .demo-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; } .franja .demo-card .peq { color: rgba(255,255,255,.78); } .franja .demo-card b { color: #fff; }
.ocre-t { color: var(--ocre); font-weight: 600; }
.calc label { margin: 8px 0; } .calc-r { font-size: 17px; margin-top: 12px; } .calc-r b { color: var(--piedra); font-family: var(--serif); font-size: 24px; }
.planes-p { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 14px; align-items: stretch; }
.planes-p .plan { display: grid; align-content: start; gap: 4px; position: relative; } .planes-p .etq { position: absolute; top: 12px; right: 12px; }
.faq { border-top: 1px solid var(--linea); padding: 12px 0; } .faq summary { font-family: var(--serif); font-size: 17px; color: var(--tinta); font-weight: 600; } .faq p { margin: 8px 0 0; max-width: 70ch; }
.solo-peli { margin: 0; background: var(--piedra-3); } .peli-lienzo { width: 100vw; height: 100vh; } .peli-lienzo .peli { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 22px; } .dos { grid-template-columns: 1fr; } .planes-p { grid-template-columns: 1fr; } .pasos-l { padding-left: 46px; } .paso-l-n { left: -46px; width: 36px; height: 36px; font-size: 15px; line-height: 32px; } .linea-pasos { left: 17px; } }
/* La película dentro del hero es más chica: tipografía y márgenes a su medida; el subtítulo no pisa el cuadro. */
.peli-cuadro { inset: 0 0 92px 0; gap: 10px; }
.hero-peli .peli h3 { font-size: clamp(18px, 2.1vw, 27px); } .hero-peli .peli p { font-size: clamp(13px, 1.1vw, 15px); } .hero-peli .peli .num { font-size: clamp(30px, 4vw, 54px); }
.hero-peli .peli .ficha, .hero-peli .peli .pila > div, .hero-peli .peli .lista-peli li { font-size: clamp(12px, 1vw, 14px); } .hero-peli .peli .pila b { font-size: clamp(15px, 1.5vw, 20px); }
.peli-sub { bottom: 50px; font-size: clamp(12.5px, 1.2vw, 16px); }
@media (max-width: 860px) { .peli-cuadro { inset: 0 0 84px 0; padding: 5% 5%; } .hero-peli .peli h3 { font-size: 18px; } .hero-peli .peli .num { font-size: 30px; } }

.sin-animar .anima, .sin-animar .grafica .barra-g, .sin-animar .grafica .punto, .sin-animar .dona .arco, .sin-animar .linea-pasos path { transition: none !important; }
.sin-animar .peli-cuadro.entra > * { animation: none !important; }

/* ── Portada v2: lienzo blanco, primer pantallazo con buscador y procesos reales ───────── */
body { background: #fff; }
.app { max-width: 1080px; }
.hero2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: start; padding: 34px 0 10px; }
.hero2 h1 { font-size: clamp(30px, 3.9vw, 46px); line-height: 1.12; letter-spacing: -.4px; margin: 10px 0 14px; font-weight: 600; }
.hero2 h1 em { font-style: normal; color: var(--ocre); }
.buscar { display: flex; gap: 8px; margin: 18px 0 10px; }
.buscar input { flex: 1; min-height: 48px; font-size: 16px; border-width: 2px; border-color: var(--piedra); }
.buscar .btn { min-height: 48px; white-space: nowrap; }
#ejemplos .chip { font-size: 13px; padding: 4px 11px; background: #fff; }
#ejemplos .chip:hover { border-color: var(--piedra); color: var(--piedra); }
.hero2-lista { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 14px 16px; min-height: 320px; }
.lista-titulo { margin: 0 0 6px; }
.procesos-vivos > li { padding: 11px 0; border-top: 1px solid var(--linea); }
.procesos-vivos > li:first-child { border-top: 0; }
.pv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.pv .t { font-size: 15.5px; line-height: 1.3; font-weight: 600; margin: 0 0 2px; }
.pv .m { font-family: var(--sans); font-size: 13px; color: var(--tinta-2); margin: 1px 0; line-height: 1.5; }
.pv .m b { color: var(--tinta); font-size: 14px; }
.peli-marco { max-width: 860px; margin: 8px auto 0; }
.bloque:nth-of-type(even) { background: var(--papel); margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.cifras { padding: 10px 0 0; }
@media (max-width: 860px) { .hero2 { grid-template-columns: 1fr; gap: 18px; } .buscar { flex-direction: column; } .pv { grid-template-columns: 1fr; } .bloque:nth-of-type(even) { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }

/* ── Más contraste y empuje (lo que tienen las portadas que retienen): botón de acción vivo, titular con peso, lista levantada ── */
:root { --accion: #b8540f; --accion-3: #9a4409; }
.btn { background: var(--accion); border-color: var(--accion); font-size: 15px; font-weight: 700; }
.btn:hover { background: var(--accion-3); border-color: var(--accion-3); }
.btn.sec { background: transparent; color: var(--piedra); border-color: var(--piedra); } .btn.sec:hover { background: var(--piedra-2); }
.btn.peligro { background: transparent; color: var(--alerta); border-color: var(--alerta); }
.hero2 h1 { font-weight: 700; font-size: clamp(32px, 4.2vw, 50px); }
.hero2 h1 em { color: var(--accion); }
.hero2-lista { background: #fff; box-shadow: 0 18px 40px -28px rgba(31,75,92,.45); }
.hero2 .ante { color: var(--accion); }
.confianza { display: flex; gap: 8px 14px; flex-wrap: wrap; margin: 12px 0 4px; font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); }
.confianza span { display: inline-flex; align-items: center; gap: 6px; } .confianza b { color: var(--tinta); }
.confianza i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.etq.ok { background: var(--ok-2); color: var(--ok); }
@media (max-width: 860px) { .hero2 h1 { font-size: 30px; } }
.hero2-lista { min-height: 380px; }
.bloque:nth-of-type(even) { background: #fff; }
.bloque.gris { background: var(--papel); margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }

/* ── Revisión del diseñador: navegación pública, botón en piedra, ocre oscuro en etiquetas, lead en sans, pasos a dos columnas, casos ── */
:root { --accion: #1f4b5c; --accion-3: #163a48; --ocre-t: #9a5f1c; }
.ante, .hero2 .ante, .grafica .val.ocre, .ocre-t { color: var(--ocre-t); }
.hero2 h1 em { color: var(--ocre); }
.hero2 h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; }
.hero2 .lead { font-family: var(--sans); font-size: 19px; color: var(--tinta); line-height: 1.45; max-width: 46ch; }
.nav-publico { gap: 4px; align-items: center; }
.nav-publico .nav-cta { background: var(--ocre); border-color: var(--ocre); color: #fff; margin-left: 6px; padding: 6px 12px; min-height: 34px; }
.nav-publico .nav-cta:hover { background: #a6671f; border-color: #a6671f; color: #fff; }
.casos { margin: 6px 0 10px; }
.casos-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.caso { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-hoja); text-decoration: none; color: var(--tinta); background: #fff; transition: border-color var(--paso), transform var(--paso); }
.caso:hover { border-color: var(--piedra); transform: translateY(-2px); color: var(--tinta); }
.caso b { font-family: var(--serif); font-size: 17px; } .caso span { font-family: var(--sans); font-size: 14px; color: var(--tinta-2); }
.pasos-dos { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; }
.pasos-dos .marco { margin: 0; }
.calc-marco { max-width: 560px; margin: 14px 0; }
.calc-marco .hoja { margin: 0; }
.grafica .barra-g, .grafica .barra-g.h, .dona .arco { transform-box: fill-box; }
.grafica .etq-g { font-size: 12.5px; } .grafica .val { font-size: 13px; } .grafica .eje { font-size: 12.5px; }
.pv .m, .procesos-vivos .m { font-size: 14px; }
.peli-ctl { background: rgba(0,0,0,.35); } .peli-btn { background: var(--ocre); }
@media (max-width: 860px) { .casos-g { grid-template-columns: 1fr; } .pasos-dos { grid-template-columns: 1fr; } .nav-publico .nav-cta { margin: 6px 0 0; } }
.selmul { position: relative; } .selmul-fichas { margin: 0 0 6px; } .selmul-fichas .chip button { margin-left: 2px; }
.selmul-sug { position: absolute; left: 0; right: 0; z-index: 4; box-shadow: 0 10px 24px -14px rgba(28,35,40,.4); }

/* ── Gestión con sesión: menú lateral y densidad (patrón del software de gestión de San Pablo, con la marca de Atalaya) ── */
.gestion { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.columna { min-width: 0; display: flex; flex-direction: column; }
.titulo-vista { display: none; }
.lateral { background: #fff; border-right: 1px solid var(--linea-2); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral[hidden] { display: none; }
.marca-l { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--linea-2); font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--piedra); text-decoration: none; }
.menu-l { padding: 8px 0 16px; flex: 1; font-family: var(--sans); }
.menu-l .grupo { padding: 14px 16px 4px; font-size: 11px; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.menu-l a { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; color: var(--tinta); text-decoration: none; font-size: 14px; }
.menu-l a:hover { background: var(--linea-2); color: var(--tinta); }
.menu-l a svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menu-l a[aria-current="page"] { background: var(--piedra-2); font-weight: 600; color: var(--piedra-3); }
.menu-l a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--ocre); }
.menu-l a[aria-current="page"] svg { stroke: var(--piedra); }
.insignia { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--ocre); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.insignia[hidden] { display: none !important; }
.pie-lateral { border-top: 1px solid var(--linea-2); padding: 12px 16px; font-family: var(--sans); font-size: 12.5px; color: var(--tinta-2); display: grid; gap: 6px; }
.pie-lateral span:first-child { color: var(--tinta); font-weight: 600; font-size: 13px; }
body.con-sesion .gestion { grid-template-columns: 236px minmax(0, 1fr); }
body.con-sesion .barra { background: #fff; color: var(--tinta); border-bottom: 1px solid var(--linea-2); height: 50px; padding: 0 18px; gap: 14px; }
body.con-sesion .barra .marca { display: none; }
body.con-sesion .titulo-vista { display: block; font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--tinta); }
body.con-sesion .menu { color: var(--tinta); border-color: var(--linea); }
body.con-sesion .app { max-width: none; padding: 16px 22px 48px; font-size: 15px; }
body.con-sesion h1 { font-size: 22px; margin: 2px 0 10px; }
body.con-sesion h2 { font-size: 18px; margin: 18px 0 8px; }
body.con-sesion h3 { font-size: 15.5px; margin: 10px 0 6px; }
body.con-sesion .hoja { padding: 12px 14px; margin: 8px 0; border-color: var(--linea-2); }
body.con-sesion .col { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
body.con-sesion .campo { margin: 6px 0; }
body.con-sesion input[type=text], body.con-sesion input[type=email], body.con-sesion input[type=password], body.con-sesion input[type=number], body.con-sesion input[type=search], body.con-sesion select, body.con-sesion textarea { min-height: 36px; padding: 6px 10px; font-size: 14px; }
body.con-sesion label { font-size: 12.5px; margin-bottom: 3px; }
body.con-sesion .btn { min-height: 34px; padding: 6px 12px; font-size: 14px; } body.con-sesion .btn.chico { min-height: 28px; padding: 3px 9px; font-size: 13px; }
body.con-sesion .tabla { font-size: 13.5px; } body.con-sesion .tabla th, body.con-sesion .tabla td { padding: 6px 8px; }
body.con-sesion .lista > li { padding: 10px 0; }
body.con-sesion .proc .t { font-size: 15.5px; } body.con-sesion .proc .m { font-size: 13px; line-height: 1.5; }
body.con-sesion .senal { padding: 7px 10px 7px 12px; font-size: 13.5px; margin: 5px 0; }
body.con-sesion .pie { font-size: 12.5px; padding: 12px 22px 24px; max-width: none; }
body.con-sesion .vacio { padding: 18px 16px; }
body.con-sesion .barra-filtro { margin: 6px 0 10px; }
body.con-sesion .dim.ui, body.con-sesion .peq { font-size: 12.5px; }
@media (max-width: 860px) {
  body.con-sesion .gestion { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  .lateral.abierto { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  body.con-sesion .app { padding: 12px 14px 40px; }
}
body.con-sesion .app { max-width: none !important; margin: 0 !important; padding: 16px 22px 48px !important; }
body.con-sesion .angosta { margin-left: 0; }
body.con-sesion .app > h1:first-child { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* el título ya va en la barra superior; queda para lectores de pantalla */

/* ── Otras fuentes (08/11): planeado, remates oficiales, prospección ── */
.proc .m details { display: inline; } .proc .m details summary { display: inline; cursor: pointer; color: var(--piedra); } .proc .m details p { margin: 6px 0 0; }
.barra-filtro select, .barra-filtro input[type=search] { min-width: 0; }

/* ── Paleta viva (08/11, Johany: «más llamativa, más viva»): el mismo petróleo y ocre de la marca, saturados; naranja de sol en
   el titular, amarillo para lo que está pasando ahora, banda oscura en el primer pantallazo. Contrastes medidos: piedra/blanco 7,7;
   naranja-t/blanco 5,0; amarillo/tinta 12,9; naranja grande sobre la banda 4,8 (solo titular). ── */
:root { --piedra: #0e5a76; --piedra-2: #dcecf3; --piedra-3: #083d52; --ocre: #e8771e; --ocre-t: #b4530c; --ocre-2: #fdebd9; --accion: #0e5a76; --accion-3: #083d52;
  --banda: #082f3f; --amarillo: #ffd166; --verde-vivo: #1f9d6a; --coral: #e4572e; --papel: #f8f5ee; }
.nav-publico .nav-cta { background: var(--ocre-t); border-color: var(--ocre-t); } .nav-publico .nav-cta:hover { background: #9a4409; border-color: #9a4409; }
.etq.amarilla { background: var(--amarillo); color: var(--tinta); }
/* Cinta en vivo */
.cinta { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 7px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-family: var(--sans); font-size: 13.5px; overflow: hidden; }
.cinta-eti { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--coral); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; white-space: nowrap; flex: none; }
.cinta-eti i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
.cinta-pista { flex: 1; overflow: hidden; }
.cinta-tren { display: inline-flex; gap: 28px; white-space: nowrap; will-change: transform; }
.cinta-tren.rueda { animation: rodar 70s linear infinite; }
.cinta:hover .cinta-tren.rueda { animation-play-state: paused; }
@keyframes rodar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cinta-item { color: var(--tinta); text-decoration: none; } .cinta-item:hover { color: var(--piedra); text-decoration: underline; }
.cinta-item b { font-weight: 600; } .cinta-hace { color: var(--ocre-t); font-weight: 700; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .cinta-tren.rueda { animation: none; } .cinta-eti i { animation: none; } }
.sin-animar .cinta-tren.rueda, .sin-animar .cinta-eti i { animation: none !important; }
/* Primer pantallazo en banda oscura */
.hero2.banda { background: var(--banda) url("/fondo-niveles.svg") right -40px top -60px / 760px no-repeat; color: #fff; margin: 0 -20px; padding: 36px 20px 30px; border-radius: 0; }
.hero2.banda h1, .hero2.banda .lead { color: #fff; } .hero2.banda h1 em { color: var(--ocre); } .hero2.banda .ante { color: var(--amarillo); }
.hero2.banda .ui a { color: #fff; } .hero2.banda .confianza { color: rgba(255,255,255,.85); } .hero2.banda .confianza b { color: #fff; } .hero2.banda .confianza i { background: var(--verde-vivo); }
.hero2.banda .buscar input { border-color: #fff; background: #fff; color: var(--tinta); } .hero2.banda .buscar .btn { background: var(--ocre-t); border-color: var(--ocre-t); } .hero2.banda .buscar .btn:hover { background: #9a4409; border-color: #9a4409; }
.hero2.banda #ejemplos .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; } .hero2.banda #ejemplos .chip:hover { background: #fff; color: var(--piedra-3); border-color: #fff; }
.hero2.banda .hero2-lista { box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); border: 0; }
.hero2.banda .etq.ok { background: #d9f3e5; color: #1b5e3c; }
/* Esta semana: tablero de noticias reales */
.semana { margin: 22px 0 8px; }
.semana-cab { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.semana-cab h2 { margin: 6px 0 0; }
.semana-cifras { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); }
.semana-cifras b { display: block; font-size: 24px; color: var(--piedra); font-variant-numeric: tabular-nums; line-height: 1.1; }
.semana-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 10px; }
.noticia { display: grid; align-content: start; gap: 4px; padding: 16px 18px 18px; border-radius: var(--r-hoja); text-decoration: none; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--piedra); transition: transform var(--paso), box-shadow var(--paso), border-color var(--paso); min-height: 150px; }
.noticia:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -24px rgba(8,47,63,.55); color: var(--tinta); }
.noticia.grande { grid-column: span 2; grid-row: span 2; background: var(--piedra-3); color: #fff; border-color: var(--piedra-3); border-top-color: var(--ocre); }
.noticia.grande:hover { color: #fff; }
.noticia.grande .noticia-t { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; } .noticia.grande .noticia-d, .noticia.grande .noticia-eti { color: rgba(255,255,255,.82); } .noticia.grande .noticia-cifra { color: var(--amarillo); font-size: clamp(30px, 3.4vw, 44px); }
.noticia-eti { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ocre-t); }
.noticia-cifra { font-family: var(--sans); font-size: 26px; font-weight: 700; color: var(--piedra); line-height: 1.1; font-variant-numeric: tabular-nums; }
.noticia-t { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.noticia-d { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.noticia.remate { border-top-color: var(--amarillo); } .noticia.cierre { border-top-color: var(--verde-vivo); } .noticia.cierran { border-top-color: var(--coral); } .noticia.sector { border-top-color: var(--ocre); } .noticia.planeado { border-top-color: var(--piedra-3); }
@media (max-width: 860px) { .hero2.banda { margin: 0 -16px; padding: 26px 16px 22px; } .semana-g { grid-template-columns: 1fr; } .noticia.grande { grid-column: auto; grid-row: auto; } .semana-cab { grid-template-columns: 1fr; } .cinta { font-size: 13px; } }
.hero2.banda .hero2-lista { color: var(--tinta); } .hero2.banda .hero2-lista .pv .t { color: var(--tinta); } .hero2.banda .hero2-lista .lista-titulo { color: var(--tinta); } .hero2.banda .hero2-lista a { color: var(--piedra); } .hero2.banda .hero2-lista .btn.sec { color: var(--piedra); border-color: var(--piedra); }
.semana-g { grid-template-columns: repeat(4, 1fr); } .noticia.ancha { grid-column: span 2; }
@media (max-width: 860px) { .semana-g { grid-template-columns: 1fr; } .noticia.ancha { grid-column: auto; } }
.codigo-grande { font-family: var(--sans); font-size: 22px; letter-spacing: .08em; background: #fff; padding: 2px 8px; border-radius: var(--r-boton); border: 1px solid var(--linea); }

/* ── Modo aplicación (08/11): pestañas inferiores en celular con sesión, aviso de instalación, pantalla completa cuando está instalada ── */
.pestanas { display: none; }
@media (max-width: 860px) {
  body.con-sesion .pestanas { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); font-family: var(--sans); }
  body.con-sesion .pestanas[hidden] { display: none; }
  .pestanas a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; color: var(--tinta-2); text-decoration: none; font-size: 11px; font-weight: 600; min-height: 54px; }
  .pestanas a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pestanas a[aria-current="page"] { color: var(--piedra); } .pestanas a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ocre); }
  .pestanas .insignia { position: absolute; top: 4px; right: calc(50% - 22px); margin: 0; }
  body.con-sesion .app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* al desplazarse a un elemento (foco, ancla, scrollIntoView) no lo deje debajo de la barra de pestañas (simulacro 08/11: «Guardar» de la oferta quedaba tapado) */
  html:has(body.con-sesion) { scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.con-sesion .pie { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.instalar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; background: var(--banda); color: #fff; padding: 12px 14px; border-radius: var(--r-hoja); box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); font-family: var(--sans); font-size: 13.5px; }
.instalar[hidden] { display: none; } .instalar div { display: grid; gap: 2px; } .instalar b { font-family: var(--serif); font-size: 15px; } .instalar .torre { width: 14px; height: 22px; }
.instalar .btn.sec { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
body.con-sesion .instalar { bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (max-width: 480px) { .instalar { grid-template-columns: auto 1fr; } .instalar .btn { grid-column: span 1; } }
/* Instalada: la barra superior respeta la muesca y no hay nada que recuerde al navegador */
.modo-app .barra { padding-top: env(safe-area-inset-top); height: calc(50px + env(safe-area-inset-top)); }
.modo-app .lateral { top: 0; }
.modo-app .instalar { display: none; }

/* ── Portada v3 (08/11, segunda vuelta de diseño): el mapa manda, 45 palabras, fila del día, la semana en una cifra ── */
.cinta { display: none; }
.hero3 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; background: var(--banda) url("/fondo-niveles.svg") right -60px top -80px / 820px no-repeat; color: #fff; margin: 0 -20px; padding: 44px 40px 36px; }
.hero3 .ante { color: var(--amarillo); margin: 0 0 10px; }
.hero3 h1 { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -.6px; margin: 0 0 18px; font-weight: 700; color: #fff; }
.hero3 h1 em { font-style: normal; color: var(--ocre); }
.hero3 .lead { font-family: var(--sans); font-size: 19px; line-height: 1.4; color: rgba(255,255,255,.88); margin: 0 0 20px; max-width: 34ch; }
.hero3 .buscar { margin: 0 0 10px; } .hero3 .buscar input { min-height: 56px; font-size: 17px; border: 0; background: #fff; color: var(--tinta); } .hero3 .buscar .btn { min-height: 56px; background: var(--ocre-t); border-color: var(--ocre-t); } .hero3 .buscar .btn:hover { background: #9a4409; border-color: #9a4409; }
.hero3 #ejemplos { align-items: center; } .hero3 #ejemplos .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; } .hero3 #ejemplos .chip:hover { background: #fff; color: var(--piedra-3); }
.cuenta-viva { font-family: var(--sans); font-size: 13.5px; color: var(--amarillo); margin-left: 6px; }
.hero3 .casos-l { margin: 14px 0 0; color: rgba(255,255,255,.75); } .hero3 .casos-l a { color: #fff; }
.hero3-mapa { margin: 0; position: relative; display: grid; gap: 10px; justify-items: center; }
.mapa-lienzo { position: relative; width: 100%; max-width: 520px; }
.mapa-lienzo svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa-lienzo .dep { fill: #114c66; stroke: var(--banda); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--paso), transform var(--paso); cursor: pointer; }
.mapa-lienzo .dep.n1 { fill: #15607f; } .mapa-lienzo .dep.n2 { fill: #1e7599; } .mapa-lienzo .dep.n3 { fill: #2f8db3; } .mapa-lienzo .dep.n4 { fill: #4aa7cb; } .mapa-lienzo .dep.n5 { fill: #7fc6df; }
.mapa-lienzo .dep:hover { fill: var(--amarillo); } .mapa-lienzo .dep.elegido { fill: var(--ocre); stroke: #fff; }
.pulso .centro { fill: var(--amarillo); } .pulso .onda { fill: none; stroke: var(--amarillo); stroke-width: 2; opacity: .9; transform-box: fill-box; transform-origin: center; animation: onda 1.9s ease-out infinite; animation-delay: var(--retraso, 0ms); }
@keyframes onda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulso .onda { animation: none; opacity: .5; } } .sin-animar .pulso .onda { animation: none !important; }
.mapa-eti { position: absolute; z-index: 3; pointer-events: none; background: #fff; color: var(--tinta); font-family: var(--sans); font-size: 13px; line-height: 1.4; padding: 6px 9px; border-radius: var(--r-boton); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); min-width: 150px; }
.mapa-pie { font-family: var(--sans); font-size: 13.5px; color: rgba(255,255,255,.8); text-align: center; line-height: 1.6; } .mapa-pie b { color: #fff; }
.mapa-pie .ult { display: inline-flex; align-items: center; gap: 6px; color: var(--amarillo); } .mapa-pie .ult i { width: 7px; height: 7px; border-radius: 50%; background: var(--amarillo); animation: pulso 1.6s ease-in-out infinite; }
.hoy { padding: 26px 0 8px; } .hoy-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 12px; } .hoy-cab h2 { margin: 0; font-size: 26px; } .hoy-cab p { margin: 0; color: var(--tinta-2); }
.hoy-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tarjeta-hoy { display: grid; align-content: start; gap: 6px; padding: 16px 16px 14px; border: 1px solid var(--linea); border-radius: var(--r-hoja); background: #fff; color: var(--tinta); text-decoration: none; transition: transform var(--paso), border-color var(--paso); min-height: 150px; }
.tarjeta-hoy:hover { transform: translateY(-3px); border-color: var(--piedra); color: var(--tinta); }
.tarjeta-hoy .t { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.3; } .tarjeta-hoy .m { font-family: var(--sans); font-size: 13px; color: var(--tinta-2); } .tarjeta-hoy .v { font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--piedra); } .tarjeta-hoy .c { font-family: var(--sans); font-size: 13px; color: var(--tinta-2); }
.tarjeta-hoy.urgente .c { color: var(--alerta); font-weight: 600; }
.semana2 { background: var(--papel); margin: 28px -20px 0; padding: 56px 40px; }
.semana2-g { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; max-width: 1120px; margin: 0 auto; }
.semana2 .ante { margin: 0 0 6px; }
.cifra-88 { font-family: var(--serif); font-size: clamp(48px, 7vw, 88px); line-height: 1; font-weight: 700; color: var(--piedra); letter-spacing: -1px; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.semana2-grande h2 { font-size: clamp(20px, 2vw, 26px); margin: 0 0 8px; line-height: 1.25; }
.semana2-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-family: var(--sans); font-size: 15px; color: var(--tinta-2); }
.semana2-lista li b { font-size: 22px; color: var(--piedra); font-family: var(--serif); margin-right: 6px; } .semana2-lista a { color: var(--tinta); text-decoration: none; display: block; } .semana2-lista a:hover b { color: var(--ocre-t); } .semana2-lista a span { display: block; font-size: 13.5px; color: var(--tinta-2); margin-top: 2px; }
.como3 h2 { max-width: 30ch; }
.ficha-grande { position: relative; max-width: 960px; margin: 14px auto 10px; }
.ficha-grande img { width: 100%; height: auto; display: block; border: 1px solid var(--linea); border-radius: var(--r-hoja); box-shadow: 0 30px 60px -40px rgba(8,47,63,.6); }
.llamadas { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; font-family: var(--sans); font-size: 14px; color: var(--tinta-2); }
.llamadas li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } .llamadas b { width: 28px; height: 28px; border-radius: 50%; background: var(--ocre); color: #fff; display: grid; place-items: center; font-size: 14px; }
.ficha-grande::after { content: ""; position: absolute; pointer-events: none; border: 2px solid transparent; border-radius: 4px; transition: border-color var(--paso); }
.ficha-grande:has([data-pos=a]:hover)::after { border-color: var(--ocre); left: 2%; top: 20%; width: 60%; height: 10%; } .ficha-grande:has([data-pos=b]:hover)::after { border-color: var(--ocre); left: 2%; top: 44%; width: 46%; height: 30%; } .ficha-grande:has([data-pos=c]:hover)::after { border-color: var(--ocre); left: 50%; top: 44%; width: 48%; height: 30%; }
.peli-marco { margin-top: 28px; }
.franja .cierre-g { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; margin-top: 12px; }
.demos3 { display: grid; gap: 10px; } .demos3 .demo-card { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-hoja); color: #fff; text-decoration: none; } .demos3 .demo-card .t { font-family: var(--serif); font-size: 15.5px; font-weight: 600; } .demos3 .demo-card:hover { border-color: var(--amarillo); }
.ancha-g { margin: 14px 0; } .ancha-g .grafica { width: 100%; height: auto; }
.siete-cinco { display: grid; grid-template-columns: 7fr 5fr; gap: 14px; } .siete-cinco .hoja { margin: 0; }
.calc2 label { display: grid; gap: 4px; margin: 10px 0; } .calc2 input[type=range] { width: 100%; accent-color: var(--ocre-t); }
.bloque { padding: 56px 0 24px; } .bloque > h2 { font-size: clamp(26px, 3vw, 40px); max-width: 26ch; }
@media (max-width: 860px) {
  .hero3 { grid-template-columns: 1fr; gap: 22px; margin: 0 -16px; padding: 28px 16px 24px; } .hero3 h1 { font-size: 36px; } .hero3 .lead { font-size: 17px; }
  .mapa-lienzo { max-width: 360px; } .hoy-fila { grid-template-columns: 1fr; } .semana2 { margin: 20px -16px 0; padding: 36px 16px; } .semana2-g { grid-template-columns: 1fr; gap: 22px; }
  .llamadas { grid-template-columns: 1fr; } .franja .cierre-g, .siete-cinco { grid-template-columns: 1fr; } .bloque { padding: 40px 0 16px; }
}

/* ── Tamaños para el dedo (08/11): en pantallas táctiles o angostas, todo lo que se toca mide al menos 44 px de alto (Apple y Google),
   los botones chicos 40 y los chips 38; en escritorio con ratón se conserva la densidad del software de gestión. ── */
@media (pointer: coarse), (max-width: 860px) {
  .btn, button:not(.peli-btn):not([data-quitar]):not(.chip), a.btn, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]), select, textarea, .buscar input, .buscar .btn { min-height: 44px !important; }
  .btn.chico, a.btn.chico, button.chico { min-height: 40px !important; padding-top: 8px; padding-bottom: 8px; }
  .chip, #ejemplos .chip, label.chip { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  #menu.menu { min-height: 40px; } .pie-lateral .btn { min-height: 40px !important; } .barra-filtro select, .barra-filtro input[type=search] { min-height: 44px !important; }
  body.con-sesion .app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]), body.con-sesion .app select { min-height: 44px !important; }
  .selmul-fichas .chip button[data-quitar] { min-width: 28px; min-height: 28px; }
}

/* ── Menú a la izquierda (Johany, 08/11): el botón «Menú» va antes de la marca y el panel se despliega desde el lado izquierdo, con y sin sesión ── */
.menu { margin-left: 0; order: -1; margin-right: 6px; }
@media (max-width: 860px) {
  .nav-publico { display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 30; background: var(--banda); padding: calc(16px + env(safe-area-inset-top)) 14px 20px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; overflow-y: auto; }
  .nav-publico.abierto { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .nav-publico a { padding: 12px 12px; font-size: 16px; min-height: 44px; display: flex; align-items: center; border-radius: var(--r-boton); }
  .nav-publico .nav-cta { margin: 10px 0 0; justify-content: center; }
  .nav-publico[hidden] { display: none !important; }
  .btn.chico, a.btn.chico, button.chico { min-height: 44px !important; }
}
.peli-voz { margin-left: 8px; opacity: .75; } .peli-voz.activa { opacity: 1; background: var(--amarillo); color: var(--tinta); } .peli-voz .ondas { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
/* El panel público heredaba `right: 0` y `margin-left: auto` del menú viejo: con `left: 0` y ancho fijo, el margen automático lo corría 118 px. */
@media (max-width: 860px) { .nav-publico { right: auto !important; margin: 0 !important; } .menu { display: inline-flex; } }
/* ── Explorar (08/11): panel de rastreo manual ── */
.explorar-f .fila .ancho { flex: 1; min-width: 0; } .explorar-f .col { margin-top: 10px; } .explorar-f .campo { margin: 0; }

/* ── Oteo (08/11): el nombre definitivo y su marca, el ojo que otea (iris naranja). El lema va junto a la marca en escritorio. ── */
.torre { width: 22px; height: 14px; border-radius: 50% / 50%; clip-path: none; background: radial-gradient(circle at 50% 50%, var(--ocre) 0 3.2px, var(--banda) 3.4px 5.4px, #f8f5ee 5.6px); }
.marca .lema { font-family: var(--sans); font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,.75); margin-left: 8px; letter-spacing: 0; }
@media (max-width: 860px) { .marca .lema { display: none; } }
body.con-sesion .marca .lema { display: none; }
/* De borde a borde de verdad: la banda del primer pantallazo y la de la semana salen de la columna de 1080 px en pantallas anchas. */
@media (min-width: 861px) { .hero3, .semana2 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(40px, calc(50vw - 540px)); padding-right: max(40px, calc(50vw - 540px)); } }

/* ── Marca definitiva (Johany, 08/11): concepto 2, la palabra con la O partida. El logotipo va en vector; la torre y el ojo se retiran. ── */
.marca img.logo { height: 30px; width: auto; display: block; } .marca-l img.logo { height: 26px; width: auto; display: block; }
.marca { gap: 0; } .marca .lema { margin-left: 12px; }
.marca-l { padding: 14px 16px 10px; } .torre { display: none; }
.instalar img { width: 28px; height: 28px; border-radius: 6px; }

/* ── Demostración en nueve líneas (08/11): qué pasó, qué habría ganado, veredicto con semáforo, pruebas plegadas, botón. ── */
.demo-hero { border-left: 4px solid var(--ocre); padding: 4px 0 4px 18px; margin: 6px 0 18px; }
.demo-hero h1 { margin: 6px 0 10px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
.demo-titular { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25; margin: 0 0 6px; color: var(--tinta); }
.demo-detalle { font-family: var(--sans); font-size: 15px; color: var(--tinta-2, #4a5560); margin: 0 0 12px; max-width: 70ch; }
.demo-ganancia { font-size: 18px; line-height: 1.4; margin: 0 0 12px; max-width: 70ch; }
.demo-veredicto { font-family: var(--sans); font-size: 16px; line-height: 1.4; padding: 12px 14px; border-radius: var(--r-boton); margin: 0 0 14px; max-width: 76ch; border-left: 4px solid; }
.demo-veredicto.si { background: var(--ok-2); border-color: var(--ok); } .demo-veredicto.no { background: var(--alerta-2); border-color: var(--alerta); } .demo-veredicto.revisar { background: var(--ojo-2); border-color: var(--ojo); }
.demo-cta { margin: 0; } .demo-cta .btn { white-space: normal; text-align: left; line-height: 1.3; }
details.prueba { border: 1px solid var(--linea); border-radius: var(--r-hoja); margin: 10px 0; background: var(--hoja); }
details.prueba > summary { cursor: pointer; padding: 12px 16px; font-family: var(--serif); font-weight: 600; font-size: 17px; list-style: none; display: flex; align-items: center; gap: 10px; }
details.prueba > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ocre); border-bottom: 2px solid var(--ocre); transform: rotate(-45deg); transition: transform var(--paso); flex: none; }
details.prueba[open] > summary::before { transform: rotate(45deg); }
details.prueba > summary::-webkit-details-marker { display: none; }
.prueba-c { padding: 0 16px 14px; }
.requisitos { list-style: none; padding: 0; margin: 0; } .requisitos li { padding: 8px 0; border-top: 1px solid var(--linea-2); font-family: var(--sans); font-size: 15px; line-height: 1.45; } .requisitos li:first-child { border-top: 0; }
.cita-min { display: block; color: var(--tinta-2, #5a6670); font-size: 13px; margin-top: 2px; }
.etq.ok { background: var(--ok-2); color: var(--ok); } .etq.mal { background: var(--alerta-2); color: var(--alerta); }
details.sub { margin-top: 10px; } details.sub > summary { cursor: pointer; font-family: var(--sans); font-size: 14.5px; color: var(--piedra); }
.tabla.compacta td, .tabla.compacta th { padding: 7px 8px; vertical-align: top; } .tabla.compacta td:first-child { width: 28px; color: var(--tinta-2, #5a6670); }
.demo-pie { margin: 18px 0 8px; }
.cta-fija { display: none; }
@media (max-width: 860px) {
  .demo-hero { padding-left: 12px; } .demo-ganancia { font-size: 16.5px; } .demo-veredicto { font-size: 15px; }
  body:not(.con-sesion) .cta-fija { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--linea); backdrop-filter: blur(6px); }
  body:not(.con-sesion) .cta-fija .btn { display: block; width: 100%; text-align: center; min-height: 44px; }
  body:not(.con-sesion):has(.cta-fija) #app { padding-bottom: 76px; }
}

/* ── Pregúntele al pliego ── */
.preguntas form.fila { gap: 8px; } .preguntas form input { flex: 1; min-width: 0; }
.respuesta { border-top: 1px solid var(--linea-2); padding: 10px 0 4px; } .respuesta .t { font-family: var(--serif); font-weight: 600; margin: 0 0 4px; }
.respuesta .ui { font-size: 15.5px; line-height: 1.5; margin: 0 0 6px; } .respuesta details > summary { cursor: pointer; font-family: var(--sans); font-size: 14px; color: var(--piedra); }
.pasaje { margin: 8px 0; } .pasaje .cita { white-space: pre-line; }

/* ── Ayuda (agente) y gestión de IST ── */
.chat { max-height: 420px; overflow-y: auto; padding: 4px 0 8px; }
.burbuja { font-family: var(--sans); font-size: 15px; line-height: 1.45; padding: 9px 12px; border-radius: 10px; margin: 6px 0; max-width: 92%; }
.burbuja.usuario { background: var(--ojo-2); margin-left: auto; } .burbuja.agente, .burbuja.ist { background: var(--hoja-2, #f1efe8); border: 1px solid var(--linea-2); } .burbuja.ist { border-left: 3px solid var(--piedra); }
.ayuda form.fila input { flex: 1; min-width: 0; }
.pestanas-admin { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; } .pestanas-admin button { font-family: var(--sans); font-size: 14.5px; padding: 8px 14px; border: 1px solid var(--linea); background: #fff; border-radius: var(--r-boton); cursor: pointer; min-height: 40px; } .pestanas-admin button.activa { background: var(--piedra); color: #fff; border-color: var(--piedra); }
#gestion-panel .cifra-88 { font-family: var(--serif); font-size: 40px; margin: 2px 0; } #gestion-panel input[type=search] { width: 100%; max-width: 420px; margin: 8px 0; }
.detalle h4 { margin: 12px 0 4px; }
.manual-texto { white-space: pre-line; }

/* ── Administración de IST: menú propio dentro del mismo lateral; gráficas ── */
.menu-admin { display: none; } body.en-admin .menu-l:not(.menu-admin) { display: none; } body.en-admin .menu-admin { display: block; }
.pestanas-admin a { font-family: var(--sans); font-size: 14.5px; padding: 8px 14px; border: 1px solid var(--linea); background: #fff; border-radius: var(--r-boton); text-decoration: none; color: var(--tinta); min-height: 40px; display: inline-flex; align-items: center; } .pestanas-admin a.activa { background: var(--piedra); color: #fff; border-color: var(--piedra); }
.cifras .hoja { margin: 0; } .cifras { gap: 12px; margin-bottom: 12px; }
#gestion-panel .grafica { width: 100%; height: auto; display: block; margin: 6px 0 2px; }
.planes4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .periodo .chip { cursor: pointer; }
#f-reg { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } #f-reg input[name=q] { flex: 1; min-width: 180px; }

/* ── Asistente flotante (con sesión) ── */
.asistente-btn { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 0; border-radius: 999px; background: var(--ocre); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 14.5px; box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer; }
.asistente-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.asistente { position: fixed; right: 18px; bottom: 72px; z-index: 30; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 620px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
.asistente header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--linea-2); } .asistente header .btn { margin-left: auto; }
.asistente .chat { flex: 1; overflow-y: auto; padding: 10px 12px; max-height: none; } .asistente form { padding: 8px 12px; gap: 6px; } .asistente form input { flex: 1; min-width: 0; } .asistente .fila.peq { padding: 0 12px 10px; gap: 10px; align-items: center; }
body.con-sesion .pestanas ~ .asistente-btn, body.con-sesion .asistente-btn { bottom: 18px; } @media (max-width: 860px) { body.con-sesion .asistente-btn { bottom: 74px; } body.con-sesion .asistente { bottom: 126px; } }

/* Legal: documentos largos y casillas del registro */
.legal-doc h2 { margin-top: 1.4rem; }
.legal-doc h3, .legal-doc h4 { margin-top: 1rem; }
.legal-doc blockquote { margin: .6rem 0; }
/* block y no flex: con flex cada texto y cada enlace del rótulo se volvía una columna (se veía partido en el celular) */
.legal-casillas .chip { display: block; white-space: normal; margin: .35rem 0; line-height: 1.45; padding-left: 2rem; text-indent: -1.5rem; }
.legal-casillas .chip input { margin: 0 .5rem 0 0; vertical-align: -2px; }
.pie-legal { grid-column: 1 / -1; font-size: .85rem; opacity: .85; margin-top: .4rem; }

/* Portada: el radar (lista editorial de dos columnas, sin tarjetas iguales) */
.radar-l { list-style: none; padding: 0; margin: 1.2rem 0 .6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2.4rem; counter-reset: radar; }
.radar-l li { counter-increment: radar; border-top: 1px solid var(--linea, #d8d2c4); padding-top: .7rem; }
.radar-l li::before { content: counter(radar, decimal-leading-zero); font-family: var(--serif, serif); color: var(--ocre, #b8742a); font-size: .95rem; margin-right: .5rem; }
.radar-l b { font-family: var(--serif, serif); font-size: 1.12rem; }
.radar-l span { display: block; color: var(--tinta-suave, #4a4a44); margin-top: .25rem; }
@media (max-width: 720px) { .radar-l { grid-template-columns: 1fr; } }
/* Páginas por persona */
.para-hero { max-width: 760px; }
.para-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; list-style: none; padding: 0; }
.para-l li { border-left: 3px solid var(--piedra, #1f4b5c); padding-left: .8rem; }
@media (max-width: 720px) { .para-l { grid-template-columns: 1fr; } }

/* Conversación con el pliego */
.chat-pliego { display: flex; flex-direction: column; gap: .7rem; margin: .8rem 0; max-height: 34rem; overflow-y: auto; }
.chat-pliego .turno { display: flex; flex-direction: column; gap: .35rem; }
.burbuja.yo { align-self: flex-end; background: var(--piedra, #1f4b5c); color: #fff; padding: .5rem .8rem; border-radius: 8px 8px 2px 8px; max-width: 80%; margin: 0; }
.burbuja.oteo { align-self: flex-start; background: var(--papel-2, #ece7da); padding: .6rem .8rem; border-radius: 8px 8px 8px 2px; max-width: 92%; }
.burbuja.oteo p { margin: .2rem 0; }
.turno.pensando .burbuja.oteo { opacity: .75; }
/* Guías públicas (páginas estáticas para buscadores) */
.guia-pagina { background: var(--papel, #f4f1ea); }
.guia-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 16px; border-bottom: 1px solid var(--linea, #d8d2c4); }
.guia-cab nav { font-size: .95rem; }
.guia { max-width: 760px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.guia h2 { margin-top: 1.8rem; }
.guia li { margin: .35rem 0; }
.guia-cta { margin-top: 2rem; }
.guia-lista li { margin: 1rem 0; }
@media (max-width: 600px) { #form-pregunta { flex-wrap: wrap; } #form-pregunta input[name=pregunta] { flex: 1 1 100%; min-width: 0; } }   /* en el celular la caja de la conversación ocupa el ancho (captura del simulacro de personas) */

/* Empresas de la cuenta (plan Empresa) */
.empresas-l { list-style: none; margin: .5rem 0; padding: 0; }
.empresas-l li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.empresas-l li > div { min-width: 0; overflow-wrap: anywhere; }
.f-empresa { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.f-empresa input[name=nombre] { flex: 2 1 14rem; } .f-empresa input[name=nit] { flex: 1 1 8rem; }

/* Auditoría 08/11 (pantallas): contraste AA del blanco sobre naranja (2,96:1 → 5:1) y de la etiqueta naranja sobre la franja azul
   (2,58:1 → 4,8:1); los botones flotantes ya no tapan los enlaces legales del pie (el relleno va al final de la página, no a #app);
   el JSON de Plataforma › Técnico no desborda en celular. */
.pepita, .insignia, .asistente-btn { background: var(--ocre-t); }
.franja .ante { color: #f8c48a; }
@media (max-width: 860px) { body:not(.con-sesion):has(.cta-fija) #app { padding-bottom: 0; } body:not(.con-sesion):has(.cta-fija) .pie { padding-bottom: 96px; } }
body.con-sesion .pie { padding-bottom: 84px; }
@media (max-width: 860px) { body.con-sesion .pie { padding-bottom: 150px; } }
.tecnico-json, .hoja pre { overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; }

/* Ronda 2 (pantallas): botón y enlace de las llamadas a la acción con aire entre sí; plegables y enlaces con objetivo táctil
   de 44 px en celular. */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
@media (max-width: 860px) { details > summary { min-height: 44px; display: flex; align-items: center; } .cta a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; } .chips .chip, .ficha-oficio { min-height: 44px; } }

/* ==== senales ==== «Lo que este pliego pide de más» */
.pide-de-mas.alta { border-left: 3px solid var(--alerta); } .pide-de-mas.leve { border-left: 3px solid var(--ojo); } .pide-de-mas.ninguna { border-left: 3px solid var(--ok); }
.pide-de-mas h3 .etq { margin-left: 6px; vertical-align: middle; }
.senal-pliego { overflow-wrap: anywhere; } .senal-pliego .cita { margin-top: 4px; }
/* ==== fin senales ==== */

/* ==== archivo ==== */
.arch-est { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-family: var(--sans); font-weight: 600; vertical-align: 1px; }
.arch-est.vigente { background: var(--ok-2); color: var(--ok); } .arch-est.pronto { background: var(--ojo-2); color: var(--ojo); }
.arch-est.vencido { background: var(--alerta-2); color: var(--alerta); } .arch-est.falta { background: var(--linea-2); color: var(--tinta-2); }
.arch { list-style: none; padding: 0; } .arch-tipo { border-bottom: 1px solid var(--linea-2); padding: 12px 0; }
.arch-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .arch-cab .t { margin: 0 0 2px; font-weight: 600; }
.arch-docs { list-style: none; padding: 0 0 0 12px; margin: 8px 0 0; border-left: 3px solid var(--linea-2); }
.arch-doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; } .arch-doc > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.arch-doc .acc, .arch-cab .acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.arch-form input[type=file] { max-width: 100%; } .arch-pliego .lista { list-style: none; padding: 0; } .arch-item { padding: 3px 0; }
@media (max-width: 860px) {
  .arch-cab, .arch-doc { flex-direction: column; align-items: stretch; } .arch-doc .acc, .arch-cab .acc { justify-content: flex-start; }
  .arch .btn, .arch-form .btn, .arch-pliego .btn { min-height: 44px; } .arch-form input { min-height: 44px; }
}
/* ==== tablero ==== */
.tb-pestanas { display: flex; gap: 4px; overflow-x: auto; margin: 10px 0; font-family: var(--sans); }
.tb-pestanas button { flex: 1 0 auto; min-height: 44px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--r-boton); background: var(--hoja); color: var(--tinta); cursor: pointer; font-size: 14px; }
.tb-pestanas button[aria-selected="true"] { background: var(--piedra); border-color: var(--piedra); color: #fff; font-weight: 600; }
.tb-pestanas b { font-weight: 700; margin-left: 2px; }
.tb-tablero { display: block; }
.tb-col { display: none; min-width: 0; }
.tb-col.activa { display: block; }
.tb-col h2 { font-size: 17px; margin: 6px 0 8px; font-family: var(--sans); }
.tb-tarjeta { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 12px 14px; margin: 0 0 10px; cursor: pointer; overflow-wrap: anywhere; }
.tb-tarjeta:hover { border-color: var(--piedra); }
.tb-t { display: block; font-weight: 600; text-decoration: none; color: var(--tinta); line-height: 1.35; }
.tb-m { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); margin-top: 4px; }
.tb-dias.urgente { color: var(--alerta); font-weight: 700; }
.tb-avance { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; margin-top: 6px; }
.tb-barra { flex: 1; max-width: 140px; height: 8px; accent-color: var(--ok); }
.tb-sug { font-family: var(--sans); font-size: 13px; background: var(--ojo-2); color: var(--tinta); padding: 4px 8px; border-radius: var(--r-boton); margin: 6px 0 0; }
.tb-mover { margin-top: 8px; position: relative; }
.tb-mover > .btn, .tb-menu .btn { min-height: 44px; }
.tb-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tb-menu[hidden] { display: none; }
.tb-vacia { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); border: 1px dashed var(--linea); border-radius: var(--r-hoja); padding: 12px; margin: 0; }
.tb-ficha .tb-cab { justify-content: space-between; }
.tb-ficha .tb-cab h3 { margin: 0; }
.tb-ficha .tb-cab .tb-mover { margin-top: 0; }
.tb-campos .campo { flex: 1 1 200px; min-width: 0; }
.tb-campos select, .tb-campos input, .tb-ficha textarea, #tb-nuevo input { width: 100%; min-height: 44px; }
.tb-ficha textarea { min-height: 80px; }
#tb-nuevo { flex-wrap: nowrap; margin: 8px 0; } #tb-nuevo input { flex: 1; min-width: 0; } #tb-nuevo .btn { min-height: 44px; }
.tb-lista { list-style: none; padding: 0; margin: 6px 0; }
.tb-lista li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea-2); }
.tb-lista .marcar { flex: 1; min-height: 32px; align-items: center; } .tb-lista .marcar input { width: 22px; height: 22px; flex: none; }
.tb-lista .marcar .cita { display: block; }
.tb-x { min-width: 44px; min-height: 44px; border: none; background: none; color: var(--alerta); font-size: 22px; cursor: pointer; border-radius: var(--r-boton); }
.tb-x:hover { background: var(--alerta-2); }
.tb-dialogo { border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 18px; max-width: min(460px, calc(100vw - 32px)); background: var(--hoja); color: var(--tinta); }
.tb-dialogo::backdrop { background: rgba(28,35,40,.45); }
.tb-dialogo h2 { margin-top: 0; font-size: 20px; } .tb-dialogo input { width: 100%; min-height: 44px; } .tb-dialogo .btn { min-height: 44px; }
.tb-opciones { border: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; } .tb-opciones legend { font-family: var(--sans); font-weight: 600; margin-bottom: 4px; }
.tb-opciones .chip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 900px) {
  .tb-pestanas { display: none; }
  .tb-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .tb-col, .tb-col.activa { display: block; background: var(--linea-2); border-radius: var(--r-hoja); padding: 8px; min-height: 160px; }

}
/* ==== fin tablero ==== */
/* ==== primerdia ==== franja «confirme su correo», veredicto neutro, alerta desde una frase, bandeja de salidas, RUT a mano. */
.franja-correo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; max-width: 1000px; margin: 10px auto 0; padding: 10px 14px; background: var(--ojo-2); border-left: 4px solid var(--ojo); border-radius: 0 var(--r-boton) var(--r-boton) 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.4; box-sizing: border-box; }
.franja-correo[hidden] { display: none !important; }
.franja-correo span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.franja-correo .btn, .salidas .btn, .frase-alerta .btn, .propuesta .btn, .rut-manual .btn { min-height: 44px; }
.demo-veredicto.neutro { background: var(--linea-2); border-color: var(--tinta-2); }
.veredicto .requisitos .etq { margin-right: 4px; }
.frase-form input { flex: 1 1 240px; min-width: 0; }
.propuesta { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-2); }
.propuesta .chip { min-height: 44px; }
.salidas .lista li p { margin: 4px 0 0; }
@media (max-width: 860px) { .franja-correo { margin: 8px 12px 0; } .frase-form .btn { width: 100%; } }
/* ==== fin primerdia ==== */
/* ==== canales ==== Telegram en Mi cuenta, informe para imprimir (tamaño carta) y estado de las fuentes. */
.tg-caja { border-top: 1px solid var(--linea-2); margin-top: 14px; padding-top: 4px; }
.tg-caja .fila { gap: 8px; flex-wrap: wrap; }

/* Informe: en pantalla, una hoja de papel; impreso, solo la hoja. */
.inf-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }
.informe { background: #fff; color: #111; border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 22px 24px; max-width: 816px; font-size: 14.5px; overflow-wrap: break-word; }
.inf-cabeza { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid var(--piedra); padding-bottom: 10px; margin-bottom: 6px; }
.inf-logo { width: 96px; height: auto; flex: none; }
.inf-titulo { font-size: 20px; font-weight: 600; color: var(--piedra-3); }
.inf-sub { font-family: var(--sans); font-size: 13px; color: var(--tinta-2); }
.inf-nombre { font-size: 19px; margin: 14px 0 8px; }
.inf-seccion { margin-top: 14px; }
.inf-seccion h3 { margin: 6px 0; border-bottom: 1px solid var(--linea-2); padding-bottom: 3px; }
.inf-datos { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13.5px; }
.inf-datos th { text-align: left; font-weight: 600; color: var(--tinta-2); padding: 3px 12px 3px 0; width: 9.5em; vertical-align: top; }
.inf-datos td { padding: 3px 0; }
.inf-desliza { overflow-x: auto; }
.inf-tabla { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13px; }
.inf-tabla th, .inf-tabla td { border: 1px solid var(--linea); padding: 5px 7px; text-align: left; vertical-align: top; }
.inf-tabla thead th { background: var(--piedra-2); }
.inf-req td:nth-child(2), .inf-req td:nth-child(3) { min-width: 5.5em; } .inf-req td.cumple, .inf-req td.nocumple, .inf-req td.verif { white-space: nowrap; }
.inf-pag { white-space: nowrap; color: var(--tinta-2); font-size: 12.5px; }
.inf-cita { font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.inf-lista { margin: 4px 0; padding-left: 20px; } .inf-lista li { margin: 3px 0; }
.inf-chequeo { list-style: none; margin: 4px 0; padding: 0; columns: 2; column-gap: 24px; font-size: 13.5px; }
.inf-chequeo li { break-inside: avoid; margin: 3px 0; padding-left: 18px; text-indent: -18px; }
.inf-caja { display: inline-block; vertical-align: -1px; margin-right: 7px; text-indent: 0; width: 11px; height: 11px; border: 1.5px solid var(--tinta-2); border-radius: 2px; }
.inf-pie { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--linea); font-family: var(--sans); font-size: 12px; color: var(--tinta-2); text-align: center; }
@media screen and (max-width: 640px) { .informe { padding: 14px 12px; } .inf-chequeo { columns: 1; } .inf-datos th { width: 7.5em; }
  /* En el celular cada requisito es una ficha: la tabla de cinco columnas no cabe en 390 px. */
  .inf-req thead { display: none; } .inf-req, .inf-req tbody, .inf-req tr, .inf-req td { display: block; width: auto; }
  .inf-req tr { border: 1px solid var(--linea); border-radius: var(--r-boton); margin: 8px 0; padding: 6px 9px; } .inf-req td { border: 0; padding: 2px 0; min-width: 0; }
  .inf-req td[data-et]::before { content: attr(data-et) ": "; color: var(--tinta-2); font-weight: 400; } }
@media print {
  @page { size: letter; margin: 14mm 13mm 16mm; }
  body.en-informe { background: #fff; }
  body.en-informe .lateral, body.en-informe .barra, body.en-informe .pestanas, body.en-informe .asistente-btn, body.en-informe .asistente, body.en-informe .instalar, body.en-informe .inf-acciones, body.en-informe .pie, body.en-informe .aviso { display: none !important; }
  body.en-informe .gestion, body.en-informe .columna { display: block !important; margin: 0 !important; padding: 0 !important; }
  body.en-informe .app { max-width: none; margin: 0; padding: 0; }
  .informe { border: 0; padding: 0; max-width: none; font-size: 11.5pt; }
  .inf-desliza { overflow: visible; }
  .inf-tabla { font-size: 9.5pt; } .inf-tabla thead { display: table-header-group; } .inf-tabla tr { break-inside: avoid; }
  .inf-seccion h3 { break-after: avoid; } .inf-cabeza, .inf-pie { break-inside: avoid; }
  .inf-tabla thead th { background: #eef3f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cumple, .nocumple, .verif { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Estado de las fuentes: punto de color + palabra (nunca solo el color). */
.fuentes { list-style: none; margin: 14px 0; padding: 0; }
.fuente { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linea-2); }
.fuente-cuerpo { min-width: 0; flex: 1; }
.fuente-punto { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 5px; background: var(--linea); }
.fuente-punto.verde { background: var(--ok); } .fuente-punto.amarillo { background: #d4a72c; } .fuente-punto.rojo { background: var(--alerta); }
.fuente-cabeza { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.fuente-etq { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--linea-2); color: var(--tinta-2); }
.fuente-etq.verde { background: var(--ok-2); color: var(--ok); } .fuente-etq.amarillo { background: var(--ojo-2); color: var(--ojo); } .fuente-etq.rojo { background: var(--alerta-2); color: var(--alerta); }
/* ==== fin canales ==== */
/* ==== calculadoras ==== */
/* Pestañas que se deslizan en celular (sin desborde de la página), panel con formulario y frase del resultado. */
.calc-pestanas { contain: inline-size; width: 100%; display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 6px; margin: 12px 0 0; scrollbar-width: thin; }
.calc-pestana { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 1px solid var(--linea); border-radius: var(--r-boton); background: var(--hoja); color: var(--tinta-2); font-family: var(--sans); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.calc-pestana[aria-selected="true"] { background: var(--piedra); border-color: var(--piedra); color: #fff; }
.calc-pestana:focus-visible { outline: 3px solid var(--piedra-2); outline-offset: 1px; }
.calc-panel h3 { margin: 16px 0 4px; font-size: 15.5px; }
.calc-panel input[type=date] { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r-boton); font: inherit; font-size: 16px; background: #fff; box-sizing: border-box; }
.calc-panel .campo input, .calc-panel .campo select, .calc-panel textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.calc-fila > *, .calc-panel .col > * { min-width: 0; }
.calc-panel .campo small { display: block; margin-top: 3px; }
.calc-panel .btn { min-height: 44px; }
.calc-marca { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.calc-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 10px; align-items: end; padding: 8px 0; border-bottom: 1px dashed var(--linea); }
.calc-fila .calc-quitar { min-height: 44px; margin: 10px 0; }
.calc-resultado:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.calc-frase { font-family: var(--sans); font-size: 16.5px; font-weight: 600; line-height: 1.45; padding: 10px 14px; border-left: 4px solid var(--piedra); background: var(--piedra-2); border-radius: 0 var(--r-boton) var(--r-boton) 0; margin: 8px 0 12px; overflow-wrap: anywhere; }
.calc-frase.si { border-left-color: var(--ok); background: var(--ok-2); }
.calc-frase.no { border-left-color: var(--alerta); background: var(--alerta-2); }
.calc-res li { padding: 8px 0; }
.calc-invitacion { border-color: var(--piedra); }
@media (max-width: 600px) { .calc-fila { grid-template-columns: 1fr 1fr; } .calc-fila .campo:first-child { grid-column: 1 / -1; } .calc-frase { font-size: 15.5px; } }
/* ==== perfil ==== Mi empresa: armador del perfil y lector del RUP */
.pf-barra { height: 10px; border-radius: var(--r-hoja); background: var(--linea-2); overflow: hidden; margin: 6px 0 4px; }
.pf-barra span { display: block; height: 100%; background: var(--ok); }
.pf-tramo > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 14px; }
.pf-destraba { margin-top: 4px; }
.pf-sin-borde { border: 0; padding: 0; margin: 10px 0; } .pf-sin-borde legend { padding: 0; margin-bottom: 6px; }
.pf-dif { background: var(--ocre-2); border-radius: 8px; padding: 8px 10px; border: 0; }
.pf-archivo { cursor: pointer; } .pf-archivo:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.pf-pct { width: 72px; min-height: 36px; }
.pf-checks li { display: flex; gap: 8px; align-items: baseline; }
.pf-codigos { columns: 2 260px; }
.pf-revision .tabla td, .pf-tramo .tabla td { vertical-align: top; }
.fila .chip input[type=radio] { margin-right: 4px; }
@media (max-width: 760px) { .pf-tramo .col { grid-template-columns: 1fr; } .pf-codigos { columns: 1; } }
/* ==== fin perfil ==== */
/* ==== costura ==== */
.nota-req { display: block; margin-top: .25rem; color: var(--tinta-2); font-size: .88em; line-height: 1.4; }
.pf-calc-origen { margin: 0 0 .75rem; }
/* ==== fin costura ==== */
/* ==== portada ==== */
/* Portada 08/11 (noche): titular de pérdida evitada, tres puertas, el proceso del día con su pliego leído, el aviso tal como
   llega, cuánto ofertar y contra quién, frescura verificable y lo gratis. Ver docs/PORTADA-2026-11-08.md. */
.app { min-height: calc(100vh - 56px); }
.hero3 h1 { font-size: clamp(36px, 4.1vw, 58px); line-height: 1.06; }
.hero3 .confianza { margin: 12px 0 0; color: rgba(255,255,255,.85); }
.puertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 1px solid rgba(255,255,255,.22); }
.puerta { display: grid; align-content: start; gap: 2px; min-height: 44px; padding: 12px 14px 4px; color: #fff; text-decoration: none; font-family: var(--sans); border-right: 1px solid rgba(255,255,255,.18); }
.puerta:first-child { padding-left: 0; } .puerta:last-child { border-right: 0; }
.puerta b { font-size: 16px; } .puerta b::after { content: " →"; color: var(--ocre); transition: margin var(--paso); }
.puerta span { font-size: 13px; color: rgba(255,255,255,.72); }
.puerta:hover b { color: var(--amarillo); } .puerta:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.frescura-viva { flex-basis: 100%; font-size: 13.5px; color: var(--tinta-2); }
.frescura-viva i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-2); margin-right: 7px; vertical-align: 1px; }
.frescura-viva .punto-verde { background: var(--ok); } .frescura-viva .punto-amarillo { background: #d4a72c; } .frescura-viva .punto-rojo { background: var(--alerta); }
.vitrina { padding: 48px 0 28px; }
.vitrina-g { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
.vitrina h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin: 6px 0 8px; max-width: 30ch; }
.vitrina-meta { color: var(--tinta-2); margin: 0 0 14px; }
.semaforo { display: grid; gap: 2px; margin: 0 0 6px; padding: 12px 16px; border-left: 5px solid var(--ojo); background: var(--ojo-2); font-family: var(--sans); }
.semaforo b { font-size: 20px; } .semaforo span { font-size: 14.5px; }
.semaforo.s-si { border-color: var(--ok); background: var(--ok-2); } .semaforo.s-si b { color: var(--ok); }
.semaforo.s-no { border-color: var(--alerta); background: var(--alerta-2); } .semaforo.s-no b { color: var(--alerta); }
.semaforo.s-revisar b { color: var(--ojo); }
.req-l { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 0; }
.req-l li { padding: 11px 0; border-top: 1px solid var(--linea); font-family: var(--sans); font-size: 15px; }
.req-l li:last-child { border-bottom: 1px solid var(--linea); }
.req-l .cita { display: block; margin-top: 6px; }
.vitrina-acc a { font-weight: 600; }
.telefono { margin: 0; border: 1px solid var(--linea); border-radius: 18px; background: #ece7dc; padding: 0 0 14px; overflow: hidden; max-width: 380px; }
.tel-cab { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--banda); color: #fff; font-family: var(--sans); }
.tel-cab span { display: grid; line-height: 1.2; } .tel-cab small { font-size: 12px; color: rgba(255,255,255,.75); }
.burbuja { margin: 14px 14px 8px; padding: 10px 12px; background: #fff; border-radius: 4px 12px 12px 12px; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--tinta); overflow-wrap: anywhere; }
.telefono figcaption { padding: 0 14px; font-family: var(--sans); font-size: 12.5px; color: var(--tinta-2); }
.cuanto { margin-top: 22px; padding-top: 16px; border-top: 3px solid var(--piedra); }
.cuanto h3 { margin: 0 0 6px; font-size: 20px; } .cuanto p { margin: 0 0 8px; font-family: var(--sans); font-size: 15px; }
.cuanto p b { color: var(--piedra); }
.gratis-l { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.gratis-l a { display: grid; gap: 2px; padding: 14px 0; min-height: 44px; border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-family: var(--sans); }
.gratis-l b { font-size: 16.5px; color: var(--piedra); } .gratis-l b::after { content: " →"; color: var(--ocre-t); }
.gratis-l span { font-size: 14px; color: var(--tinta-2); } .gratis-l a:hover b { color: var(--ocre-t); }
.pago-l { color: var(--tinta-2); }
@media (max-width: 860px) {
  .hero3 h1 { font-size: 34px; }
  .puertas { grid-template-columns: 1fr; } .puerta, .puerta:first-child { border-right: 0; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .hero3 #ejemplos .chip { min-height: 44px; }
  .vitrina { padding: 36px 0 16px; } .vitrina-g { grid-template-columns: 1fr; gap: 26px; } .telefono { max-width: none; }
  .gratis-l { grid-template-columns: 1fr; }
}
/* ==== fin portada ==== */

/* ==== coordinador ==== La portada va pegada al menú: el margen superior de .app dejaba ver una franja blanca (existía antes del 08/11). */
.app:has(.hero3) { padding-top: 0; }
/* ==== fin coordinador ==== */

/* ==== limites-busqueda ==== Cupo de búsquedas al mes, aviso al agotarlas y lo que la cuenta gratis no ve (filas grises sin datos). */
.lb-cupo { margin: 0 0 .75rem; padding: .6rem .8rem; border-left: 3px solid var(--piedra); background: var(--piedra-2); border-radius: var(--r-campo); font-size: .95rem; line-height: 1.45; }
.lb-cupo.poco { border-left-color: var(--ojo); background: var(--ojo-2); }
.lb-cupo.agotado { border-left-color: var(--alerta); background: var(--alerta-2); }
.lb-agotado { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--alerta); background: var(--alerta-2); border-radius: var(--r-hoja); }
.lb-agotado p { margin: 0 0 .6rem; }
.lb-agotado .fila .btn, .lb-llamado .btn { min-height: 44px; display: inline-flex; align-items: center; }
.lb-mas { position: relative; margin-top: -.25rem; }
.lb-fantasmas { margin: 0; pointer-events: none; user-select: none; }
.lb-fantasma { display: grid; gap: .45rem; padding: .9rem 1rem; border-bottom: 1px solid var(--linea-2); opacity: .55; }
.lb-fantasma span { display: block; height: .7rem; border-radius: 2px; background: var(--linea); }
.lb-fantasma span:nth-child(1) { width: 72%; height: .85rem; }
.lb-fantasma span:nth-child(2) { width: 55%; }
.lb-fantasma span:nth-child(3) { width: 34%; }
.lb-llamado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; padding: 1rem 1.1rem; border: 1px solid var(--ocre); background: var(--ocre-2); border-radius: var(--r-hoja); }
.lb-llamado p { margin: 0; flex: 1 1 16rem; }
@media (max-width: 600px) { .lb-llamado .btn { width: 100%; justify-content: center; } }
/* ==== fin limites-busqueda ==== */

/* ==== hora-cierre ==== */
/* Cierre sin hora confirmada: subrayado punteado (el título dice «hora sin confirmar: revise el cronograma de SECOP»). */
.cierre.sin-hora { text-decoration: underline dotted; text-underline-offset: 3px; }
/* ==== fin hora-cierre ==== */

/* ==== novedades-f1 ==== «¿En qué va con este proceso?», línea de tiempo de novedades e insignias. Celular primero: botones de 44 px. */
.nv-ficha h3 { margin: 0 0 8px; } .nv-ficha .nv-t { margin-top: 18px; }
.nv-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nv-op { min-height: 44px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r-boton); background: var(--hoja); color: var(--tinta); font: 600 14.5px/1.2 var(--sans); cursor: pointer; text-align: center; }
.nv-op:hover { border-color: var(--piedra); } .nv-op:focus-visible { outline: 2px solid var(--piedra); outline-offset: 2px; }
.nv-op.activo { background: var(--piedra); border-color: var(--piedra); color: #fff; }
.nv-op.nv-no { color: var(--alerta); } .nv-op.nv-no.activo { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.nv-op:disabled { opacity: .6; cursor: progress; }
@media (min-width: 700px) { .nv-control { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nv-guia { margin: 8px 0 0; }
.nv-op-l, body.con-sesion .btn.chico.nv-op-l { min-height: 44px; }
.nv-acc { position: relative; } .nv-menu { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.nv-menu[hidden] { display: none; }
.nv-insignia { text-decoration: none; margin-left: 4px; } .nv-insignia:hover { text-decoration: underline; }
.nv-sub { display: block; font: 500 12.5px var(--sans); color: var(--tinta-2); }
.nv-cupo a { font-weight: 600; }
.nv-resumen { border-left: 4px solid var(--piedra); padding: 4px 0 4px 12px; margin: 10px 0 14px; }
.nv-resumen.urgente { border-left-color: var(--alerta); }
.nv-resumen h4 { margin: 10px 0 4px; font: 700 14.5px var(--sans); } .nv-res-cab { margin: 0; font-family: var(--sans); }
.nv-frases { margin: 0; padding-left: 18px; } .nv-frases li { margin: 3px 0; overflow-wrap: anywhere; }
.nv-pag { font: 500 12.5px var(--sans); color: var(--tinta-2); white-space: nowrap; } .nv-plazo { white-space: nowrap; }
.nv-linea { list-style: none; margin: 8px 0; padding: 0; }
.nv-item { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); }
.nv-item.nueva .nv-nombre { font-weight: 700; }
.nv-fecha { font: 600 13px var(--sans); color: var(--tinta-2); padding-top: 2px; }
.nv-nombre { margin: 4px 0; overflow-wrap: anywhere; font-family: var(--sans); font-size: 14.5px; }
.nv-ver { min-height: 44px; } body.con-sesion .btn.chico.nv-ver { min-height: 44px; }
.nv-inicio h2 { margin: 0 0 6px; } .nv-inicio-l li { overflow-wrap: anywhere; } .nv-inicio-l a { display: inline-block; min-height: 28px; }
.nv-fila-plan { margin: 2px 0 0; }
/* ==== fin novedades-f1 ==== */

/* ==== correcciones-int2 ==== */
.ex-mas { margin-top: 10px; border-top: 1px solid var(--linea, #ddd); padding-top: 6px; }
.ex-mas > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--sans); font-weight: 600; list-style-position: inside; }
.ex-mas > summary .dim { font-weight: 400; font-size: 13.5px; }
.ex-mas .col { margin-top: 6px; }
.explorar-f select:disabled { opacity: .65; cursor: not-allowed; }
#ex-orden-nota { display: block; margin-top: 4px; }
#ex-res { scroll-margin-top: 70px; }
/* ==== fin correcciones-int2 ==== */

/* ==== documentos-cantidades ==== Documentos del proceso, cantidades del estudio previo y aviso de escaneado. */
.dc-bajar, #dc-cant .btn, #dc-docs .btn, .dc-ocr .btn { min-height: 44px; }
.dc-docs-l, .dc-ocr-l { list-style: none; margin: 8px 0 0; padding: 0; }
.dc-doc, .dc-ocr-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-2); }
.dc-doc:first-child, .dc-ocr-doc:first-child { border-top: 0; }
.dc-doc-t, .dc-ocr-doc > div { display: grid; gap: 3px; min-width: 0; font-family: var(--sans); }
.dc-doc-t b, .dc-ocr-doc b { overflow-wrap: anywhere; font-weight: 600; font-size: 14.5px; }
.dc-doc-t .etq { justify-self: start; }
.dc-doc .btn, .dc-ocr-doc .btn { flex: none; }
.dc-ocr p { margin: 0 0 6px; }
.dc-mas { margin-top: 8px; } .dc-mas > summary { list-style: none; cursor: pointer; } .dc-mas > summary::-webkit-details-marker { display: none; }
.dc-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 10px 0; font-family: var(--sans); }
.dc-res div { border-left: 3px solid var(--linea); padding-left: 10px; } .dc-res dt { font-size: 12.5px; color: var(--tinta-2); } .dc-res dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dc-tabla { max-height: 560px; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea-2); border-radius: var(--r-boton); }
.dc-items th { position: sticky; top: 0; background: var(--hoja); z-index: 1; }
.dc-items .dc-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-items td:nth-child(2) { min-width: 220px; }
.dc-items .dc-cap td { background: var(--linea-2); }
@media (max-width: 640px) {
  .dc-doc, .dc-ocr-doc { flex-direction: column; align-items: stretch; }
  .dc-doc .btn, .dc-ocr-doc .btn, #dc-cant .fila .btn { width: 100%; }
  /* En el celular cada ítem es una tarjeta: rótulo a la izquierda, valor a la derecha; la tabla no se desborda. */
  .dc-tabla { max-height: none; border: 0; overflow: visible; }
  .dc-items, .dc-items tbody, .dc-items tr, .dc-items td { display: block; width: 100%; }
  .dc-items thead { display: none; }
  .dc-items tr { border: 1px solid var(--linea); border-radius: var(--r-boton); margin: 0 0 8px; padding: 6px 10px; background: var(--hoja); }
  .dc-items td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; min-width: 0 !important; }
  .dc-items td::before { content: attr(data-l); color: var(--tinta-2); font-size: 12.5px; text-align: left; flex: none; }
  .dc-items td:nth-child(2) { display: block; text-align: left; } .dc-items td:nth-child(2)::before { display: block; }
  .dc-items .dc-n { white-space: normal; }
  .dc-items .dc-cap { background: var(--linea-2); } .dc-items .dc-cap td { background: transparent; display: block; text-align: left; } .dc-items .dc-cap td::before { display: none; }
}
/* ==== fin documentos-cantidades ==== */

/* ==== pendiente-documentos ==== Estudio sin documentos en SECOP y «¿Qué están comprando?». */
.pd-pendiente { border-left: 3px solid var(--ojo); }
.pd-pendiente .btn, #dc-docs .btn { min-height: 44px; }
.pd-compra { display: grid; grid-template-columns: 1fr; gap: 6px 16px; margin: 8px 0 0; }
.pd-compra > div { min-width: 0; }
.pd-compra dt { font-size: .82rem; color: var(--tinta-2, #666); }
.pd-compra dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) { .pd-compra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-subir { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linea); }
.pd-elegir { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.pd-estado .btn { min-height: 44px; }
/* ==== fin pendiente-documentos ==== */
/* ==== defectos-video ==== */
/* «Lo que usted había escrito» (lectura del RUP): el legend del fieldset salía en la letra del navegador y montado sobre el borde.
   Se saca del borde (float) y lleva la letra de la interfaz. */
.pf-dif { border: 1px solid var(--linea); border-radius: var(--r-campo); padding: 10px 12px; margin: 10px 0; min-width: 0; background: var(--ojo-2); }
.pf-dif legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-family: var(--sans); font-size: 14.5px; font-weight: 400; line-height: 1.45; color: var(--tinta); }
.pf-dif legend b { font-family: var(--sans); font-weight: 700; }
.pf-dif legend + * { clear: both; }
/* El detalle del veredicto en el celular: cada requisito es una ficha (la tabla de cuatro columnas no cabe en 390 px y cortaba
   «Estado» en «cumpl…»). */
@media (max-width: 640px) {
  .ver-req thead { display: none; } .ver-req, .ver-req tbody, .ver-req tr, .ver-req td { display: block; width: auto; }
  .ver-req tr { border: 1px solid var(--linea); border-radius: var(--r-boton); margin: 8px 0; padding: 8px 10px; }
  .ver-req td { border: 0; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; }
  .ver-req td.ver-req-q { font-weight: 600; }
  .ver-req td[data-et]::before { content: attr(data-et) ": "; color: var(--tinta-2); font-weight: 400; }
  .desliza:has(> .ver-req) { overflow-x: visible; margin: 6px 0; padding: 0; }
}
/* ==== fin defectos-video ==== */
/* ==== paquete-asistido ==== «Arme mi paquete» y la ventana de revisión de documentos. Celular primero: botones de 44 px. */
.paq .btn, .rev-dialogo .btn { min-height: 44px !important; }
.paq-lista { list-style: none; padding: 0; margin: 8px 0 16px; }
.paq-item { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 12px 14px; margin: 10px 0; }
.paq-cab { display: flex; gap: 10px; align-items: flex-start; }
.paq-cab .t { margin: 0 0 4px; font-weight: 600; }
.paq-cab p { margin: 2px 0; }
.paq-n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--piedra-2); color: var(--piedra-3); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--sans); font-size: 14px; }
.paq-hacer { margin-top: 8px; }
.paq-hacer > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--sans); font-weight: 600; color: var(--piedra); }
.paq-datos { display: grid; gap: 6px; margin: 8px 0; }
.paq-dato { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--linea-2); border-radius: var(--r-boton); padding: 6px 8px; background: var(--papel); }
.paq-dato > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.paq-pasos { margin: 8px 0; padding-left: 22px; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.paq-subir { display: flex; flex-direction: column; gap: 4px; border: 2px dashed var(--linea); border-radius: var(--r-hoja); padding: 12px; margin-top: 8px; font-family: var(--sans); cursor: pointer; }
.paq-subir > span:first-child { font-weight: 600; }
.paq-subir { position: relative; }
.paq-subir .paq-archivo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.paq-subir:focus-within { outline: 3px solid var(--ocre); outline-offset: 2px; }
.paq-elegir { align-self: flex-start; margin-top: 4px; }
.paq-subir.subiendo { opacity: .7; }
.paq-autoriza { align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.paq-autoriza input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; }
.paq-rojo { color: var(--alerta); }
.rev-lista { list-style: none; padding: 0; margin: 8px 0; font-family: var(--sans); font-size: 14px; }
.rev-lista li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea-2); overflow-wrap: anywhere; }
.rev-ico { flex: 0 0 20px; font-weight: 700; text-align: center; }
.rev-ok .rev-ico { color: var(--ok); } .rev-aviso .rev-ico { color: var(--ojo); } .rev-falla .rev-ico { color: var(--alerta); }
.rev-lista .cita { display: block; }
.rev-dialogo { max-width: min(560px, calc(100vw - 32px)); }
.paq-resumen .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.paq-resumen .cifra { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 0; }
.paq-resumen .cifra b { font-size: 24px; line-height: 1.1; }
@media (min-width: 720px) { .paq-resumen .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.paq-resumen .cifra b { display: inline; }
/* ==== fin paquete-asistido ==== */

/* ==== integracion-4 ==== «¿Por qué pasa esto?» del estudio pendiente de documentos y de «Estado de las fuentes». */
.pd-porque { margin: 10px 0 4px; }
.pd-porque > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--sans); font-weight: 600; color: var(--tinta); }
.pd-porque p { margin: 0 0 8px; overflow-wrap: anywhere; }
.pd-estado-fuentes { margin: 12px 0; }
/* La cola de la subida asistida: un renglón por archivo, con su avance; las piezas de un ZIP debajo. */
.pd-cola, .pd-piezas { list-style: none; margin: 6px 0; padding: 0; }
.pd-archivo { border-top: 1px solid var(--linea-2); padding: 8px 0; min-width: 0; }
.pd-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pd-n { overflow-wrap: anywhere; min-width: 0; }
.pd-archivo progress { width: 100%; height: 8px; margin-top: 6px; accent-color: var(--ojo); }
.pd-piezas { margin-left: 12px; } .pd-pieza { padding: 3px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pd-motivo { display: block; width: 100%; margin: 2px 0 0; }
/* ==== fin integracion-4 ==== */
/* ==== instructor ==== */
/* «Aprenda a usar Oteo»: lista de lecciones, la lección con su esquema de pantalla y el recorrido guiado (velo + globo). */
.ap-avance .ui { margin: 0 0 8px; }
.ap-barra { height: 8px; background: var(--linea-2); border-radius: 4px; overflow: hidden; }
.ap-barra span { display: block; height: 100%; width: 0; background: var(--ok); }
.ap-lista { list-style: none; padding: 0; margin: 14px 0; border-top: 1px solid var(--linea); }
.ap-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ap-enlace { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--tinta); min-height: 44px; }
.ap-enlace:hover b { text-decoration: underline; }
.ap-n { flex: 0 0 30px; height: 30px; border-radius: 50%; border: 1px solid var(--piedra); color: var(--piedra); display: inline-flex; align-items: center; justify-content: center; font: 600 14px var(--sans); }
.ap-item.hecho .ap-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.ap-n svg { width: 16px; height: 16px; }
.ap-txt { display: flex; flex-direction: column; font-family: var(--sans); font-size: 15px; line-height: 1.4; }
.ap-txt b { font-family: var(--serif); font-size: 17px; }
.ap-txt .dim { font-size: 14px; }
.ap-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ap-resuelve { margin-top: 0; }
.ap-cta { align-items: center; gap: 12px; }
.ap-ya { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.ap-pasos { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 14px; }
.ap-paso { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 12px; }
.ap-paso-t p { margin: 4px 0 0; }
.ap-paso-t b { font-family: var(--sans); font-size: 13.5px; color: var(--tinta-2); text-transform: none; }
/* El esquema: un dibujo de pantalla con el elemento señalado (filete ocre), sin capturas que envejezcan. */
.ap-esq { border: 1px solid var(--linea); border-radius: var(--r-boton); background: var(--papel); overflow: hidden; font-family: var(--sans); display: flex; flex-direction: column; min-height: 118px; }
.ap-esq-cab { background: var(--piedra); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-esq-cuerpo { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ap-esq-l { display: block; height: 6px; border-radius: 3px; background: var(--linea); width: 85%; }
.ap-esq-l.c { width: 55%; }
.ap-esq-foco { display: block; border: 2px solid var(--ocre); border-radius: var(--r-boton); font-size: 12px; line-height: 1.3; padding: 4px 6px; color: var(--tinta); background: var(--hoja); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-esq-boton { align-self: flex-start; background: var(--piedra); color: #fff; border-color: var(--ocre); font-weight: 600; max-width: 100%; }
.ap-esq-campo { color: var(--tinta-2); }
.ap-esq-bloque { display: flex; flex-direction: column; gap: 5px; padding: 6px; white-space: normal; }
.ap-esq-pie { border-top: 1px solid var(--linea); padding: 5px 8px; background: #fff; }
.ap-esq-menu { display: inline-block; font-weight: 600; }
.ap-manual summary { cursor: pointer; font-family: var(--sans); font-weight: 600; min-height: 32px; }
.ap-navega { justify-content: space-between; }
/* El «?» junto al título de cada pantalla: discreto a la vista, 44 px al dedo. */
.ap-q { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 6px; border: 1px solid var(--linea); border-radius: 50%; font: 600 15px/1 var(--sans); color: var(--piedra); text-decoration: none; vertical-align: 4px; background: var(--hoja); }
.ap-q::after { content: ""; position: absolute; inset: -9px; }
.ap-q[hidden] { display: none; }
body:not(.con-sesion) .ap-q { display: none; }
.barra .ap-q { margin-left: -6px; flex: 0 0 auto; }
.ap-q:hover { border-color: var(--piedra); color: var(--piedra-3); }
.ap-en-ayuda .ap-barra { max-width: 420px; }
.ap-muestre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ap-sugiere .fila { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* El recorrido: cuatro velos alrededor del elemento (oscurecen y atajan los toques), el filete y el globo. */
.guia { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.guia-velo { position: fixed; left: 0; top: 0; width: 0; height: 0; background: rgba(18, 28, 34, .62); pointer-events: auto; }
.ap-velo-total { inset: 0; width: auto; height: auto; }
.guia-aro { position: fixed; border: 2px solid var(--ocre); border-radius: var(--r-boton); box-shadow: 0 0 0 3px rgba(255, 253, 248, .7); pointer-events: none; }
.guia-globo { position: fixed; left: 16px; top: 16px; pointer-events: auto; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--hoja); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 12px 16px 14px; font-family: var(--sans); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55); }
.guia-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--tinta-2); margin-bottom: 4px; }
.guia-texto { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--tinta); }
.guia-nota { margin: 0 0 10px; font-size: 14px; color: var(--ojo); font-weight: 600; }
.guia-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.guia .btn, body.con-sesion .guia .btn { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.guia .guia-salir, body.con-sesion .guia .guia-salir { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: 14px; }
.guia .btn[hidden] { display: none; }
.ap-bienv { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ap-bienv h2 { margin: 4px 0 6px; font-family: var(--serif); }
.ap-bienv .dim { margin: 10px 0 0; }
@media (max-width: 760px) {
  .ap-item { flex-direction: column; align-items: stretch; gap: 6px; }
  .ap-acc { justify-content: flex-start; padding-left: 42px; }
  .ap-acc .btn { min-height: 44px; }
  .ap-paso { grid-template-columns: 1fr; }
  .ap-esq { max-width: 260px; }
  .ap-cta .btn { width: 100%; }
  .guia-botones .btn { flex: 1 1 auto; }
}
/* ==== fin instructor ==== */
/* ==== registro-suscripcion ==== Mis pagos y registros, la constancia (misma hoja del informe) y la verificación pública. */
.rs-caja { border-top: 1px solid var(--linea-2); margin-top: 14px; padding-top: 4px; }
.rs-lista { list-style: none; margin: 8px 0; padding: 0; }
.rs-item { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linea-2); }
.rs-dato { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.rs-item .btn, .rs-verificar .btn, .rs-admin .btn { min-height: 44px; }
.constancia .inf-cabeza { flex-wrap: wrap; }
.rs-cabeza-texto { flex: 1 1 240px; min-width: 0; }
.rs-sello { font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 4px 10px; border: 2px solid currentColor; border-radius: var(--r-boton); color: var(--piedra-3); white-space: nowrap; }
.rs-sello.anulado { color: #a3261b; } .rs-sello.vencido, .rs-sello.sustituido { color: var(--tinta-2); }
.rs-aviso { margin: 10px 0; padding: 8px 10px; border: 1px solid #a3261b; border-radius: var(--r-boton); font-family: var(--sans); font-size: 13.5px; }
.rs-huella { font-size: 12.5px; word-break: break-all; }
.rs-verificar input { width: 100%; min-height: 44px; }
.rs-admin { margin-top: 12px; }
.rs-nofactura { margin: 10px 0 4px; padding: 8px 11px; background: var(--piedra-2); border-left: 3px solid var(--piedra); font-family: var(--sans); font-size: 13.5px; }
.rs-factura { margin-top: 6px; } .rs-nw { white-space: nowrap; }
.rs-df { margin: 10px 0; } .rs-df summary { min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.rs-df input:not([type=checkbox]) { width: 100%; min-height: 44px; }
@media print { .rs-nofactura, .rs-sello, .rs-aviso { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* ==== fin registro-suscripcion ==== */

/* ==== auditoria-seguridad ==== */
.sg-plan { border-left: 4px solid var(--ojo); }
.sg-plan .fila .btn { min-height: 44px; }
.sg-codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; list-style: none; padding: 0; }
.sg-codigos code { display: block; padding: .5rem .75rem; font-size: 1.05rem; letter-spacing: .06em; text-align: center; }
/* ==== fin auditoria-seguridad ==== */
/* ==== auditoria-correcciones ==== */
/* A3: en celular el aviso queda por encima de la barra de pestañas (56 px) y del botón «Asistente» (bottom 74 px + 44 px), y de la
   barra fija de la portada pública. A8: los enlaces del menú lateral miden al menos 44 px de alto en celular. */
@media (max-width: 860px) {
  body.con-sesion .aviso { bottom: calc(128px + env(safe-area-inset-bottom)); z-index: 40; }
  body:not(.con-sesion) .aviso { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; }
  .menu-l a { height: auto; min-height: 44px; }
}
/* ==== fin auditoria-correcciones ==== */


/* ==== integracion-5 ==== */
/* Auditoría de pantallas B: la ventana de revisión de un documento va en una sola columna (M4); la vista previa de las calculadoras. */
.rev-dialogo .rev-form { display: flex; flex-direction: column; gap: .75rem; }
.rev-dialogo .rev-form .fila { flex-wrap: wrap; }
.calc-cambios li { padding: .35rem 0; }
/* ==== fin integracion-5 ==== */

/* ==== video explicativo ==== */
.video-oteo { margin: 28px auto 8px; max-width: 960px; }
.video-oteo video { width: 100%; height: auto; display: block; border-radius: var(--r-hoja); background: #0b2a36; }
.video-oteo figcaption { font: 14px/1.4 var(--sans); color: var(--tinta-2); margin-top: 8px; text-align: center; }
/* ==== legal-cobro ==== */
/* Mis datos, retracto, modo de prueba de Wompi y la línea del IVA (09/11/2026). */
.modo-prueba { background: #fff4d6; border: 1px solid #e0b44a; color: #5a4300; border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0; }
.md-tabla th { width: 40%; }
.md-lista { list-style: none; padding: 0; margin: .5rem 0; }
.md-lista li { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); overflow-wrap: anywhere; }
.md-lista li:last-child { border-bottom: 0; }
.md-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#md-eliminar { flex-wrap: wrap; gap: .5rem; }
#md-eliminar input { min-height: 44px; flex: 1 1 200px; max-width: 100%; }
#mis-datos .btn, .md-retracto .btn, #lc-admin .btn { min-height: 44px; }
.md-supresion, .md-retracto { overflow-wrap: anywhere; }
.iva-linea, .iva-plan { margin: .35rem 0; }
/* ==== fin legal-cobro ==== */

/* El botón «Converse con el pliego» baja al chat sin que la barra fija tape el título. */
#preguntas { scroll-margin-top: 76px; }
/* ==== estudio-entidad ==== */
.ee-h2 { font-size: 1.15rem; margin: 0 0 .6rem; } .ee-h3 { font-size: 1rem; margin: 1rem 0 .4rem; font-family: var(--sans); }
.ee-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .25rem 1rem; }
.ee-rejilla select, .ee-rejilla input { width: 100%; min-height: 44px; max-width: 100%; }
.ee-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ee-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.ee-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .75rem; border-radius: 18px; background: var(--piedra-2); color: var(--piedra-3); font: 600 13.5px var(--sans); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.ee-chip span { font-size: 1.1rem; line-height: 1; } .ee-chip.fijo { background: #fff; border: 1px solid var(--linea); }
.ee-lecturas { margin: 0 0 .8rem; padding-left: 1.1rem; } .ee-lecturas li { margin: .35rem 0; }
.ee-dosc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem 1.5rem; align-items: start; }
.ee-fig { margin: 0 0 1rem; min-width: 0; } .ee-fig figcaption { font: 600 15px var(--sans); margin-bottom: .35rem; }
.ee-svg { display: block; width: 100%; max-width: 640px; height: auto; font-family: var(--sans); }
.ee-datos summary { cursor: pointer; font: 14px var(--sans); color: var(--piedra); min-height: 44px; display: flex; align-items: center; }
.ee-desliza { overflow-x: auto; max-width: 100%; }
.ee-aviso { border-left: 4px solid #e8771e; padding-left: .7rem; }
.ee-viene { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .8rem; }
.ee-tarjeta { margin: 0; border-top: 4px solid #0e5a76; }
.ee-acciones { margin: .4rem 0 1rem; } .ee-acciones .btn, .ee-filtros .btn, .ee-lista-cab .btn, [data-ee-pag] { min-height: 44px; }
.ee-lista-cab { align-items: center; gap: .6rem; flex-wrap: wrap; } .ee-lista-cab select { min-height: 44px; }
.ee-c { display: flex; gap: .6rem; align-items: flex-start; } .ee-c > div { min-width: 0; overflow-wrap: anywhere; }
.ee-c .t { margin: 0 0 .2rem; } .ee-c .m { font: 13.5px/1.6 var(--sans); color: var(--tinta-2); }
.ee-c.quitado { opacity: .55; } .ee-c.quitado .t { text-decoration: line-through; }
.ee-marca { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.ee-marca input { width: 22px; height: 22px; }
.ee-ent { display: flex; flex-direction: column; padding: .55rem 0; min-height: 44px; text-decoration: none; }
.ee-informe .ee-svg { max-width: 520px; } .ee-informe .ee-datos { display: none; } .ee-portada { border-bottom: 2px solid #0e5a76; padding-bottom: .6rem; }
@media print { .ee-informe .ee-fig, .ee-informe .ee-tarjeta { break-inside: avoid; } .ee-informe .inf-seccion { break-inside: auto; } .ee-informe svg rect { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* ==== fin estudio-entidad ==== */
/* ==== tienda-virtual ==== */
.tv-precio input[type=number] { min-height: 44px; max-width: 12rem; font-size: 1.1rem; }
.tv-variantes .t { font-size: 15.5px; font-weight: 600; text-transform: none; }
.tv-compras > li { padding: 10px 0; } .tv-compras .t { margin: 0 0 .15rem; font-weight: 600; overflow-wrap: anywhere; } .tv-compras .m { color: var(--tinta-2); overflow-wrap: anywhere; }
/* ==== fin tienda-virtual ==== */

/* ==== corr-estudio tienda ==== */
.tv-chip { min-height: 44px; }
a.tv-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; }
.tv-precio input#tv-costo { min-height: 44px; max-width: 12rem; font-size: 1.1rem; }
.tv-precio .tabla td { overflow-wrap: anywhere; }
.tv-error { color: #a4321b; }
.tv-comparar { max-width: 22rem; margin: .25rem 0 .75rem; }
.tv-comparar select { min-height: 44px; }
.tv-notas { margin: .5rem 0 0; padding-left: 1.1rem; }
.tv-variantes .etq { white-space: normal; }
[data-tv-unidad] { min-height: 44px; }
/* ==== fin corr-estudio tienda ==== */
/* ==== corr-estudio entidad ==== */
/* Chips de filtro tocables con el dedo (44 px); selector de dependencias del NIT; informe compacto al imprimir (gráficas de a dos, sin
   tablas repetidas) y sin la franja «Confirme su correo» en el PDF (auditoría de pantallas 2: M2, M4, M11). */
.ee-chip { min-height: 44px; padding: .35rem .9rem; border-radius: 22px; }
.ee-chip span { font-size: 1.25rem; }
.ee-deps { margin: .4rem 0 1rem; } .ee-deps select { width: 100%; min-height: 44px; max-width: 100%; margin-top: .3rem; font-size: 16px; }
.ee-org b { color: var(--piedra); }
.inf-dosc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .6rem 1.2rem; align-items: start; }
.ee-informe .ee-svg { max-width: 100%; }
@media print {
  .franja-correo { display: none !important; }
  .ee-informe .inf-dosc { grid-template-columns: 1fr 1fr; gap: 4mm 6mm; }
  .ee-informe .ee-fig { break-inside: avoid; margin-bottom: 2mm; } .ee-informe .ee-fig figcaption { font-size: 10pt; }
  .ee-informe .ee-viene { grid-template-columns: 1fr 1fr; gap: 3mm; } .ee-informe .ee-tarjeta { padding: 2mm 3mm; }
  .ee-informe .inf-seccion { break-inside: auto; margin-top: 4mm; } .ee-informe .inf-seccion h3 { break-after: avoid; }
  .ee-informe .ee-lecturas li { margin: 1mm 0; } .ee-informe .tabla { font-size: 9pt; } .ee-informe .ee-desliza { overflow: visible; }
  .ee-informe .ee-datos { display: none !important; }
}
/* ==== fin corr-estudio entidad ==== */
/* ==== bot-correo ==== */
.bc-estado { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.bc-estado dt { color: var(--tinta-2); font-weight: 600; }
.bc-estado dd { margin: 0; overflow-wrap: anywhere; }
.bc-pasos { padding-left: 1.3em; margin: 10px 0 14px; }
.bc-pasos li { margin: 0 0 6px; }
.bc-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.bc-campo input { min-height: 44px; }
.bc-botones .btn, #bc-app .btn, #bc-filtro .btn { min-height: 44px; }
.bc-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.bc-check input { width: 22px; height: 22px; }
.bc-tit { margin: 18px 0 8px; font-size: 1.15rem; }
.bc-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.bc-lista li { padding: 10px 0; border-bottom: 1px solid var(--linea-2); overflow-wrap: anywhere; }
.bc-lista li .btn { margin-top: 6px; min-height: 44px; }
#bc-filtro select, #bc-filtro input { min-height: 44px; min-width: 0; flex: 1 1 180px; }
.bc-extracto { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-campo); padding: 10px; max-height: 360px; overflow: auto; font-family: var(--sans); font-size: .95rem; }
@media (max-width: 560px) { .bc-estado { grid-template-columns: 1fr; gap: 2px; } .bc-estado dd { margin-bottom: 8px; }
  .bc-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bc-cifras .hoja { padding: 12px; } .bc-cifras h3 { font-size: 1rem; } .bc-cifras .cifra-88 { font-size: 2rem; } }
/* ==== fin bot-correo ==== */
/* ==== filtro-entidades ==== */
/* Buscador con filtros: lista de entidades con tipo, lugar, contratos y valor. */
.fe-rejilla { margin-top: .75rem; }
.fe-lista .fe-e { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: center; padding: .5rem 0; }
.fe-lista .fe-e:not(:has(.ee-marca)) { grid-template-columns: minmax(0, 1fr) auto; }
.fe-ent { display: flex; flex-direction: column; gap: .15rem; min-height: 44px; justify-content: center; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.fe-ent .etq { margin-right: .35rem; }
.fe-cifras { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; text-align: right; white-space: nowrap; }
.fe-activo { background: var(--piedra); color: #fff; }
.ee-chip b { font-weight: 700; margin-left: .15rem; }
.fe-off { pointer-events: none; opacity: .45; }
.fe-tipos summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.fe-atajo b { color: var(--piedra-3); }
@media (max-width: 560px) { .fe-lista .fe-e { grid-template-columns: auto minmax(0, 1fr); } .fe-lista .fe-e:not(:has(.ee-marca)) { grid-template-columns: minmax(0, 1fr); }
  .fe-cifras { grid-column: 1 / -1; flex-direction: row; gap: 1rem; justify-content: flex-start; padding-left: 0; } .fe-lista .fe-e:has(.ee-marca) .fe-cifras { padding-left: 2.6rem; } }
/* Comparar entidades lado a lado. */
.fe-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.fe-comp .hoja { margin: 0; min-width: 0; } .fe-comp h3 { margin-top: 0; overflow-wrap: anywhere; }
.fe-comp dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; font: 15px var(--sans); }
.fe-comp dd { margin: 0; text-align: right; font-weight: 600; } .fe-comp ol { padding-left: 1.2rem; margin: .3rem 0; font: 14px var(--sans); } .fe-comp ol li { overflow-wrap: anywhere; }
/* Gráficas que responden: colores por clase (la CSP no deja estilos en línea), resaltado y burbuja. */
.g-c0 { fill: #0e5a76; background: #0e5a76; } .g-c1 { fill: #e8771e; background: #e8771e; } .g-c2 { fill: #2a6f47; background: #2a6f47; }
.g-c3 { fill: #8a5a9e; background: #8a5a9e; } .g-c4 { fill: #b8742a; background: #b8742a; } .g-c5 { fill: #4f8fa8; background: #4f8fa8; } .g-c6 { fill: #a59f92; background: #a59f92; }
/* Dona y leyenda lado a lado si caben; si la columna es angosta (tres gráficas por fila o el celular), la leyenda va debajo. */
.g-dona-caja { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; }
.g-dona { flex: 0 0 210px; width: 210px; max-width: 100%; height: auto; display: block; font-family: var(--sans); overflow: visible; }
.g-dona-caja .g-leyenda { flex: 1 1 240px; min-width: min(100%, 240px); }
.g-trozo { stroke: var(--hoja); stroke-width: 2; cursor: pointer; transition: transform 160ms ease-out, opacity 160ms; outline: none; }
.g-trozo[role="img"] { cursor: default; }
.g-dona-caja:has(.g-trozo.activo) .g-trozo:not(.activo) { opacity: .55; }
.g-trozo.activo, .g-trozo:focus-visible { stroke: var(--tinta); stroke-width: 2.5; }
.g-centro { font: 700 22px var(--sans); fill: var(--tinta); pointer-events: none; } .g-centro.g-centro-largo { font-size: 17px; } .g-centro-sub { font: 11px var(--sans); fill: var(--tinta-2); pointer-events: none; }
.g-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.g-ley { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: .5rem; align-items: center; width: 100%; min-height: 40px; padding: .3rem .5rem; border: 1px solid transparent; border-radius: var(--r-campo); background: none; font: 14px var(--sans); text-align: left; color: var(--tinta); cursor: pointer; }
.g-ley[aria-disabled="true"] { cursor: default; }
.g-ley:hover, .g-ley.activo { background: var(--piedra-2); border-color: var(--linea); }
.g-m { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.g-ley-t { overflow-wrap: anywhere; } .g-ley-n { font-weight: 600; white-space: nowrap; }
.g-barra { cursor: pointer; outline: none; } .g-barra[role="img"] { cursor: default; }
.g-toque { fill: transparent; } .g-barra.activo .g-toque, .g-barra:focus-visible .g-toque { fill: var(--piedra-2); }
.g-barra.activo .g-b, .g-barra:focus-visible .g-b { fill: var(--piedra-3); } .g-barra.activo .g-b.g-c1 { fill: #b85a10; }
.g-barra:focus-visible .g-toque { stroke: var(--ocre); stroke-width: 2; }
.g-num { fill: var(--tinta); } .g-etq { fill: var(--tinta-2); } .g-etq-h { fill: var(--tinta); } .g-eje { stroke: var(--linea); }
.g-burbuja { position: absolute; z-index: 30; max-width: min(300px, calc(100vw - 16px)); padding: .5rem .7rem; background: var(--tinta); color: #fff; border-radius: var(--r-boton); font: 14px/1.35 var(--sans); pointer-events: none; display: flex; flex-direction: column; gap: .1rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.g-burbuja[hidden] { display: none; } .g-burbuja b { font-weight: 700; overflow-wrap: anywhere; } .g-pista { color: #f6ead8; font-size: 13px; margin-top: .15rem; }
.ee-seg { border-left: 3px solid var(--ocre); padding: .25rem .75rem; margin: .5rem 0 .75rem; background: var(--ocre-2); border-radius: var(--r-campo); }
.ee-seg .ee-chips { margin: 0; } .ee-seg p.ui { margin: .3rem 0; }
@media (max-width: 560px) { .g-dona { flex-basis: 230px; width: 230px; } .g-dona-caja .g-leyenda { flex-basis: 100%; } .g-ley { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .g-trozo { transition: none; } }
@media print { .g-burbuja { display: none !important; } .g-trozo, .g-ley { cursor: default; } .g-trozo { opacity: 1 !important; transform: none !important; } .g-dona { flex-basis: 150px; width: 150px; } .g-ley { min-height: 0; padding: 1px 0; font-size: 9pt; }
  .g-c0, .g-c1, .g-c2, .g-c3, .g-c4, .g-c5, .g-c6, .g-m { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ee-seg { display: none; } }
/* ==== fin filtro-entidades ==== */
/* ==== testimonios ==== */
/* Portada: tarjetas de opiniones reales (deslizables en el celular) o el bloque honesto sin opiniones. */
.testimonios .ts-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.ts-tarjeta { margin: 0; display: flex; flex-direction: column; gap: 10px; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 18px 18px 16px; min-width: 0; }
.ts-estrellas { color: var(--ocre); font-size: 17px; letter-spacing: 2px; line-height: 1; font-family: var(--sans); } .ts-apagadas { color: var(--linea); }
.ts-cita { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; white-space: pre-line; flex: 1; }
.ts-cita::before { content: "«"; color: var(--ocre-t, var(--ocre)); } .ts-cita::after { content: "»"; color: var(--ocre-t, var(--ocre)); }
.ts-quien { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--linea-2); padding-top: 10px; font-family: var(--sans); font-size: 14px; min-width: 0; }
.ts-quien img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--papel); }
.ts-datos { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; } .ts-datos b { color: var(--tinta); } .ts-datos span { color: var(--tinta-2); } .ts-lugar { font-size: 13px; }
.ts-aviso { margin-top: 10px; } .ts-acc { margin: 12px 0 0; } .ts-acc .btn { min-height: 44px; }
.ts-honesto { max-width: 62ch; border-left: 3px solid var(--ocre); padding: 4px 0 4px 18px; }
.ts-honesto p { margin: 0 0 10px; } .ts-dato { margin-top: 14px !important; }
@media (max-width: 760px) {
  /* contain + width: sin ellos, con tres tarjetas el ancho mínimo de la fila empujaba TODA la portada a 453 px en un celular de 390 (humo 10/11; mismo remedio que .calc-pestanas). */
  .testimonios .ts-fila { contain: inline-size; width: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .testimonios .ts-tarjeta { flex: 0 0 86%; scroll-snap-align: start; }
}
/* App: invitación discreta, formulario y Plataforma. */
.ts-invita { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; background: var(--piedra-2); border-left-color: var(--piedra); }
.ts-invita-acc { display: flex; gap: 8px; flex-wrap: wrap; } .ts-invita .btn { min-height: 44px; }
.ts-cal { border: 0; padding: 0; margin: 6px 0; } .ts-cal legend { font-family: var(--sans); font-weight: 600; padding: 0; margin-bottom: 6px; }
.ts-cal-op { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-cal-k { position: relative; } .ts-cal-k input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ts-cal-k span { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--linea); border-radius: var(--r-boton); background: var(--hoja); font-family: var(--sans); font-weight: 700; font-size: 17px; }
.ts-cal-k input:checked + span { background: var(--piedra); border-color: var(--piedra); color: #fff; } .ts-cal-k input:focus-visible + span { outline: 2px solid var(--ocre); outline-offset: 2px; }
.ts-form-hoja textarea { width: 100%; min-height: 110px; } .ts-form-hoja input:not([type=checkbox]):not([type=radio]) { width: 100%; min-height: 44px; }
.ts-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .ts-campos { grid-template-columns: 1fr; } }
.ts-casilla { display: flex; gap: 10px; align-items: flex-start; font-family: var(--sans); font-size: 14.5px; margin: 8px 0; min-height: 44px; cursor: pointer; }
.ts-casilla input { width: 22px; height: 22px; flex: none; margin-top: 1px; } .ts-autoriza { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-boton); padding: 10px 12px; }
.ts-form-hoja .fila .btn { min-height: 44px; }
.ts-admin-lista { list-style: none; margin: 0; padding: 0; } .ts-admin-op { border: 1px solid var(--linea); border-radius: var(--r-hoja); background: var(--hoja); padding: 14px 16px; margin: 0 0 12px; overflow-wrap: anywhere; }
.ts-admin-op .ts-cita { font-size: 16px; margin: 8px 0; } .ts-admin-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ts-admin-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.ts-admin-acc { gap: 8px; flex-wrap: wrap; align-items: center; } .ts-admin-acc .btn { min-height: 44px; } .ts-orden input { width: 72px; min-height: 44px; }
.ts-editar textarea { width: 100%; }
/* ==== fin testimonios ==== */

/* ==== api-mcp ==== */
/* «Mi cuenta → Conexiones (API)» y la página de documentación #api. */
.am-item { border: 1px solid var(--linea); border-radius: var(--r-hoja); padding: 12px 14px; margin: 10px 0; background: var(--hoja); }
.am-item > p { margin: 6px 0 0; } .am-item .senal { margin: 8px 0 0; }
.am-item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--sans); min-width: 0; }
.am-item-cab code { min-width: 0; }
.am-apagado { background: var(--papel); } .am-apagado .am-item-cab b, .am-apagado .am-item-cab code { color: var(--tinta-2); }
.am-item .fila { gap: 8px; flex-wrap: wrap; }
.am-entregas:not(:empty) { margin-top: 10px; }
.am-form { border-top: 1px solid var(--linea-2); margin-top: 14px; padding-top: 12px; }
.am-grupo { border: 0; padding: 0; margin: 10px 0; min-width: 0; }
.am-grupo legend { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.am-op { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; cursor: pointer; }
.am-op input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.am-una-vez { margin: 10px 0; } .am-una-vez p { margin: 6px 0 0; }
.am-secreto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.am-secreto code { font-size: 15px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 6px; padding: 6px 10px; min-width: 0; user-select: all; }
/* La rejilla con columna minmax(0, 1fr) impide que una línea larga de código ensanche la página (pasaba en la vista pública a 390 px). */
.am-codigo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; margin: 8px 0 12px; }
.am-codigo pre { justify-self: stretch; }
#conexiones code, .hoja[id^="am-d-"] code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.am-codigo pre { margin: 0; padding: 12px 14px; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--r-hoja); overflow-x: auto; white-space: pre; font-size: 13px; line-height: 1.5; -webkit-overflow-scrolling: touch; }
.am-codigo pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: none; padding: 0; border: 0; }
.am-codigo .btn { margin-top: 6px; }
.am-indice { gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.am-pasos { padding-left: 22px; margin: 8px 0; } .am-pasos li { margin: 6px 0; }
details.am-rec > summary { flex-wrap: wrap; font-family: var(--sans); font-size: 15px; font-weight: 400; gap: 4px 10px; }
details.am-rec > summary code { font-weight: 600; }
details.am-rec > summary span { color: var(--tinta-2); flex: 1 1 200px; }
#conexiones, .hoja[id^="am-d-"] { scroll-margin-top: 76px; }
@media (max-width: 640px) {
  .am-codigo pre { font-size: 12px; } .am-secreto code { font-size: 13px; }
  /* Las tablas de la documentación y de Conexiones se apilan en el celular: una fila es un bloque, sin deslizar de lado. */
  .am-apila, .am-apila tbody, .am-apila tr, .am-apila td { display: block; width: auto; }
  .am-apila tr.am-cab { display: none; }
  .am-apila tr { padding: 8px 0; border-top: 1px solid var(--linea-2); } .am-apila tr.am-cab + tr, .am-apila tr:first-child { border-top: 0; }
  .am-apila td { padding: 1px 0 !important; border: 0 !important; overflow-wrap: anywhere; }
  .am-apila td:first-child { font-weight: 600; } .am-apila td:empty { display: none; }
  .am-apila td[data-t]::before { content: attr(data-t) ": "; color: var(--tinta-2); }
}
/* ==== fin api-mcp ==== */

/* ==== garantias ==== */
.gar { padding: .5rem 0; border-top: 1px solid var(--linea-2); } .gar:first-child, h3 + .gar { border-top: 0; padding-top: 0; }
.gar p { margin: 0; overflow-wrap: anywhere; } .gar .senal { margin-top: .35rem; }
.gar-vig { font-family: var(--sans); font-size: 14.5px; }
.gar-doc { font: 12.5px/1.45 var(--sans); color: var(--tinta-2); margin-top: 2px; overflow-wrap: anywhere; }
.gar-lista { margin-bottom: .5rem; } .gar-lista p { margin: 0 0 .25rem; }
.gar-lista ul { margin: .25rem 0 .45rem; padding-left: 1.15rem; } .gar-lista li { margin: .35rem 0; overflow-wrap: anywhere; }
.gar-aviso p { margin: 0; overflow-wrap: anywhere; } .gar-aviso a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* ==== fin garantias ==== */