/* Ruta SEO — identidad: verde pino (crecimiento) sobre un gris con un punto de verde; barra lateral oscura.
   Tipos: Figtree (texto y cifras), Bricolage Grotesque (títulos), JetBrains Mono (direcciones web). */
:root{
  --ground:#F1F3EF; --surface:#FFFFFF; --surface-2:#F6F8F5; --line:#DCE2DB; --line-soft:#E9EEE8;
  --ink:#15201B; --ink-2:#34443C; --muted:#5D6C64;
  --accent:#0E7A5A; --accent-ink:#FFFFFF; --accent-soft:#E2F1EA; --accent-line:#B5DAC8; --accent-hover:#0B6A4E;
  --amber:#C8702A; --amber-soft:#F8EADC;
  --serie-1:#0E7A5A; --serie-2:#C8702A; --serie-ref:#A7B0AA; --rejilla:#E7ECE6;
  --ok:#2F7A3E; --ok-soft:#E3F1E4; --warn:#94620F; --warn-soft:#FAF0DA; --crit:#AD3B32; --crit-soft:#FAE6E3;
  --side:#10201A; --side-2:#172A22; --side-ink:#E3ECE7; --side-muted:#8FA69B; --side-line:#223A30; --side-activo:#1E3A2F;
  --shadow:0 1px 2px rgba(21,32,27,.05), 0 10px 28px -18px rgba(21,32,27,.28);
  --r:12px; --r-s:8px;
  --f-texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-titulo:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C1310; --surface:#141E1A; --surface-2:#19251F; --line:#25342D; --line-soft:#1E2B25;
    --ink:#E5EDE8; --ink-2:#B8C7BF; --muted:#8A9C92;
    --accent:#45B28C; --accent-ink:#08130E; --accent-soft:#16302A; --accent-line:#27513F; --accent-hover:#57C29C;
    --amber:#D08A48; --amber-soft:#2E2216;
    --serie-1:#2F9A78; --serie-2:#C9793A; --serie-ref:#56635C; --rejilla:#223029;
    --ok:#62B774; --ok-soft:#16281B; --warn:#D7A34F; --warn-soft:#2A2213; --crit:#E1776C; --crit-soft:#2C1816;
    --side:#08100C; --side-2:#0F1A15; --side-ink:#DCE7E1; --side-muted:#7F958A; --side-line:#1A2A22; --side-activo:#173127;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.9); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1310; --surface:#141E1A; --surface-2:#19251F; --line:#25342D; --line-soft:#1E2B25;
  --ink:#E5EDE8; --ink-2:#B8C7BF; --muted:#8A9C92;
  --accent:#45B28C; --accent-ink:#08130E; --accent-soft:#16302A; --accent-line:#27513F; --accent-hover:#57C29C;
  --amber:#D08A48; --amber-soft:#2E2216;
  --serie-1:#2F9A78; --serie-2:#C9793A; --serie-ref:#56635C; --rejilla:#223029;
  --ok:#62B774; --ok-soft:#16281B; --warn:#D7A34F; --warn-soft:#2A2213; --crit:#E1776C; --crit-soft:#2C1816;
  --side:#08100C; --side-2:#0F1A15; --side-ink:#DCE7E1; --side-muted:#7F958A; --side-line:#1A2A22; --side-activo:#173127;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.9); color-scheme:dark;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-texto); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
.mono{font-family:var(--f-mono); font-size:.86em}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---------- estructura ---------- */
.shell{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh}
.side{background:var(--side); color:var(--side-ink); padding:20px 14px 16px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; overflow:auto}
.brand{display:flex; align-items:center; gap:10px; padding:2px 8px}
.brand-mark{width:30px; height:30px; border-radius:9px; background:var(--accent); display:grid; place-items:center; flex:none}
.brand-mark svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.brand b{font-family:var(--f-titulo); font-weight:700; letter-spacing:-.02em; font-size:18px}
.nav{display:flex; flex-direction:column; gap:2px; flex:1}
.nav-label{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--side-muted); padding:14px 10px 6px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:8px 10px; border-radius:var(--r-s); cursor:pointer; color:var(--side-ink); opacity:.78; font-size:14px; font-weight:500}
.nav button svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.nav button:hover{background:var(--side-2); opacity:1}
.nav button[aria-current="page"]{background:var(--side-activo); opacity:1; font-weight:600; box-shadow:inset 2px 0 0 var(--accent-hover)}
.nav .count{margin-left:auto; font-size:11.5px; color:var(--side-muted); font-variant-numeric:tabular-nums; background:var(--side-2); padding:0 7px; border-radius:10px; line-height:19px}
.nav .count.aviso{background:var(--amber); color:#1d1206}
.side-pie{display:flex; align-items:center; gap:8px; border-top:1px solid var(--side-line); padding-top:14px}
.estado-db{font-size:11.5px; padding:3px 9px; border-radius:20px; font-weight:600; color:var(--side-muted); border:1px solid var(--side-line)}
.estado-db.on{color:#9BD8BE; border-color:#285443}
.estado-db.off{color:#F0A097; border-color:#5A2A25}
.salir{margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--side-line); color:var(--side-ink); border-radius:var(--r-s); padding:5px 10px; cursor:pointer; font-size:13px; font-weight:500}
.salir svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.salir:hover{background:var(--side-2)}

.main{min-width:0; padding:0 0 64px}
.topbar{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:14px 28px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.crumb{font-size:12.5px; color:var(--muted)}
.topbar h1{font-family:var(--f-titulo); font-size:22px; font-weight:700; letter-spacing:-.02em}
.top-acciones{display:flex; gap:8px; flex-wrap:wrap}
.spacer{flex:1}
.wrap{padding:22px 28px; display:flex; flex-direction:column; gap:18px; max-width:1200px}

/* ---------- piezas ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card-h h2{font-size:15.5px; font-weight:650}
.card-h .sub, .sub{font-size:12.5px; color:var(--muted)}
.pad{padding:18px}
.why{font-size:13.5px; color:var(--muted)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; display:flex; flex-direction:column; gap:3px}
.tile .k{font-size:12.5px; color:var(--muted); font-weight:500}
.tile .v{font-size:28px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15}
.tile .d{font-size:12.5px; color:var(--muted)}
.delta{font-weight:600; font-variant-numeric:tabular-nums}
.delta.sube{color:var(--ok)} .delta.baja{color:var(--crit)} .delta.igual{color:var(--muted)}

table{width:100%; border-collapse:collapse; font-size:14px}
th{font-size:12px; color:var(--muted); text-align:left; font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2)}
td{padding:9px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
.num{text-align:right; font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}
/* tablas que se ordenan al pulsar la cabecera: flechas grises siempre, la activa en color */
table.ordenable th{cursor:pointer; user-select:none; transition:color .12s}
table.ordenable th:hover, table.ordenable th:focus-visible{color:var(--ink); outline:none}
table.ordenable th:focus-visible{box-shadow:inset 0 -2px 0 var(--accent)}
table.ordenable th::after{content:"↕"; display:inline-block; margin-left:6px; font-size:11px; opacity:.4; width:10px; text-align:center}
table.ordenable th:hover::after{opacity:.8}
table.ordenable th[data-orden=asc]::after{content:"▲"; opacity:1; color:var(--accent)}
table.ordenable th[data-orden=desc]::after{content:"▼"; opacity:1; color:var(--accent)}
table.ordenable th[data-orden]{color:var(--ink)}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:20px; white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.crit{background:var(--crit-soft); color:var(--crit)} .pill.neutral{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.pill.accent{background:var(--accent-soft); color:var(--accent)} .pill.amber{background:var(--amber-soft); color:var(--amber)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:var(--surface); padding:7px 13px; border-radius:var(--r-s); cursor:pointer; font-size:13.5px; font-weight:550; text-decoration:none; color:var(--ink); transition:background .12s, border-color .12s}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.btn:hover{border-color:var(--accent-line); background:var(--surface-2)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--muted)} .btn.ghost:hover{color:var(--ink); background:var(--surface-2)}
.btn.sm{padding:4px 10px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:default}
.row-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}

.proj{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px}
.proj-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:17px; display:flex; flex-direction:column; gap:12px; cursor:pointer; text-align:left; width:100%; transition:border-color .12s, box-shadow .12s, transform .12s}
.proj-card:hover{border-color:var(--accent-line); box-shadow:var(--shadow); transform:translateY(-1px)}
.proj-card .dom{font-size:12.5px; color:var(--muted); font-family:var(--f-mono)}
.proj-card h3{font-size:16.5px; font-weight:650; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.proj-card.apagado{opacity:.62}
.proj-card.nuevo{border-style:dashed; justify-content:center; color:var(--accent); background:transparent}
.mini{display:flex; gap:18px; font-size:12.5px; color:var(--muted)}
.mini b{display:block; color:var(--ink); font-size:18px; font-weight:650; font-variant-numeric:tabular-nums}
.chispa{height:34px; width:100%}
.filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; background:var(--surface)}
.seg button{border:0; background:none; padding:6px 12px; font-size:13px; cursor:pointer; color:var(--muted); font-weight:550}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent)}
.seg button + button{border-left:1px solid var(--line)}

form.rejilla, .rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; align-items:end}
label{display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:5px}
select,input[type=text],input[type=search],input[type=number],input[type=password],input[type=month],textarea{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
select:focus,input:focus,textarea:focus{outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:0; border-color:var(--accent)}
textarea{min-height:92px; resize:vertical; font-size:13.5px}
/* barra de filtro de una lista (buscador con lupa + recuento + acciones a la derecha) */
.barra-filtro{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 4px}
.barra-filtro .busca{position:relative; flex:0 1 320px; min-width:200px}
.barra-filtro .busca svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; pointer-events:none}
.barra-filtro .busca input{padding-left:34px; height:36px; background:var(--surface-2)}
.barra-filtro .busca input:focus{background:var(--surface)}
.barra-filtro .busca input::-webkit-search-cancel-button{cursor:pointer}
.barra-filtro .cuenta{font-size:13px; color:var(--muted)}
.barra-filtro .spacer{flex:1}
.ancho{grid-column:1/-1}
.inline-ed{width:70px; padding:3px 6px; font-size:13px; text-align:right}
.chk{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); font-weight:500; margin-bottom:0}
.chk input{accent-color:var(--accent)}
.sel{display:inline-flex; margin-right:8px; vertical-align:-2px}
.sel input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}

.mkt{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:12px}
.mkt-card{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:15px; display:flex; flex-direction:column; gap:7px}
.mkt-card .flag{font-size:12px; color:var(--muted)}
.mkt-card h3{font-size:15.5px}
.kv{display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--muted)}
.kv b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600}

.task{display:grid; grid-template-columns:3px 1fr auto; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line-soft); align-items:start}
.task:last-child{border-bottom:0}
.task .sev{align-self:stretch; border-radius:3px; background:var(--accent)}
.task h3{font-size:14.5px; margin-bottom:3px; font-weight:600}
.task .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center}
.task.hecha{opacity:.62}
.task .instr{margin-top:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px; font-size:13.5px; white-space:pre-wrap}
.envio{margin:4px 0 2px}
.barra-lote{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 18px; background:var(--accent-soft); border-bottom:1px solid var(--line-soft); font-size:13.5px; position:sticky; top:66px; z-index:3}

details summary{list-style:none; cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸ "}
details[open] summary::before{content:"▾ "}
.vacio{padding:28px 18px; text-align:center; color:var(--muted); font-size:14px}
.foot{color:var(--muted); font-size:12.5px; border-top:1px solid var(--line); padding-top:13px}
.aviso-caja{border:1px solid var(--line); border-left:3px solid var(--amber); background:var(--amber-soft); border-radius:var(--r-s); padding:11px 14px; font-size:13.5px; color:var(--ink-2)}
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(12px); background:var(--ink); color:var(--ground); padding:10px 18px; border-radius:22px; font-size:13.5px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:40; box-shadow:var(--shadow); max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- gráficas ---------- */
.graf{position:relative}
.graf svg{display:block; width:100%; height:auto; overflow:visible}
.graf .eje{font-size:11px; fill:var(--muted); font-family:var(--f-texto); font-variant-numeric:tabular-nums}
.graf .rej{stroke:var(--rejilla); stroke-width:1}
.graf .base{stroke:var(--line); stroke-width:1}
.graf .linea{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.graf .marca-inicio{stroke:var(--ink-2); stroke-width:1; opacity:.55}
.graf .txt-inicio{font-size:11px; fill:var(--ink-2); font-weight:600}
/* marcas de contexto en las graficas de Evolucion: actualizaciones de Google y meses con mejoras hechas */
.graf .marca-google{fill:var(--warn)} .graf .marca-google-l{stroke:var(--warn); stroke-width:1; stroke-dasharray:3 3; opacity:.45}
.graf .marca-tarea{fill:var(--serie-2)}
.leyenda-marcas{margin-top:6px} .leyenda-marcas b{margin-right:5px; font-weight:400} .ley-google{color:var(--warn)} .ley-tarea{color:var(--serie-2)}
.marca-tip{color:var(--muted); font-size:12px}
.graf .etq{font-size:11.5px; fill:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.graf .guia{stroke:var(--ink-2); stroke-width:1; opacity:0}
.graf .zona{fill:transparent; cursor:crosshair}
.leyenda{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-bottom:10px}
.leyenda span{display:inline-flex; align-items:center; gap:7px}
.leyenda i{width:16px; height:3px; border-radius:2px; display:inline-block}
.leyenda i.cuadro{width:10px; height:10px; border-radius:3px}
.tip{position:fixed; z-index:60; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-s); box-shadow:var(--shadow); padding:8px 11px; font-size:12.5px; pointer-events:none; min-width:140px}
.tip b{display:block; margin-bottom:3px; font-size:12px; color:var(--muted); font-weight:600}
.tip .fila-tip{display:flex; gap:10px; justify-content:space-between; font-variant-numeric:tabular-nums}
.tip .fila-tip i{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px}
.dos-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px}
.nota-dato{font-size:12px; color:var(--muted); margin-top:8px}

/* ---------- entrada ---------- */
#entrada{position:fixed; inset:0; z-index:50; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); background:var(--ground)}
.entrada-arte{background:var(--side); color:var(--side-ink); padding:44px 48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.entrada-arte .brand b{font-size:20px}
.entrada-arte h2{font-family:var(--f-titulo); font-weight:700; font-size:clamp(30px,3.6vw,46px); line-height:1.05; letter-spacing:-.03em; max-width:12ch}
.entrada-arte p{color:var(--side-muted); max-width:40ch; margin-top:14px; font-size:15px}
.ruta{width:100%; max-width:560px; height:auto; margin:26px 0 8px}
.ruta .camino{fill:none; stroke:var(--accent-hover); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:traza 2.2s .2s ease-out forwards}
.ruta .sombra{fill:none; stroke:var(--side-line); stroke-width:1; stroke-dasharray:3 6}
.ruta circle{fill:var(--side); stroke:var(--accent-hover); stroke-width:3}
.ruta circle.meta{fill:var(--accent-hover)}
.ruta text{fill:var(--side-ink); font-family:var(--f-texto); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums}
.ruta text.suave{fill:var(--side-muted); font-weight:500; font-size:12px}
@keyframes traza{to{stroke-dashoffset:0}}
.entrada-pie{font-size:12.5px; color:var(--side-muted)}
.entrada-form{display:grid; place-items:center; padding:32px 20px}
.entrada-form .caja{width:min(370px,100%)}
.entrada-form h1{font-family:var(--f-titulo); font-size:28px; font-weight:700; letter-spacing:-.02em}
.entrada-form .sub{font-size:14px; margin:6px 0 24px}
.campo-clave{position:relative}
.campo-clave input{padding:11px 44px 11px 12px; font-size:15px}
.campo-clave button{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; color:var(--muted); padding:6px; border-radius:6px}
.campo-clave button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.entrada-form .btn.primary{width:100%; margin-top:14px; padding:11px; font-size:15px}
.entrada-form .err{color:var(--crit); font-size:13.5px; margin-top:12px}
.entrada-form .legal{font-size:12px; color:var(--muted); margin-top:26px}
#f-reset label{margin-top:12px}
#f-reset #r-pedir{width:100%; padding:10px}
#f-reset #r-ok{margin:10px 0 0; color:var(--ok, inherit)}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:sticky; top:0; z-index:8; height:auto; flex-direction:row; align-items:center; gap:10px; overflow-x:auto; padding:10px 16px}
  .brand b{display:none}
  .nav{flex-direction:row; gap:4px; flex:none}
  .nav-label{display:none}
  .nav button{white-space:nowrap; padding:7px 10px}
  .side-pie{border-top:0; padding-top:0; margin-left:auto}
  .estado-db{display:none}
  .topbar{position:static}
  .wrap,.topbar{padding-left:16px; padding-right:16px}
  .task{grid-template-columns:3px 1fr}
  .row-actions{grid-column:2/-1; justify-content:flex-start}
  .barra-lote{top:56px}
  #entrada{grid-template-columns:1fr; overflow:auto}
  .entrada-arte{padding:28px 22px; min-height:auto}
  .ruta{max-width:420px; margin:14px 0 0}
  .dos-col{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important} .ruta .camino{stroke-dashoffset:0}}

/* ---------- evolución ---------- */
.lectura{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px; font-size:14.5px; color:var(--ink-2); max-width:78ch}
.lectura b{color:var(--ink)}
.periodo{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.lista-met{display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:13px}
.lista-met div{display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line-soft); padding:4px 0}
.lista-met span{min-width:120px}

.inicio-real{display:flex; gap:6px; align-items:center; margin:0}
.inicio-real label{margin:0; font-weight:500}
.inicio-real input{width:auto; padding:5px 8px}

/* ---------- silos: organigrama ---------- */
.leyenda-silos{display:flex; flex-wrap:wrap; gap:8px}
.leyenda-silos .lg{font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:20px; border:1.5px solid var(--line); background:var(--surface)}
.org{overflow-x:auto; padding:6px 12px 18px; -webkit-overflow-scrolling:touch}
.org ul{display:flex; justify-content:center; margin:0; padding:18px 0 0; position:relative}
.org > ul{padding-top:0; min-width:max-content; margin:0 auto}
.org li{list-style:none; position:relative; padding:18px 6px 0; display:flex; flex-direction:column; align-items:center}
.org > ul > li{padding-top:0}
.org li::before, .org li::after{content:''; position:absolute; top:0; right:50%; width:50%; height:18px; border-top:1.5px solid var(--line)}
.org li::after{right:auto; left:50%; border-left:1.5px solid var(--line)}
.org li:only-child::before, .org li:only-child::after{display:none}
.org li:only-child{padding-top:0}
.org ul ul li:only-child{padding-top:18px}
.org ul ul li:only-child::after{display:block; border-top:0; width:0}
.org li:first-child::before, .org li:last-child::after{border:0 none}
.org li:last-child::before{border-right:1.5px solid var(--line); border-radius:0 8px 0 0}
.org li:first-child::after{border-radius:8px 0 0 0}
.org ul ul::before{content:''; position:absolute; top:0; left:50%; height:18px; border-left:1.5px solid var(--line)}
.org > ul > li::before, .org > ul > li::after{display:none}
.nodo{border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface); width:190px; text-align:left; font-size:13px; line-height:1.35; box-shadow:var(--shadow)}
.nodo.pilar{width:230px; border-width:2px}
.nodo .n-top{display:flex; align-items:center; gap:6px; margin-bottom:4px}
.n-est{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.n-rol{font-size:11px; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:1px 7px; border-radius:20px}
.n-pos{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.n-url{word-break:break-all; color:var(--ink)}
.n-kw{color:var(--muted); margin-top:2px}
.n-tarea{margin-top:5px; font-size:12px; color:var(--accent); font-weight:600}
.n-aviso{margin-top:5px; font-size:12px; color:var(--warn)}
.est-existe{border-color:var(--ok)} .nodo.est-existe .n-est, .n-est.est-existe{color:var(--ok)}
.est-optimizar{border-color:var(--amber)} .nodo.est-optimizar .n-est, .n-est.est-optimizar{color:var(--amber)}
.est-crear{border-style:dashed; border-color:var(--muted); background:var(--surface-2)} .nodo.est-crear .n-est, .n-est.est-crear{color:var(--muted)}
.est-creada{border-color:var(--accent); background:var(--accent-soft)} .nodo.est-creada .n-est, .n-est.est-creada{color:var(--accent)}
.nodo.sin-aprobar{opacity:.72}
.leyenda-silos .lg.est-crear{background:var(--surface-2)}
.org-general .nodo-silo{display:flex; flex-direction:column; gap:3px; width:170px; padding:8px 10px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); text-decoration:none; font-size:12.5px; line-height:1.3; box-shadow:var(--shadow)}
.org-general .nodo-silo:hover{border-color:var(--accent)}
.org-general .nodo-silo .mono{word-break:break-all; color:var(--ink-2)}
.lista-silos{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px}
.lista-silos .mono{word-break:break-all}
details summary{cursor:pointer}
.org-general{padding:4px 20px 18px}
.org-raiz{display:flex; justify-content:center}
.org-bajada{width:0; height:18px; margin:0 auto; border-left:1.5px solid var(--line)}
.grid-silos{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; border-top:1.5px solid var(--line); padding-top:14px}
.org-general .nodo-silo{width:auto}
.org-general .nodo-silo.est-crear{border-style:dashed}
@media (max-width:640px){ .org-general{padding:4px 12px 14px} .grid-silos{grid-template-columns:1fr 1fr} }
.grid-apoyo{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))}
.grid-apoyo .nodo{width:auto}

/* bucle de CTR */
.ctr-cuenta{font-weight:400; color:var(--muted); font-size:12px; margin-left:6px}
.ctr-cuenta.mal{color:var(--crit); font-weight:600}
.ctr-item details summary{cursor:pointer}
/* panel de cartera: nombre del cliente como enlace */
button.link{background:none; border:0; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; text-align:left}
button.link:hover{text-decoration:underline}

/* enlazado interno: el ancla que se enlazará, resaltada en su párrafo */
mark{background:var(--accent-soft); color:inherit; padding:0 2px; border-radius:3px}

/* aviso de actualización de Google en el panel del cliente (20-oct-2026) */
.ag{margin-bottom:14px; border-left:3px solid var(--warn)} .ag.ag-grave{border-left-color:var(--crit)}
.ag-cab{display:flex; align-items:flex-start; gap:12px; justify-content:space-between} .ag-cab h2{font-size:15.5px; font-weight:650}
.ag-motivo{margin:10px 0 0; font-size:14px; color:var(--ink-2)}
.ag-graf{display:block; width:100%; height:70px; margin-top:12px}
.ag-zona{fill:var(--warn-soft)} .ag.ag-grave .ag-zona{fill:var(--crit-soft)}
.ag-linea{fill:none; stroke:var(--serie-1); stroke-width:1.6; vector-effect:non-scaling-stroke}
.ag-media{stroke:var(--serie-ref); stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke}
.ag-ley{display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--muted); margin-top:3px}
.ag-ley i{display:inline-block; width:10px; height:8px; margin:0 4px 0 6px; vertical-align:middle}
.ag-sw-zona{background:var(--warn-soft); border:1px solid var(--warn)} .ag-sw-media{border-top:1px dashed var(--serie-ref); height:0 !important}
.ag-notas{margin:10px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted)} .ag-notas li{margin:2px 0}
.ag-pie{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px} .ag-pie .why{margin-right:auto; font-size:12.5px; flex:1 1 260px}
.ag-bien{margin-bottom:14px; border-left-color:var(--ok); background:var(--ok-soft)}
.btn-link{background:none; border:0; padding:0; color:var(--accent); font:inherit; text-decoration:underline; cursor:pointer}
.ag-diag{margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px}
.ag-diag summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-2)}
.ag-diag table{margin-top:8px} .ag-diag td{vertical-align:top}
.ag-hoy{margin-top:4px; font-size:12px; color:var(--accent); font-weight:600} .ag-hoy .mono{font-weight:400; word-break:break-all}
.ag-pasos{margin-top:14px} .ag-pasos h3{font-size:14px; font-weight:650; margin:0 0 8px}
.ag-paso{border:1px solid var(--line-soft); border-radius:var(--r-s); padding:10px 12px; margin-bottom:8px; background:var(--surface-2)}
.ag-paso .mono{font-size:12px; color:var(--muted); word-break:break-all}
.ag-paso ol{margin:6px 0 0; padding-left:20px; font-size:13px; line-height:1.5} .ag-paso li{margin:4px 0; word-break:break-word}

/* ---------- administración del superadministrador y cuentas de agencia (21-oct-2026) ---------- */
input[type=email],input[type=date]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
#banda:empty{display:none}
.banda{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 28px 14px; padding:10px 14px; border-radius:var(--r-s);
  background:var(--accent-soft); color:var(--ink); border:1px solid var(--accent-line); font-size:13.5px}
.banda.como{background:var(--amber-soft); border-color:color-mix(in srgb, var(--amber) 40%, transparent)}
.banda.aviso{background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 35%, transparent)}
#suspendida{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:var(--ground)}
#suspendida .caja{max-width:440px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow)}
#suspendida h1{font-family:var(--f-titulo); font-size:24px; margin:0 0 10px}
details.adm-nueva > summary{display:flex; align-items:baseline; gap:12px; padding:16px 20px; cursor:pointer; list-style:none}
details.adm-nueva > summary::-webkit-details-marker{display:none}
details.adm-nueva > summary h2{margin:0; font-size:16px; color:var(--accent)}
details.adm-nueva[open] > summary{border-bottom:1px solid var(--line-soft)}
.adm-acceso{border-color:var(--accent-line)}
.adm-cred{font-family:var(--f-mono); font-size:13px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-s); padding:12px; margin:0 0 10px; white-space:pre-wrap; word-break:break-all}
.adm-h3{font-size:13px; font-weight:650; color:var(--ink-2); margin:14px 0 8px; text-transform:none}
.adm-campo{margin-bottom:12px} .adm-campo label .pill{margin-left:4px; vertical-align:1px}
.adm-prueba{margin:12px 0 0; font-size:13px} .adm-prueba.ok{color:var(--ok)} .adm-prueba.crit{color:var(--crit)}
.btn.adm-peligro{color:var(--crit); border-color:color-mix(in srgb, var(--crit) 40%, transparent)}
tr.adm-sel td{background:var(--accent-soft)}
.adm-tabla .row-actions{flex-wrap:nowrap} .adm-tabla .btn{white-space:nowrap}
td input[type=text], td input[type=number], td select{min-width:90px}
@media (max-width:760px){ .banda{margin:0 16px 12px} }