/* Radar HG con la marca de Soluciones de Ingeniería Hofmann García (02-MARCA/identidad-visual.html):
   papel, grafito, teal de acento (uno por pieza) e índigo de apoyo; Archivo para texto e IBM Plex Mono para cifras y códigos.
   Estructura propia: navegación arriba, franja de cifras como el resumen diario y lista agrupada por cierre. */
:root {
  --papel: #F1F2EF; --superficie: #FBFBF9; --superficie-2: #E8EAE5; --blanco: #ffffff;
  --tinta: #16191C; --tinta-2: #454B4C; --tenue: #767C79;
  --linea: #D5D8D2; --linea-suave: #E4E6E1;
  --acento: #14646D; --acento-suave: #DCECEC; --acento-linea: #A9DBDD; --acento-oscuro: #0E4A51;
  --apoyo: #2A3A80; --apoyo-suave: #DFE3F5;
  --urgente: #B93A2B; --urgente-suave: #F7E3DF;
  --aviso: #8A5A00; --aviso-suave: #FBF0D3;
  --n3: #14646D; --n2: #3E8A92; --n1: #7FAEB3; --n0: #B7BCB5;
  --sombra: 0 1px 2px rgb(22 25 28 / 6%);
  --sombra-alta: 0 18px 50px rgb(22 25 28 / 18%);
  /* Series de los gráficos: validadas con el método dataviz (CVD y contraste) sobre --superficie, claro y oscuro. */
  --serie-agil: #1F9AA0; --serie-lic: #5566D9;
  /* Puntos sobre la pantalla del radar (#072B2F, igual en modo claro y oscuro): validados con dataviz. */
  --radar-agil: #C8801A; --radar-lic: #7E78F0;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #121516; --superficie: #191D1E; --superficie-2: #202526; --blanco: #1E2324;
    --tinta: #E7E9E5; --tinta-2: #B3BAB6; --tenue: #848C88;
    --linea: #2C3234; --linea-suave: #252A2C;
    --acento: #3FAEB4; --acento-suave: #0E2E31; --acento-linea: #2E5F63; --acento-oscuro: #0B2427;
    --apoyo: #7C8FE8; --apoyo-suave: #1A2044;
    --urgente: #F07A66; --urgente-suave: #3A1E19; --aviso: #F0C24E; --aviso-suave: #332910;
    --n3: #3FAEB4; --n2: #2F858B; --n1: #2A5F63; --n0: #3D4547;
    --serie-agil: #22A3A9; --serie-lic: #7183EC;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%); --sombra-alta: 0 18px 50px rgb(0 0 0 / 55%);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--sans); color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
code, .mono { font-family: var(--mono); }
[hidden] { display: none !important; }
.oculto-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera-fila, .secciones { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.cabecera-fila { display: flex; align-items: center; gap: 18px; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; flex: none; }
.marca-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--acento); display: grid; place-items: center; }
.marca-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.9; }
.marca-ico circle { fill: #fff; stroke: none; }
.logo .hg { height: 22px; width: auto; color: var(--acento); }
.logo .sep { width: 1px; height: 24px; background: var(--linea); }
.marca-txt { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; }
.buscador { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); color: var(--tenue); }
.buscador:focus-within { border-color: var(--acento); background: var(--superficie); }
.buscador input { flex: 1; border: 0; outline: 0; background: none; color: var(--tinta); min-width: 0; }
.derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.estado-datos { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--tinta-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.estado-datos:hover { background: var(--superficie-2); }
.estado-datos i { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); }
.estado-datos.ok i { background: #2E9E6A; box-shadow: 0 0 0 3px rgb(46 158 106 / 18%); }
.estado-datos.mal i { background: var(--urgente); }
.icono-btn { position: relative; width: 36px; height: 36px; border-radius: 9px; border: 0; background: none; display: grid; place-items: center; color: var(--tinta-2); }
.icono-btn:hover { background: var(--superficie-2); color: var(--tinta); }
.icono-btn .punto { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--acento); color: #fff; font: 600 10px/16px var(--mono); text-align: center; }
.usuario { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 4px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta-2); }
.usuario .iniciales { width: 28px; height: 28px; border-radius: 7px; background: var(--apoyo-suave); color: var(--apoyo); font: 600 12px/28px var(--mono); text-align: center; }
.usuario .empresa { font-size: 13px; font-weight: 600; color: var(--tinta); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.secciones { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.secciones a { display: flex; align-items: center; gap: 6px; padding: 10px 12px 12px; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.secciones a:hover { color: var(--tinta); }
.secciones a.activo { color: var(--acento); border-bottom-color: var(--acento); }
.n { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--tenue); }
.n:empty { display: none; }
.secciones a.activo .n { color: var(--acento); }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px 60px; }

/* ---------- encabezado de la vista y cifras ---------- */
.encabezado { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: end; padding: 28px 0 18px; }
.encabezado h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.encabezado p { margin: 4px 0 0; color: var(--tinta-2); }
.segmentos { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.segmentos a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-2); text-decoration: none; font-size: 13px; font-weight: 600; background: var(--superficie); }
.segmentos a.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.segmentos a.activo .n { color: var(--papel); opacity: .7; }
.cifras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); overflow: hidden; }
.cifras > div { padding: 14px 18px; border-left: 1px solid var(--linea-suave); }
.cifras > div:first-child { border-left: 0; }
.cifras b { display: block; font: 600 24px/1.15 var(--mono); letter-spacing: -0.02em; color: var(--tinta); }
.cifras b i { font-style: normal; color: var(--tenue); font-weight: 400; }
.cifras span { font-size: 12px; color: var(--tenue); }
.cifras .alerta b { color: var(--urgente); }
.cifras .destaca b { color: var(--acento); }

/* ---------- herramientas ---------- */
.herramientas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 14px; border-bottom: 1px solid var(--linea); }
.tipos { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--superficie-2); }
.tipos button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.tipos button.activo { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.btn { height: 36px; padding: 0 13px; border: 1px solid var(--linea); border-radius: 9px; background: var(--superficie); display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--tinta); text-decoration: none; }
.btn:hover { border-color: var(--tenue); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .n { color: var(--acento); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.primario:hover { background: var(--acento-oscuro); }
.btn.peligro { color: var(--urgente); }
.filtro-chip { height: 30px; padding: 0 8px 0 11px; border-radius: 15px; border: 1px solid var(--acento-linea); background: var(--acento-suave); color: var(--acento); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.filtro-chip svg { width: 14px; height: 14px; }
.derecha-h { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.busca-lista { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 9px; background: var(--superficie); color: var(--tenue); }
.busca-lista input { border: 0; outline: 0; background: none; width: 200px; color: var(--tinta); }
.menu { position: absolute; z-index: 40; min-width: 230px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 6px; }
.menu button, .menu label { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; }
.menu button:hover, .menu label:hover { background: var(--superficie-2); }
.menu .titulo-menu { padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); }
.menu .campo-menu { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.menu .campo-menu input, .menu .campo-menu select { height: 36px; border: 1px solid var(--linea); border-radius: 8px; padding: 0 9px; background: var(--superficie); }

/* ---------- lista ---------- */
.grupo { margin-top: 6px; }
.grupo-titulo { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.grupo-titulo span { font-family: var(--mono); font-weight: 500; color: var(--tenue); letter-spacing: 0; }
.grupo-titulo.urgente { color: var(--urgente); }
.op { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: start; padding: 14px 16px; margin: 0 -16px; border-radius: 12px; cursor: pointer; }
.op + .op::before { content: ""; position: absolute; top: 0; left: 88px; right: 16px; border-top: 1px solid var(--linea-suave); }
.op h3 mark, .ficha h2 mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
.op h3 mark.resta, .ficha h2 mark.resta { text-decoration-color: var(--urgente); text-decoration-style: wavy; font-weight: inherit; }
.op:hover, .op:focus-visible { background: var(--superficie); outline: 0; box-shadow: var(--sombra); }
.op:hover::before, .op:hover + .op::before { opacity: 0; }
.op.seleccionada { background: var(--acento-suave); }
.calce { width: 56px; height: 56px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; font-family: var(--mono); }
.calce b { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.calce small { font-size: 10px; opacity: .8; margin-left: 1px; font-weight: 500; }
.calce em { font: 600 9px/1 var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; opacity: .9; white-space: nowrap; }
.calce.n3 { background: var(--n3); } .calce.n2 { background: var(--n2); } .calce.n1 { background: var(--n1); } .calce.n0 { background: var(--n0); }
.op-cuerpo { min-width: 0; }
.op h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op:not(.sin-abrir) h3 { font-weight: 500; color: var(--tinta-2); }
.punto-nuevo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); margin: 0 8px 2px 0; vertical-align: middle; }
.op-org { margin: 3px 0 7px; font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-etq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.op-etq code { font-size: 11.5px; color: var(--tenue); }
.tipo { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.tipo.agil { background: var(--acento-suave); color: var(--acento); }
.tipo.lic { background: var(--apoyo-suave); color: var(--apoyo); }
.etq { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--superficie-2); color: var(--tinta-2); }
.etq svg { width: 12px; height: 12px; }
.etq.nueva { background: var(--tinta); color: var(--papel); }
.etq.visita { background: var(--aviso-suave); color: var(--aviso); }
.etq.guardada { background: var(--acento-suave); color: var(--acento); }
.op-datos { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 128px; text-align: right; }
.op-datos .monto { font: 600 16px/1.3 var(--mono); letter-spacing: -0.02em; }
.op-datos .monto.nd { font-size: 13px; font-weight: 400; color: var(--tenue); }
.op-datos .cierre { font-size: 12.5px; color: var(--tinta-2); }
.op-datos .falta { font: 500 11.5px/20px var(--mono); padding: 0 7px; border-radius: 6px; background: var(--superficie-2); color: var(--tinta-2); }
.op-datos .falta.urgente { background: var(--urgente-suave); color: var(--urgente); }
.acciones-fila { position: absolute; right: 150px; top: 12px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.op:hover .acciones-fila, .op:focus-within .acciones-fila { opacity: 1; }
.acciones-fila button { width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); display: grid; place-items: center; color: var(--tinta-2); }
.acciones-fila button:hover { color: var(--tinta); border-color: var(--tenue); }
.acciones-fila button.on { color: var(--acento); border-color: var(--acento-linea); }
.acciones-fila button.on svg { fill: var(--acento); }
.bloque { margin-top: 8px; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bloque-cab .grupo-titulo { margin-bottom: 6px; }
.bloque-vacio { color: var(--tenue); margin: 4px 0 10px; font-size: 14px; }
.btn-chico { height: 30px; padding: 0 10px; font-size: 12px; }
.plegado { margin-top: 26px; border-top: 1px solid var(--linea); padding-top: 14px; }
.plegado summary { cursor: pointer; font-weight: 600; color: var(--acento); list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.plegado summary::-webkit-details-marker { display: none; }
.plegado summary::before { content: "▸"; transition: transform .15s; }
.plegado[open] summary::before { transform: rotate(90deg); }
.pie { max-width: 1180px; margin: 0 auto; padding: 22px 24px 40px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie-marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.pie-marca .hg-pie { height: 26px; width: auto; }
.pie-marca b { display: block; font-size: 14px; letter-spacing: .06em; }
.pie-marca span { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apoyo); }
.pie p { margin: 0; max-width: 520px; font-size: 12px; color: var(--tenue); }
.de-hg { margin: -4px 0 4px; font-size: 13px; color: var(--tinta-2); }
.hg-mini { height: 11px; width: auto; vertical-align: -1px; color: var(--acento); margin-right: 4px; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 22px 0 0; color: var(--tinta-2); font-size: 13px; font-family: var(--mono); }
.vacio { padding: 70px 20px; text-align: center; color: var(--tinta-2); }
.vacio h2 { color: var(--tinta); font-size: 19px; margin: 0 0 6px; letter-spacing: -0.02em; }
.esqueleto { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-2), var(--linea-suave), var(--superficie-2)); background-size: 200% 100%; animation: brillo 1.2s infinite; }
.op.cargando { cursor: default; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- ficha (panel lateral) ---------- */
.velo { position: fixed; inset: 0; background: rgb(22 25 28 / 30%); z-index: 40; }
.ficha { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(600px, 100%); background: var(--superficie); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; animation: entra .18s ease-out; }
@keyframes entra { from { transform: translateX(28px); opacity: 0; } }
.ficha header { padding: 20px 24px 16px; border-bottom: 1px solid var(--linea); }
.ficha header .fila-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ficha header .fila-top .calce { width: 56px; height: 50px; border-radius: 10px; }
.ficha .titulo-original { margin: 6px 0 0; font-size: 12px; color: var(--tenue); font-family: var(--mono); }
.ficha header .fila-top .cerrar { margin-left: auto; }
.ficha h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.ficha .org-f { color: var(--tinta-2); margin-top: 6px; font-size: 14px; }
.ficha .cuerpo { flex: 1; overflow-y: auto; padding: 20px 24px; }
.ficha .datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.ficha .dato { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; background: var(--blanco); }
.ficha .dato small { display: block; color: var(--tenue); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ficha .dato b { font: 600 15px/1.4 var(--mono); }
.ficha .dato.alerta { border-color: var(--aviso); background: var(--aviso-suave); }
.ficha h4 { margin: 22px 0 8px; font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.ficha .motivos { margin: 0; padding-left: 18px; color: var(--tinta-2); }
.ficha .producto { border-bottom: 1px solid var(--linea-suave); padding: 9px 0; }
.ficha .producto small { color: var(--tinta-2); display: block; }
.ficha .desc { white-space: pre-line; color: var(--tinta-2); margin: 0 0 8px; }
.ficha .adjunto { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linea-suave); text-decoration: none; }
.ficha .adjunto:hover { text-decoration: underline; }
.ficha footer { padding: 14px 24px; border-top: 1px solid var(--linea); display: flex; gap: 8px; flex-wrap: wrap; }
.ficha footer .primario { margin-left: auto; }
.ficha textarea { width: 100%; min-height: 72px; border: 1px solid var(--linea); border-radius: 9px; padding: 9px 11px; background: var(--blanco); resize: vertical; }
.sub { color: var(--tinta-2); font-size: 12.5px; }
.problemas { color: var(--urgente); }

/* ---------- novedades ---------- */
.novedades { right: 16px; top: 58px; width: 380px; max-height: 70vh; overflow-y: auto; }
.novedades .nov { align-items: flex-start; }
.novedades .nov .calce { width: 44px; height: 44px; border-radius: 9px; flex: none; }
.novedades .nov .calce b { font-size: 14px; }
.novedades .nov .calce em { font-size: 7.5px; }
.novedades .nov small { color: var(--tinta-2); }

/* ---------- páginas y formularios ---------- */
.pagina { padding: 28px 0 40px; }
.pagina h1 { font-size: 28px; letter-spacing: -0.03em; margin: 0 0 4px; }
.pagina .bajada { color: var(--tinta-2); margin: 0 0 22px; max-width: 760px; }
.tarjeta { border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; max-width: 860px; background: var(--superficie); }
.tarjeta h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.tarjeta p.ayuda { margin: 0 0 12px; color: var(--tinta-2); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--linea); border-radius: 10px; min-height: 48px; align-items: center; background: var(--blanco); }
.chips .chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 7px; background: var(--acento-suave); color: var(--acento); font-weight: 600; font-size: 13px; }
.chips.rojo .chip { background: var(--urgente-suave); color: var(--urgente); }
.chips .chip button { border: 0; background: none; color: inherit; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; padding: 0; }
.chips .chip button:hover { background: rgb(0 0 0 / 8%); }
.chips .chip button svg { width: 13px; height: 13px; }
.chips input { flex: 1; min-width: 160px; border: 0; outline: 0; height: 28px; background: none; }
.grilla-regiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; }
.grilla-regiones label, .interruptor { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.grilla-regiones label:hover { background: var(--superficie-2); }
.fila-campos { display: flex; gap: 14px; flex-wrap: wrap; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1; }
.campo span { font-size: 13px; font-weight: 600; }
.campo input, .campo select { height: 40px; border: 1px solid var(--linea); border-radius: 9px; padding: 0 11px; background: var(--blanco); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--acento); }
.acciones-form { display: flex; gap: 10px; align-items: center; max-width: 860px; }
.estado-lista { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; }
.estado-lista dt { color: var(--tinta-2); font-family: var(--mono); font-size: 13px; }
.estado-lista dd { margin: 0; font-weight: 600; }

/* ---------- ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, var(--acento-suave), var(--papel) 55%); }
.ingreso form { width: min(420px, 100%); background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 32px 30px; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; gap: 14px; }
.ingreso .logo .hg { height: 28px; }
.ingreso h1 { font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; margin: 6px 0 4px; }
.ingreso .btn { height: 42px; justify-content: center; font-size: 14px; }
.ingreso .error { color: var(--urgente); min-height: 20px; margin: 0; }
.ingreso .pie-ingreso { margin: 4px 0 0; font-size: 12px; color: var(--tenue); text-align: center; }

.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra-alta); font-weight: 500; }

/* ---------- pantallas chicas ---------- */
@media (max-width: 900px) {
  .estado-datos .txt, .usuario .empresa { display: none; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifras > div:nth-child(3) { border-left: 0; }
  .cifras > div:nth-child(n+3) { border-top: 1px solid var(--linea-suave); }
}
@media (max-width: 640px) {
  .cabecera-fila, .secciones, main { padding-left: 16px; padding-right: 16px; }
  .cabecera-fila { gap: 10px; }
  .buscador { display: none; }
  .marca-txt { font-size: 17px; }
  .encabezado { grid-template-columns: 1fr; padding-top: 20px; }
  .encabezado h1 { font-size: 24px; }
  .derecha-h { margin-left: 0; width: 100%; }
  .busca-lista { flex: 1; }
  .busca-lista input { width: 100%; }
  .op { grid-template-columns: 48px 1fr; gap: 12px; margin: 0 -8px; padding: 12px 8px; }
  .op + .op::before { left: 68px; right: 8px; }
  .calce { width: 48px; height: 48px; border-radius: 10px; }
  .calce b { font-size: 15px; }
  .calce em { font-size: 8px; }
  .pie { padding: 20px 16px 32px; }
  .op-datos { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; text-align: left; }
  .acciones-fila { display: none; }
  .ficha .datos { grid-template-columns: 1fr; }
}

/* ---------- radar y panorama ---------- */
.tarjeta-radar { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 28px; align-items: center; margin: 4px 0 22px; padding: 22px 26px;
  border: 1px solid var(--linea); border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, var(--acento-suave), var(--superficie) 60%); }
.radar-lienzo { width: 100%; max-width: 460px; aspect-ratio: 480 / 510; margin: 0 auto; }
.radar-lienzo.grande { max-width: 520px; }
.radar-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.radar-grilla line { stroke: #7FE3D8; stroke-opacity: .13; }
.radar-anillo { fill: none; stroke: #7FE3D8; stroke-opacity: .35; stroke-dasharray: 3 4; }
.radar-eje { stroke: #7FE3D8; stroke-opacity: .3; }
.radar-etq { font: 500 10px var(--mono); fill: #A9E6DF; fill-opacity: .8; }
.radar-etq.fuerte { fill: #FFB4A6; fill-opacity: 1; font-weight: 600; }
.radar-lado { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--tinta-2); }
.radar-centro { fill: #DFFCF8; }
.radar-boton { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 40%)); }
.radar-barrido { transform-origin: 240px 240px; animation: barrer 6s linear infinite; pointer-events: none; }
@keyframes barrer { to { transform: rotate(360deg); } }
.punto { cursor: pointer; outline: none; }
.punto .marca { stroke: #072B2F; stroke-width: 1.5; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.punto.agil .marca { fill: var(--radar-agil); } .punto.lic .marca { fill: var(--radar-lic); }
.punto .marca.sin-monto { fill-opacity: .6; }
.punto .marca.nueva { stroke: #ffffff; stroke-width: 1.5; }
.punto:hover .marca, .punto:focus-visible .marca { transform: scale(1.4); }
.punto .blanco { fill: transparent; }
.punto .pulso { fill: none; stroke: #FF7A66; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: latir 1.6s ease-out infinite; }
@keyframes latir { from { opacity: .95; transform: scale(.8); } to { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .radar-barrido, .punto .pulso { animation: none; } .punto .pulso { opacity: .7; } }
.radar-lectura h2 { margin: 2px 0 6px; font-size: 24px; letter-spacing: -0.03em; }
.radar-lectura .ayuda { color: var(--tinta-2); margin: 0 0 14px; font-size: 14px; }
.sobretitulo { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.radar-datos { display: flex; gap: 22px; margin: 0 0 16px; }
.radar-datos dt { font-size: 12px; color: var(--tenue); }
.radar-datos dd { margin: 0; font: 600 22px var(--mono); }
.radar-top { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 4px; }
.radar-top button span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.radar-top button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 10px; background: none; }
.radar-top button:hover { background: var(--superficie-2); }
.radar-top small { display: block; color: var(--tenue); font-size: 12px; }
.calce.mini { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.calce.mini b { font-size: 13px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--tinta-2); margin-top: 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sw.agil { background: var(--serie-agil); } .sw.lic { background: var(--serie-lic); }
.sw.r-agil { background: var(--radar-agil); box-shadow: 0 0 6px var(--radar-agil); } .sw.r-lic { background: var(--radar-lic); box-shadow: 0 0 6px var(--radar-lic); }
.sw.anillo { background: none; border: 1.5px solid #FF7A66; }
.enlace-flecha { display: inline-block; margin-top: 12px; font-weight: 600; text-decoration: none; }
.panorama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.tarjeta-graf { border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); padding: 18px 20px; min-width: 0; }
.tarjeta-graf.ancho { grid-column: 1 / -1; }
.tarjeta-graf header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tarjeta-graf h2 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.tarjeta-graf header p { margin: 3px 0 0; color: var(--tinta-2); font-size: 13px; }
.radar-doble { display: grid; grid-template-columns: minmax(280px, 520px) 1fr; gap: 24px; align-items: center; }
.graf-svg { width: 100%; height: auto; display: block; }
.graf-svg .grilla { stroke: var(--linea-suave); }
.graf-svg .base { stroke: var(--linea); }
.graf-svg .eje { font: 500 10.5px var(--mono); fill: var(--tenue); }
.graf-svg .eje.tenue { opacity: .55; }
.graf-svg .col.agil { fill: var(--serie-agil); } .graf-svg .col.lic { fill: var(--serie-lic); }
.graf-svg .blanco { fill: transparent; cursor: default; }
.graf-svg .blanco:hover { fill: var(--superficie-2); fill-opacity: .5; }
.barras { display: grid; gap: 8px; }
.barra-fila { display: grid; grid-template-columns: minmax(120px, 38%) 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.barra-etq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.barra-pista { display: flex; gap: 2px; height: 14px; }
.barra-pista .seg { display: block; height: 100%; min-width: 3px; }
.barra-pista .seg:last-child { border-radius: 0 4px 4px 0; }
.barra-pista .seg.uno { background: var(--acento); }
.barra-pista .seg.agil { background: var(--serie-agil); } .barra-pista .seg.lic { background: var(--serie-lic); }
.barra-val { text-align: right; font: 500 12.5px var(--mono); color: var(--tinta-2); }
.barra-fila:hover .barra-etq { color: var(--acento); }
.cifra-grande { margin: 4px 0 14px; }
.cifra-grande b { display: block; font: 600 34px/1.1 var(--mono); color: var(--acento); }
.cifra-grande span { font-size: 13px; color: var(--tinta-2); }
.tabla-graf { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-graf th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla-graf td { padding: 7px 8px; border-bottom: 1px solid var(--linea-suave); }
.tabla-graf .num { text-align: right; font-family: var(--mono); }
.tooltip-graf { position: fixed; z-index: 70; max-width: 300px; padding: 10px 12px; border-radius: 10px; background: var(--tinta); color: var(--papel); box-shadow: var(--sombra-alta); pointer-events: none; font-size: 12.5px; display: grid; gap: 3px; }
.tooltip-graf b { font-size: 13px; line-height: 1.3; }
.tooltip-graf span { opacity: .85; }
.tooltip-graf .fila-tip { display: flex; align-items: center; gap: 6px; opacity: 1; }
@media (max-width: 900px) {
  .tarjeta-radar, .radar-doble { grid-template-columns: 1fr; }
  .panorama { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tarjeta-radar { padding: 16px; margin: 0 0 16px; }
  .barra-fila { grid-template-columns: minmax(90px, 40%) 1fr 48px; }
}

/* ---------- IA: análisis de bases y perfil armado con IA ---------- */
.ia-caja .desc { margin: 0 0 10px; }
.ia-form { margin-top: 12px; padding: 14px; border: 1px dashed var(--acento-linea); border-radius: 12px; background: var(--acento-suave); }
.subir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); cursor: pointer; color: var(--acento); font-weight: 600; font-size: 13.5px; }
.subir:hover, .subir:focus-within { border-color: var(--acento); }
.subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subir span { color: var(--tinta); overflow-wrap: anywhere; }
.subir small { color: var(--tenue); font-weight: 400; margin-left: auto; }
.ia-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ia-form .problemas:empty { display: none; }
.ia-proceso { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--apoyo-suave); color: var(--tinta); font-size: 13.5px; }
.girando { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--apoyo); border-right-color: transparent; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }
.ia-veredicto { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--tenue); background: var(--superficie-2); margin-bottom: 10px; }
.ia-veredicto b { font-size: 15px; }
.ia-veredicto span { font-size: 13.5px; color: var(--tinta-2); }
.ia-veredicto.conviene { border-left-color: var(--acento); background: var(--acento-suave); }
.ia-veredicto.revisar { border-left-color: var(--aviso); background: var(--aviso-suave); }
.ia-veredicto.no_conviene { border-left-color: var(--urgente); background: var(--urgente-suave); }
.ia-citas { margin-top: 10px; font-size: 13px; }
.ia-citas summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.ia-citas p { margin: 6px 0; color: var(--tinta-2); }
.ia-bloqueo { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; color: var(--tinta-2); }
.ia-perfil { border-color: var(--acento-linea); }
.ia-perfil .preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.ia-perfil textarea { border: 1px solid var(--linea); border-radius: 9px; padding: 8px 10px; background: var(--blanco); resize: vertical; }
.ia-perfil .acciones-form { margin-top: 12px; flex-wrap: wrap; }
.estado-lista.propuesta dd { font-weight: 400; }
.ia-prueba { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--acento-suave); font-size: 13.5px; }
.ia-prueba .ejemplos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ia-prueba .ejemplos i { font-style: normal; font-family: var(--mono); color: var(--tenue); }
.ia-cargada { display: flex; gap: 10px; align-items: flex-start; max-width: 860px; padding: 12px 14px; border-radius: 10px; background: var(--aviso-suave); color: var(--tinta); font-size: 13.5px; }
.tabla-pruebas { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-pruebas th { text-align: left; font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla-pruebas td { padding: 8px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
@media (max-width: 640px) { .ia-perfil .preguntas { grid-template-columns: 1fr; } .tabla-pruebas td:nth-child(3), .tabla-pruebas th:nth-child(3) { display: none; } }

/* ---------- páginas públicas: producto, ingreso y alta (publico.js) ---------- */
.publico { min-height: 100vh; display: flex; flex-direction: column; background: var(--papel); }
.publico main { flex: 1; max-width: none; width: 100%; margin: 0; padding: 0; }
.publico main.documento { max-width: 780px; margin: 0 auto; padding: 36px 24px 56px; }
.pub-fila { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.pub-cabecera { position: sticky; top: 0; z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.pub-cabecera .pub-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.pub-nav { display: flex; align-items: center; gap: 10px; }
.pub-nav > a:not(.btn) { color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: 14px; padding: 0 6px; }
.pub-nav > a:not(.btn):hover { color: var(--acento); }
.pub-heroe { padding: 56px 0 40px; background: linear-gradient(170deg, var(--acento-suave), var(--papel) 70%); }
.heroe-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.heroe-texto h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.035em; margin: 10px 0 16px; }
.bajada-heroe { font-size: 18px; line-height: 1.5; color: var(--tinta-2); margin: 0 0 24px; max-width: 560px; }
.heroe-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.grande { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 11px; }
.btn.ancho { width: 100%; justify-content: center; height: 42px; font-size: 14px; }
.heroe-nota { margin: 14px 0 0; font-size: 13px; color: var(--tenue); }
.heroe-radar { text-align: center; }
.etq-ejemplo { margin: 6px 0 0; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.pub-seccion { padding: 48px 0; }
.pub-seccion.claro { background: var(--superficie); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pub-seccion h2 { font-size: 28px; letter-spacing: -0.03em; margin: 0 0 22px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pasos li { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; }
.pasos li > b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--acento); color: #fff; font-family: var(--mono); }
.pasos h3, .incluye h3 { font-size: 17px; margin: 12px 0 6px; letter-spacing: -0.01em; }
.pasos p, .incluye p { margin: 0; color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }
.incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.incluye article { border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; background: var(--papel); }
.incluye article h3 { margin-top: 0; }
.incluye article.premium { border-color: var(--acento-linea); background: var(--acento-suave); }
.avisos p { max-width: 820px; color: var(--tinta-2); line-height: 1.55; }
.avisos b { color: var(--tinta); }
.pub-pie { border-top: 1px solid var(--linea); padding: 26px 0 36px; background: var(--superficie); }
.pub-pie .pub-fila { display: grid; gap: 14px; }
.pub-pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.pub-pie p { margin: 0; font-size: 12px; color: var(--tenue); max-width: 760px; }

/* Tabla de planes */
.tabla-planes-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); }
.tabla-planes { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
.tabla-planes th, .tabla-planes td { padding: 11px 14px; border-bottom: 1px solid var(--linea-suave); text-align: center; vertical-align: middle; }
.tabla-planes tbody th { text-align: left; font-weight: 500; color: var(--tinta-2); }
.tabla-planes thead th { vertical-align: bottom; padding-top: 18px; }
.tabla-planes thead b { display: block; font-size: 16px; }
.tabla-planes .precio { display: block; font: 600 22px var(--mono); margin-top: 4px; letter-spacing: -0.02em; }
.tabla-planes .precio.convenir { font: 600 16px var(--sans); letter-spacing: 0; }
.tabla-planes small { display: block; font-size: 11.5px; color: var(--tenue); font-weight: 400; }
.tabla-planes th.destacado { background: var(--acento-suave); border-radius: 12px 12px 0 0; }
.tabla-planes .pronto { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--aviso); background: var(--aviso-suave); padding: 2px 8px; border-radius: 6px; }
.tabla-planes .si { color: var(--acento); font-weight: 700; }
.tabla-planes .no { color: var(--tenue); }
.tabla-planes tfoot td { border-bottom: 0; padding: 14px; }
.nota-planes { font-size: 13px; color: var(--tenue); margin: 12px 0 0; max-width: 820px; }
.pagina-ancha { max-width: 1080px; }

/* Formularios públicos */
.pub-delgado { display: grid; place-items: start center; padding: 40px 16px 60px; background: linear-gradient(170deg, var(--acento-suave), var(--papel) 60%); }
.tarjeta-form { width: min(460px, 100%); background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 30px 28px; box-shadow: var(--sombra-alta); }
.tarjeta-form h1 { font-size: 24px; letter-spacing: -0.025em; margin: 0 0 6px; }
.tarjeta-form .bajada { color: var(--tinta-2); margin: 0 0 18px; }
.tarjeta-form form { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-form .campo { min-width: 0; }
.tarjeta-form .error { color: var(--urgente); margin: 0; }
.tarjeta-form .error:empty { display: none; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.acepto input { margin-top: 3px; }
.ts { min-height: 66px; }
.ts[hidden] { display: none; }
.enlaces-form { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 0; font-size: 13.5px; }
.enlace { border: 0; background: none; padding: 0; color: var(--acento); font-weight: 600; text-decoration: underline; cursor: pointer; }
.revisa p { line-height: 1.55; }
.solo-local { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--aviso-suave); font-size: 13px; }
.reenvio { font-size: 13.5px; margin: 0; }

/* Candados del plan Gratis */
.candado { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--acento-linea); border-radius: 12px; background: var(--acento-suave); }
.candado > .ico { width: 22px; height: 22px; color: var(--acento); margin-top: 2px; }
.candado b { display: block; font-size: 14.5px; }
.candado p { margin: 4px 0 10px; color: var(--tinta-2); font-size: 13.5px; line-height: 1.45; }
.adjunto.sin-enlace { color: var(--tinta-2); cursor: default; }

/* Asistente del primer ingreso */
.bienvenida h1 { margin-bottom: 14px; }
.pasos-asistente { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.pasos-asistente li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 20px; background: var(--superficie-2); color: var(--tinta-2); font-weight: 600; font-size: 13.5px; }
.pasos-asistente li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); font-family: var(--mono); font-size: 12px; }
.pasos-asistente li.activo { background: var(--acento); color: #fff; }
.pasos-asistente li.activo b { color: var(--acento); }
.pasos-asistente li.hecho b { background: var(--acento); color: #fff; }
.asistente { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.asistente-form section { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 20px 22px; }
.asistente-form h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.01em; }
.asistente-form h3 { margin: 18px 0 4px; font-size: 15px; }
.asistente-form h3 small { font-weight: 400; color: var(--tenue); }
.busca-rubro { width: 100%; height: 40px; margin: 10px 0 8px; border: 1px solid var(--linea); border-radius: 9px; padding: 0 11px; background: var(--blanco); }
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sug { border: 1px solid var(--linea); background: var(--superficie); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--tinta-2); text-align: left; }
.sug:hover { border-color: var(--acento); color: var(--acento); }
.nota { margin-top: 12px; }
.acciones-asistente { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.enlace-saltar { margin-left: auto; font-size: 13px; color: var(--tenue); }
.contador { position: sticky; top: 132px; background: #16191C; color: #E9ECE9; border-radius: 16px; padding: 20px; transition: opacity .2s; }
.contador.cargando { opacity: .7; }
.contador .sobretitulo { color: #7FE3D8; }
.contador .cuenta b { display: block; font: 600 52px/1.05 var(--mono); letter-spacing: -0.03em; margin: 6px 0; color: #fff; }
.contador .cuenta span { color: #B9C1BD; font-size: 14px; line-height: 1.45; }
.contador ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.contador li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #DDE6E3; line-height: 1.35; }

@media (max-width: 900px) {
  .heroe-grid, .asistente { grid-template-columns: 1fr; }
  .pasos, .incluye { grid-template-columns: 1fr; }
  .contador { position: static; }
  .ocultar-movil { display: none; }
}
@media (max-width: 640px) {
  .pub-fila { padding: 0 16px; }
  .pub-heroe { padding: 32px 0 24px; }
  .pub-cabecera .logo .marca-txt, .pub-cabecera .logo .sep { display: none; }
  .pub-nav .btn { padding: 0 10px; }
  .tarjeta-form { padding: 24px 18px; }
}

/* Términos y privacidad (public/terminos.html, privacidad.html) */
.documento { max-width: 780px; margin: 0 auto; padding: 36px 24px 56px; line-height: 1.6; color: var(--tinta); }
.documento h1 { font-size: 32px; letter-spacing: -0.03em; margin: 0 0 4px; }
.documento .version { color: var(--tenue); font: 500 12px var(--mono); letter-spacing: .06em; margin: 0 0 24px; }
.documento h2 { font-size: 18px; margin: 28px 0 8px; letter-spacing: -0.01em; }
.documento p, .documento li { color: var(--tinta-2); }
.documento b { color: var(--tinta); }
.documento ul { padding-left: 20px; }
.documento li { margin: 4px 0; }
@media (max-width: 640px) { .documento { padding: 24px 16px 40px; } .documento h1 { font-size: 26px; } }