:root{
  /* Colores del sistema de iOS: los mismos que usa Apple, no aproximaciones. */
  --fondo:#f2f2f7; --superficie:#fff; --superficie2:#fff;
  --tinta:#000; --tinta2:rgba(60,60,67,.6); --tinta3:rgba(60,60,67,.3);
  --separador:rgba(60,60,67,.29);
  --tinte:#007aff; --verde:#248a3d; --verde-vivo:#34c759;
  --rojo:#d70015; --ambar:#b25000; --ambar-suave:#fff4e5; --rojo-suave:#ffeceb; --verde-suave:#e8f8ed;
  --ambar-barra:#ff9500; /* el ámbar de iOS: para BARRAS, no para texto */
  --barra:rgba(249,249,249,.82); --lateral:#0b0b0c;
  --sombra:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --radio:14px; --radio-g:20px;
  --seguro-b:env(safe-area-inset-bottom,0px);
  --resorte:cubic-bezier(.32,.72,0,1); /* el "spring" de iOS, sin rebote */
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#000; --superficie:#1c1c1e; --superficie2:#2c2c2e;
    --tinta:#fff; --tinta2:rgba(235,235,245,.6); --tinta3:rgba(235,235,245,.3);
    --separador:rgba(84,84,88,.65);
    --tinte:#0a84ff; --verde:#30d158; --verde-vivo:#30d158;
    --rojo:#ff453a; --ambar:#ff9f0a; --ambar-barra:#ff9f0a; --ambar-suave:rgba(255,159,10,.16);
    --rojo-suave:rgba(255,69,58,.16); --verde-suave:rgba(48,209,88,.16);
    --barra:rgba(30,30,32,.8); --lateral:#0b0b0c;
    --sombra:0 1px 2px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:17px; /* cuerpo de iOS */
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(92px + var(--seguro-b)); /* el dock flota: aire debajo */
  overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}

/* ── Chrome translúcido: el contenido pasa POR DEBAJO ─────────────── */
.barra{
  position:sticky;top:0;z-index:20;
  background:var(--barra);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 8px;
  display:flex;align-items:center;gap:6px;min-height:44px;
  transition:box-shadow .25s ease,border-color .25s ease;
  border-bottom:.5px solid transparent;
}
.barra.pegada{border-bottom-color:var(--separador)}
/* Arriba del todo la barra no tiene nada que decir: se vuelve invisible y
   aparece con su título (y su cristal) hasta que el título grande se va. */
@media (max-width:899px){
  .barra{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
  .barra:not(.pegada):not(.siempre){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
}
.barra .titulo-chico{
  font-size:17px;font-weight:600;letter-spacing:-.01em;flex:1;text-align:center;
  opacity:0;transform:translateY(6px);transition:opacity .25s var(--resorte),transform .25s var(--resorte);
}
.barra.pegada .titulo-chico,.barra.siempre .titulo-chico{opacity:1;transform:none}
.barra .izq,.barra .der{min-width:44px;height:44px;display:flex;align-items:center;color:var(--tinte)}
.barra .der{justify-content:flex-end}

/* Título grande, el de Ajustes de iOS */
.titulo-grande{padding:4px 16px 10px}
.titulo-grande h1{
  margin:0;font-size:34px;line-height:1.08;font-weight:700;letter-spacing:-.024em;
}
.titulo-grande p{margin:4px 0 0;color:var(--tinta2);font-size:15px;letter-spacing:0}

main{padding:0 16px;max-width:760px;margin:0 auto}

/* ── Listas agrupadas ─────────────────────────────────────────────── */
.grupo{margin:0 0 26px}
.grupo>h2{
  margin:0 0 7px 16px;font-size:13px;font-weight:590;letter-spacing:.01em;
  text-transform:uppercase;color:var(--tinta2)
}
.lista{background:var(--superficie);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.item{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:52px;padding:12px 16px;color:inherit;width:100%;
  background:none;border:0;text-align:left;font-size:17px;
}
.item+.item::before{
  content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--separador)
}
.item.con-icono+.item.con-icono::before{left:60px}
.item .crece{flex:1;min-width:0}
.item .renglon{display:flex;align-items:center;gap:7px;min-width:0}
.item .renglon strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .nota{display:block;color:var(--tinta2);font-size:14px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Una nota que sí puede explicarse. La de una línea sirve para el último
   mensaje de un chat; para explicar por qué a alguien se le cobra distinto,
   cortar la frase a media palabra es peor que ocupar tres renglones. */
.item .nota.larga{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.item .valor{color:var(--tinta2);font-size:17px;flex:0 0 auto}
.item .chev{color:var(--tinta3);flex:0 0 auto;margin-right:-4px}
a.item:active,button.item:active{background:color-mix(in srgb,var(--tinta) 6%,transparent)}

/* Avatar/ficha redonda con inicial: lo que hace que una lista se vea de app */
.ficha{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:16px;font-weight:600;color:#fff;background:var(--tinte);letter-spacing:-.01em
}
.ficha.verde{background:var(--verde-vivo)}.ficha.ambar{background:#ff9f0a}
.ficha.rojo{background:#ff3b30}.ficha.gris{background:#8e8e93}

/* ── Números grandes ──────────────────────────────────────────────── */
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tarjeta{background:var(--superficie);border-radius:var(--radio-g);padding:16px;box-shadow:var(--sombra)}
.tarjeta.plana{padding:14px 16px}
.kpi .etq{font-size:13px;color:var(--tinta2);font-weight:500;letter-spacing:.01em}
.kpi .num{
  font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:2px;
  font-variant-numeric:tabular-nums
}
.kpi.destacada{grid-column:1/-1;background:var(--tinta);color:var(--fondo)}
/* La tarjeta de "Mis finanzas": premium como una de banco, sin fingir serlo
   (nada de número de tarjeta, marca bancaria ni "saldo"). */
.tarjeta-finanzas{display:block;grid-column:1/-1;position:relative;overflow:hidden;
  border-radius:24px;padding:22px 20px 18px;color:#fff;text-decoration:none;
  background:linear-gradient(140deg,#191a1e 0%,#101114 45%,#000 100%);
  box-shadow:0 14px 34px rgba(0,0,0,.38)}
.tarjeta-finanzas::before{content:'';position:absolute;right:-90px;top:-110px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(27,138,95,.55),transparent 65%)}
.tarjeta-finanzas::after{content:'';position:absolute;left:-60px;bottom:-120px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.07),transparent 70%)}
.tarjeta-finanzas>*{position:relative}
/* El destello premium (maqueta del dueño): una línea con degradado que nace
   en la esquina superior izquierda y se apaga a lo largo del borde. Solo esa
   esquina, nunca todo el contorno. Encima, un punto de luz pequeño recorre
   ese mismo tramo de ida y vuelta, como luz que resbala por el canto del
   cristal: el destello "se mueve ahí mismo". */
.tarjeta-finanzas>.tf-destello{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:
    radial-gradient(90px 60px at 0 0,rgba(255,255,255,.95),rgba(190,255,230,.55) 40%,transparent 72%) -30px -30px/180px 120px no-repeat,
    linear-gradient(150deg,rgba(150,255,205,.9) 0%,rgba(120,225,255,.55) 14%,rgba(120,225,255,.16) 30%,transparent 48%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:tf-recorre 4.8s cubic-bezier(.45,0,.55,1) infinite alternate;
}
/* Solo la primera capa (el punto) se mueve: del vértice hacia la derecha por
   el borde de arriba, y de vuelta; la segunda (el degradado) queda fija. */
@keyframes tf-recorre{
  from{background-position:-30px -30px,0 0}
  to{background-position:150px -30px,0 0}
}
@media (prefers-reduced-motion:reduce){.tarjeta-finanzas>.tf-destello{animation:none}}
.tarjeta-finanzas .etq{font-size:13px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.03em}
.tarjeta-finanzas .num{font-size:48px;font-weight:750;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin:4px 0 12px;line-height:1.05}
.tarjeta-finanzas .num .cent{font-size:26px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:0}
.tarjeta-finanzas .renglon{display:flex;align-items:center;gap:14px;font-size:14px;color:rgba(255,255,255,.9)}
.tarjeta-finanzas .renglon b{font-weight:600}
.tarjeta-finanzas .pie{margin-top:14px;font-size:12px;color:rgba(255,255,255,.5)}
/* El boleto del plan (maqueta del dueño): tarjeta oscura tipo ticket con
   muescas, nombre metálico y línea perforada. Sin precios inventados. */
.boleto-plan{
  position:relative;overflow:hidden;border-radius:26px;padding:24px 22px 18px;
  color:#fff;text-align:center;
  background:linear-gradient(160deg,#1d1e24 0%,#101114 40%,#000 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.boleto-plan::before{content:'';position:absolute;left:-40px;top:-60px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(94,92,230,.35),transparent 65%)}
.boleto-plan>*{position:relative}
.bp-cima{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:590;color:rgba(255,255,255,.75)}
.bp-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);
  font-size:11px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:3px 10px}
.bp-nombre{
  font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:10px 0 6px;
  background:linear-gradient(180deg,#fff 0%,#cfd2da 55%,#8f939e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bp-desc{font-size:14px;line-height:1.5;color:rgba(255,255,255,.65);margin:0 0 18px}
/* La línea perforada con sus muescas laterales, como un boleto de verdad. */
.bp-perfora{position:relative;height:0;border-top:2px dashed rgba(255,255,255,.18);margin:0 -22px 18px}
.bp-perfora::before,.bp-perfora::after{
  content:'';position:absolute;top:-13px;width:26px;height:26px;border-radius:50%;background:var(--fondo);
}
.bp-perfora::before{left:-13px}
.bp-perfora::after{right:-13px}
.bp-incluye{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
.bp-incluye span{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:560;color:rgba(255,255,255,.85);
}
.bp-incluye span.bp-pronto{background:none;border-style:dashed;color:rgba(255,255,255,.5);font-weight:500}
.bp-pie{font-size:11.5px;color:rgba(255,255,255,.4)}
/* El botón metálico del boleto (maqueta): píldora plateada con luz arriba. */
.bp-boton{
  display:block;width:100%;margin:0 0 12px;padding:14px;border:0;border-radius:999px;
  font:inherit;font-size:15px;font-weight:650;letter-spacing:-.01em;color:#0c0c0e;cursor:pointer;
  background:linear-gradient(180deg,#ffffff 0%,#dfe1e6 55%,#b8bbc5 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .12s ease;
}
.bp-boton:active{transform:scale(.98)}
.bp-nota{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s var(--resorte),opacity .3s}
.bp-nota.se-ve{max-height:90px;opacity:1;margin-bottom:12px}
.bp-nota span{display:block;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.08);
  font-size:13px;line-height:1.4;color:rgba(255,255,255,.8)}
/* La foto de perfil: en el saludo y en "Tu cuenta" (ahí, tocarla la cambia). */
.avatar-perfil{overflow:hidden}
.avatar-perfil img,.foto-cambiar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.foto-cambiar{position:relative;cursor:pointer}
.foto-cambiar .lapiz{
  position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;
  background:var(--superficie);color:var(--tinta);display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--superficie),var(--sombra);font-style:normal;
}
.foto-cambiar .lapiz svg{width:11px;height:11px}
.foto-cambiar input{display:none}
/* Título grande con una acción a la derecha (p. ej. el teléfono de llamadas). */
.titulo-grande.con-accion{display:flex;align-items:center;gap:12px}
.titulo-grande.con-accion>div{flex:1;min-width:0}
/* ── Identidad del negocio (logo, nombre, giro) ───────────────────── */
.identidad{display:flex;align-items:center;gap:14px;padding:16px}
.logo-negocio{
  width:64px;height:64px;border-radius:18px;flex:0 0 auto;overflow:visible;position:relative;cursor:default;
  display:grid;place-items:center;background:linear-gradient(135deg,#7c7aff,#5e5ce6);color:#fff;
  font-size:26px;font-weight:800;letter-spacing:-.02em;box-shadow:0 8px 20px rgba(94,92,230,.3);
}
.logo-negocio.con-input{cursor:pointer}
.logo-negocio img{width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}
.logo-negocio input{display:none}
.logo-negocio .lapiz{
  position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;
  background:var(--superficie);color:var(--tinta);display:grid;place-items:center;font-style:normal;
  box-shadow:0 0 0 2px var(--superficie),var(--sombra);
}
.logo-negocio .lapiz svg{width:12px;height:12px}
.identidad .crece{min-width:0;display:flex;flex-direction:column;justify-content:center}
.identidad .boton{width:auto;flex:0 0 auto;min-height:36px;padding:8px 14px;font-size:14px;border-radius:10px}
.pendiente-cambio .boton{width:auto;flex:0 0 auto;min-height:34px;padding:7px 12px;font-size:13px;border-radius:9px}
.identidad h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identidad .giro{display:block;color:var(--tinta2);font-size:14px;margin-top:2px}
.pendiente-cambio{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;
  font-size:14px;color:var(--tinta);border-top:.5px solid var(--separador);
}
.pendiente-cambio .nota{color:var(--tinta2);display:block;font-size:13px}
.pendiente-cambio .crece{flex:1;min-width:0}
/* ── Conectar mi tienda: cuatro fichas con logo ───────────────────── */
.tiendas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tienda{
  background:var(--superficie);border-radius:var(--radio-g);box-shadow:var(--sombra);
  padding:16px 14px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:transform .18s var(--resorte);
}
.tienda:active{transform:scale(.985)}
.tienda.conectada{box-shadow:var(--sombra),inset 0 0 0 1.5px var(--verde-vivo)}
.tienda .logo{width:48px;height:48px;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.tienda .logo svg{width:100%;height:100%;display:block}
.tienda .logo img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.tienda .logo img.contiene{object-fit:contain;padding:7px;box-sizing:border-box}
.tienda b{font-size:15px;font-weight:650;letter-spacing:-.01em;margin-top:2px}
.tienda .estado{font-size:12.5px;color:var(--tinta2);line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.tienda .estado.ok{color:var(--verde);font-weight:600}
.tienda .estado.rojo{color:var(--rojo,#c62828);font-weight:600}
.tienda .boton{margin-top:auto;padding:9px 12px;font-size:14px;width:100%}
.tienda-form{grid-column:1/-1}
.tienda-form .cabeza{display:flex;align-items:center;gap:10px;padding:12px 16px 4px;font-weight:650}
.tienda-form .cabeza .logo{width:28px;height:28px;border-radius:8px;overflow:hidden}
.tienda-form .cabeza .logo svg{width:100%;height:100%;display:block}
.tienda-form .cabeza .logo img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.tienda-form .cabeza .logo img.contiene{object-fit:contain;padding:3px;box-sizing:border-box}
.tienda-form .acciones{display:flex;gap:10px;padding:10px 16px 14px}
.tienda-form .acciones .boton{flex:1}
/* ── Colores predeterminados de la marca ──────────────────────────── */
.colores{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0 2px}
.colores button{
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(128,128,136,.35);padding:0;cursor:pointer;
  box-shadow:0 0 0 2px var(--superficie),0 2px 6px rgba(0,0,0,.2);
  transition:transform .15s var(--resorte),box-shadow .15s var(--resorte);
}
.colores button:hover{transform:scale(1.08)}
.colores button.on{box-shadow:0 0 0 2px var(--superficie),0 0 0 4px var(--tinta)}
.colores button:disabled{cursor:default;opacity:.6}
/* ── Llamadas atendidas: fichas oscuras a la maqueta del dueño ────── */
.llamadas{display:grid;gap:14px}
.llamada{
  position:relative;overflow:hidden;border-radius:26px;padding:18px 18px 16px;color:#fff;
  background:linear-gradient(180deg,#141519 0%,#0b0b0d 100%);
  border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.llamada::before{
  content:'';position:absolute;left:0;right:0;top:-40px;height:170px;pointer-events:none;
  background:radial-gradient(55% 90% at 50% 0%,rgba(140,215,255,.26),transparent 70%);
}
.llamada.perdida::before{background:radial-gradient(55% 90% at 50% 0%,rgba(255,255,255,.12),transparent 70%)}
.llamada>*{position:relative}
.ll-cima{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ll-insignia{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#1a1200;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#d1a12a 50%,#6e4d05);
  box-shadow:0 0 0 3px rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.45);
}
.ll-insignia.gris{background:radial-gradient(circle at 35% 30%,#ebebef,#9a9aa3 50%,#4a4a52);color:#111}
.ll-cima .crece{min-width:0}
.ll-cima b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-cima span{font-size:13px;color:rgba(255,255,255,.55)}
.ll-monto{text-align:center;padding:24px 0 2px;font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ll-monto small{font-size:20px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:0}
.ll-sub{text-align:center;color:rgba(255,255,255,.5);font-size:14px;margin:8px 0 18px}
.ll-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.55);padding:8px 0}
.ll-fila b{color:#fff;font-weight:600;text-align:right}
.ll-resumen{font-size:14px;line-height:1.45;color:rgba(255,255,255,.75);padding:10px 0 2px}
.ll-resumen[hidden]{display:none}
.ll-boton{
  display:block;width:100%;text-align:center;margin-top:12px;padding:14px;border-radius:999px;border:0;
  font:inherit;font-size:16px;font-weight:650;letter-spacing:-.01em;color:#06240f;cursor:pointer;
  background:linear-gradient(90deg,#4fe3c1 0%,#37f07a 55%,#a8ff5e 100%);
  box-shadow:0 12px 30px rgba(55,240,122,.28),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s ease;
}
.ll-boton:active{transform:scale(.98)}
@media (min-width:900px){.llamadas{grid-template-columns:1fr 1fr}}
/* El saludo del Inicio: avatar, "Hola, Nombre!" y la campana con su globo. */
.saludo-fila{display:flex;align-items:center;gap:12px}
.avatar-perfil{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c7aff,#5e5ce6);color:#fff;
  font-size:18px;font-weight:700;box-shadow:0 4px 12px rgba(94,92,230,.35);
}
.saludo-texto{flex:1;min-width:0}
.saludo-fila h1{margin:0;font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.saludo-fila h1 .signo{color:var(--tinte)}
.saludo-fila p{margin:1px 0 0;color:var(--tinta2);font-size:13.5px}
.campana{
  position:relative;width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--superficie);box-shadow:var(--sombra);color:var(--tinta);
}
.campana .globo{
  position:absolute;top:-2px;right:-2px;background:#ff3b30;color:#fff;
  font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--fondo);
}
.delta{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600}
.delta.arriba{background:rgba(27,138,95,.45)}
.delta.abajo{background:rgba(255,255,255,.14)}
/* Accesos rápidos bajo la tarjeta, como una app de banco. */
.accesos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.accesos a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  background:var(--superficie);border-radius:22px;padding:16px 6px 12px;box-shadow:var(--sombra);
  color:var(--tinta);font-size:12.5px;font-weight:550;text-align:center;
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.accesos a.presionado{transform:scale(.96)}
.accesos a .ic{width:22px;height:22px}
/* Movimientos: la lista de una app de banco, con separadores por día. */
.dia-sep{display:flex;align-items:center;gap:10px;margin:14px 4px 8px;
  font-size:12.5px;font-weight:550;color:var(--tinta2)}
.dia-sep::after{content:'';flex:1;height:1px;background:var(--separador,rgba(128,128,128,.25))}
.mov{display:flex;align-items:center;gap:12px;padding:11px 4px}
.mov .avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:650;font-size:16px;color:#fff}
.mov .quien{flex:1;min-width:0}
.mov .quien b{display:block;font-weight:560;font-size:15.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mov .quien span{font-size:13px;color:var(--tinta2)}
.mov .monto{font-weight:650;font-variant-numeric:tabular-nums;font-size:15.5px;white-space:nowrap}
.mov .monto.neg{color:#e5484d}
.mov .monto.pos{color:var(--tinta)}
/* Mini-mosaicos oscuros, estilo "Spending". */
.mini-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{border-radius:22px;padding:16px;background:linear-gradient(150deg,#1c1d21,#101114);
  color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.mini .etq{font-size:13px;font-weight:550;color:rgba(255,255,255,.55)}
.mini .num{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px;
  font-variant-numeric:tabular-nums}
.mini .pastas{display:flex;gap:5px;margin-top:12px}
.mini .pastas i{height:10px;border-radius:99px;display:block}
.kpi.destacada .etq{color:color-mix(in srgb,var(--fondo) 65%,transparent)}
.kpi.destacada .num{font-size:44px}
@media (prefers-color-scheme:dark){
  .kpi.destacada{background:var(--superficie2);color:var(--tinta)}
  .kpi.destacada .etq{color:var(--tinta2)}
}

/* ── Gráfica ──────────────────────────────────────────────────────── */
.grafica{width:100%;height:132px;display:block;overflow:visible}
.grafica .linea{fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.grafica .punto{fill:var(--superficie);stroke:var(--tinta);stroke-width:2.2}
.grafica .pico{fill:var(--tinta)}
.dias{display:flex;justify-content:space-between;margin-top:8px}
/* ── Tarjeta de ventas de 7 días (maqueta 3): oscura, monto grande,
   línea blanca con brillo y globo en el pico ─────────────────────── */
.ventas7{
  position:relative;overflow:hidden;border-radius:26px;padding:18px 18px 12px;color:#fff;
  background:linear-gradient(160deg,#17181c 0%,#0b0b0d 60%,#000 100%);
  border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.ventas7::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px)}
.ventas7>*{position:relative;z-index:1}
.v7-cima{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.v7-tile{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff}
.v7-tile .ic{width:20px;height:20px}
.v7-cima b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em}
.v7-cima span{font-size:13px;color:rgba(255,255,255,.55)}
.v7-num{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.v7-num small,.v7-num .cent{font-size:16px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:0}
.v7-delta{display:inline-flex;align-items:center;gap:6px;margin:8px 0 6px;font-size:14px;font-weight:600;color:#4ade80}
.v7-delta.plano{color:rgba(255,255,255,.5)}
.ventas7 .grafica{height:120px;color:#fff}
.ventas7 .grafica .linea{stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.ventas7 .grafica .punto{display:none}
.ventas7 .grafica .pico{fill:#fff}
.ventas7 .globo-pico{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.14)}
.ventas7 .dias span{color:rgba(255,255,255,.45)}
/* ── "Necesita tu ojo" (maqueta 1): tarjeta de cristal con ficha cuadrada,
   título, texto, insignia y botones redondos + píldora ────────────── */
.ojos{display:grid;gap:12px}
.ojo{
  position:relative;border-radius:26px;padding:16px;
  background:color-mix(in srgb,var(--superficie) 78%,transparent);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid color-mix(in srgb,var(--tinta) 8%,transparent);box-shadow:var(--sombra);
  display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;gap:10px 14px;
}
.ojo-tile{
  grid-row:1/3;width:76px;height:76px;border-radius:20px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px rgba(0,0,0,.18);
}
.ojo-tile .ic{width:30px;height:30px}
.ojo-tile.verde{background:linear-gradient(135deg,#34c759,#1f8f45)}
.ojo-tile.ambar{background:linear-gradient(135deg,#ffb340,#e07f00)}
.ojo-tile.rojo{background:linear-gradient(135deg,#ff6259,#c9231b)}
.ojo-tile.gris{background:linear-gradient(135deg,#a6a6ad,#6b6b73)}
.ojo-cuerpo{min-width:0;padding-right:34px}
.ojo-cuerpo b{display:block;font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.2}
.ojo-cuerpo .sub{display:block;font-size:14px;color:var(--tinta2);margin-top:2px}
.ojo-cuerpo p{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--tinta2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ojo-insignia{
  position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--superficie) 80%,transparent);
}
.ojo-insignia.verde{background:#34c759}.ojo-insignia.ambar{background:#ff9f0a}
.ojo-insignia.rojo{background:#ff3b30}.ojo-insignia.gris{background:#8e8e93}
.ojo-pie{grid-column:1/3;display:flex;align-items:center;gap:8px;margin-top:2px}
.ojo-pie .redondo{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--tinta) 8%,transparent);color:var(--tinta);
}
.ojo-pie .redondo .ic{width:18px;height:18px}
.ojo-accion{
  margin-left:auto;padding:11px 18px;border-radius:999px;font-size:15px;font-weight:650;letter-spacing:-.01em;
  background:linear-gradient(90deg,#48d7ea,#7fe9f7);color:#06343b;box-shadow:0 8px 20px rgba(72,215,234,.3);
  transition:transform .12s ease;
}
.ojo-accion:active{transform:scale(.97)}
/* ── El escáner (hoja emergente con la cámara) ────────────────────── */
.escaner{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center}
.escaner[hidden]{display:none}
.esc-cuerpo{width:100%;max-width:520px;background:#0b0b0d;color:#fff;border-radius:26px 26px 0 0;padding:14px 16px calc(16px + var(--seguro-b))}
@media (min-width:900px){.escaner{align-items:center}.esc-cuerpo{border-radius:26px}}
.esc-cima{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.esc-cima b{font-size:17px;font-weight:650}
.esc-cerrar{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer}
.esc-vista{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#000}
.esc-vista video{width:100%;height:100%;object-fit:cover;display:block}
.esc-marco{position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:2px solid rgba(255,255,255,.85);border-radius:12px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.25);pointer-events:none}
.esc-marco::after{content:'';position:absolute;left:6%;right:6%;top:50%;height:2px;background:rgba(255,80,80,.9);
  box-shadow:0 0 8px rgba(255,80,80,.8);animation:esc-linea 1.6s ease-in-out infinite alternate}
@keyframes esc-linea{from{transform:translateY(-22px)}to{transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.esc-marco::after{animation:none}}
.esc-nota{margin:12px 2px 0;font-size:14px;color:rgba(255,255,255,.65);text-align:center}
.esc-pie{margin-top:12px}
.esc-pie .boton{color:#fff;background:rgba(255,255,255,.12);box-shadow:none;cursor:pointer}
body.con-escaner{overflow:hidden}
.boton-escanear{display:inline-flex;align-items:center;gap:8px;width:auto;min-height:36px;padding:7px 12px;font-size:14px;border-radius:10px;flex:0 0 auto}
.boton-escanear .ic{width:18px;height:18px}
.campo.con-boton{display:flex;align-items:flex-end;gap:10px}
.campo.con-boton>div{flex:1 1 auto;min-width:0}
.campo.con-boton .boton{width:auto;flex:0 0 auto;min-height:36px;padding:7px 12px;font-size:14px;border-radius:10px;margin:0 0 2px}
.campo.con-boton .boton .ic{width:18px;height:18px}
/* ── Etiquetas para imprimir ──────────────────────────────────────── */
.etiquetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.etiqueta-cb{background:#fff;color:#000;border:1px dashed #bbb;border-radius:10px;padding:10px;text-align:center;break-inside:avoid}
.etiqueta-cb b{display:block;font-size:13px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etiqueta-cb svg{width:100%;height:auto}
.etiqueta-cb span{display:block;font-size:12px;color:#444}
@media print{
  body{background:#fff !important;padding:0 !important;display:block !important}
  .lateral,nav,.barra,.titulo-grande,.no-imprimir,#sinRed{display:none !important}
  main{max-width:none !important;padding:8mm !important}
  .etiquetas{grid-template-columns:repeat(3,1fr);gap:6mm}
  .etiqueta-cb{border:1px solid #ddd}
}
/* ── Mostrador ────────────────────────────────────────────────────── */
.mostrador-vacio{padding:26px 8px}
.medidas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.medidas label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--tinta2)}
.medidas input{width:100%;min-width:0;background:var(--superficie2);border:0;border-radius:10px;padding:8px;font:inherit;font-size:15px;color:var(--tinta);outline:none}
.opcion-envio{display:flex;justify-content:space-between;gap:10px}
.opcion-envio.elegida{font-weight:650}
.carrito .item .cant{display:inline-flex;align-items:center;gap:6px}
.carrito .item .cant button{width:30px;height:30px;border-radius:50%;border:0;background:color-mix(in srgb,var(--tinta) 8%,transparent);color:var(--tinta);font-size:18px;line-height:1;cursor:pointer}
.carrito .item .cant b{min-width:22px;text-align:center}
.mostrador-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:18px;font-weight:700}
/* La versión compacta del Inicio: una línea por aviso, sin texto largo. */
.ojo.compacta{grid-template-columns:50px 1fr auto;grid-template-rows:auto;align-items:center;gap:12px;padding:12px 14px;border-radius:20px}
.ojo.compacta .ojo-tile{grid-row:auto;width:50px;height:50px;border-radius:15px}
.ojo.compacta .ojo-tile .ic{width:22px;height:22px}
.ojo.compacta .ojo-cuerpo{padding-right:0}
.ojo.compacta .ojo-cuerpo b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ojo.compacta .ojo-cuerpo .sub{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ojo.compacta .ojo-cuerpo p{display:none}
.ojo.compacta .ojo-insignia{display:none}
.ojo.compacta .ojo-accion{margin:0;padding:9px 14px;font-size:14px}
.ver-mas{
  display:flex;align-items:center;justify-content:center;gap:6px;margin:4px auto 0;width:max-content;
  padding:9px 16px 9px 18px;border-radius:999px;background:var(--superficie);box-shadow:var(--sombra);
  color:var(--tinta);font-size:14px;font-weight:600;
}
.ver-mas .ic{width:14px;height:14px}
/* Filtros de Cotizaciones en fila, como etiquetas redondas. */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 6px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;
  border:1.5px solid color-mix(in srgb,var(--tinta) 14%,transparent);color:var(--tinta);background:var(--superficie);
}
.chip.on{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
@media (min-width:900px){.chips{margin:0;padding:2px 0 6px}}
/* ── Cotizaciones (maqueta 2): ficha oscura de documento con barra de
   vigencia ────────────────────────────────────────────────────────── */
.docs{display:grid;gap:12px}
.doc{
  position:relative;overflow:hidden;border-radius:22px;padding:14px;color:#fff;
  background:linear-gradient(160deg,#1a1830 0%,#0d0d14 55%,#08080b 100%);
  border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.doc::before{content:'';position:absolute;left:-30%;right:-30%;bottom:-70%;height:120%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(96,72,255,.42),transparent 70%)}
.doc.convertida::before{background:radial-gradient(50% 60% at 50% 100%,rgba(52,199,89,.35),transparent 70%)}
.doc.vencida::before{background:radial-gradient(50% 60% at 50% 100%,rgba(255,255,255,.08),transparent 70%)}
.doc.devuelta::before{background:radial-gradient(50% 60% at 50% 100%,rgba(255,59,48,.3),transparent 70%)}
.doc>*{position:relative;z-index:1}
.doc-cima{display:flex;align-items:center;gap:14px}
.doc-icono{position:relative;display:block;width:46px;height:56px;flex:0 0 auto;margin-left:6px}
.doc-icono .doc-hoja{
  position:absolute;inset:0;border-radius:8px 16px 8px 8px;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.doc-icono .doc-hoja::after{content:'';position:absolute;top:0;right:0;width:16px;height:16px;
  border-radius:0 16px 0 6px;background:rgba(255,255,255,.22)}
.doc-icono .tipo{
  position:absolute;left:-8px;bottom:6px;padding:3px 7px;border-radius:7px;
  background:#1c1c22;border:1px solid rgba(255,255,255,.2);font-size:10px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}
.doc-titulo{min-width:0;flex:1}
.doc-titulo b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-titulo span{display:block;font-size:13.5px;color:rgba(255,255,255,.6);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-titulo .quien{font-size:12.5px;color:rgba(255,255,255,.45)}
.doc-barra{margin-top:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.doc-barra .fila{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;margin-bottom:6px}
.doc-barra .fila span:last-child{font-variant-numeric:tabular-nums}
.doc-barra .pista{height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.doc-barra .pista i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#dcd9ff,#fff);box-shadow:0 0 10px rgba(255,255,255,.6)}
.doc.convertida .pista i{background:linear-gradient(90deg,#7fe7a0,#c8ffd6)}
.doc.vencida .pista i,.doc.devuelta .pista i{background:rgba(255,255,255,.35);box-shadow:none}
.doc-acciones{display:flex;gap:8px;margin-top:10px}
.doc .doc-acciones .boton{width:auto;flex:1;min-height:32px;padding:6px 10px;font-size:13px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.12)}
/* ── "A un toque" plegable: limpia el Inicio ─────────────────────── */
.plegable{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plegable h2{margin:0 0 0 16px;font-size:13px;font-weight:590;letter-spacing:.01em;text-transform:uppercase;color:var(--tinta2)}
.plegable button{
  display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:8px 12px 8px 14px;
  background:var(--superficie);box-shadow:var(--sombra);color:var(--tinta);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.plegable button .ic{width:14px;height:14px;transform:rotate(90deg);transition:transform .3s var(--resorte)}
html.accesos-abiertos .plegable button .ic{transform:rotate(-90deg)}
#accesos{display:none}
html.accesos-abiertos #accesos{display:grid}
.dias span{font-size:12px;color:var(--tinta2);flex:1;text-align:center;letter-spacing:.02em}

/* ── Botones ──────────────────────────────────────────────────────── */
.boton{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:50px;padding:14px 18px;border:0;border-radius:14px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  background:var(--tinte);color:#fff;cursor:pointer;user-select:none;
}
.boton.alto{min-height:58px;font-size:19px;border-radius:16px}
.boton.tinta{background:var(--tinta);color:var(--fondo)}
.boton.verde{background:var(--verde-vivo);color:#fff}
.boton.rojo{background:var(--rojo);color:#fff}
.boton.suave{background:color-mix(in srgb,var(--tinte) 12%,transparent);color:var(--tinte)}
.boton.gris{background:var(--superficie2);color:var(--tinta);box-shadow:var(--sombra)}
.boton[disabled]{opacity:.5}
.boton+.boton{margin-top:10px}
.boton.marca{background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra);
  border:.5px solid var(--separador)}
.boton.marca.apple{background:#000;color:#fff;border-color:#000}
@media (prefers-color-scheme:dark){
  /* En oscuro un botón negro desaparece contra el fondo negro: Apple invierte
     el suyo a blanco. Aquí lo mismo, o el botón deja de existir. */
  .boton.marca.apple{background:#fff;color:#000;border-color:#fff}
}
.boton.marca svg{width:20px;height:20px;flex:0 0 auto}
/* Separador "o": la línea llega hasta el texto, no lo cruza. */
/* "o" es una palabra, no un símbolo: en versalitas y con tracking se lee como
   un anillo suelto. Va en minúscula y sin apretar. */
.oes{display:flex;align-items:center;gap:14px;margin:20px 2px;
  color:var(--tinta2);font-size:14px;letter-spacing:0}
.oes::before,.oes::after{content:"";flex:1;height:.5px;background:var(--separador)}
/* El aviso de "todavía no": aparece bajo el botón que se tocó, no en un alert
   que tapa la pantalla y hay que quitar. */
.pronto{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .4s var(--resorte),opacity .3s var(--resorte),margin .4s var(--resorte)}
.pronto.se-ve{max-height:60px;opacity:1;margin-top:10px}
.pronto span{display:block;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--tinte) 10%,transparent);color:var(--tinte);
  font-size:14px;line-height:1.35;text-align:center}
.par{display:flex;gap:10px}.par>*{flex:1}
.par .boton+.boton{margin-top:0} /* en fila no se apilan: se alinean */
/* El hundido va en pointerdown, no al soltar. */
.presionado{transform:scale(.97);transition:transform .1s ease-out}
.boton,.item,nav a{transition:transform .28s var(--resorte)}

/* ── Burbujas ─────────────────────────────────────────────────────── */
.hilo{padding:4px 0 12px}
.burbuja{
  max-width:80%;padding:9px 14px;border-radius:20px;margin-bottom:6px;
  white-space:pre-wrap;word-break:break-word;font-size:16px;line-height:1.35;
  box-shadow:0 1px 1px rgba(0,0,0,.04)
}
.b-cliente{background:var(--superficie);border-bottom-left-radius:6px}
.b-nosotros{background:var(--verde-vivo);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.b-nosotros .sello{color:rgba(255,255,255,.75)}
.sello{display:block;font-size:11px;color:var(--tinta2);margin-top:3px;letter-spacing:.01em}
.b-sistema{
  background:none;box-shadow:none;color:var(--tinta2);font-size:13px;text-align:center;
  max-width:100%;margin:10px auto
}
.escribir{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:8px;align-items:flex-end;
  padding:8px 12px calc(8px + var(--seguro-b));
  background:var(--barra);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--separador)
}
.escribir textarea{
  flex:1;border:.5px solid var(--separador);background:var(--superficie);
  border-radius:20px;padding:10px 15px;resize:none;max-height:120px;font-size:17px
}
.escribir button{
  border:0;background:var(--verde-vivo);color:#fff;border-radius:50%;
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;margin-bottom:2px
}
/* Con el asistente contestando, la barra de abajo no escribe: ofrece la
   acción de quitársela, con su nombre completo (no un letrero de estado). */
.escribir.tomar-barra{align-items:center}
.tomar-barra .pregunta{flex:1;min-width:0;font-size:15px;line-height:1.3;color:var(--tinta2)}
.escribir .tomar-yo{
  width:auto;height:auto;min-height:44px;border-radius:14px;padding:10px 16px;margin:0;
  display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600;white-space:nowrap;
  background:var(--superficie2);color:var(--tinta);border:.5px solid var(--separador)
}

/* ── Pestañas ─────────────────────────────────────────────────────── */
/* El dock flotante (maquetas del dueño): píldora despegada de los bordes,
   solo iconos, y el activo en círculo invertido. Los nombres siguen ahí
   para el lector de pantalla — ocultos a la vista, no al oído. */
nav{
  position:fixed;bottom:calc(10px + var(--seguro-b));left:14px;right:14px;z-index:30;
  display:flex;align-items:center;justify-content:space-around;
  height:64px;padding:0 6px;border-radius:999px;
  background:var(--barra);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border:.5px solid var(--separador);
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.08);
}
nav a{
  display:flex;align-items:center;justify-content:center;
  color:var(--tinta2);position:relative;user-select:none;
  width:52px;height:52px;border-radius:50%;
  transition:background .2s var(--resorte),color .2s var(--resorte),transform .12s ease;
}
nav a:active{transform:scale(.92)}
nav a span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;clip-path:inset(50%);
}
nav a.on{background:var(--tinta);color:var(--fondo)}
nav .globo{
  position:absolute;top:2px;right:2px;background:#ff3b30;color:#fff;
  font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--fondo)
}

/* ── Avisos ───────────────────────────────────────────────────────── */
.aviso{border-radius:var(--radio);padding:13px 15px;font-size:15px;line-height:1.4;margin-bottom:12px}
.aviso.rojo{background:var(--rojo-suave);color:var(--rojo)}
.aviso.ambar{background:var(--ambar-suave);color:var(--ambar)}
.aviso.verde{background:var(--verde-suave);color:var(--verde)}
.aviso strong{font-weight:650}
.etiqueta{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:20px;letter-spacing:.01em;white-space:nowrap
}
.et-verde{background:var(--verde-suave);color:var(--verde)}
.et-ambar{background:var(--ambar-suave);color:var(--ambar)}
.et-roja{background:var(--rojo-suave);color:var(--rojo)}
.et-gris{background:color-mix(in srgb,var(--tinta) 8%,transparent);color:var(--tinta2)}

/* ── Formularios ──────────────────────────────────────────────────── */
.campo{padding:10px 16px;position:relative}
.campo+.campo::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--separador)}
.campo label{display:block;font-size:13px;color:var(--tinta2);margin-bottom:3px}
.campo input{
  width:100%;border:0;background:none;padding:0;font-size:17px;outline:none;
  font-variant-numeric:tabular-nums
}
.campo input[disabled]{color:var(--tinta2)}
/* Ficha del negocio: textos largos en el mismo molde que los inputs. */
.campo textarea{
  width:100%;border:0;background:none;padding:0;font-size:17px;line-height:1.4;outline:none;
  resize:vertical;min-height:72px;display:block;color:inherit
}
.campo textarea[disabled]{color:var(--tinta2)}
.campo .ayuda{display:block;font-size:13px;color:var(--tinta2);margin:6px 0 0;line-height:1.35}
.campo .cuenta{position:absolute;right:16px;top:10px;font-size:12px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.campo .cuenta.lleno{color:var(--rojo)}
.codigo input{
  font-size:32px;letter-spacing:.34em;text-align:center;font-weight:600;padding:8px 0
}
.vacio{text-align:center;color:var(--tinta2);padding:56px 24px;font-size:16px;line-height:1.5}
.vacio .ic{color:var(--tinta3);margin-bottom:12px}

.cargando{
  position:fixed;top:0;left:0;right:0;height:2.5px;background:var(--tinte);z-index:99;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--resorte),opacity .3s
}
.cargando.on{transform:scaleX(.9)}
#sinRed{
  display:none;position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--ambar);color:#fff;text-align:center;padding:6px;font-size:13px;font-weight:500
}
body.offline #sinRed{display:block}

/* ── Escritorio: deja de ser una app y se vuelve un tablero ───────── */
.lateral{display:none}
@media (min-width:900px){
  body{padding-bottom:0;display:grid;grid-template-columns:268px 1fr;min-height:100vh}
  nav{display:none}
  /* La barra lateral a la maqueta del dueño: tarjeta flotante redondeada,
     iconos en círculo, y el activo como PÍLDORA BLANCA con texto oscuro. */
  .lateral{
    display:flex;flex-direction:column;gap:5px;color:#fff;
    margin:14px 0 14px 14px;padding:20px 12px;border-radius:26px;
    position:sticky;top:14px;height:calc(100vh - 28px);
    background:linear-gradient(180deg,#17171a 0%,#0b0b0d 100%);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 14px 40px rgba(0,0,0,.25);
    overflow-y:auto;scrollbar-width:none;
  }
  .lateral::-webkit-scrollbar{display:none}
  .lateral .marca{
    display:flex;align-items:center;gap:10px;padding:4px 8px 20px;font-size:17px;font-weight:700;letter-spacing:-.02em
  }
  .lateral .marca i{
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#7c7aff,#5e5ce6);color:#fff;
    font-style:normal;font-weight:800
  }
  .lateral a{
    display:flex;align-items:center;gap:12px;padding:7px 14px 7px 7px;border-radius:999px;
    color:rgba(255,255,255,.66);font-size:14.5px;font-weight:550;
    transition:background .18s var(--resorte),color .18s var(--resorte);
  }
  .lateral a .ic{
    width:34px;height:34px;padding:7px;box-sizing:border-box;flex:0 0 auto;
    border-radius:50%;background:rgba(255,255,255,.08);
    transition:background .18s var(--resorte);
  }
  .lateral a.on{background:#fff;color:#101013;font-weight:650;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .lateral a.on .ic{background:rgba(0,0,0,.07)}
  .lateral a:hover:not(.on){background:rgba(255,255,255,.07);color:#fff}
  .lateral .globo{margin-left:auto;background:#ff3b30;color:#fff;font-size:11px;font-weight:600;
    min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 6px}
  .lateral .abajo{margin-top:auto}
  /* Plegar/desplegar (maqueta del dueño): un botón redondo en la esquina de
     la marca; plegada, la barra se queda solo con los iconos y el activo en
     círculo blanco. La elección se recuerda en este navegador. */
  .lateral .marca{position:relative}
  .lateral .plegar{
    position:absolute;right:0;top:7px;width:26px;height:26px;border-radius:50%;border:0;padding:0;
    background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;
    transition:background .18s var(--resorte);
  }
  .lateral .plegar:hover{background:rgba(255,255,255,.22)}
  .lateral .plegar .ic{width:14px;height:14px;transform:rotate(180deg);transition:transform .3s var(--resorte)}
  .lateral a{position:relative}
  body{transition:grid-template-columns .3s var(--resorte)}
  html.plegada body{grid-template-columns:96px 1fr}
  html.plegada .lateral{padding:20px 10px}
  html.plegada .lateral .marca{justify-content:center;padding:4px 0 54px}
  html.plegada .lateral .marca span,html.plegada .lateral a span{display:none}
  html.plegada .lateral .plegar{right:auto;left:50%;margin-left:-13px;top:48px}
  html.plegada .lateral .plegar .ic{transform:none}
  html.plegada .lateral a{justify-content:center;padding:7px;gap:0}
  html.plegada .lateral a .ic{width:38px;height:38px;padding:9px}
  html.plegada .lateral a.on{background:none;box-shadow:none}
  html.plegada .lateral a.on .ic{background:#fff;color:#101013;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  html.plegada .lateral .globo{
    position:absolute;top:4px;right:6px;margin:0;padding:0;font-size:0;
    min-width:9px;width:9px;height:9px;border-radius:5px;box-shadow:0 0 0 2px #0f0f11;
  }
  .barra{background:none;backdrop-filter:none;border:0;padding:26px 32px 0;position:static}
  /* En escritorio el título grande hace el trabajo… salvo en la conversación,
     que no lo tiene: ahí el nombre y el "volver" son la única orientación. */
  .barra:not(.siempre) .titulo-chico,.barra:not(.siempre) .izq{display:none}
  .barra.siempre{max-width:760px;margin:0 auto;width:100%;padding:26px 32px 6px}
  .barra.siempre .titulo-chico{text-align:left;font-size:22px;font-weight:700;letter-spacing:-.02em}
  .titulo-grande{padding:10px 32px 22px;max-width:1180px;margin:0 auto;width:100%}
  .titulo-grande h1{font-size:38px}
  .saludo-fila h1{font-size:30px}
  .saludo-fila .avatar-perfil{width:52px;height:52px;font-size:21px}
  .saludo-fila .campana{width:48px;height:48px}
  /* Por defecto, UNA columna legible: estirar una lista a 1400 px no ayuda a
     nadie. Solo el inicio, que tiene números y gráfica, se abre a dos. */
  main{max-width:760px;padding:0 32px 48px;display:grid;grid-template-columns:1fr;
       gap:22px;align-items:start}
  /* Un hijo de rejilla mide por defecto su contenido (min-width:auto): un
     grupo con textos largos estiraba la columna a 1500 px. Aquí manda main. */
  main>*{min-width:0}
  body.tablero main{max-width:1180px;grid-template-columns:1.35fr 1fr}
  main>.ancho{grid-column:1/-1}

  /* Pantallas sin barra lateral (entrar, código): nada de rejilla de 248 px,
     que dejaba el contenido apretado en la columna del menú que no existe. */
  body.sola{display:block}
  /* En la laptop, la pantalla de entrar respira: sin barra (no hay a dónde
     volver) y con el bloque a la altura de la vista, no pegado al techo. */
  body.sola .barra{max-width:460px;margin:0 auto;padding:9vh 16px 0;
                   background:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:0}
  body.sola .titulo-grande{max-width:460px;padding:10px 16px 22px}
  body.sola main{max-width:460px;padding:0 16px 48px}
  .mosaico{grid-template-columns:repeat(4,1fr)}
  .kpi.destacada{grid-column:span 2}
  body:not(.tablero) .mosaico{grid-template-columns:repeat(3,1fr)}
  body:not(.tablero) .kpi.destacada{grid-column:span 1}
  .grafica{height:200px}
  .escribir{position:sticky;bottom:0;left:auto;right:auto;background:var(--barra);
            border-radius:var(--radio-g) var(--radio-g) 0 0;padding:10px 12px}
  .hilo{max-height:none}
}
@media (min-width:900px) and (max-width:1100px){ main{grid-template-columns:1fr} }

/* ══ Calendario del dueño (encargo de reservas) ═══════════════════════
   La tarjeta limpia de la maqueta: numerales grandes, chevrones en
   círculo, y debajo de cada día una BARRA de ocupación — el color dice el
   estado, el largo dice qué tan lleno. El detalle sube como hoja de media
   pantalla, alcanzable con el pulgar. */
.cal-franja{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.cal-franja::-webkit-scrollbar{display:none}
.cal-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:var(--superficie);border-radius:999px;padding:7px 14px;
  font-size:14px;font-weight:590;letter-spacing:-.01em;box-shadow:var(--sombra);
  border:none;cursor:pointer;
}
.cal-chip b{font-weight:700}
.cal-chip .etq2{color:var(--tinta2);font-weight:510}
.cal-chip.aviso{background:var(--ambar-suave);color:var(--ambar)}
.cal-chip.accion{color:var(--tinte)}
/* El chip de HOY invertido: el mismo negro de la tarjeta, para amarrar. */
.cal-chip.hoy{background:#101013;color:#fff}
.cal-chip.hoy .etq2{color:rgba(235,235,245,.55)}
.cal-encabezado{margin:0 0 12px}
.cal-selector{
  display:flex;align-items:center;gap:10px;margin:0 0 10px;
  background:var(--superficie);border-radius:999px;padding:8px 16px 8px 8px;
  box-shadow:var(--sombra);
}
.cal-selector .serv-ico{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c7aff,#5e5ce6);color:#fff;
}
.cal-selector select{
  flex:1;appearance:none;-webkit-appearance:none;background:none;border:none;
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--tinta);padding:4px 0;
}
.cal-selector.solo b{font-size:16px;font-weight:600;letter-spacing:-.01em}
/* La tarjeta del mes es SIEMPRE oscura — flota sobre la página clara (y en
   modo oscuro se eleva medio tono). El contraste hace que las barras de
   ocupación brillen: verde/ámbar/rojo sobre negro, como un tablero. */
.cal-tarjeta{
  background:#101013;border-radius:26px;
  box-shadow:0 2px 6px rgba(0,0,0,.10),0 18px 44px rgba(0,0,0,.22);
  padding:20px 14px 16px;color:#f2f2f7;
}
@media (prefers-color-scheme:dark){
  .cal-tarjeta{background:#17171a;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 36px rgba(0,0,0,.6)}
}
.cal-cabeza{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.cal-cabeza h2{
  margin:0;font-size:20px;font-weight:650;letter-spacing:-.015em;color:#fff;
  transition:opacity .22s var(--resorte),transform .22s var(--resorte);
}
.cal-cabeza h2.saliendo{opacity:0;transform:translateX(var(--dir,10px))}
.cal-nav{
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:#232327;color:#f2f2f7;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,background .15s ease;
}
.cal-nav:active{transform:scale(.9);background:#2e2e33}
.cal-semana,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-semana span{
  text-align:center;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(235,235,245,.35);padding:6px 0 10px;
}
.cal-grid button{
  position:relative;background:none;border:none;cursor:pointer;
  min-height:58px;padding:5px 0 8px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#f2f2f7;transition:background .15s ease;
}
.cal-grid button:active{background:#1d1d21}
.cal-grid .num{
  font-size:17px;font-weight:510;letter-spacing:-.01em;line-height:1;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .18s var(--resorte),color .18s var(--resorte);
}
.cal-grid .hoy .num{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);font-weight:650}
/* El día elegido: índigo con brillo, como la maqueta de PC del dueño. */
.cal-grid .sel .num{
  background:linear-gradient(135deg,#7c7aff,#5e5ce6);color:#fff;font-weight:700;
  box-shadow:0 0 0 4px rgba(94,92,230,.22),0 6px 18px rgba(94,92,230,.55);
}
.cal-grid .fuera{visibility:hidden}
.cal-grid .cerrado{color:rgba(235,235,245,.28)}
.cal-grid .cerrado .num{text-decoration:line-through;text-decoration-thickness:1.5px}
.cal-barra{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden}
.cal-barra i{display:block;height:100%;border-radius:2px}
.cal-barra .ok{background:#30d158}
.cal-barra .pc{background:#ff9f0a}
.cal-barra .lleno{background:#ff453a}
/* El conteo bajo la barra (la maqueta del dueño): cuántos ese día, de un
   vistazo. Vacío cuando no hay nada — el silencio también informa. */
.cal-grid .cnt{
  font-size:10px;line-height:1;min-height:10px;font-weight:590;
  font-variant-numeric:tabular-nums;color:rgba(235,235,245,.45);
}
.cal-grid .sel .cnt{color:rgba(235,235,245,.75)}
.cal-leyenda{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-top:12px;padding:14px 6px 2px;border-top:1px solid rgba(255,255,255,.08);
}
.cal-leyenda span{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:560;color:rgba(235,235,245,.55)}
.cal-leyenda i.punto{width:9px;height:9px;border-radius:50%;display:inline-block}

/* ── La hoja inferior: media pantalla, con asa, al alcance del pulgar ── */
.velo{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .28s var(--resorte);
}
.velo.on{opacity:1;pointer-events:auto}
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:41;margin:0 auto;max-width:640px;
  background:var(--superficie);border-radius:22px 22px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  max-height:min(82vh,82dvh);min-height:46vh;display:flex;flex-direction:column;
  transform:translateY(104%);transition:transform .32s var(--resorte);
  padding-bottom:calc(10px + var(--seguro-b));
}
.hoja.on{transform:translateY(0)}
.hoja .asa{width:36px;height:5px;border-radius:3px;background:var(--tinta3);margin:9px auto 4px;flex:0 0 auto}
.hoja header{padding:6px 20px 12px;flex:0 0 auto}
.hoja header h3{margin:0;font-size:20px;font-weight:650;letter-spacing:-.015em}
.hoja header p{margin:4px 0 0;color:var(--tinta2);font-size:14px}
.hoja .cuerpo-hoja{overflow-y:auto;padding:0 16px;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.hoja .pie-hoja{flex:0 0 auto;padding:12px 16px 4px;display:flex;gap:10px;flex-direction:column}
/* La fila del resumen: barra gruesa + fracción grande (32/40 se LEE). */
.hoja-barra-fila{display:flex;align-items:center;gap:12px;margin:10px 20px 0}
.hoja-barra-dia{flex:1;height:8px;border-radius:4px;background:color-mix(in srgb,var(--tinta3) 26%,transparent);overflow:hidden}
.hoja-barra-dia i{display:block;height:100%;border-radius:4px;transition:width .4s var(--resorte)}
.hoja-barra-fila b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Cada reserva es una FICHA flotante (la maqueta del dueño): redondita,
   con su insignia de hora en círculo y sus acciones en fila propia — se
   acabó el texto envuelto y la liga colgando. */
.reserva-fila{
  display:block;background:#f2f2f7;border-radius:18px;
  padding:12px 14px;margin:0 0 10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){
  .reserva-fila{background:#28282c;box-shadow:none}
}
.rf-cima{display:flex;align-items:center;gap:12px}
.reserva-fila .hora{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--tinte);background:color-mix(in srgb,var(--tinte) 13%,transparent);
}
.reserva-fila .quien{flex:1;min-width:0}
.reserva-fila .quien b{font-weight:600;font-size:16px;letter-spacing:-.01em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reserva-fila .quien small{color:var(--tinta2);font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reserva-fila .quien small b{display:inline;font-size:13px;font-weight:650;color:var(--tinta)}
.reserva-fila .der2{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.reserva-fila .der2 .monto{font-weight:700;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rf-acciones{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.accion-pill{
  border:none;cursor:pointer;border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:650;letter-spacing:-.005em;text-align:center;
  transition:transform .12s ease;
}
.accion-pill:active{transform:scale(.95)}
.accion-pill.wa{background:var(--verde-vivo);color:#fff}
.accion-pill.roja{background:var(--rojo-suave);color:var(--rojo)}
.et-pago{font-size:11px;font-weight:650;letter-spacing:.02em;border-radius:999px;padding:3px 9px;display:inline-block}
.et-pago.pagado{background:var(--verde-suave);color:var(--verde)}
.et-pago.porconfirmar{background:var(--ambar-suave);color:var(--ambar)}
.et-pago.apartado{background:color-mix(in srgb,var(--tinta3) 22%,transparent);color:var(--tinta2)}
.et-pago.amano{background:color-mix(in srgb,var(--tinte) 12%,transparent);color:var(--tinte)}
/* Nada queda tapado por el pie: la lista respira y el pie desvanece. */
.hoja .cuerpo-hoja{padding-bottom:6px}
.hoja .pie-hoja{position:relative}
.hoja .pie-hoja::before{
  content:'';position:absolute;top:-22px;left:0;right:0;height:22px;pointer-events:none;
  background:linear-gradient(to top,var(--superficie),transparent);
}
.hoja .campo{margin:0 0 12px}
.hoja .campo label{display:block;font-size:13px;font-weight:590;color:var(--tinta2);margin:0 0 5px 2px}
.hoja .campo label small{font-weight:510;color:var(--tinta3)}
.hoja .campo input,.hoja .campo select,.hoja .campo textarea{
  width:100%;background:var(--fondo);border:none;border-radius:12px;
  padding:12px 14px;font-size:16px;color:var(--tinta);
}
.hoja .dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paso-cantidad{display:flex;align-items:center;gap:0;background:var(--fondo);border-radius:12px;width:max-content}
.paso-cantidad button{width:44px;height:44px;border:none;background:none;font-size:22px;color:var(--tinte);cursor:pointer;border-radius:12px}
.paso-cantidad button:active{background:color-mix(in srgb,var(--tinte) 10%,transparent)}
.paso-cantidad output{min-width:44px;text-align:center;font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
.boton-hoja{
  width:100%;border:none;border-radius:14px;padding:15px;font-size:17px;font-weight:600;
  background:var(--tinte);color:#fff;cursor:pointer;transition:transform .12s ease,opacity .15s ease;
}
.boton-hoja:active{transform:scale(.98)}
.boton-hoja:disabled{opacity:.5}
.boton-hoja.secundario{background:var(--fondo);color:var(--tinte)}
.boton-hoja.peligro{background:none;color:var(--rojo);padding:10px}
.boton-hoja svg{vertical-align:-3px;margin-right:4px}
/* "Agregar reservación": el botón punteado de la maqueta. */
.boton-hoja.punteado{
  background:none;color:var(--tinta2);font-weight:560;
  border:1.5px dashed var(--separador);padding:12px;
}
.boton-hoja.punteado:active{background:var(--fondo)}
.regla-fila{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:.5px solid var(--separador);font-size:15px}
.regla-fila:last-child{border-bottom:none}
.regla-fila .crece{flex:1}
.regla-fila .precio-r{font-weight:650;font-variant-numeric:tabular-nums}
.borrar-r{border:none;background:none;color:var(--rojo);font-size:14px;font-weight:590;cursor:pointer;padding:6px}

/* ── Reglas avanzadas: fichas con degradado, columnas en PC, mini-cal ── */
/* El degradado por estado (maqueta del dueño): suave, dirección 135°, con
   un filo de luz arriba — verde pagado, ámbar por confirmar, azul a mano. */
.reserva-fila{border-top:1px solid rgba(255,255,255,.55)}
.reserva-fila.st-pagado{background:linear-gradient(135deg,#eafaf0,#d2f1de)}
.reserva-fila.st-pc{background:linear-gradient(135deg,#fff4e0,#ffe7c2)}
.reserva-fila.st-amano{background:linear-gradient(135deg,#e9f0ff,#d6e4ff)}
.reserva-fila.st-apartado{background:linear-gradient(135deg,#f4f4f7,#e9e9ee)}
@media (prefers-color-scheme:dark){
  .reserva-fila{border-top-color:rgba(255,255,255,.06)}
  .reserva-fila.st-pagado{background:linear-gradient(135deg,#173226,#12241c)}
  .reserva-fila.st-pc{background:linear-gradient(135deg,#3a2c12,#2a200e)}
  .reserva-fila.st-amano{background:linear-gradient(135deg,#182741,#121c30)}
  .reserva-fila.st-apartado{background:linear-gradient(135deg,#2a2a2e,#222226)}
}
/* La insignia ya no es la hora: es un icono (reloj con hora, estrella sin
   ella); la hora se lee en el renglón, en formato de 12 horas. */
.reserva-fila .hora.ico{background:rgba(255,255,255,.75);color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.06)}
@media (prefers-color-scheme:dark){.reserva-fila .hora.ico{background:rgba(255,255,255,.1);color:#f2f2f7;box-shadow:none}}
.reserva-fila .hora.ico svg{width:20px;height:20px}
.pie-acciones{display:flex;gap:8px;justify-content:center}
.pie-acciones .boton-hoja{width:auto;padding:10px 14px}
.cal-nav.chica{width:32px;height:32px}

/* El popup de fecha: NUESTRO calendario, no el del sistema — esquinas
   redondas, mismo lenguaje oscuro de la tarjeta, centrado y por encima. */
.mini-velo{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s var(--resorte)}
.mini-velo.on{opacity:1;pointer-events:auto}
.mini-cal{
  position:fixed;left:50%;top:50%;z-index:61;width:min(340px,92vw);
  transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;
  background:#101013;color:#f2f2f7;border-radius:24px;padding:14px 12px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transition:transform .28s var(--resorte),opacity .22s var(--resorte);
}
.mini-cal.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.mini-cal .cal-cabeza{padding-bottom:4px}
.mc-grid button{min-height:40px;padding:4px 0}
.mc-grid .num{width:30px;height:30px;font-size:15px}
.mc-grid button:disabled{opacity:.28;cursor:default}
/* Bloqueos por hora en el detalle del día. */
.bloqueo-pill{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  background:var(--rojo-suave);color:var(--rojo);border-radius:12px;padding:9px 12px;
  font-size:13px;font-weight:600;
}
.bloqueo-pill .crece{flex:1}
.bloqueo-pill small{font-weight:510;opacity:.8}
.bloqueo-pill button{border:none;background:none;color:inherit;font-weight:650;cursor:pointer;font-size:13px}

@media (min-width:900px){
  /* En PC el calendario usa la PANTALLA, no la columna de lectura: el
   * detalle vive al lado, y las celdas respiran (maqueta del dueño). */
  body.pag-calendario main{max-width:1380px;padding:0 24px}
  /* El panel derecho CEDE (32% con piso de 320px): el calendario manda.
     Con 420px fijos, una ventana de ~1000px lo dejaba en 300px de ancho —
     apachurrado, como lo cazó el dueño. */
  .cal-cols{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,32%,430px);gap:22px;align-items:start}
  .cal-encabezado{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .cal-encabezado .cal-selector{margin:0;flex:0 0 auto;min-width:230px}
  .cal-encabezado .cal-franja{padding:2px 2px;flex:1;min-width:280px}
  .cal-tarjeta{padding:26px 22px 18px}
  .cal-cabeza{padding:0 6px 14px}
  .cal-cabeza h2{font-size:23px}
  .cal-nav{width:44px;height:44px}
  .cal-semana span{font-size:12px;padding:8px 0 14px}
  .cal-grid button{min-height:78px;gap:6px;border-radius:16px}
  .cal-grid .num{font-size:20px;width:40px;height:40px}
  .cal-barra{width:34px}
  .cal-grid .cnt{font-size:11px}
  .cal-leyenda{gap:26px;padding-top:16px}
  .cal-col-der{position:sticky;top:64px}
  #hojaDia{
    position:static;transform:none;max-height:calc(100vh - 96px);min-height:480px;
    border-radius:24px;box-shadow:var(--sombra);padding-bottom:14px;
  }
  #hojaDia .asa{display:none}
  #hojaDia header{padding-top:16px}
  .hoja{left:auto;right:auto;width:640px;margin:0 auto}
  #hojaDia{width:auto;margin:0}
}
@media (max-width:899px){
  .cal-cols,.cal-col-izq,.cal-col-der{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .presionado{transform:none}
  .hoja{transition:opacity .01ms}
}
@media (prefers-reduced-transparency:reduce){
  .barra,nav,.escribir{background:var(--superficie);backdrop-filter:none;-webkit-backdrop-filter:none}
}

body:is(.panel-futuro,.acceso){
 --fondo:#eff0f2;--superficie:#fff;--superficie2:#e9eaed;--tinta:#17181b;--tinta2:#62656d;--tinta3:#737780;
 --separador:#17181b12;--tinte:#24272c;--verde:#187f59;--verde-vivo:#15946a;--verde-suave:#e2f3e9;
 --rojo:#be3641;--rojo-suave:#fce8eb;--ambar:#906022;--ambar-barra:#a77730;--ambar-suave:#f7eddb;
 --barra:#f1f2f4ed;--lateral:#e8e9ec;--sombra:inset 0 1px 0 #fff,0 8px 28px #24273806;
 --radio:24px;--radio-g:30px;--ease-out:cubic-bezier(.23,1,.32,1);
 color-scheme:light;font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
 background:radial-gradient(ellipse at 85% 0,#fff 0,transparent 55%),#eff0f2;isolation:isolate;
}
.panel-futuro ::selection{background:#b8e8ef;color:#10191d}
.panel-futuro :is(button,a,input,textarea,select,summary):focus-visible{outline:2px solid #148ba8;outline-offset:4px}
.panel-futuro :is(button,summary,a){touch-action:manipulation}
.panel-futuro [hidden]{display:none!important}
.panel-futuro .col{min-width:0}
.panel-contexto{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 36px 12px;font-size:13px;color:var(--tinta2);min-height:65px}
.panel-contexto>span{display:flex;gap:16px;align-items:center;min-width:0}
.panel-contexto b{color:var(--tinta);font-size:21px;font-weight:600;letter-spacing:-.06em}
.panel-contexto i{color:#a5a7ad;font-style:normal}
.panel-herramientas{display:flex;align-items:center;gap:10px;min-width:0;max-width:55%}
.panel-herramientas>a{display:flex;align-items:center;gap:9px;border:1px solid #fff;border-radius:30px;padding:8px 14px;min-width:0;background:#ffffff70}
.panel-herramientas>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El tema: sol en oscuro ("pasa a claro"), luna en claro ("pasa a oscuro"). */
#panel-tema{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid #fff;background:#ffffff70;color:var(--tinta);cursor:pointer}
#panel-tema .icono-oscuro{display:none}
html[data-panel-tema="claro"] #panel-tema .icono-claro{display:none}
html[data-panel-tema="claro"] #panel-tema .icono-oscuro{display:grid}
#panel-tema>span{display:grid;place-items:center}
.panel-contexto .ic{flex-shrink:0}
.panel-futuro .titulo-grande h1{font-weight:500;letter-spacing:-.055em;line-height:1.15}
.panel-futuro .titulo-grande p{color:var(--tinta2);font-size:14px;margin-top:8px}
.panel-futuro .saludo-fila{gap:14px}
.panel-futuro .avatar-perfil{background:linear-gradient(140deg,#fff,#d7d9df);color:#303239;border:2px solid #fff;box-shadow:0 4px 14px #20222c0c;font-weight:500}
.panel-futuro .campana{background:#ffffffb0;border:1px solid #fff;box-shadow:none}
.panel-futuro .grupo>h2,.panel-futuro .plegable h2{font-size:14px;font-weight:550;letter-spacing:-.015em;text-transform:none;color:#4e5159;margin:0 0 14px 3px}
.panel-futuro :is(.lista,.tarjeta){border:1px solid #fff;background:#ffffffc7;box-shadow:var(--sombra)}
.panel-futuro .item{font-size:16px;padding:18px 20px;min-height:68px}
.panel-futuro .item .nota{font-size:13px;line-height:1.5;margin-top:4px}
.panel-futuro .item .valor{font-size:14px}
.panel-futuro .ficha{border-radius:15px;background:#edeef1;color:#393c44;box-shadow:none}
.panel-futuro .ficha.ambar{background:var(--ambar-suave);color:var(--ambar)}
.panel-futuro .ficha.verde{background:var(--verde-suave);color:var(--verde)}
.panel-futuro .ficha.rojo{background:var(--rojo-suave);color:var(--rojo)}
.panel-futuro .ficha.gris{background:#edeef1;color:#565b66}
/* Tarjeta de ingresos: imagen de marca y franja de cristal. */
.panel-resumen{display:grid;gap:18px}
.panel-resumen .mosaico{display:block;min-width:0}
/* Tarjeta de ingresos: una tarjeta de banco digital. Grafito cepillado, el
   ícono sin contacto y el arte en UNA esquina, no de fondo. El arte es negro puro
   con la pieza encendida y el contenedor se funde en screen: el negro
   desaparece y el giroscopio flota sobre el metal sin recorte. El blend va
   en .tf-visual y no en la imagen porque la máscara abre su propio contexto
   de apilamiento: dentro de él, la imagen sólo vería transparente. Es oscura
   en los dos temas, como una tarjeta física. */
.panel-futuro .tarjeta-finanzas{height:100%;min-height:354px;border:1px solid #ffffff1f;border-radius:30px;padding:26px 28px 22px;color:#fff;
 background:radial-gradient(90% 120% at 100% 0%,#173341 0%,transparent 58%),radial-gradient(60% 80% at 0% 100%,#0e2c20 0%,transparent 70%),linear-gradient(155deg,#1c1e22 0%,#0e0f12 55%,#08090b 100%);
 box-shadow:inset 0 1px 0 #ffffff29,inset 0 -1px 0 #0009,0 18px 40px #0a0c1426;isolation:isolate}
.panel-futuro .tarjeta-finanzas::before{display:block;inset:0;width:auto;height:auto;border-radius:0;border:0;transform:none;z-index:0;
 background:repeating-linear-gradient(112deg,#ffffff05 0 1px,transparent 1px 4px);-webkit-mask-image:linear-gradient(100deg,#000,transparent 72%);mask-image:linear-gradient(100deg,#000,transparent 72%)}
.panel-futuro .tarjeta-finanzas>div{z-index:2}
.panel-futuro .tarjeta-finanzas::after{display:none}
.panel-futuro .tarjeta-finanzas>.tf-destello{animation:none;background:linear-gradient(118deg,transparent 32%,#ffffff10 46%,transparent 60%);z-index:3}
.panel-futuro .tarjeta-finanzas>.tf-visual{position:absolute;inset:auto;top:7%;right:3%;width:min(46%,330px);aspect-ratio:1;z-index:1;pointer-events:none;mix-blend-mode:screen;
 -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%)}
.panel-futuro .tf-visual img{width:100%;height:100%;display:block}
.tf-chip{display:flex;align-items:center;margin-top:22px}
.tf-chip .sin-contacto{width:21px;height:21px;fill:none;stroke:#ffffffa6;stroke-width:1.6;stroke-linecap:round}
.panel-futuro .tarjeta-finanzas .etq{font-size:12px;letter-spacing:.08em;color:#e2e4e7}
.panel-futuro .tarjeta-finanzas .num{font-weight:550;font-size:clamp(44px,4.7vw,76px);letter-spacing:-.055em;margin:16px 0 12px;white-space:nowrap;text-shadow:0 2px 18px #0009}
.panel-futuro .tarjeta-finanzas .num .cent{font-size:.45em;color:#babdc4;font-weight:400;letter-spacing:-.035em}
.panel-futuro .tarjeta-finanzas:not(:has(.tf-visual)){min-height:230px;background:radial-gradient(ellipse at 100% 0,#79b1c236,transparent 40%),#16191e}
.panel-futuro .finanzas-mes .pie{max-width:55%;color:#d0d3d9;font-size:13px;line-height:1.6;margin-top:24px}
.panel-futuro .finanzas-mes .renglon{flex-wrap:wrap;max-width:65%;gap:10px 16px}
.panel-futuro .mini-mosaico{gap:18px}
.panel-futuro .mini{background:linear-gradient(130deg,#fff,#f8f9fa);color:var(--tinta);border:1px solid #fff;border-radius:27px;padding:24px;box-shadow:var(--sombra)}
.panel-futuro .mini .etq{color:var(--tinta2);font-size:13px;font-weight:450}
.panel-futuro .mini .num{font-size:37px;font-weight:500;letter-spacing:-.045em}
.panel-futuro .mini .pastas{opacity:.75}
.panel-futuro .mini .pastas i{height:5px}
.panel-futuro .logo-negocio{background:linear-gradient(135deg,#555e6c,#252a32);box-shadow:inset 0 1px 0 #ffffff40,0 6px 15px #252a321a}
.panel-indicadores{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.indicador{position:relative;display:flex;flex-direction:column;justify-content:center;padding:23px;border-radius:28px;border:1px solid #fff;background:linear-gradient(140deg,#fff,#f9f9fa);box-shadow:var(--sombra);min-width:0}
.indicador-cima{display:flex;align-items:center;gap:9px;font-size:14px;color:#555962}
.indicador-cima .ic{flex-shrink:0;color:#383d45}
.indicador-cima .ic:last-child{margin-left:auto;width:14px;color:#868a93}
.indicador strong{font-size:64px;line-height:1.08;letter-spacing:-.06em;font-weight:450;margin:18px 0 10px;font-variant-numeric:tabular-nums}
.indicador-nota{font-size:12px;color:var(--tinta2)}
.indicador-ambar{background:linear-gradient(135deg,#e2e7eb,#f7f8fa);border-color:#ffffffc0}
.panel-futuro .ventas7{height:100%;min-height:354px;border:1px solid #ffffff26;background:radial-gradient(ellipse at 95% -5%,#77cde350,transparent 30%),linear-gradient(145deg,#1c2025,#101216 70%);padding:26px;border-radius:32px;box-shadow:inset -1px 2px 2px #bceaff40,0 16px 30px #272a3815}
.panel-futuro .ventas7::after{background:repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 48px);opacity:.4}
.panel-futuro .v7-tile{background:#ffffff0d;color:#e2eef3;border:1px solid #ffffff12;width:38px;height:38px}
.panel-futuro .v7-cima b{font-size:15px;font-weight:500;color:#f0f1f3}
.panel-futuro .v7-cima span{font-size:12px;color:#a0a6b0}
.panel-futuro .v7-num{font-size:44px;font-weight:500;letter-spacing:-.05em;margin-top:21px}
.panel-futuro .v7-num .cent{font-size:.45em;font-weight:400;color:#9a9fa7}
.panel-futuro .v7-delta{color:#71d7a6;font-size:12px;font-weight:450;margin:12px 0 10px}
.panel-futuro .grafica{color:#e4e8ed}
.panel-futuro .grafica .linea{stroke:#e4e8ed;stroke-width:1.7;filter:drop-shadow(0 1px 3px #c1edff30)}
.panel-futuro .grafica .punto{stroke:#dce6ec;fill:#191c20}
.panel-futuro .grafica .pico{fill:#fff}
.panel-futuro .grafica .globo-pico{fill:#272d35;stroke:#ffffff10}
.panel-futuro .ventas7 .dias span{color:#afb4bd;font-size:12px}
/* La gráfica se explora: la lectura de arriba dice el día elegido y su
   importe; el cursor y el punto son HTML sobre el lienzo (ver graficaVentas). */
.lectura-venta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:12px 0 8px;min-height:22px}
.lectura-fecha{display:inline-block;font-size:12px;color:#9aa0a9}
.lectura-fecha::first-letter{text-transform:uppercase}
.lectura-monto{font-size:15px;font-weight:550;color:#f1f2f4;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.grafica-lienzo{position:relative;touch-action:pan-y;cursor:crosshair}
.grafica-lienzo .grafica{display:block;width:100%}
.cursor-venta{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:linear-gradient(#ffffff00,#ffffff59 30%,#ffffff1a);pointer-events:none;transition:left 180ms var(--ease-out)}
.punto-venta{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #62d2e833,0 0 14px #62d2e8aa;pointer-events:none;transition:left 180ms var(--ease-out),top 180ms var(--ease-out)}
.dias-interactivas{gap:4px}
.dia-venta{flex:1;min-width:0;min-height:34px;border:0;border-radius:11px;background:transparent;color:#8f959e;font:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
.dia-venta[aria-pressed="true"]{background:#ffffff17;color:#fff}
.dia-venta:focus-visible{outline:2px solid #62d2e8;outline-offset:1px}
@media(hover:hover) and (pointer:fine){.dia-venta:hover{color:#e8eaee}}
.panel-futuro .ojos{gap:14px}
.panel-futuro .ojo{background:#ffffffc7;border:1px solid #fff;box-shadow:var(--sombra)}
.panel-futuro .ojo::before{display:none}
.panel-futuro .ojo.compacta{padding:20px;grid-template-columns:42px minmax(0,1fr) auto;border-radius:24px;gap:13px;min-height:104px}
.panel-futuro .ojo.compacta .ojo-tile{width:42px;height:42px;border-radius:14px;box-shadow:none}
.panel-futuro .ojo-tile.verde{background:var(--verde-suave);color:var(--verde)}
.panel-futuro .ojo-tile.ambar{background:var(--ambar-suave);color:var(--ambar)}
.panel-futuro .ojo-tile.rojo{background:var(--rojo-suave);color:var(--rojo)}
.panel-futuro .ojo-tile.gris{background:#ebedf1;color:#585f6b}
.panel-futuro .ojo.compacta .ojo-cuerpo b{font-size:14px;font-weight:550}
.panel-futuro .ojo.compacta .ojo-cuerpo .sub{font-size:12px;margin-top:5px;color:var(--tinta2)}
.panel-futuro .ojo-accion{background:#edeef1;border:1px solid #e6e7eb;color:#292d34;box-shadow:inset 0 1px 0 #fff;font-size:12px;padding:9px 13px}
.panel-futuro .ver-mas{font-size:13px;color:var(--tinta2);margin-top:14px}
.panel-futuro .accesos{gap:12px}
.panel-futuro .accesos a{border:1px solid #fff;border-radius:25px;background:#ffffffd0;box-shadow:var(--sombra);font-size:13px;font-weight:500;padding:21px 8px 17px;gap:13px;min-width:0}
.panel-futuro .accesos a .ic{color:#252931;stroke-width:1.5;width:25px;height:25px}
.panel-futuro .plegable button{font-size:13px;color:var(--tinta2)}
/* Formularios, conversación, agenda y hojas comparten material. */
.panel-futuro .campo{padding:16px 20px}
.panel-futuro .campo label{font-size:14px;color:var(--tinta2);margin-bottom:7px}
.panel-futuro .campo input{font-size:16px;padding:5px 0;color:var(--tinta)}
.panel-futuro .campo:focus-within{background:#e8f4f84a}
.panel-futuro input::placeholder,.panel-futuro textarea::placeholder{color:#767b85;opacity:1}
.panel-futuro select{color:var(--tinta);background-color:var(--superficie2);font:inherit}
.panel-futuro input:disabled{color:var(--tinta2)}
.panel-futuro .boton{font-size:15px;border-radius:99px;min-height:48px;font-weight:550;background:#202226;color:#fff;box-shadow:inset 0 1px 0 #ffffff30}
.panel-futuro .boton.tinta{background:linear-gradient(#36393e,#15171a);color:#fff}
.panel-futuro .boton.suave,.panel-futuro .boton.gris{background:linear-gradient(#fff,#e0e2e7);color:#2b2e34;border:1px solid #fff;box-shadow:0 4px 10px #24273805}
.panel-futuro .boton.verde{background:#187451;color:#fff}
.panel-futuro .boton.rojo{background:#b53944;color:#fff}
.panel-futuro .boton:disabled{opacity:.45;cursor:not-allowed}
.panel-futuro .boton.marca{background:var(--superficie2);color:var(--tinta)}
.panel-futuro .aviso{border:1px solid color-mix(in srgb,currentColor 16%,transparent);font-size:14px}
.panel-futuro .etiqueta{font-size:12px;font-weight:550}
.panel-futuro .b-cliente{background:#fff;border:1px solid #e6e8ec;color:#20242a}
.panel-futuro .b-nosotros{background:linear-gradient(120deg,#dce8ed,#e9eff2);color:#26353e;border:1px solid #cfdee5}
.panel-futuro .b-nosotros .sello{color:#5e727e}
.panel-futuro .burbuja{padding:12px 16px;line-height:1.5;box-shadow:none}
.panel-futuro .escribir{background:#f3f4f6ee;border-color:#dadde2;box-shadow:0 -10px 30px #27334b08}
.panel-futuro .escribir textarea{background:#fff;border-color:#dde0e5}
.panel-futuro .escribir button{background:#25292f;color:#fff;width:44px;height:44px}
.panel-futuro .escribir .tomar-yo{background:linear-gradient(#fff,#e0e2e7);color:#2b2e34;border:1px solid #fff;box-shadow:0 4px 10px #24273808;width:auto;height:auto;border-radius:14px}
.panel-futuro .cal-tarjeta{background:radial-gradient(ellipse at 100% 0,#7aabbd38,transparent 40%),linear-gradient(140deg,#252a30,#12151a);border:1px solid #ffffff40;box-shadow:0 14px 35px #1c223d15}
.panel-futuro .cal-grid .sel .num{background:linear-gradient(#fff,#ccd5dc);color:#20252b;box-shadow:0 0 0 4px #c7e9ff0d}
.panel-futuro .cal-grid .hoy .num{box-shadow:inset 0 0 0 1px #a8ddea}
.panel-futuro .cal-nav{background:#ffffff0d;border:1px solid #ffffff15;color:#e1eaf0}
.panel-futuro .cal-selector .serv-ico{background:#e6edf2;color:#384955;box-shadow:inset 0 1px 0 #fff}
.panel-futuro .hoja{background:#f5f6f8;border:1px solid #fff;box-shadow:0 25px 80px #17213230}
.panel-futuro .boton-hoja{background:#25292f;color:#fff;border-radius:99px}
.panel-futuro .boton-hoja.peligro{background:transparent;color:var(--rojo)}
.panel-futuro .boton-hoja.punteado,.panel-futuro .boton-hoja.secundario{background:#e7e9ed;color:#30353e}
.panel-futuro .boleto-plan{background:radial-gradient(ellipse at 0 0,#00c7f03b,transparent 40%),linear-gradient(140deg,#24292e,#0d0f13 70%);box-shadow:inset 1px 2px 1px #b4eaff66,0 14px 35px #12182920;border-radius:32px}
.panel-futuro .boleto-plan::before{background:radial-gradient(circle,#78d8f038,transparent 65%)}
.panel-futuro .llamada::before{background:radial-gradient(55% 90% at 50% 0%,#a8ddec20,transparent 70%)}
.panel-futuro .ll-boton{background:linear-gradient(#fff,#bdc4cc);color:#20252b;box-shadow:inset 0 1px 0 #fff}
.panel-futuro #sinRed{background:#282d34;color:#fff}
@media(min-width:900px){
 body.panel-futuro{grid-template-columns:242px minmax(0,1fr);transition:none}
 .panel-futuro .lateral{margin:18px 0 18px 18px;top:18px;height:calc(100dvh - 36px);padding:25px 13px 20px;border-radius:30px;background:linear-gradient(150deg,#f8f8facc,#e1e3e8b8);border:1px solid #fff9;box-shadow:inset 0 1px 0 #fff,0 16px 40px #3a415308;gap:5px;backdrop-filter:blur(30px)}
 .panel-futuro .lateral .marca{padding:0 10px 27px;font-size:25px;font-weight:550;letter-spacing:-.055em;gap:9px;color:#20242a}
 .panel-futuro .lateral .marca i{background:#202226;color:#fff;border-radius:11px;width:32px;height:36px;font-size:21px;box-shadow:inset 0 1px 0 #fff3}
 .panel-futuro .lateral .marca small{display:block;font-size:10px;font-weight:400;letter-spacing:0;color:#686d77;line-height:1.7}
 .panel-futuro .lateral .plegar{width:26px;height:26px;right:-3px;top:6px;background:#fff8;border:1px solid #fff;color:#666b74}
 .espacio-negocio{display:flex;align-items:center;gap:10px;margin:0 3px 18px;padding:13px 9px;background:#ffffff55;border:1px solid #fff8;border-radius:18px}
 .espacio-negocio>span{width:32px;height:34px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(#fff,#d5d9df);border:1px solid #fff;border-radius:10px;font-size:14px;color:#494e59}
 .espacio-negocio>div{min-width:0}
 .espacio-negocio small{display:block;color:#787c85;font-size:10px;letter-spacing:.07em;margin-bottom:3px}
 .espacio-negocio b{display:block;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3f434c}
 .nav-seccion{font-size:12px;color:#787c86;margin:12px 15px 7px}
 .panel-futuro .lateral a{padding:10px 13px;gap:11px;font-size:14px;font-weight:450;border-radius:99px;border:1px solid transparent;min-height:45px;color:#4e535d}
 .panel-futuro .lateral a .ic{width:19px;height:19px;padding:0;border-radius:0;background:none;stroke-width:1.5}
 .panel-futuro .lateral a.on{background:linear-gradient(#2b2d32,#191b1e);border-color:#17191d;color:#fff;box-shadow:inset 0 1px 0 #ffffff28,0 4px 12px #20273812}
 .panel-futuro .lateral a.on .ic{background:none;color:#fff}
 .panel-futuro .lateral .abajo{padding-top:20px}
 .firma-panel{display:flex;justify-content:space-between;gap:6px;padding:18px 10px 0;border-top:1px solid #22273810;margin-top:12px;font-size:11px;color:#727782}
 html.plegada .panel-futuro{grid-template-columns:96px minmax(0,1fr)}
 html.plegada .panel-futuro .lateral{padding:22px 10px}
 html.plegada .panel-futuro :is(.espacio-negocio,.nav-seccion,.firma-panel){display:none}
 html.plegada .panel-futuro .lateral .marca{padding-bottom:48px}
 html.plegada .panel-futuro .lateral a{padding:10px 6px;border:0;min-height:44px}
 html.plegada .panel-futuro .lateral a .ic{padding:0;width:22px;height:22px;border-radius:0;background:none;box-shadow:none}
 /* El activo plegado conserva su píldora (la gana a la regla vieja de
    vistas.ts que la quitaba): en claro quedaba un icono BLANCO sobre la
    lateral clara, sin ningún marcador. La gemela oscura es la regla oscura
    de .lateral a.on, que ya pinta la píldora clara. */
 html.plegada .panel-futuro .lateral a.on{background:linear-gradient(#2b2d32,#191b1e);box-shadow:inset 0 1px 0 #ffffff28,0 4px 12px #20273812}
 html.plegada .panel-futuro .lateral a.on .ic{color:#fff}
 .panel-futuro .barra{padding:0 36px;min-height:10px}
 .panel-futuro .barra:not(.siempre) .der{display:none}
 .panel-futuro .barra.siempre{padding-top:24px;margin-bottom:18px;max-width:1050px}
 .panel-futuro .titulo-grande{max-width:1480px;padding:14px 36px 29px}
 .panel-futuro .titulo-grande h1,.panel-futuro .saludo-fila h1{font-size:42px}
 .panel-futuro .saludo-fila .avatar-perfil{width:50px;height:50px;font-size:21px}
 .panel-futuro main{max-width:1080px;gap:22px;padding:0 36px 48px}
 .panel-futuro.tablero main{max-width:1480px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:stretch}
 .panel-futuro.tablero main>.grupo{margin:0;min-width:0}
 .panel-futuro.tablero main:has(>.aviso){--fila-aviso:1}
 .panel-futuro.tablero main>.aviso{grid-column:1/-1;grid-row:1}
 .panel-futuro.tablero .panel-resumen{display:contents}
 .panel-resumen .mosaico{grid-column:1;grid-row:calc(1 + var(--fila-aviso,0))}
 .panel-indicadores{grid-column:2;grid-row:calc(2 + var(--fila-aviso,0))}
 .panel-futuro.tablero .panel-semana{grid-column:2;grid-row:calc(1 + var(--fila-aviso,0));position:relative}
 .panel-semana>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .panel-futuro.tablero .panel-accesos{grid-column:1;grid-row:calc(2 + var(--fila-aviso,0))}
 .panel-futuro.tablero .panel-avisos{grid-column:1/-1;grid-row:calc(3 + var(--fila-aviso,0));margin-top:5px}
 .panel-futuro.tablero .panel-avisos .ojos{grid-template-columns:repeat(3,minmax(0,1fr))}
 .panel-futuro.tablero .panel-avisos .ojo.compacta{grid-template-columns:38px minmax(0,1fr);gap:12px}
 .panel-futuro.tablero .panel-avisos .ojo-accion{grid-column:2;justify-self:start}
 .panel-futuro.tablero .accesos{grid-template-columns:repeat(4,minmax(0,1fr))}
 .panel-futuro .ventas7 .grafica{height:126px}
 .panel-futuro.pag-calendario main{max-width:1480px;padding-inline:32px}
}
@media(min-width:900px) and (max-width:1180px){
 body.panel-futuro{grid-template-columns:214px minmax(0,1fr)}
 .panel-futuro .panel-contexto{padding-inline:24px}
 .panel-futuro .lateral .marca{font-size:22px}
 .panel-futuro .lateral a{font-size:13px;padding-inline:9px;gap:8px}
 .panel-futuro .titulo-grande,.panel-futuro main{padding-inline:24px}
 .panel-futuro.tablero main{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:18px}
 .panel-futuro .tarjeta-finanzas{padding:24px 20px}
 .panel-futuro .tarjeta-finanzas .num{font-size:48px}
 .panel-indicadores{grid-template-columns:1fr}
 .indicador{padding:18px;display:grid;grid-template-columns:1fr auto;gap:5px 12px}
 .indicador strong{grid-column:2;grid-row:1/3;font-size:40px;margin:0}
 .panel-futuro .cal-cols{grid-template-columns:minmax(0,1fr)}
 .panel-futuro .cal-col-der{position:static}
}
@media(max-width:899px){
 .panel-contexto{padding:15px 20px 9px;min-height:57px;font-size:12px}
 .panel-contexto>span{gap:10px}
 .panel-herramientas{gap:8px;max-width:60%}
 .panel-herramientas>a{padding:6px 10px}
 .panel-herramientas>a>span{font-size:12px}
 #panel-tema{width:34px;height:34px}
 .panel-contexto>span>i,.panel-contexto>span>span{display:none}
 .panel-futuro .barra:not(.siempre){height:52px;min-height:52px;padding:0 20px}
 .panel-futuro .barra:not(.siempre):has(.izq:empty){margin-top:-6px;margin-bottom:-44px;pointer-events:none}
 .panel-futuro .barra.pegada{background:var(--barra)}
 .panel-futuro .titulo-grande{padding:15px 20px 25px}
 .panel-futuro .titulo-grande h1,.panel-futuro .saludo-fila h1{font-size:33px}
 .panel-futuro main{padding-inline:18px;padding-bottom:115px}
 .panel-futuro .saludo-fila .avatar-perfil,.panel-futuro .saludo-fila .campana{width:42px;height:42px}
 .panel-futuro .tarjeta-finanzas{min-height:345px;padding:24px 21px;border-radius:30px}
 .panel-futuro .tarjeta-finanzas .num{font-size:53px;margin-top:16px}
 .panel-futuro .tarjeta-finanzas>.tf-visual{top:11%;right:-13%;width:56%}
 .tf-chip{margin-top:20px}
 .panel-futuro .finanzas-mes .pie{max-width:80%}
 .panel-futuro .finanzas-mes .renglon{max-width:90%}
 .panel-futuro .mini{padding:19px 16px}
 .panel-futuro .mini .num{font-size:27px;overflow-wrap:anywhere}
 .indicador{padding:21px 18px;border-radius:26px}
 .indicador-cima{font-size:13px;gap:7px}
 .indicador-cima .ic:last-child{display:none}
 .indicador strong{font-size:48px;margin-block:13px 7px}
 .indicador-nota{font-size:12px}
 .panel-futuro .grupo{margin-bottom:27px}
 .panel-futuro .accesos{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
 .panel-futuro .accesos a{font-size:12px;padding:19px 4px 15px;border-radius:22px;gap:12px}
 .panel-futuro>nav{border-radius:30px;height:76px;left:12px;right:12px;bottom:calc(8px + var(--seguro-b));background:#f7f8fae8;border:1px solid #fff;box-shadow:0 10px 40px #333b4c24,inset 0 1px 0 #fff;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
 /* Seis lugares desde que 'Hablar' entró al dock: los renglones se
    reparten el ancho en vez de medir fijo, para que quepan también en
    un teléfono chico. Abajo de 380px el nombre se va al lector de
    pantalla y se queda el icono, que es como nació este dock. */
 .panel-futuro>nav a{flex-direction:column;gap:4px;border-radius:22px;flex:1 1 0;min-width:0;max-width:62px;height:58px;color:#656b75}
 .panel-futuro>nav a .ic{width:21px;height:21px}
 .panel-futuro>nav a span{position:static;clip:auto;clip-path:none;width:auto;height:auto;font-size:10px;font-weight:500}
 .panel-futuro>nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .panel-futuro>nav a.on{background:linear-gradient(#34383e,#171a1e);color:#fff}
 .panel-futuro .ventas7{padding:25px;min-height:340px}
 .panel-futuro .ventas7 .grafica{height:140px}
 .panel-futuro .escribir{padding-bottom:calc(12px + var(--seguro-b))}
 .panel-futuro .item .valor{max-width:48%;overflow-wrap:anywhere;text-align:right}
 .panel-futuro .campo.con-boton{flex-wrap:wrap}
 .panel-futuro .campo.con-boton>div{min-width:130px}
}
@media(max-width:370px){
 .panel-herramientas>a>span{max-width:105px}
 .panel-futuro .titulo-grande h1,.panel-futuro .saludo-fila h1{font-size:28px}
 .panel-futuro .tarjeta-finanzas{padding:21px 17px}
 .panel-futuro .tarjeta-finanzas .num{font-size:44px}
 .panel-futuro .tarjeta-finanzas .etq{font-size:11px}
 .panel-futuro .accesos{grid-template-columns:repeat(2,minmax(0,1fr))}
 .panel-futuro .ojo.compacta{gap:8px;padding:16px 12px;grid-template-columns:32px minmax(0,1fr) auto}
 .panel-futuro .ojo.compacta .ojo-tile{width:32px;height:32px}
 .indicador-cima{flex-wrap:wrap}
}
/* Respuesta táctil breve, sin movimiento continuo sobre las cifras. */
.panel-futuro :is(.boton,.item,nav a,.accesos a,.tarjeta-finanzas,.indicador,.campana,.ojo-accion){transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
.panel-futuro :is(.boton,.campana,.indicador,.ojo-accion):active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
 .panel-futuro :is(a.item,button.item):hover{background-color:#eef2f5}
 .panel-futuro :is(.accesos a,.indicador,.campana):hover{box-shadow:inset 0 1px 0 #fff,0 9px 25px #232b4010;transform:translateY(-2px)}
 .panel-futuro .tarjeta-finanzas:hover{border-color:#b5eaff90;box-shadow:0 18px 34px #242a3826}
 .panel-futuro .lateral a:hover:not(.on){background:#ffffff90;color:#161b23}
 .panel-futuro .ojo-accion:hover{background:#dce1e8;color:#161b23}
}
@media(prefers-reduced-motion:reduce){
 .panel-futuro *, .panel-futuro *::before,.panel-futuro *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .panel-futuro :is(.presionado,.boton:active,.campana:active,.indicador:active,.ojo-accion:active,.accesos a:hover,.indicador:hover,.campana:hover){transform:none}
}
@media(prefers-reduced-transparency:reduce){
 /* Sólo donde hay vidrio: la barra en reposo es transparente y en celular se
    encima al saludo; pintarla sólida tapaba el "Hola". Sólo la PEGADA. */
 .panel-futuro :is(.barra.pegada,nav,.escribir,.lateral){background:#f0f1f3;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more){
 body.panel-futuro{--tinta2:#424750;--tinta3:#525760;--separador:#888;
  --superficie-3d:linear-gradient(180deg,#fff 0%,#e9ebef 100%);
  --superficie-3d-chica:linear-gradient(180deg,#fff 0%,#e4e7ec 100%);
  --relieve:inset 0 1px 0 #fff,inset 0 -1px 0 #1b1f2a33,0 2px 4px #1b1f2a2b,0 16px 30px -12px #1b1f2a59;
  --relieve-chico:inset 0 1px 0 #fff,inset 0 -1px 0 #1b1f2a33,0 2px 4px #1b1f2a2b,0 6px 14px -6px #1b1f2a4d}
 .panel-futuro .tarjeta-finanzas::before{background:linear-gradient(90deg,#101215,#101215bb 70%,#10121560)}
}
@media print{
 body.panel-futuro{background:white;color:black;display:block;--tinta:#000;--fondo:#fff}
 .panel-futuro :is(.panel-contexto,.lateral,nav,.tf-visual){display:none}
}
/* ══ Mis finanzas (referencia del dueño, oct-2026) ═══════════════════════
   La maqueta "FundFlow" copiada tal cual —vidrio blanco translúcido, una
   tarjeta azul, burbujas unidas— SIN su lienzo lavanda: decisión del dueño
   ("no combina"); el contenido va sobre el fondo neutro del panel, como
   las demás pantallas. Todo cuelga de
   body.pag-finanzas y de clases ff-*; la barra lateral no se toca. Base =
   CLARO; la gemela oscura vive en la capa OSCURA (más abajo). Sin
   backdrop-filter: detrás no hay nada que esmerilar. Medidas en
   docs/maquetas/finanzas-especificacion.md. */
body.pag-finanzas{--ff-tinta:#12151d;--ff-tinta2:#525867;--ff-tinta3:#676d7c;--ff-separador:rgba(23,26,34,.08);--ff-negro:#14110f;--ff-negro-hover:#26221f;--ff-sobre-negro:#fff;--ff-foco:#148ba8}
body.pag-finanzas .col>.titulo-grande{display:none}
body.pag-finanzas #contenido-panel{max-width:1280px;display:block}
.ff-lienzo{position:relative;padding:4px 0 8px;color:var(--ff-tinta)}
:where(.ff-lienzo) :where(h1,h2,h3,p,ol,ul){margin:0}
.ff-lienzo :is(a,input,label):focus-visible{outline:2px solid var(--ff-foco);outline-offset:3px}
.ff-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ff-reticula{display:grid;grid-template-columns:minmax(0,1.84fr) minmax(0,1fr);
 grid-template-areas:"cab movs" "total movs" "medio movs" "tabla atajos";column-gap:clamp(28px,3.4vw,48px);row-gap:16px}
.ff-cab{grid-area:cab;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px;min-height:52px}
.ff-cab-txt{min-width:0}
.ff-h1{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--ff-tinta)}
.ff-h2{font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--ff-tinta)}
.ff-sub{font-size:14px;margin-top:6px;color:var(--ff-tinta2)}
.ff-placa{height:52px;padding:0 22px;display:flex;align-items:center;gap:28px;border-radius:14px;font-size:15px;font-weight:500;color:var(--ff-tinta);white-space:nowrap;
 background:rgba(255,255,255,.55);border:1px solid rgba(23,26,34,.10);box-shadow:none}
.ff-placa-neg{max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--ff-tinta2)}
.ff-vidrio{position:relative;border-radius:24px;padding:24px 28px;min-width:0;
 background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(27,31,42,.05),0 20px 40px -22px rgba(27,31,42,.26)}
.ff-etq{font-size:15px;font-weight:500;color:var(--ff-tinta);letter-spacing:0;line-height:1.3}
.ff-tarjeta-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px}
.ff-gris{font-size:13px;color:var(--ff-tinta3)}
.ff-vacio{font-size:14px;color:var(--ff-tinta2);text-align:center}
.ff-vacio-caja{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 12px;min-height:150px}
.ff-vacio-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ff-tinta);background:rgba(23,26,34,.05);box-shadow:inset 0 1px 0 #fff}
/* ── La tarjeta grande ── */
.ff-total{grid-area:total;min-height:286px;display:flex;flex-direction:column}
.ff-total-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ff-total-txt{min-width:0}
.ff-monto{font-size:32px;font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ff-tinta)}
.ff-signo{font-size:.55em;color:var(--ff-tinta3);vertical-align:.12em;margin-right:2px}
.ff-nota{font-size:12.5px;color:var(--ff-tinta2);margin-top:6px;max-width:52ch;line-height:1.4}
.ff-solo-semana{display:none}
.ff-total:has(#ff-p-semana:checked) .ff-solo-mes{display:none}
.ff-total:has(#ff-p-semana:checked) .ff-solo-semana{display:inline}
.ff-seg{display:flex;align-items:center;gap:2px;border:0;padding:3px;margin:0;flex:none;border-radius:999px;background:rgba(23,26,34,.05)}
.ff-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ff-seg label{height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:500;display:grid;place-items:center;cursor:pointer;color:var(--ff-tinta3);
 transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.ff-seg input:checked+label{background:#fff;color:var(--ff-tinta);box-shadow:var(--relieve-chico)}
.ff-seg input:focus-visible+label{outline:2px solid var(--ff-foco);outline-offset:2px}
.ff-total-pie{display:flex;align-items:center;gap:28px;margin-top:auto;padding-top:18px}
.ff-burbujas{position:relative;flex:1 1 468px;max-width:468px;aspect-ratio:468/148;container-type:inline-size}
.ff-burbujas-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 26px rgba(31,111,209,.22))}
.ff-burbujas-svg.movil{display:none}
.ff-s-lado{stop-color:#e3edf7}.ff-s-1{stop-color:#c6dcf1}.ff-s-2{stop-color:#9cc6ef}.ff-s-3{stop-color:#c8ec9e}.ff-s-4{stop-color:#5fbccb}.ff-s-5{stop-color:#2f7fdc}
.ff-c-0{stop-color:#1f6fd1}.ff-c-1{stop-color:#2680e0}.ff-c-2{stop-color:#5cc3b8}.ff-c-3{stop-color:#D8FF47;stop-opacity:0}
.ff-l-0{stop-color:#fff;stop-opacity:.75}.ff-l-1{stop-color:#fff;stop-opacity:.08}.ff-l-2{stop-color:#fff;stop-opacity:.4}.ff-l-3{stop-color:#fff;stop-opacity:.95}
.ff-bur{position:absolute;top:50%;width:30%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.ff-bur.izq{left:14.53%}.ff-bur.cen{left:50%}.ff-bur.der{left:85.47%}
.ff-bur b{display:block;font-size:clamp(14px,4.3cqi,20px);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ff-tinta);font-variant-numeric:tabular-nums}
.ff-bur span[aria-hidden]{display:block;font-size:clamp(9.5px,2.6cqi,13px);line-height:1.15;color:var(--ff-tinta2);margin-top:2px;white-space:nowrap}
.ff-bur.cen b{color:#fff}
.ff-bur.cen span[aria-hidden]{color:rgba(255,255,255,.82)}
.ff-botones{flex:0 0 172px;display:flex;flex-direction:column;gap:8px}
.ff-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
 transition:transform 160ms var(--ease-out),background-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.ff-btn:active{transform:scale(.98)}
.ff-btn-negro{background:var(--ff-negro);color:var(--ff-sobre-negro);box-shadow:0 8px 18px -8px rgba(20,17,15,.55)}
.ff-btn-contorno{background:#fff;border:1px solid rgba(23,26,34,.13);color:var(--ff-tinta)}
.ff-cuenta{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.ff-btn-chico{height:34px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:500;display:inline-grid;place-items:center;text-decoration:none;white-space:nowrap;flex:none;
 background:var(--ff-negro);color:var(--ff-sobre-negro);transition:transform 160ms var(--ease-out),background-color 180ms var(--ease-out)}
.ff-btn-chico:active{transform:scale(.97)}
/* ── Fila de en medio ── */
.ff-medio{grid-area:medio;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;min-width:0}
.ff-barras{min-height:234px;display:flex;flex-direction:column}
.ff-chip{height:30px;padding:0 14px;white-space:nowrap;flex:none;border-radius:999px;font-size:13px;font-weight:500;display:inline-grid;place-items:center;background:rgba(23,26,34,.05);color:var(--ff-tinta)}
.ff-barras-zona{margin-top:auto;padding-top:22px;height:168px;display:flex;align-items:flex-end;gap:10px}
.ff-barra{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;justify-content:flex-end}
.ff-pista{width:100%;max-width:44px;height:112px;display:flex;align-items:flex-end;justify-content:center;border-radius:14px}
.ff-barra.cero .ff-pista{background:rgba(23,26,34,.015);border:1px dashed rgba(23,26,34,.13)}
.ff-barra.cero i{display:none}
.ff-barra i{display:block;position:relative;width:100%;max-width:44px;height:var(--h);min-height:12px;border-radius:14px;transform-origin:bottom;
 background:linear-gradient(180deg,#f1f4fb,#e1e7f4);border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(46,62,130,.22)}
.ff-barra.hoy i{background:linear-gradient(180deg,#D8FF47 0%,#6cc9b4 46%,#2b7fe0 100%);border-color:rgba(255,255,255,.55);box-shadow:0 10px 22px -10px rgba(43,127,224,.55)}
.ff-barra.hoy i::before{content:'';position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ff-negro)}
.ff-globo{position:absolute;top:-16px;right:calc(50% + 10px);height:26px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:600;font-style:normal;white-space:nowrap;display:grid;place-items:center;
 background:var(--ff-negro);color:var(--ff-sobre-negro);font-variant-numeric:tabular-nums}
.ff-globo-entero{display:none}
.ff-globo::after{content:'';position:absolute;right:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-right:0;border-left-color:var(--ff-negro)}
.ff-barra>span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ff-tinta3);line-height:1}
.ff-barra.hoy>span{font-weight:700;color:var(--ff-tinta)}
.ff-vacio-barras{margin:auto;align-self:center}
/* La tarjeta azul: la única de color. */
.ff-salud{position:relative;overflow:hidden;min-height:234px;border-radius:24px;padding:24px 28px;color:#fff;min-width:0;
 background:radial-gradient(80% 60% at 100% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(165deg,#1f6fd1 0%,#2680e0 38%,#2a9fcf 62%,#7fd48a 86%,#D8FF47 100%);
 border:1px solid rgba(255,255,255,.5);box-shadow:0 16px 34px -12px rgba(31,111,209,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.ff-salud .ff-etq{color:rgba(255,255,255,.95)}
.ff-redondo{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.35);flex:none;
 transition:background-color 180ms var(--ease-out),transform 160ms var(--ease-out)}
.ff-redondo:active{transform:scale(.94)}
.ff-pct{font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.1;margin-top:12px;font-variant-numeric:tabular-nums;color:#fff}
.ff-salud.primer-mes .ff-pct{font-size:26px}
.ff-pct-sub{font-size:13px;color:#fff;margin-top:2px;text-shadow:0 1px 2px rgba(8,40,96,.45)}
.ff-curva{position:absolute;left:0;right:0;bottom:5%;height:50%}
.ff-curva svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ff-curva-linea{fill:none;stroke:#fff;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}
.ff-pt{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.ff-pt.ini{width:7px;height:7px;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.ff-pt.fin{width:12px;height:12px;border:2.5px solid #fff;background:#D8FF47;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.ff-salud :focus-visible{outline:2px solid #fff;outline-offset:2px}
.ff-pt-etq{position:absolute;font-size:11px;font-weight:600;font-style:normal;color:#fff;text-shadow:0 1px 2px rgba(8,40,96,.6),0 0 6px rgba(8,40,96,.35);white-space:nowrap;font-variant-numeric:tabular-nums}
.ff-pt-etq.ini{transform:translate(-30%,-190%)}
.ff-pt-etq.fin{transform:translate(-70%,-190%)}
/* ── Lo que más se vendió ── */
.ff-tabla{grid-area:tabla;min-height:264px}
.ff-filas{list-style:none;margin:14px -14px 0;padding:0}
.ff-fila{display:grid;grid-template-columns:28px minmax(0,1.5fr) 128px 120px 96px;align-items:center;column-gap:12px;height:58px;padding:0 14px;border-radius:16px}
.ff-fila.destacada{background:linear-gradient(90deg,#eef1f5,#f4f6f8);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(27,31,42,.05)}
.ff-ini{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:650;color:#fff;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.ff-nom{font-size:14.5px;font-weight:500;color:var(--ff-tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ff-imp{font-size:14.5px;font-weight:500;color:var(--ff-tinta);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ff-pill{height:24px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:500;display:inline-grid;place-items:center;white-space:nowrap;justify-self:start}
.ff-pill.azul{color:#fff;background:linear-gradient(180deg,#3d93ea,#2273d6);box-shadow:0 4px 10px -4px rgba(34,115,214,.55)}
.ff-pill.lima{color:#1a2306;background:#D8FF47;box-shadow:0 4px 10px -4px rgba(150,190,20,.6)}
.ff-pill.blanca{background:#eef0f5;color:#3a4150;box-shadow:none}
/* ── Movimientos (sin tarjeta, sobre el fondo del panel; en celular, en tarjeta) ── */
.ff-col-movs{grid-area:movs;display:flex;flex-direction:column;min-width:0}
.ff-movs{display:flex;flex-direction:column;min-width:0}
.ff-movs-cab{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:52px;margin-bottom:24px}
.ff-lupa{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ff-tinta);transition:background-color 180ms var(--ease-out)}
.ff-lista{list-style:none;margin:0;padding:0}
.ff-mov{display:grid;grid-template-columns:28px minmax(0,1fr) 40px 72px 86px;align-items:center;column-gap:8px;height:66px;border-bottom:1px solid var(--ff-separador)}
.ff-mov .ff-fecha{text-align:right}
.ff-mov .ff-pill{justify-self:center}
.ff-mov .ff-imp{font-size:15px}
.ff-mov:last-child{border-bottom:0}
.ff-flecha{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico);color:var(--ff-tinta)}
.ff-fecha,.ff-cant{white-space:nowrap}
.ff-cant{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ff-vacio-movs{min-height:240px}
.ff-consejo{padding-top:44px}
.ff-consejo h3{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ff-tinta)}
.ff-consejo p{font-size:14px;line-height:1.5;color:var(--ff-tinta2);margin-top:8px}
.ff-consejo a{display:inline-block;margin-top:4px;font-size:14px;font-weight:500;color:var(--ff-tinta);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* ── Atajos ── */
.ff-atajos{grid-area:atajos;min-height:264px;display:flex;flex-direction:column}
.ff-circulos{display:flex;justify-content:space-between;gap:6px;margin-top:20px}
.ff-circulos a{display:flex;flex-direction:column;align-items:center;gap:8px;width:62px;font-size:11.5px;line-height:1.2;text-align:center;color:var(--ff-tinta);text-decoration:none}
.ff-circulos a>span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:transform 200ms var(--ease-out);
 background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico)}
.ff-circulos a>span{width:48px;height:48px}
.ff-circulos a.nuevo>span{background:transparent;border:1px solid rgba(23,26,34,.2);box-shadow:none}
.ff-atajos-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:22px}
.ff-grande{flex:1;min-width:0;border-bottom:1px solid var(--ff-separador);padding-bottom:6px}
.ff-grande b{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ff-tinta)}
.ff-grande span{display:block;font-size:12.5px;color:var(--ff-tinta2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-btn-mediano{height:44px;padding:0 18px;flex:none}
@media(hover:hover) and (pointer:fine){
 .ff-btn-negro:hover,.ff-btn-chico:hover{background:var(--ff-negro-hover)}
 .ff-btn-contorno:hover{background:#f3f4f7}
 .ff-redondo:hover{background:rgba(255,255,255,.34)}
 .ff-lupa:hover{background:rgba(23,26,34,.06)}
 .ff-circulos a:hover>span{transform:translateY(-2px)}
 .ff-seg label:hover{color:var(--ff-tinta)}
}
/* Entrada: sólo en la carga, sólo transform y opacidad. */
@media(prefers-reduced-motion:no-preference){
 @keyframes ff-entra{from{opacity:0;transform:translateY(10px)}}
 @keyframes ff-crece{from{transform:scaleY(0)}}
 @keyframes ff-aparece{from{opacity:0}}
 @keyframes ff-traza{from{clip-path:inset(-10% 100% -10% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}}
 :is(.ff-cab,.ff-total,.ff-barras,.ff-salud,.ff-tabla,.ff-movs,.ff-consejo,.ff-atajos){animation:ff-entra 420ms var(--ease-out) both}
 .ff-total{animation-delay:40ms}.ff-barras{animation-delay:80ms}.ff-salud{animation-delay:120ms}
 .ff-tabla{animation-delay:160ms}.ff-movs{animation-delay:200ms}.ff-consejo{animation-delay:220ms}.ff-atajos{animation-delay:240ms}
 .ff-barra i{animation:ff-crece 560ms var(--ease-out) both;animation-delay:calc(140ms + var(--n,0) * 30ms)}
 .ff-globo,.ff-pt,.ff-pt-etq{animation:ff-aparece 200ms var(--ease-out) both;animation-delay:700ms}
 .ff-pt,.ff-pt-etq{animation-delay:1000ms}
 .ff-curva svg{animation:ff-traza 900ms var(--ease-out) both;animation-delay:200ms}
}
/* 900–1180: dos columnas; Movimientos y Atajos lado a lado al final. */
@media(max-width:1180px){
 .ff-reticula{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cab cab" "total total" "medio medio" "tabla tabla" "movs atajos"}
 .ff-atajos{align-self:start}
}
@media(max-width:860px){
 .ff-reticula{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "total" "medio" "movs" "tabla" "atajos"}
}
/* Celular (≤760): no es el apilado de PC. Orden por uso diario —el total,
   lo que acaba de pasar, luego las gráficas— y Movimientos en su tarjeta.
   .ff-medio y .ff-col-movs se disuelven (display:contents: son div sin
   papel) para que cada pieza tome su lugar en la rejilla. */
@media(max-width:760px){
 body.pag-finanzas #contenido-panel{padding-inline:16px;padding-bottom:0} /* el body ya deja el aire del dock */
 .ff-lienzo{padding:0 0 16px}
 .ff-reticula{row-gap:14px;grid-template-areas:"cab" "total" "movs" "barras" "salud" "tabla" "atajos" "consejo"}
 .ff-medio,.ff-col-movs{display:contents}
 .ff-movs{grid-area:movs}.ff-barras{grid-area:barras}.ff-salud{grid-area:salud}.ff-consejo{grid-area:consejo}
 .ff-cab{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:2px;min-height:0}
 .ff-h1{font-size:26px}
 .ff-placa{height:38px;padding:0 14px;font-size:14px;border-radius:12px}
 .ff-placa-neg{display:none}
 .ff-vidrio,.ff-salud,.ff-movs{padding:20px 18px}
 .ff-total{min-height:0}
 .ff-monto{font-size:30px}
 .ff-seg label{position:relative;height:36px;padding:0 14px;font-size:13px}
 .ff-seg label::before{content:'';position:absolute;inset:-4px 0}
 .ff-total-pie{flex-direction:column;align-items:stretch;gap:18px;padding-top:14px}
 /* Burbujas: geometría propia (centro 1.27× los lados), un poco más anchas
   que la tarjeta para ganar diámetro; la etiqueta cuelga bajo el monto. */
 .ff-burbujas{flex:none;max-width:none;width:calc(100% + 12px);margin-inline:-6px;aspect-ratio:468/176}
 .ff-burbujas-svg.pc{display:none}.ff-burbujas-svg.movil{display:block}
 .ff-bur{width:24%;white-space:normal;transform:translate(-50%,calc(-50% - 8px))}
 .ff-bur.cen{width:31%}
 .ff-bur b{font-size:clamp(16px,4.6cqi,20px);white-space:nowrap}
 .ff-bur span[aria-hidden]{position:absolute;left:0;right:0;top:100%;font-size:clamp(12px,3.2cqi,13.5px);line-height:1.2;white-space:normal;text-wrap:balance}
 .ff-botones{flex:none;flex-direction:row}
 .ff-botones .ff-btn{flex:1;height:48px;padding:0 14px}
 /* Movimientos: tarjeta y filas de dos renglones, como en iOS. */
 .ff-movs{position:relative;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(27,31,42,.05),0 20px 40px -22px rgba(27,31,42,.26)}
 .ff-movs-cab{grid-template-columns:minmax(0,1fr) auto;min-height:0;margin-bottom:6px}
 .ff-lupa{display:none}
 .ff-h2{font-size:20px}
 .ff-movs .ff-sub{font-size:13px;margin-top:4px}
 .ff-btn-chico{height:44px;padding:0 18px}
 .ff-mov{grid-template-columns:36px auto minmax(0,1fr) auto;grid-template-rows:auto auto;height:auto;min-height:66px;padding:10px 0;column-gap:12px;row-gap:3px}
 .ff-mov .ff-flecha{grid-row:1/3;width:36px;height:36px}
 .ff-mov .ff-nom{grid-column:2/4;grid-row:1;font-size:15px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
 .ff-mov .ff-fecha{grid-column:2;grid-row:2;text-align:left;font-size:13px}
 .ff-mov .ff-pill{grid-column:3;grid-row:2;justify-self:start;height:22px;padding:0 9px}
 .ff-mov .ff-imp{grid-column:4;grid-row:1/3;font-size:15px;font-weight:600}
 .ff-mov:last-child{padding-bottom:2px}
 /* Gráficas. */
 .ff-barras{min-height:0}
 .ff-barras-zona{height:150px;gap:8px}
 .ff-pista{height:96px}
 .ff-barra>span{font-size:12px}
 .ff-globo-k{display:none}.ff-globo-entero{display:inline}
 .ff-salud{min-height:244px}
 .ff-redondo{position:relative;width:36px;height:36px}
 .ff-redondo::before{content:'';position:absolute;inset:-4px;border-radius:50%}
 .ff-pt-etq{font-size:12px}
 /* Lo que más se vendió: el nombre hasta en dos renglones; la píldora y los
   vendidos en el suyo, con todo el ancho; el importe arriba, con el nombre. */
 .ff-fila{grid-template-columns:28px auto minmax(0,1fr) auto;grid-template-rows:auto auto;height:auto;padding:12px 14px;row-gap:6px;column-gap:10px}
 .ff-fila .ff-ini{grid-row:1/3}
 .ff-fila .ff-nom{grid-column:2/4;grid-row:1;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}
 .ff-fila .ff-col-pill{grid-column:2;grid-row:2}
 .ff-fila .ff-cant{grid-column:3/5;grid-row:2}
 .ff-fila .ff-imp{grid-column:4;grid-row:1;align-self:start;line-height:1.3}
 /* Atajos: cuatro círculos que caben aun a 320, sin carrusel. */
 .ff-atajos{min-height:0}
 .ff-circulos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
 .ff-circulos a{width:auto;min-width:0;font-size:12px}
 .ff-circulos a>span{width:52px;height:52px}
 .ff-atajos-pie{margin-top:0;padding-top:20px}
 .ff-grande span{white-space:normal}
 /* El consejo, al final, como nota. */
 .ff-consejo{padding:6px 4px 0}
 .ff-consejo h3{font-size:16px}
 .ff-consejo a{margin-top:0;padding-block:12px}
 body.pag-finanzas .panel-contexto>span{font-size:0}
}
@media(max-width:380px){
 .ff-total-cab{flex-wrap:wrap;gap:10px}
 .ff-total-txt{flex:1 1 100%}
 .ff-seg{order:-1;margin-left:auto}
 .ff-botones{flex-direction:column}
 .ff-botones .ff-btn{flex:none}
 .ff-salud{min-height:250px}
}
/* ══ Mis finanzas en CELULAR: la referencia móvil del dueño, igualita ════
   (docs/maquetas/finanzas-movil-referencia.png, oct-2026). Bloque propio
   .fm que sólo se ve a ≤760; el de PC (.ff-lienzo) se esconde ahí, y la
   barra de contexto también: el encabezado es el de la referencia. El dock
   del panel se queda (es la barra de abajo de la maqueta). Base = CLARO
   (blanco y gris perla); la gemela oscura vive en la capa OSCURA. La
   tarjeta destacada es azul con un resplandor lima en los dos temas. */
.fm{display:none}
@media(max-width:760px){
 body.pag-finanzas .ff-lienzo,body.pag-finanzas .col>:is(.panel-contexto,.barra){display:none}
 body.pag-finanzas #contenido-panel{padding-top:0}
 .fm{display:block;position:relative;color:#12151d;padding:max(12px,env(safe-area-inset-top)) 0 8px;
  --fm-fila:#fff;--fm-borde:rgba(23,26,34,.07);--fm-gris:#6b7180;--fm-ic:#14161b;--fm-sobre-ic:#fff;
  --fm-lima-txt:#4a6a00;--fm-sombra:0 1px 2px rgba(27,31,42,.05),0 14px 30px -20px rgba(27,31,42,.28)}
 .fm::before{content:'';position:absolute;z-index:-1;left:-16px;right:-16px;top:0;height:380px;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 0,rgba(31,111,209,.10),transparent 70%)}
 .fm :where(h1,h2,p,ol,ul){margin:0}
 .fm :is(a):focus-visible{outline:2px solid var(--ff-foco);outline-offset:3px}
 /* Encabezado: avatar, dos renglones, lupa y campana. */
 .fm-cab{display:flex;align-items:center;gap:12px;min-height:48px}
 .fm-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:600;
  color:#fff;background:linear-gradient(145deg,#2b86e6,#1d4f9c);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px -4px rgba(31,111,209,.5)}
 .fm-hola{flex:1;min-width:0;display:flex;flex-direction:column;font-size:inherit;line-height:1.2}
 .fm-hola span{font-size:13px;font-weight:400;color:var(--fm-gris)}
 .fm-hola b{font-size:16.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .fm-boton{flex:none;position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--fm-fila);border:1px solid var(--fm-borde);box-shadow:var(--fm-sombra);color:inherit}
 .fm-boton .ic{width:20px;height:20px}
 .fm-punto{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 0 2px var(--fm-fila)}
 /* El total, centrado. */
 .fm-total{text-align:center;padding:42px 0 30px}
 .fm-total h2{font-size:14px;font-weight:400;color:var(--fm-gris)}
 .fm-monto{margin-top:8px!important;font-size:clamp(34px,11vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
 .fm-signo{margin-right:.22em}
 .fm-var{display:inline-flex;align-items:center;gap:5px;margin-top:10px!important;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
 .fm-var.sube{color:var(--fm-lima-txt)}
 .fm-var.baja{color:#c2410c}.fm-var.baja .fm-var-ic{transform:scaleY(-1)}
 .fm-var.igual{color:var(--fm-gris)}
 .fm-var-ic{display:inline-grid}.fm-var-ic .ic{width:14px;height:14px}
 .fm-nota{max-width:30ch;margin:10px auto 0!important;font-size:12.5px;line-height:1.4;color:var(--fm-gris);text-wrap:balance}
 /* Tres píldoras. */
 .fm-pildoras{display:flex;gap:8px}
 .fm-pildoras a{flex:1 1 auto;min-width:0;height:50px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px 0 14px;
  border-radius:999px;background:var(--fm-fila);border:1px solid var(--fm-borde);box-shadow:var(--fm-sombra);
  font-size:14px;font-weight:500;color:inherit;white-space:nowrap;transition:transform .1s ease-out}
 .fm-pildoras a:active{transform:scale(.97)}
 .fm-circ{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-size:11px;font-weight:700;line-height:1}
 .fm-circ .ic{width:12px;height:12px}
 /* El número de pendientes va como globito encima del círculo (como el
    punto de la campana): el círculo con flecha se queda igual que en las
    otras dos píldoras. */
 .fm-circ{position:relative}
 .fm-globo{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:700;line-height:1;background:#D8FF47;color:#1a2200;box-shadow:0 0 0 2px var(--fm-globo-aro,#fff)}
 /* Secciones. */
 .fm-sec{margin-top:30px}
 .fm-h2{font-size:21px;font-weight:600;letter-spacing:-.015em;margin-bottom:14px!important}
 /* La tarjeta destacada: azul profundo con un resplandor lima tenue. */
 .fm-dest{position:relative;border-radius:28px;padding:10px 10px 16px;color:#fff;isolation:isolate;overflow:hidden;--fm-aro:linear-gradient(205deg,rgba(255,255,255,.85),rgba(170,210,255,.45) 30%,rgba(140,190,255,.12) 62%,rgba(140,190,255,.32));
  background:radial-gradient(70% 60% at 100% 100%,rgba(216,255,71,.26),transparent 70%),
   linear-gradient(120deg,#123a7a 0%,#1a5bb8 45%,#1f6fd1 72%,#2b86e6 100%);
  border:1px solid rgba(140,190,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 36px -18px rgba(31,111,209,.65)}
 /* Aro luminoso en todo el perímetro (brillo arriba a la derecha), sin
    violeta: un borde de 1px con degradado recortado por máscara. */
 .fm-dest::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;background:var(--fm-aro);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
 .fm-dest-fila{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:21px;background:#fff;color:#12151d;
  box-shadow:0 8px 20px -12px rgba(5,20,50,.5)}
 .fm-dest-pie{display:flex;align-items:center;gap:14px;padding:16px 6px 0 8px}
 .fm-dest-pie p{flex:1;min-width:0;font-size:15px;line-height:1.38;color:rgba(255,255,255,.92);text-wrap:pretty}
 .fm-dest-pie b{color:#fff;font-weight:650}
 .fm-dest-ir{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#0d1117;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -8px rgba(0,0,0,.6);transition:transform .1s ease-out}
 .fm-dest-ir:active{transform:scale(.95)}
 .fm-dest-ir .ic{width:22px;height:22px}
 /* Filas: círculo, dos renglones, cifra a la derecha. */
 .fm-lista{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px!important}
 .fm-h2+.fm-lista{margin-top:0!important}
 .fm-fila{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 16px;border-radius:22px;
  background:var(--fm-fila);border:1px solid var(--fm-borde);box-shadow:var(--fm-sombra)}
 .fm-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--fm-ic);color:var(--fm-sobre-ic);font-size:17px;font-weight:600}
 .fm-dest-fila .fm-ic{background:#14161b;color:#fff}
 .fm-ic .ic{width:18px;height:18px}
 .fm-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
 /* Dos renglones de una línea cada uno, como la referencia: el nombre con
    elipsis y el subrenglón también. */
 .fm-txt b{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .fm-txt>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:1.35;color:var(--fm-gris);font-variant-numeric:tabular-nums}
 /* Producto: cifra y lima en la misma línea; si el lima no cabe, baja a una
    segunda línea que la altura fija recorta: se cae entero, nunca a medias,
    y la cifra jamás se parte. */
 .fm-txt>.fm-sub{display:flex;flex-wrap:wrap;column-gap:7px;height:1.35em;text-overflow:clip}
 .fm-sub>*{white-space:nowrap}
 .fm-dest-fila .fm-txt>span{color:#6b7180}
 .fm-lima{font-style:normal;font-weight:500;color:var(--fm-lima-txt)}
 /* En la fila blanca el lima de la marca no se lee sobre blanco: el dato va
    en un verde lima hondo (5:1 sobre #fff). La fila es blanca en los dos
    temas, así que su gemela oscura repite el mismo valor (abajo). */
 .fm-dest-fila .fm-lima{color:#4d7c0f;font-weight:600}
 .fm-der{flex:none;max-width:42%;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;font-variant-numeric:tabular-nums}
 .fm-der b{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
 .fm-der b small{font-size:12px;font-weight:500;color:var(--fm-gris)}
 .fm-dest-fila .fm-der b small{color:#6b7180}
 .fm-der>span{font-size:13px;color:var(--fm-gris);white-space:nowrap}
 .fm-dest-fila .fm-der>span{color:#6b7180}
 .fm-mov.devuelta .fm-der b{color:#c2410c}
 .fm-ic-flecha{background:transparent;border:1px solid var(--fm-borde);color:inherit;width:42px;height:42px}
 .fm-mov.devuelta .fm-ic-flecha{color:#c2410c}
 .fm-vacia p{flex:1;font-size:14px;line-height:1.4;color:var(--fm-gris)}
 .fm-vacia .fm-ic{background:transparent;border:1px solid var(--fm-borde);color:var(--fm-gris)}
 .fm-pie{margin-top:22px!important;padding:0 4px;font-size:12.5px;line-height:1.45;color:var(--fm-gris)}
}
@media(max-width:360px){
 .fm-cab{gap:10px}
 /* Lupa y campana se quedan en 44 (mínimo táctil); sólo encoge el avatar. */
 .fm-avatar{width:40px;height:40px}
 .fm-pildoras{gap:6px}
 .fm-pildoras a{gap:6px;padding:0 8px 0 11px;font-size:13px}
 .fm-circ{width:20px;height:20px}
 .fm-fila{padding:12px 14px;gap:10px}
 .fm-ic{width:40px;height:40px}
 .fm-txt b{font-size:15px}
 .fm-der b{font-size:16px}
}
@media(max-width:340px){
 /* A 320 los tres textos caben con círculos de 18 px y letra de 12 px; el
    relleno lateral se queda en 8/10 para que el icono no toque el borde. */
 .fm-pildoras{gap:5px}
 .fm-pildoras a{padding:0 8px 0 10px;font-size:12px;gap:5px}
 .fm-circ{width:18px;height:18px;border-width:1.25px}
 .fm-circ .ic{width:10px;height:10px}
 .fm-globo{top:-6px;right:-7px;min-width:14px;height:14px;font-size:9px;padding:0 3px}
 .fm-hola b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.fm-pildoras a,.fm-dest-ir{transition:none}.fm-pildoras a:active,.fm-dest-ir:active{transform:none}}
/* ══ Capa OSCURA (el tema por defecto) ════════════════════════════════
   Grafito, cromo y un filo de luz cian. Cada regla aquí es la gemela oscura
   de un color claro de arriba; ver la nota al principio del archivo. */
html:not([data-panel-tema="claro"]) body:is(.panel-futuro,.acceso){
 --fondo:#0a0b0e;--superficie:#15171b;--superficie2:#1d1f24;--tinta:#f0f1f3;--tinta2:#a1a5ad;--tinta3:#80858e;
 --separador:#ffffff14;--tinte:#e4e6ea;--verde:#6fd6a3;--verde-vivo:#3cc58a;--verde-suave:#15302a;
 --rojo:#ff8e8e;--rojo-suave:#3a1f24;--ambar:#f1bf82;--ambar-barra:#e0a766;--ambar-suave:#33281a;
 --barra:#0d0e11e8;--lateral:#101216;--sombra:inset 0 1px 0 #ffffff0b,0 12px 30px #0007;
 color-scheme:dark;background:radial-gradient(ellipse at 85% 0,#12242d 0,transparent 50%),radial-gradient(ellipse at 0 100%,#161219 0,transparent 45%),#0a0b0e;
}
html:not([data-panel-tema="claro"]) .panel-futuro ::selection{background:#2f6f7d;color:#fff}
html:not([data-panel-tema="claro"]) .panel-futuro :is(button,a,input,textarea,select,summary):focus-visible{outline-color:#62d2e8}
html:not([data-panel-tema="claro"]) .panel-contexto i{color:#4f535b}
html:not([data-panel-tema="claro"]) .panel-herramientas>a,html:not([data-panel-tema="claro"]) #panel-tema{border-color:#ffffff1a;background:#ffffff0a;color:var(--tinta)}
html:not([data-panel-tema="claro"]) .panel-futuro .avatar-perfil{background:linear-gradient(140deg,#3b3e45,#1c1e23);color:#eceef1;border-color:#ffffff24;box-shadow:0 4px 14px #0006}
html:not([data-panel-tema="claro"]) .panel-futuro .campana{background:#ffffff0a;border-color:#ffffff1a}
html:not([data-panel-tema="claro"]) .panel-futuro .grupo>h2,html:not([data-panel-tema="claro"]) .panel-futuro .plegable h2{color:#9ea2aa}
html:not([data-panel-tema="claro"]) .panel-futuro :is(.lista,.tarjeta),html:not([data-panel-tema="claro"]) .panel-futuro .ojo{border-color:#ffffff12;background:#15171bd9}
html:not([data-panel-tema="claro"]) .panel-futuro :is(.ficha,.ficha.gris){background:#23262c;color:#c9ccd2}
/* La tarjeta de "quién contesta" conserva su color en oscuro: ahí el color
   ES el estado (verde = el asistente, ámbar = tú), no adorno. */
html:not([data-panel-tema="claro"]) .panel-futuro .quien-contesta .ficha.verde{background:var(--verde-suave);color:var(--verde)}
html:not([data-panel-tema="claro"]) .panel-futuro .quien-contesta .ficha.ambar{background:var(--ambar-suave);color:var(--ambar)}
html:not([data-panel-tema="claro"]) .indicador{border-color:#ffffff12;background:linear-gradient(140deg,#181a1f,#121418)}
html:not([data-panel-tema="claro"]) .indicador-cima{color:#a4a8b0}
html:not([data-panel-tema="claro"]) .indicador-cima .ic{color:#dfe2e6}
html:not([data-panel-tema="claro"]) .indicador-cima .ic:last-child{color:#6f747d}
html:not([data-panel-tema="claro"]) .indicador-ambar{background:linear-gradient(135deg,#241e15,#15161a);border-color:#f1bf8226}
html:not([data-panel-tema="claro"]) .panel-futuro .ojo-tile.gris{background:#23262c;color:#aab0ba}
html:not([data-panel-tema="claro"]) .panel-futuro .ojo-accion{background:#22252b;border-color:#ffffff14;color:#e3e5e9;box-shadow:inset 0 1px 0 #ffffff0d}
html:not([data-panel-tema="claro"]) .panel-futuro .accesos a{border-color:#ffffff12;background:#15171bd9}
html:not([data-panel-tema="claro"]) .panel-futuro .accesos a .ic{color:#e2e5e9}
html:not([data-panel-tema="claro"]) .panel-futuro .campo:focus-within{background:#62d2e80d}
html:not([data-panel-tema="claro"]) .panel-futuro .boton{background:linear-gradient(#f5f6f8,#d4d7dc);color:#111317;box-shadow:inset 0 1px 0 #fff}
html:not([data-panel-tema="claro"]) .panel-futuro .boton.tinta{background:linear-gradient(#3a3e45,#23262b);color:#fff;box-shadow:inset 0 1px 0 #ffffff1f}
html:not([data-panel-tema="claro"]) .panel-futuro :is(.boton.suave,.boton.gris){background:linear-gradient(#2a2d33,#1f2126);color:#e6e8ec;border-color:#ffffff14;box-shadow:none}
html:not([data-panel-tema="claro"]) .panel-futuro .boton.verde{background:#1f8a60;color:#fff}
html:not([data-panel-tema="claro"]) .panel-futuro .boton.rojo{background:#c2414d;color:#fff}
html:not([data-panel-tema="claro"]) .panel-futuro .b-cliente{background:#1c1f24;border-color:#ffffff12;color:#eceef1}
html:not([data-panel-tema="claro"]) .panel-futuro .b-nosotros{background:linear-gradient(120deg,#132b34,#18323d);color:#d8edf4;border-color:#27505e}
html:not([data-panel-tema="claro"]) .panel-futuro .b-nosotros .sello{color:#8db4c3}
html:not([data-panel-tema="claro"]) .panel-futuro .escribir{background:#0f1115ee;border-color:#ffffff14;box-shadow:0 -10px 30px #0006}
html:not([data-panel-tema="claro"]) .panel-futuro .escribir textarea{background:#1a1c21;border-color:#ffffff17;color:var(--tinta)}
html:not([data-panel-tema="claro"]) .panel-futuro .escribir button{background:#f1f2f4;color:#111317}
html:not([data-panel-tema="claro"]) .panel-futuro .escribir .tomar-yo{background:linear-gradient(#2a2d33,#1f2126);color:#e6e8ec;border-color:#ffffff14;box-shadow:none}
html:not([data-panel-tema="claro"]) .panel-futuro .cal-selector .serv-ico{background:#1d2a31;color:#b7d4e2;box-shadow:none}
html:not([data-panel-tema="claro"]) .panel-futuro .hoja{background:#15171b;border-color:#ffffff14;box-shadow:0 25px 80px #000a}
html:not([data-panel-tema="claro"]) .panel-futuro .boton-hoja{background:#f1f2f4;color:#111317}
html:not([data-panel-tema="claro"]) .panel-futuro .boton-hoja.peligro{background:transparent;color:var(--rojo)}
html:not([data-panel-tema="claro"]) .panel-futuro :is(.boton-hoja.punteado,.boton-hoja.secundario){background:#24272d;color:#dfe2e7}
@media(min-width:900px){
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral{background:linear-gradient(150deg,#16181cdd,#0e1013d0);border-color:#ffffff12;box-shadow:inset 0 1px 0 #ffffff0b,0 16px 40px #0006}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral .marca{color:#f1f2f4}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral .marca i{background:linear-gradient(#f6f7f9,#cfd3d8);color:#111317;box-shadow:inset 0 1px 0 #fff}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral .marca small{color:#868b94}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral .plegar{background:#ffffff0d;border-color:#ffffff1a;color:#a4a8b0}
 html:not([data-panel-tema="claro"]) .espacio-negocio{background:#ffffff07;border-color:#ffffff12}
 html:not([data-panel-tema="claro"]) .espacio-negocio>span{background:linear-gradient(#2b2e34,#1c1e22);border-color:#ffffff1a;color:#d4d7dc}
 html:not([data-panel-tema="claro"]) .espacio-negocio small{color:#7f848d}
 html:not([data-panel-tema="claro"]) .espacio-negocio b{color:#d6d9de}
 html:not([data-panel-tema="claro"]) .nav-seccion{color:#6c717a}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral a{color:#a9adb5}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral a.on{background:linear-gradient(#f6f7f9,#d6d9de);border-color:#ffffffb0;color:#111317;box-shadow:inset 0 1px 0 #fff,0 4px 14px #0006}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral a.on .ic{color:#111317}
 html:not([data-panel-tema="claro"]) .firma-panel{border-top-color:#ffffff12;color:#767b84}
}
@media(max-width:899px){
 html:not([data-panel-tema="claro"]) .panel-futuro>nav{background:#121418e8;border-color:#ffffff14;box-shadow:0 10px 40px #0009,inset 0 1px 0 #ffffff0d}
 html:not([data-panel-tema="claro"]) .panel-futuro>nav a{color:#9ba0a8}
 html:not([data-panel-tema="claro"]) .panel-futuro>nav a.on{background:linear-gradient(#f6f7f9,#d6d9de);color:#111317}
}
@media(hover:hover) and (pointer:fine){
 html:not([data-panel-tema="claro"]) .panel-futuro :is(a.item,button.item):hover{background-color:#1d2025}
 html:not([data-panel-tema="claro"]) .panel-futuro :is(.accesos a,.indicador,.campana):hover{box-shadow:inset 0 1px 0 #ffffff12,0 9px 25px #0008}
 html:not([data-panel-tema="claro"]) .panel-futuro .lateral a:hover:not(.on){background:#ffffff0f;color:#f1f2f4}
 html:not([data-panel-tema="claro"]) .panel-futuro .ojo-accion:hover{background:#2c3037;color:#fff}
 html:not([data-panel-tema="claro"]) #panel-tema:hover{background:#ffffff14}
}
@media(prefers-reduced-transparency:reduce){
 html:not([data-panel-tema="claro"]) .panel-futuro :is(.barra.pegada,nav,.escribir,.lateral){background:#121418}
}
@media(prefers-contrast:more){
 html:not([data-panel-tema="claro"]) body.panel-futuro{--tinta2:#cbced4;--tinta3:#b3b7bf;--separador:#888;
  --superficie-3d:linear-gradient(180deg,#2b2f36 0%,#1b1e23 100%);
  --superficie-3d-chica:linear-gradient(180deg,#333840 0%,#212429 100%);
  --relieve:inset 0 1px 0 #ffffff45,inset 0 -1px 0 #000,0 2px 4px #000000d9,0 18px 34px -12px #000;
  --relieve-chico:inset 0 1px 0 #ffffff45,inset 0 -1px 0 #000,0 2px 4px #000000d9,0 7px 16px -5px #000}
}
/* ── Mis finanzas, en oscuro: la misma composición sobre el fondo del panel,
   con las cajas en el vidrio grafito de las demás pantallas. El "negro" de
   botones, punto y globo se invierte a perla. ── */
html:not([data-panel-tema="claro"]) body.pag-finanzas{--ff-tinta:#f0f1f3;--ff-tinta2:#a4a8b0;--ff-tinta3:#8b9099;--ff-separador:rgba(255,255,255,.07);--ff-negro:#f1f2f5;--ff-negro-hover:#fff;--ff-sobre-negro:#111317;--ff-foco:#62d2e8}
html:not([data-panel-tema="claro"]) .ff-vidrio{background:var(--superficie-3d);border-color:rgba(255,255,255,.045);box-shadow:var(--relieve)}
html:not([data-panel-tema="claro"]) .ff-vacio-ic{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html:not([data-panel-tema="claro"]) .ff-seg{background:rgba(255,255,255,.06)}
html:not([data-panel-tema="claro"]) .ff-seg input:checked+label{background:rgba(255,255,255,.14);color:#f0f1f3;box-shadow:none}
html:not([data-panel-tema="claro"]) .ff-burbujas-svg{filter:drop-shadow(0 12px 30px rgba(30,100,190,.35))}
/* Oscuro (queja del dueño, oct-2026): el círculo de Semana y los puentes son UN
   solo azul, sin aro ni costuras; los lados son grafito sólido que pasa al azul
   con una transición larga, y la capa de vidrio lateral se apaga: su máscara se
   desvanece en vertical y, sobre grafito, se leía como franja. */
html:not([data-panel-tema="claro"]) .ff-s-lado{stop-color:#262b33;stop-opacity:1}html:not([data-panel-tema="claro"]) .ff-s-1{stop-color:#262b33;stop-opacity:1}html:not([data-panel-tema="claro"]) .ff-s-2{stop-color:#272e39}html:not([data-panel-tema="claro"]) .ff-s-3{stop-color:#2962a1}html:not([data-panel-tema="claro"]) .ff-s-4,html:not([data-panel-tema="claro"]) .ff-s-5{stop-color:#2a76c8}
html:not([data-panel-tema="claro"]) .ff-c-0{stop-color:#3584d8}html:not([data-panel-tema="claro"]) .ff-c-1,html:not([data-panel-tema="claro"]) .ff-c-2{stop-color:#2a76c8}html:not([data-panel-tema="claro"]) .ff-c-3{stop-color:#2a76c8;stop-opacity:1}
html:not([data-panel-tema="claro"]) .ff-burbujas-svg circle[mask]{opacity:0}
html:not([data-panel-tema="claro"]) .ff-btn-negro{box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
html:not([data-panel-tema="claro"]) .ff-btn-contorno{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:#f0f1f3}
html:not([data-panel-tema="claro"]) .ff-cuenta{background:rgba(17,19,23,.10)}
html:not([data-panel-tema="claro"]) .ff-chip{background:rgba(255,255,255,.08);color:#e2e4e9}
html:not([data-panel-tema="claro"]) .ff-barra i{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border-color:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html:not([data-panel-tema="claro"]) .ff-barra.hoy i{background:linear-gradient(180deg,#D8FF47 0%,#8fd77a 22%,#2f86d8 62%,#1f63b8 100%);border-color:rgba(255,255,255,.14);box-shadow:0 10px 24px -10px rgba(43,127,224,.5)}
html:not([data-panel-tema="claro"]) .ff-salud{border-color:rgba(255,255,255,.14);
 background:radial-gradient(80% 60% at 100% 0%,rgba(255,255,255,.08),transparent 60%),linear-gradient(165deg,#1f6fd1 0%,#1b62b8 55%,#174f93 100%);
 box-shadow:0 18px 40px -12px rgba(10,40,90,.6),inset 0 1px 0 rgba(255,255,255,.12)}
html:not([data-panel-tema="claro"]) .ff-redondo{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
html:not([data-panel-tema="claro"]) .ff-curva-linea{stroke:#eaf0ff}
html:not([data-panel-tema="claro"]) .ff-pt.fin{background:#D8FF47}
html:not([data-panel-tema="claro"]) .ff-fila.destacada{background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html:not([data-panel-tema="claro"]) .ff-ini{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
html:not([data-panel-tema="claro"]) .ff-pill.azul{box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
html:not([data-panel-tema="claro"]) .ff-pill.blanca{background:rgba(255,255,255,.08);color:#d6dae3;box-shadow:none}
html:not([data-panel-tema="claro"]) .ff-placa{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);box-shadow:none}
@media(max-width:760px){ html:not([data-panel-tema="claro"]) .ff-movs{background:var(--superficie-3d);border-color:rgba(255,255,255,.045);box-shadow:var(--relieve)} }
html:not([data-panel-tema="claro"]) .ff-barra.cero .ff-pista{background:rgba(255,255,255,.015);border-color:rgba(255,255,255,.14)}
html:not([data-panel-tema="claro"]) .ff-flecha{background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico);color:#e2e4e9}
html:not([data-panel-tema="claro"]) .ff-circulos a>span{background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico)}
html:not([data-panel-tema="claro"]) .ff-circulos a.nuevo>span{background:transparent;border-color:rgba(255,255,255,.25);box-shadow:none}
/* Celular, oscuro: la referencia tal cual —grafito casi negro, filas de
   vidrio oscuro, la tarjeta destacada de negro a azul con resplandor lima. */
@media(max-width:760px){
 html:not([data-panel-tema="claro"]) .fm{color:#f2f3f5;--fm-fila:linear-gradient(180deg,#17191e,#121418);--fm-borde:rgba(255,255,255,.07);--fm-gris:#9a9fa8;
  --fm-ic:#0b0c0f;--fm-sobre-ic:#f2f3f5;--fm-lima-txt:#D8FF47;--fm-sombra:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px -18px rgba(0,0,0,.8)}
 html:not([data-panel-tema="claro"]) .fm::before{background:radial-gradient(50% 55% at 50% 0,rgba(120,150,210,.16),transparent 72%)}
 html:not([data-panel-tema="claro"]) .fm-avatar{background:linear-gradient(145deg,#3a3e46,#17191d);color:#f2f3f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08)}
 html:not([data-panel-tema="claro"]) .fm-punto{box-shadow:0 0 0 2px #15171b}
 html:not([data-panel-tema="claro"]) .fm-var.baja,html:not([data-panel-tema="claro"]) .fm-mov.devuelta .fm-der b,html:not([data-panel-tema="claro"]) .fm-mov.devuelta .fm-ic-flecha{color:#ff9b8a}
 html:not([data-panel-tema="claro"]) .fm-fila .fm-ic:not(.fm-ic-flecha){box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
 html:not([data-panel-tema="claro"]) .fm-dest-fila .fm-lima{color:#4d7c0f}
 html:not([data-panel-tema="claro"]) .fm{--fm-globo-aro:#15171b}
 html:not([data-panel-tema="claro"]) .fm-dest{border-color:transparent;--fm-aro:linear-gradient(205deg,rgba(220,236,255,.95),rgba(110,170,255,.6) 28%,rgba(70,130,230,.22) 60%,rgba(120,180,255,.45));
  background:radial-gradient(60% 55% at 100% 100%,rgba(216,255,71,.16),transparent 70%),
   linear-gradient(120deg,#0b0e16 0%,#0f1d3b 38%,#163f86 68%,#1f6fd1 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 44px -20px rgba(31,111,209,.55)}
}
@media(hover:hover) and (pointer:fine){
 html:not([data-panel-tema="claro"]) .ff-btn-contorno:hover{background:rgba(255,255,255,.10)}
 html:not([data-panel-tema="claro"]) .ff-redondo:hover{background:rgba(255,255,255,.2)}
 html:not([data-panel-tema="claro"]) .ff-lupa:hover{background:rgba(255,255,255,.08)}
}
/* ══ Relieve: cajas sin borde, con volumen ═══════════════════════════
   El borde de 1px dibujaba el contorno de cada caja y la dejaba plana.
   Ahora ninguna lleva borde —sólo la tarjeta de ingresos, que es una
   tarjeta física— y el volumen lo dan la luz y la sombra: la superficie
   aclara hacia arriba, un brillo fino en el canto superior, una sombra en
   el inferior y una sombra de elevación que la despega del fondo. Cada
   tema pone sus valores en los mismos nombres. */
body:is(.panel-futuro,.acceso){
 --superficie-3d:linear-gradient(180deg,#fff 0%,#f4f5f7 100%);
 --superficie-3d-chica:linear-gradient(180deg,#fff 0%,#eef0f3 100%);
 --relieve:inset 0 1px 0 #fff,inset 0 -1px 0 #1b1f2a14,0 1px 2px #1b1f2a14,0 14px 30px -14px #1b1f2a38;
 --relieve-chico:inset 0 1px 0 #fff,inset 0 -1px 0 #1b1f2a17,0 1px 2px #1b1f2a1a,0 5px 12px -6px #1b1f2a2e;
 --relieve-alto:inset 0 1px 0 #fff,inset 0 -1px 0 #1b1f2a14,0 2px 4px #1b1f2a1a,0 24px 42px -14px #1b1f2a47;
}
html:not([data-panel-tema="claro"]) body:is(.panel-futuro,.acceso){
 --superficie-3d:linear-gradient(180deg,#1d1f24 0%,#131519 100%);
 --superficie-3d-chica:linear-gradient(180deg,#25282e 0%,#17191d 100%);
 --relieve:inset 0 1px 0 #ffffff17,inset 0 -1px 0 #000000a6,0 1px 2px #000000b3,0 16px 34px -14px #000000e6;
 --relieve-chico:inset 0 1px 0 #ffffff1c,inset 0 -1px 0 #0000009e,0 1px 2px #000000a6,0 5px 12px -4px #000000b3;
 --relieve-alto:inset 0 1px 0 #ffffff21,inset 0 -1px 0 #000000a6,0 2px 4px #000000b3,0 26px 46px -14px #000000f2;
}
/* Cajas: superficie con volumen. */
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.lista,.tarjeta,.ojo,.accesos a,.mini){border-color:transparent;background:var(--superficie-3d);box-shadow:var(--relieve)}
/* Indicadores: conservan su tinte (el ámbar de "por confirmar"), pierden el borde. */
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro .indicador{border-color:transparent;box-shadow:var(--relieve)}
/* Paneles oscuros en los dos temas: la gráfica y el calendario. */
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.ventas7,.cal-tarjeta){border-color:transparent;box-shadow:inset 0 1px 0 #cdefff2b,inset 0 -1px 0 #000000b3,0 1px 2px #0000008c,0 18px 40px -14px #0a0c14d9}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.v7-tile,.cal-nav){border-color:transparent;box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #00000080,0 2px 6px #0006}
/* Controles chicos: pastillas y botones secundarios. */
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.panel-herramientas>a,#panel-tema,.campana,.ojo-accion,.boton.suave,.boton.gris,.lateral .plegar,.espacio-negocio,.espacio-negocio>span){border-color:transparent;background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico)}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro .avatar-perfil{border-color:transparent;box-shadow:var(--relieve-chico)}
/* La barra lateral, el dock, las hojas y las burbujas: sin contorno. */
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.lateral,.lateral a.on,.hoja){border-color:transparent}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro>nav{border-color:transparent}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.b-cliente,.b-nosotros){border-color:transparent;box-shadow:var(--relieve-chico)}
@media(hover:hover) and (pointer:fine){
 :is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) body.panel-futuro :is(.accesos a,.indicador,.campana,.ojo):hover{box-shadow:var(--relieve-alto)}
}
/* Con "Aumentar contraste" NO vuelve el contorno: el dueño lo quitó a
   propósito y con la línea de vuelta veía su panel como antes. En su lugar,
   ese modo sube el contraste de la SUPERFICIE y de la sombra (arriba, en
   las fichas), que separa las cajas igual de bien sin dibujar la raya. */
/* ══ Barra lateral sin deslizar: grupos con submenú ══════════════════
   Seis renglones a la vista y lo demás en dos grupos (Ventas, Agenda) que
   despliegan su submenú a un lado: al pasar el cursor (CSS), con un toque o
   con el teclado (guion). La barra ya no se desliza: overflow visible para
   que el submenú salga de ella, y z-index para que quede SOBRE las tarjetas
   (varias abren su propio contexto de apilamiento). */
@media(min-width:900px){
 .panel-futuro .lateral{overflow:visible;z-index:50}
 .panel-futuro .lateral .grupo-nav{position:relative}
 .panel-futuro .lateral :is(.grupo-boton,.salir-lateral){display:flex;align-items:center;gap:11px;width:100%;min-height:45px;padding:10px 13px;border:0;border-radius:99px;background:none;color:var(--tinta2);font:inherit;font-size:14px;font-weight:450;text-align:left;cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
 .panel-futuro .lateral :is(.grupo-boton,.salir-lateral) .ic{width:19px;height:19px;flex-shrink:0;stroke-width:1.5}
 .panel-futuro .lateral .grupo-boton .flecha{display:grid;margin-left:auto;opacity:.5;transition:opacity 160ms ease,transform 200ms var(--ease-out)}
 .panel-futuro .lateral .grupo-boton .flecha .ic{width:13px;height:13px}
 .panel-futuro .lateral .grupo-nav.con-activo>.grupo-boton{color:var(--tinta);background:#8881}
 .panel-futuro .lateral .grupo-nav.con-activo>.grupo-boton::after{content:'';position:absolute;left:5px;top:50%;width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--verde)}
 .panel-futuro .lateral .grupo-boton{position:relative}
 .panel-futuro .lateral .submenu{display:none;position:absolute;left:calc(100% + 16px);top:-10px;min-width:232px;flex-direction:column;gap:2px;padding:8px;border-radius:22px;background:var(--superficie-3d);box-shadow:var(--relieve-alto);z-index:60}
 /* El puente: el hueco entre el renglón y el submenú también es "encima",
    si no, el cursor lo cerraría al cruzarlo. */
 .panel-futuro .lateral .submenu::before{content:'';position:absolute;left:-18px;top:0;bottom:0;width:18px}
 .panel-futuro .lateral .submenu-titulo{margin:6px 12px 6px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3)}
 .panel-futuro .lateral .grupo-nav.abierto>.submenu,.panel-futuro .lateral .grupo-nav:has(:focus-visible)>.submenu{display:flex}
 .panel-futuro .lateral .grupo-nav.abierto>.grupo-boton .flecha{opacity:1;transform:translateX(2px)}
 .panel-futuro .lateral .abajo{display:flex;flex-direction:column;gap:2px}
 .panel-futuro .lateral .salir-lateral:hover{color:var(--rojo);background:color-mix(in srgb,var(--rojo) 9%,transparent)}
 .panel-futuro .lateral .salir-lateral:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
 /* Plegada (sólo íconos): el renglón se centra, pero el submenú SÍ enseña
    los nombres — ahí es donde más se necesitan. */
 html.plegada .panel-futuro .lateral :is(.grupo-boton,.salir-lateral){justify-content:center;padding:10px 6px;gap:0}
 html.plegada .panel-futuro .lateral :is(.grupo-boton,.salir-lateral)>span,html.plegada .panel-futuro .lateral .grupo-boton .flecha{display:none}
 html.plegada .panel-futuro .lateral .submenu a{justify-content:flex-start;padding:10px 13px;gap:11px;min-height:45px}
 html.plegada .panel-futuro .lateral .submenu a span{display:inline}
 html.plegada .panel-futuro .lateral .submenu a .ic{width:19px;height:19px;padding:0;background:none;box-shadow:none;color:inherit}
 /* Plegada, el renglón de icono pierde su píldora (la lleva el icono), pero
    el submenú flotante NO: sin ella, en claro, el activo quedaba en letra
    blanca sobre el menú blanco. Gemela oscura abajo. */
 html.plegada .panel-futuro .lateral .submenu a.on{background:linear-gradient(#2b2d32,#191b1e);box-shadow:inset 0 1px 0 #ffffff28,0 4px 12px #20273812}
 html.plegada:not([data-panel-tema="claro"]) .panel-futuro .lateral .submenu a.on{background:linear-gradient(#f6f7f9,#d6d9de);color:#111317;box-shadow:inset 0 1px 0 #fff,0 4px 14px #0006}
 html.plegada .panel-futuro .lateral .grupo-nav.con-activo>.grupo-boton::after{left:3px}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 .panel-futuro .lateral .grupo-nav:hover>.submenu{display:flex}
 .panel-futuro .lateral .grupo-nav:hover>.grupo-boton{color:var(--tinta);background:#8882}
 .panel-futuro .lateral .grupo-nav:hover>.grupo-boton .flecha{opacity:1;transform:translateX(2px)}
}
/* Pantallas bajitas: todo más compacto para que siga cabiendo sin deslizar. */
@media(min-width:900px) and (max-height:700px){
 .panel-futuro .lateral{padding-block:16px 14px}
 .panel-futuro .lateral .marca{padding-bottom:14px}
 .panel-futuro .lateral .espacio-negocio{display:none}
 .panel-futuro .lateral :is(a,.grupo-boton,.salir-lateral){min-height:40px;padding-block:8px}
}
/* "Cerrar sesión" dentro de "Tu cuenta" (Mi negocio): el lugar a la vista
   en el celular. */
.panel-futuro .salir-cuenta{width:100%;border:0;background:none;font:inherit;color:var(--rojo);text-align:left;cursor:pointer}
.panel-futuro .salir-cuenta .ic{width:20px;height:20px}
/* ══ Acceso: entrar, registro, el código y el selector ═══════════════
   Las pantallas de antes de tener sesión, con la misma materia del panel:
   telón oscuro con un resplandor detrás, tarjeta en relieve, tipografía
   apretada. Orden de la puerta: primero el correo (lo nuestro), y debajo
   los proveedores.

   Éstas SIEMPRE van en oscuro, aunque la persona haya elegido el tema claro
   para su panel: son la puerta de la casa y su telón es parte de la marca.
   Lo fija el guion del <head> (ver la función pagina), y por eso aquí no hay
   reglas de tema claro: si alguien agrega una, no se pintaría nunca. */
body.acceso{min-height:100dvh;background:var(--fondo);color:var(--tinta);
 /* Aquí no hay dock flotante que esquivar: el aire que el panel reserva
    abajo (92 px) era un hueco muerto al final de la puerta. */
 padding-bottom:0;
 font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;isolation:isolate}
body.acceso::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(58% 42% at 50% -8%,#16323d 0%,transparent 62%),radial-gradient(46% 34% at 8% 104%,#12281f 0%,transparent 70%)}
/* ── Una sola columna para todo ──────────────────────────────────────
   La marca medía 460, el título iba a todo lo ancho pegado a la
   izquierda y la tarjeta se centraba sola con su propio ancho: a media
   pantalla los tres se veían desalineados. Ahora los cuatro bloques
   comparten ancho, centro y sangría. */
.acceso :is(.acceso-cima,.barra,.titulo-grande,.mascota,main){width:100%;max-width:460px;margin-inline:auto}
.acceso .titulo-grande{padding:4px 16px 18px}
.acceso main{padding-inline:16px}
.acceso .titulo-grande h1{font-size:clamp(28px,7.6vw,38px);font-weight:550;letter-spacing:-.05em;line-height:1.08}
.acceso .titulo-grande p{color:var(--tinta2);font-size:14px;margin-top:9px}
/* La marca, como la firma de la puerta. */
.acceso-cima{display:flex;align-items:flex-start;justify-content:center;gap:16px;padding:5vh 16px 0}
.acceso-marca{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.055em}
.acceso .barra{padding-top:8px}
/* ── La mascota del dueño ────────────────────────────────────────────
   El archivo es la MÁSCARA y el color lo pone el tema, así que la misma
   figura sirve en oscuro y en claro. Saluda al entrar y escribe al
   registrarse; con poco movimiento, se queda quieta.

   Comparte una fila con el título, pero ocupa su propia columna. El globo
   tiene una fila separada encima del dibujo: ambos reservan su altura y
   nunca dependen de superponerse al texto o al formulario.

   Las medidas están en LO DIBUJADO, no en el cuadro del archivo: los dos
   SVG son de 810×810 pero la tinta no lo llena, y si se midiera el cuadro
   cada mascota saldría de un tamaño distinto. De ahí las tres fracciones
   (--der, --abajo, --ancho): el aire que cada dibujo deja en su cuadro. */
.acceso .col{
 --masc-ancho:clamp(112px,32vw,164px);
}
.acceso .col:has(.mascota.saluda){--der:.211;--abajo:.168;--ancho:.647;--alto:.698}
.acceso .col:has(.mascota.escribe){--der:.044;--abajo:.119;--ancho:.933;--alto:.803}
.acceso .col:has(.mascota){
 --cuadro:calc(var(--masc-ancho)/var(--ancho));--masc-alto:calc(var(--cuadro)*var(--alto));
 display:grid;grid-template-columns:minmax(0,1fr) var(--masc-ancho);
 grid-template-rows:auto auto auto 1fr;column-gap:24px;align-content:start;
 width:100%;max-width:460px;margin-inline:auto;padding-inline:16px;
}
.acceso .col:has(.mascota)>.acceso-cima{grid-column:1/-1;grid-row:1;padding-inline:0}
body.acceso .col:has(.mascota)>.barra{grid-column:1/-1;grid-row:2;position:static;padding:8px 0 0;margin:0}
.acceso .col:has(.mascota)>.barra:has(.izq:empty){height:28px;min-height:28px;padding:0}
body.acceso .col:has(.mascota)>.titulo-grande{grid-column:1;grid-row:3;align-self:center;min-width:0;padding:0 0 24px}
.acceso .col:has(.mascota)>.titulo-grande p{padding-right:0;overflow-wrap:break-word}
.acceso .col:has(.mascota)>.mascota{grid-column:2;grid-row:3;align-self:end;padding:18px 0 24px}
/* Sólo el saludo se asoma por detrás del correo; el globo conserva su fila. */
.acceso .col:has(.mascota.saluda)>.mascota{padding-bottom:0;margin-bottom:calc(var(--masc-alto)*-.28)}
body.acceso .col:has(.mascota)>main{grid-column:1/-1;grid-row:4;min-width:0;padding-inline:0}
/* Orden de lectura: marca, regreso, título e ilustración, formulario. */
.acceso .col>.acceso-cima{order:1}
.acceso .col>.barra{order:2}
.acceso .col>.titulo-grande{order:3}
.acceso .col>.mascota{order:4}
.acceso .col>main{order:5}
.mascota{position:relative;z-index:0;pointer-events:none}
.mascota .caja{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;height:auto}
.mascota .figura{display:block;flex:none;width:var(--masc-ancho);height:var(--masc-alto);
 -webkit-mask-size:var(--cuadro) var(--cuadro);mask-size:var(--cuadro) var(--cuadro);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:right calc(var(--cuadro)*var(--der)*-1) bottom calc(var(--cuadro)*var(--abajo)*-1);
 mask-position:right calc(var(--cuadro)*var(--der)*-1) bottom calc(var(--cuadro)*var(--abajo)*-1);
 background:linear-gradient(170deg,#fff,#b9c0c7);transform-origin:50% 84%;
 filter:drop-shadow(0 10px 22px #0007);animation:mascota-entra .75s var(--ease-out) both}
.mascota.saluda .figura{animation:mascota-entra .75s var(--ease-out) both,mascota-saluda 2.4s .75s ease-in-out infinite}
.mascota.escribe .figura{animation:mascota-entra .75s var(--ease-out) both,mascota-escribe 3.2s .75s ease-in-out infinite}
@keyframes mascota-entra{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes mascota-saluda{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes mascota-escribe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
/* El globo de diálogo: del MISMO trazo que la mascota — sólo contorno, sin
   relieve ni relleno — para que se lean como un solo dibujo. Su propia
   fila deja espacio para el saludo y el recorrido de la animación. */
.mascota .globo{position:relative;z-index:2;padding:6px 13px;max-width:100%;white-space:normal;text-align:center;
 border-radius:15px 15px 4px 15px;border:1.5px solid #e9ecefd9;background:none;box-shadow:none;
 font-size:clamp(11px,3vw,12px);font-weight:500;letter-spacing:-.005em;color:#eceef1;
 animation:globo-entra .5s .55s var(--ease-out) both}
@keyframes globo-entra{from{opacity:0;transform:translateY(6px) scale(.86)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .mascota .figura,.mascota .globo{animation:none;opacity:1;transform:none}
}
/* La última nota va DETRÁS del contenido, no apoyada en el borde de abajo:
   empujarla con margen automático abría un hueco enorme en cuanto la
   pantalla era más alta que el formulario (una laptop, un iPad). El aire
   que sobre se queda al final de la columna, donde no se ve. */
.acceso .col{position:relative;display:flex;flex-direction:column;min-height:100dvh}
.acceso main{flex:1;display:flex;flex-direction:column;align-items:stretch;padding-bottom:max(20px,env(safe-area-inset-bottom))}
/* En la laptop el armazón del panel abre el renglón de volver a 9vh y
   alinea al inicio: aquí eso dejaba un hueco arriba y encogía la tarjeta
   al ancho de su texto. Hacen falta estas dos por peso, no por orden. */
body.acceso .col>.barra{padding-top:8px}
.acceso main>.vacio:last-of-type{padding-top:26px}
/* Los controles conservan prioridad visual y de interacción. */
.acceso :is(.titulo-grande,.lista,.boton,.separa,.proveedores,.acceso-crear,.otp,.otp-pegar,.aviso){position:relative;z-index:1}
.acceso-cima{position:relative;z-index:2}
/* "Crear cuenta": texto que se toca, no otro botón. */
.acceso-crear{text-align:center;margin-top:18px;font-size:14px;color:var(--tinta2)}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) .acceso .acceso-crear a{color:#3ddc97;font-weight:600;text-decoration:none;padding:6px 4px}
@media(hover:hover){.acceso-crear a:hover{text-decoration:underline}}
/* Pantallas estrechas: cede el dibujo, nunca el texto ni el formulario. */
@media(max-width:360px){
 .acceso .col:has(.mascota){--masc-ancho:104px;column-gap:20px}
}
/* Teléfono acostado o pantalla chaparra: la mascota cede primero. */
@media(max-height:660px){
 .acceso .col:has(.mascota){--masc-ancho:112px}
 .acceso .col:has(.mascota)>.acceso-cima{padding-top:20px}
 .acceso .col:has(.mascota)>.mascota{padding-block:12px 20px}
}
.acceso-marca i{display:grid;place-items:center;width:34px;height:36px;border-radius:12px;font-style:normal;font-size:20px;
 background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico)}
html:not([data-panel-tema="claro"]) .acceso-marca i{background:linear-gradient(#f6f7f9,#cfd3d8);color:#111317;box-shadow:inset 0 1px 0 #fff,0 6px 16px #0008}
/* La tarjeta: el mismo relieve que las cajas del panel. */
.acceso .lista{border:0;border-radius:24px;background:var(--superficie-3d);box-shadow:var(--relieve);overflow:hidden}
.acceso .campo{padding:15px 18px;background:none}
.acceso .campo+.campo{border-top:1px solid var(--separador)}
.acceso .campo label{font-size:12px;letter-spacing:.02em;color:var(--tinta2)}
.acceso .campo input{font-size:17px;color:var(--tinta);background:none;border:0;width:100%;padding:4px 0}
.acceso .campo input::placeholder{color:var(--tinta3)}
.acceso .campo:focus-within{background:color-mix(in srgb,var(--tinte) 7%,transparent)}
.acceso .boton{border-radius:99px;min-height:54px;font-size:16px;font-weight:550}
.acceso .boton.tinta{background:linear-gradient(#f6f7f9,#d7dade);color:#111317;box-shadow:inset 0 1px 0 #fff,0 8px 20px #0006}
.acceso .boton.gris{background:var(--superficie-3d-chica);color:var(--tinta);box-shadow:var(--relieve-chico);border:0}
.acceso .boton.verde{background:linear-gradient(#23c27f,#139a60);color:#04160e;box-shadow:inset 0 1px 0 #ffffff5c,0 10px 24px #0b3a2866}
.acceso .vacio{color:var(--tinta3);font-size:13px;line-height:1.6}
.acceso .vacio .ic{color:var(--tinta3);opacity:.8}
.acceso a{color:var(--tinte)}
html:not([data-panel-tema="claro"]) .acceso a{color:#8fdcec}
/* Proveedores: DEBAJO del correo, detrás de una raya. */
.separa{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--tinta3);font-size:12px;letter-spacing:.02em}
.separa::before,.separa::after{content:'';flex:1;height:1px;background:var(--separador)}
/* Los dos proveedores, del mismo tamaño: el de Google lo dibuja su guion
   dentro de un iframe (no se le puede dar estilo desde aquí), así que se le
   pide su forma más parecida —píldora negra con el logo pegado al texto— y
   el de Apple se iguala a su alto exacto. */
.proveedores{display:grid;gap:10px;max-width:300px;margin-inline:auto}
.proveedores>div{display:flex;justify-content:center;height:44px}
.proveedores>div iframe{height:44px!important;border-radius:99px}
.btn-apple{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border:0;border-radius:99px;cursor:pointer;
 font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;background:#000;color:#fff;box-shadow:inset 0 1px 0 #ffffff26,0 6px 16px #0006}
.btn-apple svg{width:15px;height:18px;margin-top:-2px;fill:currentColor;stroke:none}
.btn-apple:active{transform:scale(.985)}

/* ── El código: seis casillas que se vuelven órbita ────────────────
   Escribes (o pegas) el código y las casillas se despegan: giran en anillo
   mientras el SERVIDOR lo revisa —la espera es la animación, no un adorno—,
   se ponen verdes si es correcto, colapsan al centro y sale el sello.
   Si el código no era, se ponen rojas, se sacuden y regresan a su fila.
   Con "poco movimiento" (prefers-reduced-motion) no hay vuelo: sólo el color. */
.otp{position:relative;height:190px;margin:6px 0 2px;touch-action:manipulation}
.otp-campo{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;
 font-size:16px;letter-spacing:1em;caret-color:transparent;cursor:pointer;z-index:3}
.otp-anillo{position:absolute;inset:0;z-index:2}
.otp-pista{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
 border:1px dashed var(--separador);opacity:0;transition:opacity .4s ease}
.otp-caja{position:absolute;left:50%;top:50%;width:46px;height:56px;margin:-28px 0 0 -23px;display:grid;place-items:center;
 border-radius:15px;font-size:24px;font-weight:550;font-variant-numeric:tabular-nums;color:var(--tinta);
 background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico);
 transition:transform .7s var(--ease-out),background-color .35s ease,color .35s ease,box-shadow .35s ease,opacity .45s ease}
.otp-caja.activa{box-shadow:var(--relieve-chico),0 0 0 2px var(--tinte)}
html:not([data-panel-tema="claro"]) .otp-caja.activa{box-shadow:var(--relieve-chico),0 0 0 2px #8fdcec,0 0 22px #62d2e855}
.otp-caja .cursor{width:2px;height:26px;border-radius:2px;background:var(--tinte);animation:otp-latir 1.1s steps(2,start) infinite}
html:not([data-panel-tema="claro"]) .otp-caja .cursor{background:#8fdcec}
@keyframes otp-latir{to{opacity:0}}
.otp[data-estado="verificando"] .otp-pista{opacity:1}
.otp[data-estado="verificando"] .otp-anillo{animation:otp-girar 3.4s linear infinite}
.otp[data-estado="colapso"] .otp-anillo{animation:otp-girar 1s linear infinite}
@keyframes otp-girar{to{transform:rotate(360deg)}}
.otp-caja.bien{background:linear-gradient(180deg,#123227,#0c2119);color:#5fe0a6;box-shadow:inset 0 1px 0 #ffffff1a,0 0 0 1.5px #2fbd84,0 0 26px #2fbd8455}
.otp-caja.mal{background:linear-gradient(180deg,#33191d,#221115);color:#ff9b9b;box-shadow:inset 0 1px 0 #ffffff14,0 0 0 1.5px #d4545f}
.otp[data-estado="error"] .otp-anillo{animation:otp-sacudir .5s var(--ease-out)}
@keyframes otp-sacudir{10%,90%{transform:translateX(-6px)}30%,70%{transform:translateX(7px)}50%{transform:translateX(-4px)}}
/* El sello: un cuadro verde con su palomita, anillos y chispas. */
.otp-sello{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;z-index:4;display:grid;place-items:center;
 border-radius:26px;opacity:0;transform:scale(.5);pointer-events:none;
 background:linear-gradient(180deg,#12362a,#0b2119);box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1.5px #2fbd84,0 0 44px #2fbd8455;
 transition:opacity .35s ease,transform .55s var(--ease-out)}
.otp-sello .ic{width:34px;height:34px;color:#5fe0a6;stroke-width:2.4}
.otp-sello::before,.otp-sello::after{content:'';position:absolute;border-radius:34px;border:1px solid #2fbd8440}
.otp-sello::before{inset:-22px}
.otp-sello::after{inset:-44px;border-color:#2fbd8422}
.otp[data-estado="exito"] .otp-sello{opacity:1;transform:scale(1)}
.otp[data-estado="exito"] .otp-anillo,.otp[data-estado="exito"] .otp-pista{opacity:0}
.otp-chispa{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#5fe0a6;opacity:0}
.otp[data-estado="exito"] .otp-chispa{animation:otp-chispa 1.5s var(--ease-out) forwards;animation-delay:var(--t)}
@keyframes otp-chispa{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
 25%{opacity:.95}
 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.5)}
}
.otp-leyenda{text-align:center;font-size:13px;color:var(--tinta2);min-height:20px;margin-top:2px}
.otp-leyenda b{color:var(--tinta);font-weight:550}
.otp-leyenda.verde{color:#4dd6a0}
.otp-leyenda.rojo{color:var(--rojo)}
/* "Pégalo": el atajo de quien copió el código del chat. */
.otp-pegar{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 14px;border:0;border-radius:18px;cursor:pointer;
 font:inherit;font-size:13px;text-align:left;color:var(--tinta2);background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico)}
.otp-pegar b{color:var(--tinta);font-weight:550}
.otp-pegar .ic{width:19px;height:19px;flex-shrink:0;color:var(--tinte)}
.otp-pegar span{flex:1;min-width:0}
@media(prefers-reduced-motion:reduce){
 .otp-caja,.otp-sello{transition:none}
 .otp[data-estado] .otp-anillo{animation:none}
 .otp[data-estado="exito"] .otp-chispa{animation:none;opacity:0}
 .otp-caja .cursor{animation:none}
}

/* ══ Hablar con Korvendi ═════════════════════════════════════════════
   El mismo telón del panel; lo único nuevo es el ORBE, y es nuevo porque
   hace un trabajo: dice en qué va la pregunta (esperándote, oyéndote,
   redactando) sin obligar a leer una etiqueta.
   Todo lo demás hereda: superficie con relieve, radios, tipografía y
   tokens de color, con su gemela en la capa oscura donde hace falta. */
.hk{max-width:680px;margin:0 auto;padding-top:10px}
.hk .oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── El orbe ─────────────────────────────────────────────────────
   thinking-orbs con el DISEÑO de 64 px (el preset afinado: arriba de 64 la
   librería extrapola y los puntos se vuelven polvo) pero MOSTRADO grande,
   del tamaño del orbe viejo. El canvas se estira a todo el contenedor —con
   !important, porque la librería le escribe width/height en línea en px— y
   el guion le sube la resolución interna para que se vea nítido, no
   borroso. El lugar queda reservado aunque la librería tarde o no cargue.
   La tinta la pone la librería según el data-theme del contenedor, que el
   guion copia de data-panel-tema: aquí no hay color, ni gemela oscura. */
.hk-orbe{width:min(200px,50vw);aspect-ratio:1;margin:6px auto 30px}
.hk-orbe canvas{width:100%!important;height:100%!important;display:block}

/* ── Saludo ──────────────────────────────────────────────────────── */
.hk-saludo{text-align:center;font-size:15px;color:var(--tinta2)}
.hk-titulo{text-align:center;margin:6px 0 10px;font-size:clamp(30px,6.8vw,46px);font-weight:650;
 letter-spacing:-.05em;line-height:1.1;color:var(--tinta);text-wrap:balance}
.hk-ayuda{max-width:52ch;margin:0 auto;text-align:center;font-size:16px;line-height:1.55;color:var(--tinta2);text-wrap:pretty}
.hk-vivo{min-height:20px;margin:20px 0 10px;text-align:center;font-size:13px;color:var(--tinta2)}

/* ── El compositor ───────────────────────────────────────────────── */
.hk-caja{position:relative;border-radius:30px;overflow:hidden;background:var(--superficie-3d);box-shadow:var(--relieve);
 transition:box-shadow .2s ease,opacity .2s ease}
/* La aurora mientras Korvendi responde (referencia del dueño: el "Voice" de
   Jakub Antalik), en verde lima #D8FF47 por decisión del dueño. Tres capas: HUMO que sube del
   borde y se mece, el ARCO espectral pegado al borde inferior y un NÚCLEO
   claro en su cresta. Entra subiendo desde abajo; al terminar se encoge
   hacia la esquina inferior derecha y se apaga. Quieta, no gasta: sin la
   clase, las animaciones van en pausa. */
.hk-caja>:not(.hk-aurora):not(.oculto){position:relative;z-index:1}
.hk-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
 transform:translateY(40%) scale(.8,.45);transform-origin:50% 100%}
.hk-caja.respondiendo .hk-aurora{opacity:1;transform:none;
 transition:opacity .7s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.hk-caja.aurora-sale .hk-aurora{opacity:0;transform:translateX(34%) scale(.32);
 transition:opacity .7s ease .6s,transform 1.2s cubic-bezier(.45,0,.2,1)}
.hk-aurora>i{position:absolute;display:block}
.hk-aurora-humo{left:50%;width:min(80%,520px);margin-left:calc(min(80%,520px)/-2);bottom:-12%;height:120%;
 background:radial-gradient(24% 58% at 50% 78%,#d8ff47,#0000 76%),radial-gradient(20% 46% at 37% 86%,#c2f02e,#0000 74%),
  radial-gradient(20% 46% at 63% 86%,#e6ff85,#0000 74%),radial-gradient(20% 34% at 16% 96%,#9ed61ff0,#0000 74%),
  radial-gradient(20% 34% at 84% 96%,#b5ea2cf0,#0000 74%);
 filter:blur(30px);animation:hk-aurora-mece 7s ease-in-out infinite alternate,hk-aurora-tono 8s ease-in-out infinite alternate}
.hk-aurora-arco{left:-8%;right:-8%;bottom:-150px;height:190px;border-radius:50%;
 background:conic-gradient(from 270deg,#8fcc12 0deg,#c4f23a 45deg,#d8ff47 70deg,#f4ffc4 90deg,#d8ff47 110deg,#b8ea2a 138deg,#86c20f 180deg,#8fcc12 360deg);
 -webkit-mask:radial-gradient(closest-side,#0000 76%,#000 88%,#000 93%,#0000 100%);
 mask:radial-gradient(closest-side,#0000 76%,#000 88%,#000 93%,#0000 100%);
 filter:blur(5px);animation:hk-aurora-ondea 5s ease-in-out infinite alternate}
.hk-aurora-nucleo{left:22%;right:22%;bottom:-128px;height:170px;border-radius:50%;opacity:.8;
 background:radial-gradient(closest-side,#fff0 74%,#fff 90%,#fff0 100%);filter:blur(5px);
 animation:hk-aurora-brilla 5s ease-in-out infinite alternate}
.hk-caja:not(.respondiendo):not(.aurora-sale) .hk-aurora>i{animation-play-state:paused}
@keyframes hk-aurora-mece{0%{transform:translateX(-7%) scaleY(.88)}50%{transform:translateX(3%) scaleY(1.1)}100%{transform:translateX(8%) scaleY(.94)}}
/* El tono apenas se pasea (±8°) alrededor del #D8FF47 que eligió el dueño:
   una vuelta completa de hue-rotate la sacaría de su color. */
@keyframes hk-aurora-tono{0%{filter:blur(30px) hue-rotate(-8deg)}100%{filter:blur(30px) hue-rotate(8deg)}}
@keyframes hk-aurora-ondea{0%{transform:translateX(-4%)}100%{transform:translateX(4%) scaleY(1.08)}}
@keyframes hk-aurora-brilla{0%{transform:translateX(5%);opacity:.6}100%{transform:translateX(-6%);opacity:.95}}
.hk-caja:focus-within{box-shadow:var(--relieve),0 0 0 2px #148ba885}
.hk-caja.apagada{opacity:.62}
.hk-cuota{position:relative;display:flex;align-items:center;gap:10px;padding:13px 21px 13px;
 font-size:12.5px;line-height:1.3;color:var(--tinta2)}
.hk-cuota-num{margin-left:auto;flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--tinta2)}
.hk-cuota-riel{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--separador)}
.hk-cuota-riel i{display:block;height:100%;background:linear-gradient(90deg,#1fc9ec,#6f7dff)}
.hk-caja textarea{display:block;width:100%;min-height:78px;max-height:200px;padding:17px 21px 4px;
 border:0;background:none;resize:none;outline:none;font:inherit;font-size:17px;line-height:1.45;color:var(--tinta)}
.hk-caja textarea::placeholder{color:var(--tinta3)}
.hk-caja textarea:focus-visible{outline:none}
.hk-fila{display:flex;align-items:center;gap:12px;padding:6px 15px 15px}
.hk-acciones{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.hk-principal{display:flex;align-items:center;gap:11px;flex-shrink:0}
.hk-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:999px;cursor:pointer;
 font:inherit;font-size:12.5px;font-weight:500;color:var(--tinta2);
 background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico)}
.hk-chip .ic{width:16px;height:16px}
.hk-chip>span{display:inline-flex;align-items:center}
.hk-chip .hk-ic-no{display:none}
.hk-chip[aria-pressed="false"]{color:var(--tinta3)}
.hk-chip[aria-pressed="false"] .hk-ic-si{display:none}
.hk-chip[aria-pressed="false"] .hk-ic-no{display:inline-flex}
.hk-reloj{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--tinta2)}
.hk-reloj.cerca{color:var(--ambar);font-weight:600}
.hk-enviar{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
 color:var(--tinta2);background:var(--superficie-3d-chica);box-shadow:var(--relieve-chico);
 transition:transform .12s var(--ease-out),color .2s ease}
.hk-enviar .ic{width:18px;height:18px}
.hk-micro{position:relative;display:grid;place-items:center;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
 color:var(--fondo);background:var(--tinta);box-shadow:var(--relieve-chico),0 10px 26px -10px #05070d;
 transition:transform .14s var(--ease-out),background-color .2s ease,color .2s ease}
.hk-micro>svg{grid-area:1/1}
.hk-micro>svg:nth-of-type(2){display:none}
.hk-micro.grabando{background:#d13b47;color:#fff}
.hk-micro.grabando>svg:nth-of-type(1){display:none}
.hk-micro.grabando>svg:nth-of-type(2){display:block}
.hk-micro:active,.hk-enviar:active{transform:scale(.94)}
.hk-micro:disabled,.hk-enviar:disabled,.hk-sug:disabled,.hk-chip:disabled{cursor:not-allowed;opacity:.42;transform:none}
.hk-micro.sin-permiso{opacity:.4}
.hk-nota{margin:12px 4px 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--tinta2)}
.hk-aviso{margin-top:14px;padding:14px 16px;border-radius:20px;font-size:14px;line-height:1.45;
 color:var(--ambar);background:var(--ambar-suave)}

/* ── La respuesta: el texto se queda, el audio se va ─────────────── */
.hk-respuesta{margin-top:22px;padding:22px;border-radius:28px;background:var(--superficie-3d);box-shadow:var(--relieve)}
.hk-tu{margin-bottom:15px;font-size:13px;line-height:1.45;color:var(--tinta2)}
.hk-tu b{color:var(--tinta);font-weight:550}
.hk-dicho p{max-width:68ch;margin-bottom:13px;font-size:17px;line-height:1.55;color:var(--tinta);text-wrap:pretty}
.hk-dicho p:last-child{margin-bottom:0}
.hk-pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
 margin-top:19px;padding-top:15px;border-top:1px solid var(--separador)}
.hk-medida{margin-left:auto;text-align:right;font-size:12px;line-height:1.45;color:var(--tinta2);font-variant-numeric:tabular-nums}
.hk-medida small{display:block;font-size:11.5px;color:var(--tinta3)}
.hk-respuesta audio{display:none}

/* ── Sugerencias: preguntas de verdad, no ejemplos ───────────────── */
/* Burbujas en píldora que se acomodan a lo ancho y bajan de renglón sólo
   cuando ya no caben: cuatro preguntas en dos renglones, no en cuatro. */
.hk-sugerencias{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.hk-sug{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:10px 18px 10px 14px;border:0;border-radius:999px;
 cursor:pointer;font:inherit;font-size:14px;font-weight:550;line-height:1.25;text-align:left;color:var(--tinta);
 background:var(--superficie-3d);box-shadow:var(--relieve-chico);transition:box-shadow .2s ease,transform .12s var(--ease-out)}
.hk-sug:active{transform:scale(.97)}
.hk-sug-ic{display:grid;place-items:center;flex-shrink:0;color:var(--tinta)}
.hk-sug-txt{min-width:0}
@media(hover:hover) and (pointer:fine){
 .hk-sug:hover:not(:disabled){box-shadow:var(--relieve)}
 .hk-chip:hover:not(:disabled),.hk-enviar:hover:not(:disabled){color:var(--tinta)}
}
@media(max-width:599px){
 /* En celular ninguna píldora cabe junto a otra y quedaban cuatro renglones:
    dos columnas con el texto partido en la burbuja dejan dos. */
 .hk-sugerencias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .hk-sug{padding:9px 13px 9px 11px;border-radius:20px;font-size:13px;text-wrap:balance}
 .hk-orbe{margin-bottom:24px}
 .hk-respuesta,.hk-caja{border-radius:26px}
}
@media(prefers-reduced-motion:reduce){
 .hk-micro,.hk-enviar,.hk-sug,.hk-caja{transition:none}
 /* Con "reducir movimiento" la aurora sólo aparece y se desvanece: ni se
    mece, ni sube, ni viaja a la esquina. */
 .hk-aurora>i{animation:none!important}
 .hk-caja .hk-aurora{transform:none!important}
}
/* La gemela oscura de los controles: el relieve claro los delataría sobre
   el telón. (El orbe no está aquí: su tinta la resuelve la librería.) */
html:not([data-panel-tema="claro"]) .hk-caja:focus-within{box-shadow:var(--relieve),0 0 0 2px #62d2e880}
html:not([data-panel-tema="claro"]) .hk-micro{background:linear-gradient(#f5f6f8,#d4d7dc);color:#111317;box-shadow:inset 0 1px 0 #fff,0 12px 28px -10px #000}
html:not([data-panel-tema="claro"]) .hk-micro.grabando{background:linear-gradient(#e06874,#b9313d);color:#fff}
html:not([data-panel-tema="claro"]) .hk-cuota-riel{background:#ffffff12}
html:not([data-panel-tema="claro"]) .hk-aviso{color:var(--ambar);background:#2a2015}
html:not([data-panel-tema="claro"]) .hk-sug-ic{color:#d9dce1}
html:not([data-panel-tema="claro"]) .hk-reloj.cerca{color:#f1bf82}

@media(max-width:379px){
 .panel-futuro>nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .panel-futuro>nav a{height:52px;border-radius:50%}
}

/* ══ "Vendido y cobrado hoy" (maqueta del dueño, 1-oct-2026) ═══════════
   VIDRIO, no pintura. El azul de la maqueta no es de la tarjeta: es el
   fondo de esa pantalla visto a través del vidrio (corrección del dueño).
   Aquí la tarjeta es vidrio estilo Apple sobre el telón REAL del panel:
   relleno BLANCO translúcido arriba que cae a NEGRO translúcido abajo (el
   "desvanecido a negro" de la maqueta, neutro: sin un solo tono de color),
   desenfoque + saturación, un filo de luz de 1 px que brilla arriba y se
   apaga hacia abajo, y sombra suave. Como el telón detrás de la tarjeta es
   casi liso, el vidrio no tendría qué dejar ver: un resplandor NEUTRO va
   DETRÁS de la tarjeta (.mosaico::before) y la tarjeta lo desenfoca. Adentro
   todo es vidrio sobre vidrio: píldora, círculos, la placa del monto con
   otra asomándose detrás, los círculos de acción, la píldora blanca, la
   lista de vidrio negro y la barrita encimada a la lista.
   Celular: en columna, como la maqueta. PC (la tarjeta ≥ 600 px): dos
   columnas —monto y acciones a la izquierda; la lista con su barrita
   encimada, a la derecha—, la misma pieza y las mismas capas.
   Los colores viven en variables: el tema claro, "Reducir transparencia" y
   "Aumentar contraste" sólo cambian variables. */
.panel-resumen .mosaico{container:resumen/inline-size;position:relative}
.mosaico:has(>.tarjeta-hoy)::before{content:'';position:absolute;inset:5%;z-index:0;pointer-events:none;border-radius:40px;
 background:radial-gradient(55% 60% at 22% 18%,var(--th-luz1),transparent 70%),radial-gradient(45% 55% at 88% 6%,var(--th-luz2),transparent 70%),radial-gradient(70% 60% at 50% 100%,var(--th-luz3),transparent 70%);
 --th-luz1:#ffffff3d;--th-luz2:#ffffff2e;--th-luz3:#00000000}
html[data-panel-tema="claro"] .mosaico:has(>.tarjeta-hoy)::before{--th-luz1:#ffffff;--th-luz2:#ffffffcc;--th-luz3:#7d838d59}
.tarjeta-hoy{
 --th-fondo:linear-gradient(180deg,#ffffff29 0%,#ffffff12 35%,#00000047 70%,#0000008c 100%);
 --th-filo:linear-gradient(180deg,#ffffff75 0%,#ffffff1f 40%,#ffffff0a 100%);
 --th-brillo:#ffffff59;
 --th-sombra:0 34px 60px -30px #000,0 12px 24px -16px #000000b3;
 --th-vidrio:#ffffff2e;--th-vidrio-filo:linear-gradient(180deg,#ffffff70,#ffffff1a 55%,#ffffff05);
 --th-placa:linear-gradient(180deg,#ffffff38 0%,#ffffff14 60%,#ffffff00 100%);
 --th-placa-filo:linear-gradient(180deg,#ffffff8c,#ffffff26 45%,#ffffff00 100%);
 --th-pico:linear-gradient(180deg,#ffffff1f,#ffffff0d);
 --th-tinta:#fff;--th-tinta2:#ffffffd9;--th-tinta3:#ffffff8c;
 --th-avatar:#ffffff38;--th-avatar-tinta:#fff;
 --th-mas:#fff;--th-mas-tinta:#0c0d0f;
 --th-lista:#00000073;--th-barra:#1c1c1eb8;--th-principal:#ffffff24;--th-puntos:#ffffff2e;
 --th-anillo:#fff;--th-relieve:0 0 #0000;
 position:relative;z-index:1;isolation:isolate;container:th/inline-size;
 display:flex;flex-direction:column;height:100%;box-sizing:border-box;
 padding:16px 16px 18px;border-radius:40px;color:var(--th-tinta);overflow:hidden;font-feature-settings:"tnum" 1;
 background:var(--th-fondo);
 -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
 box-shadow:inset 0 1px 0 var(--th-brillo),var(--th-sombra)}
/* El filo de luz (y el de cada capa de vidrio de adentro): un borde de 1 px
   con máscara que brilla arriba y se apaga hacia abajo, sin canto inferior. */
:is(.tarjeta-hoy,.th-cuenta,.th-circulo,.th-placa,.th-accion)::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:var(--th-vidrio-filo);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tarjeta-hoy::before{z-index:-1;background:var(--th-filo)}
.th-placa::before{background:var(--th-placa-filo)}
.tarjeta-hoy a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tarjeta-hoy .ic{flex-shrink:0}
/* Vidrio claro sobre vidrio: la píldora, los círculos de arriba y los de acción. */
.th-cuenta,.th-circulo,.th-accion{position:relative;background:var(--th-vidrio);
 -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
 box-shadow:inset 0 1px 0 var(--th-brillo),var(--th-relieve)}
.th-cima{display:flex;align-items:center;gap:8px}
.th-cuenta{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:48px;padding:0 14px 0 5px;box-sizing:border-box;border-radius:99px}
.th-cuenta>.ic{opacity:.8;margin-left:-2px}
.th-avatar{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;overflow:hidden;font-size:15px;font-weight:500;
 background:var(--th-avatar);color:var(--th-avatar-tinta);box-shadow:inset 0 1px 0 var(--th-brillo)}
.th-avatar.con-foto{background:none;box-shadow:none}
.th-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.th-cuenta-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500;letter-spacing:-.01em}
.th-circulo{flex-shrink:0;display:grid;place-items:center;width:48px;height:48px;border-radius:50%}
.th-circulo .ic{width:22px;height:22px}
/* La pila: la placa del monto y, detrás, el canto de otra. */
.th-pila{position:relative;margin-top:18px;padding-top:11px}
.th-pila::before{content:'';position:absolute;top:0;left:32px;right:32px;height:24px;border-radius:18px 18px 0 0;
 background:var(--th-pico);box-shadow:inset 0 1px 0 var(--th-brillo);
 -webkit-mask-image:linear-gradient(#000 11px,transparent 11px);mask-image:linear-gradient(#000 11px,transparent 11px)}
.th-placa{position:relative;margin:0 6px;padding:18px 16px 16px 20px;border-radius:24px;background:var(--th-placa);
 -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
 box-shadow:inset 0 1px 0 var(--th-brillo),var(--th-relieve)}
.th-renglon1{display:flex;align-items:center;min-height:44px}
.th-num{margin:0;min-width:0;font-size:clamp(26px,10cqi,38px);line-height:1.1;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.th-num.largo{font-size:clamp(22px,8.2cqi,32px)}
.th-num.muy-largo{font-size:clamp(19px,6.6cqi,26px)}
.th-num .cent{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}
.th-ojo{appearance:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;flex-shrink:0}
.th-ojo .ic{width:21px;height:21px}
.th-ojo .ic+.ic,html.montos-ocultos .th-ojo .ic:first-child{display:none}
html.montos-ocultos .th-ojo .ic+.ic{display:block}
.th-sin-contacto{margin-left:auto;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;flex-shrink:0}
.th-renglon2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px;font-size:13px;line-height:1.3;letter-spacing:0;color:var(--th-tinta2)}
.th-nota{min-width:0;text-wrap:balance}
.th-fecha{flex-shrink:0;font-weight:500;color:var(--th-tinta);white-space:nowrap}
.th-fecha i{font-style:normal;font-weight:400;margin-right:4px;color:var(--th-tinta3)}
/* Acciones: tres círculos de vidrio y la píldora blanca, lisa. */
.th-acciones{display:flex;gap:10px;margin-top:12px}
.th-accion,.th-mas{position:relative;flex-shrink:0;display:grid;place-items:center;height:58px;border-radius:99px;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.th-accion{width:58px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.th-accion .ic{width:26px;height:26px;stroke-width:2}
.tarjeta-hoy .th-mas{flex:1;min-width:0;background:var(--th-mas);color:var(--th-mas-tinta)}
.th-mas .ic{width:28px;height:28px;stroke-width:1.7}
.th-globo{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;
 display:grid;place-items:center;font:600 11.5px/1 -apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;background:#ffb547;color:#2a1700}
.th-accion:active,.th-mas:active,.th-circulo:active,.th-cuenta:active,.th-barra a:active{transform:scale(.95)}
/* La lista de vidrio negro (semana y mes) y, encimada a su pie, la barrita. */
.th-fondo{display:flex;flex-direction:column;margin-top:12px}
.th-lista{padding:2px 18px 28px;border-radius:18px;color:#fff;background:var(--th-lista);
 -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
 box-shadow:inset 0 1px 0 #ffffff1a}
.th-fila{display:flex;align-items:center;gap:12px;min-height:50px;font-size:15px;font-weight:400}
.th-fila+.th-fila{background:linear-gradient(90deg,var(--th-puntos) 50%,transparent 0) 0 0/8px 1px repeat-x}
.th-ficha{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:#0c0d0f;flex-shrink:0}
.th-ficha .ic{width:16px;height:16px;stroke-width:2}
.th-nombre{flex:1;min-width:0}
.th-fila b{font-weight:500;white-space:nowrap}
.th-barra{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:-22px;height:62px;padding:6px 10px 6px 6px;box-sizing:border-box;border-radius:99px;color:#fff;
 background:var(--th-barra);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
 box-shadow:inset 0 1px 0 #ffffff14,0 -8px 24px #00000059}
.th-barra a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex-shrink:0;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.th-barra .ic{width:24px;height:24px}
.th-barra a.th-principal{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;width:auto;height:50px;padding:0 18px 0 14px;border-radius:99px;font-size:15px;font-weight:500;white-space:nowrap;background:var(--th-principal)}
.th-principal span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.th-barra a.th-principal .ic{width:22px;height:22px}
/* Ganchos que SÓLO pinta el tema claro (maqueta del 2-oct-2026): en oscuro
   no ocupan lugar, así que el oscuro no cambia ni un píxel. */
.ctx-flecha,.guia-venta,.v7-mas{display:none}
/* Los importes que el ojo tapa (en todo el Inicio, no sólo aquí). */
.mp-x{display:none}
.mp-l{display:none;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.montos-ocultos .mp-v{display:none}
html.montos-ocultos .mp-x{display:inline}
html.montos-ocultos .mp-l{display:inline}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) .tarjeta-hoy :is(a,button):focus-visible{outline:2px solid var(--th-anillo);outline-offset:3px}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) .tarjeta-hoy .th-ojo:focus-visible{outline-offset:-3px}
:is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) .tarjeta-hoy :is(.th-lista,.th-barra) :focus-visible{outline-color:#fff}
@media(hover:hover) and (pointer:fine){
 .th-accion:hover,.th-circulo:hover,.th-cuenta:hover{background-color:#ffffff3d}
 .th-fila:hover .th-nombre,.th-cuenta:hover .th-cuenta-txt{text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor}
 .th-barra a:not(.th-principal):hover{background:#ffffff1a}
}
/* Angosta (teléfonos de 360–390 px): sin la flecha de la píldora,
   círculos de 44 y la opción principal más compacta. */
@container th (max-width:340px){
 .th-cuenta>.ic{display:none}
 .th-cuenta{gap:8px;padding:0 10px 0 4px}
 .th-avatar{width:34px;height:34px;font-size:14px}
 .th-cuenta-txt{font-size:14px}
 .th-circulo{width:44px;height:44px}
 .th-cima{gap:5px}
 .th-barra{padding:6px 6px 6px 5px}
 .th-barra a.th-principal{gap:6px;padding:0 12px 0 10px;font-size:14px}
}
/* 360 px: el título de la píldora en dos renglones parejos. */
@container th (max-width:300px){
 .th-cuenta-txt{white-space:normal;font-size:13px;line-height:1.15;text-wrap:balance}
}
/* Muy angosta (320 px): la opción principal se queda con su ícono (el
   nombre lo sigue oyendo el lector de pantalla). */
@container th (max-width:280px){
 .th-avatar{width:32px;height:32px}
 .th-cuenta{gap:7px}
 .th-acciones{gap:8px}
 .th-accion,.th-mas{height:50px}
 .th-accion{width:50px}
 .th-barra a.th-principal{padding:0;width:50px;justify-content:center}
 .th-principal span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .th-placa{padding-left:16px}
}
/* PC: la misma pieza en dos columnas. La fila del Inicio la marca la
   tarjeta de Ventas de al lado; el alto que sobra lo toma la placa, que
   crece como una tarjeta física (el monto arriba, la nota al pie). */
@container resumen (min-width:600px){
 .tarjeta-hoy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;
  grid-template-areas:"cima cima" "pila fondo" "acciones fondo";column-gap:18px;padding:18px}
 .th-cima{grid-area:cima}
 .th-cuenta{flex:0 1 auto;margin-right:auto;padding-right:16px}
 .th-pila{grid-area:pila;display:flex;flex-direction:column;margin-top:16px}
 .th-placa{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:14px;margin:0 4px;padding:20px 18px 18px 22px}
 .th-num{font-size:40px}
 .th-num.largo{font-size:32px}
 .th-num.muy-largo{font-size:26px}
 .th-acciones{grid-area:acciones;margin-top:12px}
 .th-fondo{grid-area:fondo;margin-top:16px}
 .th-lista{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:10px 18px 30px}
 .th-barra{padding:6px 6px 6px 5px}
 .th-barra a.th-principal{gap:6px;padding:0 14px 0 12px;font-size:14px}
}
/* ── Tema CLARO: el mismo vidrio sobre el telón perla, con tinta grafito.
   La lista y la barrita siguen siendo vidrio negro, como en la maqueta, y
   la píldora "+" se invierte a grafito: blanca sobre vidrio claro no se
   distinguiría (decisión de diseño, no de la maqueta). */
html[data-panel-tema="claro"] .tarjeta-hoy{
 --th-fondo:linear-gradient(180deg,#ffffff80 0%,#ffffff59 35%,#e3e6ea73 70%,#cdd1d78c 100%);
 --th-filo:linear-gradient(180deg,#ffffffe6,#ffffff80 45%,#ffffff4d);
 --th-brillo:#ffffffe6;
 --th-sombra:0 34px 60px -32px #2427384d,0 10px 22px -16px #24273833;
 --th-vidrio:#ffffff8c;--th-vidrio-filo:linear-gradient(180deg,#fff,#ffffff99 55%,#ffffff4d);
 --th-placa:linear-gradient(180deg,#ffffffcc 0%,#ffffff8c 60%,#ffffff40 100%);
 --th-placa-filo:linear-gradient(180deg,#fff,#ffffffb3 45%,#ffffff00);
 --th-pico:linear-gradient(180deg,#ffffffb3,#ffffff59);
 --th-tinta:#17181b;--th-tinta2:#3a3d44;--th-tinta3:#5f636b;
 --th-avatar:#17181b;--th-avatar-tinta:#fff;
 --th-mas:#1b1c20;--th-mas-tinta:#fff;
 --th-lista:#18191be6;--th-barra:#2c2d30e6;
 --th-anillo:#17181b;--th-relieve:0 1px 2px #2427381a,0 6px 14px -8px #24273833}
@media(hover:hover) and (pointer:fine){
 html[data-panel-tema="claro"] :is(.th-accion,.th-circulo,.th-cuenta):hover{background-color:#ffffffbf}
 html[data-panel-tema="claro"] .tarjeta-hoy .th-mas:hover{background:#2c2e33}
}
/* "Reducir transparencia" y "Aumentar contraste" (la Mac del dueño trae
   los dos): el vidrio cae a superficies SÓLIDAS con la misma lectura —más
   claro arriba y en lo que se toca, negro en la lista y la barrita—, sin
   desenfoque ni nada translúcido detrás del texto. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .tarjeta-hoy,.tarjeta-hoy :is(.th-cuenta,.th-circulo,.th-placa,.th-accion,.th-lista,.th-barra){-webkit-backdrop-filter:none;backdrop-filter:none}
 .mosaico:has(>.tarjeta-hoy)::before{display:none}
 :is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) .tarjeta-hoy{
  --th-fondo:linear-gradient(180deg,#34363b 0%,#26282c 40%,#17181b 75%,#0d0e10 100%);
  --th-vidrio:#45484e;--th-placa:linear-gradient(180deg,#4b4e55,#383b40);--th-pico:#3a3d42;
  --th-avatar:#5a5d64;--th-tinta2:#fff;--th-tinta3:#e3e4e7;
  --th-lista:#0b0c0e;--th-barra:#202124;--th-principal:#4a4a4c}
 html[data-panel-tema="claro"] .tarjeta-hoy{
  --th-fondo:linear-gradient(180deg,#fdfdfe 0%,#f1f2f4 45%,#e3e5e9 100%);
  --th-vidrio:#fff;--th-placa:#fff;--th-pico:#e5e7eb;
  --th-avatar:#17181b;--th-tinta2:#26282d;--th-tinta3:#3a3d44;
  --th-lista:#1b1c20;--th-barra:#26282c;--th-principal:#4a4a4c}
}
/* "Aumentar contraste": además, cantos definidos (finos, sin rayar). */
@media(prefers-contrast:more){
 :is(html:not([data-panel-tema="claro"]),html[data-panel-tema="claro"]) .tarjeta-hoy{--th-vidrio-filo:#ffffff73;--th-filo:#ffffff66;--th-placa-filo:#ffffff73;--th-puntos:#ffffff99}
 html[data-panel-tema="claro"] .tarjeta-hoy{--th-vidrio-filo:#17181b59;--th-filo:#17181b40;--th-placa-filo:#17181b59;--th-puntos:#ffffff99}
 .th-lista,.th-barra{box-shadow:inset 0 0 0 1px #ffffff59}
}
@media(prefers-reduced-motion:reduce){
 .tarjeta-hoy :is(.th-accion,.th-mas,.th-circulo,.th-cuenta,.th-barra a){transition:background-color 160ms ease}
 .tarjeta-hoy :is(.th-accion,.th-mas,.th-circulo,.th-cuenta,.th-barra a):active{transform:none}
}
@media print{.tarjeta-hoy{background:#fff;color:#000;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.tarjeta-hoy a{color:#000}.mosaico::before{display:none}}

/* ══ Tema CLARO del Inicio a la maqueta del dueño (2-oct-2026) ═══════════
   "Soft UI": lienzo gris perla casi blanco y superficies del MISMO material
   —un punto más claras que el lienzo, con un filo blanco y una sombra muy
   difusa—, de modo que se leen como relieve y no como recortes pegados.
   Blanco puro SÓLO en lo que flota y se toca (píldoras, círculos, el chip
   del día). UN acento azul donde la maqueta lo pone: la opción activa de la
   lateral, el "+", el pastel de Mis finanzas, el ícono y la gráfica de
   Ventas y el día elegido. Todo cuelga de html[data-panel-tema="claro"], así que el OSCURO no cambia.
   Va al final y sin @media de preferencias: con "Reducir transparencia" o
   "Aumentar contraste" el claro ya ES sólido, así que se ve igual con y sin
   esas preferencias (la Mac del dueño trae las dos). */
html[data-panel-tema="claro"] body.panel-futuro{
 --k-lienzo:#f7f9fa;--k-caja:#f9fafc;--k-interior:#fbfbfd;--k-blanco:#fff;
 --k-tinta:#0a0a0a;--k-tinta2:#5d626c;--k-icono:#3f444d;--k-gris:#6b7079;
 --k-azul:#1d5fe0;--k-azul-texto:#2b6fea;--k-azul-linea:#0b55d4;
 --k-azul-deg:linear-gradient(180deg,#2f6fe0 0%,#0a3fb5 100%);
 /* Verde de "mejor día": más vivo que el bosque de antes y aún AA (4.6:1
    sobre la caja) a 16 px. El #0da446 de la maqueta da 3.5:1. */
 --k-verde:#0a873c;
 /* Contenedores: filo blanco, brillo arriba y una sombra larga y tenue. */
 --k-sombra:inset 0 0 0 1px #ffffffe6,inset 0 1px 0 #fff,0 18px 40px -12px #1e2d4614,0 2px 6px #1e2d4608;
 /* Lo que flota (botones, píldoras): sin sombra oscura pegada al borde. */
 --k-sombra-chica:0 1px 2px #1e2d4608,0 8px 20px -6px #1e2d461a;
 --k-sombra-alta:0 2px 6px #1e2d4608,0 24px 48px -16px #1e2d4624;
 --fondo:var(--k-lienzo);background:var(--k-lienzo)}
html[data-panel-tema="claro"] body.panel-futuro :is(button,a,input,textarea,select,summary):focus-visible{outline-color:var(--k-azul)}
/* Controles chicos blancos. Mismo :is() que la regla de RELIEVE de arriba
   (con #panel-tema dentro pesa como un id): sólo así la gana, por orden.
   La lateral y la tarjeta "Mi espacio" no van aquí: son cajas, no botones. */
html[data-panel-tema="claro"] body.panel-futuro :is(#panel-tema,.panel-herramientas>a,.campana,.ojo-accion,.lateral .plegar,.espacio-negocio>span){background:var(--k-blanco);border-color:transparent;box-shadow:var(--k-sombra-chica)}
/* Barra de contexto: la luna en su círculo y la píldora del negocio, con
   su flecha (en PC, a la medida de la maqueta; abajo). */
html[data-panel-tema="claro"] body.panel-futuro #panel-tema,html[data-panel-tema="claro"] body.panel-futuro .panel-herramientas>a{color:var(--k-tinta)}
html[data-panel-tema="claro"] body.panel-futuro .panel-contexto b{color:var(--k-tinta)}
html[data-panel-tema="claro"] body.panel-futuro .panel-contexto>span{color:var(--k-tinta2)}
html[data-panel-tema="claro"] body.panel-futuro .ctx-flecha{display:grid;place-items:center;color:#8a8f98;margin-left:2px}
/* Saludo: avatar y campana en círculo blanco; el nombre negro con su
   espacio después de la coma (el -.055em general se lo comía). */
html[data-panel-tema="claro"] body.panel-futuro .avatar-perfil{background:var(--k-blanco);color:var(--k-tinta);border-color:transparent;box-shadow:var(--k-sombra-chica);font-weight:500}
html[data-panel-tema="claro"] body.panel-futuro .campana{color:var(--k-tinta)}
html[data-panel-tema="claro"] body.panel-futuro .titulo-grande.saludo-fila h1{color:var(--k-tinta);font-weight:600;letter-spacing:-.025em}
html[data-panel-tema="claro"] body.panel-futuro .saludo-fila h1 .signo{color:inherit}
html[data-panel-tema="claro"] body.panel-futuro .titulo-grande.saludo-fila p{color:#474a57;font-size:15px}
/* Celular: el dock blanco y el activo en el círculo azul. Doble
   .panel-futuro para ganarle a la regla de "Reducir transparencia", que
   pinta el dock gris (#f0f1f3) con más peso. */
html[data-panel-tema="claro"] body.panel-futuro.panel-futuro>nav{background:#fffffff0;border-color:transparent;box-shadow:0 1px 2px #1e2d4608,0 14px 36px -12px #1e2d4626}
html[data-panel-tema="claro"] body.panel-futuro.panel-futuro>nav a{color:var(--k-tinta2)}
html[data-panel-tema="claro"] body.panel-futuro.panel-futuro>nav a.on{background:var(--k-azul-deg);color:#fff;box-shadow:0 8px 18px -8px #0a3fb5b3}
@media(min-width:900px){
 html[data-panel-tema="claro"] body.panel-futuro .barra{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
 html[data-panel-tema="claro"] body.panel-futuro #panel-tema{width:44px;height:44px}
 html[data-panel-tema="claro"] body.panel-futuro .panel-herramientas{gap:12px}
 html[data-panel-tema="claro"] body.panel-futuro .panel-herramientas>a{height:46px;padding:0 18px;gap:12px;font-size:14.5px}
 html[data-panel-tema="claro"] body.panel-futuro .panel-contexto b{font-size:22px}
 html[data-panel-tema="claro"] body.panel-futuro .panel-contexto>span{font-size:14.5px}
 html[data-panel-tema="claro"] body.panel-futuro .saludo-fila .avatar-perfil{width:52px;height:52px}
 html[data-panel-tema="claro"] body.panel-futuro .saludo-fila .campana{width:54px;height:54px}
 /* La lateral: una caja grande del mismo material que el lienzo. */
 html[data-panel-tema="claro"] body.panel-futuro .lateral{background:var(--k-caja);border-color:transparent;box-shadow:var(--k-sombra);-webkit-backdrop-filter:none;backdrop-filter:none}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .marca{color:var(--k-tinta)}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .marca i{background:var(--k-tinta);color:#fff}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .marca small{color:var(--k-tinta2)}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .plegar{color:var(--k-gris)}
 html[data-panel-tema="claro"] body.panel-futuro .espacio-negocio{background:#fbfcfd;border-color:transparent;border-radius:20px;box-shadow:var(--k-sombra)}
 html[data-panel-tema="claro"] body.panel-futuro .espacio-negocio>span{color:var(--k-tinta)}
 html[data-panel-tema="claro"] body.panel-futuro .espacio-negocio small{color:var(--k-tinta2)}
 html[data-panel-tema="claro"] body.panel-futuro .espacio-negocio b{color:var(--k-tinta)}
 html[data-panel-tema="claro"] body.panel-futuro .lateral :is(a,.grupo-boton,.salir-lateral){color:#3d4144;font-size:14.5px}
 html[data-panel-tema="claro"] body.panel-futuro .lateral :is(a,.grupo-boton,.salir-lateral) .ic{color:var(--k-gris);width:20px;height:20px}
 /* La activa: azul a la izquierda que se desvanece hacia la derecha, como
    la maqueta. El tramo donde cae el texto se queda en azul firme (blanco
    sobre #3170e2 = 4.6:1); el desvanecido empieza después. */
 html[data-panel-tema="claro"] body.panel-futuro .lateral a.on,html[data-panel-tema="claro"] body.panel-futuro .lateral .submenu a.on{background:linear-gradient(90deg,#2b6add 0%,#3170e2 55%,#7ea8f0 82%,#cfe0f8 100%);background-origin:border-box;border-color:transparent;color:#fff;font-weight:500;text-shadow:0 1px 1px #1a4fae4d;box-shadow:0 10px 24px -8px #3b7ae273}
 html[data-panel-tema="claro"] body.panel-futuro .lateral a.on .ic{background:none;color:#fff;box-shadow:none}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .grupo-nav.con-activo>.grupo-boton::after{background:var(--k-azul)}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .submenu{background:var(--k-blanco);box-shadow:var(--k-sombra-alta)}
 html[data-panel-tema="claro"] body.panel-futuro .firma-panel{border-top-color:#1a203012;color:var(--k-tinta2)}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 html[data-panel-tema="claro"] body.panel-futuro .lateral a:hover:not(.on){background:#eef1f5;color:var(--k-tinta)}
 html[data-panel-tema="claro"] body.panel-futuro .lateral .grupo-nav:hover>.grupo-boton{background:#eef1f5}
}
@media(max-width:899px){
 html[data-panel-tema="claro"] body.panel-futuro .ctx-flecha{display:none}
}
/* PC ancha: las dos columnas en la proporción de la maqueta (unos 653 y
   454 px a 1440) y cada tarjeta del alto de lo suyo, sin estirarse. */
@media(min-width:1181px){
 html[data-panel-tema="claro"] body.panel-futuro.tablero main{grid-template-columns:minmax(0,1.44fr) minmax(0,1fr);gap:20px;align-items:start}
}
/* "A un toque", su botón y las cajas del Inicio: el material de la caja. */
html[data-panel-tema="claro"] body.panel-futuro.tablero :is(.lista,.tarjeta,.ojo,.accesos a){background:var(--k-caja);border-color:transparent;box-shadow:var(--k-sombra)}
html[data-panel-tema="claro"] body.panel-futuro.tablero .accesos a .ic{color:var(--k-icono)}
html[data-panel-tema="claro"] body.panel-futuro.tablero :is(.plegable h2,.panel-avisos>h2){font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--k-tinta);text-transform:none}
html[data-panel-tema="claro"] body.panel-futuro.tablero .plegable button{height:40px;border-radius:999px;background:var(--k-blanco);border-color:transparent;box-shadow:var(--k-sombra-chica);color:var(--k-tinta);font-size:14.5px;font-weight:500;padding:0 16px 0 20px}
html[data-panel-tema="claro"] body.panel-futuro.tablero .ojo-accion{color:var(--k-tinta)}
/* Indicadores: píldoras —ícono, nombre, su número y la flecha—. El número
   se queda (es dato real que el dueño usa), más discreto que antes. */
html[data-panel-tema="claro"] body.panel-futuro .panel-indicadores{align-self:start;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
html[data-panel-tema="claro"] body.panel-futuro .indicador{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:70px;padding:0 20px 0 24px;white-space:nowrap;border-radius:999px;background:var(--k-caja);border-color:transparent;box-shadow:var(--k-sombra)}
html[data-panel-tema="claro"] body.panel-futuro .indicador-cima{display:contents;font-size:15px;color:var(--k-tinta)}
html[data-panel-tema="claro"] body.panel-futuro .indicador-cima .ic:first-child{margin-right:6px}
html[data-panel-tema="claro"] body.panel-futuro .indicador-cima .ic{color:var(--k-tinta);width:22px;height:22px}
html[data-panel-tema="claro"] body.panel-futuro .indicador-cima .ic:last-child{display:block;order:3;margin-left:0;width:15px;height:15px;color:#8a8f98}
html[data-panel-tema="claro"] body.panel-futuro .indicador strong{order:2;margin:0 2px 0 auto;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--k-tinta)}
html[data-panel-tema="claro"] body.panel-futuro .indicador-nota{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Ventas: caja del mismo material, ícono azul en su cuadro blanco y la
   gráfica azul con su relleno degradado. */
html[data-panel-tema="claro"] body.panel-futuro .ventas7{height:auto;min-height:0;padding:22px 24px 18px;background:var(--k-caja);color:var(--k-tinta);border-color:transparent;border-radius:28px;box-shadow:var(--k-sombra)}
html[data-panel-tema="claro"] body.panel-futuro .ventas7::after{display:none}
html[data-panel-tema="claro"] body.panel-futuro .v7-cima{position:relative}
/* .v7-cima .v7-tile: el cuadro es un <span> dentro de .v7-cima y la regla
   del subtítulo (.v7-cima span) lo pintaba de gris; así gana el azul. */
html[data-panel-tema="claro"] body.panel-futuro .v7-cima .v7-tile{width:52px;height:52px;border-radius:16px;background:var(--k-blanco);border-color:transparent;color:var(--k-azul);box-shadow:var(--k-sombra-chica)}
html[data-panel-tema="claro"] body.panel-futuro .v7-tile .ic{width:24px;height:24px;stroke-width:2.2}
html[data-panel-tema="claro"] body.panel-futuro .v7-cima b{color:var(--k-tinta);font-size:18px;font-weight:550}
html[data-panel-tema="claro"] body.panel-futuro .v7-cima>span:not(.v7-tile) span{color:var(--k-tinta2);font-size:14px}
html[data-panel-tema="claro"] body.panel-futuro .v7-mas{display:grid;place-items:center;margin-left:auto;align-self:flex-start;width:42px;height:42px;border-radius:50%;background:var(--k-blanco);color:var(--k-tinta);box-shadow:var(--k-sombra-chica);text-decoration:none}
html[data-panel-tema="claro"] body.panel-futuro .v7-mas .ic{stroke-width:2.8}
html[data-panel-tema="claro"] body.panel-futuro .v7-num{color:var(--k-tinta);font-size:48px;font-weight:600;letter-spacing:-.04em;margin-top:16px}
/* Centavos: gris claro pero legible (5:1); el #8a8f98 de antes daba 3.3. */
html[data-panel-tema="claro"] body.panel-futuro .v7-num .cent{color:var(--k-gris);font-weight:400}
html[data-panel-tema="claro"] body.panel-futuro .v7-delta{color:var(--k-verde);font-size:16px;font-weight:500;margin:8px 0 6px}
html[data-panel-tema="claro"] body.panel-futuro .v7-delta.plano{color:var(--k-tinta2)}
html[data-panel-tema="claro"] body.panel-futuro .lectura-venta{margin:6px 0 6px}
html[data-panel-tema="claro"] body.panel-futuro .lectura-fecha{color:var(--k-tinta2);font-size:14px}
html[data-panel-tema="claro"] body.panel-futuro .lectura-monto{color:var(--k-tinta);font-size:18px;font-weight:600}
html[data-panel-tema="claro"] body.panel-futuro .grafica{color:var(--k-azul-linea)}
html[data-panel-tema="claro"] body.panel-futuro .grafica stop:first-child{stop-opacity:.22}
html[data-panel-tema="claro"] body.panel-futuro .grafica .linea{stroke:var(--k-azul-linea);stroke-width:2.5;filter:none}
html[data-panel-tema="claro"] body.panel-futuro .guia-venta{display:block;position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #1a20301c;pointer-events:none}
html[data-panel-tema="claro"] body.panel-futuro .cursor-venta{background:repeating-linear-gradient(180deg,#0b55d466 0 3px,transparent 3px 7px)}
html[data-panel-tema="claro"] body.panel-futuro .punto-venta{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--k-blanco);box-shadow:inset 0 0 0 2.5px var(--k-azul-linea),0 0 0 5px #0b55d41f}
/* Los días bajo sus puntos: la gráfica deja un margen de pad/An (12/320 en
   graficaVentas()) a cada lado; este negativo lo devuelve para que cada
   etiqueta quede centrada bajo su punto. Si cambian pad o An, cambia aquí. */
html[data-panel-tema="claro"] body.panel-futuro .dias-interactivas{margin-inline:-3.96%;margin-top:6px}
html[data-panel-tema="claro"] body.panel-futuro .dia-venta{color:var(--k-tinta2);font-size:14px;min-height:36px;border-radius:13px}
html[data-panel-tema="claro"] body.panel-futuro .dia-venta[aria-pressed="true"]{background:var(--k-blanco);color:var(--k-azul-texto);font-weight:600;box-shadow:var(--k-sombra-chica)}
html[data-panel-tema="claro"] body.panel-futuro .dia-venta:focus-visible{outline-color:var(--k-azul)}
@media(min-width:900px){
 html[data-panel-tema="claro"] body.panel-futuro .ventas7 .grafica{height:106px}
}
@media(hover:hover) and (pointer:fine){
 html[data-panel-tema="claro"] body.panel-futuro .dia-venta:hover{color:var(--k-tinta)}
 html[data-panel-tema="claro"] body.panel-futuro :is(.accesos a,.indicador,.campana,.ojo,.v7-mas):hover{box-shadow:var(--k-sombra-alta)}
}
/* "Vendido y cobrado hoy" en claro: caja sobre lienzo, placas interiores un
   punto más claras y lo que se toca en blanco. Sin vidrio, sin filos y sin
   la placa de atrás asomándose. */
html[data-panel-tema="claro"] body.panel-futuro .mosaico:has(>.tarjeta-hoy)::before{display:none}
html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy{
 --th-fondo:var(--k-caja);--th-filo:linear-gradient(#0000,#0000);--th-vidrio-filo:linear-gradient(#0000,#0000);--th-placa-filo:linear-gradient(#0000,#0000);
 --th-brillo:#fff;--th-sombra:var(--k-sombra);--th-relieve:var(--k-sombra-chica);
 --th-vidrio:#fff;--th-placa:var(--k-interior);--th-pico:#0000;
 --th-tinta:var(--k-tinta);--th-tinta2:var(--k-tinta2);--th-tinta3:var(--k-tinta2);
 --th-avatar:var(--k-tinta);--th-avatar-tinta:#fff;
 --th-mas:var(--k-azul-deg);--th-mas-tinta:#fff;
 --th-lista:var(--k-interior);--th-barra:var(--k-interior);--th-principal:#fff;--th-puntos:#e8eaee;--th-anillo:var(--k-azul);
 border-radius:30px}
html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy,html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy :is(.th-cuenta,.th-circulo,.th-placa,.th-accion,.th-lista,.th-barra){-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy :is(.th-lista,.th-barra) :focus-visible{outline-color:var(--k-azul)}
html[data-panel-tema="claro"] body.panel-futuro .th-pila{padding-top:0}
html[data-panel-tema="claro"] body.panel-futuro .th-pila::before{display:none}
html[data-panel-tema="claro"] body.panel-futuro .th-placa{margin:0;border-radius:26px;box-shadow:var(--k-sombra)}
html[data-panel-tema="claro"] body.panel-futuro .th-cuenta>.ic{color:#8a8f98;opacity:1}
html[data-panel-tema="claro"] body.panel-futuro .th-circulo .ic,html[data-panel-tema="claro"] body.panel-futuro .th-accion .ic{color:var(--k-icono)}
html[data-panel-tema="claro"] body.panel-futuro .th-accion .ic{stroke-width:1.8}
html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy .th-mas{box-shadow:inset 0 1px 0 #ffffff40,0 14px 28px -8px #0a3fb573}
html[data-panel-tema="claro"] body.panel-futuro .th-fondo{display:contents}
html[data-panel-tema="claro"] body.panel-futuro .th-lista{margin-top:12px;padding:6px 20px;border-radius:26px;color:var(--k-tinta);box-shadow:var(--k-sombra)}
html[data-panel-tema="claro"] body.panel-futuro .th-fila{min-height:62px;gap:14px}
html[data-panel-tema="claro"] body.panel-futuro .th-fila+.th-fila{background:linear-gradient(var(--th-puntos),var(--th-puntos)) 0 0/100% 1px no-repeat}
html[data-panel-tema="claro"] body.panel-futuro .th-ficha{width:42px;height:42px;border-radius:13px;background:#fff;color:var(--k-icono);box-shadow:var(--k-sombra-chica)}
html[data-panel-tema="claro"] body.panel-futuro .th-ficha .ic{width:20px;height:20px;stroke-width:1.7}
html[data-panel-tema="claro"] body.panel-futuro .th-nombre{color:var(--k-tinta2)}
html[data-panel-tema="claro"] body.panel-futuro .th-fila b{font-weight:600;color:var(--k-tinta)}
html[data-panel-tema="claro"] body.panel-futuro .th-barra{margin-top:12px;color:var(--k-icono);box-shadow:var(--k-sombra)}
html[data-panel-tema="claro"] body.panel-futuro .th-barra a.th-principal{color:var(--k-tinta);box-shadow:var(--k-sombra-chica);font-weight:450}
html[data-panel-tema="claro"] body.panel-futuro .th-barra a.th-principal .ic{color:var(--k-azul)}
@media(hover:hover) and (pointer:fine){
 html[data-panel-tema="claro"] body.panel-futuro :is(.th-accion,.th-circulo,.th-cuenta):hover{background-color:#f3f5f8}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra a:not(.th-principal):hover{background:#f0f2f6}
 html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy .th-mas:hover{background:var(--k-azul-deg);filter:brightness(1.08)}
}
/* PC: tres columnas, como la maqueta — la placa y la lista arriba, y abajo
   los círculos con el "+" y la barrita, cada fila con su propio reparto.
   Cada pieza mide lo que mide su contenido (la placa unos 180 px): nada se
   estira para empatar con Ventas, así no quedan huecos. */
@container resumen (min-width:520px){
 html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,41%);grid-template-rows:auto auto auto;
  grid-template-areas:"cima cima cima" "pila pila lista" "acciones barra barra";column-gap:14px;padding:18px 20px 22px}
 html[data-panel-tema="claro"] body.panel-futuro .th-cima{grid-area:cima}
 html[data-panel-tema="claro"] body.panel-futuro .th-cuenta{flex:0 1 auto;margin-right:auto;padding-right:16px;height:52px}
 html[data-panel-tema="claro"] body.panel-futuro .th-circulo{width:52px;height:52px}
 html[data-panel-tema="claro"] body.panel-futuro .th-pila{grid-area:pila;display:flex;flex-direction:column;margin-top:20px}
 html[data-panel-tema="claro"] body.panel-futuro .th-placa{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:34px 18px 26px 24px}
 html[data-panel-tema="claro"] body.panel-futuro .th-renglon2{margin-top:auto;padding-top:46px}
 html[data-panel-tema="claro"] body.panel-futuro .th-renglon1{gap:6px}
 html[data-panel-tema="claro"] body.panel-futuro .th-num{font-size:47px;font-weight:550;letter-spacing:-.04em}
 html[data-panel-tema="claro"] body.panel-futuro .th-num.largo{font-size:38px}
 html[data-panel-tema="claro"] body.panel-futuro .th-num.muy-largo{font-size:30px}
 html[data-panel-tema="claro"] body.panel-futuro .th-lista{grid-area:lista;margin-top:20px;display:flex;flex-direction:column;justify-content:flex-start;padding:4px 20px}
 html[data-panel-tema="claro"] body.panel-futuro .th-fila{min-height:74px}
 html[data-panel-tema="claro"] body.panel-futuro .th-acciones{grid-area:acciones;align-items:center;margin-top:16px}
 html[data-panel-tema="claro"] body.panel-futuro .th-accion{width:54px;height:54px}
 html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy .th-mas{flex:0 0 auto;width:74px;height:74px;border-radius:50%}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra{grid-area:barra;align-self:center;margin-top:16px;height:64px;padding:6px 10px 6px 7px}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra a.th-principal{gap:8px;height:50px;padding:0 18px 0 14px;font-size:15px}
}
/* Tarjeta de PC estrecha (laptop de 1280, unos 550 px de tarjeta): todo un
   escalón más chico. A 1440 la tarjeta mide unos 653 px y va completa. */
@container resumen (min-width:520px) and (max-width:619px){
 html[data-panel-tema="claro"] body.panel-futuro .th-acciones{gap:6px}
 html[data-panel-tema="claro"] body.panel-futuro .th-accion{width:46px;height:46px}
 html[data-panel-tema="claro"] body.panel-futuro .th-accion .ic{width:22px;height:22px}
 html[data-panel-tema="claro"] body.panel-futuro .tarjeta-hoy .th-mas{width:60px;height:60px}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra{padding:5px 6px 5px 5px;height:58px}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra a:not(.th-principal){width:38px;height:38px}
 html[data-panel-tema="claro"] body.panel-futuro .th-placa{padding:30px 16px 22px 20px}
 html[data-panel-tema="claro"] body.panel-futuro .th-renglon2{font-size:12.5px;gap:10px}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra .ic{width:22px;height:22px}
 html[data-panel-tema="claro"] body.panel-futuro .th-barra a.th-principal{height:46px;padding:0 12px 0 10px;gap:6px;font-size:14px}
 html[data-panel-tema="claro"] body.panel-futuro .th-num{font-size:40px}
 html[data-panel-tema="claro"] body.panel-futuro .th-num.largo{font-size:32px}
 html[data-panel-tema="claro"] body.panel-futuro .th-num.muy-largo{font-size:26px}
 html[data-panel-tema="claro"] body.panel-futuro .th-lista{padding:4px 16px}
 html[data-panel-tema="claro"] body.panel-futuro .th-fila{gap:10px;min-height:66px}
 html[data-panel-tema="claro"] body.panel-futuro .th-ficha{width:36px;height:36px;border-radius:11px}
}


.sem{display:none}
/* Sólo del celular: en PC no existen para el ojo ni para el lector. */
.sem .sem-mesm,.sem .sem-agenda,.sem .sem-resumen-mes,.sem .sem-flecha.movil,.sem .sem-dia-vacio,.sem .sem-rotulo-fila,.sem .t-movil,.sem .ev-pil-hora,.sem .chip-u,.sem .sem-todo-ico,.sem .sem-ahora-hora,.sem .ev-caja-hora,.sem .sem-crear-velo,.sem .sem-ficha-velo,.sem .sem-ficha-asa,.sem .ev-movil,.sem .h-larga,.sem .rango-movil{display:none}
/* En PC la píldora es un renglón: la envoltura del texto no existe. */
.ev-pil-texto{display:contents}
/* ── Qué se ve (con la semana, el mes vive a un toque) ── */
body.con-semana main>.cal-cols,body.con-semana main>.vacio,body.con-semana .titulo-grande{display:none}
body.con-semana .sem{display:block}
body.con-semana .barra{min-height:0}
html[data-panel-tema="claro"] body.con-semana{background:#e3e4e6}
.cal-pc-vista{display:flex;gap:6px;align-items:center;margin:0 0 16px;font-size:14px}
/* Es un <nav>: la regla general de nav (el dock flotante del celular, fijo
   abajo) no le aplica en NINGÚN ancho. En PC era una barra de 64 px pegada
   abajo que tapaba el final del mes. */
main>.cal-pc-vista{position:static;z-index:auto;height:auto;padding:0;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;justify-content:flex-start;margin:0 0 16px}
/* width:auto: la regla general de "nav a" (el icono de 52 px del dock) la
   dejaba en 52 px y "Semana" se salía de su píldora sin su flecha. */
.cal-pc-vista a,.cal-pc-vista span{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:max-content;flex:none;white-space:nowrap;height:38px;padding:0 16px;border-radius:999px;background:var(--superficie2);color:var(--tinta);text-decoration:none}
.cal-pc-vista span{background:var(--tinte);color:var(--superficie)}

/* ── Retícula: título + controles; columna fija de 300 px + cuadrícula ── */
.sem{--h:120px;--gris:#dadcde;--tinta-s:#1b1d1f;--tinta-s2:#6b6f70;--tinta-s3:#a9adae;--tarjeta-s:#eff2f1;--panel-s:#f4f6f5;--celda-s:#fcfcfc;
 --guia:#e3e4e7;--c-lima:#d8ff47;--c-reunion:#8f7bfa;--c-llamada:#ec5f8d;color:var(--tinta-s)}
/* Un solo bento compacto: canales de 8 px entre columna y panel y entre
   las tarjetas de la izquierda (la imagen mide ~7). */
/* La columna izquierda ocupa ~20 % del ancho (como la imagen): a 1280 px
   mide ~256 y los días no bajan de ~110; a 1440 y más, sus 288. */
.sem-cabeza{display:grid;grid-template-columns:clamp(240px,20vw,288px) minmax(0,1fr);gap:8px;align-items:center;margin:0 0 26px}
.sem-titulo{margin:0;font-size:36px;font-weight:400;letter-spacing:-.045em;line-height:1.1}
.sem-cuerpo{display:grid;grid-template-columns:clamp(240px,20vw,288px) minmax(0,1fr);gap:8px;align-items:start}

/* ── Barra de controles ── */
.sem-controles{display:flex;align-items:center;gap:10px;min-width:0;padding-left:12px}
.sem-hueco{flex:1}
.sem-hoy,.sem-flecha,.sem-filtros{display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--gris);color:var(--tinta-s);text-decoration:none;cursor:pointer}
.sem-hoy{height:44px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:500}
.sem-rango{margin:0 12px;font-size:18px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.sem-flecha{width:40px;height:40px;border-radius:50%}
.sem-flecha+.sem-flecha{margin-left:-2px}
.sem-buscar{display:flex;align-items:center;gap:8px;margin-right:6px;height:44px;width:clamp(150px,16vw,212px);padding:0 16px;border-radius:999px;background:#dadcde;color:#7f8384}
.sem-buscar input{border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--tinta-s);width:100%;min-width:0}
.sem-buscar input::placeholder{color:#8c9091}
.sem-buscar:focus-within{outline:2px solid #148ba8;outline-offset:2px}
.sem-vista{position:relative;display:inline-flex;margin-right:4px;align-items:center;height:44px;border-radius:999px;background:#1f2326;color:#fff}
.sem-vista select{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:500;height:100%;padding:0 34px 0 18px;cursor:pointer;border-radius:999px}
.sem-vista select option{color:#111}
.sem-vista .ic{position:absolute;right:14px;pointer-events:none}
.sem-filtros-caja{position:relative}
.sem-filtros{width:42px;height:44px;border-radius:999px;background:#dadcde}
.sem-filtros-menu{position:absolute;right:0;top:52px;z-index:30;min-width:190px;padding:12px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -12px #0003}
.sem-filtros-menu p{margin:0 4px 8px;font-size:12px;color:var(--tinta-s2)}
.sem-filtros-menu label{display:flex;align-items:center;gap:9px;padding:7px 6px;font-size:14px;cursor:pointer;border-radius:10px}
.sem-filtros-menu input{accent-color:#1f2326}
.punto{display:inline-block;width:10px;height:10px;border-radius:50%}
.punto.p-cita{background:var(--c-lima);box-shadow:0 0 0 1px #0000001f inset}
.punto.p-reunion{background:var(--c-reunion)}
.punto.p-llamada{background:var(--c-llamada)}

/* ── Columna izquierda: mes, Crear, Resumen ── */
/* La columna izquierda mide lo mismo que el panel: Resumen estira hasta la
   base, sin escalón abajo. */
.sem-izq{display:flex;flex-direction:column;gap:8px;height:calc(100dvh - 160px);min-height:520px;overflow:hidden}
.sem-izq>.sem-tarjeta{flex:0 0 auto}
.sem-izq>.sem-resumen{flex:1 0 auto}
.sem-tarjeta{background:var(--tarjeta-s);border-radius:24px;padding:20px 18px}
.sem-tarjeta h3{margin:0 0 14px;font-size:19px;font-weight:450;letter-spacing:-.03em;color:#2a2d2f}
.sem-mes-cabeza{display:flex;align-items:center;gap:6px;margin:0 0 20px}
.sem-mes-cabeza h3{flex:1;margin:0}
.sem-mes-cabeza button{width:30px;height:30px;border:0;background:none;color:var(--tinta-s);border-radius:50%;cursor:pointer;display:grid;place-items:center}
.sem-mes-fila{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:30px;margin:0;border-radius:999px}
.sem-mes-fila.on{height:38px;margin:-4px 0;position:relative}
.sem-mes-fila.ini{height:22px;margin-bottom:4px}
.sem-mes-fila.ini span{text-align:center;font-size:11px;color:#9fa3a4;position:relative}
.sem-mes-fila.ini span.hoy::after{content:'';position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#9b7bff}
.sem-mes-fila a{justify-self:center;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;color:var(--tinta-s2);text-decoration:none;font-variant-numeric:tabular-nums}
.sem-mes-fila a.fuera{color:#bfc2c3}
.sem-mes-fila a.hoy{width:28px;height:28px;box-shadow:0 0 0 1.5px #5f6061 inset;color:var(--tinta-s)}
.sem-mes-fila.on{background:#050505}
.sem-mes-fila.on a{color:#fff;font-weight:500}
.sem-mes-fila.on a.fuera{color:#ffffffcc}
.sem-mes-fila.on a.hoy{width:28px;height:28px;background:#5f6061;box-shadow:inset 0 0 0 1px #ffffff1f;color:#fff}
.sem-crear h3{margin-bottom:20px}
.sem-crear-chips{display:flex;flex-wrap:wrap;gap:16px 14px}
.sem-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;background:#e2e4e4;box-shadow:inset 0 1px 0 #ffffffb3,0 6px 14px -10px #0000002e;color:#2a2d2f;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.sem-chip svg{width:14px;height:14px;stroke-width:2.2}
.sem-chip:disabled{cursor:not-allowed}
.sem-chip.apagado,.sem-chip:disabled{opacity:.5}
.sem-chip small{font-size:11px;color:var(--tinta-s2);margin-left:2px}
.sem-menu-servicios{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 12px 30px -14px #0003}
.sem-menu-servicios button{border:0;background:none;text-align:left;font:inherit;font-size:14px;padding:9px 10px;border-radius:10px;color:var(--tinta-s);cursor:pointer}
.sem-menu-servicios button:hover,.sem-menu-servicios button:focus-visible{background:#eff2f1}
.sem-resumen-fila{display:flex;align-items:center;gap:9px;height:26px;margin:0 0 10px;font-size:13px}
.sem-resumen-fila span:nth-child(2){flex:1;color:#3b3e40}
.sem-resumen-fila em{font-style:normal;font-size:12px;color:#a9adae;font-variant-numeric:tabular-nums}
.sem-resumen-ico{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#e4e6e6}
.sem-resumen-ico svg{width:12px;height:12px;stroke-width:2.2}
.sem-progreso{height:2px;margin:2px 0 16px;background:repeating-linear-gradient(90deg,#dde0dc 0 10px,transparent 10px 13px);border-radius:1px;overflow:hidden}
.sem-progreso i{display:block;height:100%;background:repeating-linear-gradient(90deg,#9bdc5e 0 10px,transparent 10px 13px)}

/* ── La cuadrícula semanal ── */
.sem-panel{position:relative;background:var(--panel-s);border-radius:24px;padding:0 12px 12px 6px;height:calc(100dvh - 160px);min-height:520px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.sem-panel::-webkit-scrollbar{display:none}
.sem-cab-fila,.sem-todo-fila,.sem-horas-fila{display:grid;grid-template-columns:62px repeat(7,minmax(0,1fr))}
.sem-cab-fila{position:sticky;top:0;z-index:12;background:var(--panel-s);height:52px;align-items:center;padding-top:16px}
/* Sólo existe si la semana trae reservaciones sin hora o días cerrados. */
.sem-todo-fila{position:sticky;top:52px;z-index:11;background:var(--panel-s);min-height:40px;max-height:46px;padding:3px 0}
.sem-todo-fila:has(.abierta){max-height:none}
/* El encabezado es lo más ligero de la cuadrícula: nombre y número en gris,
   sin disco. Hoy sólo sube de tono y lleva el puntito lila del mini-mes. */
.sem-dia-cab{position:relative;text-align:center;font-size:13px;color:#8c9091}
.sem-dia-cab b{font-weight:400;color:inherit;font-variant-numeric:tabular-nums}
.sem-dia-cab.es-hoy{color:var(--tinta-s);font-weight:500}
.sem-dia-cab.es-hoy::after{content:'';position:absolute;left:50%;bottom:-7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#9b7bff}
.sem-todo-fila{align-items:center}
.sem-todo-etq{grid-column:1;font-size:11px;line-height:1.2;white-space:nowrap;color:var(--tinta-s3);padding:0 16px 0 0;text-align:right}
/* UN renglón por día: la primera cosa y "+n"; "+n" despliega las demás
   encima de la cuadrícula (la franja no crece y la primera hora no baja). */
.sem-todo-celda{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;min-width:0;padding:0 3px}
.sem-todo-celda>.sem-chip-dia,.sem-todo-celda>.sem-chip-cerrado{flex:1 1 auto;min-width:0}
.sem-todo-celda:not(.abierta) .sem-todo-extra{display:none}
.sem-todo-mas{flex:0 0 auto;display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:0;border-radius:999px;background:#1f2326;color:#fff;font:inherit;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.sem-todo-mas:focus-visible{outline:2px solid #148ba8;outline-offset:2px}
.sem-todo-celda.abierta{position:relative;z-index:2;flex-direction:column;align-items:stretch;align-self:start;margin-bottom:-400px;padding:5px 3px 6px;border-radius:20px;background:var(--panel-s);box-shadow:0 18px 34px -14px #0000003d,0 0 0 1px #0000000a}
.sem-todo-celda.abierta .sem-todo-mas{align-self:center;min-width:44px;padding:0 12px}
.sem-chip-dia.con-cierre{background:repeating-linear-gradient(135deg,#1b240814 0 1.5px,transparent 1.5px 7px),#d8ff47}
.sem-chip-dia{display:flex;align-items:center;gap:5px;height:34px;padding:0 6px 0 12px;margin:0 -3px;border:0;border-radius:999px;font:inherit;font-size:13px;letter-spacing:-.01em;font-weight:500;cursor:pointer;min-width:0;background:#d8ff47;color:#1b2408;box-shadow:0 8px 18px -8px #9ccc2a99}
.sem-chip-dia span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.sem-chip-dia b{display:grid;place-items:center;flex:0 0 auto;min-width:22px;height:22px;padding:0 4px;border-radius:999px;background:#1b240814;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.sem-chip-cerrado{display:block;padding:6px 10px;border-radius:999px;font-size:11px;color:#6b6f70;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 background:repeating-linear-gradient(135deg,#e7e8ea 0 1.5px,transparent 1.5px 7px),#f7f7f8}
.sem-horas{grid-column:1;display:grid;grid-template-rows:repeat(var(--horas),var(--h))}
.sem-hora{font-size:12px;color:var(--tinta-s3);text-align:right;padding:14px 16px 0 0;white-space:nowrap}
/* Celdas lisas, sin contorno: la guía punteada finísima corre sólo por el
   canal ENTRE celdas (vertical en el borde de cada día, horizontal bajo
   cada celda). Se lee como bento, no como tabla. */
.sem-dia{position:relative;display:grid;grid-template-rows:repeat(var(--horas),var(--h))}
.sem-dia:not(:last-child){background:repeating-linear-gradient(to bottom,var(--guia) 0 3px,transparent 3px 7px) right top/1px 100% no-repeat}
.sem-celda{position:relative;margin:3px;border-radius:20px;background:var(--celda-s);box-shadow:0 0 0 1px #00000005}
.sem-celda+.sem-celda::before{content:'';position:absolute;left:-3px;right:-3px;top:-4px;height:1px;pointer-events:none;
 background:repeating-linear-gradient(to right,var(--guia) 0 3px,transparent 3px 7px)}
.sem-num{position:absolute;top:8px;left:11px;font-size:11px;color:#d0d0d3;font-variant-numeric:tabular-nums}
.sem-dia.es-hoy .sem-celda:first-child .sem-num{color:var(--tinta-s2)}
.sem-bloqueo{position:absolute;left:3px;right:3px;top:calc(var(--y) * var(--h) + 3px);height:calc(var(--alto) * var(--h) - 6px);min-height:22px;border-radius:18px;z-index:1;
 display:grid;place-items:center;background:repeating-linear-gradient(135deg,#e4e5e8 0 1.5px,transparent 1.5px 8px),#f6f6f7}
.sem-bloqueo span{padding:4px 12px;border-radius:999px;background:#fff;font-size:11px;color:#6b6f70}
/* "Ahora": una línea fina, no una barra; el punto, del mismo color. */
.sem-ahora{position:absolute;left:0;right:0;top:calc(var(--y) * var(--h));height:1px;z-index:1;background:#1b1d1f8c;pointer-events:none}
.sem-ahora::before{content:'';position:absolute;left:-3px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:#1b1d1f8c}
.sem-vacia{margin:18px 60px 6px;font-size:13px;color:var(--tinta-s2)}

/* ── Tarjetas de evento ──
   La tarjeta SOBRESALE 4 px de su celda (la celda va 3 px adentro de la
   columna) y flota encima de la cuadrícula y de la línea de "ahora". */
.ev{position:absolute;z-index:calc(3 + var(--carril));top:calc(var(--y) * var(--h) + 4px);
 left:calc(-1px + var(--carril) * (100% + 2px) / var(--carriles));width:calc((100% + 2px) / var(--carriles));
 border:0;font:inherit;text-align:left;cursor:pointer;color:var(--tinta-s);transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease,opacity .18s ease}
.ev:focus-visible{outline:2px solid #148ba8;outline-offset:2px}
.ev.activo{z-index:7;transform:translateY(-2px)}
.ev-tarjeta{top:calc(var(--y) * var(--h) - 1px);height:calc(var(--alto) * var(--h) + 2px);min-height:44px;padding:32px 6px 6px;border-radius:20px;display:flex;flex-direction:column;align-items:stretch;gap:4px;overflow:hidden;
 box-shadow:0 18px 34px -14px #0000003d,0 4px 10px -4px #0000001a,inset 0 0 0 1px #ffffffa6,inset 0 1px 0 #fff;
 background:radial-gradient(70% 60% at 22% 0%,var(--c1) 0%,transparent 72%),radial-gradient(60% 55% at 85% 8%,var(--c3,var(--c2)) 0%,transparent 70%),
  linear-gradient(180deg,var(--c2) 0%,var(--c2) 22%,color-mix(in srgb,var(--c2) 55%,#fff) 45%,color-mix(in srgb,var(--c2) 26%,#fff) 70%,color-mix(in srgb,var(--c2) 14%,#fff) 100%)}
.ev-tarjeta.ev-alta{padding-top:44px}
.ev-grupo{padding:26px 4px 4px}
.ev-cita,.g-cita{--c1:#aaf364;--c3:#c8ff6e;--c2:#d4fb8f}
.ev-reunion,.g-reunion{--c1:#dcaefe;--c3:#a6b6fd;--c2:#c7b9fb}
.ev-llamada,.g-llamada{--c1:#f15585;--c3:#ffb3c8;--c2:#f58fb0}
/* UNA cajita translúcida con rayas diagonales que contiene el título y,
   dentro, la píldora blanca sólida del horario (como en la maqueta). */
.ev-cuerpo{display:flex;flex-direction:column;flex:0 0 auto;padding:6px;border-radius:12px;
 background:repeating-linear-gradient(135deg,#ffffff66 0 1px,transparent 1px 6px),#ffffff8c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ev-tarjeta .ev-titulo{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;padding:1px 3px 0;margin-bottom:5px;
 font-size:13px;font-weight:500;line-height:16px;letter-spacing:-.01em}
.ev-tarjeta .ev-hora{display:block;padding:4px 2px;border-radius:10px;font-size:12px;letter-spacing:-.015em;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 background:#fffffff2}
/* La llamada larga es la excepción de la maqueta: rosa hasta dos tercios,
   título en blanco directo sobre el color y el horario en píldora rosada. */
.ev-tarjeta.ev-llamada{color:#fff;background:radial-gradient(70% 60% at 22% 0%,#f15585 0%,transparent 72%),
 linear-gradient(180deg,#e65383 0%,#ec6d97 50%,#ef86a9 74%,#f6bccf 100%)}
.ev-tarjeta.ev-llamada .ev-cuerpo{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:2px 2px 0}
/* Vidrio rosado más oscuro que el fondo: el blanco se lee (~3:1), no se lava. */
.ev-tarjeta.ev-llamada .ev-hora{background:#9b1f4f33;color:#fff;text-shadow:0 1px 1px #b0305a55;box-shadow:inset 0 0 0 1px #ffffff33}
/* Una hora (120 px) cabe entera: franja de color de 32 px, título a UN renglón
   (como "Meeting with des…"), horario y avatares. La tarjeta alta, a dos. */
.ev-tarjeta:not(.ev-alta) .ev-titulo{display:block;white-space:nowrap;text-overflow:ellipsis}
.ev-tarjeta.ev-alta .ev-titulo{-webkit-line-clamp:2}
.ev-avatares{display:flex;align-items:center;margin-top:0;padding-left:2px}
.ev-avatares i{display:grid;place-items:center;width:22px;height:22px;margin-right:-5px;padding-right:2px;box-sizing:border-box;border-radius:50%;font-style:normal;font-size:10.5px;font-weight:600;color:#1b1d1f;box-shadow:0 0 0 2px #fff}
.ev-avatares i.tono-0{background:#d9d2c8}.ev-avatares i.tono-1{background:#c6d3dc}.ev-avatares i.tono-2{background:#dccfd7}.ev-avatares i.tono-3{background:#cfd9c5}
.ev-avatares i.mas{background:#262b2e;color:#fff;font-size:10px;padding-right:0}
/* Sin personas: un avatar neutro con la inicial del servicio (o el teléfono). */
.ev-avatares i.neutro{background:#e6e8e8;color:#5d6163;padding-right:0}
.ev-avatares i.neutro svg{width:11px;height:11px}
.ev-pildora{left:calc(8px + var(--carril) * (100% - 16px) / var(--carriles));height:34px;width:max-content;max-width:calc((100% - 16px) / var(--carriles));padding:0 10px 0 9px;border-radius:999px;display:flex;align-items:center;gap:5px;font-size:13px;letter-spacing:-.01em;font-weight:500}
.ev-pildora .ev-titulo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-pildora .ev-ico{display:grid;place-items:center;flex:0 0 auto}
.ev-pildora .ev-ico svg{width:14px;height:14px}
/* Relleno sólido y un halo difuso de SU color, no una sombra gris. */
.ev-pildora.ev-cita{background:#d8ff47;color:#1b2408;box-shadow:0 8px 18px -8px #9ccc2a99}
.ev-pildora.ev-reunion{background:#6d4cf5;color:#fff;box-shadow:0 8px 18px -8px #6d4cf599}
.ev-pildora.ev-llamada{background:#ec5f8d;color:#fff;box-shadow:0 8px 18px -8px #ec5f8d99}
/* Encimados: una tarjeta, una cajita por evento y "Todos (n)" */
/* La tarjeta del grupo mide lo que su contenido (como "Big Group"): el
   botón va pegado a las cajitas. Si no caben en su franja, las cajitas se
   encogen y "Todos (n)" despliega la tarjeta. */
.ev-grupo{cursor:default;height:auto;max-height:calc(var(--alto) * var(--h) + 2px)}
.ev-grupo.abierto{max-height:none;z-index:8}
.ev-grupo.vacio{display:none}
.ev-cajas{display:flex;flex-direction:column;gap:5px;flex:0 1 auto;min-height:0;overflow:hidden}
.ev-caja{display:flex;align-items:center;gap:4px;flex:0 0 auto;width:100%;height:32px;padding:0 6px 0 7px;border:0;border-radius:999px;background:#ffffffb8;color:inherit;font:inherit;font-size:13px;letter-spacing:-.015em;font-weight:500;text-align:left;cursor:pointer;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ev-caja span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Un puntito del color del tipo: en el grupo se sabe cuál es cita y cuál llamada. */
.ev-caja::before{content:'';flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--c-reunion)}
/* Dos renglones a la vista (los demás, con "Todos (n)"). */
.ev-grupo:not(.ev-grupo-movil):not(.abierto) .ev-caja-mas{display:none}
.ev-caja.ev-cita::before{background:#8fd850}
.ev-caja.ev-llamada::before{background:var(--c-llamada)}
.ev-caja:focus-visible,.ev-todos:focus-visible{outline:2px solid #148ba8;outline-offset:1px}
.ev-todos{flex:0 0 auto;width:100%;height:30px;border:0;border-radius:999px;background:#262b2e;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.sem .ev-grupo:has(.ev-caja:focus-visible){max-height:none;z-index:8}
.sem.sin-cita .ev-cita,.sem.sin-cita .sem-chip-dia,.sem.sin-reunion .ev-reunion,.sem.sin-llamada .ev-llamada{display:none}
.sem .apagado:is(.ev,.sem-chip-dia,.ev-caja){opacity:.18}
@media(hover:hover) and (pointer:fine){
 .ev:not(.ev-grupo):hover{transform:translateY(-2px)}
 .ev-tarjeta:hover{box-shadow:0 22px 40px -14px #00000045,0 4px 10px -4px #0000001a,inset 0 0 0 1px #ffffffa6,inset 0 1px 0 #fff}
 .ev-caja:hover{background:#ffffffeb}
 .sem-hoy:hover,.sem-flecha:hover,.sem-filtros:hover,.sem-buscar:hover{background:#d0d2d4}
 .sem-chip:not(:disabled):hover{background:#d8dada}
}

/* ── La ficha de detalle: SIEMPRE oscura (degradado a morado + puntitos) ── */
.sem-ficha{position:fixed;z-index:35;width:300px;padding:18px;border-radius:26px;color:#fff;
 background:radial-gradient(circle,#ffffff12 0.9px,transparent 1.3px) 0 0/6px 6px,radial-gradient(120% 55% at 50% 100%,#3a2758 0%,transparent 70%),
  linear-gradient(180deg,#141416 0%,#131316 46%,#1c1627 66%,#271d3a 82%,#33254f 100%);
 box-shadow:0 30px 70px -18px #000000a6,inset 0 1px 0 #ffffff14;outline:none}
.sem-ficha[hidden]{display:none}
.sem-ficha-cima{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.sem-ficha-tipo{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 5px;border-radius:999px;background:#262628;font-size:12px;box-shadow:inset 0 1px 0 #ffffff1c,0 0 0 1px #ffffff14}
.sem-ficha-tipo>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#1b1d1f}
.sem-ficha-acciones{margin-left:auto;display:flex;gap:2px}
.sem-ficha-acciones button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer}
.sem-ficha-acciones button:hover,.sem-ficha-acciones button:focus-visible{background:#ffffff1a}
.sem-ficha h2{margin:0 0 16px;font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sem-ficha-renglon{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px}
.sem-ficha-renglon[hidden]{display:none}
.sem-ficha-ico{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#1e1e20;box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px #ffffff12,0 6px 14px -6px #000}
/* Cada dato, UNA línea en su píldora de 44 px (nunca un globo de dos). */
.sem-ficha-dato{display:block;flex:0 1 auto;min-width:0;height:44px;line-height:44px;padding:0 14px;border-radius:999px;background:#232325;box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px #ffffff12;
 font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sem-ficha-dato.chico{display:block;height:30px;line-height:30px;padding:0 12px;font-size:12px;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sem-ficha-dato[hidden]{display:none}
#fichaGente{padding:0 6px;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sem-ficha-seccion{margin:6px 0 0}
.sem-ficha-etq{margin:12px 0 6px;font-size:12px;color:#a8a4b3}
/* Ficha compacta: el texto corrido se corta a UN renglón (el completo va en
   title y en el formulario de edición). */
.sem-ficha-nota{margin:0;font-size:13px;line-height:1.45;color:#e7e5ec;white-space:pre-line;overflow-wrap:anywhere;
 display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sem-ficha-nota.una{display:block;white-space:nowrap;text-overflow:ellipsis}
/* La etiqueta de pago del panel se pinta para fondo claro; en la ficha
   (siempre oscura) cada estado lleva su versión legible. */
.sem-ficha .et-pago{background:#ffffff1a;color:#e8e6ee;box-shadow:inset 0 0 0 1px #ffffff14}
.sem-ficha .et-pago.pagado{background:#d8ff4726;color:#d8ff47}
.sem-ficha .et-pago.porconfirmar{background:#ffb54726;color:#ffd08a}
.sem-ficha .et-pago.apartado{background:#ffffff14;color:#c9c6d2}
.sem-ficha .et-pago.amano{background:#9fb8ff26;color:#c9d6ff}
.sem-ficha .ev-avatares{margin:0 0 6px}
.sem-ficha .ev-avatares i{width:28px;height:28px;margin-right:-7px;font-size:12px;box-shadow:0 0 0 2px #1a1526}
.sem-ficha .ev-avatares i.mas{background:#2c2c30;color:#fff;box-shadow:0 0 0 2px #1a1526,inset 0 0 0 1px #ffffff26}
.sem-ficha-pago{display:flex;align-items:center;gap:10px;margin:0}
.sem-ficha-pago b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.sem-ficha-pie{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.sem-ficha-pie:empty{display:none}
.sem-ficha-boton{display:flex;align-items:center;justify-content:center;height:50px;border:0;border-radius:999px;background:#fcfcfc;color:#16171a;font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px -8px #0008}
.sem-ficha-liga{text-align:center;font-size:13px;color:#cfcbd8}
.sem-ficha :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── El formulario de reuniones (hoja, como la reserva a mano) ── */
.sem-hoja .dos-campos .dos-campos{gap:8px}
.sem-hoja textarea{resize:vertical;font:inherit}
.sem-form-error{margin:4px 2px 0;font-size:13px;color:var(--rojo)}

/* ── Pantallas medianas (900–1179 px): la columna izquierda sube ── */
@media(min-width:900px) and (max-width:1179px){
 .sem-cabeza,.sem-cuerpo{grid-template-columns:minmax(0,1fr)}
 .sem-izq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;height:auto;min-height:0}
 .sem-buscar{width:150px}
 .sem-rango{font-size:16px}
}

/* ══ Capa OSCURA: la gemela de cada color de arriba ══ */
html:not([data-panel-tema="claro"]) .sem{--gris:#23262a;--tinta-s:#e8eaec;--tinta-s2:#8b9095;--tinta-s3:#6f747a;--tarjeta-s:#17191c;--panel-s:#141619;--celda-s:#1d2023;--guia:#ffffff14}
html:not([data-panel-tema="claro"]) .sem-tarjeta h3{color:#e1e3e6}
html:not([data-panel-tema="claro"]) .sem-resumen-fila span:nth-child(2){color:#c9ccd0}
html:not([data-panel-tema="claro"]) .sem-resumen-fila em{color:#6f747a}
html:not([data-panel-tema="claro"]) .sem-chip{color:var(--tinta-s)}
html:not([data-panel-tema="claro"]) .sem-mes-fila.on a.hoy{box-shadow:inset 0 0 0 1px #0000001f}
html:not([data-panel-tema="claro"]) .sem-dia-cab.es-hoy::after{background:#b9a3ff}
html:not([data-panel-tema="claro"]) .sem-celda{box-shadow:none}
html:not([data-panel-tema="claro"]) .sem-ficha{box-shadow:0 30px 70px -18px #000,0 0 0 1px #ffffff1a,inset 0 1px 0 #ffffff14}
html:not([data-panel-tema="claro"]) .sem-buscar{background:#1d2023;color:#8b9095}
html:not([data-panel-tema="claro"]) .sem-filtros{background:#23262a}
html:not([data-panel-tema="claro"]) .sem-buscar input::placeholder{color:#7b8086}
html:not([data-panel-tema="claro"]) .sem-vista{background:#f1f2f4;color:#111317}
html:not([data-panel-tema="claro"]) .sem-vista .ic{color:#111317}
html:not([data-panel-tema="claro"]) .sem-filtros-menu,html:not([data-panel-tema="claro"]) .sem-menu-servicios{background:#1d2023;box-shadow:0 18px 40px -12px #000a}
html:not([data-panel-tema="claro"]) .sem-filtros-menu input{accent-color:#f1f2f4}
html:not([data-panel-tema="claro"]) .sem-menu-servicios button:hover,html:not([data-panel-tema="claro"]) .sem-menu-servicios button:focus-visible{background:#262a2e}
html:not([data-panel-tema="claro"]) .sem-mes-fila.ini span{color:#6f747a}
html:not([data-panel-tema="claro"]) .sem-mes-fila a.fuera{color:#4c5055}
html:not([data-panel-tema="claro"]) .sem-mes-fila a.hoy{box-shadow:0 0 0 1.5px #9ca1a6 inset}
html:not([data-panel-tema="claro"]) .sem-mes-fila.on{background:#f4f5f6}
html:not([data-panel-tema="claro"]) .sem-mes-fila.on a{color:#111317}
html:not([data-panel-tema="claro"]) .sem-mes-fila.on a.fuera{color:#111317cc}
html:not([data-panel-tema="claro"]) .sem-mes-fila.on a.hoy{background:#b9bcc0;color:#111317}
html:not([data-panel-tema="claro"]) .sem-chip,html:not([data-panel-tema="claro"]) .sem-resumen-ico{background:#23262a}
html:not([data-panel-tema="claro"]) .sem-chip{box-shadow:inset 0 1px 0 #ffffff0f,0 6px 14px -10px #000000a0}
html:not([data-panel-tema="claro"]) .sem-progreso{background:repeating-linear-gradient(90deg,#2a2e32 0 10px,transparent 10px 13px)}
html:not([data-panel-tema="claro"]) .sem-num{color:#4a4e53}
html:not([data-panel-tema="claro"]) .sem-dia-cab{color:#8b9095}
html:not([data-panel-tema="claro"]) .sem-chip-cerrado{color:#9ca1a6;background:repeating-linear-gradient(135deg,#ffffff10 0 1.5px,transparent 1.5px 7px),#1a1c1f}
html:not([data-panel-tema="claro"]) .sem-bloqueo{background:repeating-linear-gradient(135deg,#ffffff0f 0 1.5px,transparent 1.5px 8px),#181a1d}
html:not([data-panel-tema="claro"]) .sem-bloqueo span{background:#26292d;color:#b3b7bc}
html:not([data-panel-tema="claro"]) .sem-ahora,html:not([data-panel-tema="claro"]) .sem-ahora::before{background:#ffffff99}
html:not([data-panel-tema="claro"]) .ev{color:#f0f1f3}
html:not([data-panel-tema="claro"]) .ev-pildora.ev-cita{color:#1b2408}
html:not([data-panel-tema="claro"]) .ev-tarjeta{box-shadow:0 18px 34px -14px #000d,0 4px 10px -4px #0008,inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff1c;
 background:radial-gradient(70% 60% at 22% 0%,var(--c1) 0%,transparent 72%),radial-gradient(60% 55% at 85% 8%,var(--c3,var(--c2)) 0%,transparent 70%),
  linear-gradient(180deg,var(--c2) 0%,color-mix(in srgb,var(--c2) 60%,#1f2226) 30%,color-mix(in srgb,var(--c2) 22%,#1f2226) 52%,#1f2226 78%)}
html:not([data-panel-tema="claro"]) .ev-cuerpo{background:repeating-linear-gradient(135deg,#ffffff0d 0 1px,transparent 1px 6px),#1d2023b3;box-shadow:inset 0 0 0 1px #ffffff14}
html:not([data-panel-tema="claro"]) .ev-tarjeta .ev-titulo{color:#f5f6f7}
html:not([data-panel-tema="claro"]) .ev-caja{background:#1d2023d9;color:#f5f6f7;box-shadow:inset 0 0 0 1px #ffffff14}
html:not([data-panel-tema="claro"]) .ev-tarjeta .ev-hora{background:#2a2e33;color:#e3e5e8}
html:not([data-panel-tema="claro"]) .ev-tarjeta.ev-llamada{background:radial-gradient(70% 60% at 22% 0%,#f15585 0%,transparent 72%),
 linear-gradient(180deg,#e65383 0%,#c9557c 40%,color-mix(in srgb,#e65383 25%,#1f2226) 66%,#1f2226 100%)}
html:not([data-panel-tema="claro"]) .ev-tarjeta.ev-llamada .ev-cuerpo{background:none;box-shadow:none}
html:not([data-panel-tema="claro"]) .ev-tarjeta.ev-llamada .ev-hora{background:#ffffff2e;color:#fff}
html:not([data-panel-tema="claro"]) .ev-todos{background:#f1f2f4;color:#111317}
html:not([data-panel-tema="claro"]) .ev-avatares i{box-shadow:0 0 0 2px #1d2023}
html:not([data-panel-tema="claro"]) .ev-avatares i.mas{background:#f1f2f4;color:#111317}
html:not([data-panel-tema="claro"]) .ev-avatares i.neutro{background:#2e3237;color:#c3c7cc}
html:not([data-panel-tema="claro"]) .ev-caja.ev-cita::before{background:#d8ff47}
html:not([data-panel-tema="claro"]) .sem-chip-dia{box-shadow:0 8px 18px -8px #9ccc2a66}
html:not([data-panel-tema="claro"]) .sem-todo-mas{background:#f1f2f4;color:#111317}
html:not([data-panel-tema="claro"]) .sem-todo-celda.abierta{box-shadow:0 18px 34px -14px #000d,0 0 0 1px #ffffff14}
@media(hover:hover) and (pointer:fine){
 html:not([data-panel-tema="claro"]) .sem-chip:not(:disabled):hover,html:not([data-panel-tema="claro"]) .sem-hoy:hover,html:not([data-panel-tema="claro"]) .sem-flecha:hover,html:not([data-panel-tema="claro"]) .sem-filtros:hover,html:not([data-panel-tema="claro"]) .sem-buscar:hover{background:#2c3035}
 html:not([data-panel-tema="claro"]) .ev-tarjeta:hover{box-shadow:0 22px 40px -14px #000e,0 4px 10px -4px #0008,inset 0 0 0 1px #ffffff12,inset 0 1px 0 #ffffff1c}
 html:not([data-panel-tema="claro"]) .ev-caja:hover{background:#262a2e}
}

@media(max-width:899px){
.sem{--h:88px}
/* El regreso del mes a la semana, del tamaño de un dedo (el reseteo del
   <nav> vive arriba, para TODOS los anchos). */
.cal-pc-vista a,.cal-pc-vista span{width:auto;height:44px;border-radius:999px}
.cal-pc-vista a.on,.cal-pc-vista a:active{transform:none}

/* ── Encabezado: título y Semana ▾; abajo Hoy · rango · ‹ › · lupa ── */
.sem-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:14px 6px;margin:12px 0 16px}
.sem-titulo{flex:1 1 auto;min-width:0;font-size:30px;letter-spacing:-.04em}
.sem-controles{display:contents}
.sem-vista{order:1;margin:0}
.sem-vista select{padding:0 36px 0 18px}
.sem-hueco{order:2;flex:0 0 100%;height:0}
.sem-hoy{order:3;height:44px;padding:0 16px}
.sem-rango{order:4;flex:1 1 0;min-width:0;margin:0 2px;font-size:16px;text-align:center;overflow:hidden;text-overflow:ellipsis}
.sem-rango .rango-pc{display:none}
.sem-rango .mes-corto{display:none}
.sem .sem-rango .rango-movil{display:inline}
.sem-flecha{order:5;width:44px;height:44px}
.sem-flecha+.sem-flecha{margin-left:0}
.sem-filtros-caja{order:6}
.sem-filtros{width:44px;height:44px}
.sem-filtros-menu{top:auto;margin-top:64px}
.sem-filtros-menu label{min-height:44px;padding:0 8px;font-size:15px}
.sem-filtros-menu input{width:18px;height:18px;margin:0}
/* El buscador vive detrás del botón de filtros (o se queda si tiene texto). */
.sem-buscar{order:7;display:none;flex:1 0 100%;width:auto;margin:0}
/* 16 px: con menos, Safari de iPhone acerca la página al escribir. */
.sem .sem-buscar input{height:auto;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;font-size:16px}
.sem-cabeza:has(.sem-filtros[aria-expanded="true"]) .sem-buscar,.sem-cabeza:has(#semBuscar:not(:placeholder-shown)) .sem-buscar{display:flex}

/* ── La cuadrícula del MES (decisión del dueño, 28-sep-2026) ──
   El mini-mes de la imagen, a todo lo ancho: una TARJETA CLARA (la de la
   columna izquierda de PC) con números oscuros, y SÓLO la semana del día
   elegido (o la de hoy, sin día) en PÍLDORA NEGRA con números blancos —
   así se ve en qué semana está uno. HOY con aro gris, el ELEGIDO en círculo
   gris relleno, hasta tres puntitos por día (lima = citas, lila = reuniones,
   rosa = llamadas) y las colas de los meses vecinos atenuadas. Cada día es
   un botón de 44 px o más. No es pegajosa: mide cinco o seis renglones y
   taparía la agenda; lo pegajoso es sólo el rótulo, que regresa aquí. */
.sem .sem-mesm{display:block;margin:0 0 12px;padding:10px 6px 6px;border-radius:30px;background:var(--tarjeta-s);touch-action:pan-y}
.sem-mesm-ini,.sem-mesm-fila{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sem-mesm-ini{height:24px;align-items:center}
.sem-mesm-ini span{position:relative;text-align:center;font-size:12px;line-height:14px;color:#8c9091}
.sem-mesm-ini span.hoy::after{content:'';position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#9b7bff}
.sem-mesm-fila{border-radius:999px}
.sem-mesm-fila.on{background:#050505}
.sem-mesm-fila>div{display:flex;min-width:0}
.sem-mesm-dia{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-width:0;height:50px;padding:0;border:0;border-radius:18px;background:none;color:var(--tinta-s2);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sem-mesm-fila.on .sem-mesm-dia{color:#fff}
.sem-mesm-dia b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.sem-mesm-dia.es-hoy b{box-shadow:inset 0 0 0 1.5px #5f6061;color:var(--tinta-s)}
.sem-mesm-fila.on .sem-mesm-dia.es-hoy b{box-shadow:inset 0 0 0 1.5px #8d9092;color:#fff}
.sem-mesm-dia[aria-pressed="true"] b{background:#5f6061;box-shadow:inset 0 0 0 1px #ffffff1f;color:#fff}
.sem-mesm-dia.fuera b{color:#bfc2c3;font-weight:400}
.sem-mesm-fila.on .sem-mesm-dia.fuera b{color:#ffffffa6}
.sem-mesm-dia.fuera .sem-tira-puntos{opacity:.6}
.sem-mesm-dia:focus-visible{outline:2px solid #148ba8;outline-offset:-3px}
.sem-mesm-fila.on .sem-mesm-dia:focus-visible{outline-color:#fff}
.sem-tira-puntos{display:flex;gap:3px;height:5px}
.sem-tira-puntos i{width:5px;height:5px;border-radius:50%}
/* Sobre la tarjeta clara, los tonos hondos; dentro de la píldora negra, los brillantes. */
.sem-tira-puntos .t-cita{background:#7fa316}
.sem-tira-puntos .t-reunion{background:#6d4cf5}
.sem-tira-puntos .t-llamada{background:#e0457a}
.sem-mesm-fila.on .t-cita{background:#d8ff47}
.sem-mesm-fila.on .t-reunion{background:#a48cff}
.sem-mesm-fila.on .t-llamada{background:#ff6f9c}

/* ── Lo pegajoso: el rótulo del día, bajo la barra ── */
.sem .sem-fijo{--encoge:0px;position:sticky;top:0;z-index:15;margin:0 -18px 8px;padding:env(safe-area-inset-top,0px) 18px 0;transition:background .2s ease}
.sem-fijo.pegada{background:var(--barra);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
 box-shadow:0 1px 0 #0000000d}
/* La barra del panel NO se pinta aquí: sin su título (el grande ya dice
   "Calendario") quedaba una banda vacía de 52 px pegada arriba al bajar.
   Lo único pegajoso es el rótulo del día, desde el borde de la pantalla. */
body.con-semana .barra{display:none}

/* El rótulo del día: pegajoso bajo la barra, dice qué día se ve (también al
   lector, con aria-live) y lleva "Crear" a la mano sin tapar ninguna tarjeta.
   En reposo es transparente; pegado toma el cristal de la barra. */
.sem .sem-rotulo-fila{display:flex;align-items:center;gap:10px;padding:4px 0}
/* Tocarlo sube a la cuadrícula del mes: al bajar por la agenda no hay que
   regresar a mano para cambiar de día. */
.sem-rotulo-btn{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--tinta-s2);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sem-rotulo-btn .ic{flex:0 0 auto;transform:rotate(180deg)}
.sem-rotulo-btn:focus-visible{outline:2px solid #148ba8;outline-offset:2px;border-radius:12px}
.sem-rotulo{flex:0 1 auto;min-width:0;margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tinta-s)}
.sem-rotulo-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Sin día elegido: la invitación, en gris y sin peso. */
.sem-rotulo.invita{font-weight:400;color:var(--tinta-s2)}
/* A 320 px la invitación comparte renglón con "+" y se cortaba ("…sus
   horari…"): que baje de renglón. Y sin día no hay a dónde regresar (la
   cuadrícula está justo encima): sin la flecha, que parecía un acordeón. */
.sem-rotulo.invita{white-space:normal;text-overflow:clip;line-height:18px}
.sem-rotulo-btn:has(.invita) .ic{display:none}
.sem-rotulo-btn:has(.invita){cursor:default}
.sem .sem-crear-btn{flex:0 0 auto;height:44px;padding:0 16px 0 13px;background:#1f2326;color:#fff;box-shadow:0 10px 22px -12px #0009,inset 0 1px 0 #ffffff26}
.sem-crear-btn:focus-visible{outline:2px solid #148ba8;outline-offset:2px}
/* Pegado, "Crear" no echa sombra sobre la agenda que pasa por debajo. */
.sem .sem-fijo.pegada .sem-crear-btn{box-shadow:inset 0 1px 0 #ffffff26}

/* Día sin nada: un aviso amable ("Crear" está en el rótulo, justo arriba). */
.sem .sem-dia-vacio{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:13px 18px;border-radius:24px;background:var(--tarjeta-s)}
.sem .sem-dia-vacio[hidden]{display:none}
.sem-dia-vacio p{flex:1;margin:0;font-size:15px;color:var(--tinta-s2)}

/* ── El cuerpo: agenda, luego el resumen (el mes chico sobra: está la tira) ── */
.sem-cuerpo{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.sem-izq{display:contents}
.sem-mes{display:none}
/* Sin alto fijo ni scroll propio: la agenda crece con la página. En
   celular la agenda es #semAgenda (los días del mes, sólo el elegido); la
   retícula de la semana de PC no se ve. Sin día elegido, ninguna. */
.sem-panel{order:1;height:auto;min-height:0;overflow:visible;padding:0 8px 8px 0;border-radius:24px}
.sem .sem-panel:not(.sem-agenda),.sem .sem-agenda[hidden]{display:none}
.sem .sem-agenda{display:block}
.sem-resumen{order:2}
/* El resumen del celular es el del MES; el de la semana es de PC. */
.sem .sem-izq>.sem-resumen{display:none}
.sem .sem-resumen-mes{display:block}
.sem .sem-flecha.pc{display:none}
.sem .sem-flecha.movil{display:inline-flex}
.sem-cab-fila,.sem-vacia{display:none}
.sem-todo-fila,.sem-horas-fila{grid-template-columns:54px minmax(0,1fr)}
.sem-todo-fila{position:static;max-height:none;padding:8px 0 4px;background:none}
.sem-todo-fila:not(:has(.sem-todo-celda.elegido>*)){display:none}
/* "Todo el día" es una estrella de 16 px (el texto queda para el lector):
   así la fila mide una línea y los chips ganan ancho. */
.sem-todo-etq{display:flex;justify-content:flex-end;padding:0 10px 0 0}
.sem .sem-todo-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tarjeta-s);color:var(--tinta-s2)}
.sem-todo-txt{font-size:12px;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sem-todo-celda{display:none}
/* "Todo el día": una fila de chips con scroll lateral (la página no se mueve). */
.sem-todo-celda.elegido{grid-column:2!important;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;min-width:0;padding:2px 2px 4px 3px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.sem-todo-celda.elegido::-webkit-scrollbar{display:none}
.sem-todo-celda.elegido>.sem-chip-dia,.sem-todo-celda.elegido>.sem-chip-cerrado{flex:0 0 auto}
/* Con más chips de los que caben, el borde derecho se desvanece. */
.sem-todo-celda.elegido.desborda{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.sem-chip-dia{flex:0 0 auto;max-width:82%;height:44px;margin:0;padding:0 7px 0 14px}
.sem-chip-dia b{display:inline-flex;align-items:center;gap:3px;font-size:12px;min-width:24px;height:28px;padding:0 9px;white-space:nowrap}
/* El número dice qué cuenta: "9 pers.", "2 cabañas". */
.sem .sem-chip-dia .chip-u{display:inline;flex:none;overflow:visible;font-weight:500}
.sem-chip-cerrado{flex:0 0 auto;height:44px;line-height:32px;font-size:12px;padding:6px 14px}
/* Horas legibles en la calle (>= 4.5:1). */
.sem-hora{padding:10px 10px 0 0;font-size:13px;color:#6b7075}
/* La hora que taparía la píldora de "ahora" se esconde (la marca el guion). */
.sem-hora.tapada{visibility:hidden}
/* "Ahora": 2 px del lila del panel, con su hora en el canal de las horas. */
.sem .sem-ahora{height:2px;z-index:2;background:#7c5cf0}
.sem .sem-ahora::before{display:none}
.sem .sem-ahora-hora{display:block;position:absolute;right:calc(100% + 3px);top:-10px;height:21px;line-height:21px;padding:0 6px;border-radius:999px;background:#7c5cf0;color:#fff;
 font-size:12px;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sem-dia{display:none}
.sem-dia.elegido{display:grid;grid-column:2!important}
.sem-dia:not(:last-child){background:none}
.sem-num{display:none}
/* Las horas vacías casi no pesan: una raya punteada, sin losa blanca. Así
   lo único con volumen son las tarjetas. */
.sem-celda{margin:3px 0 3px 3px;border-radius:16px;background:none;box-shadow:none;border:1px dashed var(--guia)}
.sem-celda+.sem-celda::before{display:none}
.sem-bloqueo span{font-size:12px}

/* ── Tarjetas del día, a todo lo ancho (dos carriles como máximo) ──
   Dos encimados van lado a lado; tres o más a la vez, en la tarjeta de
   grupo (la de PC, con el color del tipo que más hay): cada cajita con su
   título a dos renglones y su horario completo. El grupo mide su contenido
   hasta donde empieza lo siguiente del día (--libre); si todo cabe no hay
   botón, y si no, las cajitas que caben enteras + "Todos (n)". */
.sem .ev-grupo:not(.ev-grupo-movil){display:none}
.sem .ev-movil{display:flex}
.sem .ev-grupo-movil{padding:14px 8px 8px;min-height:calc(var(--alto) * var(--h) + 2px);max-height:calc(var(--libre) * var(--h) - 6px)}
.sem .ev-grupo-movil.abierto{max-height:none}
.ev-grupo-movil .ev-cajas{gap:4px;flex:0 0 auto;overflow:visible}
.ev-grupo-movil .ev-caja{height:auto;min-height:44px;align-items:flex-start;gap:9px;padding:7px 12px 7px 13px;border-radius:16px;white-space:normal;font-size:14px}
.ev-grupo-movil .ev-caja::before{width:6px;height:6px;margin-top:6px}
.ev-grupo-movil .ev-caja.sobra{display:none}
.ev-grupo-movil.abierto .ev-caja.sobra{display:flex}
.sem .ev-grupo-movil .ev-caja-texto{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;overflow:visible;white-space:normal}
.sem .ev-grupo-movil .ev-caja-titulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:17px}
.sem .ev-grupo-movil .ev-caja-hora{display:block;font-size:12px;line-height:15px;font-weight:500;color:var(--tinta-s2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-grupo-movil .ev-todos{height:44px;font-size:14px;margin-top:6px}
.ev-grupo-movil.cabe .ev-todos{display:none}
.ev{left:calc(3px + var(--carril) * (100% - 3px) / var(--carriles));width:calc((100% - 3px) / var(--carriles) - (var(--carriles) - 1) * 4px / var(--carriles))}
.ev-tarjeta{padding:20px 8px 8px;gap:6px}
.ev-tarjeta.ev-alta{padding-top:30px}
.ev-cuerpo{padding:5px}
.ev-tarjeta .ev-titulo,.ev-tarjeta:not(.ev-alta) .ev-titulo{display:-webkit-box;-webkit-line-clamp:2;white-space:normal;font-size:14px;line-height:18px}
.ev-tarjeta .ev-hora{font-size:13px;padding:5px 4px}
.sem .ev-tarjeta .h-larga{display:inline}
.ev-tarjeta .h-corta{display:none}
.ev-avatares i{width:26px;height:26px;font-size:12px;margin-right:-6px}
.ev-avatares i.mas{font-size:12px}
.ev-avatares i.neutro svg{width:13px;height:13px}
.ev-pildora{height:44px;max-width:none;width:calc((100% - 3px) / var(--carriles) - (var(--carriles) - 1) * 4px / var(--carriles));padding:0 14px 0 12px;border-radius:22px;font-size:14px;gap:8px}
/* La píldora dice qué es y a qué hora: título en un renglón, hora abajo
   ("Llamada · •••• 3344" / "10:15 am"). */
.sem .ev-pil-texto{display:flex;flex-direction:column;flex:1;min-width:0}
.ev-pildora .ev-titulo{font-size:14px;line-height:17px}
.sem .ev-pildora .t-pc,.sem .ev-tarjeta .t-pc{display:none}
.sem .ev-pildora .t-movil,.sem .ev-pil-hora{display:block}
.sem .ev-tarjeta .t-movil{display:inline}
.sem .ev-pildora .h-larga{display:inline}
.sem .ev-pildora .h-corta,.sem .ev-pildora.ev-angosta .h-larga{display:none}
.sem .ev-pildora.ev-angosta .h-corta{display:inline}
.sem .ev-pil-hora{font-size:12px;line-height:15px;font-weight:500;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ev-pildora .ev-ico svg{width:15px;height:15px}

/* ── Crear: el chip del rótulo abre una hoja ── */
.sem-crear{position:fixed;left:0;right:0;bottom:0;z-index:46;margin:0;border-radius:26px 26px 0 0;padding:10px 20px calc(24px + var(--seguro-b));
 transform:translateY(105%);visibility:hidden;transition:transform .32s var(--resorte),visibility 0s linear .32s;box-shadow:0 -18px 50px -18px #00000059}
.sem-crear.abierta{transform:none;visibility:visible;transition:transform .32s var(--resorte)}
.sem-crear::before{content:'';display:block;width:40px;height:5px;margin:0 auto 16px;border-radius:3px;background:#0000002e}
.sem-crear h3{margin-bottom:16px}
.sem-crear-chips{gap:10px}
.sem-chip{height:48px;padding:0 18px;font-size:15px}
.sem-chip small{font-size:12px}
.sem .sem-crear-velo,.sem .sem-ficha-velo{display:block;position:fixed;inset:0;z-index:45;background:#00000059;opacity:0;pointer-events:none;transition:opacity .25s ease}
.sem .sem-ficha-velo{z-index:47}
.sem-crear-velo.on,.sem-ficha-velo.on{opacity:1;pointer-events:auto}
.sem-menu-servicios button{min-height:44px;font-size:15px}

/* ── Resumen: tarjetas compactas con scroll lateral que sangra al borde ── */
.sem-resumen{background:none;padding:6px 0 0;border-radius:0}
.sem-resumen h3{margin:0 0 10px 4px}
.sem-resumen-lista{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 4px;scroll-padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain}
.sem-resumen-lista::-webkit-scrollbar{display:none}
.sem-resumen-item{flex:0 0 auto;min-width:128px;display:flex;flex-direction:column;justify-content:space-between;min-height:88px;padding:12px 14px;border-radius:20px;background:var(--celda-s);scroll-snap-align:start;
 box-shadow:inset 0 1px 0 #fff,0 8px 20px -14px #0003,0 0 0 1px #00000008}
/* Con más tarjetas a la derecha, el borde se desvanece (como los chips). */
.sem-resumen-lista.desborda{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.sem-resumen-fila{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;height:auto;margin:0}
.sem-resumen-fila span:nth-child(2){font-size:13px;line-height:1.25;white-space:nowrap}
.sem-resumen-fila em{grid-column:1/-1;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--tinta-s)}
.sem-progreso{margin:8px 0 0}

/* ── La ficha: hoja inferior de ancho completo, con asa ── */
.sem-ficha{left:0!important;right:0;top:auto!important;bottom:0;z-index:48;width:auto;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
 padding:8px 20px calc(20px + var(--seguro-b));border-radius:26px 26px 0 0;transition:transform .28s var(--resorte)}
.sem-ficha:not([hidden]){animation:sem-sube .32s var(--resorte)}
.sem-ficha.arrastrando{transition:none;animation:none}
@keyframes sem-sube{from{transform:translateY(100%)}}
.sem .sem-ficha-asa{display:block;width:40px;height:5px;margin:0 auto 14px;border-radius:3px;background:#ffffff4d}
.sem-ficha-acciones button{width:44px;height:44px}
.sem-ficha-dato{font-size:14px}
.sem-ficha .et-pago{font-size:12px}
.sem-ficha-boton{height:52px}
.sem-ficha-liga{display:block;padding:12px 0;font-size:14px}

/* ── Tema oscuro (gemelas del celular) ── */
/* La tarjeta del mes, oscura (la de .sem-tarjeta). La píldora de la semana
   es NEGRA también aquí, como la pidió el dueño (aro gris en hoy, círculo
   gris relleno en el elegido): blanca era lo más brillante de la pantalla.
   Un filo claro de 1 px la separa de la tarjeta. */
html:not([data-panel-tema="claro"]) .sem-mesm-ini span{color:#6f747a}
html:not([data-panel-tema="claro"]) .sem-mesm-ini span.hoy::after{background:#b9a3ff}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on{background:#050505;box-shadow:inset 0 0 0 1px #ffffff14}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .sem-mesm-dia{color:#fff}
html:not([data-panel-tema="claro"]) .sem-mesm-dia.es-hoy b{box-shadow:inset 0 0 0 1.5px #9ca1a6}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .sem-mesm-dia.es-hoy b{box-shadow:inset 0 0 0 1.5px #8d9092;color:#fff}
html:not([data-panel-tema="claro"]) .sem-mesm-dia[aria-pressed="true"] b{background:#5f6061;box-shadow:inset 0 0 0 1px #ffffff1f;color:#fff}
html:not([data-panel-tema="claro"]) .sem-mesm-dia.fuera b{color:#4c5055}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .sem-mesm-dia.fuera b{color:#ffffffa6}
html:not([data-panel-tema="claro"]) .sem-mesm-dia:focus-visible{outline-color:#f1f2f4}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .sem-mesm-dia:focus-visible{outline-color:#fff}
html:not([data-panel-tema="claro"]) .sem-tira-puntos .t-cita{background:#d8ff47}
html:not([data-panel-tema="claro"]) .sem-tira-puntos .t-reunion{background:#a48cff}
html:not([data-panel-tema="claro"]) .sem-tira-puntos .t-llamada{background:#ff6f9c}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .t-cita{background:#d8ff47}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .t-reunion{background:#a48cff}
html:not([data-panel-tema="claro"]) .sem-mesm-fila.on .t-llamada{background:#ff6f9c}
html:not([data-panel-tema="claro"]) .sem .sem-crear-btn{background:#f1f2f4;color:#111317;box-shadow:0 10px 22px -12px #000,inset 0 1px 0 #fff}
html:not([data-panel-tema="claro"]) .sem .sem-fijo.pegada .sem-crear-btn{box-shadow:inset 0 1px 0 #fff}
html:not([data-panel-tema="claro"]) .sem-fijo.pegada{box-shadow:0 1px 0 #ffffff0f}
html:not([data-panel-tema="claro"]) .sem-resumen-item{box-shadow:inset 0 1px 0 #ffffff0d,0 8px 20px -14px #000,0 0 0 1px #ffffff0f}
html:not([data-panel-tema="claro"]) .sem-hora{color:#9aa0a4}
html:not([data-panel-tema="claro"]) .sem-resumen-fila em{color:var(--tinta-s)}
html:not([data-panel-tema="claro"]) .sem .sem-ahora,html:not([data-panel-tema="claro"]) .sem .sem-ahora-hora{background:#b9a3ff}
html:not([data-panel-tema="claro"]) .sem .sem-ahora-hora{color:#17121f}
html:not([data-panel-tema="claro"]) .sem-crear::before{background:#ffffff38}
html:not([data-panel-tema="claro"]) .sem-crear{box-shadow:0 -18px 50px -18px #000,0 0 0 1px #ffffff14}
html:not([data-panel-tema="claro"]) .sem-crear-velo,html:not([data-panel-tema="claro"]) .sem-ficha-velo{background:#000000a6}

/* El formulario de reuniones: sus notas "(opcional)" también a 12 px, y
   Día a lo ancho con Inicio y Fin abajo (anidado, Fin se salía de la hoja). */
.sem-hoja .campo small{font-size:12px}
.sem-hoja .cuerpo-hoja>.dos-campos{grid-template-columns:minmax(0,1fr);gap:0}
.sem-hoja .dos-campos .dos-campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.sem-hoja .campo{min-width:0}
/* La raya fina entre renglones: Fin ya no va debajo de Inicio (va a su
   lado), así que la raya va sobre el renglón Inicio · Fin completo. */
.sem-hoja .dos-campos .dos-campos>.campo+.campo::before{display:none}
.sem-hoja .cuerpo-hoja>.dos-campos>.dos-campos{position:relative}
.sem-hoja .cuerpo-hoja>.dos-campos>.dos-campos::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--separador)}
.hoja .campo input,.hoja .campo select{min-height:44px;min-width:0;max-width:100%}

/* Hojas cerradas: fuera de la vista Y del teclado y del lector (antes sólo
   se trasladaban y Tab llegaba a campos invisibles). */
.hoja{visibility:hidden;transition:transform .32s var(--resorte),visibility 0s linear .32s}
.hoja.on{visibility:visible;transition:transform .32s var(--resorte)}
.mini-cal{visibility:hidden;transition:transform .28s var(--resorte),opacity .22s var(--resorte),visibility 0s linear .28s}
.mini-cal.on{visibility:visible;transition:transform .28s var(--resorte),opacity .22s var(--resorte)}

/* Flechas del mes y del mini-mes, del tamaño de un dedo. */
.cal-nav,.mini-cal .cal-nav.chica{width:44px;height:44px}
/* Tema y negocio de la barra: el dibujo se queda, el área de toque es de 44. */
body.con-semana #panel-tema,body.con-semana .panel-herramientas>a{position:relative}
body.con-semana #panel-tema::after{content:'';position:absolute;inset:-5px;border-radius:50%}
body.con-semana .panel-herramientas>a::after{content:'';position:absolute;inset:-6px -1px;border-radius:999px}

/* Teléfonos angostos (320–374 px): el mes llega casi al borde para que cada
   día mida 44 px, y la fila de controles se aprieta sin cortar el rango. */
@media(max-width:374px){
 .sem .sem-mesm{margin-inline:-14px;padding-inline:0;border-radius:26px}
 .sem-mesm-dia b{width:32px;height:32px;font-size:14px}
 /* La etiqueta de sección de arriba se corta antes que tapar el botón. */
 body.con-semana .panel-contexto>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sem-cabeza{column-gap:2px}
 .sem-titulo{font-size:28px}
 .sem-hoy{padding:0 10px}
 .sem-rango{margin:0;font-size:14px}
 /* "Sep 2026": el nombre completo no cabe junto a Hoy y ‹ ›. */
 .sem-rango .mes-largo{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .sem .sem-rango .mes-corto{display:inline}
 /* El rótulo cabe entero: "Crear" se vuelve un botón redondo de 44 (su
    nombre sigue ahí para el lector). */
 .sem-rotulo{font-size:14px}
 .sem .sem-crear-btn{width:44px;padding:0;justify-content:center}
 .sem-crear-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* "Reducir movimiento": nada se desliza. */
@media(prefers-reduced-transparency:reduce){
 .sem-fijo.pegada{background:#f0f1f3;backdrop-filter:none;-webkit-backdrop-filter:none}
 html:not([data-panel-tema="claro"]) .sem-fijo.pegada{background:#121418}
}
@media(prefers-reduced-motion:reduce){
 .sem-crear,.sem-crear.abierta,.sem-ficha,.sem-crear-velo,.sem-ficha-velo,.sem-fijo{transition:none}
 .sem-ficha:not([hidden]){animation:none}
}
}


.pz{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}
@media(min-width:900px){.pz{gap:20px}}

/* ── La tarjeta del estado ── */
.pz-estado{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 grid-template-areas:"ico txt acc";align-items:center;gap:26px;padding:30px 30px 30px 34px;border-radius:30px;color:#f4f5f7;
 border:1px solid #ffffff1f;box-shadow:inset 0 1px 0 #ffffff14,0 22px 50px -24px #000d}
.pz-estado::after{content:"";position:absolute;inset:-40% -10% auto 38%;height:180%;z-index:-1;pointer-events:none;
 background:linear-gradient(115deg,transparent 30%,#ffffff2e 46%,transparent 58%);transform:rotate(8deg);opacity:.8}
.pz-estado.t-plata{background:radial-gradient(120% 160% at 100% 0%,#d9dbdfcc 0%,#9a9da3a6 20%,transparent 50%),
 linear-gradient(105deg,#151619 0%,#1b1d21 45%,#34363b 70%,#8f9298 100%)}
.pz-estado.t-rojo{border:1.5px solid #ff6b6bad;box-shadow:inset 0 0 50px #ff3b3b22,0 22px 50px -24px #000d;
 background:radial-gradient(110% 150% at 100% 0%,#ff5d5d4d 0%,transparent 45%),linear-gradient(105deg,#180a0c 0%,#260d11 45%,#4a1218 75%,#7a1d24 100%)}
.pz-estado.t-ambar{border:1.5px solid #f3a6488f;box-shadow:inset 0 0 50px #f3a64818,0 22px 50px -24px #000d;
 background:radial-gradient(110% 150% at 100% 0%,#f6b14d4a 0%,transparent 45%),linear-gradient(105deg,#17120a 0%,#231a0d 45%,#463012 75%,#7a5316 100%)}
.pz-estado.t-azul{border:1.5px solid #7da4ff8f;box-shadow:inset 0 0 50px #4b7bff1c,0 22px 50px -24px #000d;
 background:radial-gradient(110% 150% at 100% 0%,#6d97ff4a 0%,transparent 45%),linear-gradient(105deg,#0b0f19 0%,#0f1628 45%,#16275a 75%,#22408f 100%)}
.pz-ico{grid-area:ico;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
 border:2px solid #ffffff5c;background:radial-gradient(circle at 35% 28%,#4b4e55,#1c1e22 72%);color:#e9eaec;
 box-shadow:inset 0 1px 0 #ffffff26,0 10px 26px -8px #000c}
.t-rojo .pz-ico{border-color:#ff6b6bb8;background:radial-gradient(circle at 35% 28%,#5a1a20,#250c10 72%);color:#ff6b6b}
.t-ambar .pz-ico{border-color:#f3a648b8;background:radial-gradient(circle at 35% 28%,#5a3f17,#241a0b 72%);color:#f6b14d}
.t-azul .pz-ico{border-color:#7da4ffb8;background:radial-gradient(circle at 35% 28%,#1f3366,#0d1428 72%);color:#9dbbff}
.pz-texto{grid-area:txt;min-width:0}
.pz-ceja{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#ffffffc4}
.pz-titulo{margin:0;font-size:clamp(36px,9.6vw,60px);font-weight:700;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
.pz-monto{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pz-sub{margin:10px 0 0;font-size:17px;line-height:1.4;color:#ffffffcc}
.pz-accion{grid-area:acc}
.pz-entrar{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;border:1px solid #ffffff1f;cursor:pointer;color:#fff;
 background:radial-gradient(circle at 35% 25%,#2c2e33,#0c0d0f 75%);box-shadow:0 16px 34px -12px #000e;transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .2s}
.pz-entrar:active{transform:scale(.95)}
.pz-pildora{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 24px;border-radius:999px;white-space:nowrap;
 border:1px solid #ffffff2e;background:#0000004d;color:#fff;font:inherit;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .2s}
.t-rojo .pz-pildora{border-color:#ff8a8a59;background:#2a0c1080}
.t-ambar button.pz-pildora{background:#f5a524;border-color:#f5a524;color:#14100a;font-weight:700}
.pz-pildora:active{transform:scale(.97)}
.pz-entrar:disabled,.pz-pildora:disabled,.pz-confirmar:disabled{opacity:.5}
@media(max-width:600px){
 .pz-estado{grid-template-columns:auto 1fr;grid-template-areas:"ico acc" "txt txt";gap:14px 12px;padding:18px 18px 20px;border-radius:26px}
 .pz-ico{width:54px;height:54px}.pz-ico svg{width:26px;height:26px}
 .pz-accion{justify-self:end}
 .pz-entrar{width:66px;height:66px}
 .pz-pildora{height:50px;padding:0 18px;font-size:16px}
 .pz-titulo{font-size:clamp(32px,10vw,44px)}
 .pz-sub{font-size:15px;margin-top:8px}
 .pz-ceja{font-size:12px;letter-spacing:.22em;margin-bottom:4px}
}

/* ── Lo que hay que hacer (sólo cuando NO entra) ── */
.pz-info{display:flex;align-items:center;gap:14px;margin:0;padding:16px 20px;border-radius:20px;font-size:16px;line-height:1.45;
 border:1px solid var(--separador);background:color-mix(in srgb,var(--superficie) 70%,transparent);color:var(--tinta)}
.pz-info svg{flex:none;color:var(--tinta2)}

/* ── La reserva ── */
.pz-reserva{border-radius:28px;border:1px solid var(--separador);background:color-mix(in srgb,var(--superficie) 88%,transparent);padding:22px 24px;
 display:flex;flex-direction:column;gap:18px;box-shadow:var(--sombra)}
.pz-cabeza{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--separador)}
.pz-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid var(--separador);background:var(--superficie2);color:var(--tinta)}
.pz-avatar.chico{width:44px;height:44px}
.pz-quien{min-width:0}
.pz-quien b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pz-quien span{display:block;font-size:15px;color:var(--tinta2);margin-top:2px}
.pz-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;
 border:1px solid var(--separador);background:var(--superficie2);color:var(--tinta)}
.pz-chip i{width:9px;height:9px;border-radius:50%;background:#3cc58a;box-shadow:0 0 0 3px #3cc58a26}
.pz-chip.c-ambar i{background:#f5a524;box-shadow:0 0 0 3px #f5a52426}
.pz-chip.c-rojo i{background:#ff5d5d;box-shadow:0 0 0 3px #ff5d5d26}
.pz-chip.c-azul i{background:#6d97ff;box-shadow:0 0 0 3px #6d97ff26}
.pz-cuerpo{display:grid;grid-template-columns:auto 1px minmax(0,1fr);gap:22px;align-items:center}
.pz-cuerpo::before{content:"";grid-column:2;grid-row:1;align-self:stretch;background:var(--separador)}
.pz-gente{grid-column:1;grid-row:1;display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:20px;background:var(--superficie2)}
.pz-gente>b{font-size:52px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pz-gente strong{display:block;font-size:18px;font-weight:600}
.pz-gente small{display:block;font-size:14px;color:var(--tinta2)}
.pz-servicio{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.pz-servicio b{font-size:18px;font-weight:600;line-height:1.3}
.pz-servicio span{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--tinta2)}
.pz-notas{border-top:1px solid var(--separador);padding-top:14px}
.pz-notas p{margin:0 0 6px;font-size:15px;line-height:1.4;color:var(--tinta2)}
@media(max-width:600px){
 .pz-reserva{padding:16px;border-radius:24px;gap:14px}
 .pz-cabeza{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding-bottom:14px}
 .pz-cabeza .pz-chip{grid-column:2;justify-self:start;height:30px;font-size:13px;padding:0 12px}
 .pz-avatar{width:44px;height:44px}.pz-avatar svg{width:22px;height:22px}
 .pz-quien b{font-size:20px}
 .pz-quien span{font-size:14px}
 .pz-cuerpo{grid-template-columns:auto minmax(0,1fr);gap:14px}
 .pz-cuerpo::before{display:none}
 .pz-gente{grid-column:1;padding:12px 14px;gap:2px;align-self:stretch;flex-direction:column;align-items:flex-start;justify-content:center}
 .pz-servicio{grid-column:2;gap:4px}
 .pz-gente>b{font-size:36px}
 .pz-gente strong{font-size:16px}
 .pz-gente small{font-size:12px}
 .pz-servicio b{font-size:16px}
 .pz-servicio span{font-size:14px;gap:8px}
}
@media(max-width:350px){.pz-cuerpo{grid-template-columns:1fr}.pz-gente,.pz-servicio{grid-column:1}}

/* ── Escanear: abajo, donde descansa el pulgar ── */
.pz-pie{display:flex;flex-direction:column;align-items:center;gap:6px}
.pz-escanear{display:flex;align-items:center;justify-content:center;gap:12px;width:min(760px,100%);height:64px;border-radius:999px;cursor:pointer;
 border:1px solid #ffffff1c;background:linear-gradient(180deg,#2b2d32,#1a1c20);color:#f4f5f7;font:inherit;font-size:18px;font-weight:600;
 box-shadow:inset 0 1px 0 #ffffff17,0 14px 30px -14px #000c}
.pz-buscar{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:16px;color:var(--tinta2);text-decoration:none}
/* En el celular el escaneo va al final del contenido, sin taparlo (Angel: nada
   encimado): las dos tarjetas son compactas para que quepa arriba del menú. */
@media(max-width:600px){.pz-escanear{height:60px;font-size:17px}.pz-pie{margin-top:4px}}
.pz-espera{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 22px;border-radius:30px;
 border:1.5px dashed var(--separador)}
.pz-espera-ico{color:var(--tinta3)}
.pz-espera b{font-size:24px;font-weight:700}
.pz-espera span{color:var(--tinta2);font-size:16px}

/* ── Buscar a mano ── */
.pz-busca{display:flex;align-items:center;gap:12px;height:58px;padding:0 20px;border-radius:999px;border:1px solid var(--separador);
 background:var(--superficie);color:var(--tinta2)}
.pz-busca input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--tinta);outline:none}
.pz-lista{display:flex;flex-direction:column;gap:10px}
.pz-renglon{display:flex;align-items:center;gap:10px;width:100%;min-height:72px;padding:12px 12px 12px 16px;border-radius:22px;
 border:1px solid var(--separador);background:var(--superficie);color:var(--tinta)}
.pz-renglon-ir{display:flex;align-items:center;gap:14px;flex:1;min-width:0;align-self:stretch;color:inherit;text-decoration:none;border-radius:16px}
.pz-renglon-pase{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;cursor:pointer;
 border:1px solid var(--separador);background:var(--superficie2);color:var(--tinta);font:inherit;font-size:14px;font-weight:600}
@media(max-width:600px){
 .pz-renglon-ir{flex-wrap:wrap;gap:4px 12px}
 .pz-renglon-ir .pz-renglon-txt{flex:1 1 calc(100% - 56px)}
 .pz-renglon-ir .pz-chip{margin-left:56px}
}
@media(max-width:360px){
 .pz-renglon{padding:10px 10px 10px 14px}
 .pz-renglon-ir .pz-avatar{display:none}
 .pz-renglon-ir .pz-renglon-txt{flex-basis:100%}
 .pz-renglon-ir .pz-chip{margin-left:0}
 .pz-renglon-pase{height:40px;padding:0 12px}
}
.pz-renglon-txt{flex:1;min-width:0}
.pz-renglon-txt b{display:block;font-size:17px}
.pz-renglon-txt small{display:block;font-size:14px;color:var(--tinta2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-renglon .pz-chip{height:30px;font-size:12px;padding:0 10px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pz-chip i{flex:none}
.pz-nota{margin:0;text-align:center;font-size:15px;color:var(--tinta2)}

/* ── Hojas de vidrio oscuro: el pase emitido y cobrar ── */
.pz-pase,.pz-hoja{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:16px;color:#f4f5f7;
 padding:14px 24px calc(24px + env(safe-area-inset-bottom));border-radius:32px 32px 0 0;border:1px solid #ffffff1f;
 background:radial-gradient(70% 55% at 105% 95%,#d8ff4724,transparent 60%),linear-gradient(160deg,#1d1f23 0%,#121316 60%,#0d0e10 100%);
 box-shadow:inset 0 1px 0 #ffffff17,0 -24px 60px #0009}
.pz-pase::before,.pz-hoja::before{content:"";position:absolute;right:-30%;bottom:6%;width:90%;height:70%;z-index:-1;pointer-events:none;border-radius:50%;
 border-top:2px solid #d8ff4775;transform:rotate(-24deg);filter:blur(.6px);box-shadow:0 -10px 30px -6px #d8ff4733}
@media(min-width:700px){.pz-pase,.pz-hoja{border-radius:32px;padding-bottom:28px}}
.pz-asa{align-self:center;width:46px;height:5px;border-radius:9px;background:#ffffff40}
.pz-cerrar{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;cursor:pointer;
 border:1px solid #ffffff1f;background:#ffffff12;color:#f4f5f7}
.pz-hoja-titulo{margin:0;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;padding-right:56px}
.pz-hoja-sub{margin:-8px 0 0;font-size:18px;color:#f4f5f7}
.pz-hoja-sub span{color:#a1a5ad}
.pz-fichas{display:flex;flex-wrap:wrap;gap:10px}
.pz-fichas span{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid #ffffff24;background:#ffffff0a;font-size:15px}
.pz-qr{position:relative;align-self:center;width:min(260px,66vw);padding:16px}
.pz-qr.grande{width:min(320px,80vw)}
.pz-qr-blanco{background:#fff;border-radius:24px;padding:14px;box-shadow:0 18px 40px -16px #000c}
.pz-qr-blanco svg{display:block;width:100%;height:auto}
.pz-qr .esq{position:absolute;width:38px;height:38px;border:3px solid transparent}
.pz-qr .esq.a{top:0;left:0;border-top-color:#e9f7c3;border-left-color:#e9f7c3;border-radius:16px 0 0 0}
.pz-qr .esq.b{top:0;right:0;border-top-color:#e9f7c3;border-right-color:#e9f7c3;border-radius:0 16px 0 0}
.pz-qr .esq.c{bottom:0;left:0;border-bottom-color:#d8ff47b3;border-left-color:#d8ff47b3;border-radius:0 0 0 16px}
.pz-qr .esq.d{bottom:0;right:0;border-bottom-color:#d8ff47b3;border-right-color:#d8ff47b3;border-radius:0 0 16px 0}
.pz-canal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;
 border:1px solid #ffffff1c;background:#ffffff0a}
.pz-canal-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#25d366;background:#25d3661a}
.pz-canal-txt b{display:block;font-size:17px;font-weight:600;line-height:1.3}
.pz-canal-txt small{display:block;font-size:14px;color:#a1a5ad;margin-top:2px}
.pz-canal-i{color:#a1a5ad}
.pz-salidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px}
.pz-salidas a,.pz-salidas button{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 12px;white-space:nowrap;border-radius:20px;cursor:pointer;
 border:1px solid #ffffff1f;background:#ffffff0d;color:#f4f5f7;font:inherit;font-size:16px;font-weight:600;text-decoration:none}
.pz-salidas a svg{color:#25d366}
/* Cobrar */
.pz-hoja .pz-ceja{margin:6px 0 -6px}
.pz-etq{margin:4px 0 0;font-weight:600}
.pz-forma{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pz-forma button{height:58px;border-radius:18px;border:1.5px solid #ffffff24;background:#ffffff0a;color:#f4f5f7;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.pz-forma button.sel{border-color:#f5a524;box-shadow:inset 0 0 0 1px #f5a524}
.pz-aviso{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 16px;border-radius:18px;background:#f5a5241a;border:1px solid #f5a52440;font-size:15px;line-height:1.45}
.pz-aviso svg{flex:none;color:#f5a524;margin-top:1px}
.pz-confirmar{height:62px;border:0;border-radius:999px;background:#f5a524;color:#14100a;font:inherit;font-size:19px;font-weight:700;cursor:pointer}
.pz-hoja-pie{margin:0;text-align:center;font-size:14px;color:#a1a5ad}
.pz-velo{position:fixed;inset:0;background:#000a;z-index:40;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.pz-velo[hidden],.pz-hoja[hidden]{display:none}
/* La hoja del pase, abierta sobre el calendario (src/panel/pase-cliente.ts). */
.pz-hoja-pase{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:680px;margin:0 auto;max-height:94svh;overflow:auto;overscroll-behavior:contain}
@media(min-width:700px){.pz-hoja-pase{bottom:24px}}
.pz-hoja{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:640px;margin:0 auto}
@media(min-width:700px){.pz-hoja{bottom:24px}}

/* El pase (lo que abre la liga sin sesión) */
.pase-publico{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pase-brillo{margin:0;font-size:17px;color:var(--tinta)}
.pase-cuidado{margin:0;font-size:15px;line-height:1.45;color:var(--tinta2);max-width:340px}
.pase-staff{margin-top:10px;color:var(--tinta2);font-size:15px}

/* Las dos opciones del botón del pase en el calendario (maqueta para que Angel escoja) */
.op-marca{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:99;background:#D8FF47;color:#111;font:800 13px/1 -apple-system,sans-serif;
 padding:8px 12px;border-radius:999px;box-shadow:0 6px 18px #0007;pointer-events:none}
.op-resalta{outline:3px solid #D8FF47;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pz-entrar,.pz-pildora{transition:none}}