/* =============================================================================
   Trébol Studio · Área de clientes (trebolstudio.es/cliente)
   Sin librerías. Mismos tokens que la landing: OKLCH, un --wrap, 3 radios.
   Escritorio primero en composición; adaptable de 320 a 2560 px y más.
   ============================================================================= */

/* ---------- Fuente autoalojada ---------- */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url(fonts/bricolage-latin.woff2?v=0bb8a6375f) format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url(fonts/bricolage-latin-ext.woff2?v=0bb8a6375f) format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Respaldo";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:105%; ascent-override:89%; descent-override:24%; line-gap-override:0%;
}

/* Montserrat (SIL OFL 1.1), solo titulares: eje wght 500-800, subconjuntos latin y latin-ext, autoalojada. v5, 12/10/2026 */
@font-face{
  font-family:"Montserrat";
  src:url(fonts/montserrat-v5-latin.woff2?v=0bb8a6375f) format("woff2");
  font-weight:500 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url(fonts/montserrat-v5-latinext.woff2?v=0bb8a6375f) format("woff2");
  font-weight:500 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* respaldo con métricas ajustadas (Arial es ~9-14 % más estrecha que Montserrat): evita el salto al cargar la fuente */
@font-face{
  font-family:"Montserrat Respaldo";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  font-weight:500 649;
  size-adjust:113%; ascent-override:85.7%; descent-override:22.2%; line-gap-override:0%;
}
@font-face{
  font-family:"Montserrat Respaldo";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold");
  font-weight:650 800;
  size-adjust:109.5%; ascent-override:88.4%; descent-override:22.9%; line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  --v-950:oklch(.17 .03 168);
  --v-900:oklch(.235 .042 165);
  --v-850:oklch(.27 .05 163);
  --v-800:oklch(.31 .062 161);
  --v-700:oklch(.37 .072 158);
  --v-600:oklch(.46 .08 157);
  --v-100:oklch(.93 .03 150);
  --crema:#fff;
  --papel:#f1f5f3;
  --blanco:#fff;
  --fondo:#f4f8f6;           /* relleno suave (gris verdoso) dentro de tarjetas; el fondo de la página es BLANCO */
  --campo-borde:oklch(.23 .035 165 / .55);   /* borde de campos: ≥ 3:1 sobre blanco (WCAG 1.4.11) */
  --oro:oklch(.66 .115 82);
  --oro-suave:oklch(.80 .095 88);
  --oro-texto:oklch(.50 .10 82);
  --oro-fondo:oklch(.94 .045 88);
  --brote:oklch(.82 .14 140);
  --tinta:oklch(.23 .035 165);
  --tinta-2:oklch(.40 .03 160);
  --tinta-3:oklch(.48 .025 160);
  --linea:oklch(.23 .035 165 / .12);
  --linea-fuerte:oklch(.23 .035 165 / .26);
  --foco:var(--v-700);

  /* estados */
  --ok:oklch(.42 .10 152);       --ok-fondo:oklch(.93 .05 150);      --ok-punto:oklch(.58 .14 150);
  --pend:oklch(.44 .09 70);      --pend-fondo:oklch(.94 .055 85);    --pend-punto:oklch(.70 .13 78);
  --venc:oklch(.47 .16 28);      --venc-fondo:oklch(.94 .035 28);    --venc-punto:oklch(.60 .19 28);
  --rev:oklch(.43 .08 235);      --rev-fondo:oklch(.94 .025 235);    --rev-punto:oklch(.60 .12 235);
  --neutro:oklch(.42 .02 160);   --neutro-fondo:oklch(.93 .01 160);  --neutro-punto:oklch(.62 .02 160);

  /* rejilla y medidas */
  --gutter:clamp(1rem, .55rem + 2.2vw, 3rem);
  --wrap:min(82rem, 100% - 2 * var(--gutter));
  --hueco:clamp(.9rem, .6rem + .9vw, 1.6rem);
  --mq-h:0rem;                  /* sin barra de maqueta */
  --sup-h:4.25rem;              /* barra superior de la app */
  --lat:17.5rem;                /* lateral */
  --nav-m:4.5rem;               /* navegación inferior móvil */

  /* radios: 3 y píldora */
  --r-s:10px; --r-m:16px; --r-l:28px;
  --hoja-forma:var(--r-l) var(--r-s) var(--r-l) var(--r-s);
  --hoja-grande:clamp(2rem, 1rem + 3vw, 4.5rem) var(--r-s) clamp(2rem, 1rem + 3vw, 4.5rem) var(--r-s);

  --sombra-1:0 1px 2px oklch(.23 .035 165 / .05), 0 6px 18px -8px oklch(.23 .035 165 / .14);
  --sombra-2:0 2px 6px oklch(.23 .035 165 / .06), 0 30px 60px -24px oklch(.17 .03 168 / .32);

  /* tipografía (escala con el tamaño raíz, que crece hasta 2560 px) */
  --t-xs:.8125rem;
  --t-s:.9375rem;
  --t-base:1rem;
  --t-l:1.1875rem;
  --t-h3:1.375rem;
  --t-h2:clamp(1.5rem, 1.2rem + .9vw, 2rem);
  --t-h1:clamp(1.85rem, 1.3rem + 1.7vw, 3rem);
  --t-cifra:clamp(2rem, 1.4rem + 1.6vw, 3rem);

  --e-sale:cubic-bezier(.16,1,.3,1);
  --e-mueve:cubic-bezier(.65,0,.35,1);
  --e-resorte:cubic-bezier(.34,1.56,.64,1);
  --d-micro:.18s; --d-comp:.45s;
}
@media (min-width:768px){ :root{--lat:5.25rem} }
@media (min-width:1200px){ :root{--lat:17.5rem} }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:clamp(100%, calc(10px + .4167vw), 137.5%);   /* 16 px hasta 1440, 18 a 1920, 20,7 a 2560 */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:#fff;
  color-scheme:light;
}
body{
  margin:0; min-height:100svh;
  background:#fff; color:var(--tinta);
  font-family:"Bricolage Grotesque","Bricolage Respaldo",system-ui,sans-serif;
  font-size:var(--t-base); line-height:1.55; font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block; max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0; list-style:none}
a{color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px}
h1,h2,h3,h4{line-height:1.12; text-wrap:balance; font-weight:700; letter-spacing:-.02em}
p{text-wrap:pretty}
b,strong{font-weight:650}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
table{border-collapse:collapse; width:100%}
[hidden]{display:none!important}
.defs{position:absolute; width:0; height:0; overflow:hidden}
.sr{position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.ico{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
.num{font-variant-numeric:tabular-nums}
.suave{color:var(--tinta-2)}
.peq{font-size:var(--t-xs)}
:focus-visible{outline:3px solid var(--foco); outline-offset:3px; border-radius:6px}
.oscuro{
  --foco:var(--oro-suave);
  --tinta-2:oklch(.86 .02 130);
  --tinta-3:oklch(.78 .02 130);
  --linea:oklch(1 0 0 / .12);
  --linea-fuerte:oklch(1 0 0 / .26);
  color:var(--crema);
}

.saltar{
  position:fixed; z-index:200; left:1rem; top:1rem;
  padding:.8rem 1.1rem; border-radius:var(--r-s);
  background:var(--crema); color:var(--tinta); font-weight:650;
  translate:0 -300%; transition:translate var(--d-micro);
}
.saltar:focus{translate:0 0}

/* ---------- Piezas comunes ---------- */
.etiqueta{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro-texto);
}
.etiqueta::before{content:""; width:.62em; height:.62em; flex:none; background:currentColor; border-radius:.62em 0 .62em 0}
.oscuro .etiqueta{color:var(--oro-suave)}

.boton{
  --bg:var(--v-800); --fg:var(--crema);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:2.75rem; padding:.65em 1.25em;
  border:0; border-radius:999px; background:var(--bg); color:var(--fg);
  font-weight:650; font-size:var(--t-s); line-height:1.2; text-decoration:none; text-align:center; white-space:nowrap;
  transition:background-color var(--d-micro), color var(--d-micro), scale var(--d-micro) var(--e-sale), box-shadow var(--d-micro);
}
.boton:active{scale:.97; transition-duration:.08s}
.boton .ico{width:1.1em; height:1.1em}
.boton .flecha{transition:translate .35s var(--e-sale)}
@media (hover:hover){
  .boton:hover{--bg:var(--v-700)}
  .boton:hover .flecha{translate:.25em 0}
}
.boton-oro{--bg:var(--oro-suave); --fg:var(--v-950)}
@media (hover:hover){ .boton-oro:hover{--bg:oklch(.86 .09 90)} }
.boton-linea{--bg:transparent; --fg:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--linea-fuerte)}
@media (hover:hover){ .boton-linea:hover{--bg:oklch(.23 .035 165 / .05); box-shadow:inset 0 0 0 1.5px var(--tinta)} }
.oscuro .boton-linea{--fg:var(--crema); box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .35)}
@media (hover:hover){ .oscuro .boton-linea:hover{--bg:oklch(1 0 0 / .06); box-shadow:inset 0 0 0 1.5px var(--oro-suave)} }
.boton-texto{--bg:transparent; --fg:var(--v-700); padding-inline:.6em}
@media (hover:hover){ .boton-texto:hover{--bg:oklch(.23 .035 165 / .06)} }
.boton-peligro{--bg:transparent; --fg:var(--venc); box-shadow:inset 0 0 0 1.5px oklch(.47 .16 28 / .4)}
@media (hover:hover){ .boton-peligro:hover{--bg:var(--venc-fondo)} }
.boton-s{min-height:2.75rem; padding:.5em 1em; font-size:var(--t-xs)}
.boton-l{min-height:3.25rem; padding:.85em 1.6em; font-size:var(--t-base)}
.boton-ancho{width:100%}
.boton[disabled],.boton[aria-disabled="true"]{opacity:.5; pointer-events:none}
.boton-icono{
  display:inline-grid; place-items:center; width:2.75rem; height:2.75rem; flex:none;
  border:0; border-radius:50%; background:transparent; color:inherit; position:relative;
  transition:background-color var(--d-micro);
}
@media (hover:hover){ .boton-icono:hover{background:oklch(.23 .035 165 / .07)} .oscuro .boton-icono:hover{background:oklch(1 0 0 / .08)} }
.boton-icono .ico{width:1.3rem; height:1.3rem}

.enlace{color:var(--v-700); font-weight:620; text-decoration:underline; text-decoration-color:oklch(.37 .072 158 / .35)}
.enlace:hover{text-decoration-color:currentColor}
.oscuro .enlace{color:var(--oro-suave)}

/* chips de estado: color + punto + texto (nunca solo color) */
.estado{
  --c:var(--neutro); --f:var(--neutro-fondo); --p:var(--neutro-punto);
  display:inline-flex; align-items:center; gap:.45em;
  padding:.28em .7em .28em .6em; border-radius:999px;
  background:var(--f); color:var(--c);
  font-size:.75rem; font-weight:650; letter-spacing:.01em; line-height:1.25; white-space:nowrap;
}
.estado::before{content:""; width:.5em; height:.5em; border-radius:.5em 0 .5em 0; background:var(--p); flex:none}
.e-ok{--c:var(--ok); --f:var(--ok-fondo); --p:var(--ok-punto)}
.e-pend{--c:var(--pend); --f:var(--pend-fondo); --p:var(--pend-punto)}
.e-venc{--c:var(--venc); --f:var(--venc-fondo); --p:var(--venc-punto)}
.e-rev{--c:var(--rev); --f:var(--rev-fondo); --p:var(--rev-punto)}
.e-vivo::before{animation:latido 1.8s var(--e-mueve) infinite}
@keyframes latido{50%{scale:1.5; opacity:.55}}
.ejemplo{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.2em .65em; border-radius:999px;
  border:1px dashed oklch(.50 .10 82 / .6); color:var(--oro-texto);
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.oscuro .ejemplo{color:var(--oro-suave); border-color:oklch(.80 .095 88 / .55)}
.insignia{
  display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding-inline:.35rem;
  border-radius:999px; background:var(--oro-suave); color:var(--v-950);
  font-size:.7rem; font-weight:750; font-variant-numeric:tabular-nums; line-height:1;
}

/* tarjetas */
.tarjeta{
  position:relative; min-width:0;
  background:var(--blanco); border-radius:var(--r-m);
  box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-1);
  padding:clamp(1.05rem, .8rem + .7vw, 1.6rem);
}
.tarjeta-cab{display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; margin-bottom:1rem}
.tarjeta-t{font-size:1.0625rem; font-weight:680; letter-spacing:-.015em; display:flex; align-items:center; gap:.55rem}
.tarjeta-t .ico{color:var(--oro-texto)}
.tarjeta-pie{margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap}
.hoja-oscura{
  position:relative; isolation:isolate; overflow:hidden; min-width:0;
  border-radius:var(--hoja-grande);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, oklch(.36 .07 158 / .55), transparent 70%),
    linear-gradient(160deg, var(--v-850), var(--v-950));
  color:var(--crema);
  padding:clamp(1.4rem, 1rem + 1.6vw, 2.75rem);
}

/* cabecera de vista */
.cab-vista{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; margin-bottom:clamp(1.25rem, 1rem + 1vw, 2.25rem)}
.cab-vista > div:first-child{min-width:0; max-width:46rem}
.t-vista{font-size:var(--t-h1); font-weight:740; letter-spacing:-.035em; line-height:1.02; margin-top:.35em; font-variation-settings:"opsz" 72}
.cab-vista p{color:var(--tinta-2); margin-top:.6rem; max-width:60ch}
.acciones{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}

/* rejilla de 12 columnas que se activa por contenedor */
.rejilla{display:grid; gap:var(--hueco); grid-template-columns:minmax(0,1fr); align-items:start}
.rejilla > *{grid-column:1 / -1}
.estirar{align-self:stretch}

/* formularios */
.campo{display:grid; gap:.4rem; min-width:0}
.campo > label,.campo-etq{font-size:var(--t-s); font-weight:620}
.campo-ayuda{font-size:var(--t-xs); color:var(--tinta-2)}
.entrada{
  width:100%; min-height:3rem; padding:.7rem .95rem;
  border:0; border-radius:var(--r-s); background:var(--blanco);
  box-shadow:inset 0 0 0 1.5px var(--linea-fuerte);
  font-size:1rem; color:var(--tinta);
  transition:box-shadow var(--d-micro), background-color var(--d-micro);
}
.entrada::placeholder{color:oklch(.55 .02 160)}
.entrada:hover{box-shadow:inset 0 0 0 1.5px oklch(.23 .035 165 / .45)}
.entrada:focus{outline:none; box-shadow:inset 0 0 0 2px var(--v-700), 0 0 0 4px oklch(.37 .072 158 / .14)}
.entrada[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--venc)}
textarea.entrada{min-height:7rem; resize:vertical; line-height:1.5}
select.entrada{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position:calc(100% - 1.2rem) 50%, calc(100% - .85rem) 50%; background-size:.35rem .35rem; background-repeat:no-repeat; padding-right:2.4rem}
.con-boton{position:relative}
.con-boton .entrada{padding-right:3.25rem}
.con-boton .boton-icono{position:absolute; right:.15rem; top:50%; translate:0 -50%; color:var(--tinta-2)}
.error-campo{display:flex; gap:.45rem; align-items:flex-start; color:var(--venc); font-size:var(--t-xs); font-weight:600}
.casilla{display:flex; align-items:center; gap:.7rem; min-height:2.75rem; cursor:pointer; font-size:var(--t-s)}
.casilla input{
  appearance:none; width:1.35rem; height:1.35rem; margin:0; flex:none; cursor:pointer;
  border-radius:6px 2px 6px 2px; box-shadow:inset 0 0 0 1.5px var(--linea-fuerte); background:var(--blanco);
  display:grid; place-items:center; transition:background-color var(--d-micro), box-shadow var(--d-micro);
}
.casilla input::after{content:""; width:.7rem; height:.4rem; border:2px solid var(--crema); border-top:0; border-right:0; rotate:-45deg; translate:0 -.08rem; scale:0; transition:scale .25s var(--e-resorte)}
.casilla input:checked{background:var(--v-800); box-shadow:none}
.casilla input:checked::after{scale:1}
.interruptor{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.75rem; cursor:pointer}
.interruptor input{
  appearance:none; width:2.9rem; height:1.7rem; margin:0; flex:none; border-radius:999px; cursor:pointer;
  background:oklch(.23 .035 165 / .2); position:relative; transition:background-color .25s;
}
.interruptor input::after{content:""; position:absolute; top:.2rem; left:.2rem; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--blanco); box-shadow:0 1px 3px oklch(0 0 0 / .25); transition:translate .3s var(--e-resorte)}
.interruptor input:checked{background:var(--v-700)}
.interruptor input:checked::after{translate:1.2rem 0}
.form-rejilla{display:grid; gap:1rem 1.25rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr))}
.form-rejilla .entero{grid-column:1 / -1}

/* control segmentado */
.segmentado{display:inline-flex; padding:.25rem; gap:.2rem; border-radius:999px; background:oklch(.23 .035 165 / .07)}
.segmentado button,.segmentado a{
  min-height:2.25rem; padding:.3rem .95rem; border:0; border-radius:999px; background:transparent;
  font-size:var(--t-xs); font-weight:650; color:var(--tinta-2); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  transition:background-color .25s, color .25s, box-shadow .25s;
}
.segmentado [aria-pressed="true"],.segmentado [aria-current="page"],.segmentado [aria-selected="true"]{background:var(--blanco); color:var(--tinta); box-shadow:0 1px 3px oklch(.23 .035 165 / .18)}

/* filtros en píldora */
.filtros{display:flex; gap:.45rem; flex-wrap:wrap}
.filtro{
  display:inline-flex; align-items:center; gap:.45rem; min-height:2.5rem; padding:.35rem .95rem;
  border:0; border-radius:999px; background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea-fuerte);
  font-size:var(--t-xs); font-weight:620; color:var(--tinta-2); transition:background-color .2s, color .2s, box-shadow .2s;
}
.filtro .cuenta{font-variant-numeric:tabular-nums; opacity:.7}
.filtro[aria-pressed="true"]{background:var(--v-800); color:var(--crema); box-shadow:none}
@media (hover:hover){ .filtro:hover{color:var(--tinta)} .filtro[aria-pressed="true"]:hover{color:var(--crema)} }
@media (pointer:coarse){ .filtro,.segmentado button,.segmentado a{min-height:2.75rem} }

/* barra de progreso */
.barra{height:.5rem; border-radius:999px; background:oklch(.23 .035 165 / .1); overflow:hidden}
.barra > span{display:block; height:100%; width:var(--v, 0%); border-radius:inherit; background:linear-gradient(90deg, var(--v-700), var(--v-600)); transition:width 1.1s var(--e-sale)}
.barra.oro > span{background:linear-gradient(90deg, var(--oro), var(--oro-suave))}
.oscuro .barra{background:oklch(1 0 0 / .12)}

/* avatar */
.avatar{
  display:inline-grid; place-items:center; flex:none; width:2.5rem; height:2.5rem;
  border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s);
  background:var(--oro-suave); color:var(--v-950); font-weight:750; font-size:.85rem; letter-spacing:.02em;
}
.avatar.verde{background:var(--v-700); color:var(--crema)}
.avatar.s{width:2rem; height:2rem; font-size:.7rem}

/* anillo de progreso */
.anillo{position:relative; display:grid; place-items:center; width:var(--tam, 8rem); aspect-ratio:1; flex:none}
.anillo svg{position:absolute; inset:0; width:100%; height:100%; rotate:-90deg}
.anillo circle{fill:none; stroke-width:9; stroke-linecap:round}
.anillo .pista{stroke:oklch(.23 .035 165 / .1)}
.oscuro .anillo .pista{stroke:oklch(1 0 0 / .12)}
.anillo .valor{stroke:url(#grad-oro); stroke-dasharray:var(--c) var(--c); stroke-dashoffset:var(--c); transition:stroke-dashoffset 1.6s var(--e-sale)}
.anillo.verde .valor{stroke:var(--v-700)}
.anillo-txt{position:relative; text-align:center; line-height:1}
.anillo-num{display:block; font-size:calc(var(--tam, 8rem) * .27); font-weight:760; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.anillo-num small{font-size:.5em; font-weight:650; letter-spacing:0}
.anillo-etq{display:block; font-size:.72rem; font-weight:600; color:var(--tinta-2); margin-top:.3rem}

/* esqueletos de carga */
.esq{border-radius:var(--r-s); background:linear-gradient(90deg, oklch(.23 .035 165 / .06) 0 40%, oklch(.23 .035 165 / .11) 50%, oklch(.23 .035 165 / .06) 60% 100%) 0 0 / 300% 100%; animation:brillo 1.3s linear infinite}
@keyframes brillo{to{background-position:-150% 0}}
.esqueleto{display:grid; gap:var(--hueco)}
.esq-cab{height:5.5rem; max-width:36rem}
.esq-fila{display:grid; gap:var(--hueco); grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr))}
.esq-tarjeta{height:12rem; border-radius:var(--r-m)}
.esq-larga{height:18rem; border-radius:var(--r-m)}

/* estados vacíos */
.vacio{display:grid; justify-items:center; text-align:center; gap:.6rem; padding:clamp(2rem, 1.5rem + 3vw, 4.5rem) 1rem}
.vacio svg.ilus{width:clamp(8rem, 6rem + 6vw, 12rem); height:auto; margin-bottom:.75rem}
.vacio h3{font-size:var(--t-h3)}
.vacio p{color:var(--tinta-2); max-width:38ch}

/* tablas */
.tabla-caja{overflow-x:auto; border-radius:var(--r-m); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-1)}
.tabla{font-size:var(--t-s)}
.tabla th{
  text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2);
  padding:.9rem 1rem; border-bottom:1px solid var(--linea-fuerte); white-space:nowrap; background:var(--fondo);
}
.tabla td{padding:.85rem 1rem; border-bottom:1px solid var(--linea); vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla .dcha{text-align:right}
.tabla tbody tr{transition:background-color .2s}
@media (hover:hover){ .tabla tbody tr:hover{background:var(--fondo)} }
.tabla .celda-t{font-weight:640}
.tabla .celda-s{display:block; font-size:var(--t-xs); color:var(--tinta-2); margin-top:.1rem}
/* tabla apilada en pantallas estrechas */
@container (max-width:40rem){
  .tabla-apilable thead{display:none}
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td{display:block}
  .tabla-apilable tr{padding:.9rem 1rem; border-bottom:1px solid var(--linea)}
  .tabla-apilable tr:last-child{border-bottom:0}
  .tabla-apilable td{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.3rem 0; border:0; text-align:right}
  .tabla-apilable td::before{content:attr(data-et); font-size:var(--t-xs); font-weight:600; color:var(--tinta-2); text-align:left}
  .tabla-apilable td:first-child{display:block; text-align:left; padding-bottom:.5rem}
  .tabla-apilable td:first-child::before{display:none}
  .tabla-apilable .dcha{text-align:right}
}

/* pestañas */
.pestanas{display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--linea-fuerte); margin-bottom:1.5rem}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{
  position:relative; flex:none; min-height:2.9rem; padding:.5rem .95rem; border:0; background:transparent;
  font-size:var(--t-s); font-weight:600; color:var(--tinta-2); white-space:nowrap; display:inline-flex; align-items:center; gap:.45rem;
}
.pestanas button::after{content:""; position:absolute; left:.6rem; right:.6rem; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--oro); scale:0 1; transition:scale .35s var(--e-sale)}
.pestanas button[aria-selected="true"]{color:var(--tinta)}
.pestanas button[aria-selected="true"]::after{scale:1 1}
@media (hover:hover){ .pestanas button:hover{color:var(--tinta)} }

/* lista con iconos */
.lista-ico > li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .85rem; align-items:center; padding-block:.8rem; border-top:1px solid var(--linea)}
.lista-ico > li:first-child{border-top:0; padding-top:0}
.lista-ico > li:last-child{padding-bottom:0}
.ico-caja{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none;
  border-radius:12px 4px 12px 4px; background:var(--oro-fondo); color:var(--oro-texto);
}
.ico-caja .ico{width:1.15rem; height:1.15rem}
.ico-caja.verde{background:var(--ok-fondo); color:var(--ok)}
.ico-caja.rojo{background:var(--venc-fondo); color:var(--venc)}
.ico-caja.azul{background:var(--rev-fondo); color:var(--rev)}
.ico-caja.gris{background:var(--neutro-fondo); color:var(--neutro)}
.li-t{font-weight:620; font-size:var(--t-s); line-height:1.35}
.li-s{font-size:var(--t-xs); color:var(--tinta-2); margin-top:.1rem}

@keyframes aparece{from{opacity:0; translate:0 -.4rem}}

/* =============================================================================
   ACCESO (login, recuperar, nueva, primer acceso, caducada, verificación)
   ============================================================================= */
.acceso{
  display:grid; grid-template-columns:minmax(0,1fr);
  min-height:calc(100svh - var(--mq-h));
  background:#fff;
}
.acc-arte{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:1.25rem;
  padding:1.4rem var(--gutter) 2.2rem;
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%, oklch(.80 .095 88 / .18), transparent 60%),
    linear-gradient(170deg, var(--v-900), var(--v-950));
  border-radius:0 0 clamp(2.5rem, 1rem + 6vw, 5rem) 0;
}
.acc-arte .marca img{height:3.1rem; width:auto}
.acc-arte h2{font-size:clamp(1.6rem, 1.1rem + 2vw, 3.6rem); font-weight:760; letter-spacing:-.04em; line-height:1; max-width:14ch; font-variation-settings:"opsz" 96}
.acc-arte h2 em{font-style:normal; color:var(--oro-suave)}
.acc-arte .sub{color:var(--tinta-2); max-width:36ch; font-size:var(--t-base); margin-top:1rem}
.acc-trebol{position:absolute; z-index:-1; right:-4rem; top:-3rem; width:15rem; opacity:.14; color:var(--oro-suave)}
.acc-trebol svg{width:100%; height:auto; overflow:visible; --hoja:currentColor; --hoja-sombra:color-mix(in oklch, currentColor 40%, transparent)}
.acc-escena,.acc-lema{display:none}
.acc-panel{display:grid; align-content:center; justify-items:center; padding:2rem var(--gutter) 3rem}
.acc-caja{width:min(100%, 27rem)}
.acc-caja h1{font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.6rem); font-weight:750; letter-spacing:-.035em; line-height:1.05; margin-block:.5rem .6rem}
.acc-caja > p.intro{color:var(--tinta-2); margin-bottom:1.6rem}
.acc-form{display:grid; gap:1.1rem}
.acc-fila{display:flex; justify-content:space-between; align-items:center; gap:.5rem 1rem; flex-wrap:wrap}
.acc-nota{
  display:flex; gap:.75rem; align-items:flex-start; margin-top:1.5rem; padding:1rem 1.1rem;
  border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:var(--papel); font-size:var(--t-xs); color:var(--tinta-2); line-height:1.5;
}
.acc-nota .ico{color:var(--oro-texto); margin-top:.05rem}
.acc-nota b{color:var(--tinta)}
.acc-pie{margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--linea); font-size:var(--t-xs); color:var(--tinta-2); display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between}
.acc-volver{display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; font-size:var(--t-s); font-weight:620; color:var(--v-700); text-decoration:none}
.acc-volver .ico{rotate:180deg; width:1rem; height:1rem}
.aviso-caja{
  display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; border-radius:var(--r-m);
  font-size:var(--t-s); line-height:1.45;
}
.aviso-caja.ok{background:var(--ok-fondo); color:var(--ok)}
.aviso-caja.error{background:var(--venc-fondo); color:var(--venc)}
.aviso-caja.info{background:var(--rev-fondo); color:var(--rev)}
.aviso-caja.oro{background:var(--oro-fondo); color:var(--pend)}
.aviso-caja b{color:inherit}
.aviso-caja .ico{margin-top:.1rem}
.pasos-acc{display:flex; gap:.4rem; align-items:center; margin-bottom:1rem; font-size:var(--t-xs); font-weight:650; color:var(--tinta-2)}
.pasos-acc span{display:inline-flex; align-items:center; gap:.4rem}
.pasos-acc i{display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; font-style:normal; box-shadow:inset 0 0 0 1.5px var(--linea-fuerte)}
.pasos-acc .hecho i{background:var(--v-700); color:var(--crema); box-shadow:none}
.pasos-acc .actual i{background:var(--oro-suave); color:var(--v-950); box-shadow:none}
.pasos-acc .linea{flex:1; height:1px; background:var(--linea-fuerte); min-width:1rem}
.usuario-fijo{display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border-radius:var(--r-s); background:var(--papel); font-size:var(--t-s)}
.usuario-fijo .avatar{width:2.25rem; height:2.25rem}

/* medidor de fortaleza: cuatro hojas */
.medidor{display:flex; align-items:center; gap:.85rem}
.medidor-hojas{display:flex; gap:.3rem}
.medidor-hojas i{
  width:1.15rem; height:1.15rem; border-radius:1.15rem 0 1.15rem 0; background:oklch(.23 .035 165 / .12);
  transition:background-color .35s, scale .4s var(--e-resorte);
}
.medidor[data-nivel="1"] i:nth-child(-n+1){background:var(--venc-punto); scale:1.08}
.medidor[data-nivel="2"] i:nth-child(-n+2){background:var(--pend-punto); scale:1.08}
.medidor[data-nivel="3"] i:nth-child(-n+3){background:var(--ok-punto); scale:1.08}
.medidor[data-nivel="4"] i{background:var(--v-700); scale:1.08}
.medidor-txt{font-size:var(--t-xs); font-weight:650; color:var(--tinta-2)}
.requisitos{display:grid; gap:.35rem; font-size:var(--t-xs); color:var(--tinta-2)}
.requisitos li{display:flex; align-items:center; gap:.55rem; transition:color .25s}
.requisitos li::before{
  content:""; width:1rem; height:1rem; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--linea-fuerte);
  transition:background .25s, box-shadow .25s;
}
.requisitos li.ok{color:var(--ok)}
.requisitos li.ok::before{box-shadow:none; background:var(--ok-punto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}

/* código TOTP */
.codigo{display:flex; gap:.5rem; justify-content:space-between}
.codigo input{
  width:100%; min-width:0; height:3.75rem; text-align:center; font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums;
  border:0; border-radius:var(--r-s); background:var(--blanco); box-shadow:inset 0 0 0 1.5px var(--linea-fuerte); caret-color:var(--v-700);
}
.codigo input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--v-700), 0 0 0 4px oklch(.37 .072 158 / .14)}
.codigo .sep{align-self:center; color:var(--tinta-3); flex:none}
.totp-reloj{display:flex; align-items:center; gap:.7rem; font-size:var(--t-xs); color:var(--tinta-2)}
.totp-reloj svg{width:1.6rem; height:1.6rem; rotate:-90deg}
.totp-reloj circle{fill:none; stroke-width:4}

/* escritorio: arte a la izquierda, formulario a la derecha */
@media (min-width:960px){
  .acceso{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .acc-arte{
    position:sticky; top:var(--mq-h); height:calc(100svh - var(--mq-h)); min-height:36rem;
    padding:clamp(2rem, 1rem + 2.5vw, 4rem); justify-content:space-between;
    border-radius:0 0 clamp(4rem, 2rem + 6vw, 11rem) 0;
  }
  .acc-arte .marca img{height:3.5rem}
  .acc-trebol{display:none}
  .acc-escena{display:block; position:relative; flex:1; min-height:0; margin-block:1rem}
  .acc-lema{display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:var(--t-xs); color:var(--tinta-3)}
  .acc-lema b{color:var(--oro-suave); font-weight:650; font-size:var(--t-s)}
  .acc-panel{padding:3rem clamp(2rem, 1rem + 4vw, 7rem)}
  .acc-caja{width:min(100%, 29rem)}
}
/* escena: trébol de 4 hojas separadas + tarjetas flotantes */
.escena-trebol{position:absolute; left:50%; top:50%; width:min(70%, 26rem, 52vh); aspect-ratio:1; translate:-50% -50%}
.escena-trebol svg{width:100%; height:100%; overflow:visible; --hoja:var(--v-700); --hoja-sombra:var(--v-950)}
.escena-trebol .h{transform-box:fill-box; transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .escena-trebol .h{animation:hoja-abre 1.4s var(--e-sale) both}
  .escena-trebol .h1{--dx:-10px; --dy:-10px; animation-delay:.1s}
  .escena-trebol .h2{--dx:10px; --dy:-10px; animation-delay:.22s}
  .escena-trebol .h3{--dx:10px; --dy:10px; animation-delay:.34s}
  .escena-trebol .h4{--dx:-10px; --dy:10px; animation-delay:.46s}
  .escena-trebol svg{animation:gira 60s linear infinite}
}
.escena-trebol .h1{translate:-10px -10px} .escena-trebol .h2{translate:10px -10px} .escena-trebol .h3{translate:10px 10px} .escena-trebol .h4{translate:-10px 10px}
@keyframes hoja-abre{from{translate:0 0; opacity:0; scale:.85}}
@keyframes gira{to{rotate:360deg}}
.escena-halo{position:absolute; left:50%; top:50%; width:min(95%, 36rem, 72vh); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle, oklch(.80 .095 88 / .22), transparent 62%)}
.flota{
  position:absolute; display:flex; align-items:center; gap:.7rem; padding:.75rem .95rem .75rem .75rem;
  border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s);
  background:#fff; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linea), 0 24px 50px -24px oklch(.17 .03 168 / .4);
  font-size:var(--t-xs); line-height:1.3; max-width:16rem;
}
.flota b{display:block; font-size:var(--t-s)}
.flota .ico-caja{width:2.25rem; height:2.25rem}
.f1{left:4%; top:12%} .f2{right:2%; top:42%} .f3{left:10%; bottom:8%}
@media (prefers-reduced-motion:no-preference){
  .flota{animation:flota-entra 1s var(--e-sale) both, flota-mece 7s ease-in-out infinite}
  .f1{animation-delay:.7s, 1.7s} .f2{animation-delay:.9s, 2.6s} .f3{animation-delay:1.1s, 3.4s}
}
@keyframes flota-entra{from{opacity:0; translate:0 1.2rem}}
@keyframes flota-mece{50%{translate:0 -.45rem}}

/* =============================================================================
   APP (cliente y equipo)
   ============================================================================= */
.app{display:grid; grid-template-columns:minmax(0,1fr); min-height:calc(100svh - var(--mq-h))}
.lateral{display:none}
.zona{min-width:0; display:flex; flex-direction:column}
.barra-sup{
  position:sticky; top:var(--mq-h); z-index:40;
  display:flex; align-items:center; gap:.5rem 1rem;
  min-height:var(--sup-h); padding-inline:var(--gutter);
  background:rgb(255 255 255 / .92);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--linea);
}
.sup-marca{display:flex; align-items:center; gap:.6rem; min-height:2.75rem; text-decoration:none; min-width:0}
.sup-marca img{width:2rem; height:2rem; flex:none}
.sup-marca span{font-weight:680; font-size:var(--t-s); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sup-marca small{display:block; font-size:.7rem; font-weight:600; color:var(--tinta-2); letter-spacing:.04em}
.sup-miga{display:none; font-size:var(--t-s); color:var(--tinta-2); min-width:0}
.sup-miga b{color:var(--tinta); font-weight:650}
.buscar-btn{
  display:none; align-items:center; gap:.6rem; min-height:2.75rem; width:min(100%, 26rem); padding:.4rem .5rem .4rem .95rem;
  border:0; border-radius:999px; background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea-fuerte);
  color:var(--tinta-2); font-size:var(--t-s); text-align:left; margin-left:auto;
}
.buscar-btn kbd{margin-left:auto; padding:.15rem .5rem; border-radius:6px; background:var(--fondo); font:inherit; font-size:.72rem; font-weight:650; box-shadow:inset 0 0 0 1px var(--linea)}
.sup-acc{display:flex; align-items:center; gap:.25rem; margin-left:auto}
.punto-aviso{position:absolute; top:.55rem; right:.6rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--venc-punto); box-shadow:0 0 0 2px #fff}
.contenido{
  flex:1; min-width:0; container-type:inline-size; container-name:main;
  padding:clamp(1.1rem, .6rem + 2vw, 2.75rem) var(--gutter) calc(var(--nav-m) + 2rem + env(safe-area-inset-bottom));
}
.contenido:focus{outline:none}
.vista{min-width:0}
@media (prefers-reduced-motion:no-preference){
  .vista.entra{animation:vista-entra .55s var(--e-sale) both}
  .vista.entra .rv{animation:vista-entra .7s var(--e-sale) both; animation-delay:calc(var(--i, 0) * 60ms + 60ms)}
}
@keyframes vista-entra{from{opacity:0; translate:0 .9rem}}

/* banner «Ver como cliente» */
.ver-como{
  position:sticky; top:var(--mq-h); z-index:45;
  display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap;
  padding:.55rem var(--gutter); background:var(--oro-suave); color:var(--v-950); font-size:var(--t-s); font-weight:600;
}
.ver-como .ico{width:1.2rem; height:1.2rem}
.ver-como .boton{margin-left:auto; --bg:var(--v-950); --fg:var(--crema); min-height:2.5rem}
.ver-como:not([hidden]) + .barra-sup{top:calc(var(--mq-h) + 3.5rem)}

/* navegación inferior móvil */
.nav-movil{
  position:fixed; z-index:60; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  padding:.35rem max(.35rem, env(safe-area-inset-left)) calc(.35rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-right));
  background:oklch(.235 .042 165 / .96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:oklch(.85 .02 130); border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:0 -12px 30px -18px oklch(0 0 0 / .5);
}
.nav-movil a,.nav-movil button{
  position:relative; display:grid; justify-items:center; align-content:center; gap:.2rem; min-height:3.4rem;
  border:0; background:transparent; border-radius:var(--r-m); text-decoration:none; font-size:.68rem; font-weight:620; color:inherit;
}
.nav-movil .ico{width:1.35rem; height:1.35rem}
.nav-movil [aria-current="page"]{color:var(--oro-suave)}
.nav-movil [aria-current="page"]::before{content:""; position:absolute; top:.15rem; width:1.6rem; height:3px; border-radius:3px; background:var(--oro-suave)}
.nav-movil .insignia{position:absolute; top:.25rem; left:calc(50% + .35rem); min-width:1.1rem; height:1.1rem; font-size:.62rem}
/* hoja «Más» */
.hoja-mas{border:0; padding:0; margin:auto 0 0; width:100%; max-width:100%; max-height:85svh; background:transparent; color:var(--crema)}
.hoja-mas::backdrop{background:oklch(.17 .03 168 / .55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.hoja-mas-caja{background:var(--v-900); border-radius:var(--r-l) var(--r-l) 0 0; padding:.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); overflow:auto; max-height:85svh}
.hoja-mas-asa{width:2.5rem; height:4px; border-radius:4px; background:oklch(1 0 0 / .25); margin:0 auto .75rem}
.hoja-mas ul{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap:.4rem}
.hoja-mas a{display:flex; align-items:center; gap:.7rem; min-height:3.25rem; padding:.5rem .8rem; border-radius:var(--r-m); background:oklch(1 0 0 / .05); text-decoration:none; font-weight:600; font-size:var(--t-s)}
.hoja-mas a[aria-current="page"]{background:var(--oro-suave); color:var(--v-950)}
@media (prefers-reduced-motion:no-preference){ .hoja-mas[open] .hoja-mas-caja{animation:sube-hoja .4s var(--e-sale)} }
@keyframes sube-hoja{from{translate:0 100%}}

/* lateral: carril (768-1199) y completo (1200+) */
@media (min-width:768px){
  .app{grid-template-columns:var(--lat) minmax(0,1fr)}
  .nav-movil{display:none}
  .contenido{padding-bottom:3rem}
  .lateral{
    position:sticky; top:var(--mq-h); z-index:50; height:calc(100svh - var(--mq-h));
    display:flex; flex-direction:column; gap:.75rem;
    padding:1.1rem .7rem 1rem; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:oklch(1 0 0 / .15) transparent;
    background:
      radial-gradient(ellipse 120% 40% at 0% 100%, oklch(.80 .095 88 / .1), transparent 70%),
      linear-gradient(180deg, var(--v-950), var(--v-900) 30%);
    color:var(--crema);
    border-radius:0 0 clamp(2.5rem, 1.5rem + 2vw, 4rem) 0;
  }
  .sup-marca{display:none}
  .sup-miga{display:block}
  .buscar-btn{display:flex}
}
.lat-marca{display:flex; align-items:center; justify-content:center; min-height:2.75rem; padding-inline:.4rem; border-radius:var(--r-s)}
.lat-marca .logo{display:none; height:2.75rem; width:auto}
.lat-marca .simbolo{width:2.1rem; height:2.1rem}
.lat-espacio{
  display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.55rem; border-radius:var(--r-m);
  background:oklch(1 0 0 / .05); box-shadow:inset 0 0 0 1px oklch(1 0 0 / .07);
}
.lat-espacio .txt{display:none; min-width:0; line-height:1.2}
.lat-espacio small{display:block; font-size:.68rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--oro-suave)}
.lat-espacio b{display:block; font-size:var(--t-s); font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lat-nav{display:grid; gap:.1rem}
.lat-grupo{margin-top:.6rem; padding:.4rem .9rem .2rem; font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:oklch(.72 .02 130); display:none}
.lat-nav a{
  position:relative; display:flex; align-items:center; justify-content:center; gap:.8rem;
  min-height:2.75rem; padding:.4rem .75rem; border-radius:var(--r-s);
  color:oklch(.86 .02 130); text-decoration:none; font-size:var(--t-s); font-weight:560;
  transition:background-color .2s, color .2s;
}
.lat-nav a .ico{width:1.3rem; height:1.3rem}
.lat-nav a .txt{display:none; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lat-nav a .insignia{position:absolute; top:.2rem; right:.35rem; min-width:1.1rem; height:1.1rem; font-size:.6rem}
@media (hover:hover){ .lat-nav a:hover{background:oklch(1 0 0 / .06); color:var(--crema)} }
.lat-nav a[aria-current="page"]{background:oklch(.80 .095 88 / .14); color:var(--crema)}
.lat-nav a[aria-current="page"]::before{content:""; position:absolute; left:-.7rem; top:.55rem; bottom:.55rem; width:4px; border-radius:0 4px 4px 0; background:var(--oro-suave)}
.lat-nav a[aria-current="page"] .ico{color:var(--oro-suave)}
.lat-pie{margin-top:auto; display:grid; gap:.5rem}
.lat-ayuda{display:none; padding:1rem; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:oklch(1 0 0 / .05); font-size:var(--t-xs); color:var(--tinta-2)}
.lat-ayuda b{display:block; color:var(--crema); font-size:var(--t-s); margin-bottom:.25rem}
.lat-ayuda a{color:var(--oro-suave); font-weight:620}
.lat-yo{display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.5rem; border-radius:var(--r-m); text-decoration:none; min-height:2.75rem}
.lat-yo .txt{display:none; min-width:0; line-height:1.25; font-size:var(--t-xs)}
.lat-yo .txt b{display:block; font-size:var(--t-s); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lat-yo .txt span{color:var(--tinta-3)}
@media (hover:hover){ .lat-yo:hover{background:oklch(1 0 0 / .06)} }
/* tooltips del carril */
@media (min-width:768px) and (max-width:1199px){
  .lat-nav a::after{
    content:attr(data-t); position:absolute; left:calc(100% + .75rem); top:50%; translate:-.3rem -50%; z-index:5;
    padding:.35rem .7rem; border-radius:8px; background:var(--v-950); color:var(--crema); font-size:var(--t-xs); white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .2s, translate .2s var(--e-sale); box-shadow:0 8px 20px -8px oklch(0 0 0 / .5);
  }
  .lat-nav a:hover::after,.lat-nav a:focus-visible::after{opacity:1; translate:0 -50%}
  .lateral{overflow:visible}
}
@media (min-width:1200px){
  .lateral{padding:1.4rem 1rem 1.1rem}
  .lat-marca{justify-content:flex-start; padding-inline:.6rem}
  .lat-marca .logo{display:block}
  .lat-marca .simbolo{display:none}
  .lat-espacio,.lat-yo{justify-content:flex-start}
  .lat-espacio .txt,.lat-yo .txt{display:block}
  .lat-grupo{display:block}
  .lat-nav a{justify-content:flex-start}
  .lat-nav a .txt{display:block}
  .lat-nav a .insignia{position:static}
  .lat-nav a[aria-current="page"]::before{left:-1rem}
  .lat-ayuda{display:block}
}

/* desplegable de avisos */
.desplegable{
  position:absolute; right:0; top:calc(100% + .5rem); z-index:70; width:min(24rem, calc(100vw - 1.5rem));
  border-radius:var(--r-m); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-2); padding:.5rem;
  animation:aparece .25s var(--e-sale);
}
.desplegable-cab{display:flex; justify-content:space-between; align-items:center; padding:.6rem .7rem .5rem}
.desplegable-cab b{font-size:var(--t-s)}
.desplegable .lista-ico > li{padding:.7rem; border-radius:var(--r-s); border-top:0}
.desplegable .lista-ico > li.nuevo{background:oklch(.94 .045 88 / .5)}
.con-desplegable{position:relative}

/* =============================================================================
   CONTENEDOR: rejillas activas según el ancho real del área principal
   ============================================================================= */
@container main (min-width:44rem){
  .rejilla{grid-template-columns:repeat(6, minmax(0,1fr))}
  .rejilla > *{grid-column:span var(--m, 6)}
}
@container main (min-width:54rem){
  .rejilla{grid-template-columns:repeat(12, minmax(0,1fr))}
  .rejilla > *{grid-column:span var(--g, 12)}
}

/* ---------- INICIO ---------- */
.bienvenida{display:grid; gap:1.5rem; align-items:center; min-height:100%}
.bienv-t{font-size:clamp(1.9rem, 1.2rem + 2.2vw, 3.6rem); font-weight:770; letter-spacing:-.045em; line-height:.98; margin-top:.5rem; font-variation-settings:"opsz" 96}
.bienv-t em{font-style:normal; color:var(--oro-suave)}
.bienv-sub{color:var(--tinta-2); margin-top:.85rem; max-width:44ch}
.bienv-datos{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin-top:1.4rem; font-size:var(--t-xs); color:var(--tinta-2)}
.bienv-datos span{display:inline-flex; align-items:center; gap:.45rem}
.bienv-datos .ico{color:var(--oro-suave); width:1.05rem; height:1.05rem}
.bienv-estado{display:flex; align-items:center; gap:clamp(1rem, .5rem + 2vw, 2.25rem); flex-wrap:wrap}
.bienv-estado .anillo{--tam:clamp(8.5rem, 6rem + 6vw, 11rem)}
.hito-prox{flex:1; min-width:min(100%, 14rem); padding:1.1rem 1.2rem; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:oklch(1 0 0 / .06); box-shadow:inset 0 0 0 1px oklch(1 0 0 / .09)}
.hito-prox small{display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--oro-suave)}
.hito-prox b{display:block; font-size:var(--t-l); margin-block:.35rem .5rem; line-height:1.25}
.cuenta-atras{display:flex; gap:.9rem; margin-top:.7rem}
.cuenta-atras div{display:grid; line-height:1}
.cuenta-atras strong{font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.cuenta-atras span{font-size:.68rem; color:var(--tinta-3); margin-top:.3rem}
.bienv-deco{position:absolute; z-index:-1; right:-5rem; bottom:-6rem; width:22rem; opacity:.09; color:var(--oro-suave); pointer-events:none}
.bienv-deco svg{width:100%; height:auto; --hoja:currentColor; --hoja-sombra:transparent}
.hoja-oscura{container-type:inline-size; container-name:hoja}
@container hoja (min-width:46rem){
  .bienvenida{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:2rem}
}

.tareas > li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .85rem; align-items:center; padding-block:.75rem; border-top:1px solid var(--linea)}
.tareas > li:first-child{border-top:0; padding-top:0}
.tarea-check{
  width:1.6rem; height:1.6rem; border:0; padding:0; border-radius:.8rem .25rem .8rem .25rem; background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--linea-fuerte); display:grid; place-items:center; color:transparent;
  transition:background-color .25s, box-shadow .25s, color .25s, scale .3s var(--e-resorte);
}
.tarea-check .ico{width:.95rem; height:.95rem; stroke-width:2.5}
.tarea-check-zona{display:grid; place-items:center; width:2.75rem; height:2.75rem; margin:-.6rem; border:0; background:transparent; padding:0}
.tarea-check-zona:hover .tarea-check{box-shadow:inset 0 0 0 1.5px var(--v-700)}
.tareas li.hecha .tarea-check{background:var(--v-700); color:var(--crema); box-shadow:none; scale:1.08}
.tareas li.hecha .li-t{text-decoration:line-through; color:var(--tinta-3)}
.tareas .vence{font-size:.72rem; font-weight:650; white-space:nowrap}
.tareas .vence.tarde{color:var(--venc)}

.mini-hitos{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:0; position:relative; padding-top:.5rem}
.mini-hitos::before{content:""; position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:1.55rem; height:3px; border-radius:3px; background:oklch(.23 .035 165 / .1)}
.mini-hitos .relleno{position:absolute; left:calc(100% / 12); top:1.55rem; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--v-700), var(--oro)); width:0; transition:width 1.4s var(--e-sale) .2s}
.mh{position:relative; display:grid; justify-items:center; text-align:center; gap:.45rem; padding-inline:.25rem}
.mh-nodo{
  position:relative; z-index:1; width:2.1rem; height:2.1rem; display:grid; place-items:center;
  border-radius:1.05rem .3rem 1.05rem .3rem; background:var(--blanco); box-shadow:inset 0 0 0 2px oklch(.23 .035 165 / .18); color:var(--tinta-3);
}
.mh-nodo .ico{width:1rem; height:1rem; stroke-width:2.4}
.mh.hecho .mh-nodo{background:var(--v-700); color:var(--crema); box-shadow:none}
.mh.actual .mh-nodo{background:var(--oro-suave); color:var(--v-950); box-shadow:0 0 0 6px oklch(.80 .095 88 / .25)}
@media (prefers-reduced-motion:no-preference){ .mh.actual .mh-nodo{animation:aura 2.4s ease-in-out infinite} }
@keyframes aura{50%{box-shadow:0 0 0 10px oklch(.80 .095 88 / .08)}}
.mh-t{font-size:var(--t-xs); font-weight:620; line-height:1.25}
.mh-f{font-size:.7rem; color:var(--tinta-2)}
@container main (max-width:40rem){
  .mini-hitos{grid-template-columns:minmax(0,1fr); gap:.2rem}
  .mini-hitos::before,.mini-hitos .relleno{display:none}
  .mh{grid-template-columns:auto minmax(0,1fr) auto; justify-items:start; text-align:left; align-items:center; gap:.8rem}
}

.pago-prox{display:grid; gap:.25rem}
.importe{font-size:var(--t-cifra); font-weight:760; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.importe small{font-size:.45em; font-weight:650; letter-spacing:0; margin-left:.15em}
.fila-pago{display:flex; justify-content:space-between; gap:1rem; align-items:center; padding-block:.7rem; border-top:1px solid var(--linea); font-size:var(--t-s)}

.novedades > li{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem; padding-bottom:1.1rem}
.novedades > li:last-child{padding-bottom:0}
.novedades > li:not(:last-child)::before{content:""; position:absolute; left:1.25rem; top:2.75rem; bottom:.25rem; width:1px; background:var(--linea-fuerte)}
.novedades time{font-size:.72rem; color:var(--tinta-2); font-weight:600}

.prev-maqueta{position:relative; display:block; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); overflow:hidden; background:var(--v-950); text-decoration:none; color:var(--crema)}
.prev-maqueta svg{width:100%; height:auto; transition:scale .8s var(--e-sale)}
@media (hover:hover){ .prev-maqueta:hover svg{scale:1.03} }
.prev-maqueta .pins i{position:absolute; width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:50% 50% 50% 4px; background:var(--oro-suave); color:var(--v-950); font-size:.7rem; font-weight:800; font-style:normal; box-shadow:0 4px 12px oklch(0 0 0 / .35)}
.prev-maqueta .sobre{position:absolute; left:.75rem; bottom:.75rem; right:.75rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap}

.sparkline{width:100%; height:4.5rem; overflow:visible}
.kpi{display:grid; gap:.3rem; min-width:0}
.kpi-etq{font-size:var(--t-xs); font-weight:620; color:var(--tinta-2); display:flex; align-items:center; gap:.5rem}
.kpi-num{font-size:var(--t-cifra); font-weight:760; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.kpi-num small{font-size:.42em; font-weight:650; letter-spacing:0; margin-left:.12em; color:var(--tinta-2)}
.kpi-pie{font-size:var(--t-xs); color:var(--tinta-2)}
.kpi-pie .sube{color:var(--ok); font-weight:650}
.kpi-pie .baja{color:var(--venc); font-weight:650}
.oscuro .kpi-num small{color:var(--tinta-2)}

/* ---------- PROYECTO ---------- */
.resumen-proy{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr))}
.linea-tiempo{position:relative; padding-left:3.25rem}
.linea-tiempo::before{content:""; position:absolute; left:1.3rem; top:.5rem; bottom:.5rem; width:3px; border-radius:3px; background:oklch(.23 .035 165 / .1)}
.lt-relleno{position:absolute; left:1.3rem; top:.5rem; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--v-700), var(--oro)); height:0; transition:height 1.6s var(--e-sale) .2s}
.lt-hito{position:relative; padding:0 0 1.75rem}
.lt-hito:last-child{padding-bottom:0}
.lt-nodo{
  position:absolute; left:-3.25rem; top:0; width:2.9rem; height:2.9rem; display:grid; place-items:center;
  border-radius:1.45rem .4rem 1.45rem .4rem; background:var(--blanco); box-shadow:inset 0 0 0 2px oklch(.23 .035 165 / .16); color:var(--tinta-3);
}
.lt-nodo .ico{width:1.15rem; height:1.15rem; stroke-width:2.2}
.lt-hito.hecho .lt-nodo{background:var(--v-700); color:var(--crema); box-shadow:none}
.lt-hito.actual .lt-nodo{background:var(--oro-suave); color:var(--v-950); box-shadow:0 0 0 6px oklch(.80 .095 88 / .25)}
.lt-hito.encurso .lt-nodo{background:var(--rev-fondo); color:var(--rev); box-shadow:inset 0 0 0 2px var(--rev-punto)}
.lt-cuerpo{padding:1rem 1.15rem; border-radius:var(--r-m); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-1)}
.lt-hito.actual .lt-cuerpo{box-shadow:inset 0 0 0 1.5px var(--oro), var(--sombra-1)}
.lt-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem 1rem; flex-wrap:wrap}
.lt-t{font-size:var(--t-l); font-weight:680; letter-spacing:-.015em}
.lt-f{font-size:var(--t-xs); color:var(--tinta-2); font-weight:600; margin-top:.15rem}
.lt-d{color:var(--tinta-2); font-size:var(--t-s); margin-top:.5rem; max-width:62ch}
.lt-entregables{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem}
.lt-entregables a{display:inline-flex; align-items:center; gap:.4rem; min-height:2.25rem; padding:.25rem .75rem; border-radius:999px; background:var(--fondo); font-size:var(--t-xs); font-weight:620; text-decoration:none; color:var(--tinta)}
.lt-entregables .ico{width:.95rem; height:.95rem; color:var(--oro-texto)}
@media (prefers-reduced-motion:no-preference){
  .lt-hito{opacity:0; translate:0 1rem; transition:opacity .7s var(--e-sale), translate .7s var(--e-sale); transition-delay:calc(var(--i) * 110ms + 150ms)}
  .linea-tiempo.vivo .lt-hito{opacity:1; translate:0 0}
}
/* diagrama de plazos (gantt) */
.gantt{display:grid; gap:.55rem; font-size:var(--t-xs)}
.gantt-esc{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.75rem; color:var(--tinta-2); font-weight:600}
.gantt-meses{display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
.gantt-meses span{padding-left:.35rem; border-left:1px solid var(--linea-fuerte)}
.gantt-fila{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.75rem; align-items:center}
.gantt-fila > span{font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gantt-pista{position:relative; height:1.6rem; border-radius:6px; background:repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--linea) calc(33.333% - 1px) 33.333%)}
.gantt-barra{position:absolute; top:.2rem; bottom:.2rem; left:var(--a); width:0; border-radius:.6rem .2rem .6rem .2rem; background:var(--neutro-fondo); box-shadow:inset 0 0 0 1.5px var(--neutro-punto); transition:width 1.1s var(--e-sale); transition-delay:calc(var(--i) * 90ms + 200ms)}
.gantt.vivo .gantt-barra{width:var(--w)}
.gantt-barra.hecho{background:var(--v-700); box-shadow:none}
.gantt-barra.actual{background:var(--oro-suave); box-shadow:none}
.gantt-barra.encurso{background:var(--rev-fondo); box-shadow:inset 0 0 0 1.5px var(--rev-punto)}
.gantt-hoy{position:absolute; top:-1.6rem; bottom:-.3rem; left:var(--hoy); width:2px; background:var(--venc-punto); border-radius:2px}
.gantt-hoy::before{content:"Hoy"; position:absolute; top:0; left:50%; translate:-50% 0; padding:.05rem .4rem; border-radius:999px; background:var(--venc-punto); color:var(--blanco); font-size:.62rem; font-weight:700}
.gantt-cuerpo{position:relative; display:grid; gap:.55rem}
.gantt-leyenda{display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.75rem; color:var(--tinta-2)}
.gantt-leyenda span{display:inline-flex; align-items:center; gap:.4rem}
.gantt-leyenda i{width:.9rem; height:.6rem; border-radius:.3rem .1rem .3rem .1rem}

/* ---------- DOCUMENTOS ---------- */
.barra-herr{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-bottom:1.25rem}
.barra-herr .buscador{flex:1 1 16rem; max-width:28rem}
.buscador{position:relative}
.buscador .ico{position:absolute; left:.95rem; top:50%; translate:0 -50%; color:var(--tinta-2); pointer-events:none}
.buscador .entrada{padding-left:2.75rem; border-radius:999px}
.docs-split{display:grid; gap:var(--hueco); grid-template-columns:minmax(0,1fr); align-items:start}
@container main (min-width:66rem){ .docs-split.con-panel{grid-template-columns:minmax(0,1fr) clamp(20rem, 26%, 30rem)} }
.docs{display:grid; gap:var(--hueco); grid-template-columns:repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr))}
.docs.lista{grid-template-columns:minmax(0,1fr); gap:.5rem}
.doc{
  position:relative; display:flex; flex-direction:column; min-width:0; text-align:left; padding:0; border:0;
  background:var(--blanco); border-radius:var(--r-m); box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-1); overflow:hidden;
  transition:box-shadow .3s, translate .4s var(--e-sale);
}
@media (hover:hover){ .doc:hover{translate:0 -3px; box-shadow:inset 0 0 0 1px var(--linea-fuerte), var(--sombra-2)} }
.doc[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--v-700), var(--sombra-2)}
.doc-prev{position:relative; aspect-ratio:4 / 3; background:var(--papel); display:grid; place-items:center; overflow:hidden}
.doc-hoja{
  position:relative; width:58%; aspect-ratio:1 / 1.3; background:var(--blanco); border-radius:4px; padding:9% 8%;
  box-shadow:0 10px 24px -10px oklch(.23 .035 165 / .35); rotate:-2deg; translate:0 8%;
  display:grid; align-content:start; gap:5%;
  transition:rotate .5s var(--e-sale), translate .5s var(--e-sale);
}
@media (hover:hover){ .doc:hover .doc-hoja{rotate:0deg; translate:0 4%} }
.doc-hoja i{display:block; height:.32rem; border-radius:2px; background:oklch(.23 .035 165 / .14)}
.doc-hoja i.t{height:.5rem; width:60%; background:var(--v-700)}
.doc-hoja i.o{width:35%; background:var(--oro)}
.doc-hoja i.c{width:80%} .doc-hoja i.m{width:65%}
.doc-hoja .tab{display:grid; grid-template-columns:2fr 1fr 1fr; gap:3px}
.doc-hoja .tab b{height:.3rem; border-radius:2px; background:oklch(.23 .035 165 / .12)}
.doc-hoja .firma{margin-top:12%; height:.9rem; width:55%; border-bottom:1.5px solid var(--v-700); background:none; border-radius:0; position:relative}
.doc-hoja .firma::after{content:""; position:absolute; left:10%; bottom:.15rem; width:60%; height:.6rem; border:1.5px solid var(--oro-texto); border-color:var(--oro-texto) transparent transparent; border-radius:50% 50% 0 0}
.doc-hoja .img{height:2.6rem; border-radius:3px; background:linear-gradient(135deg, var(--v-700), var(--v-950))}
.doc-tipo{position:absolute; top:.6rem; left:.6rem}
.doc-nuevo{position:absolute; top:.6rem; right:.6rem; padding:.2rem .55rem; border-radius:999px; background:var(--oro-suave); color:var(--v-950); font-size:.66rem; font-weight:750; letter-spacing:.04em}
.doc-info{padding:.85rem 1rem 1rem; display:grid; gap:.2rem}
.doc-n{font-weight:640; font-size:var(--t-s); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.doc-m{font-size:.75rem; color:var(--tinta-2); font-variant-numeric:tabular-nums}
.docs.lista .doc{flex-direction:row; align-items:center}
.docs.lista .doc-prev{width:5.5rem; aspect-ratio:1; flex:none}
.docs.lista .doc-hoja{width:62%; padding:10% 9%}
.docs.lista .doc-tipo,.docs.lista .doc-nuevo{display:none}
.docs.lista .doc-info{flex:1; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:1rem}
.panel-doc{position:sticky; top:calc(var(--mq-h) + var(--sup-h) + 1rem)}
.panel-doc .doc-prev{border-radius:var(--r-s); aspect-ratio:3 / 2.4}
.panel-doc .doc-hoja{width:48%; rotate:0deg; translate:0 0}
.meta-lista{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5rem 1rem; font-size:var(--t-s); margin-block:1rem}
.meta-lista dt{color:var(--tinta-2)}
.meta-lista dd{font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere}

/* ---------- MAQUETAS ---------- */
.galeria{display:grid; gap:var(--hueco); grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr))}
.mq-card{display:flex; flex-direction:column; text-decoration:none; color:inherit; padding:0; overflow:hidden}
.mq-card .prev{position:relative; background:var(--v-950); aspect-ratio:3 / 2; overflow:hidden}
.mq-card .prev svg{width:100%; height:100%; object-fit:cover; transition:scale .8s var(--e-sale)}
@media (hover:hover){ .mq-card:hover .prev svg{scale:1.04} }
.mq-card .prev .estado{position:absolute; top:.75rem; left:.75rem}
.mq-card .prev .version{position:absolute; top:.75rem; right:.75rem; padding:.2rem .55rem; border-radius:999px; background:oklch(.17 .03 168 / .7); color:var(--crema); font-size:.7rem; font-weight:650}
.mq-card .info{padding:1rem 1.15rem 1.15rem; display:grid; gap:.3rem}
.mq-card .info b{font-size:var(--t-base)}
.mq-card .info span{font-size:var(--t-xs); color:var(--tinta-2)}
.mq-card .coment{display:flex; align-items:center; gap:.4rem; font-size:var(--t-xs); color:var(--tinta-2); margin-top:.3rem}
.mq-card .coment .ico{width:1rem; height:1rem}

.visor{display:grid; gap:var(--hueco); grid-template-columns:minmax(0,1fr)}
@container main (min-width:62rem){ .visor{grid-template-columns:minmax(0,1fr) clamp(20rem, 27%, 30rem); align-items:start} }
.visor-lienzo{
  position:relative; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); overflow:hidden;
  background:radial-gradient(circle, oklch(1 0 0 / .07) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--v-950);
  color:var(--crema);
}
.visor-herr{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.65rem .75rem; border-bottom:1px solid oklch(1 0 0 / .08)}
.visor-herr .segmentado{background:oklch(1 0 0 / .08)}
.visor-herr .segmentado button{color:oklch(.86 .02 130)}
.visor-herr .segmentado [aria-pressed="true"]{background:var(--oro-suave); color:var(--v-950)}
.visor-herr .sep{flex:1}
.visor-herr .zoom{font-size:var(--t-xs); font-variant-numeric:tabular-nums; min-width:3rem; text-align:center}
.visor-escena{padding:clamp(1rem, .5rem + 2vw, 2.5rem); overflow:auto; max-height:calc(100svh - 14rem); min-height:20rem; display:grid; place-items:center}
.visor-img{position:relative; width:calc(100% * var(--zoom, 1)); max-width:none; transition:width .4s var(--e-sale); cursor:default; border-radius:8px; box-shadow:0 30px 60px -20px oklch(0 0 0 / .6)}
.visor-img.comentando{cursor:crosshair}
.visor-img svg{width:100%; height:auto; border-radius:8px}
.pin{
  position:absolute; left:var(--x); top:var(--y); translate:-50% -100%; z-index:2;
  width:2.2rem; height:2.2rem; display:grid; place-items:center; padding:0; border:0;
  border-radius:50% 50% 50% 4px; rotate:-45deg;
  background:var(--oro-suave); color:var(--v-950); font-weight:800; font-size:.8rem;
  box-shadow:0 6px 16px oklch(0 0 0 / .45), 0 0 0 3px oklch(.17 .03 168 / .6);
  transition:scale .3s var(--e-resorte), background-color .2s;
}
.pin span{rotate:45deg}
.pin.resuelto{background:var(--brote)}
.pin.activo,.pin:hover{scale:1.2; z-index:3}
.pin.nuevo{background:var(--crema)}
@media (prefers-reduced-motion:no-preference){ .pin{animation:pin-cae .55s var(--e-resorte) both; animation-delay:calc(var(--i, 0) * 120ms + 300ms)} }
@keyframes pin-cae{from{opacity:0; translate:-50% -160%}}
.visor-lado{display:grid; gap:var(--hueco)}
.comentarios > li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem; padding:.85rem; border-radius:var(--r-s); transition:background-color .25s}
.comentarios > li.activo{background:var(--oro-fondo)}
.com-num{width:1.8rem; height:1.8rem; display:grid; place-items:center; border-radius:50% 50% 50% 3px; background:var(--oro-suave); color:var(--v-950); font-size:.72rem; font-weight:800}
.com-num.resuelto{background:var(--ok-fondo); color:var(--ok)}
.com-cab{display:flex; justify-content:space-between; gap:.5rem; font-size:var(--t-xs); color:var(--tinta-2)}
.com-cab b{color:var(--tinta)}
.com-txt{font-size:var(--t-s); margin-top:.2rem}
.com-resp{margin-top:.6rem; padding:.6rem .75rem; border-radius:var(--r-s); background:var(--fondo); font-size:var(--t-xs)}
.decision{display:grid; gap:.6rem}
.decision .acciones{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.traza{display:flex; gap:.7rem; align-items:flex-start; padding:.9rem 1rem; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); font-size:var(--t-xs); line-height:1.45}
.traza.ok{background:var(--ok-fondo); color:var(--ok)}
.traza.cambios{background:var(--pend-fondo); color:var(--pend)}
.traza b{display:block; font-size:var(--t-s)}
.traza .ico{margin-top:.1rem}
.nuevo-com{display:grid; gap:.6rem; padding:.9rem; border-radius:var(--r-m); background:var(--oro-fondo); margin-top:.75rem}
.nuevo-com .acciones{justify-content:flex-end}

/* ---------- PRESUPUESTO ---------- */
.papel{
  position:relative; background:var(--blanco); border-radius:var(--r-s) var(--r-s) var(--r-l) var(--r-s);
  box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-2);
  padding:clamp(1.25rem, .8rem + 2.5vw, 3.75rem);
}
.papel-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; padding-bottom:1.5rem; border-bottom:2px solid var(--tinta)}
.papel-cab img{height:3.4rem; width:auto}
.papel-cab .ref{text-align:right; font-size:var(--t-xs); color:var(--tinta-2); line-height:1.6}
.papel-cab .ref b{display:block; font-size:var(--t-l); color:var(--tinta)}
.papel h2{font-size:var(--t-h2); letter-spacing:-.03em; margin-top:1.75rem}
.papel .para{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap:1rem 2rem; margin-block:1.5rem; font-size:var(--t-s)}
.papel .para small{display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--oro-texto); margin-bottom:.25rem}
.lineas{margin-top:1rem; font-size:var(--t-s)}
.lineas th{text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); padding:.6rem .5rem; border-bottom:1px solid var(--linea-fuerte)}
.lineas td{padding:.85rem .5rem; border-bottom:1px solid var(--linea); vertical-align:top}
.lineas .dcha{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.lineas td small{display:block; color:var(--tinta-2); font-size:var(--t-xs); margin-top:.15rem}
.totales{margin-left:auto; width:min(100%, 22rem); margin-top:1.25rem; font-size:var(--t-s)}
.totales div{display:flex; justify-content:space-between; padding:.4rem 0; font-variant-numeric:tabular-nums}
.totales .total{border-top:2px solid var(--tinta); margin-top:.4rem; padding-top:.75rem; font-size:var(--t-l); font-weight:750}
/* Contrato 6: retención de IRPF. «Total factura», retención en negativo y «Total a pagar». Sin retención no se usan. */
.totales .subtotal{border-top:1px solid var(--linea); margin-top:.4rem; padding-top:.6rem; font-weight:650}
.totales .retencion{color:var(--tinta-2)}
.totales .retencion span:last-child{font-weight:650}
/* Contrato 7: presupuesto con los importes ocultos. El documento es el PDF; aquí no hay cifras. */
.pdf-presupuesto{display:grid; gap:.9rem; margin-block:1.75rem; padding:1.25rem; border-radius:var(--r-m); background:var(--oro-fondo)}
.pdf-presupuesto .papel-sub{margin:0}
.pdf-presupuesto .acciones{display:flex; flex-wrap:wrap; gap:.75rem}
/* Editor del equipo: PDF adjunto y aviso de importes ocultos. */
.pdf-adjunto{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; padding:.85rem 1rem; border-radius:var(--r-s); background:var(--papel)}
.pdf-adjunto .li-t{overflow-wrap:anywhere}
.marca-oculta{display:inline-block; margin-left:.5rem; vertical-align:middle}
.cal-pagos{display:grid; gap:.75rem}
.cal-barra{display:flex; height:2.4rem; border-radius:var(--r-s); overflow:hidden; gap:3px}
.cal-barra span{display:grid; place-items:center; flex:var(--p) 1 0; font-size:.72rem; font-weight:700; color:var(--crema); background:var(--v-700); min-width:0; white-space:nowrap; transition:flex-grow .6s var(--e-sale)}
.cal-barra span:nth-child(2){background:var(--v-600)}
.cal-barra span:nth-child(3){background:var(--oro); color:var(--v-950)}
.cal-barra span:nth-child(4){background:var(--oro-suave); color:var(--v-950)}
.cal-lista li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.75rem; align-items:center; padding-block:.6rem; border-top:1px solid var(--linea); font-size:var(--t-s)}
.cal-lista li:first-child{border-top:0}
.cal-lista i{width:.85rem; height:.85rem; border-radius:.85rem 0 .85rem 0; background:var(--v-700)}
.cal-lista li:nth-child(2) i{background:var(--v-600)}
.cal-lista li:nth-child(3) i{background:var(--oro)}
.cal-lista li:nth-child(4) i{background:var(--oro-suave)}
.sello-ejemplo{
  position:absolute; top:clamp(5.5rem, 4rem + 3vw, 7.5rem); right:clamp(1rem, .5rem + 2vw, 3rem); rotate:8deg;
  padding:.35rem .9rem; border:2px solid oklch(.50 .10 82 / .55); border-radius:8px; color:oklch(.50 .10 82 / .75);
  font-weight:800; letter-spacing:.2em; font-size:.8rem; text-transform:uppercase; pointer-events:none;
}
.lado-fijo{position:sticky; top:calc(var(--mq-h) + var(--sup-h) + 1rem); display:grid; gap:var(--hueco)}

/* ---------- PAGOS ---------- */
.kpis{display:grid; gap:var(--hueco); grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr))}
.progreso-pagos{display:grid; gap:.6rem}
.tramos{display:flex; gap:4px; height:.85rem}
.tramos span{flex:var(--p) 1 0; border-radius:999px; background:oklch(.23 .035 165 / .1); position:relative; overflow:hidden}
.tramos span::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--v-700); scale:0 1; transform-origin:left; transition:scale 1s var(--e-sale); transition-delay:calc(var(--i) * 150ms + 200ms)}
.tramos.vivo span.pagado::after{scale:1 1}
.tramos span.vencido{background:var(--venc-fondo); box-shadow:inset 0 0 0 1.5px var(--venc-punto)}
.tramos-ley{display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-xs); color:var(--tinta-2); flex-wrap:wrap}
.metodo-ico{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); color:var(--tinta-2)}
.metodo-ico .ico{width:1rem; height:1rem}
.fila-vencida td:first-child{box-shadow:inset 3px 0 0 var(--venc-punto)}

/* diálogo genérico */
dialog.dlg{
  border:0; padding:0; width:min(100% - 2rem, 34rem); max-height:calc(100svh - 2rem);
  border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s); background:var(--blanco); color:var(--tinta);
  box-shadow:0 40px 100px -30px oklch(.1 .03 168 / .7); overflow:auto;
}
dialog.dlg::backdrop{background:oklch(.17 .03 168 / .55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:no-preference){
  dialog.dlg[open]{animation:dlg-entra .45s var(--e-sale)}
  dialog.dlg[open]::backdrop{animation:fundido .3s}
}
@keyframes dlg-entra{from{opacity:0; translate:0 1.5rem; scale:.97}}
@keyframes fundido{from{opacity:0}}
.dlg-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.4rem 1.5rem 0}
.dlg-cab h2{font-size:var(--t-h3); letter-spacing:-.025em}
.dlg-cab p{color:var(--tinta-2); font-size:var(--t-s); margin-top:.3rem}
.dlg-cuerpo{padding:1.25rem 1.5rem; display:grid; gap:1rem}
.dlg-pie{display:flex; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; padding:1rem 1.5rem 1.4rem; border-top:1px solid var(--linea)}
dialog.dlg-ancho{width:min(100% - 2rem, 58rem)}
@media (max-width:640px){
  dialog.dlg{width:100%; max-width:100%; max-height:92svh; margin:auto 0 0; border-radius:var(--r-l) var(--r-l) 0 0}
  @media (prefers-reduced-motion:no-preference){ dialog.dlg[open]{animation:sube-hoja .45s var(--e-sale)} }
  .dlg-pie{padding-bottom:calc(1.4rem + env(safe-area-inset-bottom))}
  .dlg-pie .boton{flex:1}
}

/* pago simulado */
.pago{display:grid; grid-template-columns:minmax(0,1fr)}
.pago-resumen{padding:1.5rem; background:var(--v-900); color:var(--crema); display:grid; gap:1rem; align-content:start; position:relative; overflow:hidden; isolation:isolate}
.pago-resumen .importe{font-size:clamp(2.2rem, 1.6rem + 2vw, 3.2rem)}
.pago-resumen dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.4rem 1rem; font-size:var(--t-xs)}
.pago-resumen dt{color:var(--tinta-3)}
.pago-resumen dd{text-align:right}
.pago-resumen .deco{position:absolute; z-index:-1; right:-4rem; bottom:-4rem; width:13rem; opacity:.1; color:var(--oro-suave)}
.pago-resumen .deco svg{width:100%; height:auto; --hoja:currentColor; --hoja-sombra:transparent}
.pago-form{padding:1.5rem; display:grid; gap:1rem; align-content:start}
.metodos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem}
.metodos button{
  display:grid; justify-items:center; gap:.3rem; min-height:4.25rem; padding:.6rem .4rem; border:0; border-radius:var(--r-s);
  background:var(--blanco); box-shadow:inset 0 0 0 1.5px var(--linea-fuerte); font-size:var(--t-xs); font-weight:650; color:var(--tinta-2);
  transition:box-shadow .2s, background-color .2s, color .2s;
}
.metodos button .ico{width:1.4rem; height:1.4rem}
.metodos button[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--v-700); background:oklch(.37 .072 158 / .05); color:var(--tinta)}
.tarjeta-num{display:grid; grid-template-columns:minmax(0,1fr); border-radius:var(--r-s); box-shadow:inset 0 0 0 1.5px var(--linea-fuerte); overflow:hidden}
.tarjeta-num .entrada{box-shadow:none; border-radius:0}
.tarjeta-num .entrada:focus{box-shadow:inset 0 0 0 2px var(--v-700)}
.tarjeta-num .dos{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--linea-fuerte)}
.tarjeta-num .dos .entrada + .entrada{border-left:1px solid var(--linea-fuerte)}
.iban{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 1rem; border-radius:var(--r-s); background:var(--fondo); font-variant-numeric:tabular-nums; font-weight:650; letter-spacing:.04em; overflow-wrap:anywhere}
.simulado{display:flex; gap:.6rem; align-items:flex-start; font-size:.75rem; color:var(--tinta-2); line-height:1.45}
.simulado .ico{width:1rem; height:1rem; color:var(--oro-texto); margin-top:.1rem}
.pago-estado{display:grid; justify-items:center; text-align:center; gap:.75rem; padding:2.5rem 1.5rem}
.pago-estado h3{font-size:var(--t-h3)}
.pago-estado p{color:var(--tinta-2); max-width:34ch; font-size:var(--t-s)}
.girando{width:4rem; height:4rem; color:var(--v-700)}
.girando svg{width:100%; height:100%; overflow:visible; --hoja:currentColor; --hoja-sombra:var(--v-950)}
@media (prefers-reduced-motion:no-preference){ .girando svg{animation:gira 1.4s var(--e-mueve) infinite} }
.check-ok{width:5rem; height:5rem}
.check-ok circle{fill:var(--ok-fondo)}
.check-ok path{fill:none; stroke:var(--ok); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .check-ok circle{animation:brota .6s var(--e-resorte) both}
  .check-ok path{animation:traza .6s var(--e-sale) .3s both}
}
@keyframes brota{from{scale:0; transform-origin:center; transform-box:fill-box}}
@keyframes traza{from{stroke-dashoffset:40}}
@media (min-width:760px){ .pago{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} .pago-resumen{padding:2rem} .pago-form{padding:2rem} }

/* factura de ejemplo */
.factura .papel-cab{border-bottom-color:var(--v-800)}
.factura-legal{margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--linea); font-size:var(--t-xs); color:var(--tinta-2); display:grid; gap:.35rem}
.factura-legal .marcador{display:inline-block; padding:.05rem .4rem; border-radius:4px; background:var(--oro-fondo); color:var(--pend); font-weight:650}
.pagada-sello{position:absolute; top:clamp(6rem, 5rem + 2vw, 8rem); right:clamp(1.5rem, 1rem + 3vw, 4rem); rotate:-10deg; padding:.4rem 1rem; border:3px solid var(--ok-punto); border-radius:10px; color:var(--ok); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.95rem}

/* ---------- MENSAJES ---------- */
.chat{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  height:calc(100svh - var(--mq-h) - var(--sup-h) - 7.5rem - var(--nav-m)); min-height:30rem;
  border-radius:var(--r-m); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-1); overflow:hidden;
}
@media (min-width:768px){ .chat{height:calc(100svh - var(--mq-h) - var(--sup-h) - 9rem)} }
.hilos{display:none; border-right:1px solid var(--linea); overflow:auto; background:var(--fondo)}
.hilos-cab{padding:1rem 1rem .5rem}
.hilo{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem; width:100%; padding:.85rem 1rem; border:0; background:transparent; text-align:left; border-left:3px solid transparent}
.hilo[aria-current="true"]{background:var(--blanco); border-left-color:var(--oro)}
.hilo b{display:block; font-size:var(--t-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hilo span{display:block; font-size:var(--t-xs); color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conversa{display:flex; flex-direction:column; min-width:0; min-height:0}
.conversa-cab{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; border-bottom:1px solid var(--linea)}
.conversa-cab b{display:block}
.conversa-cab span{font-size:var(--t-xs); color:var(--tinta-2)}
.mensajes{flex:1; overflow:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; background:none}
.dia{align-self:center; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); padding:.25rem .75rem; border-radius:999px; background:var(--fondo)}
.msj{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.65rem; max-width:min(44rem, 88%)}
.msj.mio{align-self:flex-end; grid-template-columns:minmax(0,1fr)}
.msj.mio .avatar{display:none}
.burbuja{padding:.8rem 1rem; border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-m); background:var(--fondo); font-size:var(--t-s); line-height:1.5}
.msj.mio .burbuja{border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-m); background:var(--v-800); color:var(--crema)}
.msj-meta{font-size:.72rem; color:var(--tinta-2); margin-bottom:.3rem; display:flex; gap:.5rem; align-items:center}
.msj.mio .msj-meta{justify-content:flex-end}
.adjunto{display:flex; align-items:center; gap:.7rem; margin-top:.6rem; padding:.6rem .75rem; border-radius:var(--r-s); background:var(--blanco); color:var(--tinta); text-decoration:none; box-shadow:inset 0 0 0 1px var(--linea); max-width:20rem}
.adjunto .ico-caja{width:2.1rem; height:2.1rem}
.adjunto b{display:block; font-size:var(--t-xs)}
.adjunto span{font-size:.7rem; color:var(--tinta-2)}
.msj.mio .adjunto{background:oklch(1 0 0 / .1); color:var(--crema); box-shadow:none}
.msj.mio .adjunto span{color:oklch(.85 .02 130)}
.leido{display:inline-flex; align-items:center; gap:.2rem}
.leido .ico{width:.95rem; height:.95rem; color:var(--ok-punto)}
.redactar{display:flex; align-items:flex-end; gap:.5rem; padding:.75rem; border-top:1px solid var(--linea)}
.redactar .entrada{min-height:2.75rem; max-height:9rem; resize:none; border-radius:var(--r-m)}
.escribiendo{display:inline-flex; gap:.25rem; padding:.85rem 1rem; border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-m); background:var(--fondo)}
.escribiendo i{width:.4rem; height:.4rem; border-radius:50%; background:var(--tinta-3); animation:salta 1s infinite; animation-delay:calc(var(--i) * .15s)}
@keyframes salta{30%{translate:0 -.3rem}}
.chat-lado{display:none; border-left:1px solid var(--linea); padding:1.1rem; overflow:auto}
@container main (min-width:52rem){ .chat{grid-template-columns:18rem minmax(0,1fr)} .hilos{display:block} }
@container main (min-width:84rem){ .chat{grid-template-columns:19rem minmax(0,1fr) 18rem} .chat-lado{display:block} }

/* ---------- CALENDARIO ---------- */
.cal{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-radius:var(--r-m); overflow:hidden; box-shadow:inset 0 0 0 1px var(--linea); background:var(--linea)}
.cal-dia-n{padding:.6rem .5rem; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); background:var(--fondo); text-align:center}
.cal-celda{min-height:clamp(4.25rem, 2rem + 4vw, 7.5rem); padding:.4rem; background:var(--blanco); display:flex; flex-direction:column; gap:.25rem; border-top:1px solid var(--linea); border-left:1px solid var(--linea); min-width:0}
.cal-celda:nth-child(7n+1){border-left:0}
.cal-celda.fuera{background:var(--fondo); color:var(--tinta-3)}
.cal-celda .n{font-size:var(--t-xs); font-weight:650; font-variant-numeric:tabular-nums; width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:50%}
.cal-celda.hoy .n{background:var(--v-800); color:var(--crema)}
.evento-cal{display:block; padding:.2rem .45rem; border-radius:6px; font-size:.7rem; font-weight:620; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--rev-fondo); color:var(--rev); border:0; text-align:left; width:100%}
.evento-cal.hito{background:var(--oro-fondo); color:var(--pend)}
.evento-cal.pago{background:var(--venc-fondo); color:var(--venc)}
.evento-cal.hecho{background:var(--ok-fondo); color:var(--ok)}
@container main (max-width:40rem){ .evento-cal{font-size:0; height:.45rem; padding:0; border-radius:4px} .cal-celda{min-height:3.25rem} }
.reunion{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; padding-block:1rem; border-top:1px solid var(--linea)}
.reunion:first-child{border-top:0; padding-top:0}
.fecha-caja{width:3.6rem; text-align:center; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:var(--v-800); color:var(--crema); padding:.45rem 0; line-height:1.05}
.fecha-caja small{display:block; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--oro-suave)}
.fecha-caja b{font-size:1.5rem; font-weight:750}
.reunion details{margin-top:.6rem}
.reunion summary{cursor:pointer; font-size:var(--t-xs); font-weight:650; color:var(--v-700); min-height:2.25rem; display:inline-flex; align-items:center}
.acta{margin-top:.4rem; padding:.85rem 1rem; border-radius:var(--r-s); background:var(--fondo); font-size:var(--t-xs); display:grid; gap:.35rem}
.acta li{display:flex; gap:.5rem}
.acta li::before{content:""; flex:none; width:.4rem; height:.4rem; margin-top:.45rem; border-radius:.4rem 0 .4rem 0; background:var(--oro)}

/* ---------- RESULTADOS ---------- */
.grafico{width:100%; height:auto; overflow:visible}
.grafico .eje{stroke:var(--linea-fuerte); stroke-width:1}
.grafico .rejilla-g{stroke:var(--linea); stroke-width:1; stroke-dasharray:3 4}
.grafico text{font-size:11px; fill:var(--tinta-2); font-family:inherit}
.grafico .b{fill:var(--v-700); transform-box:fill-box; transform-origin:bottom; transition:scale 1s var(--e-sale), fill .2s; transition-delay:calc(var(--i) * 45ms)}
.grafico .b.oro{fill:var(--oro)}
.grafico .b.claro{fill:oklch(.37 .072 158 / .25)}
.grafico:not(.vivo) .b{scale:1 0}
@media (hover:hover){ .grafico .b:hover{fill:var(--oro)} }
.grafico .area{fill:url(#grad-area)}
.grafico .linea-g{fill:none; stroke:var(--v-700); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--l); stroke-dashoffset:var(--l); transition:stroke-dashoffset 1.8s var(--e-sale)}
.grafico.vivo .linea-g{stroke-dashoffset:0}
.leyenda{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:var(--t-xs); color:var(--tinta-2)}
.leyenda span{display:inline-flex; align-items:center; gap:.4rem}
.leyenda i{width:.75rem; height:.75rem; border-radius:.75rem 0 .75rem 0}
.agente{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .9rem; align-items:center; padding-block:.9rem; border-top:1px solid var(--linea)}
.agente:first-child{border-top:0; padding-top:0}
.agente .barra{grid-column:2 / -1; margin-top:.4rem}
.donut{width:min(100%, 11rem); aspect-ratio:1; margin-inline:auto}
.donut circle{fill:none; stroke-width:14; transition:stroke-dashoffset 1.4s var(--e-sale)}

/* ---------- ACTIVIDAD ---------- */
.feed-dia{margin-top:1.75rem}
.feed-dia:first-child{margin-top:0}
.feed-dia h3{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); margin-bottom:.75rem}
.feed > li{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.2rem .9rem; align-items:start; padding-bottom:1.1rem}
.feed > li:not(:last-child)::before{content:""; position:absolute; left:1.25rem; top:2.75rem; bottom:.2rem; width:1px; background:var(--linea-fuerte)}
.feed time{font-size:var(--t-xs); color:var(--tinta-2); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- AYUDA ---------- */
.faq{display:grid; gap:.6rem}
.faq details{border-radius:var(--r-m); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea)}
.faq summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:3.5rem; padding:.85rem 1.15rem; cursor:pointer; font-weight:640}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:rotate .35s var(--e-sale); color:var(--oro-texto)}
.faq details[open] summary .ico{rotate:45deg}
.faq details p{padding:0 1.15rem 1.1rem; color:var(--tinta-2); font-size:var(--t-s); max-width:70ch}

/* ---------- CUENTA ---------- */
.sesion{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .9rem; align-items:center; padding-block:.85rem; border-top:1px solid var(--linea)}
.sesion:first-child{border-top:0}
.esta{color:var(--ok); font-weight:650}

/* ---------- EQUIPO ---------- */
.cliente-celda{display:flex; align-items:center; gap:.75rem; min-width:0}
.cliente-celda .avatar{width:2.4rem; height:2.4rem; font-size:.75rem}
.mini-barra{display:flex; align-items:center; gap:.6rem; min-width:7rem}
.mini-barra .barra{flex:1; height:.4rem}
.mini-barra > span:last-child{font-size:var(--t-xs); font-variant-numeric:tabular-nums; font-weight:650; width:2.5rem; text-align:right}
.ficha-cab{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-bottom:1.25rem}
.ficha-cab .avatar{width:4rem; height:4rem; font-size:1.1rem; border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s)}
.ficha-cab h1{font-size:var(--t-h1); letter-spacing:-.035em; font-weight:740}
.ficha-cab .acciones{margin-left:auto}
.nota-interna{position:relative; padding:1rem 1.1rem; border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-m); background:oklch(.95 .06 92); font-size:var(--t-s); box-shadow:inset 0 0 0 1px oklch(.66 .115 82 / .3)}
.nota-interna .meta{font-size:var(--t-xs); color:var(--pend); font-weight:650; margin-bottom:.35rem; display:flex; justify-content:space-between; gap:1rem}
.privado{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); font-weight:650; color:var(--pend)}
.privado .ico{width:1rem; height:1rem}
.correo-prev{border-radius:var(--r-m); overflow:hidden; box-shadow:inset 0 0 0 1px var(--linea), var(--sombra-2); background:var(--blanco)}
.correo-prev-cab{padding:.85rem 1.1rem; background:var(--fondo); border-bottom:1px solid var(--linea); font-size:var(--t-xs); display:grid; gap:.2rem}
.correo-prev-cab b{font-size:var(--t-s)}
.clave-gen{display:flex; align-items:center; gap:.5rem; font-variant-numeric:tabular-nums; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-weight:700; letter-spacing:.06em}
.zona-soltar{
  display:grid; justify-items:center; text-align:center; gap:.6rem; padding:clamp(2rem, 1.5rem + 3vw, 4rem) 1.5rem;
  border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s); border:2px dashed var(--linea-fuerte); background:var(--blanco);
  transition:background-color .25s, border-color .25s, scale .3s var(--e-sale);
}
.zona-soltar.encima{background:var(--oro-fondo); border-color:var(--oro); scale:1.01}
.zona-soltar svg.ilus{width:8rem; height:auto}
.zona-soltar b{font-size:var(--t-l)}
.subidas > li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .85rem; align-items:center; padding-block:.85rem; border-top:1px solid var(--linea)}
.subidas .barra{grid-column:2 / -1; height:.35rem}
.editor-lineas{display:grid; gap:.5rem}
.linea-ed{display:grid; grid-template-columns:minmax(0,1fr) 4.5rem 7rem 2.75rem; gap:.5rem; align-items:center}
.linea-ed .entrada{min-height:2.75rem; padding:.5rem .7rem}
.linea-ed .dcha{text-align:right}
@container main (max-width:36rem){
  .linea-ed{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 2.75rem}
  .linea-ed > :first-child{grid-column:1 / -1}
}
.tramo-ed{display:grid; grid-template-columns:minmax(0,1fr) 5.5rem 2.75rem; gap:.5rem; align-items:center}
.plantilla{display:grid; gap:.9rem; align-content:start}
.plantilla .cab{display:flex; align-items:center; gap:.85rem}
.plantilla .cab .ico-caja{width:3rem; height:3rem}
.plantilla ol{counter-reset:p; display:grid; gap:.4rem}
.plantilla ol li{counter-increment:p; display:grid; grid-template-columns:1.75rem minmax(0,1fr) auto; gap:.5rem; font-size:var(--t-s); align-items:baseline}
.plantilla ol li::before{content:counter(p, decimal-leading-zero); font-size:.7rem; font-weight:700; color:var(--oro-texto); font-variant-numeric:tabular-nums}
.plantilla ol li span{font-size:var(--t-xs); color:var(--tinta-2)}
.codigo-auditoria{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.75rem; color:var(--tinta-2)}

/* paleta de búsqueda */
dialog.paleta{width:min(100% - 2rem, 40rem); margin-top:12svh; border-radius:var(--r-l)}
.paleta .buscador .entrada{min-height:3.5rem; border-radius:0; box-shadow:none; border-bottom:1px solid var(--linea); font-size:var(--t-l); padding-left:3.2rem}
.paleta .buscador .ico{left:1.2rem}
.paleta ul{max-height:22rem; overflow:auto; padding:.5rem}
.paleta li a{display:flex; align-items:center; gap:.85rem; min-height:3rem; padding:.5rem .75rem; border-radius:var(--r-s); text-decoration:none}
.paleta li a[aria-selected="true"],.paleta li a:hover{background:var(--oro-fondo)}
.paleta li a span{margin-left:auto; font-size:var(--t-xs); color:var(--tinta-2)}

/* avisos (toasts) */
.avisos{position:fixed; z-index:300; right:max(1rem, env(safe-area-inset-right)); bottom:calc(1rem + env(safe-area-inset-bottom)); display:grid; gap:.6rem; width:min(24rem, calc(100vw - 2rem)); pointer-events:none}
@media (max-width:767px){ .avisos{bottom:calc(var(--nav-m) + 1.25rem + env(safe-area-inset-bottom)); left:1rem; right:1rem; width:auto} }
.aviso-t{
  pointer-events:auto; display:flex; gap:.75rem; align-items:flex-start; padding:.9rem 1rem;
  border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:var(--v-900); color:var(--crema);
  box-shadow:0 20px 40px -16px oklch(0 0 0 / .55); font-size:var(--t-s); line-height:1.4;
}
.aviso-t .ico{color:var(--brote); margin-top:.05rem}
.aviso-t small{display:block; color:oklch(.82 .02 130); font-size:var(--t-xs); margin-top:.15rem}
@media (prefers-reduced-motion:no-preference){
  .aviso-t{animation:aviso-entra .5s var(--e-resorte)}
  .aviso-t.sale{animation:aviso-sale .35s var(--e-sale) forwards}
}
@keyframes aviso-entra{from{opacity:0; translate:0 1rem; scale:.95}}
@keyframes aviso-sale{to{opacity:0; translate:1rem 0}}


/* =============================================================================
   Ajustes finales
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .estado::before,.mh-nodo,.lt-nodo,.boton{border:1px solid CanvasText}
}
@media print{
  .lateral,.barra-sup,.nav-movil,.lado-fijo .acciones{display:none!important}
  .app{display:block}
}

/* =============================================================================
   Antes de empezar · condiciones y privacidad (requisito 11/10/2026)
   ============================================================================= */
.acc-ancha{width:min(100%, 38rem)}
@media (min-width:960px){ .acc-ancha{width:min(100%, 40rem)} }
.esencial{display:grid; gap:.25rem; margin-bottom:1.5rem; grid-template-columns:minmax(0,1fr)}
.esencial li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem; padding:.85rem 0; border-top:1px solid var(--linea)}
.esencial li:first-child{border-top:0}
.esencial b{display:block; font-size:var(--t-s)}
.esencial p{font-size:var(--t-xs); color:var(--tinta-2); margin-top:.15rem; line-height:1.5}
@media (min-width:1400px){
  .acc-ancha .esencial{grid-template-columns:1fr 1fr; column-gap:1.5rem}
  .acc-ancha .esencial li:nth-child(2){border-top:0}
  .acc-ancha .esencial-corto{grid-template-columns:minmax(0,1fr)}
}
.texto-legal{border-radius:var(--r-m); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
.texto-legal summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.5rem; padding:.75rem 1rem; cursor:pointer}
.texto-legal summary::-webkit-details-marker{display:none}
.texto-legal summary b{display:block; font-size:var(--t-s)}
.texto-legal summary small{display:block; font-size:.75rem; color:var(--tinta-2); margin-top:.1rem}
.texto-legal summary .ico{transition:rotate .3s var(--e-sale); color:var(--oro-texto)}
.texto-legal[open] summary .ico{rotate:180deg}
.texto-legal-cuerpo{max-height:15rem; overflow:auto; padding:0 1rem 1rem; margin-inline:.25rem; border-top:1px solid var(--linea); font-size:var(--t-xs); color:var(--tinta-2); line-height:1.6; scrollbar-width:thin}
.texto-legal-cuerpo h3{font-size:var(--t-s); color:var(--tinta); margin-top:1rem; letter-spacing:-.01em}
.texto-legal-cuerpo p{margin-top:.3rem}
.texto-legal-cuerpo .ejemplo{margin-top:.85rem}
.texto-legal-cuerpo mark{background:var(--oro-fondo); color:var(--pend); padding:0 .3rem; border-radius:4px; font-size:.75rem}
.casilla-grande{align-items:flex-start; padding:.85rem 1rem; border-radius:var(--r-s); background:var(--papel); line-height:1.4; transition:background-color .25s, box-shadow .25s}
.casilla-grande input{margin-top:.05rem}
.casilla-grande:has(input:checked){background:var(--ok-fondo); box-shadow:inset 0 0 0 1.5px oklch(.58 .14 150 / .5)}
.cambios-version{display:grid; grid-template-columns:minmax(0,1fr); gap:.6rem; margin-bottom:1rem}
.cv-col{padding:1rem; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:var(--papel); font-size:var(--t-xs); color:var(--tinta-2)}
.cv-col small{display:block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); margin-bottom:.35rem}
.cv-col.nuevo{background:var(--oro-fondo); color:var(--tinta)}
.cv-col.nuevo small{color:var(--oro-texto)}
.cv-flecha{display:none; place-items:center; color:var(--oro-texto)}
@media (min-width:640px){ .cambios-version{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch} .cv-flecha{display:grid} }

/* banda de aviso (condiciones nuevas) */
.aviso-banda{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:.75rem 1rem;
  margin-bottom:var(--hueco); padding:.85rem .85rem .85rem 1rem;
  border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:var(--oro-fondo); box-shadow:inset 0 0 0 1px oklch(.66 .115 82 / .35);
  font-size:var(--t-s);
}
.aviso-banda p{color:var(--tinta)}
@media (max-width:640px){ .aviso-banda{grid-template-columns:auto minmax(0,1fr) auto} .aviso-banda .boton{grid-column:2 / -1; justify-self:start; grid-row:2} }
@media (prefers-reduced-motion:no-preference){ .aviso-banda{animation:vista-entra .6s var(--e-sale)} }

/* ajustes de la rejilla: tarjetas de una misma fila con la misma altura */
.rejilla{align-items:stretch}
.rejilla > .lado-fijo{align-self:start}
.buscar-movil{display:inline-grid}
@media (min-width:768px){ .buscar-movil{display:none} }
.ilus{display:block}
.acc-caja > .ilus{margin-bottom:1rem}

/* hojas que vuelan en los momentos buenos */
.hoja-vuela{position:fixed; z-index:400; width:13px; height:13px; margin:-6px 0 0 -6px; border-radius:13px 0 13px 0; pointer-events:none; animation:vuela 1.15s var(--e-sale) forwards}
@keyframes vuela{to{translate:var(--dx) var(--dy); rotate:var(--r); opacity:0; scale:.6}}
.grafico .b.venc{fill:var(--venc-punto)}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,[tabindex="-1"]:focus:not(:focus-visible){outline:none}

@media (max-height:75rem){ .lat-ayuda{display:none!important} .lat-grupo{margin-top:.25rem} .lateral{gap:.5rem} }

.tareas > li{grid-template-columns:auto minmax(0,1fr)}
.tareas .vence{grid-column:2; justify-self:start; margin-top:.15rem; padding:.15rem .55rem; border-radius:999px; background:var(--fondo); color:var(--tinta-2)}
.tareas .vence.tarde{background:var(--venc-fondo); color:var(--venc)}

.lat-yo .txt{flex:1}
.lat-yo .txt span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.papel-cab .ref .sello-ejemplo,.papel-cab .ref .pagada-sello{position:static; display:inline-block; margin-top:.75rem; rotate:-6deg}
.hilo span.avatar{display:inline-grid; font-size:.7rem; color:var(--crema); white-space:normal; overflow:visible}

.campo > .segmentado{justify-self:start}
.importe-li{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; align-self:start}
.enlace-li{border:0; background:none; padding:0; color:var(--v-700); font-weight:650; font-size:var(--t-xs); text-decoration:underline; text-decoration-color:oklch(.37 .072 158 / .35); cursor:pointer; min-height:1.75rem}
.acc-volver{display:flex; width:fit-content; margin-bottom:.35rem}

@media (max-width:420px){
  .pasos-acc span:not(.actual):not(.linea){font-size:0; gap:0}
  .pasos-acc span i{font-size:var(--t-xs)}
}
@container main (max-width:51.99rem){
  .chat{grid-template-rows:auto minmax(0,1fr)}
  .hilos{display:block; border-right:0; border-bottom:1px solid var(--linea); overflow:visible}
  .hilos-cab{display:none}
  #hilos{display:flex; gap:.4rem; overflow-x:auto; padding:.6rem; scrollbar-width:none}
  #hilos::-webkit-scrollbar{display:none}
  .hilo{flex:none; width:auto; max-width:16rem; padding:.45rem .8rem; border-left:0; border-radius:999px; box-shadow:inset 0 0 0 1px var(--linea-fuerte); grid-template-columns:minmax(0,1fr)}
  .hilo span.avatar, .hilo span span{display:none}
  .hilo b{font-size:var(--t-xs)}
  .hilo[aria-current="true"] *{color:var(--crema)}
  .hilo[aria-current="true"]{background:var(--v-800); color:var(--crema); box-shadow:none}
  .conversa-cab .boton{display:none}
}
.sup-miga{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:768px) and (max-width:1099px){
  .buscar-btn{display:none}
  .buscar-movil{display:inline-grid}
  .sup-miga{margin-right:auto}
}

.lat-pie{min-width:0; padding-right:1.25rem; padding-bottom:.75rem}
.lat-pie > *{min-width:0; max-width:100%}
.lat-ayuda{overflow-wrap:anywhere}
@media (max-width:1199px){ .lat-pie{padding-right:0} }
.semana{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap:.75rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--linea)}
.semana a{display:flex; gap:.75rem; align-items:center; padding:.75rem .85rem; border-radius:var(--r-m) var(--r-s) var(--r-m) var(--r-s); background:var(--fondo); text-decoration:none; color:inherit; transition:background-color .2s}
.semana a:hover{background:var(--oro-fondo)}

.acc-form > *, .acc-caja > *{min-width:0}
.usuario-fijo{min-width:0}
.usuario-fijo b{overflow-wrap:anywhere}
.decision .acciones{grid-template-columns:repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr))}
@container main (max-width:34rem){ .col-opc{display:none} }
.texto-legal-cuerpo .ejemplo{white-space:normal}
.tarjeta-num{box-shadow:none; border:1.5px solid var(--linea-fuerte)}
.tarjeta-num:focus-within{border-color:var(--v-700)}

@media (max-width:759px){
  .pago-resumen{padding:1.1rem 1.25rem; gap:.5rem}
  .pago-resumen > img,.pago-resumen > .simulado,.pago-resumen .deco{display:none}
  .pago-resumen .importe{font-size:2.1rem}
  .pago-form{padding:1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom))}
}
.tareas li.hecha .vence{background:var(--ok-fondo); color:var(--ok)}

@container hoja (min-width:46rem){ .bienv-t{font-size:clamp(2rem, 5cqi, 3.6rem)} }
.celda-s,.celda-t{overflow-wrap:anywhere}

/* =============================================================================
   Interfaz real: piezas añadidas sobre la maqueta (datos reales, sin simulaciones)
   ============================================================================= */
/* trébol del sprite: colores por variables heredadas de <use> (sin estilos en línea) */
.hj{fill:var(--hoja,#10472F)}
.hj4{fill:var(--hoja4,#B28C32); stroke:var(--hoja4,#B28C32); stroke-width:var(--hoja4w,0); stroke-linejoin:round} /* hoja-4: contorno dorado del símbolo definitivo */
.hs{fill:var(--hoja-sombra,#05261A)}

/* sin JavaScript */
.sin-js{
  position:fixed; inset:0; z-index:500; display:grid; align-content:center; justify-items:center; gap:1rem;
  padding:2rem var(--gutter); text-align:center; background:var(--v-950); color:var(--crema);
}
.sin-js img{height:2.6rem; width:auto}
.sin-js h1{font-size:var(--t-h2); max-width:24ch}
.sin-js p{color:oklch(.86 .02 130); max-width:44ch}
.sin-js a{color:var(--oro-suave)}

/* arranque */
.arranque{min-height:100svh; display:grid; place-items:center; background:var(--v-950)}
.arranque .girando{color:var(--oro-suave)}

/* utilidades */
.boton-enlace{border:0; background:none; padding:0; font:inherit; color:var(--v-700); font-weight:620; text-decoration:underline; text-decoration-color:oklch(.37 .072 158 / .35); cursor:pointer; min-height:2.75rem; display:inline-flex; align-items:center; gap:.4rem}
.boton-enlace:hover{text-decoration-color:currentColor}
.sin-borde{border:0; padding:0; margin:0; min-width:0}
.ico.mini{width:.85rem; height:.85rem}
.sin-subrayado{text-decoration:none}
.bloque{display:block}
.t-venc{color:var(--venc)}
.t-ok{color:var(--ok)}
.t-oro{color:var(--oro-texto)}
.retraso,.retraso-txt{color:var(--venc); font-weight:600}
.oscuro .retraso-txt{color:oklch(.82 .12 28)}
.vacio.compacto{padding:1rem .5rem}
.vacio.compacto .ilus{width:7rem}
.vacio.compacto p{font-size:var(--t-s)}
.trabajando{opacity:.7; cursor:progress}
.estado-error{display:grid; gap:1rem; justify-items:start; max-width:40rem}
.sin-avisos{padding:.75rem}
.acc-form-interior{display:grid; gap:1.1rem}
.acciones.pegado{margin-top:.75rem}
.nowrap{white-space:nowrap}
.dcha{text-align:right}

/* toast de error */
.aviso-t.aviso-error .ico{color:oklch(.82 .12 28)}

/* inicio */
.prev-maqueta img{width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; display:block; transition:scale .8s var(--e-sale)}
@media (hover:hover){ .prev-maqueta:hover img{scale:1.03} }
.prev-vacia{aspect-ratio:3 / 2; display:grid; place-content:center; justify-items:center; gap:.5rem; color:var(--tinta-3)}
.prev-vacia .ico{width:2.5rem; height:2.5rem}
.prev-maqueta .pins i{translate:-50% -100%}
.mini-hitos{grid-template-columns:repeat(var(--n, 6), minmax(0,1fr))}
.mini-hitos::before{left:calc(50% / var(--n, 6)); right:calc(50% / var(--n, 6))}
.mini-hitos .relleno{left:calc(50% / var(--n, 6))}
.mh-nodo .mh-num{font-size:.75rem}
.mh-f.retraso{color:var(--venc); font-weight:600}
@container main (max-width:40rem){
  .mini-hitos .relleno{display:none}
}
.lista-ico .boton-texto{align-self:center}
.lista-ico > li > a.boton-s{min-width:2.75rem}
.li-t.sin-subrayado:hover{text-decoration:underline}

/* acceso */
.qr-caja{display:grid; place-items:center; padding:1rem; border-radius:var(--r-m); background:#fff; box-shadow:inset 0 0 0 1px var(--linea-fuerte); width:fit-content; max-width:100%}
.qr{width:min(100%, 13.5rem); height:auto}
.totp-alta{display:grid; gap:1.25rem; margin-bottom:1.25rem; justify-items:start}
.totp-alta .campo{width:100%}
.clave-gen{font-variant-numeric:tabular-nums; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-weight:700; letter-spacing:.06em; justify-content:space-between; flex-wrap:wrap}
.codigos-rec{display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:.5rem; margin:1rem 0}
.codigos-rec li{padding:.7rem .9rem; border-radius:var(--r-s); background:var(--papel); font-family:ui-monospace, "SF Mono", Menlo, monospace; font-weight:700; letter-spacing:.05em; text-align:center}
.acc-caja .acciones{margin-bottom:1rem}
.usuario-fijo.clave-gen{padding:.8rem .9rem}

/* ---------- espaciados y utilidades de las vistas ---------- */
.sep-abajo{margin-bottom:var(--hueco)}
.sep-arriba{margin-top:1rem}
.sep-arriba-g{margin-top:var(--hueco)}
.sep-t{margin-bottom:.85rem}
.sep-p{margin-block:.25rem .75rem}
.sin-margen{margin:0}
.empuja{margin-left:auto}
.pegado{margin-top:1rem}
.acciones.fin{justify-content:flex-end}
.grupo-chips{display:inline-flex; gap:.4rem; flex-wrap:wrap}
.grupo-botones{display:inline-flex; gap:.25rem; flex-wrap:wrap}
.pila{display:grid; gap:.6rem}
.dato-fijo{padding:.75rem .95rem; border-radius:var(--r-s); background:var(--papel); font-weight:620}
.huella{margin-top:.35rem; font-size:var(--t-xs); overflow-wrap:anywhere}
.huella code,.huella-c{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.75rem}
.traza-nota{margin-top:.35rem; font-weight:500}
.kpi-num.pequeno{font-size:2rem}
.kpi-num.t-venc{color:var(--venc)}
.kpis.dos-col{grid-template-columns:1fr 1fr}
.kpis.ancho-18{grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr))}
.prev-emp{line-height:1.6}
.sello-caduca{display:inline-block; margin-top:.75rem; padding:.3rem .8rem; border:2px solid var(--venc-punto); border-radius:8px; color:var(--venc); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; rotate:-6deg}
.papel-sub{font-size:var(--t-h3); margin-top:1.5rem}
.condiciones{margin-top:.6rem; max-width:62ch; font-size:var(--t-s); white-space:pre-line}
.col-papel{min-width:0}
.cab-vista .acc-volver{margin-bottom:.35rem}

/* ---------- vista previa de archivos ---------- */
.vista-previa{position:relative; display:grid; place-items:center; width:100%; min-height:12rem; border-radius:var(--r-s); background:var(--papel); overflow:hidden}
.vista-previa img{display:block; max-width:100%; max-height:var(--alto, 30rem); width:auto; height:auto; object-fit:contain}
.vp-pdf{width:100%; height:var(--alto, 30rem); border:0; background:#fff}
.vp-carga,.vp-nada{display:grid; justify-items:center; gap:.75rem; padding:2rem 1.25rem; text-align:center; color:var(--tinta-2); font-size:var(--t-s)}
.vp-nada .doc-hoja{position:static; rotate:0deg; translate:none; width:5.5rem}
.vp-carga .girando{width:2.5rem; height:2.5rem}
.detalle-doc{display:grid; gap:.85rem}
.detalle-doc .tarjeta-cab{margin:0}
.panel-doc .vista-previa{min-height:14rem}
.doc-prev .doc-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.doc-prev .doc-tipo .estado{box-shadow:0 1px 4px oklch(0 0 0 / .15)}

/* ---------- visor de maquetas ---------- */
.visor-img{margin:0 auto}
.visor-img > img{display:block; width:100%; height:auto; border-radius:8px}
.visor-img .vista-previa{background:var(--blanco); border-radius:8px}
.visor-capa{position:absolute; inset:0; z-index:2; cursor:crosshair; border-radius:8px; outline-offset:-3px}
.visor-capa:focus-visible{outline:3px solid var(--oro-suave)}
.visor-pins{position:absolute; inset:0; z-index:3; pointer-events:none}
.visor-pins .pin{pointer-events:auto}
.visor-pie{display:flex; justify-content:space-between; align-items:center; gap:.5rem 1rem; flex-wrap:wrap; padding:.5rem .85rem; border-top:1px solid oklch(1 0 0 / .08); color:oklch(.86 .02 130)}
.visor-pie .boton-texto{--fg:var(--oro-suave)}
.visor-lienzo .boton[aria-pressed="true"]{--bg:var(--crema)}
.comentarios > li{cursor:pointer}
.com-cab time{font-size:.72rem; white-space:nowrap}
.traza.ok,.traza.cambios{margin-top:.25rem}

/* ---------- presupuestos y pagos ---------- */
.aceptar{gap:.9rem}
.metodo{display:grid; gap:.75rem; padding:1rem; border-radius:var(--r-m); box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
.metodo-cab{display:flex; gap:.85rem; align-items:flex-start}
.pago-dlg{display:grid; gap:1rem}
.pago-resumen-dlg{display:grid; gap:.25rem; padding:1rem 1.1rem; border-radius:var(--r-m); background:var(--v-900); color:var(--crema)}
.pago-resumen-dlg .peq{color:oklch(.86 .02 130)}
.pago-resumen-dlg .importe{font-size:2.2rem}
.iban small{font-size:.7rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase}
.factura-li{grid-template-columns:auto minmax(0,1fr)}
.factura-li .col-fin{grid-column:1 / -1; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; padding-left:calc(2.5rem + .85rem)}
.fila-vencida td:first-child{box-shadow:inset 3px 0 0 var(--venc-punto)}
.tabla .acciones{gap:.3rem}

/* ---------- mensajes ---------- */
.conversa .redactar{display:grid; gap:.5rem}
.redactar-fila{display:flex; align-items:flex-end; gap:.5rem}
.redactar-fila .entrada{flex:1; overflow-y:auto}
.adj-chips{display:flex; gap:.4rem; flex-wrap:wrap}
.adj-chips .estado .quitar{border:0; background:none; padding:0; display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; margin-left:.15rem; border-radius:50%; color:inherit; cursor:pointer}
.adj-chips .estado .quitar:hover{background:oklch(0 0 0 / .08)}
.texto-msj{white-space:pre-wrap; overflow-wrap:anywhere}
.adjuntos{display:grid; gap:.4rem}
.sin-mensajes{align-self:center; margin:auto}
.burbuja{min-width:0}
.msj > div{min-width:0}

/* ---------- calendario ---------- */
.ley-pend-pt{background:var(--pend-punto)}
.ley-venc-pt{background:var(--venc-punto)}
.ley-ok-pt{background:var(--ok-punto)}
.ley-rev-pt{background:var(--rev-punto)}
.fecha-caja.rojo{background:var(--venc)}
.cal-celda .evento-cal{text-decoration:none; display:block}
.reunion ul{margin:0}
.rejilla > .col-papel,.rejilla > div[style]{min-width:0}

/* ---------- plazos del proyecto ---------- */
.gantt-meses{grid-template-columns:repeat(var(--m, 3), minmax(0,1fr))}
.gantt-pista{background:repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--m, 3) - 1px), var(--linea) calc(100% / var(--m, 3) - 1px) calc(100% / var(--m, 3)))}
.gantt-capa{position:absolute; top:0; bottom:0; right:0; left:calc(8.5rem + .75rem); pointer-events:none}
.gantt-capa .gantt-hoy{top:-.2rem; bottom:-.2rem}
.gantt-leyenda i.ley-hecho{background:var(--v-700)}
.gantt-leyenda i.ley-curso{background:var(--rev-fondo); box-shadow:inset 0 0 0 1.5px var(--rev-punto)}
.gantt-leyenda i.ley-pend{background:var(--neutro-fondo); box-shadow:inset 0 0 0 1.5px var(--neutro-punto)}
.lt-hito .lt-cab .grupo-chips{align-items:center}

/* ---------- galería y documentos ---------- */
.mq-card .prev img{width:100%; height:100%; object-fit:cover; display:block; transition:scale .8s var(--e-sale)}
@media (hover:hover){ .mq-card:hover .prev img{scale:1.04} }
.mq-card .prev .prev-vacia{aspect-ratio:auto; height:100%; color:var(--crema)}
.mq-card .prev .estado{z-index:1}
.mq-card .prev .version{z-index:1}
.docs .doc{cursor:pointer; font:inherit; color:inherit}
.doc-prev .doc-hoja{z-index:0}

/* ---------- avisos, campana y búsqueda ---------- */
.desplegable .lista-ico > li{grid-template-columns:auto minmax(0,1fr)}
.desplegable .sin-avisos{display:block; padding:.75rem}
.paleta .sin-avisos{display:block}
dialog.paleta{padding:0}
.paleta .buscador{position:relative}

/* ---------- textos legales (Markdown seguro) ---------- */
.md{display:grid; gap:.6rem}
.md h3,.md h4,.md h5,.md h6{font-size:var(--t-s); color:var(--tinta); margin-top:.9rem; letter-spacing:-.01em}
.md h3:first-child{margin-top:0}
.md p,.md li{font-size:var(--t-xs); line-height:1.6}
.md-lista{display:grid; gap:.3rem; padding-left:1.1rem}
ul.md-lista{list-style:disc}
ol.md-lista{list-style:decimal}
.md-cita{padding:.7rem .9rem; border-radius:var(--r-s); background:var(--oro-fondo); color:var(--pend); font-weight:650}
.md-tabla{overflow-x:auto; border-radius:var(--r-s); box-shadow:inset 0 0 0 1px var(--linea)}
.md-tabla table{font-size:var(--t-xs); min-width:28rem}
.md-tabla th{background:var(--fondo); text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--linea-fuerte)}
.md-tabla td{padding:.5rem .7rem; border-bottom:1px solid var(--linea); vertical-align:top}
.md hr{border:0; border-top:1px solid var(--linea); margin-block:.6rem}
.md code{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.9em}
.texto-legal-cuerpo.sin-tope{max-height:none}
dialog.dlg-ancho .texto-legal-cuerpo{max-height:22rem}

/* ---------- formularios ---------- */
.form-rejilla .campo.entero{grid-column:1 / -1}
.campo .entrada[readonly]{background:var(--papel); box-shadow:inset 0 0 0 1px var(--linea)}
.kpi-num.texto{font-size:clamp(1.4rem, 1.1rem + .9vw, 2.1rem); letter-spacing:-.03em}
.tabla .acciones .boton{white-space:nowrap}
.tabla td:last-child .acciones{flex-wrap:nowrap}
.kpis.sep-abajo,.kpis.rv{margin-bottom:var(--hueco)}
.novedades.dos-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap:.25rem 2rem}
.novedades.dos-cols > li::before{display:none}
.novedades.dos-cols > li{padding-bottom:.75rem}
.subir-form{display:grid; gap:1rem}
.zona-soltar .ilus{width:8rem}

/* ---------- equipo ---------- */
.fila-anillo{display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap}
.fila-anillo > div:last-child{flex:1; min-width:12rem}
.pila-g{display:grid; gap:var(--hueco)}
.select-s{min-height:2.5rem; padding:.35rem .7rem; font-size:var(--t-s); width:auto; min-width:9rem}
.hito-ed{display:grid; grid-template-columns:minmax(0,1fr) 10rem auto; gap:.5rem; align-items:center}
@container main (max-width:36rem){ .hito-ed{grid-template-columns:minmax(0,1fr) auto} .hito-ed > input[type=date]{grid-column:1 / -1} }
.interruptor-s{min-height:2rem; display:inline-flex}
.interruptor-s input{width:2.5rem; height:1.5rem}
.interruptor-s input::after{width:1.1rem; height:1.1rem; top:.2rem}
.interruptor-s input:checked::after{translate:1rem 0}
.alto-fijo{min-height:18rem; max-height:32rem}
.chat-ficha{height:auto; min-height:0}
.chat-ficha .conversa{min-height:26rem}
.pegado-s{margin-top:.5rem}
.totales.sin-ml{margin-left:0; width:100%}
.filtros-aud{grid-template-columns:repeat(2, minmax(10rem, 14rem)); margin-left:auto}
.dlg .campo{min-width:0}
.dlg .pila{display:grid; gap:.6rem}
.interruptor small{font-weight:400}
.cliente-celda a{min-width:0}

/* ---------- ajustes tras revisar los tamaños pequeños ---------- */
@container main (max-width:40rem){
  .mini-hitos{grid-template-columns:minmax(0,1fr)}
}
.novedades .li-t,.feed .li-t,.lista-ico .li-t{display:block}
.novedades time,.feed time{display:block}
.filtros-aud{grid-template-columns:repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); width:100%; margin-left:0}
@media (min-width:900px){ .filtros-aud{grid-template-columns:repeat(2, 13rem); width:auto; margin-left:auto} }

/* ============ Logotipo definitivo (12/10/2026): 3 hojas verdes (--hoja) + 1 hoja en contorno dorado (--hoja4, hoja-4); sin tallo ============ */
.acc-trebol svg,.bienv-deco svg,.pago-resumen .deco svg{--hoja4:currentColor}
.girando svg{--hoja4w:1.3}
.escena-trebol svg{--hoja4:var(--oro)}

/* =============================================================================
   TIPOGRAFÍA v5 (12/10/2026): los TITULARES del área de clientes pasan de Bricolage Grotesque a MONTSERRAT
   (la misma del logotipo y de la web). El cuerpo, los botones, las tablas y los formularios siguen en Bricolage.
   h1 800, h2/h3/h4 700, cifras 700; seguimiento −0,01 em; tamaños ~10 % menores porque Montserrat es más ancha.
   Va el último: manda sobre las reglas de arriba.
   ============================================================================= */
:root{
  --f-titulo:"Montserrat","Montserrat Respaldo","Avenir Next",system-ui,sans-serif;
  --t-h3:1.25rem;
  --t-h2:clamp(1.4rem, 1.1rem + .8vw, 1.8rem);
  --t-h1:clamp(1.7rem, 1.2rem + 1.5vw, 2.7rem);
  --t-cifra:clamp(1.8rem, 1.25rem + 1.45vw, 2.7rem);
}
h1,h2,h3,h4,.t-vista,.bienv-t,.importe,.kpi-num,.anillo-num,.cuenta-atras strong,.tarjeta-t,.lt-t,.etiqueta{font-family:var(--f-titulo); font-variation-settings:normal}
h1,h2,h3,h4{font-weight:700; letter-spacing:-.01em; line-height:1.15}
h1,.t-vista,.ficha-cab h1,.acc-caja h1,.acc-arte h2,.bienv-t{font-weight:800; letter-spacing:-.01em}
.t-vista{line-height:1.1}
.ficha-cab h1{font-size:var(--t-h1)}
.acc-caja h1{font-size:clamp(1.6rem, 1.3rem + 1.1vw, 2.35rem); line-height:1.1}
.acc-arte h2{font-size:clamp(1.45rem, 1rem + 1.8vw, 3.25rem); line-height:1.08; max-width:15ch}
.bienv-t{font-size:clamp(1.7rem, 1.1rem + 2vw, 3.25rem); line-height:1.06}
.papel h2,.dlg-cab h2{letter-spacing:-.01em}
.importe,.kpi-num,.anillo-num,.cuenta-atras strong{font-weight:700; letter-spacing:-.01em}
.tarjeta-t,.lt-t{font-weight:700; letter-spacing:-.005em}
.etiqueta{font-size:.72rem; letter-spacing:.12em}
.feed-dia h3{font-size:.7rem; letter-spacing:.12em}

/* =============================================================================
   FONDO BLANCO + MISMA MARCA QUE LA WEB v6 (13/10/2026)
   Orden de Jesús: «el área de cliente no tiene el mismo formato que la web principal». Fondo BLANCO; cabecera y
   navegación claras con el logotipo a color; botones, campos, tarjetas y tablas con los valores de la web;
   pie con los enlaces legales. Los tokens (--crema, --blanco, --papel, --fondo) ya están redefinidos arriba.
   Va el último: manda sobre las reglas de arriba. Las piezas oscuras de producto (hoja de bienvenida, resumen
   de pago, visor) se quedan oscuras, como la consola de la web.
   ============================================================================= */

/* ---------- botones: mismos radios, alturas y pesos que la web ---------- */
.boton{min-height:3rem; padding:.8em 1.45em; gap:.65em; font-weight:650; font-size:var(--t-s)}
.boton-s{min-height:2.75rem; padding:.6em 1.15em; font-size:var(--t-s)}
.boton-l{min-height:3.5rem; padding:.95em 1.7em; font-size:var(--t-base)}
.boton-oro{--bg:var(--v-800); --fg:#fff}
@media (hover:hover){ .boton-oro:hover{--bg:var(--v-700)} }
.oscuro .boton-oro,.hoja-oscura .boton-oro,.visor-lienzo .boton-oro,.visor-herr .boton-oro,.prev-maqueta .boton-oro{--bg:var(--oro-suave); --fg:var(--v-950)}
@media (hover:hover){ .oscuro .boton-oro:hover,.hoja-oscura .boton-oro:hover,.visor-lienzo .boton-oro:hover,.visor-herr .boton-oro:hover,.prev-maqueta .boton-oro:hover{--bg:oklch(.86 .09 90)} }
.boton-linea{--bg:transparent; --fg:var(--v-800); box-shadow:inset 0 0 0 1.5px oklch(.31 .062 161 / .62)}
@media (hover:hover){ .boton-linea:hover{--bg:oklch(.31 .062 161 / .08); box-shadow:inset 0 0 0 1.5px var(--v-700)} }
.oscuro .boton-linea{--fg:#fff; box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .35)}
@media (hover:hover){ .oscuro .boton-linea:hover{--bg:oklch(1 0 0 / .06); box-shadow:inset 0 0 0 1.5px var(--oro-suave)} }
.boton-texto{--fg:var(--v-700)}

/* ---------- campos: subrayado como el formulario de la web; foco visible y error en rojo ---------- */
.campo > label,.campo-etq{font-weight:650}
.entrada{
  min-height:3rem; padding:.7rem 0; border-radius:0; background:transparent; box-shadow:none;
  border-bottom:2px solid var(--campo-borde); font-size:1.0625rem; line-height:1.4;
  transition:border-color .25s;
}
.entrada:hover{box-shadow:none; border-bottom-color:var(--tinta)}
.entrada:focus{outline:none; box-shadow:none; border-bottom-color:var(--v-700)}
.entrada:focus-visible{outline:3px solid var(--foco); outline-offset:4px; border-radius:4px}
.entrada[aria-invalid="true"]{box-shadow:none; border-bottom-color:var(--venc)}
.entrada::placeholder{color:oklch(.45 .025 160)}
.buscador .entrada{padding:.7rem .95rem .7rem 2.75rem; border-radius:999px; background:#fff; border-bottom:0; box-shadow:inset 0 0 0 1.5px var(--campo-borde)}
.buscador .entrada:hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}
.buscador .entrada:focus{box-shadow:inset 0 0 0 2px var(--v-700)}
.buscador .entrada:focus-visible{outline:3px solid var(--foco); outline-offset:3px; border-radius:999px}
.codigo input,.casilla input{box-shadow:inset 0 0 0 1.5px var(--campo-borde)}
.codigo input:focus{box-shadow:inset 0 0 0 2px var(--v-700)}
.buscar-btn{box-shadow:inset 0 0 0 1px var(--campo-borde)}
.filtro{box-shadow:inset 0 0 0 1px var(--campo-borde)}
.error-campo{color:var(--venc)}

/* ---------- tarjetas y tablas: borde fino #E3E8E5 y sombra muy suave ---------- */
.tarjeta,.tabla-caja,.doc,.lt-cuerpo{box-shadow:inset 0 0 0 1px #e3e8e5, 0 1px 2px rgb(11 34 25 / .04), 0 6px 18px -12px rgb(11 34 25 / .12)}
.tabla th{background:var(--fondo); color:var(--tinta-2)}

/* ---------- cabecera de la app ---------- */
.barra-sup{border-bottom:1px solid #e3e8e5}

/* ---------- lateral claro con el logotipo a color (antes verde oscuro) ---------- */
.lateral.oscuro,.hoja-mas-caja.oscuro{
  --foco:var(--v-700); --tinta-2:oklch(.40 .03 160); --tinta-3:oklch(.48 .025 160);
  --linea:oklch(.23 .035 165 / .12); --linea-fuerte:oklch(.23 .035 165 / .26);
  color:var(--tinta);
}
@media (min-width:768px){
  .lateral{background:#fff; border-right:1px solid #e3e8e5; border-radius:0; scrollbar-color:oklch(.23 .035 165 / .25) transparent}
}
.lat-espacio{background:var(--fondo); box-shadow:inset 0 0 0 1px #e3e8e5}
.lat-espacio small{color:var(--oro-texto)}
.lat-grupo{color:var(--tinta-2)}
.lat-nav a{color:var(--tinta); font-weight:560}
@media (hover:hover){ .lat-nav a:hover{background:var(--fondo); color:var(--v-700)} }
.lat-nav a[aria-current="page"]{background:var(--fondo); color:var(--v-800); font-weight:650}
.lat-nav a[aria-current="page"]::before{background:var(--oro)}
.lat-nav a[aria-current="page"] .ico{color:var(--v-700)}
.lat-ayuda{background:var(--fondo); color:var(--tinta-2)}
.lat-ayuda b{color:var(--tinta)}
.lat-ayuda a{color:var(--v-700); text-decoration:underline; text-underline-offset:.2em}
@media (hover:hover){ .lat-yo:hover{background:var(--fondo)} }
.lat-yo .txt span{color:var(--tinta-2)}

/* ---------- navegación inferior (móvil) y hoja «Más» claras ---------- */
.nav-movil{background:rgb(255 255 255 / .97); color:var(--tinta-2); border-radius:0; border-top:1px solid #e3e8e5; box-shadow:0 -10px 30px -22px rgb(11 34 25 / .35)}
.nav-movil [aria-current="page"]{color:var(--v-800)}
.nav-movil [aria-current="page"]::before{background:var(--oro)}
.hoja-mas{color:var(--tinta)}
.hoja-mas::backdrop{background:oklch(.17 .03 168 / .4)}
.hoja-mas-caja{background:#fff; box-shadow:0 -12px 40px -16px rgb(11 34 25 / .35)}
.hoja-mas-asa{background:var(--campo-borde)}
.hoja-mas a{background:var(--fondo); color:var(--tinta)}
.hoja-mas a[aria-current="page"]{background:var(--v-800); color:#fff}

/* ---------- acceso: panel de arte claro (como la primera pantalla de la web) ---------- */
.acc-arte.oscuro{
  --foco:var(--v-700); --tinta-2:oklch(.40 .03 160); --tinta-3:oklch(.45 .025 160);
  --linea:oklch(.23 .035 165 / .12); --linea-fuerte:oklch(.23 .035 165 / .26);
  background:var(--fondo); color:var(--tinta);
}
.acc-arte h2{color:var(--v-800)}
.acc-arte h2 em{color:var(--oro-texto)}
.acc-trebol{color:var(--v-700); opacity:.07}
.acc-lema b{color:var(--oro-texto)}
.escena-halo{background:none}
.escena-trebol svg{--hoja:var(--v-700); --hoja-sombra:var(--v-900)}
.flota{box-shadow:inset 0 0 0 1px #e3e8e5, 0 24px 50px -26px oklch(.17 .03 168 / .4)}
.acc-pie,.acc-nota{border-color:#e3e8e5}

/* ---------- pie con los enlaces legales (como el de la web) ---------- */
.pie-portal{
  margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25rem 1.75rem;
  padding:1.1rem var(--gutter); background:var(--v-900); color:var(--crema);
  border-radius:clamp(1.5rem, 1rem + 2vw, 3rem) 0 0 0;
}
.pie-copia{font-size:var(--t-xs); color:oklch(.86 .02 130)}
.pie-enlaces{display:flex; flex-wrap:wrap; gap:0 1.25rem}
.pie-enlaces a{display:inline-flex; align-items:center; min-height:44px; font-size:var(--t-xs); font-weight:560; text-decoration:none; color:#e5e6d7; transition:color var(--d-micro)}
.pie-enlaces a:hover{color:var(--oro-suave); text-decoration:underline; text-underline-offset:.2em}
.contenido{padding-bottom:clamp(1.5rem, 1rem + 1.5vw, 2.5rem)}
@media (max-width:767.98px){ .pie-portal{padding-bottom:calc(var(--nav-m) + 1rem + env(safe-area-inset-bottom)); border-radius:var(--r-l) 0 0 0} }
.acc-legal{margin-top:1.75rem; width:min(100%, 29rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 1.25rem; padding-top:.75rem; border-top:1px solid #e3e8e5}
.acc-legal .pie-copia{color:var(--tinta-2)}
.acc-legal .pie-enlaces a{color:var(--v-700); font-weight:620}
.acc-legal .pie-enlaces a:hover{color:var(--v-800)}
@media print{ .pie-portal,.acc-legal,.lateral,.nav-movil{display:none} }
.boton-texto.boton-s{padding:.5em .6em}
/* contraste AA medido: contadores de filtro y mes sobre fondo rojo */
.filtro .cuenta{opacity:.9}
.fecha-caja.rojo small{color:#fff}
/* zonas táctiles ≥ 44 px */
.filtro,.segmentado button,.segmentado a{min-height:2.75rem}
.acc-fila .enlace{display:inline-flex; align-items:center; min-height:44px}
.hilo{min-height:2.75rem}
a.li-t{padding-block:.75rem; margin-block:-.75rem}

/* ---------- aceptación de contratos (13/10/2026) ---------- */
.doc-tipo{display:flex; flex-wrap:wrap; gap:.3rem; max-width:calc(100% - 1.2rem)}
.aviso-contrato{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.25rem; margin-bottom:var(--hueco); padding:1rem 1.25rem;
  background:var(--oro-fondo); color:var(--tinta); border-radius:var(--r-m); border-left:6px solid var(--oro);
}
.aviso-contrato > .ico{width:1.6rem; height:1.6rem; color:var(--oro-texto); flex:none}
.aviso-contrato > div{flex:1 1 16rem; min-width:0}
.aviso-contrato-t{margin:0 0 .15rem; font:700 var(--t-l)/1.25 Montserrat, "Bricolage Respaldo", sans-serif; color:var(--v-800)}
.aviso-contrato .acciones{display:flex; flex-wrap:wrap; gap:.5rem}
.aviso-contrato .boton{min-height:2.75rem}
.contrato-visor{display:grid; gap:.75rem}
.contrato-visor .vista-previa{min-height:18rem}
.huella-detalle{margin-top:.75rem}
.huella-detalle summary{cursor:pointer; min-height:2.75rem; display:flex; align-items:center; font-weight:600; color:var(--v-800)}
.huellas dd{overflow-wrap:anywhere}
.huellas .huella-c{word-break:break-all}
.texto-error{color:var(--venc); font-weight:560}
.nota-firma{margin:.25rem 0 0}
.nota-firma a{color:var(--v-800); font-weight:600; text-underline-offset:.2em}
.estado-celda{display:grid; gap:.35rem; justify-items:start}
.estado-celda .peq{line-height:1.35}

/* ---------- primeros pasos, extras y aprobación para la firma (14/10/2026, contrato 5) ---------- */
.pasos-lista{list-style:none; margin:0 0 var(--hueco); padding:0; display:grid; gap:.9rem}
.paso-item{display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.25rem; background:var(--blanco); border-radius:var(--r-m); box-shadow:inset 0 0 0 1px var(--linea)}
.paso-item[data-estado="hecho"],.paso-item[data-estado="firmado"]{background:var(--ok-fondo); box-shadow:inset 0 0 0 1px transparent}
.paso-item[data-estado="en_revision"]{border-left:6px solid var(--oro)}
.paso-num{flex:none; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--v-800); color:#fff; font:700 var(--t-base)/1 Montserrat,"Bricolage Respaldo",sans-serif}
.paso-cuerpo{flex:1 1 auto; min-width:0; display:grid; gap:.6rem}
.paso-cab{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem .8rem}
.paso-cab .tarjeta-t{margin:0}
.paso-doc{display:grid; gap:.5rem}
.paso-etq{margin-left:.5rem}
.paso-bloqueado{opacity:.85}
.paso-bloqueado .tarjeta-t{color:var(--tinta-2)}
.privacidad-caja{margin-top:var(--hueco)}
.privacidad-det{background:var(--blanco); border-radius:var(--r-m); box-shadow:inset 0 0 0 1px var(--linea); padding:.25rem 1.25rem 1rem}
.privacidad-det summary{display:flex; align-items:center; gap:.6rem; min-height:2.75rem; cursor:pointer; font-weight:640; color:var(--v-800)}
.privacidad-det summary .ico{width:1.25rem; height:1.25rem}
.privacidad-t{margin:1.1rem 0 .3rem; font:700 var(--t-base)/1.25 Montserrat,"Bricolage Respaldo",sans-serif; color:var(--v-800)}
.privacidad-lista{margin:.2rem 0 0; padding-left:1.2rem; display:grid; gap:.3rem}
.extras-fijo{display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; padding:.9rem 1.1rem; background:var(--oro-fondo); border-radius:var(--r-m); font-weight:600; color:var(--tinta)}
.extras-fijo .ico{flex:none; color:var(--oro-texto)}
.extras{display:grid; gap:var(--hueco)}
.extras-grupo-t{margin:0 0 .6rem; font:700 var(--t-l)/1.25 Montserrat,"Bricolage Respaldo",sans-serif; color:var(--v-800)}
.extras-lista{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.extra{display:grid; gap:.6rem; padding:1.1rem 1.25rem; background:var(--blanco); border-radius:var(--r-m); box-shadow:inset 0 0 0 1px var(--linea)}
.extra-cerrado{background:var(--papel)}
.extra-cab{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem .8rem}
.extra-t{margin:0; font:700 var(--t-base)/1.25 Montserrat,"Bricolage Respaldo",sans-serif}
.extra-meta{display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:0}
.extra-opciones{width:fit-content; max-width:100%; flex-wrap:wrap}
.extra-opciones button{min-height:2.75rem}
.extra-dec{display:grid; gap:.1rem}
.vp-sin-archivo{min-height:10rem}
.aprobacion-firma{padding-top:.4rem; border-top:1px dashed var(--linea)}
@media (max-width:480px){ .paso-item{padding:1rem; gap:.75rem} .extra{padding:1rem} }
.extra-opciones [aria-pressed="true"]{background:var(--v-800); color:#fff; box-shadow:none}
.extra-opciones button[disabled]{opacity:.7; cursor:default}
/* ajustes tras la prueba en móvil (375 px): rótulos largos que se parten, sin desplazamiento horizontal */
.paso-cuerpo{justify-items:start; max-width:100%}
.paso-doc{max-width:100%}
.paso-doc .li-t{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem}
.paso-etq{margin-left:0; white-space:normal; max-width:100%}
.doc-tipo .estado{white-space:normal; max-width:100%}
.privacidad-lista{list-style:disc}
.paso-item{min-width:0}