/* Zolteva · diseño «clásico» para el registro y el panel (Pedro, 12 oct 2026: «ese diseño para todas: alta, panel y
   web»; «los colores naranja y negro desacentuarlos un poco, que no sean tan chillones»).
   Solo se enlaza con ZOLTEVA_DISENO_CLASICO=1 (registro/config.py), DETRÁS de styles.css y de los estilos de cada
   página: por eso cada regla empieza por :root, que le da el peso justo para ganar a la de origen sin !important.
   Es SOLO presentación: no esconde ni cambia un texto. Lo que manda:
     fondo crema, bloques blanco roto, tinta (no negro puro), naranja solo en el botón primario y en acentos,
     cabecera clara de una fila con el logo, bordes finos, radios moderados, Archivo sin abusar de mayúsculas. */
:root{
  --naranja:#cf7620;      /* botón primario y acentos */
  --negro:#22201c;        /* tinta */
  --crema:#faf5ea;        /* fondo */
  --crema-osc:#ece3d0;    /* líneas interiores, pistas */
  --borde:#22201c;
  --z-papel:#fffdf8;      /* bloques */
  --z-linea:#e3d8c4;      /* borde fino de tarjetas */
  --z-campo:#8a8072;      /* borde de campos y casillas: 3:1 o más sobre el papel */
  --z-mut:#5f574c;        /* texto secundario */
  --z-acento:#9a4f0c;     /* naranja de texto (AA sobre crema y papel) */
  --z-tinte:#fbecd8;      /* naranja muy claro: elegido, resaltado */
  --z-foco:#1a5fd0;
  --z-radio:14px;
  --z-radio-s:10px;
  --z-sombra:0 1px 2px rgba(34,32,28,.05),0 8px 24px rgba(34,32,28,.06);
}
:root body{background:var(--crema);color:var(--negro);line-height:1.5}
:root :focus-visible{outline:3px solid var(--z-foco);outline-offset:2px}
:root input:focus,:root select:focus,:root textarea:focus{outline:3px solid var(--z-foco);outline-offset:1px}
/* Chromium, al llegar con el tabulador a una hora o una fecha, enfoca su campo interior: el de fuera solo es :focus-within. */
:root input[type=time]:focus-within,:root input[type=date]:focus-within,:root input[type=datetime-local]:focus-within{outline:3px solid var(--z-foco);outline-offset:1px}

/* ---------- cabecera: clara, una fila, con el logo ---------- */
:root header.top{background:rgba(250,245,234,.96);border-bottom:1px solid var(--z-linea);padding:10px 0}
:root header.top .w{min-height:44px;gap:12px}
:root .marca,:root .pl-marca{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;font-weight:900;letter-spacing:.03em;font-size:18px;line-height:1.15;color:var(--negro)}
:root .marca::before,:root .pl-marca::before{content:"";grid-row:1/3;width:32px;height:32px;border-radius:8px;
  background:var(--negro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 9.5h12v2.6L14.2 20H22v2.5H10v-2.6L17.8 12H10z' fill='%23d98636'/%3E%3C/svg%3E") center/100% no-repeat}
:root .marca small{font-size:12px;font-weight:600;letter-spacing:0;opacity:1;color:var(--z-mut)}
:root .lang-switch{border:1.5px solid var(--negro);background:var(--z-papel)}
:root .lang-switch button,:root .lang-switch a{color:var(--negro);font-weight:600}
:root .lang-switch button[aria-pressed="true"],:root .lang-switch a[aria-current="true"]{background:var(--negro);color:var(--crema);font-weight:800}

/* ---------- titulares ---------- */
:root .hero h1,:root .elena h1,:root .revision h1,:root .p-cab h1,:root .p-entrar h1{text-transform:none;font-weight:800;letter-spacing:-.02em;line-height:1.08}
:root .ante{border-top:0;padding-top:0;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--z-acento)}
:root .hint{opacity:1;color:var(--z-mut)}

/* ---------- botones: primario naranja con texto oscuro; secundario de contorno ---------- */
:root .btn{background:var(--naranja);color:var(--negro);border:2px solid var(--naranja);border-radius:12px;font-weight:700;text-transform:none;letter-spacing:0;font-size:16px;padding:12px 22px;min-height:52px}
:root .btn:hover{filter:brightness(.96)}
:root .btn.ghost,:root .btn.secondary{background:transparent;color:var(--negro);border:2px solid var(--negro);font-weight:700}
:root .btn.ghost:hover,:root .btn.secondary:hover{background:rgba(34,32,28,.05);filter:none}
:root .btn.big-call{background:var(--verde);border-color:var(--verde);color:#fff;font-size:19px}
:root .btn-link{color:var(--negro);text-underline-offset:3px}
:root .card .sample-btn,:root .el-dictar{background:var(--negro);color:var(--crema);border-radius:10px}
:root .el-dictar.dictando{background:var(--rojo)}

/* ---------- campos ---------- */
:root input[type=text],:root input[type=tel],:root input[type=email],:root input[type=number],:root input[type=time],:root input[type=date],
:root input[type=datetime-local],:root input[type=password],:root select,:root textarea{border:1.5px solid var(--z-campo);border-radius:var(--z-radio-s);background-color:#fff;color:var(--negro)}
:root .field.has-err input,:root .field.has-err select,:root .hour-row.has-err input[type=time],:root .svc-row.has-err .svc-dur input{border-color:var(--rojo);border-width:2px}
:root .field .opt{opacity:1;color:var(--z-mut)}
:root input[type=checkbox],:root input[type=radio]{accent-color:var(--negro)}
:root #el-texto::placeholder{color:var(--z-mut)}

/* ---------- registro: bloques ---------- */
:root .progress-track{height:8px;border:0;background:var(--crema-osc)}
:root .progress-bar{border-radius:999px}
:root .step-label{color:var(--z-mut)}
:root fieldset{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel);padding:18px}
:root .chip{border:1.5px solid var(--z-campo);border-radius:var(--z-radio-s);background:#fff}
:root .chip .chip-row label,:root .chip .greet-preview,:root .chip .chip-sub{opacity:1;color:var(--z-mut)}
:root #field-avisos.has-err .chip{border-color:var(--rojo)}
:root .avisos-sms{border:1.5px solid var(--z-campo);border-top:0;background:#fff}
:root .svc-list{border:1.5px solid var(--z-campo);border-radius:var(--z-radio-s)}
:root .svc-row:not(:last-child){border-bottom-color:var(--crema-osc)}
:root .svc-dollar{opacity:1;color:var(--z-mut)}
:root .svc-meta input[type=number],:root .svc-dur input[type=number]{border:1.5px solid var(--z-campo)}
:root .hour-row{border-bottom-color:var(--crema-osc)}
:root .card{border:1.5px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel)}
:root .card.selected{background:var(--z-tinte);border-color:var(--naranja);box-shadow:0 0 0 1px var(--naranja)}
:root .card p,:root .plan-card .over{opacity:1;color:var(--z-mut)}
:root .card.selected p,:root .card.selected .over{color:var(--negro)}
:root .plan-card .price{font-weight:800}
:root .badge{background:var(--negro);color:#f0b77f}
:root .summary dt{opacity:1;color:var(--z-mut)}
:root .consent,:root #rev-sms{border:1.5px solid var(--z-campo);border-radius:var(--z-radio-s);background:#fff}
:root .seg{border:1.5px solid var(--z-campo)}
:root .seg label + label{border-left:1.5px solid var(--z-campo)}
:root .seg input:focus-visible + span{outline:3px solid var(--z-foco)}
:root .draft-note{opacity:1;color:var(--z-mut)}
:root .live-badge{text-transform:none;font-weight:800}
:root .carrier{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel)}
:root .carrier h4{text-transform:none}
:root .carrier .src{opacity:1;color:var(--z-mut)}
:root .dv-chip{border:1.5px solid var(--negro)}
:root .dv-nivel{border-left-color:var(--naranja)}
:root .aviso-elena{border:1px solid var(--z-linea);border-left:6px solid var(--naranja);background:var(--z-papel)}

/* conversación con Elena */
:root .el-b p{border:1px solid var(--z-linea);font-weight:500}
:root .el-b-elena p{background:var(--z-tinte);border-color:#ecc99d}
:root .el-b-dueno p{background:#fff}
:root .el-avatar{border:0;color:#f0b77f}
:root .el-cuadro.con-opciones{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel)}
:root .el-rapidas .btn.ghost{background:#fff;border:1.5px solid var(--negro)}
:root .el-ejemplos{border-top:1px solid var(--z-linea)}
:root .el-ej{border:1.5px dashed var(--z-campo);background:var(--z-papel)}
:root .el-dir-sugerencias{border:1.5px solid var(--z-campo)}
:root .el-dir-sugerencia:focus-visible,:root .el-ej:focus-visible,:root .el-rapida:focus-visible,:root .el-editar:focus-visible,:root .el-dictar:focus-visible{outline:3px solid var(--z-foco)}
:root .el-contador,:root .el-privacidad{color:var(--z-mut)}
:root .el-contador.aviso{color:var(--rojo)}
:root .el-dir-atribucion{opacity:1;color:var(--z-mut)}

/* revisión */
:root .rev-sec{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel);padding:14px 16px}
:root .rev-sec.con-falta{border-color:var(--rojo);box-shadow:inset 5px 0 0 var(--rojo)}
:root .rev-cab h2{text-transform:none;letter-spacing:0;font-weight:800;font-size:18px}
:root .rev-resumen p:last-child:not(:first-child){opacity:1;color:var(--z-mut)}
:root .rev-cuerpo fieldset.step{border:0;background:transparent;padding:0}

/* ---------- panel: bloques ---------- */
:root .p-sec{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel);padding:18px;box-shadow:var(--z-sombra)}
:root .p-sec h2{text-transform:none;letter-spacing:-.01em;font-size:19px;font-weight:800}
:root .p-sec h2 small{opacity:1;color:var(--z-mut)}
:root .p-cifras div,:root .p-cifras a{border:1px solid var(--z-linea);border-radius:12px;background:#fff}
:root .p-cifras a:hover{background:var(--z-tinte)}
:root .p-cifras b,:root .p-cifras a b{font-weight:800}
:root .p-min-80,:root .p-tabla td small{color:var(--z-acento)}
:root .p-extra{border:1.5px solid var(--naranja);background:var(--z-tinte)}
:root .p-tabla th,:root .ag-tabla th{opacity:1;color:var(--z-mut)}
:root .p-tabla tr.total td{border-top:1.5px solid var(--negro)}
:root .p-res{border:1px solid var(--z-campo);font-weight:700}
:root .p-res.cita{border-color:var(--verde)}
:root .p-res.recado{background:var(--z-tinte);border-color:var(--naranja)}
:root .p-lista small,:root .p-vacio,:root .p-pie,:root .p-min-nota small{opacity:1;color:var(--z-mut)}
:root .p-elena dt,:root .ag-form dt,:root .cal-ficha dt{opacity:1;color:var(--z-mut)}
:root .p-ajustes fieldset,:root .ag-form fieldset{border:1px solid var(--z-linea);border-radius:12px;background:#fff}
:root .p-fig svg{border-color:var(--z-linea)}
:root .p-menu-btn{border:1.5px solid var(--negro);text-transform:none;font-weight:700;font-size:15px}
:root .p-menu{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:var(--z-papel)}
:root .p-menu a{font-weight:700}
:root .p-menu a:hover{background:var(--z-tinte)}
:root .p-menu a[aria-current="page"]{background:var(--negro);color:var(--crema)}
:root .p-wa-estado,:root .cal-et,:root .p-lista .p-cancelada em{border:1px solid var(--z-campo)}
:root .p-wa-estado.activo{border-color:var(--verde)}
:root .p-wa .p-wa-legal{opacity:1;color:var(--z-mut)}
/* El QR de WhatsApp: siempre negro sobre blanco, sin teñir, con su margen. */
:root .p-wa .p-wa-qr svg{background:#fff;border-radius:8px}
:root .pl-salto{border:2px solid var(--negro)}

/* menú lateral (escritorio) y barra inferior (móvil): claros */
:root .pl-inf{background:var(--z-papel);border-top:1px solid var(--z-linea)}
:root .pl-inf a,:root .pl-inf summary,:root .pl-mas button{color:var(--z-mut);font-weight:600}
:root .pl-inf a[aria-current="page"],:root .pl-inf summary.activo{background:transparent;color:var(--z-acento);font-weight:800;box-shadow:inset 0 3px 0 var(--naranja)}
:root .pl-inf a:focus-visible,:root .pl-inf summary:focus-visible,:root .pl-mas button:focus-visible,
:root .pl-inf a[aria-current="page"]:focus-visible,:root .pl-inf summary.activo:focus-visible{outline:3px solid var(--z-foco);outline-offset:-4px}
:root .pl-n{background:var(--negro);color:var(--crema)}
:root .pl-mas{background:var(--z-papel);border:1px solid var(--z-linea);box-shadow:var(--z-sombra)}
:root .pl-mas a,:root .pl-mas button{color:var(--negro)}
:root .pl-mas form{border-top-color:var(--z-linea)}
@media(min-width:900px){
  :root .pl-lat{background:var(--z-papel);color:var(--negro);border-right:1px solid var(--z-linea)}
  :root .pl-marca{padding:0 10px;text-transform:uppercase}
  :root .pl-marca::before{grid-row:1}
  :root .pl-neg{border-bottom-color:var(--z-linea)}
  :root .pl-neg b{font-weight:800}
  :root .pl-neg span{color:var(--z-mut)}
  :root .pl-neg span span{color:var(--negro)}
  :root .pl-nav a{color:var(--negro);font-weight:600}
  :root .pl-nav a:hover{background:rgba(34,32,28,.05)}
  :root .pl-nav a[aria-current="page"]{background:var(--z-tinte);color:var(--negro);font-weight:800;box-shadow:inset 3px 0 0 var(--naranja)}
  :root .pl-lat a:focus-visible,:root .pl-lat button:focus-visible{outline:3px solid var(--z-foco)}
  :root .pl-fin{border-top-color:var(--z-linea)}
  :root .pl-fin .lang-switch{border-color:var(--negro)}
  :root .pl-fin .lang-switch a{color:var(--negro)}
  :root .pl-fin .lang-switch a[aria-current="true"]{background:var(--negro);color:var(--crema)}
  :root .pl-fin button{border:1.5px solid var(--negro);color:var(--negro)}
  :root .pl-fin button:hover{background:rgba(34,32,28,.05)}
}

/* ---------- calendario ---------- */
:root .ag-nav a{border:1.5px solid var(--z-campo);background:#fff;font-weight:700}
:root .ag-nav a[aria-current="page"]{background:var(--negro);border-color:var(--negro);color:var(--crema)}
:root .ag a:focus-visible,:root .ag button:focus-visible,:root .ag input:focus,:root .ag select:focus{outline:3px solid var(--z-foco)}
:root .ag-aviso{border-width:1.5px}
:root .ag-aviso.mal,:root .ag-fuera{border-color:var(--z-acento);color:var(--negro)}
:root .ag-fuera{color:var(--z-acento)}
:root .ag-vacio{opacity:1;color:var(--z-mut)}
:root .ag-lista li.ag-bloq{background:#f1ede4}
:root .ag-form .ag-avisa{border:1.5px dashed var(--z-campo)}
:root .cal .ag-rango{font-weight:800;letter-spacing:-.01em}
:root .cal-canc i{border:1.5px solid var(--z-campo)}
:root .cal-canc i::after{background:var(--z-campo)}
:root .cal-canc.si i{background:var(--negro);border-color:var(--negro)}
:root .cal-vacio{border:1.5px dashed var(--z-campo);background:#fff;font-weight:600}
:root .cal-ley{color:var(--z-mut)}
:root .cal-ley i{border-width:1.5px}
:root .cal-ley i.cs.m4{border:2.5px solid var(--negro)}
/* Paleta por servicio: fondo claro, canto de color y texto de tinta (AA de sobra). La forma sigue distinguiendo sin el color. */
:root .c0{background:#fbe6cc;border-color:#c2660f;color:var(--negro)}
:root .c1{background:#dcefe2;border-color:#1f7a3c;color:var(--negro)}
:root .c2{background:#e2ecf8;border-color:#2f5f9e;color:var(--negro)}
:root .c3{background:#ece4f3;border-color:#6b4a91;color:var(--negro)}
:root .c4{background:#f7e1dd;border-color:#b3463a;color:var(--negro)}
:root .c5{background:#dcf0ed;border-color:#1b6f6a;color:var(--negro)}
:root .c0-p{--pt:#c2660f}:root .c1-p{--pt:#1f7a3c}:root .c2-p{--pt:#2f5f9e}:root .c3-p{--pt:#6b4a91}:root .c4-p{--pt:#b3463a}:root .c5-p{--pt:#1b6f6a}
:root .cg-cab{color:var(--negro)}
:root .cg-cab small{opacity:1;color:var(--z-mut)}
:root .cg-cab a b{font-weight:800}
:root .cg-hoy .cg-cab a b{background:var(--naranja);color:var(--negro)}
:root .cg-pista{border:1px solid var(--z-linea);border-radius:10px;background-color:#fff}
:root .cg-horas{color:var(--z-mut);font-weight:600}
:root .cg-cerr{background:#f1ede4}
:root .cg-bloq{border:1px solid var(--z-campo);color:var(--negro)}
:root .cg-mas:hover,:root .cg-mas:focus-visible{background:var(--z-tinte);color:var(--negro)}
:root .cg.dia .cg-mas{color:var(--z-campo);font-weight:600}
:root .cg-cita{border-width:0 0 0 4px;border-radius:8px;padding:2px 6px;box-shadow:0 0 0 1px rgba(34,32,28,.10)}
:root .cg-cita b{font-weight:800}
:root .cg-cita span.n{font-weight:700}
:root .cg-canc{border:1.5px dashed var(--z-campo)!important;box-shadow:none}
:root .cg-grupo{background:#fff;border:1.5px solid var(--negro);color:var(--negro);box-shadow:3px 3px 0 var(--z-linea)}
:root .cg-grupo span.n{background:var(--negro);color:var(--crema)}
:root .cg-grupo span.n.x{background:#fff;color:#333;border:1px dashed #555}
:root .cm th{color:var(--z-mut)}
:root .cm td a{border:1px solid var(--z-linea);border-radius:10px}
:root .cm td a:hover{border-color:var(--negro)}
:root .cm .cm-c{background:var(--negro);color:var(--crema);font-weight:800}
:root .cm .cm-s{color:var(--negro)}
:root .cm td.cm-cerr a{background:#f1ede4;border-color:#f1ede4}
:root .cm td.cm-otro .cm-n{color:var(--z-mut)}
:root .cm td.cm-hoy a{border:2px solid var(--negro);padding:5px}
:root .cal-lista li::before{background:var(--pt,var(--negro))}
:root .cal-ficha .cal-serv{border-width:0 0 0 6px;box-shadow:0 0 0 1px rgba(34,32,28,.10);font-weight:800}
:root .cal-nota{border-left:4px solid var(--naranja);background:var(--z-tinte)}
:root .cal-nota figcaption{opacity:1;color:var(--z-mut)}
:root .cal-llamada{border:1px solid var(--z-linea);background:#fff}

/* La semana. ≤640 px: tira de días + el día elegido (calendario.py, _semana_movil). 641–899: rejilla de siete columnas
   con desplazamiento lateral y la columna de horas fija. ≥900: rejilla a todo el ancho, con la jornada a la vista. */
:root .cz-sem .ag-semana-tabla{display:none}
:root .cz-fila{display:flex;align-items:center;gap:4px;margin:0 0 8px}
:root .cz-rango{flex:1;min-width:0;margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;text-align:center;white-space:nowrap}
:root .cz-fl,:root .cz-hoy,:root .cz-mas summary{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;text-decoration:none;font-weight:700;color:var(--negro);cursor:pointer;box-sizing:border-box}
:root .cz-fl{font-size:26px;line-height:1;padding-bottom:3px}
:root .cz-hoy{padding:0 14px;border:1.5px solid var(--z-campo);background:#fff;font-size:14px;margin-left:4px}
:root .cz-fl:hover,:root .cz-mas summary:hover{background:rgba(34,32,28,.06)}
:root .cz-mas{position:relative}
:root .cz-mas summary{list-style:none}
:root .cz-mas summary::-webkit-details-marker{display:none}
:root .cz-mas summary i{width:4px;height:4px;border-radius:50%;background:var(--negro);box-shadow:-7px 0 0 var(--negro),7px 0 0 var(--negro)}
:root .cz-mas>div{position:absolute;right:0;top:48px;z-index:20;min-width:230px;background:var(--z-papel);border:1px solid var(--z-linea);border-radius:12px;box-shadow:var(--z-sombra);padding:6px;display:grid}
:root .cz-mas>div a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;color:var(--negro)}
:root .cz-mas>div a:hover{background:var(--z-tinte)}
:root .cz-tira ol{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;list-style:none;margin:0 0 10px;padding:0}
:root .cz-d{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:64px;padding:6px 0 5px;border-radius:12px;border:1px solid transparent;text-decoration:none;color:var(--negro);box-sizing:border-box}
:root .cz-d>span:first-child{font-size:12px;font-weight:700;color:var(--z-mut)}
:root .cz-d b{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:999px;font-size:17px;font-weight:800;line-height:1}
:root .cz-d.cz-es-hoy b{background:var(--naranja)}
:root .cz-d[aria-current]{background:#fff;border-color:var(--negro);box-shadow:0 0 0 1px var(--negro)}
:root .cz-d.cz-cerr b{color:var(--z-mut);font-weight:500}
:root .cz-d.cz-cerr.cz-es-hoy b{color:var(--negro)}
:root .cz-m{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:16px;align-items:center}   /* en 320 px (iPhone SE) «6» y «×1» no caben en una fila y pisaban el día de al lado */
:root .cz-n{font-style:normal;font-size:11px;font-weight:800;line-height:1;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--negro);color:var(--crema);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
:root .cz-n.x{background:#fff;color:#333;border:1px dashed #555}
:root .cz-dia .cg{margin-top:0}
:root .cz-dia .cg-cab{min-height:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;padding:0 0 6px}
:root .cz-dia>.ag-rango{font-size:14px;margin:0 0 4px}
@media(max-width:640px){
  :root .pl main{padding-top:10px}
  :root .pl .w{padding:0 12px}
  :root .p-sec.cz-sem{padding:12px}
  :root .cz-sem .ag-cab{flex-wrap:nowrap;margin-bottom:8px}
  :root .cz-sem .ag-cab .ag-acc{flex:none}
  :root .cz-sem .ag-acc .btn{min-height:44px;padding:8px 16px;font-size:15px}
  :root .cz-sem .ag-acc .btn.ghost,:root .cz-sem>.ag-rango,:root .cz-sem>.cal-canc,:root .cz-sem .cal-barra>.ag-nav:last-child{display:none}
  /* Semana · Día · Mes · Lista: un solo control segmentado de una fila */
  :root .cal .cal-barra{margin-bottom:8px}
  :root .cal .cal-barra>.ag-nav:first-child{flex:1;flex-wrap:nowrap;gap:0;border:1.5px solid var(--z-campo);border-radius:12px;background:#fff;padding:2px}
  :root .cal .cal-barra>.ag-nav:first-child a{flex:1;justify-content:center;border:0;border-radius:9px;padding:0 4px;min-height:44px;background:transparent}
  :root .cal .cal-barra>.ag-nav:first-child a[aria-current="page"]{background:var(--negro)}
}
/* Móvil (iPhone, 13 oct 2026). La columna de horas y la del día son dos cajas, cada una con su cabecera: si una cabecera es
   más alta que la otra, las horas quedan por encima de sus líneas (28 px en la semana y 5 en el día: una cita de las 9:00
   se leía «9:15»). Con subgrid las cabeceras comparten fila y miden lo mismo; un navegador sin subgrid se queda como estaba.
   Y lo que se toca con el dedo (Ver ficha, Mover, Cancelar, Quitar bloqueo, + Añadir, Volver) llega a 44 px de alto.
   Va aquí y no en calendario.py porque el HTML del panel se compara byte a byte con el de commits anteriores. */
@media(max-width:899px){
  :root .cg{grid-template-rows:auto auto}
  :root .cg>div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  :root .cal-lista li .ag-acciones a,:root .cal-lista li .ag-acciones button,:root .cal .btn-link.ag-quitar,:root .cal-lista .ag-dia a,:root .ag .p-enlace{display:inline-flex;align-items:center;min-height:44px}
}
@media(min-width:641px){
  :root .cz-movil{display:none}
  :root .cz-sem .ag-semana-tabla{display:block;overflow-x:auto;padding-bottom:4px}
  :root .cz-sem .ag-semana-tabla .cg{min-width:760px;--px:1.5px}
  :root .cz-sem .ag-semana-tabla .cg-cab{height:62px;justify-content:flex-start;box-sizing:border-box}
  :root .cg-grupo span.n{white-space:normal;border-radius:9px}
  :root .cz-sem .ag-semana-tabla .cg>div:first-child{position:sticky;left:0;z-index:4;background:var(--z-papel)}
}
@media(min-width:900px){
  :root .pl .w:has(#agenda.cal){max-width:none}
  :root .pl main:has(#agenda.cal){padding-top:14px}
}
@media(min-width:1280px){
  :root .cz-sem .ag-semana-tabla{overflow:visible}
  :root .cz-sem .ag-semana-tabla .cg{min-width:0;--px:clamp(1.05px,calc((100vh - 252px)/var(--min)),1.6px)}
  :root .cz-sem .ag-semana-tabla .cg-cab{height:auto;min-height:40px;justify-content:flex-end}
}
@media(min-width:900px){
  :root .cal .ag-cab{margin-bottom:8px}
  :root .cal-barra{margin-bottom:0}
  /* el rango y «Mostrar canceladas», en una fila */
  :root .cz-sem>.ag-rango{display:inline-block;margin:8px 16px 0 0;vertical-align:middle}
  :root .cz-sem>.cal-canc{vertical-align:middle;margin-top:8px}
}

/* ---------- por debajo de 400 px el registro respira un poco menos ---------- */
@media(max-width:420px){
  :root fieldset{padding:14px}
  :root .p-sec{padding:14px}
}

/* ---------- panel: plan y facturación, conversación, resultados, clientes, Mi Elena, baja, calendarios, primeros pasos ---------- */
:root .pp{border:1px solid var(--z-linea);border-radius:var(--z-radio);background:#fff;padding:16px}
:root .pp h4,:root .cv h3{text-transform:none;letter-spacing:-.01em;font-size:17px;font-weight:800}
:root .cv h3{border-top:1px solid var(--z-linea)}
:root .pp-indice a,:root .p-cl-pag a{border:1.5px solid var(--z-campo);font-weight:700;background:#fff}
:root .pp a:focus-visible,:root .cv a:focus-visible,:root .p-an a:focus-visible,:root .p-cl a:focus-visible,:root .p-cl button:focus-visible,:root .p-cl input:focus,
:root .pb a:focus-visible,:root .pb button:focus-visible,:root .pb input:focus-visible,:root .pb select:focus,:root .pb textarea:focus,:root .p-cifras a:focus-visible{outline:3px solid var(--z-foco)}
:root .pp-plan{border:1px solid var(--z-linea);border-radius:12px;background:var(--z-papel)}
:root .pp-plan.tuyo{border:2px solid var(--naranja);background:var(--z-tinte);box-shadow:none}
:root .pp-marca{text-transform:none;letter-spacing:0;font-weight:800}
:root .pp-tabla .tuyo{background:var(--z-tinte);font-weight:800}
:root .cv-cab dt{opacity:1;color:var(--z-mut)}
:root .cv-q,:root .cv-nota{color:var(--z-mut)}
:root .cv-t p{border:1.5px solid var(--negro);color:var(--negro)}
:root .cv-e p{background:var(--negro);color:var(--crema)}
:root .cv-m,:root .cv-vacio{border:1.5px dashed var(--z-campo);background:#fff}
:root .p-rs{color:var(--negro)}
:root .p-rs-per{background:var(--negro)}
:root .p-rs-per a[aria-current="true"]{background:var(--naranja);color:var(--negro)}
:root .p-rs-tarjeta,:root .p-rs-vacio,:root .p-rs-aviso{border-color:var(--z-linea);background:var(--z-papel)}
:root .p-rs-graf-cab h3,:root .p-an-var,:root .p-an-dest,:root .p-rs-aviso a{color:var(--negro)}
:root .p-rs-ley i{background:var(--negro)}
:root .p-rs-ley i.ci{background:var(--naranja)}
:root .p-rs-dinero,:root .p-an-dinero{background:var(--negro)}
:root .p-rs-lado.con{background:var(--naranja);color:var(--negro)}
:root .p-rs-lado.con small,:root .p-rs-lado.con p{color:var(--negro)}
:root .p-rs-paso.neto b,:root .p-an-dinero a{color:#e79a4a}
:root .p-cl-cifras div{border:1px solid var(--z-linea);border-radius:12px;background:#fff}
:root .p-cl-buscar input[type=search]{border:1.5px solid var(--z-campo)}
:root .p-cl-lista a:hover{background:var(--z-tinte)}
:root .p-cl-lista small,:root .p-cl-hist small{opacity:1;color:var(--z-mut)}
:root .p-cl-hist{border-left:2px solid var(--z-linea)}
:root .p-cl-hist li::before{border:0;left:-6px}
:root .p-cl-hist em,:root .p-an-picos em{border:1px solid var(--z-campo)}
:root .p-svcs li,:root .p-edit fieldset,:root .pb fieldset{border:1px solid var(--z-linea);border-radius:12px;background:#fff}
:root .p-edit .p-aviso.espera{border:1px solid var(--z-linea);border-left:4px solid var(--naranja);background:var(--z-tinte)}
:root .pb .pb-op label{border:1.5px solid var(--z-campo);font-weight:700}
:root .pb select,:root .pb textarea{border:1.5px solid var(--z-campo)}
:root .pb-botones .pb-b{border:2px solid var(--negro);border-radius:12px;font-weight:700}
:root .pb-botones .pb-b:hover{background:rgba(34,32,28,.05)}
:root .p-cal .p-cal-url{border:1.5px solid var(--z-campo);background:#fff}
:root .p-cal-aviso{border-width:1.5px}
:root .p-cal-aviso.mal{border-color:var(--z-acento)}
:root .p-pasos{border-color:var(--naranja)}
:root .p-pasos li:before{border:1.5px solid var(--negro);font-weight:800}
:root .p-pasos li.hecho:before{border-color:var(--verde)}
:root .p-pasos code{border:1.5px solid var(--z-campo);background:#fff;font-weight:800}
/* Gráficos (SVG y barras con el color en línea): el naranja y el negro de antes, a los de ahora. El QR no lleva estos colores. */
:root svg [fill="#F0871A" i],:root svg [fill="#f08a1a" i]{fill:var(--naranja)}
:root svg [stroke="#F0871A" i]{stroke:var(--naranja)}
:root svg [fill="#17140F" i],:root svg [fill="#111"]{fill:var(--negro)}
:root svg [stroke="#17140F" i],:root svg [stroke="#111"]{stroke:var(--negro)}
:root [style*="background:#F0871A" i]{background:var(--naranja)!important}
:root [style*="background:#17140F" i]{background:var(--negro)!important}
:root .plan-card .price{color:var(--negro)}
:root .cal-lista .cal-x b,:root .cal-lista .cal-x>span,:root .cal-lista .cal-x>small{opacity:1;color:var(--z-mut)}

/* ---------- «Crea tu cuenta» (alta) y /panel/entrar: dos columnas con una mini demo de Zolteva (17 oct 2026) ----------
   Pedro: «como el login de Lovable: el formulario a la izquierda y a la derecha un panel de color con algo vivo».
   Solo presentación: ids, textos, orden de los campos y flujo son los de siempre. Dos piezas:
     · los botones «Continue with…» (Google; el de Apple, de otra rama, entra en .cu-sociales / .p-sociales con
       class="cu-social cu-apple" / "p-social p-apple" y hereda este estilo): blancos, borde fino. El principal sigue
       siendo el naranja de «Crear cuenta» / «Entrar». Con su «o» de separación, también en /panel/entrar.
     · a partir de 1024 px, dos columnas: formulario con el logo a la izquierda y, a la derecha, el panel naranja con la
       «Demo»: llega una llamada, Elena contesta, toma la cita y sale en el calendario (CSS puro, 14 s en bucle).
   Con prefers-reduced-motion: reduce queda quieta, en el último fotograma. Debajo de 1024 px el panel y el logo no
   existen y la columna es la de antes. */
:root .btn.cu-social,:root .btn.p-social{background:#fff;color:var(--negro);border:1px solid var(--z-campo);font-weight:600;min-height:48px;box-sizing:border-box}
:root .btn.cu-social:hover,:root .btn.p-social:hover{background:var(--crema);filter:none}
:root .p-sociales{display:flex;flex-direction:column;gap:10px;margin:14px 0 0}
:root .p-o{margin:14px 0;text-align:center;font-size:13px;color:var(--z-mut)}
:root .p-o::before,:root .p-o::after,:root .cu-o::before,:root .cu-o::after{content:"";display:inline-block;vertical-align:middle;width:min(72px,22%);border-top:1px solid var(--z-linea);margin:0 12px}
:root #cu .cu-pasos h2{margin:0 0 14px}
:root .zd-logo,:root .zd-demo{display:none}
:root .zd-logo span{display:inline-grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;font-weight:900;letter-spacing:.03em;font-size:20px;color:var(--negro)}
:root .zd-logo span::before{content:"";width:34px;height:34px;border-radius:9px;
  background:var(--negro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 9.5h12v2.6L14.2 20H22v2.5H10v-2.6L17.8 12H10z' fill='%23d98636'/%3E%3C/svg%3E") center/100% no-repeat}
@media (min-width:1024px){
  :root #cu{width:min(1120px,calc(100vw - 48px))}
  :root .zd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch;min-height:min(640px,calc(100vh - 140px))}
  :root .p-entrar.zd-cols{width:min(1120px,calc(100vw - 48px));max-width:none;position:relative;left:50%;transform:translateX(-50%);padding-top:0;margin-top:28px}
  :root .zd-izq{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:420px;margin:0 auto;padding:12px 0}
  :root #cu .zd-izq{max-width:420px}
  :root .zd-logo{display:block;margin:0 0 28px}
  :root #cu h1,:root .p-entrar.zd-cols h1{font-size:34px;line-height:1.12;margin:0 0 20px;text-transform:none;font-weight:800}
  :root #cu .cu-card{background:transparent;border:0;box-shadow:none;padding:0}
  :root .p-entrar.zd-cols .zd-izq>p:not([class]){margin:0 0 6px}
  :root .zd-demo{display:flex;flex-direction:column;position:relative;overflow:hidden;border-radius:28px;padding:28px;min-height:520px;color:var(--negro);
    background:radial-gradient(120% 90% at 85% 0%,#e08a33 0%,var(--naranja) 55%,#b9651a 100%)}
  :root .zd-demo::after{content:"";position:absolute;inset:auto -60px -90px auto;width:260px;height:260px;border-radius:50%;background:rgba(250,245,234,.14);pointer-events:none}
  :root .zd-rotulo{align-self:flex-start;background:var(--crema);color:var(--negro);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
  :root .zd-escena{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;z-index:1;max-width:400px;width:100%;margin:0 auto}
  :root .zd-llamada{display:flex;align-items:center;gap:14px;background:var(--crema);border-radius:18px;padding:14px 16px;box-shadow:0 10px 28px rgba(34,32,28,.18)}
  :root .zd-pulso{flex:none;width:14px;height:14px;border-radius:50%;background:#2f8f4e;box-shadow:0 0 0 0 rgba(47,143,78,.5);animation:zd-pulso 1.4s ease-out 3 both}
  :root .zd-quien{display:flex;flex-direction:column;font-size:14px;line-height:1.35;position:relative;min-height:38px}
  :root .zd-quien b{font-size:16px}
  :root .zd-suena,:root .zd-contesta{position:absolute;left:0;top:22px;white-space:nowrap;font-weight:600;color:var(--z-mut)}
  :root .zd-suena{animation:zd-suena 14s linear infinite both}
  :root .zd-contesta{color:#1f6a39;animation:zd-contesta 14s linear infinite both}
  :root .zd-chat{display:flex;flex-direction:column;gap:10px}
  :root .zd-b{margin:0;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.4;max-width:88%;box-shadow:0 6px 18px rgba(34,32,28,.14)}
  :root .zd-elena{align-self:flex-start;background:var(--crema);border-bottom-left-radius:5px}
  :root .zd-cli{align-self:flex-end;background:var(--negro);color:var(--crema);border-bottom-right-radius:5px}
  :root .zd-b1{animation:zd-b1 14s ease-out infinite both}
  :root .zd-b2{animation:zd-b2 14s ease-out infinite both}
  :root .zd-b3{animation:zd-b3 14s ease-out infinite both}
  :root .zd-cal{display:flex;flex-direction:column;gap:6px;background:var(--crema);border-radius:18px;padding:14px 16px;box-shadow:0 10px 28px rgba(34,32,28,.18);animation:zd-cal 14s ease-out infinite both}
  :root .zd-cal-t{font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--z-acento)}
  :root .zd-hora{display:flex;align-items:center;gap:12px;min-height:34px;border-top:1px solid var(--crema-osc);font-size:14px}
  :root .zd-hora i{font-style:normal;width:44px;color:var(--z-mut);font-variant-numeric:tabular-nums}
  :root .zd-hora em{font-style:normal;font-weight:700;flex:1;background:var(--z-tinte);border-left:4px solid var(--naranja);border-radius:8px;padding:6px 10px;animation:zd-cita 14s ease-out infinite both;transform-origin:left center}
  /* Con la piel inmersiva (y la corporativa encima), <main> lleva la tinta CLARA de la foto (--negro, --z-mut y --z-acento
     cambian en inmersiva.css y alta-corporativa.css) y la demo la heredaba: letra casi blanca sobre burbujas y calendario crema
     (Pedro, captura de producción, 18 oct 2026). La demo es una tarjeta con sus propios fondos claros: fija su tinta aquí,
     valga la piel que valga (los valores de :root de esta hoja, salvo --z-acento: el #8f4a0a de fichas.css, un punto más oscuro; todo ≥ 4,5:1 sobre --crema y --z-tinte). */
  :root .zd-demo{--negro:#22201c;--crema:#faf5ea;--crema-osc:#ece3d0;--z-mut:#5f574c;--z-acento:#8f4a0a;--z-tinte:#fbecd8;color:#22201c;text-shadow:none}
  /* Con la foto detrás (data-escena=foto: la segunda visita, piel.js), el formulario no puede ir suelto: «Email», «Password»,
     la pista, la «o» y «¿Ya tienes cuenta?» son tinta oscura (la de .cu-card) y la foto es oscura. Vuelve la tarjeta blanca,
     la misma del móvil. Sin foto (papel) sigue sin tarjeta, como el 17 oct. */
  :root[data-escena=foto] #cu .cu-card{background:#fff;border:1px solid var(--z-linea);border-radius:var(--z-radio);padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  @keyframes zd-pulso{0%{box-shadow:0 0 0 0 rgba(47,143,78,.55)}100%{box-shadow:0 0 0 14px rgba(47,143,78,0)}}
  @keyframes zd-suena{0%,3%{opacity:0}5%,17%{opacity:1}19%,100%{opacity:0}}
  @keyframes zd-contesta{0%,18%{opacity:0}21%,93%{opacity:1}97%,100%{opacity:0}}
  @keyframes zd-b1{0%,22%{opacity:0;transform:translateY(10px)}27%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
  @keyframes zd-b2{0%,38%{opacity:0;transform:translateY(10px)}43%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
  @keyframes zd-b3{0%,54%{opacity:0;transform:translateY(10px)}59%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
  @keyframes zd-cal{0%,66%{opacity:.35;transform:translateY(6px)}71%,93%{opacity:1;transform:none}97%,100%{opacity:.35}}
  @keyframes zd-cita{0%,74%{opacity:0;transform:scaleX(.2)}80%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){
    :root .zd-pulso,:root .zd-suena,:root .zd-contesta,:root .zd-b,:root .zd-cal,:root .zd-hora em{animation:none}
    :root .zd-pulso{box-shadow:none}
    :root .zd-suena{opacity:0}
    :root .zd-contesta{opacity:1}
  }
}
/* Enlaces legales de «Crea tu cuenta» y «Elige tu plan» (19 oct): sobre una franja clara propia, legibles con foto o sin ella
   (la puerta medía 1,14:1 en «Elige tu plan»: la tinta clara del tema con foto se aplicaba aunque la foto no estuviera detrás). */
:root #cu-legal{display:inline-block;background:#fffdf8;color:#2b2720 !important;padding:6px 10px;border-radius:8px}
:root #cu-legal a{color:#2b2720 !important}