/* Paleta tomada del logo con ImageMagick, sin inventar un solo tono:
   #013B79 marino · #076EA1 azul · #3FB8C2 cian · #5DA34A verde · #D6A046 dorado · #FBDBA8 crema */
:root{
  --marino:#013B79; --azul:#076EA1; --cian:#2E96A0; --verde:#4C8C3C; --dorado:#A8761F;
  /* --canvas es el fondo DENTRO de la app: es el crema que se ve en el móvil.
     --surface es el blanco cálido de las tarjetas, que flotan encima. */
  --ground:#E7D8BB; --canvas:#F5E9D3; --surface:#FFFBF2; --surface-2:#FAF2E1; --line:#E0CDA9;
  --ink:#14273C; --ink-2:#4E5F72; --ink-3:#85806D;
  --ok:#3D7A2E; --ok-bg:#E7F0DB; --warn:#8A5409; --warn-bg:#F9E8CB; --crit:#9A2C2C; --crit-bg:#F6E0D8;
  --onaccent:#FFFBF2;
  /* versiones oscurecidas para texto pequeño: mismo tono, contraste AA */
  --azul-t:#076EA1; --cian-t:#1F6069; --verde-t:#3D7130; --dorado-t:#8C6115;
  --shadow:0 1px 2px rgba(1,59,121,.07),0 10px 28px rgba(120,86,30,.10);
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --marino:#7FB9EE; --azul:#4FA6D6; --cian:#5CCBD6; --verde:#86C471; --dorado:#E0AC55;
  --ground:#060B12; --canvas:#0D1520; --surface:#17212F; --surface-2:#1E2A39; --line:#2E3D4F;
  --ink:#F2EADB; --ink-2:#B3BECC; --ink-3:#8B8E8A;
  --ok:#8FD277; --ok-bg:#1A2E16; --warn:#E5B36A; --warn-bg:#33270F; --crit:#EE9086; --crit-bg:#391D19;
  --onaccent:#0D1520;
  --azul-t:#7CC4EC; --cian-t:#79D6E0; --verde-t:#9BD489; --dorado-t:#EDC077;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --marino:#7FB9EE; --azul:#4FA6D6; --cian:#5CCBD6; --verde:#86C471; --dorado:#E0AC55;
  --ground:#060B12; --canvas:#0D1520; --surface:#17212F; --surface-2:#1E2A39; --line:#2E3D4F;
  --ink:#F2EADB; --ink-2:#B3BECC; --ink-3:#8B8E8A;
  --ok:#8FD277; --ok-bg:#1A2E16; --warn:#E5B36A; --warn-bg:#33270F; --crit:#EE9086; --crit-bg:#391D19;
  --onaccent:#0D1520;
  --azul-t:#7CC4EC; --cian-t:#79D6E0; --verde-t:#9BD489; --dorado-t:#EDC077;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;text-wrap:balance;margin:0;letter-spacing:-.015em}
button{font:inherit;color:inherit}

.stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0}
@media(min-width:820px){.stage{padding:28px 20px 40px;gap:20px}}
.pitch{display:none}
@media(min-width:820px){.pitch{display:block;max-width:430px;text-align:center}
  .pitch h1{font-size:24px;font-weight:800;color:var(--marino)}
  .pitch p{color:var(--ink-2);font-size:13.5px;margin:6px 0 0}}
.phone{width:100%;max-width:430px;background:var(--canvas);display:flex;flex-direction:column;
  min-height:100vh;position:relative;overflow:hidden}
@media(min-width:820px){.phone{min-height:0;height:812px;border-radius:34px;box-shadow:var(--shadow);
  border:1px solid var(--line)}}

.top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;z-index:5}
.top img{height:36px;width:auto;flex:none}
.top .lema{flex:1;min-width:0;font-size:11.5px;line-height:1.3;color:var(--ink-3);font-style:italic;
  border-left:1px solid var(--line);padding-left:12px}
.tbtn{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;width:34px;height:34px;
  cursor:pointer;display:grid;place-items:center;color:var(--ink-2);flex:none}
.tbtn:hover{border-color:var(--marino);color:var(--marino)}
.tbtn:focus-visible{outline:2px solid var(--marino);outline-offset:2px}

.body{flex:1;overflow-y:auto;padding:16px 16px 84px;display:flex;flex-direction:column;gap:14px}
.panel[hidden]{display:none!important}
.panel{display:flex;flex-direction:column;gap:14px;animation:in .22s ease}
@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panel{animation:none}}

.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0}
.h2{font-size:20px;font-weight:800;color:var(--ink);line-height:1.2}
.sub{font-size:13px;color:var(--ink-2);margin:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.flat{background:var(--surface-2)}

.stripe{border-left:3px solid var(--line);padding-left:11px}
.stripe.ok{border-color:var(--ok)} .stripe.warn{border-color:var(--warn)} .stripe.crit{border-color:var(--crit)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit{background:var(--crit-bg);color:var(--crit)}
.pill.info{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.pill.vac{background:var(--crit-bg);color:var(--crit);border:1px dashed var(--crit)}

.metric .n{font-family:"IBM Plex Mono",monospace;font-size:27px;font-weight:600;line-height:1;
  color:var(--marino);font-variant-numeric:tabular-nums}
.metric .l{font-size:12px;color:var(--ink-2);line-height:1.3;margin-top:5px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.row{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.row:last-child{border-bottom:0}
/* Los cinco colores del puente rotan por las filas, tintando también el fondo
   del icono — así el color del logo se ve, no solo se insinúa. */
.row .ic{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-size:13.5px;font-weight:700;
  color:var(--marino);background:color-mix(in srgb, var(--marino) 13%, var(--surface));
  border:1px solid color-mix(in srgb, var(--marino) 22%, transparent)}
.row:nth-of-type(2) .ic{color:var(--dorado-t);
  background:color-mix(in srgb, var(--dorado) 15%, var(--surface));
  border-color:color-mix(in srgb, var(--dorado) 26%, transparent)}
.row:nth-of-type(3) .ic{color:var(--verde-t);
  background:color-mix(in srgb, var(--verde) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--verde) 24%, transparent)}
.row:nth-of-type(4) .ic{color:var(--azul-t);
  background:color-mix(in srgb, var(--azul) 13%, var(--surface));
  border-color:color-mix(in srgb, var(--azul) 22%, transparent)}
.row:nth-of-type(5) .ic{color:var(--cian-t);
  background:color-mix(in srgb, var(--cian) 15%, var(--surface));
  border-color:color-mix(in srgb, var(--cian) 26%, transparent)}
.row:nth-of-type(6) .ic{color:var(--marino);
  background:color-mix(in srgb, var(--marino) 13%, var(--surface));
  border-color:color-mix(in srgb, var(--marino) 22%, transparent)}
.row:nth-of-type(7) .ic{color:var(--dorado-t);
  background:color-mix(in srgb, var(--dorado) 15%, var(--surface));
  border-color:color-mix(in srgb, var(--dorado) 26%, transparent)}
.row:nth-of-type(8) .ic{color:var(--verde-t);
  background:color-mix(in srgb, var(--verde) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--verde) 24%, transparent)}

/* el puente del logo, reducido a una banda */
.puente{display:flex;height:3px;border-radius:99px;overflow:hidden;flex:none}
.puente i{flex:1}
.puente i:nth-child(1){background:var(--marino)}
.puente i:nth-child(2){background:var(--azul)}
.puente i:nth-child(3){background:var(--cian)}
.puente i:nth-child(4){background:var(--verde)}
.puente i:nth-child(5){background:var(--dorado)}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.row .tx small{display:block;font-size:12px;color:var(--ink-2);line-height:1.45;margin-top:2px}

label.f{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
textarea{font-family:inherit;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--marino);outline-offset:1px;border-color:var(--marino)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border-radius:10px;
  border:1px solid var(--marino);background:var(--marino);color:var(--onaccent);font-weight:600;font-size:14px;
  cursor:pointer;width:100%}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--marino);border-color:var(--line)}
.btn.sm{width:auto;padding:7px 12px;font-size:13px}

.seg{display:flex;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:4px}
.seg button{flex:1;border:0;background:transparent;padding:8px 6px;border-radius:8px;font-size:13px;
  font-weight:600;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--marino);color:var(--onaccent)}

.aid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px;
  display:flex;flex-direction:column;gap:7px}
.aid .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.aid h3{font-size:14.5px;font-weight:700;line-height:1.3}
.aid .why{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:0}
.aid .meta{display:flex;flex-wrap:wrap;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.aid .meta span{background:var(--surface-2);border:1px solid var(--line);padding:2px 7px;border-radius:6px}
.aid a{color:var(--marino);font-size:12.5px;font-weight:600;text-decoration:none;
  border-bottom:1px solid currentColor;align-self:flex-start}

.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px;
  display:flex;flex-direction:column;gap:9px}
.qa p{margin:0}
.qa .art{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--dorado);
  letter-spacing:.03em;text-transform:uppercase}
.qa .quote{font-size:13px;line-height:1.55;border-left:2px solid var(--dorado);padding-left:11px;
  color:var(--ink-2);font-style:italic}
.qa .answer{font-size:13.5px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 11px;
  font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.chips button:hover{border-color:var(--marino);color:var(--marino)}

.out{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.65;white-space:pre-wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px;
  max-height:290px;overflow:auto}

.nav{position:absolute;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--surface);border-top:1px solid var(--line);padding:6px 4px 8px;z-index:6}
.nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 1px;cursor:pointer;color:var(--ink-3);font-size:9.5px;font-weight:600;border-radius:9px;
  letter-spacing:-.01em}
.nav button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* cada sección toma un color del puente */
.nav button[data-go="hoy"][aria-current="true"]{color:var(--marino)}
.nav button[data-go="ayudas"][aria-current="true"]{color:var(--dorado)}
.nav button[data-go="empleo"][aria-current="true"]{color:var(--azul)}
.nav button[data-go="gente"][aria-current="true"]{color:var(--verde)}
.nav button[data-go="ayto"][aria-current="true"]{color:var(--cian)}
.nav button[data-go="sec"][aria-current="true"]{color:var(--cian)}
.nav button[data-go="junta"][aria-current="true"]{color:var(--marino)}
.nav button:focus-visible{outline:2px solid var(--marino);outline-offset:-2px}
.h2{color:var(--marino)}

/* cada sección firma con su color del puente */
#p-hoy    .eyebrow{color:var(--marino)}
#p-ayudas .eyebrow{color:var(--dorado-t)}
#p-empleo .eyebrow{color:var(--azul-t)}
#p-sec    .eyebrow{color:var(--cian-t)}
#p-junta  .eyebrow{color:var(--marino)}
#p-gente  .eyebrow{color:var(--verde-t)}
#p-ayto   .eyebrow{color:var(--cian-t)}
#p-ayto   .h2{color:var(--cian-t)}
#p-ayudas .h2{color:var(--dorado-t)}
#p-empleo .h2{color:var(--azul-t)}
#p-sec    .h2{color:var(--cian-t)}
#p-junta  .h2{color:var(--marino)}
#p-gente  .h2{color:var(--verde-t)}
.grid2 .card:nth-child(1) .n{color:var(--dorado-t)}
.grid2 .card:nth-child(2) .n{color:var(--cian-t)}
.grid2 .card{background:var(--surface)}
.qa .art{color:var(--dorado-t)}
.puente{box-shadow:0 1px 3px rgba(1,59,121,.10)}
.wa{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  background:#1FA855;color:#fff;font-size:13px;font-weight:600;text-decoration:none;border:0}
.wa:hover{filter:brightness(1.07)}
.wa:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
.wa svg{flex:none}
.note{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--dorado);
  margin-right:5px;vertical-align:middle}
.foot{max-width:430px;font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.6;padding:16px 16px 24px}
.foot b{color:var(--ink-2)}

/* =====================================================================
   LA PUERTA · pantallas de entrada, cambio de clave y condiciones

   OJO: en modo oscuro --marino se vuelve AZUL CLARO (es el color de
   acento sobre fondo negro). Por eso la puerta no puede usarlo de
   fondo: tiene sus propios tonos, oscuros en los dos modos.
   ===================================================================== */
/* Tonos propios de la puerta. Los tres de abajo estan MEDIDOS:
   --tenue    pie de tarjeta   5.24:1 sobre el crema (el --ink-3 daba 3.83)
   --ok-t     mensaje verde    5.44:1 sobre su fondo (el --ok daba 4.45)
   --p-borde  borde en oscuro  3.91:1 sobre el fondo (el --line daba 1.79) */
:root{ --tenue:#6F6A58; --ok-t:#366B28; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --tenue:#8B8E8A; --ok-t:#8FD277; }}
:root[data-theme="dark"]{ --tenue:#8B8E8A; --ok-t:#8FD277; }

/* ---------------------------------------------------------------------
   LA PUERTA VA SIEMPRE EN CREMA

   Aunque el movil este en modo oscuro. La identidad de ASOCANAVEN es
   crema y azul marino: si el sistema la invierte, deja de ser su marca.
   Fijando las variables aqui dentro, todo lo que cuelgue de la puerta
   —textos, botones, avisos— usa la paleta clara pase lo que pase fuera.
   Dentro de la app SI se respeta el modo oscuro: alli es una herramienta
   de trabajo, y hay quien la usa de noche.
   --------------------------------------------------------------------- */
.puerta, .hoja, .instalar{
  --marino:#013B79; --azul:#076EA1; --cian:#2E96A0; --verde:#4C8C3C; --dorado:#A8761F;
  --canvas:#F5E9D3; --surface:#FFFBF2; --surface-2:#FAF2E1; --line:#E0CDA9;
  --ink:#14273C; --ink-2:#4E5F72; --ink-3:#85806D;
  --onaccent:#FFFBF2; --azul-t:#076EA1;
  --ok:#3D7A2E; --ok-bg:#E7F0DB; --ok-t:#366B28;
  --crit:#9A2C2C; --crit-bg:#F6E0D8;
  --tenue:#6F6A58; --p-borde:#9C7A45;
  --puerta-fondo:#F5E9D3; --puerta-alto:#FCF5E8;
  color:var(--ink);
}

.puerta{position:fixed;inset:0;z-index:50;overflow-y:auto;
  background:var(--puerta-fondo);
  background-image:radial-gradient(120% 80% at 50% -10%, var(--puerta-alto) 0%, var(--puerta-fondo) 62%);
  display:flex;align-items:center;justify-content:center;padding:22px 16px}
.puerta[hidden]{display:none}

.tarjeta{width:100%;max-width:380px;background:var(--surface);border-radius:16px;
  padding:26px 22px 22px;box-shadow:0 18px 44px rgba(0,0,0,.30);
  border:1px solid var(--p-borde)}
.tarjeta.ancha{max-width:520px}
.tarjeta .marca{display:block;width:min(250px,72%);height:auto;margin:0 auto 18px;
  border-radius:50%;                /* el logo redondo ya trae su circulo crema:
                                       se lee igual de bien en modo oscuro */
  box-shadow:0 6px 20px rgba(0,0,0,.17)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.tarjeta h1{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:800;
  font-size:25px;line-height:1.15;margin:0 0 6px;text-align:center;color:var(--marino)}
.tarjeta .sub{margin:0 0 18px;text-align:center;color:var(--ink-2);font-size:13.5px;line-height:1.5}

.tarjeta label{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 5px}
.tarjeta input[type=text],.tarjeta input[type=password]{
  width:100%;font:inherit;font-size:16px;   /* 16px: si baja, iOS hace zoom al tocar */
  padding:11px 12px;margin:0 0 14px;color:var(--ink);
  background:var(--canvas);border:1.5px solid var(--line);border-radius:9px}
.tarjeta input:focus{outline:none;border-color:var(--azul-t);
  box-shadow:0 0 0 3px rgba(7,110,161,.18)}

.conojo{position:relative}
.conojo input{padding-right:52px}
.ojo{position:absolute;top:9px;right:8px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--azul-t);padding:4px 6px;border-radius:6px}
.ojo:hover{background:var(--surface-2)}

.btn{width:100%;font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  color:var(--onaccent);            /* claro sobre marino · oscuro sobre azul claro */
  background:var(--marino);border:0;border-radius:10px;padding:12px 14px;margin-top:2px}
.btn:hover{background:var(--azul)}
.btn:disabled{background:var(--ink-3);cursor:not-allowed}
.btn[aria-busy=true]{opacity:.65;cursor:progress}

.tarjeta .ayuda{font-size:12px;color:var(--ink-3);line-height:1.5;margin:-6px 0 14px}
.tarjeta .pie{font-size:11.5px;color:var(--tenue);line-height:1.55;margin:16px 0 0;text-align:center}

.msg{font-size:13px;line-height:1.5;border-radius:9px;padding:9px 11px;margin:12px 0 0}
.msg[hidden]{display:none}
.msg.err{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit)}
.msg.ok{background:var(--ok-bg);color:var(--ok-t);border:1px solid var(--ok-t)}

.legal{max-height:44vh;overflow-y:auto;background:var(--canvas);border:1px solid var(--line);
  border-radius:10px;padding:14px 15px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.legal h2{font-family:"Bricolage Grotesque",Georgia,serif;font-size:14px;font-weight:700;
  color:var(--marino);margin:14px 0 5px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 8px}
.legal ul{margin:0 0 8px;padding-left:19px}
.legal li{margin:0 0 4px}
.legal b{color:var(--ink)}

.check{display:flex;gap:9px;align-items:flex-start;margin:14px 0 14px;
  font-size:13.5px;line-height:1.45;color:var(--ink);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:500}
.check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--marino)}

/* aviso flotante dentro de la app */
.brindis{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:60;
  max-width:min(92vw,400px);background:var(--marino);color:var(--onaccent);font-size:13.5px;
  line-height:1.45;padding:11px 15px;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.brindis[hidden]{display:none}

/* =====================================================================
   LA APP NO SE MUEVE: SOLO SE MUEVE SU CENTRO

   En el demo la altura era min-height:100vh, asi que al crecer el
   contenido crecia la caja entera y el menu de abajo se iba con ella.
   Aqui la altura queda CLAVADA a la pantalla y el unico que scrollea
   es .body. El menu y la cabecera no se mueven nunca.

   100dvh y no 100vh: en el movil, 100vh mide la pantalla SIN contar la
   barra del navegador, y el menu quedaba cortado por debajo.
   ===================================================================== */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.stage{height:100vh;height:100dvh;overflow:hidden}
.phone{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.body{min-height:0;                 /* sin esto, un flex hijo no scrollea */
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.nav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}

/* --- barra de instalar: lo que el navegador esconde en su menu --- */
.instalar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:55;
  width:min(94vw,420px);display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--p-borde);border-radius:14px;
  padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.instalar[hidden]{display:none}
.instalar.dentro{bottom:calc(76px + env(safe-area-inset-bottom,0px))}  /* sobre el menu */
.instalar img{border-radius:9px;flex:none}
.instalar .txt{flex:1;min-width:0}
.instalar .txt b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink)}
.instalar .txt small{display:block;font-size:11.5px;color:var(--tenue);line-height:1.35}
.instalar .bi{flex:none;font:inherit;font-weight:700;font-size:13px;cursor:pointer;
  color:var(--onaccent);background:var(--marino);border:0;border-radius:9px;padding:8px 13px}
.instalar .bx{flex:none;font:inherit;font-size:19px;line-height:1;cursor:pointer;
  color:var(--tenue);background:transparent;border:0;padding:4px 7px;border-radius:6px}

.hoja{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:22px 16px;overflow-y:auto}
.hoja[hidden]{display:none}
.pasos{margin:0 0 14px;padding-left:20px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.pasos li{margin:0 0 9px}
.pasos b{color:var(--ink)}

/* =====================================================================
   PANTALLAS CON DATOS DE VERDAD
   Municipio desplegable en Empleo, y tarjetas de noticia en Hoy.
   ===================================================================== */
.muni{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mcab{width:100%;display:flex;align-items:center;gap:9px;padding:13px 14px;
  background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.mcab:hover{background:var(--surface-2)}
.mcab:focus-visible{outline:2px solid var(--marino);outline-offset:-2px}
.mcab .mn{flex:1;font-weight:700;font-size:14.5px;line-height:1.25}
.mcab .mfl{color:var(--tenue);font-size:12px;transition:transform .18s}
.mcab[aria-expanded="true"] .mfl{transform:rotate(180deg)}
.mcue{padding:2px 14px 13px;border-top:1px solid var(--line)}
.mcue[hidden]{display:none}

.of{display:block;padding:10px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.of:last-of-type{border-bottom:0}
.of b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.of small{display:block;font-size:11.5px;color:var(--ink-2);margin-top:3px}
.of:hover b{color:var(--azul-t);text-decoration:underline}
.of:focus-visible{outline:2px solid var(--marino);outline-offset:2px}

.aviso-vacio{font-size:12.5px;color:var(--ink-2);line-height:1.55;padding:11px 0 6px}
.cargando{font-size:12.5px;color:var(--tenue);padding:12px 0}

.noti .cab{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.noti .tit{display:block;font-size:14px;font-weight:700;line-height:1.35;color:var(--ink)}
.noti .org{display:block;font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.4}
.noti .res{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:8px 0 0}
.noti .acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:11px}
.noti .acc a.ver{font-size:13px;font-weight:600;color:var(--azul-t);text-decoration:none;
  border-bottom:1.5px solid var(--azul-t);padding-bottom:1px}
.noti .acc a.ver:hover{color:var(--marino);border-color:var(--marino)}

@media (prefers-reduced-motion:no-preference){

  .tarjeta{animation:sube .34s cubic-bezier(.2,.7,.3,1) both}
  @keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}


/* =====================================================================
   ADAPTARSE A LA PANTALLA DEL APARATO
   ===================================================================== */

/* --- movil y tableta: la app ocupa TODA la pantalla ---
   Antes se quedaba en 430 px: en una tableta de 768 sobraban 338 px de
   crema a los lados. El marco redondeado es cosa del ordenador. */
@media(max-width:899.98px){
  .stage{padding:0}
  .phone{max-width:none;width:100%;border:0;border-radius:0;box-shadow:none}
}

/* --- ventana pequena de ordenador: aqui si, marco --- */
@media(min-width:900px){
  .stage{padding:16px 16px 18px}

  /* El alto sale del hueco que queda, no de 100dvh: con 100dvh MAS el
     relleno de .stage el menu de abajo se salia de la ventana. */
  .phone{height:auto;min-height:0;flex:1 1 auto;
         max-width:820px;border-radius:26px}
}

/* --- ordenador --- */
@media(min-width:1180px){
  .phone{max-width:1240px}
  .body{padding-left:22px;padding-right:22px}

  /* Aqui se aprovecha el ancho de verdad. minmax(0,1fr) y no 1fr, o una
     url larga sin espacios revienta la columna y saca barra horizontal. */
  #noticiario,#res,#resE,#gLista{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start}

  /* Los dos contadores no crecen: dos cajas de medio metro con un
     numero dentro quedan ridiculas. */
  .grid2{max-width:520px}

  /* Pantallas de texto: una columna de lectura y ya. Estiradas a 1500 px
     salian renglones de 200 caracteres, y al volver a la izquierda se
     pierde el sitio. Lo comodo son 60-90 por linea. */
  #p-legal,#p-junta,#p-sec,#p-gente{max-width:900px}

  /* Los mandos tampoco se estiran: un desplegable de metro y medio para
     elegir "Tenerife" no ayuda a nadie. Los resultados de debajo SI
     siguen ocupando todo el ancho, que es donde se agradece. */
  #p-ayudas .seg,#boxA>.card,#boxB>.card,#boxC>.card{max-width:660px}
}

/* --- monitor grande --- */
@media(min-width:1700px){
  .phone{max-width:1560px}
  #noticiario,#res,#resE,#gLista{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- pantalla baja: portatil apaisado, movil tumbado ---
   Con menos de 600 px de alto el marco es un lujo que no cabe. */
@media(min-width:900px) and (max-height:600px){
  .stage{padding:0}
  .phone{border-radius:0;border:0;max-width:none}
}


/* =====================================================================
   HOY · el informador de actualidad

   La noticia se ve distinta a la tarjeta de una convocatoria a
   proposito: una convocatoria se solicita y lleva botones; una noticia
   se lee y se abre en el medio que la publica.
   ===================================================================== */

/* --- los botones de tema --- */
.temas{display:flex;gap:6px;flex-wrap:wrap}
.temas button{border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.temas button i{font-style:normal;margin-left:4px;color:var(--tenue)}
.temas button:hover{border-color:var(--marino)}
.temas button:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
.temas button[aria-pressed="true"]{background:var(--marino);border-color:var(--marino);
  color:var(--onaccent)}
.temas button[aria-pressed="true"] i{color:var(--onaccent);opacity:.75}

/* --- la noticia --- */
.nt{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.nt:hover{border-color:var(--marino)}
.nt:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
.nt .nc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.nt .medio{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.nt .cuando{font-size:11.5px;color:var(--tenue)}
.nt b{display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.nt:hover b{color:var(--marino)}
.nt .np{display:block;margin-top:8px}
.nt .tema{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tenue)}

/* ---------- editor de situaciones (sólo Presidencia) ---------- */
/* OJO: un display:flex pisa el atributo hidden. Sin esto, la junta veia el
   editor y el formulario no se cerraba al guardar (visto en la captura). */
#abrirEditorSit[hidden],.editor-sit[hidden],.editor-sit [hidden]{display:none!important}
#abrirEditorSit,.fila-bot .btn.ghost{border:1px solid var(--line)}
.editor-sit{display:flex;flex-direction:column;gap:11px;margin-top:10px}
.editor-sit .ed-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.editor-sit .ed-tit{margin:3px 0 0;font-size:16px;line-height:1.25;color:var(--ink)}
.mini{width:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 11px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:700;line-height:1.2;
  cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--marino)}
.mini.ghost{background:transparent}
.mini.quitar{color:var(--crit);border-color:color-mix(in srgb, var(--crit) 40%, transparent)}
.lista-sit{display:flex;flex-direction:column;gap:8px}
.lista-sit .it{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.lista-sit .it b{display:block;font-size:14px;line-height:1.3}
.lista-sit .it small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.lista-sit .it .acc{display:flex;gap:6px;flex:none}
.form-sit{display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);padding-top:12px}
.aviso-mun{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.aviso-mun .note{margin:0}
.fichas-sit{display:flex;flex-direction:column;gap:10px}
.ficha-ed{display:flex;flex-direction:column;gap:9px;padding:11px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface-2)}
.ficha-ed .ft{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azul-t)}
.msg-sit{margin:0;padding:9px 11px;border-radius:10px;font-size:13px;line-height:1.45;
  background:var(--crit-bg);color:var(--crit)}
.fila-bot{display:flex;gap:8px}
.fila-bot .btn{flex:1}

/* ---------- "La asociacion": fines y actividades de los estatutos ---------- */
.fin-cita{margin:8px 0 0;padding:9px 11px;border-left:3px solid var(--dorado);border-radius:8px;
  background:var(--surface-2);font-size:12.5px;line-height:1.5;color:var(--ink-2);font-style:italic}
.fin-cita[hidden]{display:none!important}
.estatutos-fines{border-top:1px solid var(--line);padding-top:10px}
.estatutos-fines summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--dorado-t)}
.estatutos-fines h4{margin:12px 0 4px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.estatutos-fines ol{margin:0;padding-left:20px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.estatutos-fines li{margin-bottom:6px}
.estatutos-fines .note{margin:8px 0 0}

/* ---------- Bolsa de empleo: secciones por quien la da ---------- */
#resE .bolsa-sec{margin:16px 0 2px;color:var(--azul-t)}
#resE .bolsa-sec:first-child{margin-top:4px}
/* WhatsApp en la Bolsa (14 sep 2026): la lista arriba de cada seccion y uno en cada tarjeta */
#resE .bolsa-todo{margin:6px 0 10px}
#resE .aid a.wa{margin-top:4px}

/* ---------- Personas: el Registro en la base de datos (14 sep 2026) ---------- */
/* un display pisa el atributo hidden: aqui manda hidden, siempre */
#boxReg [hidden]{display:none!important}
.reg-form{display:flex;flex-direction:column;gap:11px}
.doc-fila{display:grid;grid-template-columns:minmax(0,124px) minmax(0,1fr);gap:8px}
.reg-ayuda{margin:5px 0 0}
.reg-ayuda.err{color:var(--crit)}
.reg-ayuda.ok{color:var(--ok-t)}
.multi-boton{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.multi-boton svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.multi-boton[aria-expanded="true"]{border-color:var(--marino)}
.multi-boton[aria-expanded="true"] svg{transform:rotate(180deg)}
.multi-boton:focus-visible{outline:2px solid var(--marino);outline-offset:1px}
.multi-lista{display:flex;flex-direction:column;gap:12px;margin-top:8px;padding:11px 10px 0;
  border:1px solid var(--line);border-radius:11px;background:var(--surface-2);max-height:380px;overflow-y:auto}
.multi-grupo{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:1px}
.multi-grupo legend{padding:0;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verde-t)}
.multi-op{display:flex;align-items:flex-start;gap:10px;padding:7px 4px;font-size:13.5px;line-height:1.35;
  color:var(--ink);cursor:pointer;border-radius:8px}
/* casillas dibujadas a mano: la regla general de input (padding, fondo, borde) y el
   modo oscuro del movil las pintaban como cuadrados negros, que parecen marcados */
.multi-op input,.consent input{-webkit-appearance:none;appearance:none;width:21px;height:21px;min-width:21px;
  margin:0;padding:0;flex:none;border:2px solid var(--ink-3);border-radius:5px;background:var(--surface);
  display:inline-grid;place-content:center;cursor:pointer}
.multi-op input:checked,.consent input:checked{background:var(--verde);border-color:var(--verde)}
.multi-op input:checked::after,.consent input:checked::after{content:"";width:5px;height:10px;
  border:solid var(--onaccent);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.multi-op input:focus-visible,.consent input:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
.multi-lista .mini{position:sticky;bottom:0;align-self:stretch;margin:0 -10px;border-radius:0 0 10px 10px;
  border-width:1px 0 0;padding:10px;background:var(--surface)}
.multi-elegidas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip-sit{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 5px 5px 10px;
  border-radius:99px;border:1px solid color-mix(in srgb, var(--verde) 45%, transparent);background:var(--ok-bg);
  color:var(--ok-t);font:inherit;font-size:12.5px;line-height:1.25;text-align:left;cursor:pointer}
.chip-sit span{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:99px;
  background:color-mix(in srgb, var(--verde) 22%, transparent);font-size:13px;line-height:1}
.consent{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);font-size:13.5px;line-height:1.45;color:var(--ink);cursor:pointer}
.msg-reg{margin:0;padding:9px 11px;border-radius:10px;font-size:13px;line-height:1.45}
.msg-reg.err{background:var(--crit-bg);color:var(--crit)}
.msg-reg.ok{background:var(--ok-bg);color:var(--ok-t)}
.sits-reg{display:flex;flex-wrap:wrap;gap:5px}
.sits-reg span{font-size:12px;line-height:1.3;padding:3px 8px;border-radius:7px;background:var(--ok-bg);color:var(--ok-t)}
.sits-reg .vez{background:var(--warn-bg);color:var(--warn);font-weight:700}
.reg-ficha .reg-quien{margin:0}
.ver-doc{border:0;background:transparent;color:var(--marino);font:inherit;font-size:11px;font-weight:700;
  text-decoration:underline;cursor:pointer;padding:0 0 0 6px}
.acc-reg{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* el boton de WhatsApp dentro de una tarjeta: .aid a lo pintaba de azul y subrayado */
.aid a.wa{color:#fff;border-bottom:0;font-size:13px;text-decoration:none;align-self:flex-start}
.wa-todo{display:flex}

/* ---------- Secretaría > Trámites (14 sep 2026) ---------- */
/* OJO: #boxTram lleva display:flex, que pisa hidden. Visto en la prueba: la junta lo veia. */
#sT[hidden],#boxTram[hidden],#boxTram [hidden]{display:none!important}
#boxTram{display:flex;flex-direction:column;gap:12px}
.tram-archivo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tram-vista{width:100%;max-height:340px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.tram-lista{display:flex;flex-direction:column;gap:8px}
.tram-tipo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.tram-tipo b{font-size:14px;line-height:1.3}
.tram-tipo small{font-size:12px;color:var(--ink-3);line-height:1.35}
.tram-tipo:hover,.tram-tipo:focus-visible{border-color:var(--marino)}
.tram-lectura{display:flex;flex-direction:column;gap:8px}
.tram-lectura .eyebrow{margin:0}
.tram-org{margin:0;font-size:16px;line-height:1.3;color:var(--ink)}
.tram-doc{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.tram-doc.si{border-left:4px solid var(--verde)}
.tram-doc.no{border-left:4px solid var(--dorado)}
.tram-doc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tram-doc-tx b{font-size:13.5px;line-height:1.3}
.tram-doc-tx small{font-size:12px;color:var(--ink-2);line-height:1.4}
.tram-doc-acc{display:flex;flex-direction:column;gap:6px;flex:none}
.tram-doc-acc .btn{white-space:nowrap}
.tram-editor{display:flex;flex-direction:column;gap:11px}
.tram-editor .eyebrow{margin:0}
.tram-editor .ed-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tram-editor .ed-tit{margin:3px 0 0;font-size:16px;line-height:1.25;color:var(--ink)}
.tram-campos{display:flex;flex-direction:column;gap:11px}
.tram-filas,.tram-acts{display:flex;flex-direction:column;gap:6px}
.tram-filas .f,.tram-acts .f{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0 0 2px}
.tram-fila{display:grid;grid-template-columns:minmax(0,1fr) 100px 36px;gap:6px;align-items:center}
.tram-fila.c4{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.tram-fila.c4 .tram-quitar{grid-column:span 2;width:auto;height:30px;font-size:12.5px}
.tram-quitar{width:36px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--crit);
  font:inherit;font-size:17px;line-height:1;cursor:pointer}
.tram-filas .mini,.tram-acts .mini{align-self:flex-start}
.tram-act{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.tram-act .mini.quitar{align-self:flex-start}
.tram-fines summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--marino);padding:4px 0}
.tram-fines .multi-op{font-size:13px}
.tram-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.tram-cargo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.tram-cargo .tram-quitar{grid-column:span 2;width:auto;height:30px;font-size:12.5px}
.tram-datos summary{cursor:pointer;font-weight:700;color:var(--marino);display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none}
.tram-datos summary::-webkit-details-marker{display:none}
.tram-datos form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.tram-listo{display:flex;flex-direction:column;gap:9px;margin-top:4px;padding:12px;border-radius:11px;background:var(--ok-bg);
  border:1px solid color-mix(in srgb, var(--verde) 40%, transparent)}
.tram-listo p{margin:0;font-size:13.5px;color:var(--ok-t)}
.tram-listo .tram-botones{display:flex;flex-wrap:wrap;gap:8px}
.tram-avisos{margin:0;padding:9px 11px 9px 26px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;line-height:1.45}

/* ---------- Junta: moviles y "Enviar mi contacto" (14 sep 2026) ---------- */
#cargos .junta-movil{display:block;width:max-content;max-width:100%;margin:3px 0 4px;font-size:14px;font-weight:600;
  color:var(--azul-t);text-decoration:none;border-bottom:1px solid currentColor;line-height:1.35}
#cargos .junta-wa{display:flex;width:max-content;max-width:100%;margin:6px 0 8px;font-size:13px}

/* ---------- Secretaría > Documentos: reuniones y actas (14 sep 2026) ---------- */
/* OJO: display:flex pisa hidden (ya paso en Tramites): se fuerza aqui. */
#reuBox[hidden],#reuDetalle[hidden],#reuBox [hidden],#reuDetalle [hidden],#reuGuardarConv[hidden],#reuMsgConv[hidden]{display:none!important}
.reu-caja,.reu-detalle{display:flex;flex-direction:column;gap:11px;margin-top:12px}
.reu-caja .eyebrow,.reu-detalle .eyebrow{margin:0}
.reu-caja .ed-cab,.reu-detalle .ed-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.reu-caja .ed-tit,.reu-detalle .ed-tit{margin:3px 0 0;font-size:16px;line-height:1.25;color:var(--ink)}
.reu-lista{display:flex;flex-direction:column;gap:8px}
.reu-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.reu-orden{margin:0;padding-left:20px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.reu-fotos-caja{display:flex;flex-direction:column;gap:9px;padding:10px;border:1px dashed var(--line);border-radius:12px}
.reu-fotos-caja>.f{margin:0}
.reu-fotos,.reu-nuevas{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.reu-foto{display:flex;flex-direction:column;gap:4px}
.reu-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);cursor:zoom-in}
.reu-foto small{font-size:11.5px;color:var(--ink-3)}
.reu-foto .mini,#reuReleer{align-self:flex-start}
#reuForm [data-filas]{display:flex;flex-direction:column;gap:6px}
.reu-persona{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 36px;gap:6px;align-items:center}
.reu-texto{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:6px;align-items:start}
.reu-texto textarea,.reu-acuerdo textarea{width:100%;resize:vertical}
.reu-votos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.reu-revisada{font-weight:600}
.reu-borrar{align-self:flex-start;color:var(--crit)}
#acciones #reuGuardarConv{margin-left:8px}
#acciones #reuMsgConv{margin-top:8px}