/* VT's PA 2.0 · sistema de diseño (REDISENO_2_0.md §4). Inter; tinta #14213D, oro #F2A541 (poco);
   personas: Víctor #2A78D6, Fátima #EB6834, Hogar #1BAF7A; estados solo con texto o icono. */
:root{
  --tinta:#14213D;--oro:#F2A541;--oro-osc:#8A5300;--oro-suave:#FDF1DF;
  --fondo:#F4F5F7;--tarjeta:#FFFFFF;--texto:#14213D;--texto2:#3A4560;--suave:#5B6478;--linea:#E6E8EE;--linea2:#D5D9E2;
  --vt:#2A78D6;--vt-suave:#E3EEFB;--vt-osc:#1C5CAB;
  --fmp:#EB6834;--fmp-suave:#FCE6DC;--fmp-osc:#A63F15;
  --hogar:#1BAF7A;--hogar-suave:#DDF3EA;--hogar-osc:#0E6B4A;
  --bien:#0CA30C;--bien-osc:#0E6B4A;--atencion:#FAB219;--critico:#D03B3B;--critico-suave:#FBE4E4;--critico-osc:#A12A2A;
  --gris-suave:#EEF0F4;--lateral:#14213D;--lateral-act:#24365F;--lateral-txt:#C9D1E3;
  --sombra:0 1px 2px rgba(20,33,61,.06);--radio:16px;
  /* compatibilidad con las plantillas anteriores */
  --navy:var(--tinta);--verde:var(--bien-osc);--rojo:var(--critico-osc);--azul:var(--vt-osc);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texto);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);font-size:15px;line-height:1.45}
h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:.1rem 0 .35rem}
h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0 0 .6rem}
h3{font-size:16px;font-weight:700;margin:.2rem 0}
a{color:var(--vt-osc)}a:hover{color:var(--tinta)}
.cifra{font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sub{color:var(--suave);font-size:14px;margin:0 0 1rem}
.pos{color:var(--bien-osc)}.neg{color:var(--critico-osc)}.oro{color:var(--oro-osc)}

/* ---------- Estructura: barra lateral (ordenador) + barra inferior (iPhone) ---------- */
.marco{display:flex;min-height:100vh}
.lateral{width:232px;flex-shrink:0;background:var(--lateral);color:#fff;padding:24px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.lateral .logo{display:flex;align-items:center;gap:10px;padding:0 8px 18px;color:#fff;text-decoration:none}
.lateral .logo img{width:34px;height:34px;border-radius:10px}.lateral .logo strong{font-size:16px}
.lateral a.lugar{min-height:42px;padding:0 12px;border-radius:10px;display:flex;align-items:center;gap:10px;text-decoration:none;
  font-size:15px;font-weight:700;color:var(--lateral-txt)}
.lateral a.lugar svg{width:20px;height:20px;flex-shrink:0}
.lateral a.lugar.activo{background:var(--lateral-act);color:#fff}
.lateral a.lugar:hover{color:#fff}
.lateral .subs{display:flex;flex-direction:column;margin:2px 0 6px 30px;border-left:1px solid #2F416B}
.lateral .subs a{min-height:34px;display:flex;align-items:center;padding:0 12px;color:var(--lateral-txt);text-decoration:none;font-size:14px;font-weight:600}
.lateral .subs a.activo{color:var(--oro)}
.lateral .abajo{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:16px;font-size:13px}
.lateral .abajo a{color:var(--lateral-txt);text-decoration:none;padding:6px 12px}
.lateral .abajo button{font:inherit;text-align:left;background:#1B2B4F;border:1px solid #2F416B;color:var(--lateral-txt);border-radius:10px;padding:8px 12px;cursor:pointer}
.contenido{flex:1;min-width:0;display:flex;flex-direction:column}
.barra-sup{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px 40px 0;max-width:1240px;width:100%;margin:0 auto}
.barra-sup .titulo-lugar{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.barra-sup .der{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.boton-buscar{width:44px;height:44px;border-radius:22px;border:0;background:var(--tarjeta);box-shadow:var(--sombra);display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--tinta)}
main{max-width:1240px;width:100%;margin:0 auto;padding:14px 40px 48px}
.tabbar{display:none}
.solo-movil{display:none}

/* Píldoras: periodo, persona y pestañas */
.pildoras{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.pildoras a,.pildoras button{height:32px;padding:0 12px;border-radius:999px;background:var(--tarjeta);border:1px solid var(--linea2);font:inherit;
  font-size:13px;font-weight:600;color:var(--tinta);display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;white-space:nowrap}
.pildoras a.activo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pildoras.persona a.activo.p-VT{background:var(--vt);border-color:var(--vt)}
.pildoras.persona a.activo.p-FMP{background:var(--fmp);border-color:var(--fmp)}
.pildoras.persona a.activo.p-Hogar{background:var(--hogar);border-color:var(--hogar)}
.filtros{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
.pestanas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;padding:2px 0}
.pestanas::-webkit-scrollbar{display:none}
.pestanas a{white-space:nowrap;text-decoration:none;color:var(--texto2);padding:0 14px;height:36px;border-radius:999px;font-size:14px;font-weight:600;
  display:flex;align-items:center;background:var(--tarjeta);border:1px solid var(--linea)}
.pestanas a.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.pestanas a .n{margin-left:6px;font-size:12px;opacity:.75}
.subnav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}

/* ---------- Componentes ---------- */
.rejilla{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rejilla.tres{grid-template-columns:1.2fr 1fr 1fr}
.tarjeta{background:var(--tarjeta);border-radius:var(--radio);padding:16px 18px;min-width:0;box-shadow:var(--sombra)}
.tarjeta.borde{box-shadow:none;border:1px solid var(--linea)}
.seccion{margin-top:16px}
.kpi .etq{color:var(--suave);font-size:13px;font-weight:600}
.kpi .cifra{font-size:24px;margin:.15rem 0}.kpi .nota{color:var(--suave);font-size:13px}
.heroe{background:var(--tinta);color:#fff;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px}
.heroe .etq{font-size:13px;color:#C9D1E3;font-weight:600}
.heroe .grande{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.heroe .nota{font-size:13px;color:#D6DCE8;line-height:1.4}
.heroe a{color:var(--oro)}
.reparto{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#2A3B63;gap:2px}
.reparto span{display:block;height:100%}
.cab-seccion{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:18px 0 8px}
.cab-seccion h2{margin:0}.cab-seccion .cuenta{font-size:13px;color:var(--suave);font-weight:600}
/* Fila de lista con icono (decisiones, entidades, cargos) */
.filas{display:flex;flex-direction:column;gap:8px}
.fila{background:var(--tarjeta);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;
  align-items:center;box-shadow:var(--sombra);text-decoration:none;color:inherit}
.fila.borde{box-shadow:none;border:1px solid var(--linea)}
.fila .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  background:var(--gris-suave);color:var(--tinta)}
.fila .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fila .txt strong{font-size:15px;line-height:1.25}.fila .txt span{font-size:13px;color:var(--suave);line-height:1.3}
.fila .accion{height:32px;padding:0 12px;border-radius:999px;background:var(--fondo);font-size:13px;font-weight:700;display:inline-flex;
  align-items:center;white-space:nowrap;color:var(--tinta);text-decoration:none;border:0;font-family:inherit;cursor:pointer}
.fila .importe{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ic.azul,.chip.azul{background:var(--vt-suave);color:var(--vt-osc)}
.ic.oro,.chip.oro{background:var(--oro-suave);color:var(--oro-osc)}
.ic.rojo,.chip.rojo{background:var(--critico-suave);color:var(--critico-osc)}
.ic.verde,.chip.verde{background:var(--hogar-suave);color:var(--hogar-osc)}
.lado{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lado>div{background:var(--fondo);border-radius:12px;padding:10px 12px}
.etq-vt{color:var(--vt-osc);font-weight:700}.etq-fmp{color:var(--fmp-osc);font-weight:700}.etq-hogar{color:var(--hogar-osc);font-weight:700}
.chip{display:inline-flex;align-items:center;height:24px;font-size:12px;font-weight:700;padding:0 10px;border-radius:999px;background:var(--gris-suave);color:var(--texto2);white-space:nowrap}
.chip.VT{background:var(--vt-suave);color:var(--vt-osc)}.chip.FMP{background:var(--fmp-suave);color:var(--fmp-osc)}.chip.Hogar{background:var(--hogar-suave);color:var(--hogar-osc)}
.chip.aviso{background:var(--oro-suave);color:var(--oro-osc)}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:8px 6px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
th{color:var(--suave);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
.barra{height:8px;background:var(--gris-suave);border-radius:4px;overflow:hidden}.barra>span{display:block;height:100%;background:var(--tinta)}
.barra.oro>span{background:var(--oro)}
.barras{display:flex;align-items:flex-end;gap:4px;height:120px;padding-top:.4rem}
.barras .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.barras .par{display:flex;gap:2px;align-items:flex-end;height:100px;width:100%}
.barras .par span{flex:1;border-radius:3px 3px 0 0}.barras .i{background:var(--hogar)}.barras .g{background:var(--tinta)}
.barras small{font-size:11px;color:var(--suave)}
.lista{list-style:none;padding:0;margin:0}.lista li{padding:10px 0;border-bottom:1px solid var(--linea)}
.lista li:last-child{border-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--tinta);
  background:var(--tinta);color:#fff;font:inherit;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.btn:hover{color:#fff}
.btn.sec{background:var(--tarjeta);color:var(--tinta);border-color:var(--linea2)}
.btn.oro{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.btn.peq{min-height:34px;padding:0 12px;border-radius:9px;font-size:13px}
.botones{display:flex;gap:8px;flex-wrap:wrap}
input[type=text],input[type=search],input[type=number],input[type=date],select,textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--linea2);
  border-radius:12px;background:var(--tarjeta);color:var(--texto);min-height:44px;width:100%}
label{font-size:13px;color:var(--suave)}
.form-linea{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}.form-linea>*{flex:1;min-width:140px}
.aviso-caja{background:var(--oro-suave);border-radius:14px;padding:12px 14px;color:#5a3a00}
.aviso-caja.rojo{background:var(--critico-suave);color:var(--critico-osc)}
.ok-caja{background:var(--hogar-suave);border-radius:14px;padding:12px 14px;color:var(--hogar-osc)}
.mes-nav{display:flex;align-items:center;gap:.5rem}.mes-nav a{text-decoration:none;font-size:1.3rem;padding:.2rem .6rem;min-width:44px;text-align:center}
.calor td{text-align:right;font-variant-numeric:tabular-nums}
.carta{max-width:560px;margin:0 auto}.carta .importe{font-size:34px;font-weight:800;letter-spacing:-.02em}
.resultado{white-space:pre-wrap}
.cita{border-left:3px solid var(--oro);padding:6px 10px;background:#FFFAF1;margin:6px 0;font-size:14px;border-radius:0 8px 8px 0}
.cargando{display:none;color:var(--suave)}
.vacio{text-align:center;color:var(--suave);padding:24px 12px}
.pie{margin-top:2rem;text-align:center;font-size:13px}.pie a{color:var(--suave)}
.chat-flotante{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:20;
  background:var(--tinta);color:#fff;text-decoration:none;border-radius:999px;padding:0 18px;min-height:48px;display:flex;align-items:center;
  gap:8px;box-shadow:0 6px 18px rgba(20,33,61,.25);font-weight:700}
.chat-flotante:hover{color:#fff}
.chat-flotante svg{width:20px;height:20px}

/* ---------- Buscar en todo (⌘K / botón) ---------- */
.buscador-global{position:fixed;inset:0;z-index:50;background:rgba(20,33,61,.45);display:flex;align-items:flex-start;justify-content:center;
  padding:calc(60px + env(safe-area-inset-top,0px)) 16px 16px}
.buscador-global form{width:100%;max-width:620px;background:var(--tarjeta);border-radius:18px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px}
.buscador-global .ayuda{font-size:13px;color:var(--suave)}

/* ---------- iPhone (402 y 440 pt) ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .lateral{display:none}
  .barra-sup{padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  main{padding:10px max(16px,env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left))}
  .solo-movil{display:initial}.solo-orden{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--tarjeta);
    border-top:1px solid var(--linea);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;min-height:48px;color:#8A93A6}
  .tabbar a svg{width:24px;height:24px}
  .tabbar a span{font-size:11px;font-weight:600}
  .tabbar a.activo{color:var(--tinta)}
  .chat-flotante{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:0 14px}
  .chat-flotante span{display:none}
  h1{font-size:26px}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rejilla.dos,.rejilla.tres{grid-template-columns:1fr}
  .kpi .cifra{font-size:20px;overflow-wrap:anywhere}
  .tarjeta{padding:12px 14px}
  .filtros{gap:8px}
  .pildoras{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .pildoras::-webkit-scrollbar{display:none}
  /* Sin scroll horizontal: las tablas pasan a tarjetas */
  .tabla{overflow-x:visible}
  table.adaptable,table.adaptable tbody{display:block}
  table.adaptable tr:first-child{display:none}
  table.adaptable tr{display:block;border:1px solid var(--linea);border-radius:12px;padding:6px 10px;margin:8px 0;background:var(--tarjeta)}
  table.adaptable td,table.adaptable th{display:flex;justify-content:space-between;gap:.8rem;border:0;padding:4px 0;text-align:right;white-space:normal}
  table.adaptable td:first-child,table.adaptable th:first-child{font-weight:600;text-align:left}
  table.adaptable td[data-etq]::before,table.adaptable th[data-etq]::before{content:attr(data-etq);color:var(--suave);font-weight:400;text-align:left}
  table.adaptable td:first-child::before{content:none}
  .calor td{background:none!important;color:inherit!important}
  .barras{height:110px}.barras small{font-size:10px}
  .heroe .grande{font-size:34px}
}

/* ---------- Modo oscuro: mismos tokens adaptados ---------- */
@media (prefers-color-scheme:dark){
  :root{--fondo:#0B1120;--tarjeta:#151E33;--texto:#E8EBF2;--texto2:#C3CAD8;--suave:#9AA3B5;--linea:#26314B;--linea2:#33405F;
    --gris-suave:#1E2840;--vt-suave:#16294A;--vt-osc:#8DB8F0;--fmp-suave:#3A1F14;--fmp-osc:#F5A47E;--hogar-suave:#0F3328;--hogar-osc:#6FD9AE;
    --oro-suave:#3A2A0D;--oro-osc:#F2C27A;--critico-suave:#3B1717;--critico-osc:#F19A9A;--lateral:#0E1628;--lateral-act:#1E2D4F;
    --sombra:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}
  .pildoras a.activo,.pestanas a.activo{background:var(--oro);border-color:var(--oro);color:#14213D}
  .btn{background:var(--oro);border-color:var(--oro);color:#14213D}.btn:hover{color:#14213D}
  .btn.sec{background:transparent;color:var(--texto);border-color:var(--linea2)}
  .heroe{background:#1A2747}
  .aviso-caja{color:#FFD79A}
  .cita{background:#2A2414}
  .calor td{color:var(--texto)}
  .tabbar a.activo{color:var(--oro)}
  .boton-buscar{color:var(--texto)}
}

/* Ajustes tras comparar con los bocetos a 402/440 px */
.buscador-global[hidden]{display:none}
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .barra-sup{flex-wrap:wrap;row-gap:10px}
  .barra-sup .der{display:contents}
  .barra-sup .boton-buscar{margin-left:auto}
  .barra-sup .pildoras.persona{order:3;flex:1 1 100%;min-width:0}
  .pildoras.persona a{flex:1;justify-content:center}
  .pestanas.solo-movil{display:flex}
  .subnav{flex-direction:column;align-items:stretch;gap:8px}
  .subnav .pildoras{margin-left:0!important;width:100%;min-width:0}
  .subnav .pildoras a{flex:1;justify-content:center}
  main{min-width:0}
}

/* ---------- Sin desplazamiento lateral en el iPhone (12-11-2026): solo scroll vertical ---------- */
html,body{overflow-x:hidden;width:100%;max-width:100%;overscroll-behavior:none}
body{position:relative}
.marco,.contenido,main,.barra-sup{max-width:100%;min-width:0}
main{overflow-x:clip}
img,svg,video,canvas,iframe,table,pre,textarea,input,select{max-width:100%}
/* Las columnas de las rejillas nunca crecen por un texto que no se parte */
.rejilla>*,.din-rejilla>*,.hoy-rejilla>*,.din-col>*,.subnav>*,.filtros>*,.cab-seccion>*,.filas>*,.lado>*{min-width:0}
.din-rejilla,.hoy-rejilla{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.hoy-rejilla{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
.cargo>span,.raro>span,.cat-fila>span,.tl>span,.venc>span,.hito>span,.meta,.tb-item>span{min-width:0;overflow-wrap:anywhere}
.chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tabla{max-width:100%}
@media (max-width:1100px){.din-rejilla{grid-template-columns:minmax(0,1fr)}.hoy-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:760px){
  .hoy-rejilla,.din-rejilla,.rejilla.dos,.rejilla.tres{grid-template-columns:minmax(0,1fr)}
  .form-linea>*{min-width:0;flex:1 1 100%}
  .form-linea>button,.form-linea>.btn{flex:1 1 auto}
  .cargo{grid-template-columns:48px minmax(0,1fr) auto}
  .tabbar,.caja-pregunta,.chat-flotante{max-width:100%}
  .prev-barras{gap:3px}
}

/* Rol «hogar» (Fátima): solo lectura. El servidor ya rechaza cualquier cambio; aquí solo se ocultan los botones. */
.rol-hogar form[method=post],.rol-hogar form[method="post"]{display:none!important}
.rol-hogar .tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}
.rol-hogar .solo-admin{display:none!important}