/* Zolteva · diseño «corporativo» del panel del cliente (Pedro, 13 oct 2026, tras la cata: «me gusta la B»).
   Solo se enlaza con ZOLTEVA_DISENO_CORPORATIVO=1 (registro/corporativo.py), detrás de styles.css, de los estilos de cada
   página y de clasica.css, y solo en las páginas del panel con sesión: todo cuelga de body.zb, así que fuera de ellas no
   toca nada aunque alguien enlazara la hoja. Es una capa: clasica.css pone la base y esto la lleva a la B.
     fondo #f1ede4 · tarjetas blancas de borde fino con filo superior de tinta · barra lateral e inferior oscuras ·
     IBM Plex Sans, cifras en IBM Plex Mono · radios de 4-6 px · 14 px de base · sin sombras.
   Tipografías y fichas (--f-*): assets/fichas.css, que registro/corporativo.py enlaza justo delante (la misma hoja del alta
   y de la web). Las variables de aquí toman su valor de esas fichas. */
:root body.zb{
  --crema:var(--f-papel);        /* fondo */
  --crema-osc:var(--f-papel-2);    /* líneas interiores, pistas */
  --z-papel:var(--f-tarjeta);      /* tarjetas */
  --z-linea:var(--f-linea);      /* borde fino */
  --z-tinte:var(--f-tinte);      /* elegido, resaltado */
  --z-radio:var(--f-radio);
  --z-radio-s:var(--f-radio-s);
  --z-sombra:none;
  --zb-hueco:var(--f-hueco);     /* fondo de casillas dentro de una tarjeta */
  --zb-lat:var(--f-tinta);       /* barra lateral e inferior */
  --zb-lat-tinta:var(--f-sobre-tinta); /* 13,6:1 sobre la barra */
  --zb-lat-mut:var(--f-sobre-tinta-mut);   /* 7,3:1 sobre la barra */
  --zb-lat-linea:var(--f-tinta-linea);
  --zb-lat-on:var(--f-tinta-3);
  --zb-lat-carta:var(--f-tinta-2);
  --zb-ok-bg:var(--f-bien-fondo);
  --zb-mal-bg:var(--f-mal-fondo);
  --zb-sans:var(--f-sans);
  --zb-mono:var(--f-mono);
  font-family:var(--zb-sans);font-size:14px;line-height:1.45;font-variant-numeric:lining-nums;overflow-wrap:anywhere}
:root .zb button,:root .zb input,:root .zb select,:root .zb textarea{font-family:inherit}
:root .zb input,:root .zb select,:root .zb textarea{font-size:16px}      /* 16 px: iOS no amplía la página al tocar un campo */

/* ---------- armazón: cabecera del móvil, barra lateral, barra inferior, «Más» ---------- */
:root .zb header.top{background:var(--z-papel);border-bottom:1px solid var(--z-linea);padding:6px 0}
:root .zb .marca{font-weight:700;letter-spacing:.04em;font-size:16px}
:root .zb .marca::before,:root .zb .pl-marca::before{border-radius:4px;width:28px;height:28px}
:root .zb .marca small{font-size:12px;font-weight:500}
:root .zb .lang-switch{border-radius:4px;border-width:1px}
:root .zb .lang-switch a{font-weight:500;padding:6px 12px}
:root .zb .lang-switch a[aria-current="true"]{font-weight:700}
:root .zb .pl-salto{border-radius:4px}
:root .zb .pl-inf{background:var(--zb-lat);border-top:1px solid var(--zb-lat-linea)}
:root .zb .pl-inf a,:root .zb .pl-inf summary{color:var(--zb-lat-mut);font-weight:500}
:root .zb .pl-inf a[aria-current="page"],:root .zb .pl-inf summary.activo{color:#fff;font-weight:700;box-shadow:inset 0 3px 0 var(--naranja)}
:root .zb .pl-inf a:focus-visible,:root .zb .pl-inf summary:focus-visible,
:root .zb .pl-inf a[aria-current="page"]:focus-visible,:root .zb .pl-inf summary.activo:focus-visible{outline:3px solid #fff;outline-offset:-4px}
:root .zb .pl-n{background:var(--naranja);color:var(--negro);border-radius:3px;font-family:var(--zb-mono);font-weight:600}
:root .zb .pl-mas{background:var(--z-papel);border:1px solid var(--z-linea);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
:root .zb .pl-mas a,:root .zb .pl-mas button{color:var(--negro);font-weight:600;font-size:14px;border-radius:4px}
:root .zb .pl-mas a[aria-current="page"]{background:var(--z-tinte);box-shadow:inset 3px 0 0 var(--naranja)}
:root .zb .pl-mas a:focus-visible,:root .zb .pl-mas button:focus-visible{outline:3px solid var(--z-foco);outline-offset:-3px}
:root .zb .zb-tarjeta{display:none}
@media(min-width:900px){
  :root body.zb{padding-left:248px}
  :root .zb .pl-lat{width:248px;background:var(--zb-lat);color:var(--zb-lat-tinta);border-right:1px solid var(--zb-lat-linea);padding:16px 12px 12px;gap:12px}
  :root .zb .pl-marca{color:var(--zb-lat-tinta);font-weight:700;letter-spacing:.06em;font-size:16px;padding:0 8px}
  :root .zb .pl-marca::before{box-shadow:0 0 0 1px #4a4338}
  :root .zb .pl-neg{border-bottom:1px solid var(--zb-lat-linea);padding:0 8px 12px}
  :root .zb .pl-neg b{font-size:15px;font-weight:600}
  :root .zb .pl-neg>span{display:inline-flex;align-items:center;gap:7px;margin-top:8px;background:#1f7a3c;color:#fff;font-weight:600;font-size:12.5px;padding:3px 10px;border-radius:999px}
  :root .zb .pl-neg>span::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
  :root .zb .pl-neg>span:not(:has(span)){background:none;color:var(--zb-lat-mut);padding:0;font-weight:500}
  :root .zb .pl-neg>span:not(:has(span))::before{display:none}
  :root .zb .pl-neg span span{display:none}       /* el número va en la tarjeta de abajo, con su botón de copiar */
  :root .zb .pl-nav a{color:var(--zb-lat-tinta);font-weight:500;font-size:14px;min-height:38px;border-radius:4px}
  @media(hover:hover) and (pointer:fine){:root .zb .pl-nav a:hover{background:var(--zb-lat-on)}}
  :root .zb .pl-nav a[aria-current="page"]{background:var(--zb-lat-on);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--naranja)}
  :root .zb .pl-nav svg{width:20px;height:20px}
  :root .zb .pl-lat a:focus-visible,:root .zb .pl-lat button:focus-visible{outline:3px solid #fff;outline-offset:1px}
  :root .zb .zb-tarjeta{display:grid;gap:6px;margin-top:auto;border:1px solid var(--zb-lat-linea);border-radius:4px;background:var(--zb-lat-carta);padding:12px;font-size:13px;min-width:0}
  :root .zb .zb-tarjeta hr{border:0;border-top:1px solid var(--zb-lat-linea);margin:4px 0;width:100%}
  :root .zb .zb-et{color:var(--zb-lat-mut);font-size:12px}
  :root .zb .zb-tel{font-family:var(--zb-mono);font-weight:600;font-size:15px;white-space:nowrap}
  :root .zb .zb-copiar{justify-self:start;min-height:36px;padding:4px 12px;border:1.5px solid var(--zb-lat-tinta);border-radius:4px;background:none;color:var(--zb-lat-tinta);font-weight:600;font-size:13px;cursor:pointer}
  @media(hover:hover) and (pointer:fine){:root .zb .zb-copiar:hover{background:var(--zb-lat-on)}}
  :root .zb .zb-copiado:empty{display:none}
  :root .zb .zb-copiado{font-size:12px;color:var(--zb-lat-tinta)}
  :root .zb .zb-tarjeta .zb-barra{background:var(--zb-lat-linea)}
  :root .zb .pl-fin{margin-top:0;border-top:0;padding:0;grid-template-columns:auto 1fr;align-items:center}
  :root .zb .pl-fin .lang-switch{border-color:var(--zb-lat-mut);background:none}
  :root .zb .pl-fin .lang-switch a{color:var(--zb-lat-tinta);min-height:44px;min-width:40px;padding:4px 10px}
  :root .zb .pl-fin .lang-switch a[aria-current="true"]{background:var(--zb-lat-tinta);color:var(--zb-lat)}
  :root .zb .pl-fin button{border:1px solid var(--zb-lat-mut);color:var(--zb-lat-tinta);border-radius:4px;min-height:36px;font-size:13px;font-weight:600}
  @media(hover:hover) and (pointer:fine){:root .zb .pl-fin button:hover{background:var(--zb-lat-on)}}
  :root .zb.pl main{padding:20px 0 48px}
  :root .zb.pl .w{max-width:1240px;padding:0 28px}
}
:root .zb .zb-n{font-family:var(--zb-mono);font-weight:500}
:root .zb .zb-barra{height:8px;border-radius:999px;background:var(--crema-osc);overflow:hidden}
:root .zb .zb-barra i{display:block;height:100%;background:var(--naranja);border-radius:999px}
:root .zb .zb-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border:1px solid var(--naranja);background:var(--z-tinte);border-radius:4px;padding:10px 14px;margin:0 0 12px;font-size:13.5px}
:root .zb .zb-aviso b{font-weight:700}
:root .zb .zb-aviso .btn{margin-left:auto;min-height:44px;padding:4px 12px;font-size:13.5px;width:auto}

/* ---------- tarjetas, títulos, texto ---------- */
:root .zb .p-sec{border:1px solid var(--z-linea);border-top:3px solid var(--negro);border-radius:6px;background:var(--z-papel);padding:14px 16px;margin:0 0 12px;box-shadow:none}
:root .zb .p-sec h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--z-mut);margin:0 0 12px;line-height:1.3}
:root .zb .p-sec h2 small{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}
:root .zb .p-sec h3{font-size:14px;font-weight:600;letter-spacing:0;margin:16px 0 8px}
:root .zb .p-cab h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:10px 0 6px}
:root .zb .p-estado{font-weight:500}
:root .zb .p-num{font-family:var(--zb-mono);font-size:17px;font-weight:600;letter-spacing:0}
:root .zb .live-badge{font-weight:600}
:root .zb .hint{font-size:13px}
:root .zb .p-vacio{font-size:14px;color:var(--z-mut);border:1px dashed var(--z-campo);border-radius:4px;background:var(--zb-hueco);padding:12px 14px}
:root .zb .p-enlace{font-weight:600;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}   /* M10: 44 px de toque */
/* M10 (auditoría 20261025): todo <summary> se toca con 44 px, sin quitarle su marcador. Aquí y no en el ESTILO de panel.py,
   para que el panel sin la piel corporativa siga byte a byte. Con «:root .zb» delante, como toda esta hoja (test_diseno_corporativo):
   el relleno vertical de .dt, .dt-ops y .pp-quien pasa de 13/10/12 px a 11 px. */
:root .zb details>summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding-top:11px;padding-bottom:11px}
:root .zb .p-pie{font-size:12.5px;margin:18px 0 8px}
:root .zb .aviso-elena{border-radius:4px;border-left-width:4px}
:root .zb .p-guardado{font-weight:600}

/* ---------- botones ---------- */
:root .zb .btn{border-radius:4px;font-weight:600;font-size:14px;min-height:44px;padding:8px 16px}
:root .zb .btn.ghost,:root .zb .btn.secondary{border-width:1.5px;font-weight:600}
:root .zb .btn-link{font-weight:600}
:root .zb .p-menu-btn{border-radius:4px}

/* ---------- campos, casillas, grupos ---------- */
:root .zb input[type=text],:root .zb input[type=tel],:root .zb input[type=email],:root .zb input[type=number],:root .zb input[type=time],:root .zb input[type=date],
:root .zb input[type=datetime-local],:root .zb input[type=password],:root .zb input[type=search],:root .zb select,:root .zb textarea{border:1.5px solid var(--z-campo);border-radius:4px;background-color:var(--zb-hueco)}
:root .zb label,:root .zb legend{font-weight:600}
:root .zb .field label{font-size:13px}
:root .zb fieldset,:root .zb .p-ajustes fieldset,:root .zb .ag-form fieldset,:root .zb .p-edit fieldset,:root .zb .pb fieldset{border:1px solid var(--z-linea);border-radius:4px;background:var(--zb-hueco);padding:12px 14px}
:root .zb .p-ajustes legend,:root .zb legend{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--z-mut)}
:root .zb .chip{border:1.5px solid var(--z-campo);border-radius:4px;background:var(--z-papel)}
:root .zb .chip:has(input:checked){border-color:var(--naranja);background:var(--z-tinte)}
:root .zb .chip-name{font-weight:600;font-size:14px}
:root .zb .seg{border-radius:4px}

/* ---------- cifras ---------- */
:root .zb .p-cifras{gap:8px}
:root .zb .p-cifras div,:root .zb .p-cifras a,:root .zb .p-cl-cifras div{border:1px solid var(--z-linea);border-left:3px solid var(--naranja);border-radius:4px;background:var(--zb-hueco);text-align:left;padding:12px}
:root .zb .p-cifras b,:root .zb .p-cifras a b,:root .zb .p-cl-cifras b{font-family:var(--zb-mono);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
:root .zb .p-cifras span,:root .zb .p-cl-cifras span{text-transform:uppercase;font-size:11.5px;font-weight:600;letter-spacing:.07em;color:var(--z-mut)}
:root .zb .p-min-cab{font-weight:600}
:root .zb .p-min-cab b{font-family:var(--zb-sans);font-variant-numeric:lining-nums tabular-nums;font-size:16px;font-weight:600}
:root .zb .p-min-nota{font-size:13px;color:var(--z-mut)}
:root .zb .p-min-80{font-weight:600}
:root .zb .progress-track{border-radius:999px;background:var(--crema-osc)}
:root .zb .p-extra{border-radius:4px;border-width:1px}
:root .zb .p-extra b{font-size:15px;font-weight:600}
:root .zb .p-extra span{font-weight:600;font-size:14px}

/* ---------- tablas, listas, píldoras de resultado ---------- */
:root .zb table.p-tabla{font-size:13.5px}
:root .zb .p-tabla th,:root .zb .ag-tabla th{font-size:11.5px;font-weight:600;letter-spacing:.06em}
:root .zb .p-tabla td{padding:8px 6px 8px 0;border-top:1px solid var(--crema-osc)}
:root .zb .p-tabla td.n,:root .zb .p-tabla th.n{font-family:var(--zb-mono);font-weight:500}
:root .zb .p-tabla th.n{font-family:var(--zb-sans);font-weight:600}
:root .zb .p-tabla tr.total td{font-weight:600}
:root .zb .p-tabla td small{font-weight:600;font-family:var(--zb-sans)}
:root .zb .p-lista li{border-top:1px solid var(--crema-osc);padding:8px 0}
:root .zb .p-lista b{font-size:14px;font-weight:600}
:root .zb .p-lista span{font-size:13.5px}
:root .zb .p-lista small{font-size:12.5px}
/* Resultado de una llamada: nunca solo por color. Cada píldora lleva su texto y una marca de forma distinta. */
:root .zb .p-res{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--z-campo);border-radius:3px;padding:1px 8px;font-size:12px;font-weight:600;line-height:1.5;background:var(--z-papel);color:var(--negro)}
:root .zb .p-res::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
:root .zb .p-res.cita{color:#17602f;border-color:var(--verde);background:var(--zb-ok-bg)}
:root .zb .p-res.recado{color:var(--z-acento);border-color:var(--naranja);background:var(--z-tinte)}
:root .zb .p-res.recado::before{border-radius:1px}
:root .zb .p-res.sin_cita{color:var(--z-mut);border-style:dashed}
:root .zb .p-res.sin_cita::before{background:none;border:1.5px solid currentColor;box-sizing:border-box}
:root .zb .p-urg,:root .zb .cal-urg{border-radius:3px;font-weight:600}
:root .zb .p-lista .p-cancelada em,:root .zb .cal-et,:root .zb .p-wa-estado{border-radius:3px;font-weight:600}
:root .zb .p-fig figcaption{font-weight:600}
:root .zb .p-fig svg{border-radius:4px}
/* La letra de las gráficas se dibuja en unidades de un viewBox de 600: en un teléfono, 11 unidades eran 6 px. Aquí se sube
   (21 unidades ≈ 11,7 px a 390; en una tableta, 15 ≈ 12 px). En el SVG el tamaño es un atributo, así que esta regla manda.
   Solo #met-acum: es la única gráfica que pinta este diseño (con el panel lateral, registro/panel.py deja las de barras para el
   desglose de Resultados), y sus márgenes están hechos para esta letra (_svg_acumulado). */
@media(max-width:1000px){:root .zb #met-acum svg text{font-size:15px}}
@media(max-width:640px){:root .zb #met-acum svg text{font-size:21px}}
:root .zb .cv-abrir{font-weight:600}

/* ---------- Mi Elena ---------- */
:root .zb .p-elena dl{font-size:13.5px;gap:8px 16px}
:root .zb .p-elena dt{font-weight:500}
:root .zb .p-elena dd{font-weight:500}
:root .zb .p-svcs li{border-radius:4px;background:var(--zb-hueco)}
:root .zb .p-edit .p-aviso.espera{border-radius:4px}

/* ---------- cuenta, plan y facturación ---------- */
:root .zb .pp{border:0;border-radius:0;background:none;padding:0;margin:0 0 16px}
:root .zb .pp>h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
:root .zb .pp h4,:root .zb .cv h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--z-mut)}
:root .zb .pp h4{border-top:1px solid var(--z-linea);padding-top:14px;margin:18px 0 10px}
:root .zb .pp-indice a,:root .zb .p-cl-pag a{border-radius:4px;font-weight:600;font-size:13px;background:var(--z-papel)}
:root .zb .pp-plan{border:1px solid var(--z-linea);border-radius:4px;background:var(--zb-hueco)}
:root .zb .pp-plan.tuyo{border:2px solid var(--naranja);background:var(--z-tinte)}
:root .zb .pp-plan .min{font-weight:500;font-size:14px}
:root .zb .pp-plan .min b{font-family:var(--zb-mono);font-weight:600;font-size:18px}
:root .zb .pp-plan .precio{font-family:var(--zb-mono);font-weight:600;font-size:28px;letter-spacing:-.02em}
:root .zb .pp-plan .precio small{font-family:var(--zb-sans);font-weight:500;font-size:13px;color:var(--z-mut);letter-spacing:0}
:root .zb .pp-plan .mas{font-size:13px;color:var(--z-mut)}
:root .zb .pp-marca{background:var(--negro);color:var(--crema);border-radius:3px;font-weight:600;font-size:12px}
:root .zb .pp-tabla .tuyo{font-weight:600}
:root .zb .pp-todos li{font-size:13.5px}
:root .zb .pb-botones .pb-b,:root .zb .pb .pb-op label{border-radius:4px;font-weight:600}
:root .zb .pb-botones .pb-b{border-width:1.5px}

/* ---------- conversación de una llamada ---------- */
:root .zb .cv h2{font-size:18px;font-weight:600;text-transform:none;letter-spacing:-.01em;color:var(--negro)}
:root .zb .cv-cab{font-size:13.5px}
:root .zb .cv-cab dt{font-weight:500;font-size:12px}
:root .zb .cv-cab dd{font-weight:600}
:root .zb .cv-q{font-size:11.5px;font-weight:600;letter-spacing:.04em}
:root .zb .cv-q time{font-family:var(--zb-mono);font-weight:500}
:root .zb .cv-t p{border:1px solid var(--z-linea);border-radius:14px 14px 14px 4px;background:var(--zb-hueco);color:var(--negro);font-size:14px;padding:8px 12px}
:root .zb .cv-e p{border-radius:14px 14px 4px 14px;background:var(--z-tinte);border-color:#e6c9a3;color:var(--negro)}
:root .zb .cv-m,:root .zb .cv-vacio{border:1px dashed var(--z-campo);border-radius:4px;background:var(--zb-hueco);font-weight:600;font-size:13.5px}
:root .zb .cv-vacio small{font-weight:400;font-size:13px}
:root .zb .cv-ir{font-weight:600}
:root .zb .cv a:focus-visible{outline:3px solid var(--z-foco)}

/* ---------- conexiones ---------- */
:root .zb .cx .cx-g>h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--z-mut);margin:0 0 10px}
:root .zb .cx-r{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
:root .zb .cx-t{border:1px solid var(--z-linea);border-radius:6px;background:var(--z-papel);padding:12px;grid-template-columns:44px minmax(0,1fr)}
:root .zb .cx-ico{width:44px;height:44px;border-radius:4px;background:var(--negro);color:var(--crema)}
:root .zb .cx .cx-t h4,:root .zb .cx .cx-t legend{font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--negro)}
:root .zb .cx-t [data-estado]{border:1px solid var(--z-campo);border-radius:3px;font-size:12px;font-weight:600;padding:1px 8px}
:root .zb .cx-t [data-estado="connected"]{color:#17602f;border-color:var(--verde);background:var(--zb-ok-bg)}
:root .zb .cx-t [data-estado="broken"]{color:var(--rojo);border-color:var(--rojo);background:var(--zb-mal-bg)}
:root .zb .p-wa-estado.activo{color:#17602f;border-color:var(--verde);background:var(--zb-ok-bg)}
:root .zb .p-cal .p-cal-url{border-radius:4px;background:var(--zb-hueco);font-family:var(--zb-mono);font-size:13px}
:root .zb .p-cal-aviso{border-radius:4px}

/* ---------- desvío por operadora ---------- */
:root .zb .dt code,:root .zb .dt-cod data,:root .zb .p-pasos code{font-family:var(--zb-mono);font-weight:600;border-radius:4px;border-width:1px;background:var(--zb-hueco)}
:root .zb .carrier{border-radius:6px}
:root .zb .dv-chip{border-radius:4px}

/* ---------- primeros pasos ---------- */
:root .zb .p-pasos{border-color:var(--z-linea);border-top-color:var(--naranja)}
:root .zb .p-pasos li b{font-size:14px;font-weight:600}
:root .zb .p-pasos li p{font-size:13.5px}
:root .zb .p-pasos li:before{font-family:var(--zb-mono);font-weight:600;font-size:12px;width:24px;height:24px;border-width:1.5px;top:12px}
:root .zb .p-pasos li{padding-left:36px}
:root .zb .p-pasos li.hecho span{font-weight:600}
:root .zb .p-pasos .btn{display:inline-flex;width:auto}

/* ---------- resultados y desglose de llamadas ---------- */
:root .zb .p-rs-per{border-radius:4px}
:root .zb .p-rs-per a{border-radius:3px}
:root .zb .p-rs-tarjeta,:root .zb .p-rs-vacio,:root .zb .p-rs-aviso{border:1px solid var(--z-linea);border-top:3px solid var(--negro);border-radius:6px;background:var(--z-papel)}
:root .zb .p-rs-dinero,:root .zb .p-an-dinero{border-radius:6px}
:root .zb .p-rs-cifras b,:root .zb .p-an-cifras b,:root .zb .p-rs-paso b{font-family:var(--zb-mono);font-weight:600;letter-spacing:-.02em}

/* ---------- clientes ---------- */
:root .zb .p-cl-buscar input[type=search]{border-radius:4px}
:root .zb .p-cl-lista b{font-weight:600}
:root .zb .p-cl-hist em,:root .zb .p-an-picos em{border-radius:3px;font-weight:600}

/* ---------- calendario ---------- */
:root .zb .ag-nav a{border-radius:4px;font-weight:600;font-size:13.5px;border-width:1px;background:var(--z-papel)}
:root .zb .ag-aviso,:root .zb .ag-fuera{border-radius:4px}
:root .zb .cal .ag-rango{font-weight:600}
:root .zb .cal-vacio{border:1px dashed var(--z-campo);border-radius:4px;background:var(--zb-hueco);font-weight:500;color:var(--z-mut)}
:root .zb .cg-pista{border-radius:4px;background-color:var(--zb-hueco)}
:root .zb .cg-horas{font-family:var(--zb-mono);font-weight:500;font-size:11.5px}
:root .zb .cg-cab a b{font-family:var(--zb-mono);font-weight:600}
:root .zb .cg-cita{border-radius:3px;font-size:12px}
:root .zb .cg-cita b{font-family:var(--zb-mono);font-weight:600}
:root .zb .cg-cita span.n{font-weight:600}
:root .zb .cg-grupo{box-shadow:none;border-width:1px;border-radius:3px}
:root .zb .cg-grupo span.n{border-radius:3px}
:root .zb .cm td a{border-radius:4px;background:var(--zb-hueco)}
:root .zb .cm .cm-n{font-family:var(--zb-mono);font-weight:500}
:root .zb .cm .cm-c{border-radius:3px;font-family:var(--zb-mono);font-weight:600}
:root .zb .cm td.cm-hoy a{border:2px solid var(--negro)}
:root .zb .cal-ficha .cal-serv{border-radius:3px;font-weight:600}
:root .zb .cal-nota{border-radius:0 4px 4px 0}
:root .zb .cal-llamada{border-radius:4px;background:var(--zb-hueco)}
:root .zb .cal-ficha dd{font-weight:500}
:root .zb .cz-rango{font-weight:600;font-size:16px}
:root .zb .cz-fl,:root .zb .cz-hoy,:root .zb .cz-mas summary{border-radius:4px;font-weight:600}
:root .zb .cz-hoy{background:var(--z-papel);border-width:1px}
:root .zb .cz-mas>div{border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
:root .zb .cz-mas>div a{font-weight:600;font-size:14px;border-radius:4px}
:root .zb .cz-d{border-radius:4px}
:root .zb .cz-d>span:first-child{font-weight:600}
:root .zb .cz-d b{font-family:var(--zb-mono);font-weight:600;font-size:15px}
:root .zb .cz-d[aria-current]{background:var(--zb-hueco)}
:root .zb .cz-n{border-radius:3px;font-family:var(--zb-mono);font-weight:600}
@media(max-width:640px){
  /* El selector Semana · Día · Mes · Lista, siempre en su propia fila: clasica.css le da flex:1 (base 0) y con esta piel, en
     inglés, «‹ Previous · Today · Next ›» cabía al lado y lo dejaba en ~55 px con una letra por línea (iPhone de Pedro,
     13 oct 2026). Con la piel clásica no pasa (sus botones son más anchos y saltan de fila): medido, y clasica.css no se toca. */
  :root .zb .cal .cal-barra>.ag-nav:first-child{flex:1 0 100%;border-radius:4px;border-width:1px;background:var(--zb-hueco)}
  :root .zb .cal .cal-barra>.ag-nav:first-child a{white-space:nowrap}
  :root .zb .cal .cal-barra>.ag-nav:first-child a{border-radius:3px}
  :root .zb.pl .w{padding:0 12px}
}

/* ---------- ajustes tras mirar las capturas ---------- */
:root .zb svg text{font-family:var(--zb-sans)}
:root .zb .zb-n{font-family:var(--zb-sans);font-variant-numeric:lining-nums tabular-nums}
:root .zb .ag-nav a[aria-current="page"]{background:var(--negro);border-color:var(--negro);color:var(--crema)}
:root .zb .cg-mas,:root .zb .cg.dia .cg-mas{color:var(--z-mut)}
:root .zb .pl-inf .pl-mas a,:root .zb .pl-inf .pl-mas a[aria-current="page"]{color:var(--negro);box-shadow:none}
:root .zb .pl-inf .pl-mas a[aria-current="page"]{background:var(--z-tinte);box-shadow:inset 3px 0 0 var(--naranja);font-weight:700}
:root .zb .hour-row .day{font-weight:600}
:root .zb .p-edit h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--z-mut);border-top:1px solid var(--z-linea);padding-top:14px;margin:4px 0 10px}
:root .zb .p-svcs li b{font-weight:600}
:root .zb .p-edit .p-aviso{font-weight:600;font-size:14px}
@media(min-width:900px){
  /* escritorio: los botones miden lo que su texto, no el ancho de la tarjeta */
  :root .zb .p-sec .btn,:root .zb .p-sec .btn.ghost{width:auto;display:inline-flex}
  :root .zb .p-salir .btn.ghost{width:auto}
  /* Mi Elena: cada servicio en una fila; el horario, un día por fila */
  :root .zb .p-svcs li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) auto;gap:12px;align-items:end;padding:10px 12px}
  :root .zb .p-svcs li b{align-self:center}
  :root .zb .p-svc-campos{margin:0}
  :root .zb .p-svc-nombre{margin:0}
  :root .zb .p-horas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
  :root .zb .p-horas .hour-row{flex-wrap:nowrap;align-items:end}
  :root .zb .p-horas .hour-row .day{align-self:center}
  :root .zb .p-horas .hour-row label.closed-lbl{flex:0 0 auto;align-self:center}
  :root .zb .p-horas .p-hora{flex:1 1 0}
  :root .zb .p-edit fieldset{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin-right:8px;box-sizing:border-box}
  :root .zb .p-edit fieldset .chip{display:flex}
}
:root .zb .dt-av,:root .zb .dt-mio,:root .zb .dt-ops>details{border-radius:6px;border-width:1px}
:root .zb .dt-av{border-color:var(--rojo);background:var(--zb-mal-bg)}
:root .zb .dt-mio{border-color:var(--z-linea);border-top:3px solid var(--naranja)}
:root .zb .dt-no,:root .zb .dt-ob{border-radius:3px;font-weight:600}
:root .zb .dt-sel select{border-radius:4px;border-width:1.5px}
:root .zb .dt summary{font-weight:600}
:root .zb .dt h3,:root .zb .dt h4{font-weight:600}
:root .zb .dt-num{font-weight:600;font-size:17px}
:root .zb .cx .cx-t fieldset{border:0;background:none;padding:0}
:root .zb .cx .cx-t legend{text-transform:none;letter-spacing:0;color:var(--negro);font-size:15px}
:root .zb .cx-t p,:root .zb .cx-t .hint{font-size:13.5px}

/* ---------- Inicio: centro de mando (registro/corporativo.py, inicio) ---------- */
:root .zb .zb-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 18px;margin:4px 0 12px}
:root .zb .zb-cab h1{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0;overflow-wrap:anywhere}
:root .zb .zb-ante{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--z-acento);font-weight:700;margin:0 0 6px}
:root .zb .zb-sub{color:var(--z-mut);margin:6px 0 0;max-width:68ch}
:root .zb .zb-vivo{display:flex;flex-wrap:wrap;align-items:center;gap:0 7px;margin:0;font-weight:600;font-size:13px;color:#17602f}
:root .zb .zb-vivo::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px var(--zb-ok-bg);flex:none}
:root .zb .zb-vivo.zb-espera{color:var(--z-mut);font-weight:500}
:root .zb .zb-vivo.zb-espera::before{background:none;border:1.5px solid var(--z-campo);box-shadow:none;box-sizing:border-box}
:root .zb .zb-movil-num{display:flex;align-items:center;gap:10px;flex-basis:100%}
:root .zb .zb-movil-num .btn{min-height:44px;width:auto}
:root .zb .zb-movil-num .zb-copiado{font-size:13px;color:var(--z-mut)}
:root .zb .zb-inicio{border:0;background:none;padding:0;margin:0}
:root .zb .zb-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
:root .zb .zb-cifra{display:block;border:1px solid var(--z-linea);border-left:3px solid var(--naranja);border-radius:4px;background:var(--z-papel);padding:12px 14px;min-width:0;text-decoration:none;color:var(--negro)}
@media(hover:hover) and (pointer:fine){:root .zb .zb-cifra:hover{background:var(--z-tinte)}}
:root .zb .zb-cifra b{display:block;font-family:var(--zb-mono);font-size:28px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
:root .zb .zb-cifra span{display:block;text-transform:uppercase;font-size:11.5px;font-weight:600;letter-spacing:.07em;color:var(--z-mut);margin-top:6px}
:root .zb .zb-cifra small{display:block;color:var(--z-mut);font-size:12px;margin-top:2px}
:root .zb .zb-cols{display:grid;gap:12px;align-items:start}
:root .zb .zb-col{display:grid;gap:12px;min-width:0;align-content:start}
:root .zb .zb-col>.p-sec{margin:0}
:root .zb .zb-ch{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 12px}
:root .zb .zb-ch h2{margin:0}
:root .zb .zb-ch .p-enlace{margin:0;font-size:13px;white-space:nowrap}
:root .zb .zb-filas{list-style:none;margin:0;padding:0}
:root .zb .zb-filas>li{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:8px 0;border-top:1px solid var(--crema-osc)}
:root .zb .zb-filas>li:first-child{border-top:0;padding-top:0}
:root .zb .zb-filas>li:last-child{padding-bottom:0}
:root .zb .zb-cuando{font-weight:600;font-size:13px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
:root .zb .zb-cuando small{display:block;font-weight:500;color:var(--z-mut);font-size:12px}
:root .zb .zb-que b{font-weight:600}
:root .zb .zb-que a{color:var(--negro);text-underline-offset:3px}
:root .zb .zb-que small{display:block;color:var(--z-mut);font-size:12.5px;margin-top:1px}
:root .zb .zb-origen{display:inline-block;font-size:11.5px;font-weight:600;color:var(--z-mut);border:1px solid var(--z-linea);border-radius:3px;padding:0 6px;white-space:nowrap;line-height:1.6;background:var(--z-papel);font-style:normal}
/* El sello (acabado final): quien agendó la cita, en píldora. Si fue Elena —por teléfono, por WhatsApp o sin canal apuntado—,
   con su cara; si la añadió el dueño, sin ella y en apagado. Vale igual en Inicio, en la lista del calendario y en la ficha
   de la cita (<dd data-origen>). El texto y el canal («· phone», «· WhatsApp») son los de corporativo.ORIGENES. */
:root .zb .zb-origen[data-origen],:root .zb dd[data-origen]{display:inline-flex;align-items:center;gap:6px;min-height:26px;width:fit-content;padding:0 10px;border:1px solid var(--z-linea);border-radius:var(--f-pildora);
  background:var(--z-papel);color:var(--z-mut);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;vertical-align:middle}
:root .zb .zb-origen[data-origen="telefono"],:root .zb dd[data-origen="telefono"],:root .zb .zb-origen[data-origen="whatsapp"],:root .zb dd[data-origen="whatsapp"],:root .zb .zb-origen[data-origen="elena"],:root .zb dd[data-origen="elena"]{padding-left:3px;border-color:var(--negro);color:var(--negro)}
:root .zb .zb-origen[data-origen="telefono"]::before,:root .zb dd[data-origen="telefono"]::before,:root .zb .zb-origen[data-origen="whatsapp"]::before,:root .zb dd[data-origen="whatsapp"]::before,:root .zb .zb-origen[data-origen="elena"]::before,:root .zb dd[data-origen="elena"]::before{content:"";flex:none;width:20px;height:20px;background:url("marca/zolteva-simbolo.svg") center/contain no-repeat}
/* En el móvil el sello baja bajo el texto de la cita: al lado le quitaba un tercio del ancho y el nombre se partía en tres líneas. */
@media(max-width:520px){:root .zb .zb-filas>li>[data-origen]{grid-column:1/-1;justify-self:start;margin:2px 0}}
/* Lo que dice Elena, en serifa: sus frases en la conversación de una llamada y la nota que tomó para la cita. */
:root .zb .cv-e p,:root .zb .cal-nota blockquote{font-family:var(--f-serif);font-size:15px;line-height:1.48}
/* Respuesta al toque: los botones ceden 1 px al pulsar; los cambios de estado, con las duraciones y la curva de las fichas. */
:root .zb .btn,:root .zb .zb-copiar,:root .zb .pl-nav a,:root .zb .pl-inf a,:root .zb .zb-tabs a,:root .zb .ag-nav a,:root .zb .zb-cifra{transition:transform var(--f-t1) var(--f-curva),background-color var(--f-t2) var(--f-curva),border-color var(--f-t2) var(--f-curva),color var(--f-t2) var(--f-curva)}
/* (v2.1 final, emil-design-eng: la respuesta al pulsar es scale(.97), no un desplazamiento; ver el bloque «Movimiento» al final) */
:root .zb .zb-progreso{display:flex;justify-content:flex-end;margin:-28px 0 8px;font-size:12.5px;color:var(--z-mut)}
:root .zb .p-pasos>.zb-barra{margin:0 0 6px}
:root .zb .zb-listo h2{color:var(--negro)}
:root .zb .zb-listo p{margin:0 0 6px;color:var(--z-mut);max-width:70ch}
:root .zb .zb-minutos .p-fig{margin:14px 0 0}
:root .zb .zb-minutos .p-minutos h2{margin:0}
@media(max-width:520px){
  :root .zb .zb-filas>li{grid-template-columns:minmax(0,1fr) auto}
  :root .zb .zb-cuando{grid-column:1/-1}
  :root .zb .zb-cuando small{display:inline;margin-left:6px}
  :root .zb .zb-progreso{margin:0 0 6px;justify-content:flex-start}
}
@media(min-width:760px){:root .zb .zb-cifras{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
@media(min-width:900px){:root .zb .zb-movil-num{display:none}}
@media(min-width:1100px){:root .zb .zb-cols{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}

/* ---------- Llamadas: lista y detalle (registro/corporativo.py, llamadas) ---------- */
:root .zb .zb-ll{border:0;background:none;padding:0;margin:0}
:root .zb .zb-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;border:1.5px solid var(--z-campo);border-radius:4px;padding:2px;background:var(--zb-hueco)}
:root .zb .zb-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:2px;font-weight:600;font-size:13.5px;text-decoration:none;color:var(--negro);white-space:nowrap}
:root .zb .zb-tabs a .zb-n{font-family:var(--zb-mono);font-weight:500;font-size:12px;color:var(--z-mut)}
:root .zb .zb-tabs a[aria-current="true"]{background:var(--negro);color:var(--crema)}
:root .zb .zb-tabs a[aria-current="true"] .zb-n{color:var(--crema)}
@media(hover:hover) and (pointer:fine){:root .zb .zb-tabs a:hover:not([aria-current]){background:var(--z-tinte)}}
:root .zb .zb-dos{display:grid;gap:12px;align-items:start;margin:0 0 12px}
:root .zb .zb-dos>.p-sec,:root .zb .zb-detalle>.p-sec{margin:0}
:root .zb .zb-lista{min-width:0}
:root .zb .zb-detalle{min-width:0}
:root .zb .zb-llamadas-lista{list-style:none;margin:0;padding:0}
:root .zb .zb-llamadas-lista li{border-top:1px solid var(--crema-osc);scroll-margin-top:12px}
:root .zb .zb-llamadas-lista li:first-child{border-top:0}
:root .zb .zb-llamadas-lista li>*{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:10px;border-radius:4px;text-decoration:none;color:var(--negro);min-height:44px;box-sizing:border-box}
@media(hover:hover) and (pointer:fine){:root .zb .zb-llamadas-lista a:hover{background:var(--zb-hueco)}}
:root .zb .zb-llamadas-lista li:target>*{box-shadow:inset 3px 0 0 var(--naranja)}
:root .zb .zb-quien{font-family:var(--zb-mono);font-weight:600}
:root .zb .zb-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12.5px;color:var(--z-mut);font-variant-numeric:lining-nums tabular-nums}
:root .zb .zb-extra{color:var(--z-acento);font-weight:600}
:root .zb .zb-uso h3{margin-top:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--z-mut)}
@media(max-width:999px){
  /* móvil: la lista, y al tocar una llamada, su página con el detalle */
  :root .zb .zb-dos:not(.zb-abierta) .zb-detalle,:root .zb .zb-dos.zb-abierta .zb-lista{display:none}
}
@media(min-width:1000px){
  :root .zb .zb-dos:not(.zb-sola){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  :root .zb .zb-llamadas-lista a[aria-current="true"]{background:var(--z-tinte);box-shadow:inset 3px 0 0 var(--naranja)}
  :root .zb .zb-detalle{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}
  :root .zb .zb-detalle .cv>p:first-child{display:none}      /* «Volver a las llamadas»: en escritorio la lista está al lado */
  :root .zb .zb-lista{max-height:calc(100vh - 24px);overflow-y:auto}
}

/* ---------- Conexiones: cabecera y grupos (registro/corporativo.py, conexiones) ---------- */
:root .zb .cx{border:0;background:none;padding:0}
:root .zb .cx .cx-g{margin:0 0 20px}
:root .zb .cx .cx-g>h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
:root .zb .cx .cx-g>h3 small{font-size:13px;font-weight:400;color:var(--z-mut);letter-spacing:0;text-transform:none}
:root .zb .cx-t{border-top:3px solid var(--negro)}

/* ---------- más ajustes tras mirar las capturas ---------- */
:root .zb .pl-inf .pl-mas .pl-n{position:static;margin:0 0 0 auto}
:root .zb .cm .cm-n{white-space:nowrap;letter-spacing:-.04em}
:root .zb .cm td.cm-hoy .cm-n{border-radius:3px;padding:3px 5px;margin:-3px 0 -3px -3px}
:root .zb .pp-tabla td{white-space:nowrap}
:root .zb .p-an-cifras b{font-family:var(--zb-sans);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
:root .zb .zb-aviso .btn{flex:none}
/* El aviso de la prueba fuera de Inicio, en el móvil: una línea («Free trial: 5 days left. · See my plan»). En Inicio y en
   escritorio, entero. */
@media(max-width:520px){
  :root .zb .zb-aviso.zb-corto{flex-wrap:nowrap;gap:0 6px;padding:0 12px;margin-bottom:8px}
  :root .zb .zb-aviso.zb-corto .zb-largo{display:none}
  :root .zb .zb-aviso.zb-corto>span{white-space:nowrap}
  :root .zb .zb-aviso.zb-corto .btn{margin-left:0;min-height:44px;padding:0;border:0;background:none;box-shadow:none;color:inherit;font-weight:600;text-decoration:underline;white-space:nowrap}
  :root .zb .zb-aviso.zb-corto>span:not(:last-child)::after{content:" ·"}
}
/* La lista del calendario: la regla de las listas del panel (.p-lista li, sin margen izquierdo) le quitaba el hueco de su
   barra de color, y la barra tapaba la primera letra de cada línea («9:00» se leía «:00»; visto en iPhone el 13 oct 2026). */
:root .zb .cal-lista li{padding-left:14px}
:root .zb .cal-lista [data-origen]{margin:3px 0}
/* Arreglos del equipo (14 oct 2026): «Mostrar canceladas» no pega contra el rango de fechas. La regla de los h3 de esta
   hoja quitaba el margen derecho que clasica.css le da al rango en la semana; en el teléfono, aire entre los dos. */
@media(min-width:900px){:root .zb .cz-sem>.ag-rango{margin-right:24px}}
@media(max-width:899px){:root .zb .cal .ag-rango+.cal-canc{margin-top:8px}}

/* =====================================================================================================================
   SISTEMA DEL PANEL (19 oct 2026, AUDITORIA_DISENO_PANEL_20261019.md). Pedro: «es un producto para venderse… para un
   cliente que tiene gusto». La piel B no cambia de dirección (papel crema, barra de tinta, IBM Plex, ocre de Zolteva);
   lo que cambia es que ahora es un sistema: unas fichas (--zs-*) y unos componentes que todas las páginas usan igual. Va
   al final para mandar sobre las capas de arriba sin tocar el HTML de cada página. Cada selector va suelto (sin :is() con
   comas) para que la guarda de test_diseno_corporativo pueda comprobar que todos cuelgan de .zb.
   ===================================================================================================================== */
:root body.zb{
  /* color: superficies y líneas */
  --zs-fondo:var(--f-papel);
  --zs-tarjeta:#fff;
  --zs-hueco:var(--f-hueco);
  --zs-linea:#e4ddcf;            /* separadores y bordes de tarjeta: se ven sin pesar */
  --zs-linea-2:#efe9de;          /* filas dentro de una tarjeta */
  --zs-control:#cbc2b1;          /* borde de los botones secundarios */
  --zs-campo:var(--f-campo);     /* borde de los campos: 3,6:1 sobre blanco (WCAG 1.4.11) */
  --zs-tinta:var(--f-tinta);
  --zs-mut:var(--f-apagado);     /* 6,5:1 sobre blanco y 5,6:1 sobre el papel */
  --zs-acento:var(--f-acento);   /* relleno del botón primario, con letra de tinta */
  --zs-acento-texto:var(--f-acento-texto);
  --zs-tinte:var(--f-tinte);
  --zs-foco:var(--f-acento-texto);
  --zs-bien:#17602f; --zs-bien-fondo:#e3f1e7;
  --zs-mal:var(--f-mal); --zs-mal-fondo:#f9e6e3;
  --zs-ambar:#7a4100; --zs-ambar-fondo:#fdf1e1;
  /* tipografía: 12 · 13 · 14 · 15 · 17 · 24, dos pesos (500 y 600) */
  --zs-t-xs:12px; --zs-t-s:13px; --zs-t:14px; --zs-t-m:15px; --zs-t-l:17px; --zs-t-xl:24px;
  /* espacio: rejilla de 4 */
  --zs-1:4px; --zs-2:8px; --zs-3:12px; --zs-4:16px; --zs-5:20px; --zs-6:24px; --zs-8:32px;
  /* radios: control 8 dentro de tarjeta 10 */
  --zs-r-s:6px; --zs-r:8px; --zs-r-l:10px;
  /* sombras: casi nada; el borde separa y la sombra solo levanta lo que flota */
  --zs-sombra:0 1px 2px rgba(34,32,28,.05);
  --zs-sombra-flota:0 8px 24px rgba(34,32,28,.14),0 1px 3px rgba(34,32,28,.08);
  background:var(--zs-fondo);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ---------- foco visible y propio en todo lo que se toca, también los <summary> ---------- */
:root .zb main a:focus-visible,
:root .zb main button:focus-visible,
:root .zb main summary:focus-visible,
:root .zb main input:focus-visible,
:root .zb main select:focus-visible,
:root .zb main textarea:focus-visible,
:root .zb main [tabindex]:focus-visible{outline:2px solid var(--zs-foco);outline-offset:2px}
:root .zb main input:focus-visible,
:root .zb main select:focus-visible,
:root .zb main textarea:focus-visible{outline-offset:0;border-color:var(--zs-foco)}
:root .zb summary{cursor:pointer}

/* ---------- títulos de tarjeta: 15 px, tinta, sin mayúsculas forzadas (antes: 12 px en mayúsculas espaciadas) ---------- */
:root .zb .p-sec h2,
:root .zb .pp h4,
:root .zb .cv h3,
:root .zb .zb-uso h3,
:root .zb .p-edit h3,
:root .zb .p-ajustes legend,
:root .zb legend,
:root .zb .cx .cx-g>h3{
  font-size:var(--zs-t-m);font-weight:600;text-transform:none;letter-spacing:0;color:var(--zs-tinta)}

/* ---------- cabecera de página: una para todas ---------- */
:root .zb .pl-cont>section.p-sec:not(.cv),
:root .zb main>.w>section.p-sec.ag:not(.cal-ficha){background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin:0 0 var(--zs-4)}
:root .zb .pl-cont>section.p-sec:not(.cv)>h2:first-child,
:root .zb .p-sec .ag-cab>h2,
:root .zb main>.w>section.p-sec.ag>h2,
:root .zb .zb-cab h1,
:root .zb .p-rs .p-rs-cab h2,
:root .zb .p-rs .p-rs-cab h1,
:root .zb .cal-ficha.p-sec>h2{
  font-size:var(--zs-t-xl);font-weight:600;letter-spacing:-.015em;line-height:1.2;text-transform:none;color:var(--zs-tinta);margin:var(--zs-1) 0 var(--zs-4);text-wrap:balance}
:root .zb .zb-cab{margin:var(--zs-1) 0 var(--zs-5)}
:root .zb .zb-cab h1{margin:0}
:root .zb .zb-sub{color:var(--zs-mut);font-size:var(--zs-t);max-width:72ch;margin:var(--zs-1) 0 0;text-wrap:pretty}
:root .zb .pl-cont>section.p-sec:not(.cv)>h2:first-child+p,
:root .zb .pl-cont>section.p-sec:not(.cv)>h2:first-child+p+p.hint{
  color:var(--zs-mut);font-size:var(--zs-t);max-width:72ch;margin:calc(-1 * var(--zs-2)) 0 var(--zs-4);text-wrap:pretty}
:root .zb .pl-cont>section.p-sec:not(.cv)>h2:first-child+p+p.hint{margin-top:calc(-1 * var(--zs-2))}
:root .zb .p-sec .ag-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--zs-3);margin:0 0 var(--zs-3)}
:root .zb .p-sec .ag-cab>h2{margin:0}
:root .zb .ag-cab .ag-acc{margin:0;display:flex;gap:var(--zs-2);flex-wrap:wrap}

/* ---------- tarjeta: fondo blanco, 1 px, radio 10, sin filo de tinta ---------- */
:root .zb .p-sec,
:root .zb .cx-t,
:root .zb .p-rs-tarjeta,
:root .zb .p-rs-vacio,
:root .zb .p-rs-aviso,
:root .zb .zb-cifra,
:root .zb .p-cl-cifras>div,
:root .zb .cal-ficha,
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.p-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.p-cl-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.ct-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>dl,
:root .zb .pl-cont>section.p-sec:not(.cv)>.p-edit,
:root .zb .pl-cont>section.p-sec:not(.cv)>.pp,
:root .zb .pl-cont>section.p-sec:not(.cv)>fieldset,
:root .zb .pl-cont>section.p-sec:not(.cv)>.cl-ayuda,
:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-mio,
:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-ops,
:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-video,
:root .zb .pl-cont>section.p-sec:not(.cv)>form:not(.p-cl-buscar):not(.p-salir):not(.dt-sel),
:root .zb main>.w>section.p-sec.ag:not(.cal-ficha)>.ag-semana-tabla,
:root .zb main>.w>section.p-sec.ag:not(.cal-ficha)>.ag-lista,
:root .zb main>.w>section.p-sec.ag:not(.cal-ficha)>table.cm,
:root .zb main>.w>section.p-sec.ag:not(.cal-ficha)>form{
  background:var(--zs-tarjeta);border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);box-shadow:var(--zs-sombra);padding:var(--zs-4) var(--zs-5);margin:0 0 var(--zs-3)}
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.p-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.p-cl-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-ops{padding:var(--zs-1) var(--zs-5)}
:root .zb .cx-t{border-top:1px solid var(--zs-linea)}
:root .zb .pl-cont>section.p-sec:not(.cv)>h3,
:root .zb .pl-cont>section.p-sec:not(.cv)>.p-edit>h3:first-child{
  font-size:var(--zs-t-l);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--zs-tinta);border:0;padding:0;margin:var(--zs-6) 0 var(--zs-3)}
:root .zb .pl-cont>section.p-sec:not(.cv)>.p-edit>h3:first-child{margin-top:0}
:root .zb .cx .cx-g>h3{font-size:var(--zs-t-l);margin:0 0 var(--zs-3)}
:root .zb .cx .cx-g>h3 small{font-size:var(--zs-t);color:var(--zs-mut)}
:root .zb fieldset,
:root .zb .p-ajustes fieldset,
:root .zb .ag-form fieldset,
:root .zb .p-edit fieldset,
:root .zb .pb fieldset{border:1px solid var(--zs-linea);border-radius:var(--zs-r);background:var(--zs-hueco)}
/* una tarjeta que es un <fieldset>: su leyenda va dentro, como título, y no montada sobre el borde */
:root .zb .pl-cont>section.p-sec:not(.cv)>fieldset{background:var(--zs-tarjeta);padding-top:var(--zs-4)}
:root .zb .pl-cont>section.p-sec:not(.cv)>fieldset>legend{float:left;width:100%;padding:0;margin:0 0 var(--zs-2);font-size:var(--zs-t-l)}
:root .zb .pl-cont>section.p-sec:not(.cv)>fieldset>legend+*{clear:both}

/* ---------- botones: primario, secundario, terciario ---------- */
:root .zb .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--zs-2);min-height:40px;padding:0 var(--zs-4);border-radius:var(--zs-r);
  border:1px solid transparent;background:var(--zs-acento);color:var(--zs-tinta);font-size:var(--zs-t);font-weight:600;line-height:1.2;text-decoration:none;box-shadow:0 1px 0 rgba(34,32,28,.08);cursor:pointer}
@media(hover:hover) and (pointer:fine){:root .zb .btn:hover{background:var(--f-acento-vivo)}}
:root .zb .btn.ghost,
:root .zb .btn.secondary{background:var(--zs-tarjeta);border:1px solid var(--zs-control);color:var(--zs-tinta);box-shadow:var(--zs-sombra)}
@media(hover:hover) and (pointer:fine){:root .zb .btn.ghost:hover,
:root .zb .btn.secondary:hover{background:var(--zs-hueco);border-color:var(--zs-campo)}}
:root .zb .btn-link,
:root .zb .p-salir .btn.ghost{background:none;border:0;box-shadow:none;padding:0 var(--zs-1);min-height:40px;color:var(--zs-tinta);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media(max-width:899px){:root .zb .btn{min-height:44px}}
/* Un primario por vista: lo que sobraba en naranja pasa a secundario (mismo enlace, mismo formulario, mismo texto) */
:root .zb .v2-acc .btn:not(.ghost),
:root .zb .cx-t .btn:not(.ghost),
:root .zb #elena button.btn[value="anadir"],
:root .zb #contactos form[enctype] .btn:not(.ghost){
  background:var(--zs-tarjeta);border:1px solid var(--zs-control);color:var(--zs-tinta);box-shadow:var(--zs-sombra)}
@media(hover:hover) and (pointer:fine){:root .zb .v2-acc .btn:not(.ghost):hover,
:root .zb .cx-t .btn:not(.ghost):hover,
:root .zb #elena button.btn[value="anadir"]:hover,
:root .zb #contactos form[enctype] .btn:not(.ghost):hover{background:var(--zs-hueco)}}
/* Recados: el «Devolver la llamada» del urgente ya no se estira a todo el ancho */
:root .zb #recados .p-lista .btn{flex:0 0 auto;width:auto}

/* ---------- campos ---------- */
:root .zb input[type=text],
:root .zb input[type=tel],
:root .zb input[type=email],
:root .zb input[type=number],
:root .zb input[type=time],
:root .zb input[type=date],
:root .zb input[type=datetime-local],
:root .zb input[type=password],
:root .zb input[type=search],
:root .zb input[type=url],
:root .zb select,
:root .zb textarea{
  background-color:var(--zs-tarjeta);border:1px solid var(--zs-campo);border-radius:var(--zs-r);min-height:44px;box-shadow:inset 0 1px 1px rgba(34,32,28,.04)}
:root .zb input::placeholder,
:root .zb textarea::placeholder{color:#857c6d}
:root .zb .field label,
:root .zb label{font-size:var(--zs-t-s);font-weight:600}
/* formularios de una columna: del ancho de lo que piden */
:root .zb #contactos>form,
:root .zb #comentarios>form,
:root .zb .ag-form>form,
:root .zb .p-cl-buscar,
:root .zb #contactos>.p-vacio,
:root .zb #comentarios>.p-vacio{max-width:640px}
:root .zb .p-cl-buscar{margin:0 0 var(--zs-3)}

/* ---------- insignias de estado: una pastilla, con su forma; nunca solo el color ---------- */
:root .zb .p-res,
:root .zb .cx-t [data-estado],
:root .zb .zb-origen[data-zb],
:root .zb .p-urg,
:root .zb .dt-no,
:root .zb .dt-ob,
:root .zb .p-wa-estado{
  display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 9px;border:0;border-radius:var(--f-pildora);font-size:var(--zs-t-xs);font-weight:600;line-height:1.4;
  background:var(--zs-hueco);color:var(--zs-mut);box-shadow:inset 0 0 0 1px var(--zs-linea);white-space:nowrap;width:fit-content}
:root .zb .p-res.cita,
:root .zb .cx-t [data-estado="connected"],
:root .zb .cx-t [data-estado="active"],
:root .zb .p-wa-estado.activo{background:var(--zs-bien-fondo);color:var(--zs-bien);box-shadow:none}
:root .zb .cx-t [data-estado="connected"]::before,
:root .zb .cx-t [data-estado="active"]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
:root .zb .p-res.recado{background:var(--zs-ambar-fondo);color:var(--zs-ambar);box-shadow:none}
:root .zb .p-urg,
:root .zb .dt-no,
:root .zb .cx-t [data-estado="broken"]{background:var(--zs-mal-fondo);color:var(--zs-mal);box-shadow:none}
:root .zb .cx-t [data-estado]{margin:0 0 var(--zs-2)}

/* ---------- filas de lista ---------- */
:root .zb .p-lista li,
:root .zb .p-cl-lista li,
:root .zb .zb-filas>li,
:root .zb .zb-llamadas-lista li,
:root .zb .ct-lista li{border-top:1px solid var(--zs-linea-2)}
:root .zb .p-lista li:first-child,
:root .zb .p-cl-lista li:first-child,
:root .zb .ct-lista li:first-child{border-top:0}
/* Filas limpias dentro de la tarjeta, y los dos botones iguales (Edit es enlace; Delete, botón). */
:root .zb .ct-lista li.ct-fila{border-width:1px 0 0;border-style:solid;border-color:var(--zs-linea-2);border-radius:0;background:none;padding:12px 0}
:root .zb .ct-lista li.ct-fila:first-child{border-top:0}
:root .zb .ct-acciones .btn{min-height:44px;height:44px;margin:0;padding:0 16px;display:inline-flex;align-items:center}
:root .zb .p-lista li{padding:var(--zs-3) 0}
:root .zb .p-lista,
:root .zb .p-cl-lista,
:root .zb .zb-filas,
:root .zb .zb-llamadas-lista,
:root .zb .zb-meta,
:root .zb .zb-cuando,
:root .zb .p-tabla,
:root .zb .cg-horas{font-variant-numeric:lining-nums tabular-nums}

/* ---------- estados vacíos: guía, sin cajas punteadas ---------- */
:root .zb .p-vacio,
:root .zb .cal-vacio,
:root .zb .cv-vacio{border:0;border-radius:var(--zs-r);background:var(--zs-hueco);box-shadow:inset 0 0 0 1px var(--zs-linea-2);color:var(--zs-mut);padding:var(--zs-4);font-size:var(--zs-t);font-weight:500}
:root .zb .cv-m{border:0;border-radius:var(--zs-r);background:var(--zs-hueco);box-shadow:inset 0 0 0 1px var(--zs-linea)}

/* ---------- avisos: fondo tintado y una barra a la izquierda (antes: marcos de 3 px) ---------- */
:root .zb .p-franja,
:root .zb .zb-aviso,
:root .zb .dt-av{border:0;border-left:3px solid var(--zs-acento);border-radius:var(--zs-r);background:var(--zs-ambar-fondo);color:var(--zs-tinta);
  padding:var(--zs-3) var(--zs-4);font-size:var(--zs-t);font-weight:500;box-shadow:none;margin:0 0 var(--zs-3)}
:root .zb .p-franja>span:first-child,
:root .zb .zb-aviso b{font-weight:600}
:root .zb .p-franja small{font-size:var(--zs-t-s);color:var(--zs-mut);font-weight:500}
:root .zb .p-franja a{font-weight:600;color:var(--zs-tinta)}
:root .zb .p-franja.ok{border-left-color:var(--f-bien);background:var(--zs-bien-fondo)}
:root .zb .dt-av{border-left-color:var(--zs-mal);background:#fdf3f1}
/* la franja de valor de Inicio: una frase destacada sin marco negro; sus notas en una sola línea gris */
:root .zb .p-valor{border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);background:var(--zs-tarjeta);box-shadow:var(--zs-sombra);padding:var(--zs-4) var(--zs-5);margin:0 0 var(--zs-3)}
:root .zb .p-valor b{font-size:var(--zs-t-l);font-weight:600;letter-spacing:-.01em}
:root .zb .p-valor small{display:inline;font-size:var(--zs-t-s);color:var(--zs-mut);margin:0}
:root .zb .p-valor b+small::before{content:"";display:block;height:var(--zs-1)}
:root .zb .p-valor small+small::before{content:" · "}

/* ---------- cifra: un componente para Inicio, Clientes y Resultados ---------- */
:root .zb .zb-cifra,
:root .zb .p-cl-cifras>div{border-left:1px solid var(--zs-linea);padding:var(--zs-4)}
@media(hover:hover) and (pointer:fine){:root .zb .zb-cifra:hover{background:var(--zs-tarjeta);border-color:var(--zs-control)}}
:root .zb .zb-cifra b,
:root .zb .p-cl-cifras b,
:root .zb .p-an-cifras b{font-family:var(--zb-mono);font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:root .zb .zb-cifra span,
:root .zb .p-cl-cifras span,
:root .zb .p-cifras span{text-transform:none;letter-spacing:0;font-size:var(--zs-t-s);font-weight:600;color:var(--zs-tinta);margin-top:var(--zs-1)}
:root .zb .zb-cifra small{font-size:var(--zs-t-xs)}
:root .zb .p-cl-cifras{gap:var(--zs-3);margin:0 0 var(--zs-4)}
:root .zb .p-cl-cifras>div{margin:0}

/* ---------- Inicio ---------- */
:root .zb .zb-ante{font-size:var(--zs-t-s);letter-spacing:0;text-transform:none;font-weight:600;color:var(--zs-acento-texto)}
:root .zb .zb-ch{margin:0 0 var(--zs-2)}

/* ---------- Llamadas: filas compactas, acciones pequeñas y secundarias ---------- */
:root .zb .zb-llamadas-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--zs-2)}
:root .zb .zb-llamadas-lista li>a{grid-column:1/-1}
:root .zb .zb-llamadas-lista li:has(.v2-acc)>a{grid-column:1}
:root .zb .zb-llamadas-lista li>.v2-acc{display:flex;gap:6px;padding:0 var(--zs-2) 0 0;margin:0}
:root .zb .zb-llamadas-lista .v2-acc .btn{min-height:32px;padding:0 10px;font-size:var(--zs-t-s);width:auto}
:root .zb .zb-llamadas-lista a{padding:10px 12px}
:root .zb .zb-meta{font-size:var(--zs-t-xs)}
:root .zb .zb-tabs{border:1px solid var(--zs-linea);border-radius:var(--zs-r);background:var(--zs-tarjeta);padding:3px;box-shadow:var(--zs-sombra)}
:root .zb .zb-tabs a{border-radius:var(--zs-r-s);min-height:36px}
:root .zb .zb-tabs a[aria-current="true"]{background:var(--zs-tinta)}
@media(max-width:999px){
  /* En el móvil la lista y el detalle son dos pantallas: «Devolver la llamada» y «Agendar» viven en el detalle (un toque),
     y la lista deja de medir 8.000 px (C1 de la auditoría). Mismos enlaces; en escritorio siguen en cada fila. */
  :root .zb .zb-llamadas-lista li>.v2-acc{display:none}
  :root .zb .zb-llamadas-lista li:has(.v2-acc)>a{grid-column:1/-1}
  :root .zb .zb-tabs{display:flex;overflow-x:auto;flex-wrap:nowrap}
}

/* ---------- Conexiones: tarjeta de integración ---------- */
:root .zb .cx-r{gap:var(--zs-3)}
:root .zb .cx-t{grid-template-columns:40px minmax(0,1fr);column-gap:var(--zs-3);padding:var(--zs-4)}
:root .zb .cx-ico{width:40px;height:40px;border-radius:var(--zs-r);background:var(--zs-tarjeta);color:var(--zs-tinta);box-shadow:inset 0 0 0 1px var(--zs-linea)}
:root .zb .cx-ico svg{width:22px;height:22px}
:root .zb .cx-ico.cx-marca svg{width:26px;height:26px}
:root .zb .cx .cx-t h4,
:root .zb .cx .cx-t legend{font-size:var(--zs-t-m);padding-top:var(--zs-2);margin:0 0 var(--zs-1)}
:root .zb .cx-t p,
:root .zb .cx-t .hint{font-size:var(--zs-t-s);color:var(--zs-mut)}
:root .zb .cx-t .cx-res{color:var(--zs-tinta);font-size:var(--zs-t);margin:0 0 var(--zs-1)}
:root .zb .cx-t .btn{width:auto;display:inline-flex}
:root .zb .cx-t video{max-width:100%;max-height:220px;border-radius:var(--zs-r)}
:root .zb .cx-t details.cx-mas{margin:0 0 var(--zs-2)}
:root .zb .cx-t details.cx-mas>summary{font-size:var(--zs-t-s);font-weight:600;color:var(--zs-tinta);min-height:32px;display:inline-flex;align-items:center;gap:6px;list-style:none;text-decoration:underline;text-underline-offset:3px}
:root .zb .cx-t details.cx-mas>summary::-webkit-details-marker{display:none}
:root .zb .cx-t details.cx-mas>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--f-t2) var(--f-curva)}
:root .zb .cx-t details.cx-mas[open]>summary::before{transform:rotate(45deg)}

/* ---------- Mi Elena ---------- */
:root .zb .p-elena dl{font-size:var(--zs-t)}
:root .zb .p-svcs li{background:none;border:0;border-top:1px solid var(--zs-linea-2);border-radius:0}
:root .zb .p-svcs li:first-child{border-top:0}
:root .zb .p-edit .chip,
:root .zb .chip{border:1px solid var(--zs-control);border-radius:var(--zs-r);background:var(--zs-tarjeta)}
:root .zb .chip:has(input:checked){border-color:var(--zs-acento);background:var(--zs-tinte);box-shadow:inset 0 0 0 1px var(--zs-acento)}
:root .zb .p-edit fieldset:has([name="saludo"]) .chip-list>.chip,
:root .zb .p-edit fieldset:has(.voz-opcion) .chip-list>.chip{min-height:48px}
@media(min-width:900px){
  :root .zb .p-edit fieldset{width:calc(50% - 8px)}
  /* Saludo y voz a todo el ancho; las 12 voces (APROBADO A3) en rejilla y no en una columna de 12 filas */
  :root .zb .p-edit fieldset:has([name="saludo"]),
:root .zb .p-edit fieldset:has(.voz-opcion){display:block;width:auto;margin-right:0}
  :root .zb .p-edit fieldset:has([name="saludo"]) .chip-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--zs-2)}
  :root .zb .p-edit fieldset:has(.voz-opcion) .chip-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--zs-2)}
  :root .zb .p-edit fieldset .chip-list>.chip{margin:0}
}

/* ---------- Cuenta ---------- */
:root .zb .pp-indice{display:flex;flex-wrap:wrap;gap:4px 20px;border:0;background:none;padding:0;margin:0 0 8px}
:root .zb .pp-indice a{border-radius:0;background:none;border:0;padding:0;min-height:44px;color:var(--a-verde-osc);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:14px}
:root .zb .pp-plan .pp-pedir{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--a-verde-osc);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){:root .zb .pp-indice a:hover{background:var(--zs-tarjeta)}}
:root .zb .pp-plan{border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);background:var(--zs-tarjeta)}
:root .zb .pp-plan.tuyo{border:1px solid var(--zs-acento);box-shadow:inset 0 0 0 1px var(--zs-acento);background:#fffaf3}
:root .zb .pp h4{border-top:1px solid var(--zs-linea-2)}
/* el gráfico de minutos: la línea del plan en tinta suave; el rojo queda para los errores */
:root .zb .pp svg text{font-weight:600}
:root .zb .cl-ayuda{border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);box-shadow:var(--zs-sombra);padding:var(--zs-4) var(--zs-5)}

/* ---------- Desvío: la advertencia en su sitio, el vídeo de su tamaño, las operadoras en una lista ---------- */
:root .zb .dt-mio{border-top:1px solid var(--zs-linea)}
:root .zb .dt-ops>details{border:0;border-top:1px solid var(--zs-linea-2);border-radius:0;margin:0;background:none}
:root .zb .dt-ops>details:first-child{border-top:0}
:root .zb .dt-video video{max-height:360px;width:auto;max-width:100%;border-radius:var(--zs-r)}

/* ---------- Calendario: el «+» de cada hueco aparece al pasar el ratón o con el foco ---------- */
@media(hover:hover){
  :root .zb .cg-mas{opacity:0;transition:opacity var(--f-t2) var(--f-curva)}
  :root .zb .cg-mas:hover,
:root .zb .cg-mas:focus-visible{opacity:1}
}
:root .zb .ag-nav a,
:root .zb .cz-hoy{border-radius:var(--zs-r-s)}

/* ---------- armazón: barra lateral con scroll propio, cabecera del móvil más fina ---------- */
@media(min-width:900px){
  :root .zb .pl-lat{overflow-y:auto;overscroll-behavior:contain}
  :root .zb .pl-nav a{min-height:36px}
}
@media(max-width:899px){
  :root .zb header.top .lang-switch{border:1px solid var(--zs-control);border-radius:var(--zs-r);background:var(--zs-tarjeta)}
  :root .zb header.top .lang-switch a{min-height:44px;font-size:var(--zs-t-s)}
  :root .zb header.top .lang-switch a[aria-current="true"]{background:var(--zs-tinta);color:#fff}
  :root .zb .pl-cont>section.p-sec:not(.cv)>h2:first-child,
:root .zb .zb-cab h1,
:root .zb .p-sec .ag-cab>h2,
:root .zb .p-rs .p-rs-cab h2{font-size:21px}
  :root .zb .p-sec,
:root .zb .cx-t,
:root .zb .p-valor,
:root .zb .cal-ficha,
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.p-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>ul.p-cl-lista,
:root .zb .pl-cont>section.p-sec:not(.cv)>dl,
:root .zb .pl-cont>section.p-sec:not(.cv)>.p-edit,
:root .zb .pl-cont>section.p-sec:not(.cv)>.pp,
:root .zb .pl-cont>section.p-sec:not(.cv)>fieldset,
:root .zb .pl-cont>section.p-sec:not(.cv)>form:not(.p-cl-buscar):not(.p-salir):not(.dt-sel){
    padding-left:var(--zs-4);padding-right:var(--zs-4)}
}
@media(max-width:640px){
  :root body.zb{--zs-t-xs:13px;--zs-t-s:13px;--zs-t:16px;--zs-t-m:16px;font-size:16px}
}

/* ---------- Resultados: el selector de periodo como las pestañas de Llamadas; los punteados del mapa, más finos ---------- */
:root .zb .p-rs-per{background:var(--zs-tarjeta);border:1px solid var(--zs-linea);border-radius:var(--zs-r);padding:3px;gap:2px;box-shadow:var(--zs-sombra)}
:root .zb .p-rs-per a{color:var(--zs-tinta);min-height:36px;border-radius:var(--zs-r-s);font-weight:600}
@media(hover:hover) and (pointer:fine){:root .zb .p-rs-per a:hover{background:var(--zs-hueco)}}
:root .zb .p-rs-per a[aria-current="true"]{background:var(--zs-tinta);color:#fff}
@media(max-width:899px){:root .zb .p-rs-per a,
:root .zb .zb-tabs a,
:root .zb .pp-indice a{min-height:44px}}
/* formularios: aire entre «Guardar» y «Volver sin cambios» */
:root .zb .ag-form form .btn+.btn,
:root .zb .ag-form form .btn+a.btn{margin-left:var(--zs-2)}
/* Inicio de un negocio recién dado de alta: «Elena está lista para tu primera llamada» ya lo dice; la franja «0 citas» sobra */
:root .zb .zb-inicio:has(.zb-listo) .p-valor[data-citas="0"]{display:none}

/* =====================================================================================================================
   DIRECCIÓN A17 (19 oct 2026): el borrador de Pedro «Zolteva CRM Dashboard Overview». Un CRM claro: verde oscuro, verde,
   beis y rosa (los cuatro círculos del borrador: #034742, #388669, #DDDAD4, #FEB9BE), fondo claro, tarjetas blancas,
   iconos en círculo de color suave, barra de arriba con la marca «Zolteva» y su lema, barra lateral clara con «Servicio
   activo» abajo. Va detrás del sistema del panel y le cambia las fichas: los componentes son los mismos.
   ===================================================================================================================== */
:root body.zb{
  --a-verde-osc:#034742; --a-verde:#388669; --a-beis:#dddad4; --a-rosa:#feb9be;
  --a-fondo:#f6f8f7; --a-linea:#e5eae8; --a-tinta:#0f2a28; --a-texto:#2c3d3a; --a-mut:#5b6a67;
  --a-verde-tinte:#e4f2eb; --a-verde-texto:#1b6a4c; --a-rosa-tinte:#fff5f6; --a-rosa-linea:#fbdde0; --a-rojo:#a81f33; --a-rojo-tinte:#fde8ea;
  --a-ambar-tinte:#fcf0db; --a-ambar:#8a5400; --a-azul-tinte:#e7f0fa; --a-azul:#2a5d96;
  --zs-fondo:var(--a-fondo); --zs-tarjeta:#fff; --zs-hueco:#f8faf9; --zs-linea:var(--a-linea); --zs-linea-2:#eef2f0; --zs-control:#cfd8d5;
  --zs-tinta:var(--a-tinta); --zs-mut:var(--a-mut); --zs-acento:var(--a-verde-osc); --zs-acento-texto:var(--a-verde-osc); --zs-foco:var(--a-verde);
  --zs-bien:var(--a-verde-texto); --zs-bien-fondo:var(--a-verde-tinte); --zs-ambar:var(--a-ambar); --zs-ambar-fondo:var(--a-ambar-tinte);
  --zs-mal:var(--a-rojo); --zs-mal-fondo:var(--a-rojo-tinte); --zs-tinte:var(--a-verde-tinte);
  --zs-r-s:8px; --zs-r:10px; --zs-r-l:14px; --zs-sombra:0 1px 2px rgba(15,42,40,.04),0 2px 8px rgba(15,42,40,.04);
  --zb-lat:#fff; --zb-lat-tinta:var(--a-texto); --zb-lat-mut:var(--a-mut); --zb-lat-linea:var(--a-linea); --zb-lat-on:var(--a-verde-tinte); --zb-lat-carta:#fff;
  --naranja:var(--a-verde-osc); --negro:var(--a-tinta);
  background:var(--a-fondo); color:var(--a-texto);
}
:root .zb h1,:root .zb h2,:root .zb h3{color:var(--a-tinta)}

/* ---------- botones: el principal, verde oscuro con letra blanca ---------- */
:root .zb .btn{background:var(--a-verde-osc);color:#fff;border-color:transparent}
@media(hover:hover) and (pointer:fine){:root .zb .btn:hover{background:#0a5d55}}
:root .zb .btn.ghost,
:root .zb .btn.secondary{background:#fff;color:var(--a-tinta);border:1px solid var(--zs-control)}
:root .zb .v2-acc .btn:not(.ghost),
:root .zb .cx-t .btn:not(.ghost),
:root .zb #elena button.btn[value="anadir"],
:root .zb #contactos form[enctype] .btn:not(.ghost){color:var(--a-tinta)}

/* El color del panel, junto al idioma: en la barra de escritorio y en la cabecera del móvil. */
:root .zb .zc-tema{display:inline-flex;flex:none;border:1px solid var(--a-linea);border-radius:999px;overflow:hidden}
:root .zb .zc-tema button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:34px;height:36px;cursor:pointer;color:inherit}
:root .zb .zc-tema button[aria-pressed="true"]{background:var(--a-verde-osc);color:#fff}
:root .zb .zc-tema button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
:root .zb header.top .w{gap:8px}
/* ---------- barra de arriba (escritorio) ---------- */
:root .zb .zc-barra{display:none}
@media(min-width:900px){
  :root body.zb{padding-top:68px}
  :root .zb .zc-barra{display:flex;align-items:center;gap:24px;position:fixed;top:0;left:0;right:0;z-index:30;height:68px;padding:0 28px;background:#fff;border-bottom:1px solid var(--a-linea)}
  :root .zb .zc-marca{font-weight:700;font-size:30px;letter-spacing:-.035em;color:var(--a-verde-osc);width:192px;flex:none}
  :root .zb .zc-lema{color:var(--a-mut);font-size:15px}
  :root .zb .pl-fin .lang-switch{display:none}
  :root .zb .zc-barra .lang-switch{flex:none;border:1px solid var(--a-linea);border-radius:999px;overflow:hidden;background:none}
  :root .zb .zc-barra .lang-switch a{min-height:36px;min-width:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--a-tinta)}
  :root .zb .zc-barra .lang-switch a[aria-current="true"]{background:var(--a-verde-osc);color:#fff}
  :root .zb .zc-buscar{margin-left:auto;width:min(320px,30vw)}
  :root .zb .zc-buscar input{width:100%;min-height:40px;border:1px solid var(--a-linea);border-radius:10px;background:#fbfcfc;padding:0 12px 0 36px;font-size:14px;
    background-image:radial-gradient(circle at 17px 18px,transparent 5px,var(--a-mut) 5px,var(--a-mut) 6.4px,transparent 6.5px),linear-gradient(45deg,transparent 46%,var(--a-mut) 46%,var(--a-mut) 54%,transparent 54%);
    background-size:auto,6px 6px;background-position:0 0,22px 22px;background-repeat:no-repeat}
  :root .zb .zc-buscar input::placeholder{color:var(--a-mut)}
  :root .zb .zc-yo{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--a-tinta);font-size:14px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root .zb .zc-ini{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--a-verde-tinte);color:var(--a-verde-osc);font-weight:700;font-size:13px}
  /* la barra lateral, clara, debajo de la barra de arriba */
  :root .zb .pl-lat{top:68px;background:#fff;border-right:1px solid var(--a-linea);padding:20px 16px 16px}
  :root .zb .pl-marca{display:none}
  :root .zb .pl-neg{display:none}
  :root .zb .pl-nav a{color:var(--a-texto);font-weight:500;min-height:44px;border-radius:10px;padding:0 12px}
  :root .zb .pl-nav a svg{color:var(--a-verde-osc)}
  @media(hover:hover) and (pointer:fine){:root .zb .pl-nav a:hover{background:#f2f6f4}}
  :root .zb .pl-nav a[aria-current="page"]{background:var(--a-verde-tinte);color:var(--a-verde-osc);font-weight:600;box-shadow:none}
  :root .zb .pl-lat a:focus-visible{outline:2px solid var(--a-verde);outline-offset:1px}
  :root .zb .pl-lat button:focus-visible{outline:2px solid var(--a-verde);outline-offset:1px}
  :root .zb .zb-tarjeta{background:#fff;border:1px solid var(--a-linea);border-radius:14px;color:var(--a-texto);box-shadow:var(--zs-sombra)}
  :root .zb .zb-tarjeta .zb-et{color:var(--a-mut)}
  :root .zb .zb-tel{color:var(--a-tinta)}
  :root .zb .zb-copiar{border:1px solid var(--zs-control);color:var(--a-tinta);border-radius:8px}
  @media(hover:hover) and (pointer:fine){:root .zb .zb-copiar:hover{background:#f2f6f4}}
  :root .zb .zb-tarjeta hr{border-top-color:var(--a-linea)}
  :root .zb .zb-tarjeta .zb-barra{background:#edf1ef}
  :root .zb .pl-fin .lang-switch{border-color:var(--zs-control)}
  :root .zb .pl-fin .lang-switch a{color:var(--a-tinta)}
  :root .zb .pl-fin .lang-switch a[aria-current="true"]{background:var(--a-verde-osc);color:#fff}
  :root .zb .pl-fin button{border:1px solid var(--zs-control);color:var(--a-tinta)}
  @media(hover:hover) and (pointer:fine){:root .zb .pl-fin button:hover{background:#f2f6f4}}
  :root .zb .pl-lat{color:var(--a-texto)}
}
:root .zb .zc-servicio{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:10px;align-items:center;padding:0 0 8px;border-bottom:1px solid var(--a-linea);margin-bottom:6px}
:root .zb .zc-servicio::before{content:"";width:10px;height:10px;border-radius:50%;background:#17a05d;box-shadow:0 0 0 3px rgba(23,160,93,.15);grid-row:span 2}
:root .zb .zc-servicio b{color:var(--a-tinta);font-weight:600;font-size:14px}
:root .zb .zc-servicio small{color:var(--a-mut);font-size:12.5px}
:root .zb .zc-servicio.zc-pausa::before{background:var(--a-beis);box-shadow:none}
:root .zb .pl-n{background:var(--a-rojo-tinte);color:var(--a-rojo);border-radius:999px;font-family:var(--zb-sans)}

/* ---------- iconos en círculo de color suave ---------- */
:root .zb .zc-ico{display:inline-grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--a-verde-tinte);color:var(--a-verde-osc)}
:root .zb .zc-ico.zc-mini{width:32px;height:32px}
:root .zb .zc-ico.zc-mini svg{width:16px;height:16px}
:root .zb .zc-devolver{background:var(--a-ambar-tinte);color:var(--a-ambar)}
:root .zb .zc-fuera{background:var(--a-azul-tinte);color:var(--a-azul)}
:root .zb .zc-recado{background:var(--a-ambar-tinte);color:var(--a-ambar)}
:root .zb .zc-contacto{background:#f1efeb;color:#5b5346}
:root .zb .zc-chev{display:inline-grid;place-items:center;color:var(--a-mut);margin-left:auto}
:root .zb .zc-chev svg{width:16px;height:16px}

/* ---------- Inicio: cabecera, cifras con variación ---------- */
:root .zb .zb-inicio .zb-cab,:root .zb .pl-cab .zb-cab{align-items:flex-end}
:root .zb .zb-cab h1{font-size:26px;font-weight:600;letter-spacing:-.02em}
:root .zb .zc-cab-der{text-align:right;display:grid;gap:4px;justify-items:end}
:root .zb .zc-cab-der .zb-ante{color:var(--a-mut);font-weight:500;font-size:14px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--zb-sans)}
:root .zb .zb-vivo{color:var(--a-verde-texto);font-size:14px}
:root .zb .zb-vivo::before{background:#17a05d;box-shadow:0 0 0 3px rgba(23,160,93,.15)}
:root .zb .zb-cifras{gap:16px;margin:0 0 20px}
:root .zb .zb-cifra{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico ico" "tit tit" "num pie";align-items:end;column-gap:12px;row-gap:6px;
  background:#fff;border:1px solid var(--a-linea);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--zs-sombra);color:var(--a-tinta);text-decoration:none;min-width:0}
@media(hover:hover) and (pointer:fine){:root .zb .zb-cifra:hover{border-color:#c9d6d1;background:#fff;transform:translateY(-1px)}}
:root .zb .zb-cifra .zc-ico{grid-area:ico;margin-bottom:6px;display:grid;place-items:center;text-transform:none;letter-spacing:0;font-size:0}
:root .zb .zb-cifra>span:not(.zc-ico){grid-area:tit;font-size:14px;font-weight:500;color:var(--a-texto);text-transform:none;letter-spacing:0;margin:0}
:root .zb .zb-cifra b{grid-area:num;font-family:var(--zb-sans);font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--a-tinta)}
:root .zb .zc-pie{grid-area:pie;justify-self:end;display:grid;justify-items:end;gap:2px;font-style:normal;text-align:right}
:root .zb .zc-pie small{font-size:12px;color:var(--a-mut)}
:root .zb .zc-var{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:12.5px;font-weight:600;background:#eef2f0;color:var(--a-mut)}
:root .zb .zc-var[data-var="sube"]{background:var(--a-verde-tinte);color:var(--a-verde-texto)}
:root .zb .zc-var[data-var="baja"]{background:#eef2f0;color:var(--a-mut)}
:root .zb .p-valor b+small{display:block;margin-top:4px}
:root .zb .p-valor b+small::before{content:none}
@media(min-width:760px){:root .zb .zb-cifras{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row}}

/* ---------- Inicio: columnas ---------- */
@media(min-width:1100px){:root .zb .zb-inicio .zb-cols{grid-template-columns:minmax(0,1fr) 340px;gap:20px}}
:root .zb .zb-inicio .p-sec{border-radius:16px;padding:20px 22px}
:root .zb .zb-ch h2{font-size:17px;font-weight:600}
:root .zb .zb-ch .p-enlace{color:var(--a-verde-osc);font-weight:600;text-decoration:none}
@media(hover:hover) and (pointer:fine){:root .zb .zb-ch .p-enlace:hover{text-decoration:underline}}
/* actividad reciente, en tabla */
:root .zb .zc-tabla-env{overflow-x:auto;margin:0 -4px}
:root .zb .zc-tabla{width:100%;border-collapse:collapse;font-size:14px}
:root .zb .zc-tabla th{text-align:left;font-weight:500;font-size:13px;color:var(--a-mut);padding:6px 8px 10px;border-bottom:1px solid var(--a-linea);white-space:nowrap}
:root .zb .zc-tabla td{padding:12px 8px;border-bottom:1px solid #eef2f0;vertical-align:middle}
:root .zb .zc-tabla tr:last-child td{border-bottom:0}
@media(hover:hover) and (pointer:fine){:root .zb .zc-tabla tbody tr:hover{background:#f8faf9}}
:root .zb .zc-tabla .zb-cuando{font-weight:500;color:var(--a-tinta);white-space:nowrap}
:root .zb .zc-tabla .zb-cuando small{display:block;color:var(--a-mut);font-weight:400;font-size:12.5px}
:root .zb .zc-quien{display:flex;align-items:center;gap:10px;min-width:170px}
:root .zb .zc-quien .zb-que b{white-space:nowrap}
:root .zb .zc-quien .zb-que b{display:block;font-weight:600;color:var(--a-tinta)}
:root .zb .zc-quien .zb-que small{display:block;color:var(--a-mut);font-size:13px}
:root .zb .zc-quien a{text-decoration:none;color:inherit}
@media(hover:hover) and (pointer:fine){:root .zb .zc-quien a:hover b{text-decoration:underline}}
:root .zb .zc-tipo{color:var(--a-texto);white-space:nowrap}
:root .zb .zc-tipo small{display:block;margin-top:3px}
:root .zb .zc-notas{color:var(--a-mut);font-size:13.5px;min-width:160px}
:root .zb .zc-notas .zb-n{white-space:nowrap}
/* próximas citas */
:root .zb [data-zb="citas"] .zb-filas>li{grid-template-columns:62px minmax(0,1fr);align-items:start;padding:12px 0}
:root .zb [data-zb="citas"] .zb-filas>li>[data-origen]{grid-column:2;justify-self:start;margin:4px 0 0}
:root .zb [data-zb="citas"] .zb-filas>li>.zb-cuando{grid-column:1}
:root .zb [data-zb="citas"] .zb-filas>li>.zb-cuando small{display:block;margin:0}
:root .zb [data-zb="citas"] .zb-cuando{font-size:14px;font-weight:600;color:var(--a-tinta)}
:root .zb [data-zb="citas"] .zb-cuando small{font-weight:400;color:var(--a-mut)}
:root .zb [data-zb="citas"] .zb-que b{font-weight:600;color:var(--a-tinta)}
:root .zb .zb-origen[data-origen]{background:var(--a-verde-tinte);border:0;color:var(--a-verde-texto);min-height:24px;padding:0 10px 0 3px;font-size:12px}
:root .zb .zb-origen[data-origen="panel"]{background:#f1efeb;color:#5b5346;padding-left:10px}
/* por devolver llamada: la tarjeta rosa */
:root .zb .p-sec.zc-rosa{background:var(--a-rosa-tinte);border-color:var(--a-rosa-linea)}
:root .zb .zc-rosa .zb-filas>li{display:block;padding:0;border-top-color:var(--a-rosa-linea)}
:root .zb .zc-rosa .zb-filas>li>a{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;grid-template-areas:"ico que urg chev" "ico cuando urg chev";column-gap:10px;align-items:center;padding:10px 0;text-decoration:none;color:inherit;min-height:44px}
:root .zb .zc-rosa .zb-filas>li>a .zc-ico{grid-area:ico}
:root .zb .zc-rosa .zb-filas>li>a .zb-que{grid-area:que}
:root .zb .zc-rosa .zb-filas>li>a .zb-cuando{grid-area:cuando}
:root .zb .zc-rosa .zb-filas>li>a .p-urg{grid-area:urg}
:root .zb .zc-rosa .zb-filas>li>a .zc-chev{grid-area:chev}
:root .zb .zc-rosa .zc-ico{background:var(--a-rojo-tinte);color:var(--a-rojo)}
:root .zb .zc-rosa .zb-cuando{font-size:12.5px;color:var(--a-mut);white-space:nowrap}
:root .zb .zc-rosa .zb-que b{display:block;font-weight:600;color:var(--a-tinta)}
:root .zb .zc-rosa .zb-que small{display:block;color:var(--a-mut);font-size:13px}
@media(hover:hover) and (pointer:fine){:root .zb .zc-rosa a:hover .zb-que b{text-decoration:underline}}
:root .zb .zc-rosa .p-vacio{background:#fff;box-shadow:inset 0 0 0 1px var(--a-rosa-linea)}
/* abajo: llamadas por hora, el ciclo y la mejora de plan */
:root .zb .zc-abajo{display:grid;gap:20px;margin:20px 0 0}
@media(min-width:1100px){:root .zb .zc-abajo{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}}
:root .zb .zc-abajo>.p-sec{margin:0}
:root .zb .zc-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0 0 12px;color:var(--a-mut);font-size:14px}
:root .zb .zc-total b{font-size:30px;font-weight:600;color:var(--a-tinta);letter-spacing:-.03em}
:root .zb .zc-total small{font-size:12px}
:root .zb .zc-barras{display:flex;align-items:flex-end;gap:4px;height:150px;padding:0 0 22px;border-bottom:1px solid var(--a-linea);position:relative}
:root .zb .zc-hb{flex:1 1 0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
:root .zb .zc-hb i{display:block;width:min(14px,70%);height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:var(--a-verde)}
:root .zb .zc-hb.zc-ahora i{background:var(--a-verde-osc)}
:root .zb .zc-hb small{position:absolute;bottom:-20px;font-size:11.5px;color:var(--a-mut);white-space:nowrap}
:root .zb .zc-ley{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--a-mut);margin:26px 0 0}
:root .zb .zc-pt{width:10px;height:10px;border-radius:50%;background:var(--a-verde)}
:root .zb .zc-desde{color:var(--a-mut);font-size:13px;margin:-6px 0 6px}
:root .zb .zc-ciclo .zb-filas>li{display:block;padding:0}
:root .zb .zc-ciclo .zb-filas>li>a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;text-decoration:none;color:var(--a-texto);min-height:44px}
:root .zb .zc-ciclo .zb-filas b{font-size:18px;font-weight:600;color:var(--a-tinta)}
@media(hover:hover) and (pointer:fine){:root .zb .zc-ciclo a:hover span:not(.zc-ico){text-decoration:underline}}
:root .zb .zb-inicio .p-sec.zc-mejora{position:relative;overflow:hidden;background:#f2f0ec;border-color:#e6e2da;display:block;min-height:230px;padding-top:118px}
:root .zb .zc-mejora h2{font-size:22px;font-weight:600;margin:0 0 6px;position:relative}
:root .zb .zc-mejora p{color:var(--a-texto);margin:0 0 14px;max-width:32ch;position:relative}
:root .zb .zc-mejora .btn{position:relative;display:inline-flex;width:auto;height:auto}
:root .zb .zc-arte{position:absolute;inset:0;pointer-events:none}
:root .zb .zc-arte i{position:absolute;border-radius:50%}
:root .zb .zc-arte i:nth-child(1){width:150px;height:150px;right:-40px;top:-70px;background:var(--a-verde-osc)}
:root .zb .zc-arte i:nth-child(2){width:90px;height:90px;right:84px;top:-36px;background:var(--a-verde)}
:root .zb .zc-arte i:nth-child(3){width:54px;height:54px;right:28px;top:52px;background:var(--a-rosa)}
:root .zb .zc-arte i:nth-child(4){width:34px;height:34px;right:150px;top:56px;background:var(--a-beis)}
:root .zb .zc-arte i:nth-child(5){width:14px;height:14px;right:112px;top:62px;background:#fff}
/* estado vacío del recién llegado */
:root .zb .zb-listo{display:flex;gap:16px;align-items:flex-start;border-radius:16px;padding:22px}
:root .zb .zb-listo h2{font-size:18px;margin:2px 0 6px}

/* ---------- el resto del panel, con las mismas fichas ---------- */
:root .zb .p-res.cita{background:var(--a-verde-tinte);color:var(--a-verde-texto)}
:root .zb .p-res.recado{background:var(--a-ambar-tinte);color:var(--a-ambar)}
:root .zb .p-res.sin_cita{background:#f1efeb;color:#5b5346;box-shadow:none}
:root .zb .zb-tabs{border-radius:12px;background:#eef2f0;border:0;box-shadow:none;padding:4px}
:root .zb .zb-tabs a{border-radius:9px;color:var(--a-texto)}
:root .zb .zb-tabs a[aria-current="true"]{background:#fff;color:var(--a-verde-osc);box-shadow:0 1px 2px rgba(15,42,40,.12)}
:root .zb .zb-tabs a[aria-current="true"] .zb-n{color:var(--a-verde-osc)}
:root .zb .p-rs-per{background:#eef2f0;border:0;box-shadow:none}
:root .zb .p-rs-per a[aria-current="true"]{background:#fff;color:var(--a-verde-osc);box-shadow:0 1px 2px rgba(15,42,40,.12)}
:root .zb .ag-nav a[aria-current="page"]{background:var(--a-verde-osc);border-color:var(--a-verde-osc);color:#fff}
:root .zb .zb-llamadas-lista a[aria-current="true"]{background:var(--a-verde-tinte);box-shadow:inset 3px 0 0 var(--a-verde-osc)}
:root .zb .zb-llamadas-lista li:target>*{box-shadow:inset 3px 0 0 var(--a-verde-osc)}
:root .zb .cv-e p{background:var(--a-verde-tinte);border-color:#cfe5da}
:root .zb .chip:has(input:checked){border-color:var(--a-verde-osc);background:var(--a-verde-tinte);box-shadow:inset 0 0 0 1px var(--a-verde-osc)}
:root .zb .pp-plan.tuyo{border-color:var(--a-verde-osc);box-shadow:inset 0 0 0 1px var(--a-verde-osc);background:#f6fbf8}
:root .zb .pp-marca{background:var(--a-verde-osc);color:#fff}
:root .zb .zb-barra i{background:var(--a-verde)}
:root .zb .p-franja,
:root .zb .zb-aviso{background:#fff8ec;border-left-color:#d99a2b}
:root .zb .p-franja.ok{background:var(--a-verde-tinte);border-left-color:var(--a-verde)}
:root .zb .zb-aviso .btn{background:var(--a-verde-osc);color:#fff}
:root .zb .zb-ante{color:var(--a-verde-osc)}
:root .zb .cm td.cm-hoy a{border-color:var(--a-verde-osc)}

/* ---------- móvil: como las vistas del borrador ---------- */
@media(max-width:899px){
  :root .zb header.top{background:#fff;border-bottom:1px solid var(--a-linea);padding:8px 0}
  :root .zb header.top .marca{font-size:24px;font-weight:700;letter-spacing:-.035em;text-transform:capitalize;color:var(--a-verde-osc)}
  :root .zb header.top .marca::before{display:none}
  :root .zb header.top .marca small{display:none}
  :root .zb header.top .lang-switch a[aria-current="true"]{background:var(--a-verde-osc)}
  :root .zb .zb-cab h1{font-size:22px}
  :root .zb .zc-cab-der{text-align:left;justify-items:start}
  /* Inicio: las cifras, en lista */
  :root .zb .zb-cifras{display:block;background:#fff;border:1px solid var(--a-linea);border-radius:16px;padding:4px 16px;box-shadow:var(--zs-sombra)}
  :root .zb .zb-cifra{grid-template-columns:42px minmax(0,1fr) auto auto;grid-template-areas:"ico tit num pie";align-items:center;border:0;border-radius:0;box-shadow:none;padding:12px 0;border-top:1px solid #eef2f0}
  :root .zb .zb-cifra:first-child{border-top:0}
  @media(hover:hover) and (pointer:fine){:root .zb .zb-cifra:hover{transform:none}}
  :root .zb .zb-cifra .zc-ico{margin:0}
  :root .zb .zb-cifra b{font-size:20px;text-align:right}
  :root .zb .zc-pie small{display:none}
  :root .zb .zc-pie{min-width:58px}
  /* actividad: la tabla se lee como lista */
  :root .zb .zc-tabla thead{display:none}
  :root .zb .zc-tabla tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quien hora" "res res" "notas notas";gap:4px 10px;padding:10px 0;border-bottom:1px solid #eef2f0}
  :root .zb .zc-tabla td{border:0;padding:0}
  :root .zb .zc-tabla .zc-quien{grid-area:quien;min-width:0}
  :root .zb .zc-tabla .zb-cuando{grid-area:hora;text-align:right}
  :root .zb .zc-tabla td:nth-child(4){grid-area:res;padding-left:42px}
  :root .zb .zc-tabla .zc-tipo{display:none}
  :root .zb .zc-tabla .zc-notas{grid-area:notas;padding-left:42px;min-width:0}
  :root .zb .zc-tabla-env{overflow:visible;margin:0}
    /* barra inferior clara */
  :root .zb .pl-inf{background:#fff;border-top:1px solid var(--a-linea);box-shadow:0 -2px 10px rgba(15,42,40,.05)}
  :root .zb .pl-inf a,:root .zb .pl-inf summary{color:var(--a-mut)}
  :root .zb .pl-inf a[aria-current="page"],:root .zb .pl-inf summary.activo{color:var(--a-verde-osc);box-shadow:none;font-weight:700}
  :root .zb .pl-inf a:focus-visible,:root .zb .pl-inf summary:focus-visible{outline:2px solid var(--a-verde);outline-offset:-4px}
}
/* hoy, en el calendario: verde oscuro con letra blanca */
:root .zb .cg-hoy .cg-cab a b,
:root .zb .cz-d.cz-es-hoy b,
:root .zb .cm td.cm-hoy .cm-n{background:var(--a-verde-osc);color:#fff}
/* fichas heredadas de la piel anterior, al verde */
:root body.zb{--z-tinte:var(--a-verde-tinte);--z-acento:var(--a-verde-osc);--crema:#fff;--crema-osc:#edf1ef;--z-papel:#fff;--z-linea:var(--a-linea);--z-mut:var(--a-mut);--f-tinte:var(--a-verde-tinte)}
:root .zb .cal-nota{background:#f4f8f6;border-left-color:var(--a-verde)}
:root .zb .pp-tabla .tuyo{background:var(--a-verde-tinte)}
/* Calendario y Citas: Semana / Día / Mes / Lista en un selector segmentado, como Hoy / Semana / Calendario del borrador */
:root .zb .cal .cal-barra>.ag-nav:first-child{display:inline-flex;gap:2px;background:#eef2f0;border-radius:12px;padding:4px;border:0}
:root .zb .cal .cal-barra>.ag-nav:first-child a{border:0;background:none;border-radius:9px;color:var(--a-texto);min-height:44px}
:root .zb .cal .cal-barra>.ag-nav:first-child a[aria-current="page"]{background:#fff;color:var(--a-verde-osc);box-shadow:0 1px 2px rgba(15,42,40,.12)}
:root .zb .p-an-dinero{background:var(--a-verde-osc)}

/* ---------- «Entrar» (sin sesión) con la piel A17: body.zb.zb-entrar ---------- */
:root body.zb.zb-entrar{padding:0;background:var(--a-fondo)}
:root .zb.zb-entrar header.top{background:transparent;border:0}
:root .zb.zb-entrar header.top .marca{visibility:hidden}
:root .zb.zb-entrar main{padding:8px 0 48px}
:root .zb.zb-entrar .zd-izq{background:#fff;border:1px solid var(--a-linea);border-radius:20px;padding:32px;box-shadow:var(--zs-sombra)}
:root .zb.zb-entrar .zd-logo{display:grid;gap:2px;margin:0 0 20px}
:root .zb.zb-entrar .zd-logo::before{display:none}
:root .zb.zb-entrar .zd-logo span{font-size:34px;font-weight:700;letter-spacing:-.035em;color:var(--a-verde-osc);text-transform:none}
:root .zb.zb-entrar .zd-logo small{font-size:15px;color:var(--a-mut);font-weight:500}
:root .zb.zb-entrar .p-entrar h1{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--a-tinta);font-family:var(--zb-sans)}
:root .zb.zb-entrar .p-entrar>p,:root .zb.zb-entrar .zd-izq>p{color:var(--a-mut)}
:root .zb.zb-entrar .btn{width:100%;min-height:48px;border-radius:12px;font-size:15px}
:root .zb.zb-entrar .p-social{background:#fff;color:var(--a-tinta);border:1px solid var(--zs-control)}
:root .zb.zb-entrar a{color:var(--a-verde-osc)}
:root .zb.zb-entrar .zd-izq a:not(.btn){font-weight:600}
:root .zb.zb-entrar .zd-demo{background:linear-gradient(160deg,#034742 0%,#0a5a52 100%);border-radius:24px;color:#fff;box-shadow:none}
:root .zb.zb-entrar .zd-rotulo{background:rgba(255,255,255,.14);color:#fff;border:0}
:root .zb.zb-entrar .zd-llamada{background:#fff;color:var(--a-tinta);box-shadow:0 10px 30px rgba(0,0,0,.18)}
:root .zb.zb-entrar .zd-pulso{background:#17a05d}
:root .zb.zb-entrar .zd-b{border-radius:14px}
:root .zb.zb-entrar .zd-elena{background:var(--a-verde-tinte);color:var(--a-tinta)}
:root .zb.zb-entrar .zd-cli{background:#fff;color:var(--a-tinta)}
:root .zb.zb-entrar .zd-cal{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff}
:root .zb.zb-entrar .zd-cal-t{color:var(--a-rosa)}
:root .zb.zb-entrar .zd-hora{color:#d7e8e1;border-color:rgba(255,255,255,.16)}
:root .zb.zb-entrar .zd-hora-cita em{background:var(--a-rosa);color:var(--a-tinta)}
:root .zb.zb-entrar .zd-demo::after{background:rgba(255,255,255,.06)}
:root .zb.zb-entrar .zd-logo span::before{display:none}
:root .zb.zb-entrar .lang-switch{border:1px solid var(--zs-control);border-radius:10px;background:#fff;overflow:hidden}
:root .zb.zb-entrar .lang-switch a{color:var(--a-tinta);background:#fff}
:root .zb.zb-entrar .lang-switch a[aria-current="true"]{background:var(--a-verde-osc);color:#fff}
:root .zb header.top .lang-switch a[aria-current="true"]{color:#fff}
/* la lista del calendario conserva el hueco de su barra de color (la regla de filas le quitaba el margen izquierdo) */
:root .zb .cal-lista.p-lista li,:root .zb .ag-lista li{padding-left:14px}
/* «Hoy» y «Próximas» (ZOLTEVA_PANEL_HOY, la tarjeta de panel_v2): la hora arriba y en grande, el día debajo; la nota, en una línea */
:root .zb [data-zb="citas"] [data-v2="cita"]>.zb-cuando{display:flex;flex-direction:column-reverse;justify-content:flex-end;font-size:12.5px;font-weight:400;color:var(--a-mut)}
:root .zb [data-zb="citas"] [data-v2="cita"]>.zb-cuando small{display:block;font-size:14px;font-weight:600;color:var(--a-tinta);margin:0}
:root .zb [data-zb="citas"] .zb-que small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
:root .zb [data-zb="citas"] .zb-que b{display:block}
:root .zb .v2-prox{font-size:13px;font-weight:600;color:var(--a-mut);text-transform:none;letter-spacing:0;margin:14px 0 2px}
:root .zb [data-zb="citas"] .p-vacio{padding:12px 14px;font-size:13.5px}
/* recién dado de alta: la mejora de plan es la única tarjeta de abajo; ocupa el ancho, en horizontal */
@media(min-width:1100px){
  :root .zb .zc-abajo>.zc-mejora:only-child{grid-column:1/-1;min-height:0;padding:28px 260px 28px 28px}
}
/* un solo «Guardar» (assets/guardar-todo.js): la barra de cambios sin guardar y los bloques con cambios */
:root .zb .zc-sin-guardar{position:sticky;bottom:12px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 0 0;padding:12px 16px;border-radius:14px;background:var(--a-verde-osc);color:#fff;box-shadow:0 10px 30px rgba(15,42,40,.25)}
:root .zb .zc-sin-guardar[hidden]{display:none}
:root .zb .zc-sin-guardar p{margin:0;flex:1 1 220px;font-weight:600;color:#fff}
:root .zb .zc-sin-guardar .btn{background:#fff;color:var(--a-verde-osc)}
@media(hover:hover) and (pointer:fine){:root .zb .zc-sin-guardar .btn:hover{background:#e4f2eb}}
:root .zb .zc-sin-guardar .zc-salir{color:#fff;font-weight:600}
:root .zb .zc-sin-guardar :focus-visible{outline:2px solid #fff;outline-offset:2px}
:root .zb .p-edit[data-sin-guardar]{box-shadow:inset 3px 0 0 #d99a2b,var(--zs-sombra)}
@media(max-width:899px){:root .zb .zc-sin-guardar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
/* Mi Elena · Servicios (A18): filas compactas; los rótulos, una vez arriba (cada campo lleva su aria-label) */
@media(min-width:900px){
  :root .zb .p-svcs li{grid-template-columns:minmax(0,1fr) 220px auto;gap:10px;padding:8px 0;align-items:end}
  :root .zb .p-svcs .p-svc-campos{display:grid;grid-template-columns:96px 120px;gap:10px}
  :root .zb .p-svcs li:not(:first-child) label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :root .zb .p-svcs input{min-height:40px}
  :root .zb .p-svcs .btn.ghost{min-height:40px}
}
:root .zb .zc-catalogo select{min-height:48px;font-size:16px}
:root .zb #servicios fieldset{max-width:640px}
@media(max-width:899px){
  :root .zb .p-svcs li{display:grid;grid-template-columns:minmax(0,1fr) 72px 88px;grid-template-areas:"nombre nombre nombre" "min precio quitar";gap:8px;padding:12px 0}
  :root .zb .p-svcs .p-svc-nombre{grid-area:nombre;margin:0}
  :root .zb .p-svcs .p-svc-campos{display:contents}
  :root .zb .p-svcs .p-svc-campos>div:first-child{grid-area:min}
  :root .zb .p-svcs .p-svc-campos>div:last-child{grid-area:precio}
  :root .zb .p-svcs li>.btn.ghost{grid-area:quitar;width:auto;min-height:44px;align-self:end;padding:0 10px}
  :root .zb .p-svcs li{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  :root .zb .p-svcs .p-svc-nombre label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :root .zb .p-svcs input{min-height:44px}
  :root .zb .p-svcs label{font-size:12px}
}

/* ---------- A18 rehecho (19 oct 2026): SUS servicios en un desplegable; la ficha del elegido debajo (registro/editar.py, _desplegable) ---------- */
:root .zb .zc-desplegable .zc-ficha{display:none}
:root .zb .zc-desplegable .zc-ficha.zc-visible{display:block}
:root .zb .zc-desplegable .zc-ficha:target{display:block}
:root .zb .zc-desplegable .zc-elige select{width:100%;max-width:520px;min-height:48px;font-size:16px}
:root .zb .zc-desplegable .zc-enlaces{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
:root .zb .zc-desplegable .zc-enlaces[hidden]{display:none}
:root .zb .zc-desplegable .zc-enlaces a{display:inline-flex;min-height:36px;align-items:center}
:root .zb .zc-desplegable .zc-resumen{margin:8px 0 0}
:root .zb .zc-desplegable .p-svcs.zc-fichas{margin:0}
:root .zb .zc-desplegable .p-svcs.zc-fichas>li.zc-ficha.zc-visible{display:block;border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);padding:16px;margin:12px 0 0;max-width:640px}
:root .zb .zc-desplegable .p-svcs.zc-fichas>li.zc-ficha:target{display:block;border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);padding:16px;margin:12px 0 0;max-width:640px}
:root .zb .zc-desplegable form.zc-ficha{border:1px solid var(--zs-linea);border-radius:var(--zs-r-l);padding:16px;margin:12px 0 0;max-width:640px;background:var(--zs-tarjeta)}
:root .zb .zc-desplegable .zc-ficha h4{font-size:17px;font-weight:600;margin:0 0 10px;color:var(--zs-tinta)}
:root .zb .zc-desplegable .zc-ficha .p-svc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 10px}
:root .zb .zc-desplegable .zc-ficha label{position:static;width:auto;height:auto;clip:auto;overflow:visible}
:root .zb .zc-desplegable .zc-ofrezco{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15px;margin:4px 0 8px}
:root .zb .zc-desplegable .zc-ofrezco input{width:22px;height:22px;accent-color:var(--a-verde-osc)}
/* los que el catálogo trae y ofrece: «Quitar» solo al desmarcar «Lo ofrezco»; los propios, siempre */
:root .zb .zc-desplegable li.zc-ficha:not(.zc-propio):not(.zc-dejar) button[value^="quitar"]{display:none}
:root .zb .zc-desplegable li.zc-ficha.zc-propio .zc-ofrezco{display:none}
:root .zb .zc-desplegable [data-ninguno][hidden]{display:none}
:root .zb .zc-desplegable form>.btn[value="guardar"]{margin-top:12px}
@media(min-width:900px){
  :root .zb .zc-desplegable .p-svcs.zc-fichas>li.zc-ficha{grid-template-columns:none}
}
@media(max-width:899px){
  :root .zb .zc-desplegable .p-svcs.zc-fichas>li.zc-ficha{grid-template-columns:none;grid-template-areas:none}
  :root .zb .zc-desplegable .p-svcs.zc-fichas>li.zc-ficha.zc-visible{display:block}
  :root .zb .zc-desplegable .p-svcs.zc-fichas .p-svc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :root .zb .zc-desplegable .p-svcs.zc-fichas .p-svc-campos>div{grid-area:auto}
  :root .zb .zc-desplegable .p-svcs.zc-fichas .p-svc-nombre label{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  :root .zb .zc-desplegable .p-svcs.zc-fichas li>.btn.ghost{width:100%}
}

/* =====================================================================================================================
   MI ELENA = la ficha de una empleada (19 oct 2026; capturas_panel_pro/mi_elena/PLAN.md; registro/corporativo.py,
   vestir_elena; assets/mi-elena.js). Una sola pieza llamativa, la ficha; lo demás, una superficie de trabajo sobria.
   ===================================================================================================================== */
:root .zb section.p-elena{background:none;border:0;box-shadow:none;padding:0}
/* la ficha */
:root .zb .zc-elena{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 24px;align-items:center;background:#034742;color:#fff;border-radius:20px;padding:24px 28px;margin:0 0 20px}
:root .zb .zc-retrato{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#feb9be radial-gradient(circle at 34% 30%,#ffd7da 0 22%,transparent 23%);color:#034742;font-size:38px;font-weight:700;box-shadow:0 0 0 6px rgba(254,185,190,.18)}
:root .zb .zc-elena h1{color:#fff;font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.1}
:root .zb .zc-elena p{margin:0}
:root .zb .zc-elena-voz{display:flex;align-items:center;gap:10px;color:#d7ebe3;font-size:15px;margin-top:6px}
:root .zb .zc-elena-voz .voz-oir{width:36px;height:36px;border-radius:50%;background:#fff;border:0;display:inline-grid;place-items:center;cursor:pointer;flex:none}
:root .zb .zc-elena-voz .voz-oir:focus-visible{outline:2px solid #feb9be;outline-offset:2px}
:root .zb .zc-elena-idioma{color:#d7ebe3;font-size:15px}
:root .zb .zc-elena-linea{display:grid;justify-items:end;gap:4px;text-align:right}
:root .zb .zc-elena-num{font-size:20px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
:root .zb .zc-elena-vivo{display:inline-flex;align-items:center;gap:8px;color:#bff0d2;font-weight:600;font-size:14px}
:root .zb .zc-elena-vivo::before{content:"";width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25)}
:root .zb .zc-elena-enl{display:flex;gap:14px;font-size:13.5px;margin-top:4px}
:root .zb .zc-elena-enl a{color:#fff;text-underline-offset:3px}
:root .zb .zc-elena a:focus-visible{outline:2px solid #feb9be;outline-offset:2px}
/* subnavegación y superficie de trabajo */
:root .zb .zc-elena-cuerpo{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
:root .zb .zc-sub{display:grid;gap:2px;position:sticky;top:84px}
:root .zb .zc-sub a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--a-texto);text-decoration:none;font-weight:500}
@media(hover:hover) and (pointer:fine){:root .zb .zc-sub a:hover{background:#eef2f0}}
:root .zb .zc-sub a[aria-current="true"]{background:#fff;color:#034742;font-weight:600;box-shadow:inset 3px 0 0 #388669,0 1px 2px rgba(15,42,40,.06)}
:root .zb .zc-sub-cont{min-width:0}
:root .zb .zc-sub-cont>.p-edit{background:#fff;border:1px solid var(--a-linea);border-radius:16px;padding:22px 24px;margin:0 0 16px;box-shadow:none}
:root .zb .zc-sub-cont>.p-edit>h3{font-size:20px;font-weight:600;margin:0 0 14px;color:var(--a-tinta)}
/* con JavaScript: una sección cada vez; sin él, todas */
:root .zb.zc-js-elena [data-elena] [data-sec]{display:none}
:root .zb.zc-js-elena [data-elena][data-ver="servicios"] [data-sec~="servicios"]{display:block}
:root .zb.zc-js-elena [data-elena][data-ver="horario"] [data-sec~="horario"]{display:block}
:root .zb.zc-js-elena [data-elena][data-ver="voz"] [data-sec~="voz"]{display:block}
:root .zb.zc-js-elena [data-elena][data-ver="como"] [data-sec~="como"]{display:block}
/* con JavaScript, el guardado va en la barra única: fuera los «Guardar …» sueltos y los títulos repetidos */
:root .zb.zc-js-elena [data-elena] form>.btn[value="guardar"]{display:none}
:root .zb.zc-js-elena [data-elena] #elena-opciones>h3{display:none}
:root .zb.zc-js-elena [data-elena][data-ver="voz"] #elena-opciones::before{content:none}
:root .zb #elena-opciones fieldset{border:0;background:none;padding:0;margin:0 0 18px;width:auto;max-width:none}
:root .zb #elena-opciones fieldset>legend{font-size:20px;font-weight:600;color:var(--a-tinta);margin:0 0 10px;padding:0;float:none}
:root .zb #elena-opciones fieldset[data-sec="como"]+fieldset[data-sec="como"]>legend{font-size:16px}
:root .zb #elena-opciones fieldset[data-sec="como"]{border-top:1px solid #eef2f0;padding-top:14px}
:root .zb #elena-opciones fieldset#elena-como{border-top:0;padding-top:0}
/* «?» de ayuda */
:root .zb .zc-ayuda{display:inline-block;margin:6px 0 0}
:root .zb .zc-ayuda>summary{list-style:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--zs-control);color:var(--a-texto);font-weight:700;font-size:14px}
:root .zb .zc-ayuda>summary{box-sizing:border-box;min-width:30px;min-height:30px;width:30px;height:30px;padding:0;position:relative}
:root .zb .zc-ayuda>summary::after{content:"";position:absolute;inset:-7px}
:root .zb .zc-ayuda>summary::-webkit-details-marker{display:none}
:root .zb .zc-ayuda>summary:focus-visible{outline:2px solid var(--a-verde);outline-offset:2px}
:root .zb .zc-ayuda[open]>summary{background:#eef2f0}
:root .zb .zc-ayuda>p{margin:8px 0 0;max-width:60ch}
/* horario: la semana en barras sobre una regla de 6:00 a 22:00 */
:root .zb .zc-dia{display:grid;grid-template-columns:56px minmax(0,1fr) 120px;align-items:center;gap:14px;width:100%;min-height:48px;padding:6px 8px;border:0;border-bottom:1px solid #eef2f0;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--a-tinta)}
@media(hover:hover) and (pointer:fine){:root .zb .zc-dia:hover{background:#f6f8f7}}
:root .zb .zc-dia:focus-visible{outline:2px solid var(--a-verde);outline-offset:-2px;border-radius:8px}
:root .zb .zc-dia-nombre{font-weight:600}
:root .zb .zc-regla{position:relative;height:14px;border-radius:7px;background:repeating-linear-gradient(90deg,#eef2f0 0 calc(25% - 1px),#dfe6e3 calc(25% - 1px) 25%)}
:root .zb .zc-regla i{position:absolute;top:0;bottom:0;border-radius:7px;background:#388669}
:root .zb .zc-dia.zc-cerrado .zc-regla{background:#ebe8e3}
:root .zb .zc-dia-horas{font-variant-numeric:tabular-nums;font-size:14px;color:var(--a-texto);text-align:right}
:root .zb .zc-dia.zc-cerrado .zc-dia-horas{color:var(--a-mut)}
:root .zb .zc-dia[aria-expanded="true"]{background:#f6f8f7}
:root .zb .hour-row.zc-fila-oculta{display:none}
:root .zb.zc-js-elena #horario .p-horas{display:block}
:root .zb.zc-js-elena #horario .hour-row{padding:10px 8px 14px;background:#f6f8f7;border-bottom:1px solid #eef2f0}
/* voz: filtro */
:root .zb .zc-filtro{display:inline-flex;gap:2px;background:#eef2f0;border-radius:10px;padding:3px;margin:0 0 12px}
:root .zb .zc-filtro button{border:0;background:none;border-radius:8px;min-height:36px;padding:0 14px;font:inherit;font-weight:600;color:var(--a-texto);cursor:pointer}
:root .zb .zc-filtro button[aria-pressed="true"]{background:#fff;color:#034742;box-shadow:0 1px 2px rgba(15,42,40,.12)}
:root .zb .zc-filtro button:focus-visible{outline:2px solid var(--a-verde);outline-offset:1px}
:root .zb #elena-voz .chip-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
:root .zb #elena-voz .voz-opcion[hidden]{display:none}
/* la barra única de guardar, siempre en el sistema */
:root .zb .zc-sin-guardar .btn{min-width:120px;width:auto;flex:0 0 auto}
@media(max-width:899px){
  :root .zb .zc-elena{grid-template-columns:64px minmax(0,1fr);padding:18px;gap:4px 14px}
  :root .zb .zc-retrato{width:64px;height:64px;font-size:28px}
  :root .zb .zc-elena h1{font-size:24px}
  :root .zb .zc-elena-linea{grid-column:1/-1;justify-items:start;text-align:left;margin-top:8px}
  :root .zb .zc-elena-cuerpo{display:block}
  :root .zb .zc-sub{position:sticky;top:0;z-index:5;display:flex;overflow-x:auto;gap:4px;background:var(--a-fondo);padding:6px 0;margin:0 0 12px;scrollbar-width:none}
  :root .zb .zc-sub a{flex:none;background:#fff;border:1px solid var(--a-linea);border-radius:999px;padding:0 16px}
  :root .zb .zc-sub a[aria-current="true"]{background:#034742;color:#fff;box-shadow:none;border-color:#034742}
  :root .zb .zc-sub-cont>.p-edit{padding:18px 16px}
  :root .zb .zc-dia{grid-template-columns:44px minmax(0,1fr) 92px;gap:10px}
}
:root .zb.zc-js-elena [data-elena][data-ver="voz"] #elena-opciones fieldset[data-sec="voz"]{display:block}
:root .zb.zc-js-elena [data-elena][data-ver="como"] #elena-opciones fieldset[data-sec="como"]{display:block}
:root .zb .zc-sub-cont>.p-edit>h3{border-top:0;padding-top:0}
:root .zb #elena-opciones fieldset>legend{border:0;width:auto}
:root .zb #elena-opciones fieldset>legend::after{content:none}
:root .zb.zc-js-elena [data-elena] [data-ninguno]{display:none}
:root .zb #elena-opciones fieldset>legend{float:left;width:100%}
:root .zb #elena-opciones fieldset>legend+*{clear:both}

/* ---------- «Tu uso» y la tarjeta de minutos (corporativo.uso_minutos) ---------- */
:root .zb .zc-uso h2{font-size:15px;font-weight:600;color:var(--a-texto);margin:0 0 6px;text-transform:none;letter-spacing:0}
:root .zb .zc-uso-cifra{margin:0 0 10px}
:root .zb .zc-uso-cifra b{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--a-tinta);font-variant-numeric:tabular-nums}
:root .zb .zc-uso-barra{height:10px;border-radius:5px;background:#e9eeec;overflow:hidden;margin:0 0 10px}
:root .zb .zc-uso-barra i{display:block;height:100%;border-radius:5px;background:#388669}
:root .zb .zc-uso-frase{margin:0;color:var(--a-texto);font-size:15px}
:root .zb .zc-uso-nota{margin:4px 0 0;color:var(--a-mut);font-size:13px}
:root .zb .zc-uso-fig{margin:22px 0 0;padding:18px 0 0;border-top:1px solid #eef2f0}
:root .zb .zc-uso-fig figcaption{font-weight:600;color:var(--a-tinta);margin:0 0 12px}
:root .zb .zc-uso-lienzo{position:relative;height:180px;margin:0 0 6px}
:root .zb .zc-uso-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:root .zb .zc-uso-tope{stroke:#a8a296;stroke-width:1.5;stroke-dasharray:6 5}
:root .zb .zc-uso-hoy{stroke:#cfd8d5;stroke-width:1}
:root .zb .zc-uso-area{fill:#e4f2eb}
:root .zb .zc-uso-real{fill:none;stroke:#034742;stroke-width:2.5;stroke-linejoin:round}
:root .zb .zc-uso-proy{fill:none;stroke:#388669;stroke-width:2;stroke-dasharray:4 4}
:root .zb .zc-uso-tope-txt{position:absolute;right:0;transform:translateY(-120%);font-size:13px;font-weight:600;color:var(--a-texto);background:#fff;padding:0 4px}
:root .zb .zc-uso-eje{position:relative;display:flex;justify-content:space-between;font-size:13px;color:var(--a-mut);min-height:18px}
:root .zb .zc-uso-eje-hoy{position:absolute;transform:translateX(-50%);font-weight:600;color:var(--a-tinta)}
:root .zb .zc-uso-ritmo{margin:10px 0 6px;font-weight:600;color:var(--a-tinta)}
:root .zb .zc-uso-fig details summary{font-weight:600;color:var(--a-verde-osc);min-height:44px;display:inline-flex;align-items:center}
:root .zb .zc-uso-fig details summary:focus-visible{outline:2px solid var(--a-verde);outline-offset:2px}

/* =====================================================================================================================
   Una sola familia y fuera los sellos (19 oct 2026; revisión de diseño §4): sin monoespaciada ni serif para datos y frases,
   sin rótulos en mayúsculas espaciadas. Las cifras, en Plex Sans con cifras tabulares. (Los códigos que hay que copiar
   —2FA, webhook— siguen en su letra de código: son código.)
   ===================================================================================================================== */
:root body.zb{--zb-mono:var(--f-sans);--f-mono:var(--f-sans);--f-serif:var(--f-sans);font-variant-numeric:tabular-nums}
:root .zb main h1,:root .zb main h2,:root .zb main h3,:root .zb main h4,:root .zb main th,:root .zb main legend,:root .zb main small,:root .zb main span,:root .zb main b,:root .zb main em,:root .zb main p,:root .zb main figcaption,:root .zb main dt{text-transform:none;letter-spacing:normal;font-variant-caps:normal}
:root .zb .cv-e p,:root .zb .cal-nota blockquote{font-family:var(--f-sans);font-size:15px}
:root .zb .pl-n{font-family:var(--f-sans);font-weight:600;font-size:12px;padding:1px 8px;white-space:nowrap}

/* ---------- Inicio: llamadas del día ---------- */
:root .zb .zc-pocas{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
:root .zb .zc-pocas li{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid #eef2f0;padding:6px 0}
:root .zb .zc-pocas b{min-width:56px;color:var(--a-tinta)}
:root .zb .zc-hb b{font-size:12px;font-weight:600;color:var(--a-texto);margin:0 0 4px}
:root .zb .zc-hb small{position:static;margin-top:6px}
:root .zb .zc-barras{height:170px;padding:0;border-bottom:0}
:root .zb .zc-hb i{border-radius:5px 5px 0 0}

/* ---------- Inicio a 390: lo urgente primero (cifras, por devolver, hoy, 5 llamadas, el resto) ---------- */
@media(max-width:899px){
  :root .zb .zb-inicio .zb-cols{display:flex;flex-direction:column;gap:14px}
  :root .zb .zb-inicio .zb-col{display:contents}
  :root .zb .zb-inicio .zb-cols>.zb-col>*{width:100%;box-sizing:border-box;margin:0}
  :root .zb .zb-inicio [data-zb="devolver"]{order:1}
  :root .zb .zb-inicio [data-zb="citas"]{order:2}
  :root .zb .zb-inicio [data-zb="llamadas"]{order:3}
  :root .zb .zb-inicio [data-zb="minutos"]{order:4}
  :root .zb .zb-inicio .zc-tabla tbody tr:nth-child(n+6){display:none}
  :root .zb .zb-cifra{grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"ico tit num" "ico pie pie"}
  :root .zb .zb-cifra b{justify-self:end}
  :root .zb .zc-pie{grid-area:pie;justify-self:start;display:flex;gap:6px;align-items:center}
}
@media(min-width:1100px){:root .zb .zc-abajo{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}

/* ---------- Llamadas: por días, el nombre primero ---------- */
:root .zb .zb-llamadas-lista li.zc-dia-cab{display:flex;justify-content:space-between;align-items:baseline;padding:16px 12px 6px;border-top:0;font-size:13px;color:var(--a-mut)}
:root .zb .zb-llamadas-lista li.zc-dia-cab b{font-size:14px;font-weight:600;color:var(--a-tinta)}
:root .zb .zb-llamadas-lista li.zc-dia-cab:first-child{padding-top:4px}
:root .zb .zb-llamadas-lista li.zc-dia-cab+li{border-top:0}
:root .zb .zb-quien{font-family:var(--f-sans);font-weight:600;letter-spacing:0;color:var(--a-tinta);display:grid}
:root .zb .zb-quien small{font-weight:400;font-size:12.5px;color:var(--a-mut)}
:root .zb .zc-mas-dias{margin:12px 0 0;text-align:center}
/* Desvío: «Ver otra operadora» se lee como un desplegable (revisión de diseño, punto 10) */
:root .zb .dt-sel select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23034742' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;cursor:pointer}
:root .zb .zc-copiar-dias{display:inline-flex;align-items:center;min-height:44px;margin:0 0 10px;padding:0 14px;border:1px solid var(--a-linea);border-radius:10px;background:#fff;color:var(--a-verde-osc);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
@media(hover:hover) and (pointer:fine){:root .zb .zc-copiar-dias:hover{background:#f4f8f6}}
:root .zb .zc-datos dl{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px}
:root .zb .zc-datos dt{font-weight:600;color:var(--a-tinta)}
:root .zb .zc-datos dd{margin:0;overflow-wrap:anywhere}
@media(max-width:599px){:root .zb .zc-datos dl{grid-template-columns:1fr;gap:2px}:root .zb .zc-datos dd{margin-bottom:8px}}
:root .zb .p-avisos{margin:0 0 6px;padding:0;list-style:none}
:root .zb .p-avisos li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 6px}
:root .zb .p-avisos .p-av-activo,
:root .zb .p-avisos .p-av-no{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:12.5px;font-weight:600}
:root .zb .p-avisos .p-av-activo{background:#e4f2eb;color:#034742}
:root .zb .p-avisos .p-av-no{background:#eef1ef;color:#4b5a56}
:root .zb .p-an-nota{color:#4B5A56}
:root .zb .voz-opcion .chip-sub{display:block;font-size:12.5px;font-weight:500;color:#4b5a56;margin-top:2px}
:root .zb .zc-elena-voz b{font-weight:600}
/* Revisión v2.1, defecto 5: en el móvil la barra izquierda de 3 px con el radio se curvaba en arco y recortaba el texto. */
@media(max-width:520px){
  :root .zb .p-franja,
  :root .zb .zb-aviso{border-left:0;border:1px solid #f0d9a8;border-radius:12px;padding:12px}
  :root .zb .zb-aviso:not(.zb-corto){flex-wrap:wrap}
  :root .zb .zb-aviso:not(.zb-corto)>span{white-space:normal}
}
:root .zb .pp-plan.tuyo{order:0}     /* revisión v2.1, defecto 7: mismo orden de precios a 1440 y a 390 */
/* Revisión v2.1, defecto 8: las acciones de una llamada, en una segunda fila bajo el texto (el texto ya no se parte en tres líneas) */
:root .zb .zb-llamadas-lista li:has(.v2-acc)>a{grid-column:1/-1}
:root .zb .zb-llamadas-lista li>.v2-acc{grid-column:1/-1;padding:0 12px 10px;flex-wrap:wrap}
:root .zb .cv-m a{margin-left:8px}

/* ===================== v2.1b: la ficha oscura en cada página (capturas_panel_pro/v21b/PLAN.md) ===================== */
:root .zb .zc-ficha-osc,
:root .zb .zc-hoy{background:#034742;color:#fff;border-radius:20px;padding:26px 28px 22px;margin:0 0 22px;box-shadow:none;border:0}
:root .zb .zc-hoy-cab{display:flex;align-items:flex-start;gap:18px}
:root .zb .zc-hoy .zc-retrato{flex:none;width:56px;height:56px;font-size:24px}
:root .zb .zc-hoy-frase,
:root .zb .zc-ficha-osc .zc-frase{margin:4px 0 6px;font-size:28px;line-height:1.18;font-weight:600;letter-spacing:-.015em;color:#fff;max-width:40ch;font-variant-numeric:tabular-nums}
:root .zb .zc-hoy-sig,
:root .zb .zc-ficha-osc .zc-sig{margin:0;font-size:15.5px;line-height:1.45;color:#D5ECE1;max-width:64ch}
/* las cuatro cifras de siempre, como una franja de texto dentro de la ficha */
:root .zb .zc-hoy .zb-cifras{display:flex;flex-wrap:wrap;gap:0;margin:20px 0 0;border:0;border-top:1px solid rgba(213,236,225,.22);border-radius:0;padding:6px 0 0;background:none;box-shadow:none}
:root .zb .zc-hoy .zb-cifra{display:flex;align-items:baseline;gap:8px;flex-direction:row-reverse;justify-content:flex-end;background:none;border:0;border-radius:10px;box-shadow:none;
  padding:10px 22px 6px 0;margin:0;min-height:44px;color:#D5ECE1;text-decoration:none;grid-template-areas:none;border-top:0}
@media(hover:hover) and (pointer:fine){:root .zb .zc-hoy .zb-cifra:hover{background:none;color:#fff}}
:root .zb .zc-hoy .zb-cifra:focus-visible{outline:2px solid #fff;outline-offset:2px}
:root .zb .zc-hoy .zb-cifra .zc-ico,
:root .zb .zc-hoy .zb-cifra .zc-pie{display:none}
:root .zb .zc-hoy .zb-cifra b{font-size:22px;font-weight:600;color:#fff;line-height:1}
:root .zb .zc-hoy .zb-cifra>span{font-size:14.5px;font-weight:500;color:#D5ECE1}
@media(max-width:600px){
  :root .zb .zc-ficha-osc,:root .zb .zc-hoy{padding:20px 18px 16px;border-radius:18px}
  :root .zb .zc-hoy-frase,:root .zb .zc-ficha-osc .zc-frase{font-size:22px}
  :root .zb .zc-hoy .zc-retrato{width:44px;height:44px;font-size:19px}
  :root .zb .zc-hoy .zb-cifras{display:grid;grid-template-columns:1fr 1fr}
  :root .zb .zc-hoy .zb-cifra{padding-right:8px}
}
/* Inicio: bajo la ficha, nada de cajas sueltas; el valor de la semana es una frase, y las tarjetas de abajo, superficies sobrias */
:root .zb .zb-inicio .p-valor{background:none;border:0;box-shadow:none;padding:0 4px;margin:0 0 20px}
:root .zb .zb-inicio .p-valor b{font-size:17px;font-weight:600;color:#034742}
:root .zb .zb-inicio .zb-cols .p-sec,
:root .zb .zb-inicio .zc-abajo .p-sec{box-shadow:none;border:1px solid #e5eae8;border-radius:12px}
/* Llamadas: la ficha con la cuenta del ciclo y los filtros dentro */
:root .zb .zb-ll>.zc-ficha-osc{display:block}
:root .zb .zb-ll>.zc-ficha-osc .zb-tabs{margin:18px 0 0;background:rgba(255,255,255,.08);border:0;box-shadow:none;display:inline-flex;flex-wrap:wrap}
:root .zb .zb-ll>.zc-ficha-osc .zb-tabs a{color:#D5ECE1;background:none}
:root .zb .zb-ll>.zc-ficha-osc .zb-tabs a .zb-n{color:inherit}
:root .zb .zb-ll>.zc-ficha-osc .zb-tabs a[aria-current="true"]{background:#fff;color:#034742}
:root .zb .zb-ll>.zc-ficha-osc .zb-tabs a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* la lista: los días como separadores de texto, sin caja alrededor */
:root .zb .zb-ll .zb-lista{background:none;border:0;box-shadow:none;padding:0}
:root .zb .zb-ll .zb-lista>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}      /* lo dice la ficha */
:root .zb .zb-ll .zb-llamadas-lista{background:#fff;border:1px solid #e5eae8;border-radius:12px;padding:4px 0}
/* Desvío: «Tu operadora» es la ficha oscura; el código para activar, lo memorable */
:root .zb .dt-mio.zc-ficha-osc{padding:26px 28px}
:root .zb .dt-mio.zc-ficha-osc #dt-mio{color:#D5ECE1;font-size:15px;font-weight:500;margin:14px 0 6px}
:root .zb .dt-mio.zc-ficha-osc .p-franja{background:none;border:0;box-shadow:none;padding:0;margin:0;color:#fff;display:block}
:root .zb .dt-mio.zc-ficha-osc .p-franja>span{display:block;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:#fff;max-width:40ch}
:root .zb .dt-mio.zc-ficha-osc .p-franja small{display:block;margin-top:6px;font-size:15px;color:#D5ECE1}
:root .zb .dt-mio.zc-ficha-osc a{color:#fff}
:root .zb .dt-mio.zc-ficha-osc .dt-b{background:none;border:0;padding:0;color:#D5ECE1}
:root .zb .dt-mio.zc-ficha-osc .dt-b h4{display:none}
:root .zb .dt-mio.zc-ficha-osc .dt-b b,
:root .zb .dt-mio.zc-ficha-osc summary{color:#fff}
:root .zb .dt-mio.zc-ficha-osc .dt-b p,
:root .zb .dt-mio.zc-ficha-osc .dt-f,
:root .zb .dt-mio.zc-ficha-osc .dt-s,
:root .zb .dt-mio.zc-ficha-osc details p,
:root .zb .dt-mio.zc-ficha-osc details li{color:#D5ECE1}
:root .zb .dt-mio.zc-ficha-osc .dt-cod data{background:#fff;color:#034742;border:0;border-radius:10px}
:root .zb .dt-mio.zc-ficha-osc li[data-paso="on"] .dt-cod data{font-size:32px;font-weight:600;padding:8px 16px;letter-spacing:.01em}
:root .zb .dt-mio.zc-ficha-osc .btn.ghost{background:#fff;color:#034742;border-color:#fff}
:root .zb .dt-mio.zc-ficha-osc details{border-color:rgba(213,236,225,.25)}
:root .zb .dt-mio.zc-ficha-osc code{background:rgba(255,255,255,.12);color:#fff}
:root .zb .dt-mio.zc-ficha-osc .dt-ok{color:#fff}
:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-mio.zc-ficha-osc{background:#034742;color:#fff;border:0;border-radius:20px;box-shadow:none;padding:26px 28px}
@media(max-width:600px){:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-mio.zc-ficha-osc{padding:20px 18px}:root .zb .dt-mio.zc-ficha-osc li[data-paso="on"] .dt-cod data{font-size:24px}:root .zb .dt-mio.zc-ficha-osc .p-franja>span{font-size:21px}}
/* Resultados: la ficha con la frase del periodo, el selector y la franja de cifras */
:root .zb .p-rs-cab.zc-ficha-osc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px 24px}
:root .zb .p-rs-cab.zc-ficha-osc .zc-sig{font-size:14.5px}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-per{background:rgba(255,255,255,.08);border:0;box-shadow:none}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-per a{color:#D5ECE1}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-per a[aria-current="true"]{background:#fff;color:#034742}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-per a:focus-visible{outline:2px solid #fff;outline-offset:2px}
:root .zb .p-rs-cab.zc-ficha-osc .p-an-cifras{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0;margin:6px 0 0;border-top:1px solid rgba(213,236,225,.22);padding-top:8px}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-tarjeta{background:none;border:0;box-shadow:none;padding:10px 28px 4px 0;margin:0;min-width:0;display:grid;grid-template-areas:"num" "tit" "var";gap:2px}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-tarjeta b{grid-area:num;font-size:24px;font-weight:600;color:#fff;line-height:1.1}
:root .zb .p-rs-cab.zc-ficha-osc .p-rs-tarjeta h3{grid-area:tit;margin:0;font-size:14px;font-weight:500;color:#D5ECE1}
:root .zb .p-rs-cab.zc-ficha-osc .p-an-var{grid-area:var;margin:0;font-size:13px;font-weight:500;color:#D5ECE1}
:root .zb .p-rs-cab.zc-ficha-osc .p-an-var small{color:#D5ECE1;font-weight:400}
:root .zb .p-rs-cab.zc-ficha-osc .p-an-var i{color:#fff;font-style:normal}
/* debajo: una sola hoja, sin el kit de tarjetas iguales */
:root .zb .p-an .p-an-rej{gap:0;background:#fff;border:1px solid #e5eae8;border-radius:12px;overflow:hidden}
:root .zb .p-an .p-an-rej>.p-rs-tarjeta{border:0;border-radius:0;box-shadow:none;background:none;border-top:1px solid #e5eae8;margin:0}
:root .zb .p-an .p-an-rej>.p-rs-tarjeta:first-child{border-top:0}
@media(max-width:700px){
  :root .zb .p-rs-cab.zc-ficha-osc{grid-template-columns:1fr}
  :root .zb .p-rs-cab.zc-ficha-osc .p-an-cifras{display:grid;grid-template-columns:1fr 1fr}
}
:root .zb .p-rs-cab.zc-ficha-osc h2.zc-frase{color:#fff;font-size:28px;line-height:1.18;font-weight:600;margin:0 0 6px}
:root .zb .p-rs-cab.zc-ficha-osc .zc-sig{color:#D5ECE1}
:root .zb .p-an .p-an-rej>.p-rs-tarjeta:last-child:nth-child(3n+2){grid-column:1/-1}
@media(max-width:600px){:root .zb .p-rs-cab.zc-ficha-osc h2.zc-frase{font-size:22px}}
/* «Fuera de horario»: una luna junto a la hora, con su título; la leyenda, una vez encima de la lista (revisión v2.1b) */
:root .zb .zc-luna{display:inline-flex;align-items:center;margin-left:6px;color:#4b5a56;vertical-align:-2px}
:root .zb .zc-luna-ico{width:14px;height:14px}
:root .zb .zc-luna-ico svg{width:14px;height:14px}
:root .zb .zc-ley-luna{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;color:#4b5a56}
:root .zb .zc-luna .zc-fuera,:root .zb .zc-ley-luna .zc-fuera{background:none;color:#4b5a56}

/* ===== v2.1c: la ficha oscura solo en Mi Elena e Inicio; Resultados, Llamadas y Desvío llevan la ficha CLARA, con la misma
   frase como titular (revisión v2.1b, defecto 4: cinco losas oscuras iguales y ninguna destacaba). ===== */
:root .zb .zc-ficha-osc.zc-clara,
:root .zb .pl-cont>section.p-sec:not(.cv)>.dt-mio.zc-ficha-osc.zc-clara{background:#fff;color:#17201e;border:1px solid #dfe7e3;border-top:4px solid #034742;border-radius:16px;box-shadow:none}
:root .zb .zc-ficha-osc.zc-clara .zc-frase,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara h2.zc-frase{color:#034742}
:root .zb .zc-ficha-osc.zc-clara .zc-sig,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .zc-sig{color:#4b5a56}
/* selectores dentro de la ficha clara */
:root .zb .zb-ll>.zc-ficha-osc.zc-clara .zb-tabs,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-rs-per{background:#eef2f0}
:root .zb .zb-ll>.zc-ficha-osc.zc-clara .zb-tabs a,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-rs-per a{color:#2c3d3a}
:root .zb .zb-ll>.zc-ficha-osc.zc-clara .zb-tabs a[aria-current="true"],
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-rs-per a[aria-current="true"]{background:#034742;color:#fff}
:root .zb .zb-ll>.zc-ficha-osc.zc-clara .zb-tabs a:focus-visible,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-rs-per a:focus-visible{outline:2px solid #034742}
/* la franja de cifras de Resultados, en claro */
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-an-cifras{border-top-color:#e5eae8}
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-rs-tarjeta b{color:#034742}
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-rs-tarjeta h3,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-an-var,
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-an-var small{color:#4b5a56}
:root .zb .p-rs-cab.zc-ficha-osc.zc-clara .p-an-var i{color:#034742}
/* Desvío en claro; el código para activar es el único bloque oscuro de la página */
:root .zb .dt-mio.zc-ficha-osc.zc-clara #dt-mio{color:#4b5a56}
:root .zb .dt-mio.zc-ficha-osc.zc-clara .p-franja,
:root .zb .dt-mio.zc-ficha-osc.zc-clara .p-franja>span{color:#034742}
:root .zb .dt-mio.zc-ficha-osc.zc-clara .p-franja small,
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-b,
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-b p,
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-f,
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-s,
:root .zb .dt-mio.zc-ficha-osc.zc-clara details p,
:root .zb .dt-mio.zc-ficha-osc.zc-clara details li{color:#2c3d3a}
:root .zb .dt-mio.zc-ficha-osc.zc-clara a,
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-b b,
:root .zb .dt-mio.zc-ficha-osc.zc-clara summary{color:#034742}
:root .zb .dt-mio.zc-ficha-osc.zc-clara details{border-color:#e5eae8}
:root .zb .dt-mio.zc-ficha-osc.zc-clara code{background:#eef2f0;color:#034742}
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-cod data{background:#eef2f0;color:#034742}
:root .zb .dt-mio.zc-ficha-osc.zc-clara .btn.ghost{background:#fff;color:#034742;border:1px solid #c9d6d1}
:root .zb .dt-mio.zc-ficha-osc.zc-clara .dt-ok{color:#034742}
:root .zb .dt-mio.zc-ficha-osc.zc-clara li[data-paso="on"] .dt-cod{display:inline-flex;align-items:center;gap:12px;background:#034742;border-radius:16px;padding:12px 14px 12px 18px}
:root .zb .dt-mio.zc-ficha-osc.zc-clara li[data-paso="on"] .dt-cod data{background:none;color:#fff;padding:0}
:root .zb .dt-mio.zc-ficha-osc.zc-clara li[data-paso="on"] .dt-cod .btn.ghost{background:#fff;border-color:#fff}
:root .zb .dt-mio.zc-ficha-osc.zc-clara li[data-paso="on"] .dt-cod .dt-ok{color:#fff}
/* Cuenta: la ficha clara con «22 de 60 min de prueba» como titular */
:root .zb .zc-uso.zc-uso-ficha{padding:24px 28px;margin:0 0 20px}
:root .zb .zc-uso.zc-uso-ficha>h2{font-size:15px;font-weight:500;color:#4b5a56;margin:0 0 4px}
:root .zb .zc-uso.zc-uso-ficha .zc-uso-cifra b{font-size:34px;line-height:1.1;font-weight:600;color:#034742;letter-spacing:-.015em}
:root .zb .zc-uso.zc-uso-ficha .zc-uso-frase{font-size:16px;color:#2c3d3a}
@media(max-width:600px){:root .zb .zc-uso.zc-uso-ficha{padding:18px}:root .zb .zc-uso.zc-uso-ficha .zc-uso-cifra b{font-size:26px}}
@media(min-width:900px){:root .zb .zc-sin-guardar{margin-right:24px}}      /* revisión v2.1b: margen derecho a 1440 */
/* A21 (19 oct 2026): llamadas perdidas. En «Llamadas del día» la barra de perdidas va encima de la de atendidas, en el rojo
   de los avisos; en Llamadas, su motivo con el mismo chip que los resultados. */
:root .zb .zc-hb .zc-hp{display:block;width:min(14px,70%);height:var(--p,0%);border-radius:4px 4px 0 0;background:var(--a-rojo);margin:0}
:root .zb .zc-hb .zc-hp + i{border-radius:0}
:root .zb .zc-pt-p{background:var(--a-rojo);margin-left:12px}
:root .zb .zc-total .zc-perd{margin-left:14px;color:var(--a-rojo);text-decoration:none;white-space:nowrap}
:root .zb .zc-total .zc-perd b{color:var(--a-rojo)}
:root .zb .p-res.perdida{background:var(--a-rojo-tinte);color:var(--a-rojo);box-shadow:none}
@media(max-width:999px){
  /* A21: con «Perdidas» las pestañas de Llamadas son cinco; en el móvil bajan de línea en vez de esconder la elegida */
  :root .zb .zb-ll .zb-tabs{flex-wrap:wrap;overflow-x:visible}
}
:root .zb .zc-pocas li.zc-perdida span{color:var(--a-rojo)}      /* A21 en la v2.1c: con pocas llamadas, la perdida en rojo */
/* v2.1 (A24): con las voces de xAI cada voz lleva dos ▶ (EN y ES). La ficha de la voz pone el nombre arriba y los dos ▶ debajo,
   alineados con el texto; en la ficha de Elena, el ▶ de arriba es una píldora y no un círculo. */
:root .zb .voz-opcion:has(.voz-oir[data-idioma]){flex-wrap:wrap;align-items:flex-start;row-gap:10px}
:root .zb .voz-opcion:has(.voz-oir[data-idioma])>label{flex:1 1 100%}
:root .zb .voz-opcion:has(.voz-oir[data-idioma])>label+.voz-oir{margin-left:34px}
:root .zb .zc-elena-voz .voz-oir[data-idioma]{width:auto;height:32px;padding:0 12px;border-radius:16px;display:inline-flex;align-items:center;gap:6px;color:#034742;font:inherit;font-size:12px;font-weight:600}
/* v2.1 (A25): en «Lo que Elena debe saber» las fichas van en la rejilla de dos columnas, no a media anchura de la hoja clásica */
:root .zb .p-saber .sb-fichas-rej>fieldset.sb-ficha{display:block;width:auto;margin-right:0}


/* ===================== v2.1 final: movimiento y acabado (skills de Emil Kowalski; plan en
   capturas_panel_pro/v21final_emil/PLAN.md). Nítido y rápido, sin rebote: es un panel de trabajo. ===================== */
:root body.zb{--ease-out:cubic-bezier(0.23,1,0.32,1);-webkit-tap-highlight-color:transparent}
/* mobile-native §5 y §8: sin espera de doble toque en lo que se pulsa; el texto de un control no se selecciona al mantener */
:root .zb .btn,:root .zb button,:root .zb a.btn,:root .zb .zc-sub a,:root .zb .zb-tabs a,:root .zb .chip,:root .zb .voz-oir,
:root .zb .zc-dia,:root .zb .zc-filtro button,:root .zb .zc-copiar-dias,:root .zb .pl-nav a,:root .zb .pl-inf a,:root .zb .zb-cifra{touch-action:manipulation}
:root .zb .btn,:root .zb button,:root .zb .zc-sub a,:root .zb .zb-tabs a,:root .zb .voz-oir,:root .zb .zc-dia,:root .zb .zc-filtro button,
:root .zb .pl-inf a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* emil-design-eng, «Buttons must feel responsive»: scale(.97) al pulsar, 160 ms ease-out, en todo lo que se pulsa */
:root .zb .btn,:root .zb .zc-sub a,:root .zb .zb-tabs a,:root .zb .voz-oir,:root .zb .zc-dia,:root .zb .zc-filtro button,
:root .zb .zc-copiar-dias,:root .zb .chip,:root .zb .zc-sin-guardar .btn{transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
:root .zb .btn:active,:root .zb .zb-copiar:active,:root .zb .ag-nav a:active,:root .zb .zb-tabs a:active,:root .zb .zc-sub a:active,
:root .zb .zc-filtro button:active,:root .zb .zc-copiar-dias:active,:root .zb .zc-sin-guardar .btn:active{transform:scale(.97)}
:root .zb .chip:active{transform:scale(.98)}
:root .zb .zc-dia:active{transform:scale(.99)}                 /* una fila ancha: la escala se nota más, menos */
:root .zb .voz-oir:active{transform:scale(.94)}               /* un botón pequeño y redondo: un poco más */
:root .zb .voz-oir[aria-pressed="true"]{background:#034742;color:#fff}
:root .zb .zc-elena-voz .voz-oir[aria-pressed="true"]{background:#feb9be;color:#034742}
/* La barra «Tienes N cambios sin guardar»: entra desde abajo (ocasional; evita el salto), sale al instante (respuesta) */
:root .zb .zc-sin-guardar:not([hidden]){transition:transform 220ms var(--ease-out),opacity 220ms var(--ease-out)}
@starting-style{:root .zb .zc-sin-guardar:not([hidden]){transform:translateY(100%);opacity:0}}
/* Mi Elena: la sección elegida y la ficha del servicio entran cortas (160 ms); la pestaña en sí no se anima */
:root .zb.zc-js-elena [data-elena] [data-sec],:root .zb .zc-desplegable .zc-ficha.zc-visible,:root .zb .zc-dia+.hour-row:not(.zc-fila-oculta){transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
@starting-style{
  :root .zb.zc-js-elena [data-elena][data-ver] [data-sec],
  :root .zb .zc-desplegable .zc-ficha.zc-visible,
  :root .zb .zc-dia+.hour-row:not(.zc-fila-oculta){opacity:0;transform:translateY(4px)}
}
/* el cambio de voz en la ficha: fundido de 180 ms con 2 px de desenfoque (tapa el doble estado; mi-elena.js pone la clase) */
:root .zb [data-elena-nombre],:root .zb [data-elena-inicial],:root .zb [data-elena-voz]{transition:filter 180ms ease,opacity 180ms ease}
:root .zb .zc-cambiando [data-elena-nombre],:root .zb .zc-cambiando [data-elena-inicial],:root .zb .zc-cambiando [data-elena-voz]{filter:blur(2px);opacity:.4}
/* emil-design-eng, «prefers-reduced-motion»: menos movimiento, no cero. Fuera desplazamientos y escalas; se quedan los
   cambios de color y de opacidad, cortos. */
@media(prefers-reduced-motion:reduce){
  :root .zb *,:root .zb *::before,:root .zb *::after{animation:none!important;scroll-behavior:auto!important}
  :root .zb .btn:active,:root .zb .zb-copiar:active,:root .zb .ag-nav a:active,:root .zb .zb-tabs a:active,:root .zb .zc-sub a:active,
  :root .zb .zc-filtro button:active,:root .zb .zc-copiar-dias:active,:root .zb .zc-sin-guardar .btn:active,:root .zb .chip:active,
  :root .zb .zc-dia:active,:root .zb .voz-oir:active,:root .zb .zb-cifra:hover{transform:none}
  :root .zb .zc-cambiando [data-elena-nombre],:root .zb .zc-cambiando [data-elena-inicial],:root .zb .zc-cambiando [data-elena-voz]{filter:none}
}
@media(prefers-reduced-motion:reduce){@starting-style{
  :root .zb .zc-sin-guardar:not([hidden]),
  :root .zb.zc-js-elena [data-elena][data-ver] [data-sec],
  :root .zb .zc-desplegable .zc-ficha.zc-visible,
  :root .zb .zc-dia+.hour-row:not(.zc-fila-oculta){transform:none}
}}
/* break-ui (datos extremos, capturas_panel_pro/v21final_emil/) */
:root .zb .zc-uso-eje span{white-space:nowrap}                                    /* «Hoy» no se parte letra a letra */
:root .zb .zc-hoy .zb-cifra b{white-space:nowrap;flex-shrink:0}                     /* «76» no se parte en «7 / 6» */
:root .zb .zc-desplegable .zc-elige select{padding-right:44px;text-overflow:ellipsis} /* un servicio de 60 letras no pisa la flecha */
:root .zb .zc-ficha h4,:root .zb .zc-elena-id h1{overflow-wrap:anywhere}
:root .zb .zb-cab h1{overflow-wrap:anywhere}                                     /* un nombre de negocio de 88 letras */
:root .zb .zb-llamadas-lista>li{content-visibility:auto;contain-intrinsic-size:auto 64px}   /* 9.999 llamadas: solo se pintan las que se ven */
:root .zb .zc-uso-tope-txt{white-space:nowrap;z-index:1}
:root .zb .zc-mejora{overflow:hidden}                                                   /* el adorno de la tarjeta no se sale a 320 px */
:root .zb fieldset>legend{max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}   /* un tema de 40 letras en «saber» */
/* Revisión PR 56 (26 oct): las citas ya hechas de la tarjeta Hoy (panel_v2, .v2-hecha) iban con opacity:.6 en toda la fila: la hora,
   el servicio y «Done» quedaban a 2,5:1 (axe serious; solo se ve cuando una cita de hoy ya pasó). Se apagan con --a-mut (5,7:1 sobre
   blanco), no con opacidad. Solo clásico (:not(.zn)): la noche tiene su regla en panel-noche.css. */
:root .zb:not(.zn) li.v2-hecha{opacity:1}
:root .zb:not(.zn) li.v2-hecha .zb-que b,:root .zb:not(.zn) li.v2-hecha .zb-que small,:root .zb:not(.zn) li.v2-hecha .zb-cuando,:root .zb:not(.zn) li.v2-hecha .zb-cuando small,:root .zb:not(.zn) li.v2-hecha [data-v2="hecha"]{color:var(--a-mut)}
/* Revisión PR 56 (26 oct): «Add / Añadir» de la bienvenida en clásico: --naranja es aquí el verde #034742 y --negro #0f2a28, tinta
   oscura sobre verde oscuro (1,43:1, axe serious, ya en 23adc43). Texto blanco (≈10:1). La noche tiene su regla (panel-noche.css). */
:root .zb:not(.zn) .bv-anadir{color:#fff}