/* =========================================================
   Sillón — sistema visual de Bills
   Cuero negro para lo que manda (barra, menú, acción principal, cifras),
   acero claro para las superficies de trabajo y latón (el dorado) solo en
   los herrajes: lo activo, el foco y la cifra que importa.
   Claro por defecto; oscuro con data-theme="dark".
   ========================================================= */
:root{
  --ink-900:#eceef1;          /* fondo de la página: acero claro */
  --ink-800:#f6f7f9;          /* segunda capa neutra */
  --ink-750:#ffffff;
  --ink-700:#ffffff;          /* tarjetas */
  --ink-650:#f6f7f9;          /* tarjeta al pasar */
  --ink-600:#ffffff;          /* avisos flotantes */
  --ink-500:#c3c8cf;          /* barra de desplazamiento */
  --ink-rgb:236,238,241;
  --tint:22,23,27;            /* capas sobre el fondo */
  --line:rgba(166,128,20,.42);          /* borde de latón */
  --line-soft:#dde1e6;                  /* acero */
  --line-strong:#c2c8cf;

  /* cuero del sillón */
  --cuero:#16171b;
  --cuero-2:#26282e;
  --cuero-hilo:rgba(255,255,255,.17);   /* costura */
  --cuero-linea:rgba(255,255,255,.1);
  --sobre-cuero:#f3f4f6;
  --sobre-cuero-2:#a8aeb7;
  --laton-claro:#e2c25a;                /* latón sobre cuero */

  --gold:#c9a227;
  --gold-press:#b08b1b;
  --gold-hi:#7a5c05;          /* latón para texto sobre blanco */
  --gold-dim:rgba(201,162,39,.15);
  --on-gold:#16171b;
  --cream:#16171b;            /* texto principal */
  --muted:#5a606a;
  --text-2:#30343b;
  --text-3:#646a73;
  --faint:#8a9099;
  --fainter:#c6cbd2;

  --red:#c23b32;
  --red-fg:#a12c24;
  --red-dim:rgba(194,59,50,.09);
  --blue:#3563b8;
  --green:#2f7d4b;
  --green-fg:#236a3c;
  --overlay:rgba(14,15,18,.55);
  --barra:#2b2e34;            /* gráficas */
  --barra-tenue:rgba(22,23,27,.09);
  --boton:var(--cuero);       /* acción principal */
  --boton-hover:#2b2e34;
  --sobre-boton:#ffffff;
  --icono-boton:var(--laton-claro);

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --shadow:0 20px 44px -20px rgba(14,15,18,.32);
  --shadow-sm:0 1px 2px rgba(14,15,18,.05);
  --card-shadow:0 1px 2px rgba(14,15,18,.04);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entradas y respuestas: arranca rápido */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* hojas que suben desde abajo (iOS) */
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:104%;               /* Archivo apenas ensanchada: títulos de tarjeta, nombres y cifras */
  --ancho-placa:110%;         /* títulos de página y portadas */
  --tabbar-h:0px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink-900:#15171a;--ink-800:#1a1c20;--ink-750:#1e2125;--ink-700:#1e2125;--ink-650:#24272c;
  --ink-600:#272a30;--ink-500:#3a3e46;--ink-rgb:21,23,26;--tint:255,255,255;
  --line:rgba(201,162,39,.4);--line-soft:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.17);
  --cuero:#07080a;--cuero-2:#1a1c20;--cuero-linea:rgba(255,255,255,.08);
  --gold-press:#d6b13a;--gold-hi:#e2c25a;--gold-dim:rgba(201,162,39,.15);
  --cream:#eef0f3;--muted:#a0a6b0;--text-2:#c9cdd4;--text-3:#8d939c;--faint:#6d737c;--fainter:#3b4048;
  --red-fg:#ffb0a8;--red-dim:rgba(194,59,50,.16);--green-fg:#a4dcb8;--overlay:rgba(3,4,5,.72);
  --barra:#7d838d;--barra-tenue:rgba(255,255,255,.07);
  --boton:var(--gold);--boton-hover:#d9b43a;--sobre-boton:#16171b;--icono-boton:#16171b;
  --shadow:0 20px 50px rgba(0,0,0,.6);--shadow-sm:0 1px 0 rgba(0,0,0,.4);
  --card-shadow:0 1px 0 rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background-color:var(--ink-900);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  font-family:var(--font-ui);font-size:15px;line-height:1.45;
  color:var(--cream);background:var(--ink-900);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  accent-color:var(--cuero);
}
:root[data-theme="dark"] body{accent-color:var(--gold)}
input,textarea{caret-color:var(--gold-press)}
h1,h2,h3,.display{font-family:var(--font-display);font-stretch:var(--ancho);font-weight:750;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
a{color:var(--cream);text-decoration-color:var(--gold);text-underline-offset:3px}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
::selection{background:var(--gold);color:var(--on-gold)}

.tema-cambiando,.tema-cambiando *,.tema-cambiando *::before,.tema-cambiando *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:ease-out}

/* botón de tema: en la barra de arriba, o flotante en las pantallas de entrar */
.tema-btn{
  width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;cursor:pointer;flex:none;
  border:1px solid var(--line-strong);background:var(--ink-700);color:var(--text-2);
  transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease);
}
.tema-btn:hover{border-color:var(--gold);color:var(--cream)}
.tema-btn svg{width:19px;height:19px}
.tema-btn--flotante{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:60;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--sobre-cuero)}
.tema-btn--flotante:hover{color:#fff;border-color:var(--gold)}
@media print{.tema-btn{display:none}}

/* ---------- scrollbar ---------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--ink-500);border-radius:20px;border:3px solid transparent;background-clip:content-box}
*{scrollbar-color:var(--ink-500) transparent}

/* =========================================================
   Barber pole
   ========================================================= */
/* Tubo de vidrio entre dos remates de latón. Las franjas van en hélice a
   30°; el ciclo sube exactamente --d, que proyectado sobre el eje del
   degradado (cos 30°) es un período entero: la vuelta no da saltos. */
.pole{
  --w:26px;--h:64px;--d:26px;--t:1.45s;
  --cap:calc(var(--w) * .4);--q:calc(var(--d) * .2165064);
  position:relative;display:inline-block;flex:none;width:var(--w);height:var(--h);
}
.pole::before,.pole::after{
  content:"";position:absolute;left:0;right:0;height:var(--cap);z-index:2;
  background:linear-gradient(90deg,#4d3d17 0%,#9c7d31 16%,#e8d08c 34%,#fff4cf 42%,#c9a64a 58%,#7a6124 82%,#3d3012 100%);
}
.pole::before{top:0;border-radius:50% 50% 2px 2px/85% 85% 2px 2px;box-shadow:0 2px 3px rgba(0,0,0,.4)}
.pole::after{bottom:0;border-radius:2px 2px 50% 50%/2px 2px 70% 70%;box-shadow:0 -1px 2px rgba(0,0,0,.35),0 5px 10px -3px rgba(0,0,0,.55)}
.pole i{
  position:absolute;left:13%;right:13%;top:calc(var(--cap) - 2px);bottom:calc(var(--cap) - 2px);
  overflow:hidden;z-index:1;background:#f3eee4;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 10px 18px -8px rgba(0,0,0,.7);
}
.pole i::before{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + var(--d));
  background:repeating-linear-gradient(150deg,
    #b3262f 0 calc(var(--q) - .4px),
    #f3eee4 calc(var(--q) + .4px) calc(var(--q) * 2 - .4px),
    #1f4a94 calc(var(--q) * 2 + .4px) calc(var(--q) * 3 - .4px),
    #f3eee4 calc(var(--q) * 3 + .4px) calc(var(--q) * 4 - .4px),
    #b3262f calc(var(--q) * 4));
  animation:poleRise var(--t) linear infinite;will-change:transform;
}
.pole i::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.4),transparent 14%,transparent 86%,rgba(0,0,0,.4)),
    linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.14) 20%,rgba(255,255,255,0) 29%,rgba(255,255,255,.62) 35%,rgba(255,255,255,.1) 43%,rgba(255,255,255,0) 58%,rgba(0,0,0,.22) 80%,rgba(0,0,0,.6) 100%);
}
.pole--sm{--w:16px;--h:38px;--d:16px;--t:.95s}
.pole--lg{--w:38px;--h:104px;--d:36px;--t:2s}
.pole--xl{--w:58px;--h:176px;--d:54px;--t:2.9s}
@keyframes poleRise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--d)),0)}}
@media (prefers-reduced-motion:reduce){.pole i::before{animation:none}}

/* =========================================================
   Barra de arriba — cuero
   ========================================================= */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:8px clamp(12px,3vw,28px);padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--cuero);color:var(--sobre-cuero);
  border-bottom:1px solid #000;
}
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;color:inherit;cursor:pointer;padding:4px 8px 4px 2px;border-radius:var(--r-md);min-width:0;text-decoration:none}
.brand:hover{background:rgba(255,255,255,.05)}
.brand__text{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.brand__text strong{font-family:var(--font-display);font-stretch:var(--ancho);font-weight:800;font-size:1.02rem;letter-spacing:-.005em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__text small{font-size:.72rem;color:var(--sobre-cuero-2);white-space:nowrap;font-weight:500}
.brand__mark{display:grid;place-items:center;flex:none}
.brand__logo{width:36px;height:36px;border-radius:var(--r-md);object-fit:contain;background:#fff;border:1px solid rgba(255,255,255,.2)}
.topbar__fin{display:flex;align-items:center;gap:8px;flex:none}
.topnav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.topnav a,.topnav button.navlink{
  position:relative;text-decoration:none;color:var(--sobre-cuero-2);font-size:.9rem;font-weight:600;
  padding:10px 12px;border-radius:var(--r-md);transition:color .18s var(--ease),background-color .18s var(--ease);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:0;background:none;cursor:pointer;
}
.topnav a:hover,.topnav button.navlink:hover{color:#fff;background:rgba(255,255,255,.06)}
.topnav a.is-active,.topnav button.navlink.is-active{color:#fff}
.topnav a.is-active .ico{color:var(--laton-claro)}
.topnav a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:-9px;height:3px;border-radius:3px 3px 0 0;background:var(--gold)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);cursor:pointer;flex:none;
  background:var(--ink-700);border:1px solid var(--line-strong);color:var(--text-2);
  transition:color .15s ease,border-color .15s ease,transform .16s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{color:var(--cream);border-color:var(--cream)}}
.icon-btn:active{transform:scale(.94)}
.icon-btn--sm{width:34px;height:34px}
.icon-btn--sm .ico{width:16px;height:16px}

/* controles sobre el cuero */
.topbar .tema-btn,.topbar .icon-btn,.topbar .btn:not(.btn--gold){
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--sobre-cuero);box-shadow:none;
}
.topbar .tema-btn:hover,.topbar .icon-btn:hover,.topbar .btn:not(.btn--gold):hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.topbar .btn--gold{--bg:var(--gold);--fg:var(--on-gold);--bd:var(--gold);box-shadow:none}
.topbar .btn--gold .ico{color:var(--on-gold)}
.topbar .btn--gold:hover{background-color:var(--laton-claro);border-color:var(--laton-claro);color:var(--on-gold)}

/* estado de guardado */
.sync{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--sobre-cuero-2);
  padding:6px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);white-space:nowrap}
.sync i{width:8px;height:8px;border-radius:50%;background:#4fb477;display:block;flex:none}
.sync--pendiente i{background:var(--gold);animation:blink 1.2s infinite}
.sync--error{color:#ffb0a8;border-color:rgba(255,120,110,.45)}
.sync--error i{background:#e5574d}

/* =========================================================
   Página
   ========================================================= */
.view{position:relative;padding:clamp(16px,2.6vw,30px) clamp(12px,3vw,32px) calc(48px + var(--tabbar-h));max-width:1180px;margin:0 auto;animation:viewIn .14s ease-out both}
@keyframes viewIn{from{opacity:0}to{opacity:1}}

.page-head{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0;font-size:1.85rem;font-stretch:var(--ancho-placa);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.page-head .sub{color:var(--muted);font-size:.9rem;margin:6px 0 0;max-width:62ch}
.page-head .spacer{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* =========================================================
   Botones — sólidos, con borde y un pie que se hunde al pulsar
   ========================================================= */
.btn{
  --bg:var(--ink-700);--fg:var(--cream);--bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;
  padding:9px 16px;border-radius:var(--r-md);border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.9rem;font-weight:650;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 0 var(--line-strong);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .16s var(--ease-out),box-shadow .16s var(--ease-out);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
@media (hover:hover) and (pointer:fine){.btn:hover{border-color:var(--cream);background-color:var(--ink-650)}}
.btn:active{transform:scale(.97);box-shadow:none}
.btn .ico{width:17px;height:17px}
/* la acción principal: cuero negro (latón en oscuro) */
.btn--gold{--bg:var(--boton);--fg:var(--sobre-boton);--bd:var(--boton);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.btn--gold .ico{color:var(--icono-boton);stroke-width:2.1}
@media (hover:hover) and (pointer:fine){.btn--gold:hover{background-color:var(--boton-hover);border-color:var(--boton-hover);color:var(--sobre-boton)}}
.btn--ghost{--bg:rgba(var(--tint),.07);--bd:transparent;box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background-color:rgba(var(--tint),.12);border-color:transparent}}
.btn--danger{--bg:var(--ink-700);--fg:var(--red-fg);--bd:rgba(194,59,50,.55);box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn--danger:hover{background-color:var(--red);border-color:var(--red);color:#fff}}
.btn--lg{min-height:50px;padding:12px 22px;font-size:1rem;border-radius:var(--r-lg)}
.btn--sm{min-height:36px;padding:6px 12px;font-size:.84rem;border-radius:var(--r-md);gap:6px}
.btn--sm .ico{width:15px;height:15px}
.btn--bloque{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
.link-btn{background:none;border:0;padding:4px 2px;color:var(--cream);font:inherit;font-weight:650;cursor:pointer;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.link-btn:hover{text-decoration-color:var(--cream)}

/* =========================================================
   Tarjetas
   ========================================================= */
.card{
  background:var(--ink-700);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--card-shadow);position:relative;
}
.card h3{margin:0 0 4px;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.card h3 .ico,.section__head h2 .ico{display:none}
.card .hint,.hint{color:var(--muted);font-size:.86rem;margin:0}
.hint .ico{width:15px;height:15px;vertical-align:-3px;color:var(--gold-press)}
.card--aviso{border-color:var(--line);background:linear-gradient(0deg,var(--gold-dim),var(--gold-dim)),var(--ink-700)}
.card--alerta{border-color:rgba(194,59,50,.45)}

.grid{display:grid;gap:12px}
/* Que una gráfica o tabla ancha se desplace dentro de su tarjeta en vez de
   ensanchar la página entera (en el celular la dejaba alejada y cortada). */
.grid>*{min-width:0}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}

/* Cifras: una franja de cuero con costura, no tarjetas sueltas */
.grid--stats{
  gap:0;position:relative;padding:6px;border-radius:var(--r-lg);
  background:var(--cuero);color:var(--sobre-cuero);border:1px solid #000;
}
:root[data-theme="dark"] .grid--stats{background:var(--ink-700);border-color:var(--line-soft)}
.stat{background:var(--ink-700);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px 14px;min-width:0}
.grid--stats .stat{background:none;border:0;border-radius:0;padding:14px 18px 15px;position:relative}
.grid--stats .stat+.stat{box-shadow:inset 1px 0 0 var(--cuero-linea)}
.stat__label{font-size:.82rem;color:var(--sobre-cuero-2);margin:0 0 6px;font-weight:500}
.stat__value{font-family:var(--font-display);font-stretch:var(--ancho);font-weight:700;font-size:1.7rem;margin:0;line-height:1.05;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid--stats .stat:first-child .stat__value:not(.is-plain){color:var(--laton-claro)}
.stat__value.is-plain{color:#fff;font-stretch:104%}
.stat__foot{margin:6px 0 0;font-size:.8rem;color:#8d939c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =========================================================
   Inicio
   ========================================================= */
.hoy{display:flex;align-items:flex-end;gap:14px 20px;flex-wrap:wrap;margin-bottom:20px}
.hoy__txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column}
/* La fecha va debajo del saludo, no como etiqueta encima */
.hoy__fecha{order:2;margin:6px 0 0;font-size:.95rem;color:var(--muted);font-weight:500}
.hoy h1{margin:0;font-size:2.3rem;font-stretch:var(--ancho-placa);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.hoy__lema{order:3;margin:2px 0 0;color:var(--text-3);font-size:.95rem}
.hoy__acciones{display:flex;gap:8px;flex-wrap:wrap}


/* inicio: columna principal y, en la PC, el panel "Hoy" al costado */
.inicio{display:grid;gap:16px;align-items:start}
.inicio__main{min-width:0}
.inicio__main>.section:first-child{margin-top:0}
.lado,.card.lado{padding:0;overflow:hidden}
.lado__bloque{padding:16px 18px}
.lado__bloque+.lado__bloque{border-top:1px solid var(--line-soft)}
.lado__bloque h3{margin-bottom:8px}
.lado__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lado__lista--scroll{max-height:min(34vh,300px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:4px}
.lado__fila{display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;border-radius:var(--r-md);border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.lado__lista li+li .lado__fila,.lado__lista li.lado__fila+li.lado__fila{border-top:1px solid var(--line-soft);border-radius:0}
button.lado__fila:hover{background:var(--ink-650)}
.lado__fila--cita{cursor:default}
.lado__hora{flex:none;min-width:74px;font-weight:700;font-size:.84rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.lado__quien{flex:1;min-width:0}
.lado__quien b{display:block;font-size:.92rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado__quien small{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado__fila .money{flex:none}
.lado__fila .tag{text-decoration:none;flex:none}
/* gráficas del inicio: una debajo de otra; lado a lado en pantallas anchas */
.graficas{display:grid;gap:16px}
.graficas>.card{min-width:0}
.graficas{margin-top:16px}
.graficas__nota{margin:12px 0 0;text-align:center}
.solo-ancho{display:none}
@media (min-width:900px){.graficas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .solo-ancho{display:block}
  .inicio--con-lado{grid-template-columns:minmax(0,1fr) minmax(320px,380px)}
  .lado{position:sticky;top:78px}
  .inicio__cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1400px){
  .inicio__cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* PC grande: más ancho útil y lo principal más grande (el menú de arriba no cambia) */
@media (min-width:1280px){
  .view{max-width:1360px}
  .hoy h1{font-size:2.75rem}
  .hoy__acciones .btn--lg{min-height:56px;padding:14px 28px;font-size:1.04rem;border-radius:11px}
  .hoy__acciones .btn--lg .ico{width:20px;height:20px}
  .grid--stats .stat{padding:16px 20px 17px}
  .stat__label{font-size:.86rem}
  .stat__value{font-size:2.05rem}
  .stat__foot{font-size:.84rem}
  .barbers-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
  .barber-card{padding:16px 18px}
  .barber-card .avatar--sm{width:44px;height:44px;font-size:1rem;border-radius:var(--r-lg)}
  .barber-card__name{font-size:1.05rem}
  .barber-card__rows{font-size:.88rem}
  .section__head h2{font-size:1.25rem}
}

/* primeros pasos */
.pasos{margin-bottom:16px}
.card.pasos{background:transparent;border:1px dashed var(--line-strong);box-shadow:none}
.pasos__cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pasos__cab h3{margin:0}
.pasos__barra{flex:1 1 120px;height:6px;border-radius:99px;background:var(--barra-tenue);overflow:hidden;max-width:220px}
.pasos__barra i{display:block;height:100%;background:var(--gold);border-radius:99px}
.pasos__lista{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.paso{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--ink-700);text-decoration:none;color:inherit;font-size:.9rem;cursor:pointer;text-align:left;width:100%;box-shadow:0 1px 0 var(--line-strong)}
.paso:hover{border-color:var(--cream)}
.paso__num{width:26px;height:26px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;font-size:.8rem;font-weight:800;background:var(--cuero);color:var(--laton-claro)}
.paso__num .ico{width:15px;height:15px;stroke-width:2.4}
.paso--hecho{color:var(--muted);background:transparent;border-color:var(--line-soft);box-shadow:none}
.paso--hecho .paso__num{background:var(--green);color:#fff}
.paso--hecho b{text-decoration:line-through;text-decoration-color:rgba(var(--tint),.35);font-weight:500}
.paso b{font-weight:650}
.paso small{display:block;color:var(--muted);font-size:.78rem}

/* consejo para quien entra por primera vez */
.tip{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--ink-700);border:1px solid var(--line);font-size:.88rem;color:var(--text-2);margin-bottom:16px}
.tip>.ico{color:var(--gold-press);margin-top:1px}
.tip p{margin:0;flex:1}
.tip .tip__cerrar{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;border-radius:6px;display:grid;place-items:center}
.tip .tip__cerrar:hover{color:var(--cream)}

/* aviso enlazado (citas por responder) */
.aviso-link{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-lg);border:1px solid var(--line-soft);background:var(--ink-700);text-decoration:none;color:inherit;box-shadow:var(--card-shadow)}
.aviso-link>.ico{color:var(--gold-press)}
.aviso-link span{flex:1;min-width:0}
.aviso-link b{display:block;font-size:.95rem;font-weight:700}
.aviso-link small{display:block;color:var(--muted);font-size:.84rem}
.aviso-link--vivo{border-color:var(--gold);background:linear-gradient(0deg,var(--gold-dim),var(--gold-dim)),var(--ink-700)}
.aviso-link--vivo>.ico{color:var(--cream)}
.aviso-link .atajo__ir{color:var(--muted)}

/* equipo en la portada */
.barbers-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.barber-card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--ink-700);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:12px 14px;color:inherit;
  box-shadow:var(--card-shadow);transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.barber-card:hover{border-color:var(--cream)}
.barber-card__info{flex:1;min-width:0}
.barber-card__name{display:block;font-family:var(--font-display);font-stretch:var(--ancho);font-weight:750;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barber-card__rows{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.barber-card__rows b{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums}
.barber-card .atajo__ir{color:var(--muted)}
/* iniciales: placa de latón sobre cuero */
.avatar{
  width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-stretch:118%;font-size:1rem;font-weight:800;letter-spacing:.02em;
  color:var(--laton-claro);background:var(--cuero);
}
:root[data-theme="dark"] .avatar{background:#2a2d33}
.avatar--sm{width:34px;height:34px;border-radius:var(--r-md);font-size:.8rem}
.avatar--xs{width:26px;height:26px;border-radius:6px;font-size:.68rem}
.atajo__ir{transition:transform .18s var(--ease)}
.barber-card:hover .atajo__ir,.aviso-link:hover .atajo__ir{transform:translateX(3px);color:var(--cream)}

/* =========================================================
   Pestañas
   ========================================================= */
.tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-lg);background:rgba(var(--tint),.08);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  border:0;background:none;color:var(--text-2);font-size:.88rem;font-weight:650;cursor:pointer;flex:none;
  padding:8px 15px;border-radius:var(--r-md);transition:color .15s var(--ease),background-color .15s var(--ease);min-height:36px;white-space:nowrap;
}
.tabs button:hover{color:var(--cream);background:rgba(var(--tint),.07)}
.tabs button.is-active{color:var(--sobre-boton);background:var(--boton);box-shadow:0 1px 0 rgba(0,0,0,.25)}

/* =========================================================
   Fechas y campos
   ========================================================= */
.datebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.datebar__fin{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;gap:2px;background:var(--ink-700);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:3px;box-shadow:0 1px 0 var(--line-strong)}
.stepper button{width:36px;height:36px;border:0;border-radius:6px;background:none;color:var(--text-2);cursor:pointer;display:grid;place-items:center;transition:background-color .15s ease,color .15s ease;flex:none}
.stepper button:hover{background:rgba(var(--tint),.07);color:var(--cream)}
.stepper .label{padding:0 10px;font-weight:650;font-size:.9rem;min-width:170px;text-align:center;flex:1}

input,select,textarea{
  font-family:inherit;font-size:.94rem;color:var(--cream);
  background:var(--ink-700);border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:9px 12px;min-height:42px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);width:100%;
}
textarea{line-height:1.45}
input:hover,select:hover,textarea:hover{border-color:#9aa1ab}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold-press);box-shadow:0 0 0 3px rgba(201,162,39,.28)}
input::placeholder,textarea::placeholder{color:#676d76}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#868c95}
input[readonly]{background:rgba(var(--tint),.04)}
select option{background:var(--ink-700);color:var(--cream)}
label.field{display:block;margin-bottom:14px}
label.field>span{display:block;font-size:.84rem;font-weight:650;color:var(--text-2);margin-bottom:6px}
/* medidor de fortaleza de la clave (assets/js/clave.js) */
label.field>.fuerza-meter{margin:0;font-size:inherit;font-weight:400}
.fuerza{display:block;height:5px;border-radius:99px;background:rgba(var(--tint),.08);margin-top:8px;overflow:hidden}
.fuerza i{display:block;height:100%;width:0;border-radius:99px;background:var(--red);transition:width .3s var(--ease),background-color .3s var(--ease)}
.fuerza-txt{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px;min-height:1.3em;font-size:.8rem;font-weight:400;color:var(--text-2)}
.fuerza-txt b{font-weight:700}
.fuerza-meter[data-nivel="0"] b{color:var(--red-fg)}
.fuerza-meter[data-nivel="1"] i{background:var(--gold)}
.fuerza-meter[data-nivel="1"] b{color:var(--gold-hi)}
.fuerza-meter[data-nivel="2"] i{background:#7fb383}
.fuerza-meter[data-nivel="2"] b{color:var(--green-fg)}
.fuerza-meter[data-nivel="3"] i{background:#14532d}
.fuerza-meter[data-nivel="3"] b{color:var(--green-fg)}
:root[data-theme="dark"] .fuerza-meter[data-nivel="3"] i{background:#2f9e5b}
.field-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.field-row input,.field-row select{min-width:0}
.field-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Safari (iOS/iPadOS) mide el control interno de type=time/date con su
   propio ancho mínimo y lo desborda fuera de la caja. */
input[type="time"],input[type="date"]{-webkit-min-logical-width:calc(100% - 26px)}
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit{max-width:100%}
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-fields-wrapper{min-width:0;max-width:100%;overflow:hidden}
.datebar input[type="date"]{width:auto;min-width:150px}
input[type="checkbox"]{width:18px;height:18px;min-height:0;padding:0;flex:none}
select{-webkit-appearance:none;appearance:none;padding-right:38px;
  background:var(--ink-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330343b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px}
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select[multiple]{background-image:none;padding-right:12px}
/* lista de sugerencias (datalist): mismo chevrón, sigue abriendo la lista */
input[list]::-webkit-calendar-picker-indicator{opacity:1;color:transparent;cursor:pointer;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330343b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat}
:root[data-theme="dark"] input[list]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* =========================================================
   Agenda de turnos
   ========================================================= */
.agenda{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.slot{
  --accent:var(--gold);
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;width:100%;min-height:54px;
  background:var(--ink-700);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:9px 12px;color:inherit;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.slot:hover{border-color:var(--cream)}
.slot__time{font-weight:700;font-size:.88rem;color:var(--muted);min-width:66px;flex:none;font-variant-numeric:tabular-nums}
.slot__body{flex:1;min-width:0}
.slot__client{margin:0;font-weight:650;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot__meta{margin:1px 0 0;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot__price{font-family:var(--font-display);font-stretch:var(--ancho);font-size:1.05rem;font-weight:700;color:var(--cream);flex:none;font-variant-numeric:tabular-nums}
/* ocupado: sólido; libre: punteado; pasado: rayado; ahora: anillo de latón */
.slot--taken{border-color:var(--line-strong);background:var(--ink-700);box-shadow:0 1px 0 var(--line-strong)}
.slot--taken .slot__time{color:var(--cream)}
.slot--free{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.slot--free .slot__client{color:var(--text-3);font-weight:500}
.slot--free:hover{background:var(--ink-700)}
.slot--free:hover .slot__client{color:var(--cream)}
div.slot{cursor:default}
div.slot:hover{border-color:var(--line-soft)}
div.slot--free:hover .slot__client{color:var(--text-3)}
div.slot--con-menu{position:relative;padding-right:46px;cursor:pointer}
.slot--con-menu:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.slot__menu{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--r-md);background:none;color:var(--muted);cursor:pointer}
.slot__menu .ico{width:20px;height:20px;stroke-width:3}
@media (hover:hover) and (pointer:fine){.slot__menu:hover{background:rgba(var(--tint),.08);color:var(--cream)}}
.slot__menu:focus-visible{outline:2px solid var(--gold)}
.menu-cobro{display:grid;gap:8px}
.slot--extra{justify-content:center;gap:6px;min-height:36px;padding:5px 12px;font-size:.84rem;font-weight:650;color:var(--text-2);border-style:dashed;background:transparent}
.slot--extra .ico{width:14px;height:14px}
.slot--extra:hover{color:var(--cream)}
.slot--free .slot__price{color:var(--faint)}
.slot--cita{cursor:default;box-shadow:inset 3px 0 0 var(--gold)}
.slot--cita .slot__price{color:var(--gold-hi)}
.slot--bloqueada{border:1px solid rgba(194,59,50,.45);color:var(--red-fg);
  background:repeating-linear-gradient(135deg,var(--red-dim) 0 7px,transparent 7px 14px),var(--ink-700)}
.slot--bloqueada .slot__time,.slot--bloqueada .slot__client{color:var(--red-fg)}
.slot--bloqueada .slot__meta{color:var(--red-fg);opacity:.8}
.slot--bloqueada .slot__price{color:var(--red)}
@media (hover:hover) and (pointer:fine){button.slot--bloqueada:hover{border-color:var(--red)}}
div.slot--bloqueada{opacity:.6}
.slot--descanso{background:rgba(var(--tint),.05);border-color:transparent}
.slot--descanso .slot__client{color:var(--muted);font-weight:500}
.slot--descanso .slot__price{color:var(--faint)}
.slot{transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out)}
button.slot:active{transform:scale(.98)}
.leyenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;font-size:.8rem;color:var(--muted)}
.leyenda li{display:inline-flex;align-items:center;gap:6px}
.leyenda__m{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--line-strong)}
.leyenda__m--libre{border-style:dashed;background:transparent}
.leyenda__m--cita{background:var(--ink-700);box-shadow:inset 3px 0 0 var(--gold)}
.leyenda__m--bloqueada{border-color:rgba(194,59,50,.5);background:repeating-linear-gradient(135deg,rgba(194,59,50,.35) 0 3px,transparent 3px 6px)}
.leyenda__m--descanso{border-color:transparent;background:rgba(var(--tint),.1)}
.slot--now{border-color:var(--gold);border-style:solid;box-shadow:0 0 0 1px var(--gold)}
.slot--now .slot__time{color:var(--gold-hi)}
.slot--now .slot__time::after{content:" · ahora";font-size:.72rem;font-weight:650}
@keyframes blink{50%{opacity:.25}}

/* =========================================================
   Tablas
   ========================================================= */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line-soft);background:var(--ink-700);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px}
thead th{
  text-align:left;font-size:.8rem;color:var(--muted);
  padding:10px 12px;background:rgba(var(--tint),.035);border-bottom:1px solid var(--line-soft);font-weight:650;white-space:nowrap;
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft)}
tbody tr:hover{background:rgba(var(--tint),.03)}
tbody tr:last-child td{border-bottom:0}
tfoot td{padding:11px 12px;font-weight:700;border-top:1px solid var(--line-strong);background:rgba(var(--tint),.035)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.money{font-family:var(--font-display);font-stretch:var(--ancho);font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums}

.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;font-size:.76rem;font-weight:650;background:var(--gold-dim);color:var(--gold-hi);border:1px solid var(--line);white-space:nowrap}
.tag--muted{background:rgba(var(--tint),.06);color:var(--text-2);border-color:var(--line-soft)}
.tag--ok{background:rgba(47,125,75,.1);color:var(--green-fg);border-color:rgba(47,125,75,.32)}

.empty{
  text-align:center;padding:30px 18px;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:rgba(var(--tint),.02);
}
.empty .pole{margin-bottom:12px;opacity:.9}
.empty p{margin:0 0 4px;font-family:var(--font-display);font-stretch:var(--ancho);font-weight:700;font-size:1.08rem;color:var(--cream)}
.empty small{font-size:.86rem;display:block;max-width:46ch;margin:0 auto}

/* =========================================================
   Gráficos
   ========================================================= */
.chart{display:flex;align-items:flex-end;gap:var(--gap,10px);height:170px;padding:10px 14px 0;overflow-x:auto}
.bar{flex:1 1 0;min-width:24px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.bar__track{flex:1 1 0;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
.bar__fill{
  width:min(100%,46px);border-radius:3px 3px 0 0;position:relative;background:var(--barra);
  transform-origin:bottom;animation:barGrow .35s var(--ease-out) both;min-height:3px;
}
.bar:hover .bar__fill{background:var(--gold)}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar__val{font-size:.72rem;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650}
.bar__lbl{font-size:.72rem;color:var(--muted);white-space:nowrap;font-weight:500}
/* El valor de arriba y la etiqueta de abajo ocupan siempre su renglón, aunque
   estén vacíos: si no, una barra sin etiqueta (las medias horas del Ritmo por
   hora) tenía más carril que las demás y las bases quedaban escalonadas. */
.bar__val,.bar__lbl{display:block;min-height:1.35em;line-height:1.35}
.bar--dim .bar__fill{background:var(--barra-tenue)}
.bar--dim .bar__val{color:var(--faint)}

.rank{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.rank__row{display:flex;align-items:center;gap:12px}
.rank__bar{flex:1;height:8px;border-radius:2px;overflow:hidden}
.rank__bar i{display:block;height:100%;border-radius:2px;background:var(--barra);animation:rankGrow .4s var(--ease-out) both;transform-origin:left}
.rank__row:first-child .rank__bar i{background:var(--gold)}
@keyframes rankGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rank__name{width:120px;font-weight:650;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank__val{width:118px;text-align:right}

/* =========================================================
   Vista de equipo — parrilla por horas
   ========================================================= */
/* Columnas del mismo ancho (table-layout:fixed), filas de la misma altura,
   hora fija a la izquierda al desplazar en el móvil. */
.parrilla{
  overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--ink-700);box-shadow:var(--card-shadow);
}
.parrilla table{
  table-layout:fixed;width:100%;min-width:calc(88px + var(--cols,3) * 150px + 110px);
  border-collapse:separate;border-spacing:0;font-size:.86rem;
}
.parrilla col.c-hora{width:88px}
.parrilla col.c-total{width:110px}
.parrilla thead th{
  padding:12px 8px 11px;background:var(--ink-700);border-bottom:1px solid var(--line-strong);
  text-align:center;vertical-align:bottom;text-transform:none;letter-spacing:0;color:var(--cream);
}
.parrilla thead th+th{border-left:1px solid var(--line-soft)}
.parrilla thead th.p-hora{font-size:.8rem;color:var(--muted);vertical-align:middle}
.p-barbero{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.p-barbero__nombre{
  font-family:var(--font-display);font-stretch:var(--ancho);font-size:1rem;font-weight:700;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.p-barbero a.p-barbero__nombre{color:inherit;text-decoration:none}
.p-barbero a.p-barbero__nombre:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.p-barbero__caja{font-size:.76rem;color:var(--muted);white-space:nowrap}
.p-barbero__caja .money{font-size:.86rem}

.parrilla tbody td,.parrilla tbody th{
  height:54px;padding:5px;border-bottom:1px solid rgba(var(--tint),.05);vertical-align:middle;
}
.parrilla tbody td{border-left:1px solid rgba(var(--tint),.05)}
.parrilla tbody tr:hover{background:transparent}
.parrilla tbody tr:hover td,.parrilla tbody tr:hover th{background:rgba(var(--tint),.025)}
.parrilla tbody tr.p-punto td,.parrilla tbody tr.p-punto th{border-top:1px solid rgba(var(--tint),.09)}
.parrilla tbody tr:last-child td,.parrilla tbody tr:last-child th{border-bottom:0}

.parrilla .p-hora{
  position:sticky;left:0;z-index:1;background:var(--ink-700);
  text-align:center;border-right:1px solid var(--line-soft);
}
.parrilla thead .p-hora{background:var(--ink-700);z-index:2}
.parrilla tbody .p-hora b{display:block;font-size:.98rem;color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums}
.parrilla tbody .p-hora small{display:block;font-size:.66rem;color:var(--muted);margin-top:1px;font-weight:600}
.parrilla tbody tr:not(.p-punto) .p-hora b{color:var(--muted);font-weight:500}

.parrilla .p-total{text-align:center;font-variant-numeric:tabular-nums}
.parrilla tbody .p-total{background:rgba(var(--tint),.03)}
.parrilla .p-vacio{color:var(--fainter)}

/* hueco libre: mismo tamaño que una cita, el "+" solo se insinúa */
.p-libre{
  display:grid;place-items:center;width:100%;height:42px;border-radius:var(--r-md);cursor:pointer;
  background:transparent;border:1px dashed var(--line-strong);color:var(--faint);
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.p-libre:hover,.p-libre:focus-visible{border-color:var(--cream);border-style:solid;color:var(--cream);background:var(--ink-700)}
.p-libre--fija{cursor:default;border-color:rgba(var(--tint),.05)}

/* cita registrada */
.p-cita{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:1px;
  width:100%;min-height:42px;padding:5px 10px 5px 11px;text-align:left;cursor:pointer;color:inherit;
  background:rgba(var(--tint),.045);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);animation:cardIn .3s var(--ease) both;
}
.p-cita+.p-cita{margin-top:5px}
/* Otro corte en un turno ya atendido: discreto, para no competir con los cobros */
.p-mas{display:flex;align-items:center;justify-content:center;width:100%;margin-top:5px;padding:2px 0;
  border:1px dashed rgba(var(--tint),.12);border-radius:6px;background:none;color:var(--faint);cursor:pointer}
.p-mas .ico{width:13px;height:13px}
.p-mas:hover,.p-mas:focus-visible{border-color:var(--cream);color:var(--cream)}
.p-cita:hover{border-color:var(--cream);background-color:var(--ink-700)}
.p-cita__cliente{font-weight:650;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-cita__precio{grid-row:span 2;font-family:var(--font-display);font-stretch:var(--ancho);font-weight:700;color:var(--cream);font-size:.95rem;font-variant-numeric:tabular-nums}
.p-cita__servicio{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* turno actual */
.parrilla tbody tr.is-now td,.parrilla tbody tr.is-now th{background:var(--gold-dim)}
.parrilla tbody tr.is-now .p-hora b{color:var(--gold-hi);font-weight:800}


/* citas en lista */
.cita-fila{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 14px;background:var(--ink-700);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--card-shadow)}
.cita-fila__cuando{flex:none;min-width:74px;text-align:center;padding:6px 8px;border-radius:var(--r-md);background:var(--cuero);color:var(--sobre-cuero)}
.cita-fila__cuando b{display:block;font-family:var(--font-display);font-stretch:var(--ancho);color:var(--laton-claro);font-size:.95rem}
.cita-fila__cuando span{display:block;font-size:.8rem;color:var(--sobre-cuero);font-weight:600}
.cita-fila__quien{flex:1 1 200px;min-width:0}
.cita-fila__quien p{margin:0}
.cita-fila__quien p+p{margin-top:2px}
.cita-fila__acciones{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
@media (max-width:760px){.cita-fila__acciones{width:100%;flex-wrap:nowrap}.cita-fila__acciones .btn{flex:1 1 0;min-width:0;padding-inline:8px}}

/* día grande del horario */
.dia-grande{display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.dia-grande .btn{width:48px;height:48px;padding:0;flex:none}
.dia-grande__txt{flex:1;text-align:center}
.dia-grande__txt b{display:block;font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:1.9rem;line-height:1.1;letter-spacing:-.015em}
.dia-grande__txt span{display:block;color:var(--muted);font-size:.92rem;text-transform:capitalize}
/* ficha de solo lectura */
.ficha{display:grid;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.ficha__fila{display:flex;justify-content:space-between;gap:14px;padding:10px 14px}
.ficha__fila+.ficha__fila{border-top:1px solid var(--line-soft)}
.ficha__fila span{color:var(--muted);font-size:.86rem}

/* permisos de los barberos */
.permisos{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.permiso{
  display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;color:inherit;
  padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--line-strong);
  background:var(--ink-700);transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out);font-family:inherit;box-shadow:0 1px 0 var(--line-strong);
}
@media (hover:hover) and (pointer:fine){.permiso:hover:not(:disabled){border-color:var(--cream)}}
.permiso:active:not(:disabled){transform:scale(.97)}
.permiso b{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:650}
.permiso small{color:var(--muted);font-size:.78rem;line-height:1.4}
.permiso.is-active{border-color:var(--gold);background:linear-gradient(0deg,var(--gold-dim),var(--gold-dim)),var(--ink-700);box-shadow:0 0 0 1px var(--gold) inset}
.permiso.is-active b{color:var(--cream)}
.permiso.is-active b .ico{color:var(--gold-press)}
.permiso:disabled{opacity:.5;cursor:not-allowed}
.horas{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
.horas .permiso{align-items:center;text-align:center;padding:9px 4px}

/* equipo en Ajustes */
.equipo-fila{display:flex;align-items:center;gap:8px;padding:9px 0}
.equipo-fila+.equipo-fila{border-top:1px solid var(--line-soft)}
.equipo-fila input{flex:1 1 150px;min-width:0}
.alta{display:grid;gap:8px;grid-template-columns:1fr 1fr auto;margin-top:12px}

/* lista de servicios de Ajustes: nombre, precio, cuánto dura, quitar */
.svc-lista{margin-top:2px}
.svc-fila,.svc-cab{display:grid;grid-template-columns:minmax(0,1fr) 92px 134px auto;gap:8px;align-items:center}
.svc-fila{margin-bottom:8px}
.svc-cab{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.svc-lista[data-sin-dur] .svc-fila{grid-template-columns:minmax(0,1fr) 92px auto}
.svc-fila input,.svc-fila select{min-width:0;width:100%}
@media (max-width:560px){
  .svc-cab{display:none}
  .svc-fila,.svc-lista[data-sin-dur] .svc-fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
  .svc-fila .sName{grid-column:1/-1}
  .svc-lista[data-sin-dur] .svc-fila .sPrecio{grid-column:1/3}
}


/* cierres: el selector de qué cierre es, y los títulos de cada parte del documento */
.cierre-tipos{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 14px}
.cierre-tipo{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--card);color:inherit;font:inherit;cursor:pointer;
}
.cierre-tipo b{display:flex;align-items:center;gap:7px;font-size:.95rem;font-weight:700}
.cierre-tipo small{font-size:.78rem;line-height:1.35;color:var(--muted)}
.cierre-tipo.is-active{border-color:var(--gold);background:var(--gold-soft,rgba(201,162,39,.12))}
@media (hover:hover) and (pointer:fine){.cierre-tipo:hover:not(.is-active){border-color:var(--cream)}}
.invoice__parte{margin:24px 0 10px;padding-bottom:6px;border-bottom:2px solid currentColor;font-weight:800;font-size:.98rem;letter-spacing:.03em;text-transform:uppercase}
.invoice__parte small{display:block;margin-top:2px;font-weight:500;font-size:.78rem;letter-spacing:0;text-transform:none;opacity:.7}

/* logo */
.logo-caja{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.logo-caja__vista{
  width:96px;height:96px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;overflow:hidden;
  border:1px dashed var(--line-strong);background:rgba(var(--tint),.03);color:var(--muted);font-size:.76rem;text-align:center;
}
.logo-caja__vista img{width:100%;height:100%;object-fit:contain;padding:8px}
.invoice__logo{width:60px;height:60px;object-fit:contain;border-radius:var(--r-lg);flex:none}

/* pasos numerados (app en el teléfono) */
.como{margin:8px 0 0;padding-left:20px;color:var(--text-2);font-size:.88rem}
.como li{margin:3px 0}

/* =========================================================
   Cierre — papel blanco, cinta del pole arriba
   ========================================================= */
.invoice{
  background:#fff;color:#16171b;border-radius:var(--r-lg);border:1px solid #d6dae0;
  padding:clamp(24px,4vw,44px);box-shadow:var(--shadow);position:relative;overflow:hidden;
  animation:viewIn .3s var(--ease) both;
}
.invoice::before{
  content:"";position:absolute;top:0;left:0;right:0;height:8px;
  background:repeating-linear-gradient(115deg,#b3262f 0 14px,#fff 14px 28px,#1f4a94 28px 42px,#fff 42px 56px);
}
.invoice::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:14px;
  background:radial-gradient(circle at 10px -4px,transparent 10px,#eceef1 11px) repeat-x;
  background-size:20px 14px;
}
:root[data-theme="dark"] .invoice{border-color:transparent}
:root[data-theme="dark"] .invoice::after{background-image:radial-gradient(circle at 10px -4px,transparent 10px,#15171a 11px)}
.invoice__head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;margin:14px 0 26px}
.invoice__shop{font-family:var(--font-display);font-stretch:120%;font-weight:800;font-size:1.9rem;margin:0;letter-spacing:-.015em}
.invoice__tagline{margin:4px 0 0;font-size:.86rem;color:#5a606a}
.invoice__meta{text-align:right;font-size:.84rem;color:#4a4f57;line-height:1.7}
.invoice__meta b{color:#16171b}
.invoice__title{
  font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1rem;margin:0 0 4px;letter-spacing:.08em;text-transform:uppercase;
}
.invoice hr{border:0;border-top:1px dashed #c8cdd4;margin:20px 0}
.invoice table{min-width:0;color:#16171b}
.invoice .table-wrap{background:transparent}
.invoice thead th{background:transparent;color:#5a606a;border-bottom:1.5px solid #16171b}
.invoice tbody td{border-bottom:1px solid #e3e6ea}
.invoice tbody tr:hover{background:#f6f7f9}
.invoice tfoot td{background:transparent;border-top:2px solid #16171b;color:#16171b}
.invoice .money{color:#16171b}
.invoice__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:8px;
  padding:16px 20px;border-radius:var(--r-lg);background:#16171b;color:#f3f4f6;
}
.invoice__total span{font-size:.86rem;color:#a8aeb7;font-weight:600}
.invoice__total b{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:1.9rem;color:#e2c25a;font-variant-numeric:tabular-nums}
.invoice .es-perdida{color:#c23b32}
.cuentas{border-top:1px solid #e3e6ea}
.cuentas__fila{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid #e3e6ea;font-size:.94rem}
.cuentas__fila b{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.cuentas__fila small{font-size:.78rem;color:#5a606a;font-weight:500}
.cuentas__grupo summary{cursor:pointer;list-style:none}
.cuentas__grupo summary::-webkit-details-marker{display:none}
.cuentas__grupo summary span{display:inline-flex;align-items:center;gap:6px}
.cuentas__flecha{width:14px;height:14px;transition:transform .15s ease;color:#8a9099}
.cuentas__grupo[open] .cuentas__flecha{transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){.cuentas__grupo summary:hover{background:rgba(var(--tint),.04)}}
.cuentas__grupo summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cuentas__detalle{padding:4px 12px 12px 32px;border-bottom:1px solid #e3e6ea;background:rgba(0,0,0,.015)}
.cuentas__detalle table{font-size:.86rem}
.cuentas__resumen{font-size:.84rem;color:#5a606a;border-bottom:0}
.invoice__subtotal td{font-size:.84rem;color:#5a606a;border-bottom:0!important}
.invoice__neto{margin-top:12px}
.invoice__neto.es-perdida b{color:#ff8f86}
.invoice__sign{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;font-size:.8rem;color:#5a606a}
.invoice__sign div{flex:1;min-width:170px;border-top:1px solid #16171b;padding-top:8px}
.invoice__note{margin-top:22px;text-align:center;color:#5a606a;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#f1f3f6;border:1px solid #d6dae0;border-radius:6px;padding:5px 11px;font-size:.82rem}
.chip b{font-weight:650}

/* =========================================================
   Diálogos
   ========================================================= */
.modal-root{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.modal-root::before{content:"";position:absolute;inset:0;background:var(--overlay);animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;width:min(540px,100%);max-height:min(88vh,860px);overflow:auto;overscroll-behavior:contain;
  background:var(--ink-700);border:1px solid var(--line-soft);border-radius:14px;padding:22px 22px 18px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.55);animation:modalIn .2s var(--ease-out) both;
}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal h2{margin:0 48px 4px 0;font-size:1.35rem;font-stretch:var(--ancho);font-weight:800;letter-spacing:-.02em}
.modal .modal__sub{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.modal__actions:empty{display:none}
.modal__close{position:absolute;top:14px;right:14px}
.quick-prices{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 6px}
.quick-prices button{
  border:1px solid var(--line-strong);background:var(--ink-700);color:var(--cream);
  border-radius:var(--r-md);padding:6px 13px;min-height:38px;font-size:.9rem;font-weight:700;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out);font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 var(--line-strong);
}
.quick-prices button:hover{border-color:var(--cream)}
.quick-prices button.is-active{border-color:var(--boton);color:var(--sobre-boton);background:var(--boton);box-shadow:none}
.divider{height:1px;background:var(--line-soft);margin:16px 0}

/* =========================================================
   Avisos flotantes
   ========================================================= */
.toasts{position:fixed;bottom:calc(18px + var(--tabbar-h) + env(safe-area-inset-bottom));right:18px;z-index:120;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-lg);
  background:var(--cuero);border:1px solid #000;color:#f3f4f6;
  box-shadow:var(--shadow);font-size:.9rem;font-weight:500;animation:toastIn .3s var(--ease-out) both;max-width:360px;
}
:root[data-theme="dark"] .toast{background:#24262b;border-color:rgba(255,255,255,.1)}
.toast.is-out{animation:toastOut .18s ease-in forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
.toast .dot{width:8px;height:8px;border-radius:50%;background:#4fb477;flex:none}
.toast--err{border-color:#e5574d}
.toast--err .dot{background:#e5574d}

/* =========================================================
   Utilidades
   ========================================================= */
.section{margin-top:24px}
.section__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.section__head h2{margin:0;font-size:1.2rem;display:flex;align-items:center;gap:8px}
.section__head .spacer{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.solo-movil{display:none}

/* =========================================================
   Celular y tablet chica
   ========================================================= */
@media (max-width:760px){
  body{font-size:15px}
  /* iPhone agranda la pantalla al tocar un campo con letra de menos de 16px */
  input,select,textarea{font-size:16px;min-height:46px}
  .btn{min-height:46px}
  .btn--sm{min-height:40px}
  .solo-movil{display:initial}
  .solo-pc{display:none!important}

  .topbar{gap:8px;padding-left:12px;padding-right:12px}
  .con-tabbar .topbar{background:var(--cuero)}
  .brand__text small{display:none}
  .brand__text strong{font-size:1rem;font-stretch:100%}
  .sync span{display:none}
  .sync{padding:7px;border-radius:50%}

  /* el menú de la app baja a una barra fija de cuero con icono y nombre */
  .con-tabbar{--tabbar-h:64px}
  .topnav--app{
    position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;gap:0;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    background:var(--cuero);border-top:1px solid #000;
  }
  .topnav--app a{flex-direction:column;gap:4px;padding:6px 2px;min-height:56px;justify-content:center;font-size:.72rem;border-radius:var(--r-md);color:var(--sobre-cuero-2)}
  .topnav--app a .ico{width:22px;height:22px}
  .topnav--app a.is-active{background:none;color:#fff}
  .topnav--app a.is-active .ico{stroke-width:2.2;color:var(--laton-claro)}
  .topnav--app a.is-active::after{content:none}
  .topnav--app a.is-active::before{content:"";position:absolute;top:-4px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
  .topnav--app a.nav-barber{display:none}
  .topbar__fin{margin-left:auto}

  .view{padding:16px 12px calc(28px + var(--tabbar-h) + env(safe-area-inset-bottom))}
  .page-head{margin-bottom:14px}
  .page-head h1{font-size:1.55rem}
  .page-head .spacer{margin-left:0;width:100%}
  .page-head .spacer>.btn{flex:1}
  .page-head .tabs,.pestanas-pc .tabs{width:100%}
  .tabs button{flex:1}

  .hoy{margin-bottom:14px}
  .hoy h1{font-size:1.75rem}
  /* en el celular, de los primeros pasos solo lo que falta */
  .pasos__lista li:has(.paso--hecho){display:none}
  .hoy__acciones{width:100%}
  .hoy__acciones .btn{flex:1 1 140px}
  .hoy__acciones .btn--gold{flex-basis:100%}

  .grid--stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .grid--stats .stat{padding:12px 14px}
  .grid--stats .stat:nth-child(odd){box-shadow:none}
  .grid--stats .stat:nth-child(even){box-shadow:inset 1px 0 0 var(--cuero-linea)}
  .grid--stats .stat:nth-child(n+3){border-top:1px solid var(--cuero-linea)}
  .grid--stats .stat:last-child:nth-child(odd){grid-column:1/-1;box-shadow:none}
  .stat__value{font-size:1.45rem}
  .grid--2{grid-template-columns:minmax(0,1fr)}
  .barbers-grid{grid-template-columns:1fr;gap:8px}
  .agenda{grid-template-columns:1fr;gap:6px}

  .datebar .stepper{flex:1 1 100%}
  .stepper .label{min-width:0;font-size:.88rem}
  .datebar input[type="date"]{flex:1 1 150px}
  .datebar__fin{margin-left:0;width:100%}
  .datebar__fin .btn{flex:1}

  .parrilla table{min-width:calc(62px + var(--cols,3) * 128px + 74px)}
  .parrilla col.c-hora{width:62px}
  .parrilla col.c-total{width:74px}
  .alta{grid-template-columns:1fr}
  .invoice{padding:20px 14px 26px;border-radius:var(--r-md)}
  .invoice__shop{font-size:1.45rem}
  .invoice__meta{text-align:left;width:100%}
  .invoice table{font-size:.82rem}
  .invoice tbody td,.invoice thead th{padding:7px 6px}
  .invoice__total{padding:12px 14px}
  .invoice__total b{font-size:1.5rem}
  .equipo-fila .tag{display:none}
  .rank__name{width:90px}
  .rank__val{width:auto}
  .card{padding:16px 14px}

  /* los diálogos salen desde abajo, como una hoja */
  .modal-root{place-items:end center;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:16px 16px 0 0;padding:20px 16px calc(14px + env(safe-area-inset-bottom));animation:hojaIn .32s var(--ease-drawer) both}
  .modal__actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));margin:14px -16px calc(-14px - env(safe-area-inset-bottom));padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--ink-700);border-top:1px solid var(--line-soft)}
  .modal__actions .btn{flex:1 1 120px}

  .toasts{left:12px;right:12px;align-items:center}
  .toast{max-width:100%}
}
@keyframes hojaIn{from{transform:translateY(100%)}to{transform:none}}

/* PC y tablet: el menú arriba, con texto, en una sola fila */
@media (min-width:761px){
  .topnav--app{margin-left:24px;justify-content:flex-start;flex:1;flex-wrap:nowrap;min-width:0}
  .topbar__fin{margin-left:auto}
}
/* tablet (iPad en vertical): más apretado para que todo quepa en una fila */
@media (min-width:761px) and (max-width:1060px){
  .topbar{gap:8px}
  .topnav--app{margin-left:8px;gap:0}
  .topnav a{padding:10px 9px;gap:6px}
  .topnav a.is-active::after{left:9px;right:9px}
  .brand__text small{display:none}
  .brand__text strong{max-width:170px;font-stretch:100%}
  .sync span{display:none}
  .sync{padding:7px;border-radius:50%}
}

/* tablet horizontal / laptop chica: con Ganancias el menú no cabe con texto en todos; solo el activo lo lleva */
@media (min-width:1061px) and (max-width:1320px){
  .topbar{gap:8px}
  .topnav--app{margin-left:8px}
  .topnav a{padding:10px 9px}
  .topnav a.is-active::after{left:9px;right:9px}
  .brand__text small{display:none}
  .sync span{display:none}
  .sync{padding:7px;border-radius:50%}
}
@media (min-width:761px) and (max-width:1320px){
  .topnav--app a:not(.is-active) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================
   Impresión — sólo el cierre
   ========================================================= */
@media print{
  @page{margin:12mm}
  body{background:#fff}
  .topbar,.toasts,.no-print,.modal-root,.tema-btn{display:none!important}
  .view{padding:0;max-width:none;animation:none}
  .invoice{box-shadow:none;border:0;border-radius:0;background:#fff;color:#000;animation:none}
  .invoice::after{display:none}
  .invoice__total{background:#111!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .invoice::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Calendario propio (views/citas.js → calendario) */
.cal-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--ink-700);color:var(--cream);font:600 14px var(--font-ui);cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 0 var(--line-strong)}
.cal-btn:hover{border-color:var(--cream)}
.cal-btn:focus-visible{outline:none;border-color:var(--gold-press);box-shadow:0 0 0 3px rgba(201,162,39,.28)}
.cal-btn svg{width:16px;height:16px;color:var(--text-2)}
.field .cal-btn{width:100%}
.cal{position:fixed;z-index:1000;width:292px;max-width:calc(100vw - 16px);padding:14px;background:var(--ink-600);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow);font-family:var(--font-ui);animation:calIn .16s var(--ease)}
@keyframes calIn{from{opacity:0;transform:translateY(-4px)}}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal__head b{font:700 16px var(--font-display);font-stretch:var(--ancho);color:var(--cream)}
.cal__nav{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer}
.cal__nav:hover:not(:disabled){background:rgba(var(--tint),.07)}
.cal__nav:disabled{opacity:.3;cursor:default}
.cal__nav svg{width:16px;height:16px}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__dow{text-align:center;font-size:12px;font-weight:650;color:var(--muted);padding:4px 0 6px}
.cal__dia{aspect-ratio:1;border:0;border-radius:var(--r-md);background:transparent;color:var(--cream);font:600 13px var(--font-ui);cursor:pointer;position:relative;font-variant-numeric:tabular-nums}
.cal__dia:hover:not(:disabled):not(.is-sel){background:rgba(var(--tint),.07)}
.cal__dia:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cal__dia.is-fuera{color:var(--faint)}
.cal__dia:disabled{color:var(--fainter);cursor:default}
.cal__dia.is-hoy::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.cal__dia.is-sel{background:var(--boton);color:var(--sobre-boton);font-weight:800}
.cal__dia.is-sel::after{background:var(--icono-boton)}
.cal__pie{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.cal__pie .btn{flex:1}
.datebar .cal-btn{min-width:150px}
/* Cierres · Rango: desde y hasta, uno al lado del otro (apilados en el celular) */
/* Cierres en el celular: los seis periodos en dos filas de tres, todos a la vista */
@media (max-width:640px){
  .cierre-periodos .tabs{display:flex;flex-wrap:wrap;overflow:visible}
  .cierre-periodos .tabs button{flex:1 1 30%}
}
.rango-fechas{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 320px}
.rango-fechas__campo{display:flex;align-items:center;gap:8px;flex:1 1 150px;margin:0}
.rango-fechas__campo > span{font-size:.82rem;font-weight:650;color:var(--muted);min-width:42px}
.rango-fechas__campo .cal-btn{flex:1;min-width:0}
@media (max-width:640px){.datebar .cal-btn{flex:1 1 150px;justify-content:center}}

/* días y horas que ya pasaron: se ven, no se tocan */
.cal__dia.is-paso{text-decoration:line-through;text-decoration-color:rgba(var(--tint),.35);opacity:.55}
.cal__nota{margin:8px 0 0;font-size:.78rem;color:var(--muted);text-align:center}
/* Turno que ya pasó sin cobro, pero se puede agregar lo que faltó registrar */
.slot--tarde{opacity:.75;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(var(--tint),.035) 6px 12px)}
.slot--tarde .slot__client{font-style:italic}
.p-libre--tarde{opacity:.6}
.slot--pasado{opacity:.55;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(var(--tint),.035) 6px 12px);border-style:solid;cursor:not-allowed}
.slot--pasado .slot__client{font-style:italic;color:var(--muted)}
.slot--pasado .slot__price{color:var(--faint)}

/* portada de la barbería al entrar: cuero con costura */
body:has(#portada:not([hidden])){background:var(--cuero)}
body:has(#portada:not([hidden])) .view{display:none}
.portada{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px;
  background:var(--cuero);color:var(--sobre-cuero)}
.portada__caja{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:520px;animation:portadaIn .5s var(--ease-out) both}
@keyframes portadaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.portada__marca{display:grid;place-items:center;margin-bottom:22px}
.portada__logo{width:clamp(120px,30vw,180px);aspect-ratio:1;object-fit:contain;border-radius:var(--r-xl);padding:10px;background:#fff;border:1px solid rgba(255,255,255,.2)}
.portada__nombre{order:1;margin:0;font-size:3.2rem;font-stretch:var(--ancho-placa);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#fff}
.portada__hola{order:3;margin:22px 0 0;font-size:1rem;color:var(--sobre-cuero);font-weight:500}
.portada__marca{order:0}
.portada__entrar{order:4;margin-top:16px;min-width:260px}
.portada__eleccion{order:4}
.portada .btn--gold{--bg:var(--gold);--fg:var(--on-gold);--bd:var(--gold);box-shadow:0 2px 0 #000}
.portada .btn--gold .ico{color:var(--on-gold)}
.portada .btn--gold:hover{background-color:var(--laton-claro);border-color:var(--laton-claro);color:var(--on-gold)}
.portada::before{content:"";position:absolute;inset:14px;border:1px dashed var(--cuero-hilo);border-radius:18px;pointer-events:none}
@media (max-width:760px){.portada__nombre{font-size:2.1rem}.portada::before{inset:10px;border-radius:14px}}

/* dueño que también es barbero: elegir con qué vista entrar */
.portada__eleccion{display:grid;gap:10px;width:min(420px,100%);margin:16px auto 0}
.portada__pregunta{margin:0 0 2px;font-weight:600;color:var(--sobre-cuero)}
.portada__opcion{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:15px 18px;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s}
.portada__opcion:hover,.portada__opcion:focus-visible{border-color:var(--gold);background:rgba(255,255,255,.08)}
.portada__opcion b{font-size:1.05rem;font-weight:700}
.portada__opcion small{color:var(--sobre-cuero-2);font-size:.86rem}
.modo-btn{white-space:nowrap}
@media (max-width:760px){.modo-btn span{display:none}.modo-btn{padding:8px 10px}}

/* días que no se trabaja (vacaciones, día libre de la semana) */
.cal__dia.is-cerrado{color:var(--muted);text-decoration:line-through;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(var(--tint),.06) 4px 8px)}
.cal__dia.is-cerrado:disabled{opacity:.55;cursor:not-allowed}
.cal__marca{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;border:1px solid var(--line-strong);background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(var(--tint),.18) 3px 6px)}
.aviso-cerrado{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-md);border:1px dashed var(--line-strong);background:rgba(var(--tint),.03);color:var(--text-2);margin-bottom:12px;font-size:.92rem}
.aviso-cerrado .ico{color:var(--gold-press);flex:none}
.fuera-btn{margin-top:12px;width:100%;border-style:dashed;justify-content:center;box-shadow:none}
.dias-cerrados{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dia-cerrado{display:inline-flex;align-items:center;gap:6px;padding-right:4px}
.dia-cerrado button{border:0;background:none;color:inherit;cursor:pointer;padding:2px;display:inline-grid;place-items:center;border-radius:6px}
.dia-cerrado button:hover{background:rgba(var(--tint),.1)}
.dia-cerrado .ico{width:13px;height:13px}
.dias-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px}
.dias-semana .permiso{text-align:center;padding:10px 2px}
.dias-semana .permiso b{justify-content:center}
.dias-semana+.hint{margin:8px 0 14px}
.p-libre--paso{font-size:.74rem;font-style:italic;color:var(--faint);border-color:rgba(var(--tint),.06);background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(var(--tint),.035) 5px 10px)}

/* deslizar para refrescar (web app instalada) */
html.es-app{overscroll-behavior-y:contain}
.tirar{position:fixed;left:50%;top:env(safe-area-inset-top,0px);z-index:400;width:40px;height:40px;margin-top:8px;border-radius:50%;
  display:grid;place-items:center;background:var(--cuero);border:1px solid #000;box-shadow:var(--shadow-sm);
  transform:translate(-50%,-56px);opacity:0;pointer-events:none;color:var(--laton-claro)}
.tirar svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tirar__flecha{transition:transform .15s}
.tirar__giro{opacity:0}
.tirar.is-lista{border-color:var(--gold)}
.tirar.is-cargando .tirar__flecha{opacity:0}
.tirar.is-cargando .tirar__giro{opacity:1;animation:tirar-gira .7s linear infinite}
@keyframes tirar-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tirar.is-cargando .tirar__giro{animation-duration:1.6s}}

/* =========================================================
   Jornada — inicio de una barbería que solo tiene citas
   (views/jornada.js): el día en grande, en cuero, y debajo la
   línea de tiempo o lo que falta por confirmar.
   ========================================================= */
.jornada{
  position:relative;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:stretch;
  background:var(--cuero);color:var(--sobre-cuero);border:1px solid #000;border-radius:var(--r-xl);padding:8px;
}
.jornada::before{content:"";position:absolute;inset:6px;border:1px dashed var(--cuero-hilo);border-radius:12px;pointer-events:none}
:root[data-theme="dark"] .jornada{border-color:rgba(255,255,255,.08)}
.jornada__dia{position:relative;display:flex;align-items:center;gap:10px;padding:22px 26px;flex-wrap:wrap}
.jornada__fecha{display:flex;align-items:center;gap:16px;min-width:0}
.jornada__num{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:5.6rem;line-height:.85;letter-spacing:-.04em;
  color:var(--laton-claro);font-variant-numeric:tabular-nums lining-nums}
.jornada__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.jornada__txt b{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:1.7rem;line-height:1.05;color:#fff;letter-spacing:-.01em}
.jornada__txt span{color:var(--sobre-cuero-2);font-size:.98rem;font-weight:500}
.jornada__nav{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-lg);cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--sobre-cuero);transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.jornada__nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.jornada__nav:active{transform:translateY(1px)}
.jornada__hoy{border:0;background:none;color:#fff;font:inherit;font-weight:650;font-size:.9rem;cursor:pointer;padding:6px 4px;
  text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.jornada__cifras{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;
  border-left:1px solid var(--cuero-linea);margin:14px 0}
.jornada .stat{background:none;border:0;border-radius:0;padding:10px 20px;min-width:0}
.jornada .stat+.stat{box-shadow:inset 1px 0 0 var(--cuero-linea)}
.jornada .stat:last-child .stat__value{color:var(--laton-claro)}

.jornada__botones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 12px}
.jornada__boton{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:10px 18px;cursor:pointer;
  border-radius:12px;border:1px solid var(--line-strong);background:var(--ink-700);color:var(--cream);
  font:inherit;font-size:1rem;font-weight:700;box-shadow:0 1px 0 var(--line-strong);
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.jornada__boton .ico{width:20px;height:20px}
.jornada__boton:hover{border-color:var(--cream)}
.jornada__boton:active{transform:translateY(1px);box-shadow:none}
.jornada__boton.is-active{background:var(--boton);border-color:var(--boton);color:var(--sobre-boton);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.jornada__boton.is-active .ico{color:var(--icono-boton)}
.jornada__cuenta{min-width:24px;height:24px;padding:0 7px;border-radius:99px;display:inline-grid;place-items:center;
  background:var(--gold);color:var(--on-gold);font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums}
.jornada__panel{padding:20px 22px}
.jornada__panel>.aviso-cerrado{margin-bottom:16px}
.jornada__pie{margin:14px 0 0;text-align:right}

/* línea de tiempo: hora | riel | contenido */
.linea{list-style:none;margin:0;padding:0;position:relative;--col:104px}
.linea::before{content:"";position:absolute;top:10px;bottom:10px;left:calc(var(--col) + 11px);width:2px;border-radius:2px;background:var(--line-soft)}
.linea__fila{display:grid;grid-template-columns:var(--col) 24px minmax(0,1fr);column-gap:14px;position:relative}
.linea__hora{padding-top:12px;text-align:right;font-weight:700;font-size:.92rem;color:var(--cream);font-variant-numeric:tabular-nums;white-space:nowrap}
.linea__hora small{display:block;font-size:.78rem;font-weight:500;color:var(--muted);margin-top:2px}
.linea__punto{justify-self:center;margin-top:15px;width:14px;height:14px;border-radius:50%;position:relative;z-index:1;
  background:var(--ink-700);border:2px solid var(--line-strong)}
.linea__cuerpo{min-width:0;padding:6px 0 14px;display:flex;flex-direction:column;gap:8px}
.linea__nota{margin:6px 0 0;font-size:.88rem;color:var(--muted)}

.linea__fila--cita .linea__punto{background:var(--cuero);border-color:var(--cuero)}
:root[data-theme="dark"] .linea__fila--cita .linea__punto{background:var(--gold);border-color:var(--gold)}
.linea__fila--pasado .linea__hora{color:var(--faint);font-weight:600}
.linea__fila--pasado .linea__punto{width:10px;height:10px;margin-top:17px;border-color:var(--line-soft)}
.linea__fila--pasado .linea__nota{font-style:italic;color:var(--faint)}
.linea__fila--libre .linea__punto{border-style:dashed}

.linea__cita{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:11px 14px;border-radius:var(--r-lg);
  background:rgba(var(--tint),.035);border:1px solid var(--line-strong)}
.linea__cita--pedida{border-style:dashed;border-color:var(--gold);background:linear-gradient(0deg,var(--gold-dim),var(--gold-dim)),var(--ink-700)}
.linea__quien{flex:1 1 180px;min-width:0}
.linea__quien b{display:block;font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linea__quien small{display:block;font-size:.84rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linea__acciones{display:flex;gap:6px;flex-wrap:wrap}
.linea__horas{display:flex;flex-wrap:wrap;gap:6px}
.linea__libre{min-height:40px;padding:6px 13px;border-radius:var(--r-md);cursor:pointer;font:inherit;font-size:.88rem;font-weight:650;
  font-variant-numeric:tabular-nums;color:var(--cream);background:transparent;border:1px dashed var(--line-strong);
  transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.linea__libre:hover,.linea__libre:focus-visible{border-style:solid;border-color:var(--cream);background:var(--ink-700)}
.linea__libre:active{transform:translateY(1px)}
.linea__otra{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;min-height:32px;border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:650;color:var(--text-2);background:none;border:1px dashed var(--line-strong)}
.linea__otra .ico{width:14px;height:14px}
.linea__otra:hover{border-color:var(--cream);color:var(--cream)}

/* la hora actual: una raya de latón a través del riel */
.linea__ahora{position:relative;height:30px;display:flex;align-items:center;padding-left:calc(var(--col) - 24px)}
.linea__ahora::before{content:"";position:absolute;left:calc(var(--col) + 4px);right:0;top:50%;height:2px;background:var(--gold);border-radius:2px}
.linea__ahora span{position:relative;z-index:1;padding:3px 10px;border-radius:99px;background:var(--gold);color:var(--on-gold);
  font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* por confirmar */
.pedidas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pedidas__fila{display:flex;align-items:stretch;gap:12px}
.pedidas__cuando{flex:none;width:112px;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:8px;border-radius:var(--r-lg);
  background:var(--cuero);color:var(--sobre-cuero)}
.pedidas__cuando b{font-family:var(--font-display);font-stretch:var(--ancho);font-size:.92rem;color:var(--laton-claro);white-space:nowrap}
.pedidas__cuando span{font-size:.84rem;font-weight:650}
.pedidas__fila .linea__cita{flex:1;min-width:0}
.jornada__vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 12px}
.jornada__vacio p{margin:0;color:var(--muted);max-width:42ch}
.jornada__vacio p b{display:block;font-family:var(--font-display);font-stretch:var(--ancho);font-size:1.15rem;color:var(--cream);margin-bottom:4px}

@media (max-width:1060px){
  .jornada{grid-template-columns:minmax(0,1fr)}
  .jornada__dia{padding:20px 20px 12px}
  .jornada__cifras{border-left:0;border-top:1px solid var(--cuero-linea);margin:0 14px 8px}
}
@media (max-width:760px){
  .jornada__dia{padding:18px 14px 10px;gap:8px}
  .jornada__fecha{flex:1;gap:12px}
  .jornada__fecha{justify-content:center;gap:10px}
  .jornada__num{font-size:3.6rem}
  .jornada__txt b{font-size:1.2rem}
  .jornada__txt span{font-size:.84rem}
  .linea__acciones{flex-basis:100%}
  .linea__acciones .btn{flex:1 1 0}
  .jornada__hoy{flex-basis:100%;text-align:center}
  .jornada__cifras{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 8px 6px}
  .jornada .stat{padding:12px}
  .jornada .stat:nth-child(odd){box-shadow:none}
  .jornada .stat:nth-child(even){box-shadow:inset 1px 0 0 var(--cuero-linea)}
  .jornada .stat:nth-child(n+3){border-top:1px solid var(--cuero-linea)}
  .jornada__boton{min-height:52px;font-size:.92rem;padding:8px 10px;gap:8px}
  .jornada__panel{padding:16px 12px}
  .linea{--col:70px}
  .linea__fila{column-gap:8px}
  .linea__hora{font-size:.84rem}
  .linea__ahora{padding-left:0}
  .pedidas__fila{flex-direction:column;gap:0}
  .pedidas__cuando{width:auto;flex-direction:row;gap:8px;justify-content:flex-start;border-radius:var(--r-lg) 10px 0 0;padding:7px 12px}
  .pedidas__fila .linea__cita{border-radius:0 0 10px 10px}
}

/* =========================================================
   Ajustes → Barbería: bloques con su explicación a la izquierda
   ========================================================= */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ajustes{padding:0;overflow:clip}
.ajuste{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:8px 32px;padding:20px 22px}
.ajuste+.ajuste{border-top:1px solid var(--line-soft)}
.ajuste__info h3{margin:0 0 4px;font-size:1rem}
.ajuste__campos label.field:last-child{margin-bottom:0}
.field-row--local{grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,.9fr)}
.dias-semana .dia{
  min-height:42px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--ink-700);color:var(--muted);
  font:inherit;font-size:.86rem;font-weight:650;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .16s var(--ease-out);
}
.dias-semana .dia.is-active{background:var(--boton);border-color:var(--boton);color:var(--sobre-boton)}
.dias-semana .dia:active:not(:disabled){transform:scale(.95)}
.dias-semana .dia:disabled{opacity:.5;cursor:not-allowed}
/* aparece solo con cambios: pegada abajo mientras se edita */
.ajustes__fin{display:flex;justify-content:flex-end;padding:14px 22px 18px;border-top:1px solid var(--line-soft)}
.guardar-barra{
  position:sticky;bottom:calc(12px + var(--tabbar-h) + env(safe-area-inset-bottom));z-index:30;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;padding:10px 12px 10px 16px;
  border-radius:var(--r-lg);background:var(--cuero);color:var(--sobre-cuero);box-shadow:var(--shadow);
  animation:barraIn .22s var(--ease-out) both;
}
:root[data-theme="dark"] .guardar-barra{background:#2a2d33;border:1px solid var(--line-strong)}
@keyframes barraIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.guardar-barra>span{flex:1 1 180px;display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600}
.guardar-barra .ico{color:var(--laton-claro)}
.guardar-barra .btn--ghost{--bg:rgba(255,255,255,.08);--fg:var(--sobre-cuero)}
.guardar-barra .btn--gold{--bg:var(--gold);--fg:var(--on-gold);--bd:var(--gold);box-shadow:none}
.guardar-barra .btn--gold .ico{color:var(--on-gold)}
.logo-caja{align-items:flex-start}
.logo-caja__vista{width:84px;height:84px}
.equipo-fila .bTel{flex:0 1 150px;min-width:0}
.equipo-fila{flex-wrap:wrap}
.equipo-fila .bWeb{order:5;flex:1 1 150px;margin-left:42px;min-width:0}
.equipo-fila [data-acceso],.equipo-fila [data-baja]{order:6}
@media (max-width:760px){
  .ajuste{grid-template-columns:minmax(0,1fr);padding:16px 14px}
  .field-row--local{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row--local label:first-child{grid-column:1/-1}
  .equipo-fila{flex-wrap:wrap}
  .equipo-fila .bName{flex:1 1 calc(100% - 50px)}
  .equipo-fila .bTel{flex:1 1 140px;order:3}
  .equipo-fila .btn{order:4}
}

/* =========================================================
   Ganancias
   ========================================================= */
.balance{border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--ink-700);box-shadow:var(--card-shadow);overflow:hidden}
.balance__neta{padding:20px 22px 18px;background:var(--cuero);color:var(--sobre-cuero)}
:root[data-theme="dark"] .balance__neta{background:#101114}
.balance__etiqueta{margin:0;font-size:.86rem;color:var(--sobre-cuero-2);font-weight:500}
.balance__cifra{margin:4px 0 0;font-family:var(--font-display);font-stretch:var(--ancho);font-weight:650;font-size:2.6rem;
  line-height:1.05;letter-spacing:-.02em;color:var(--laton-claro);font-variant-numeric:tabular-nums}
.balance__cifra.es-negativa{color:#ff8f86}
.balance__pie{margin:6px 0 0;font-size:.88rem;color:var(--sobre-cuero-2)}
.balance__pie b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
.balance__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.balance__col{padding:16px 22px}
.balance__col+.balance__col{border-left:1px solid var(--line-soft)}
.balance__titulo{margin:0 0 8px;font-size:.8rem;font-weight:650;color:var(--muted)}
.balance dl{margin:0}
.balance dl div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.92rem}
.balance dt{color:var(--text-2)}
.balance dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.balance__total{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:9px!important}
.balance__total dt,.balance__total dd{font-weight:750;color:var(--cream)}
.balance__productos{margin:0;padding:12px 22px;border-top:1px solid var(--line-soft);font-size:.88rem;color:var(--text-2);background:rgba(var(--tint),.025)}
.balance__productos b{font-variant-numeric:tabular-nums}
.es-negativa{color:var(--red-fg)}
.movs{list-style:none;margin:0;padding:0;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--ink-700);overflow:hidden}
.mov{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px}
.mov+.mov{border-top:1px solid var(--line-soft)}
.mov__fecha{flex:none;width:64px;font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mov__que{flex:1;min-width:0}
.mov__que b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mov__que small{display:block;font-size:.78rem;color:var(--muted)}
.mov__monto{flex:none;font-family:var(--font-display);font-stretch:var(--ancho);font-weight:650;font-variant-numeric:tabular-nums;color:var(--green-fg)}
.mov__monto.es-gasto{color:var(--cream)}
.mov .icon-btn{border-color:transparent;background:none;color:var(--faint)}
@media (hover:hover) and (pointer:fine){.mov .icon-btn:hover{color:var(--red-fg);border-color:transparent}}
.empty--simple{padding:26px 18px}
.arts{list-style:none;margin:0;padding:0;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--ink-700);overflow:hidden}
.art{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:12px 12px 12px 16px}
.art+.art{border-top:1px solid var(--line-soft)}
.art__info{min-width:0}
.art__info>b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art__info small{display:block;font-size:.8rem;color:var(--muted)}
.art__info small b{color:var(--text-2);font-weight:650;font-variant-numeric:tabular-nums}
.art__info .es-ganancia{color:var(--green-fg);font-weight:600}
.art__info .es-negativa{font-weight:600}
.art__stock{display:grid;justify-items:center;min-width:64px;line-height:1.1}
.art__stock b{font-family:var(--font-display);font-stretch:var(--ancho);font-weight:650;font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--cream)}
.art__stock small{font-size:.74rem;color:var(--muted)}
.art.is-poco .art__stock b,.art.is-poco .art__stock small{color:var(--gold-hi)}
.art.is-agotado .art__stock b,.art.is-agotado .art__stock small{color:var(--red-fg)}
.art__acciones{display:flex;align-items:center;gap:6px}
.art .icon-btn{border-color:transparent;background:none;color:var(--faint)}
@media (hover:hover) and (pointer:fine){.art .icon-btn:hover{color:var(--cream);border-color:transparent}}
.modal__izq{margin-right:auto}
.segmento{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border-radius:var(--r-lg);background:rgba(var(--tint),.08)}
.segmento button{min-height:38px;border:0;border-radius:var(--r-md);background:none;color:var(--text-2);font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
.segmento button.is-active{background:var(--ink-700);color:var(--cream);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line-soft)}
.field>span{display:block;font-size:.84rem;font-weight:650;color:var(--text-2);margin-bottom:6px}
div.field{margin-bottom:14px}
@media (max-width:760px){
  .balance__cifra{font-size:2.1rem}
  .balance__cols{grid-template-columns:minmax(0,1fr)}
  .balance__col+.balance__col{border-left:0;border-top:1px solid var(--line-soft)}
  .balance__neta,.balance__col,.balance__productos{padding-left:16px;padding-right:16px}
  .mov{gap:10px;padding-left:12px}
  .mov__fecha{width:48px;font-size:.78rem}
  .art{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding-left:12px}
  .art__acciones{grid-column:1/-1}
  .art__acciones .btn{flex:1}
}

/* ganancia del mes en Inicio */
.ganancia-mes{display:grid;gap:2px;margin-top:12px;padding:14px 18px;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:var(--ink-700);box-shadow:var(--card-shadow);text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ganancia-mes:hover{border-color:var(--cream)}.ganancia-mes:hover .atajo__ir{transform:translateX(3px);color:var(--cream)}}
.ganancia-mes:active{transform:scale(.99)}
.ganancia-mes__cab{display:flex;align-items:center;justify-content:space-between;font-size:.86rem;color:var(--muted);font-weight:500}
.ganancia-mes__cifra{font-family:var(--font-display);font-stretch:var(--ancho);font-weight:650;font-size:1.7rem;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--cream)}
.ganancia-mes__cifra.es-negativa{color:var(--red-fg)}
.ganancia-mes__partes{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.84rem;color:var(--muted)}
.ganancia-mes__partes b{color:var(--text-2);font-weight:650;font-variant-numeric:tabular-nums}

/* menú del celular con 6 o 7 botones: el nombre se recorta antes que desbordar */
@media (max-width:760px){
  .topnav--app a .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 1px}
  .topnav--app a:active .ico{transform:scale(.9)}
  .topnav--app a .ico{transition:transform .16s var(--ease-out)}
}

/* =========================================================
   Modo oscuro: el cierre en pantalla deja de ser una hoja blanca
   (al imprimir sigue saliendo en blanco)
   ========================================================= */
@media screen{
  :root[data-theme="dark"] .invoice{background:var(--ink-700);color:var(--cream);border:1px solid var(--line-soft);box-shadow:none}
  :root[data-theme="dark"] .invoice::before{opacity:.75}
  :root[data-theme="dark"] .invoice::after{background-image:radial-gradient(circle at 10px -4px,transparent 10px,var(--ink-900) 11px)}
  :root[data-theme="dark"] .invoice__tagline,:root[data-theme="dark"] .invoice__meta,
  :root[data-theme="dark"] .invoice__sign,:root[data-theme="dark"] .invoice__note{color:var(--muted)}
  :root[data-theme="dark"] .invoice__meta b,:root[data-theme="dark"] .invoice table,
  :root[data-theme="dark"] .invoice .money,:root[data-theme="dark"] .invoice tfoot td{color:var(--cream)}
  :root[data-theme="dark"] .invoice .es-perdida{color:var(--red-fg)}
  :root[data-theme="dark"] .invoice__subtotal td{color:var(--muted)}
  :root[data-theme="dark"] .cuentas,:root[data-theme="dark"] .cuentas__fila,:root[data-theme="dark"] .cuentas__detalle{border-color:var(--line-soft)}
  :root[data-theme="dark"] .cuentas__fila small,:root[data-theme="dark"] .cuentas__resumen{color:var(--muted)}
  :root[data-theme="dark"] .cuentas__detalle{background:rgba(255,255,255,.02)}
  :root[data-theme="dark"] .invoice thead th{color:var(--muted);border-bottom-color:var(--line-strong)}
  :root[data-theme="dark"] .invoice tbody td{border-bottom-color:var(--line-soft)}
  :root[data-theme="dark"] .invoice tbody tr:hover{background:rgba(255,255,255,.03)}
  :root[data-theme="dark"] .invoice tfoot td{border-top-color:var(--line-strong)}
  :root[data-theme="dark"] .invoice hr{border-top-color:var(--line-strong)}
  :root[data-theme="dark"] .invoice__total{background:#101114}
  :root[data-theme="dark"] .invoice__sign div{border-top-color:var(--line-strong)}
  :root[data-theme="dark"] .chip{background:rgba(255,255,255,.05);border-color:var(--line-soft);color:var(--text-2)}
}

/* cuándo pidió el cliente la cita (solicitudes por confirmar) */
.cita-pedida{display:flex;align-items:center;gap:5px;margin:4px 0 0;font-size:.8rem;font-weight:600;color:var(--gold-hi)}
.cita-pedida .ico{width:14px;height:14px}

/* Una sola pestaña por navegador (una-pestana.js) */
.una-pestana{font-family:var(--font-ui);font-size:15px;line-height:1.45;color:var(--cream);position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(var(--ink-rgb),.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.una-pestana[hidden]{display:none}
.una-pestana__caja{width:min(100%,380px);display:grid;gap:14px;padding:24px;text-align:center;background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 40px rgba(var(--tint),.22)}
.una-pestana__caja h2{margin:0;font-family:var(--font-display);font-stretch:var(--ancho-placa);font-weight:800;font-size:1.3rem}
.una-pestana__caja .btn{font-family:var(--font-ui)}
.una-pestana__caja p{margin:0;color:var(--text-2)}
.una-pestana__caja .hint{font-size:.84rem}

/* =========================================================
   Propinas, descripción, pago dividido y vales (migración 50)
   ========================================================= */
.opcional{font-weight:500;font-size:.78rem;color:var(--muted);margin-left:4px}
/* pago dividido: un renglón por método */
.partes>span{display:block;font-size:.84rem;font-weight:650;color:var(--text-2);margin-bottom:6px}
.parte{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px}
.parte .icon-btn{border-color:transparent;background:none;color:var(--faint)}
.parte .icon-btn:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.parte .icon-btn:not(:disabled):hover{color:var(--red-fg)}}
.partes__pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.partes__cuenta{font-size:.86rem;font-weight:650;color:var(--red-fg);font-variant-numeric:tabular-nums}
.partes__cuenta.is-ok{color:var(--green-fg)}
/* descripción y propina en Últimos cobros (Inicio) */
.lado__quien small.lado__nota{color:var(--text-2);font-style:italic;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lado__fila .money{display:flex;flex-direction:column;align-items:flex-end}
.lado__propina{font-family:var(--font-ui);font-size:.72rem;font-weight:500;color:var(--green-fg)}
/* en el cierre */
.cierre-nota{display:block;font-size:.78rem;color:#5a606a;font-style:italic;margin-top:2px}
.cierre-barbero{width:100%;min-width:0}
.cierre-barbero td,.cierre-barbero th{padding:8px 4px}
.cierre-menos{color:#a12c24}
.cierre-vale .link-btn{font-size:.8rem;margin-left:6px}
@media screen{
  :root[data-theme="dark"] .cierre-nota{color:var(--muted)}
  :root[data-theme="dark"] .cierre-menos{color:var(--red-fg)}
}

.slot__price{display:flex;flex-direction:column;align-items:flex-end}
.slot__propina{font-family:var(--font-ui);font-size:.7rem;font-weight:500;color:var(--green-fg);white-space:nowrap}

/* =========================================================
   Refinamiento visual (fase 1). Solo presentación.
   Para volver atrás: borrar este bloque (con git revert del commit).
   ========================================================= */

/* Tipografía: menos peso. La jerarquía sale del tamaño y el contraste. */
h1,h2,h3,.display{font-weight:650;letter-spacing:-.02em}
.page-head h1,.hoy h1,.portada__nombre,.jornada__num,.jornada__txt b,.brand__text strong,.modal h2{font-weight:700}
.stat__value,.money,.slot__price,.barber-card__name,.p-barbero__nombre,.empty p,.balance__cifra{font-weight:650}
.btn,.link-btn,.tabs button,.segmento button{font-weight:600}

/* Sin sombras duras: una línea fina y, donde hace falta, una sombra casi invisible */
.btn,.btn--gold,.portada .btn--gold,.jornada__boton.is-active{box-shadow:none}

/* Sin costuras punteadas decorativas */
.portada::before,.jornada::before{content:none}

/* Barras de arriba y de abajo: translúcidas, con el contenido pasando por detrás.
   El desenfoque de la barra de arriba va en un pseudo-elemento: puesto en la propia
   barra haría de contenedor de la barra fija de abajo en el celular y la descolocaría. */
.topbar,.con-tabbar .topbar{background:transparent;border-bottom:0}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(246,247,249,.8);border-bottom:1px solid var(--line-soft);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
:root[data-theme="dark"] .topbar::before{background:rgba(7,8,10,.78);border-bottom-color:rgba(255,255,255,.08)}
.topnav--app{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
:root:not([data-theme="dark"]) .topbar{color:var(--cream)}
:root:not([data-theme="dark"]) .brand__text strong{color:var(--cream)}
:root:not([data-theme="dark"]) .brand__text small{color:var(--muted)}
:root:not([data-theme="dark"]) .brand:hover{background:rgba(var(--tint),.05)}
:root:not([data-theme="dark"]) .topnav a,
:root:not([data-theme="dark"]) .topnav button.navlink{color:var(--text-3)}
@media (hover:hover) and (pointer:fine){
  :root:not([data-theme="dark"]) .topnav a:hover,
  :root:not([data-theme="dark"]) .topnav button.navlink:hover{color:var(--cream);background:rgba(var(--tint),.06)}
}
:root:not([data-theme="dark"]) .topnav a.is-active,
:root:not([data-theme="dark"]) .topnav button.navlink.is-active{color:var(--cream)}
:root:not([data-theme="dark"]) .topnav a.is-active .ico{color:var(--gold-hi)}
:root:not([data-theme="dark"]) .topbar .tema-btn,
:root:not([data-theme="dark"]) .topbar .icon-btn,
:root:not([data-theme="dark"]) .topbar .btn:not(.btn--gold){
  background:rgba(var(--tint),.05);border-color:var(--line-soft);color:var(--text-2);
}
:root:not([data-theme="dark"]) .topbar .tema-btn:hover,
:root:not([data-theme="dark"]) .topbar .icon-btn:hover,
:root:not([data-theme="dark"]) .topbar .btn:not(.btn--gold):hover{background:rgba(var(--tint),.09);border-color:var(--line-strong);color:var(--cream)}
:root:not([data-theme="dark"]) .sync{color:var(--text-3);border-color:var(--line-soft);background:transparent}
:root:not([data-theme="dark"]) .sync--error{color:var(--red-fg);border-color:rgba(194,59,50,.4)}

@media (max-width:760px){
  :root[data-theme="dark"] .topnav--app{background:rgba(7,8,10,.9);border-top-color:rgba(255,255,255,.08)}
  :root:not([data-theme="dark"]) .topnav--app{background:rgba(246,247,249,.92);border-top:1px solid var(--line-soft)}
  :root:not([data-theme="dark"]) .topnav--app a{color:var(--text-3)}
  :root:not([data-theme="dark"]) .topnav--app a.is-active{color:var(--cream)}
  :root:not([data-theme="dark"]) .topnav--app a.is-active .ico{color:var(--gold-hi)}
}

/* Estados activos más suaves que el negro sólido */
:root:not([data-theme="dark"]) .tabs button.is-active{
  background:var(--ink-700);color:var(--cream);box-shadow:0 1px 3px rgba(14,15,18,.14),0 0 0 .5px rgba(14,15,18,.06);
}
.dias-semana .dia.is-active{background:var(--gold-dim);border-color:var(--line);color:var(--gold-hi)}

/* Resumen de cifras: tarjeta clara en modo claro (el oscuro ya lo era) */
:root:not([data-theme="dark"]) .grid--stats{background:var(--ink-700);color:var(--cream);border-color:var(--line-soft)}
:root:not([data-theme="dark"]) .grid--stats{--cuero-linea:var(--line-soft)}
:root:not([data-theme="dark"]) .grid--stats .stat__label{color:var(--muted)}
:root:not([data-theme="dark"]) .grid--stats .stat__value,
:root:not([data-theme="dark"]) .grid--stats .stat__value.is-plain{color:var(--cream)}
:root:not([data-theme="dark"]) .grid--stats .stat:first-child .stat__value:not(.is-plain){color:var(--gold-hi)}
:root:not([data-theme="dark"]) .grid--stats .stat__foot{color:var(--faint)}
:root:not([data-theme="dark"]) .balance__neta{background:var(--ink-800);color:var(--cream);border-bottom:1px solid var(--line-soft)}
:root:not([data-theme="dark"]) .balance__etiqueta,
:root:not([data-theme="dark"]) .balance__pie{color:var(--muted)}
:root:not([data-theme="dark"]) .balance__cifra{color:var(--cream)}
:root:not([data-theme="dark"]) .balance__pie b{color:var(--text-2)}

/* Los números negativos informan, no gritan */
.ganancia-mes__cifra.es-negativa,
:root:not([data-theme="dark"]) .balance__cifra.es-negativa{
  color:var(--red-fg);color:color-mix(in srgb,var(--red-fg) 72%,var(--cream));
}

/* Casillas que ya pasaron: calladas, sin rayas ni cursiva */
.slot--pasado{opacity:.5;background:transparent;border-color:var(--line-soft)}
.slot--pasado .slot__client{font-style:normal}
.p-libre--paso{font-style:normal;background:transparent;border-color:transparent;color:var(--fainter)}

/* Papelera en cada fila: discreta hasta que se pasa el cursor */
.btn--danger.btn--sm:has(> .ico:only-child){--bg:transparent;--bd:transparent;--fg:var(--faint)}
@media (hover:hover) and (pointer:fine){
  .btn--danger.btn--sm:has(> .ico:only-child):hover{background-color:var(--red-dim);border-color:transparent;color:var(--red-fg)}
}

/* Filas de Artículos y Gastos guardados: acciones tonales, más livianas */
.art__acciones .btn--gold{--bg:var(--gold-dim);--fg:var(--gold-hi);--bd:transparent}
.art__acciones .btn--gold .ico{color:inherit}
.art__acciones .btn:not(.btn--gold):not(.icon-btn){--bd:transparent;--bg:rgba(var(--tint),.06)}
@media (hover:hover) and (pointer:fine){
  .art__acciones .btn--gold:hover{background-color:rgba(201,162,39,.26);border-color:transparent;color:var(--gold-hi)}
  .art__acciones .btn:not(.btn--gold):not(.icon-btn):hover{background-color:rgba(var(--tint),.1);border-color:transparent}
}
@media (max-width:760px){
  .art__acciones{justify-content:flex-end}
  .art__acciones .btn{flex:0 0 auto}
}

/* Equipo: los nombres de los barberos no se cortan, bajan a otra línea */
.p-barbero__nombre{white-space:normal;text-wrap:balance;line-height:1.15;text-align:center;overflow-wrap:anywhere}

/* =========================================================
   Fase 2. Barra del celular con "Más", transición entre
   pestañas y más aire. Solo presentación y navegación.
   ========================================================= */

/* "Más" solo existe en la barra de abajo del celular */
.topnav button.nav-mas{display:none}
@media (max-width:760px){
  .topnav--app .nav-extra{display:none}
  .topnav--app button.nav-mas{
    display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;min-height:56px;
    justify-content:center;font-size:.72rem;border-radius:var(--r-md);color:var(--sobre-cuero-2);
  }
  .topnav--app button.nav-mas .ico{width:22px;height:22px}
  .topnav--app button.nav-mas.is-active{color:#fff}
  .topnav--app button.nav-mas.is-active .ico{stroke-width:2.2;color:var(--laton-claro)}
  .topnav--app button.nav-mas.is-active::before{content:"";position:absolute;top:-4px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
  :root:not([data-theme="dark"]) .topnav--app button.nav-mas{color:var(--text-3)}
  :root:not([data-theme="dark"]) .topnav--app button.nav-mas.is-active{color:var(--cream)}
  :root:not([data-theme="dark"]) .topnav--app button.nav-mas.is-active .ico{color:var(--gold-hi)}
}

/* La hoja de "Más": una lista agrupada, como los ajustes del teléfono */
.mas-lista{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-700)}
.mas-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;color:var(--cream);text-decoration:none;font-weight:600;
  transition:background-color .15s ease}
.mas-item+.mas-item{border-top:1px solid var(--line-soft)}
.mas-item span{flex:1}
.mas-item .ico{width:20px;height:20px;color:var(--text-2)}
.mas-item .ico:last-child{width:16px;height:16px;color:var(--faint)}
.mas-item.is-active .ico:first-child{color:var(--gold-hi)}
.mas-item:active{background:rgba(var(--tint),.06)}
@media (hover:hover) and (pointer:fine){.mas-item:hover{background:rgba(var(--tint),.04)}}

/* Al cambiar de pestaña la pantalla entra suave: aparece y sube unos píxeles */
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view{animation:viewIn .22s var(--ease-out) both}

/* Más aire y títulos con más presencia */
.section{margin-top:32px}
.section__head{border-bottom-color:transparent;padding-bottom:4px}
.page-head{margin-bottom:24px}
.page-head h1{font-size:2.05rem}
.hoy h1{font-size:2.5rem}
@media (max-width:760px){
  .section{margin-top:26px}
  .page-head{margin-bottom:18px}
  .page-head h1{font-size:1.6rem}
  .hoy h1{font-size:1.85rem}
}

/* Modo claro: superficies sin borde marcado, separadas por una sombra casi invisible */
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .parrilla,
:root:not([data-theme="dark"]) .balance,
:root:not([data-theme="dark"]) .arts,
:root:not([data-theme="dark"]) .grid--stats,
:root:not([data-theme="dark"]) .ganancia-mes{
  border-color:transparent;box-shadow:0 1px 2px rgba(14,15,18,.04),0 0 0 .5px rgba(14,15,18,.07);
}
/* La lista de primeros pasos: sin el contorno punteado */
.card.pasos{border:1px solid var(--line-soft);background:rgba(var(--tint),.02)}
.modal .mas-lista{margin-top:12px}

/* =========================================================
   Fase 3. Lenguaje de iOS: fuente del sistema, grises y
   superficies de Apple, controles grises, avatares redondos.
   Solo presentación. Para volver: borrar este bloque.
   ========================================================= */

/* Paleta de iOS (grupos sobre gris claro; negro puro en oscuro) */
:root{
  --ink-900:#f2f2f7;--ink-800:#f7f7fa;--ink-750:#ffffff;--ink-700:#ffffff;--ink-650:#f2f2f7;--ink-600:#ffffff;
  --ink-500:#c7c7cc;--ink-rgb:242,242,247;
  --line-soft:rgba(60,60,67,.12);--line-strong:rgba(60,60,67,.22);
  --cream:#1c1c1e;--text-2:#3a3a3c;--text-3:#6e6e73;--muted:#6e6e73;--faint:#8e8e93;--fainter:#c7c7cc;
  --boton:#1c1c1e;--boton-hover:#3a3a3c;
  --red-fg:#c4161c;--green-fg:#1f7a36;
  --r-md:10px;--r-lg:14px;--r-xl:20px;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,"Segoe UI",Roboto,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,"Segoe UI",Roboto,sans-serif;
  --font-num:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --gris-control:rgba(120,120,128,.12);--gris-control-hover:rgba(120,120,128,.2);
}
:root[data-theme="dark"]{
  --ink-900:#000000;--ink-800:#0c0c0d;--ink-750:#1c1c1e;--ink-700:#1c1c1e;--ink-650:#2c2c2e;--ink-600:#2c2c2e;
  --ink-500:#48484a;--ink-rgb:0,0,0;
  --line-soft:rgba(84,84,88,.4);--line-strong:rgba(84,84,88,.7);
  --cream:#f5f5f7;--text-2:#d1d1d6;--text-3:#98989d;--muted:#98989d;--faint:#8e8e93;--fainter:#48484a;
  --gris-control:rgba(120,120,128,.24);--gris-control-hover:rgba(120,120,128,.32);
}

/* Tipografía del sistema: en iPhone y Mac es la de Apple. Sin ensanchar. */
body,h1,h2,h3,.display,button,input,select,textarea{font-stretch:100%}
body{font-size:15px;letter-spacing:-.006em}
h1,h2,h3,.display{letter-spacing:-.02em}
.page-head h1,.hoy h1{font-weight:700;letter-spacing:-.025em}
h2,h3,.card h3,.section__head h2{font-weight:600}
/* Cifras en la versión redondeada de la fuente, como en las apps de Apple */
.stat__value,.money,.balance__cifra,.ganancia-mes__cifra,.art__stock b,.slot__price,.jornada__num{font-family:var(--font-num);font-stretch:100%}

/* Barras: material translúcido de iOS; la pestaña activa se tiñe, sin rayitas */
.topbar::before{background:rgba(249,249,251,.8)}
:root[data-theme="dark"] .topbar::before{background:rgba(22,22,23,.8)}
.topnav a.is-active::after{content:none}
@media (max-width:760px){
  :root:not([data-theme="dark"]) .topnav--app{background:rgba(249,249,251,.9)}
  :root[data-theme="dark"] .topnav--app{background:rgba(22,22,23,.9)}
  .topnav--app a.is-active::before,.topnav--app button.nav-mas.is-active::before{content:none}
  .topnav--app a,.topnav--app button.nav-mas{background:none!important}
  .topnav--app a .lbl,.topnav--app button.nav-mas .lbl{font-weight:500;font-size:.68rem}
  :root:not([data-theme="dark"]) .topnav--app a.is-active,
  :root:not([data-theme="dark"]) .topnav--app button.nav-mas.is-active{color:var(--gold-hi)}
  :root[data-theme="dark"] .topnav--app a.is-active,
  :root[data-theme="dark"] .topnav--app button.nav-mas.is-active{color:var(--laton-claro)}
}

/* Superficies: tarjetas blancas sobre gris, sin borde ni sombra (como los grupos de Ajustes) */
.card,.parrilla,.balance,.arts,.grid--stats,.ganancia-mes,.mas-lista{border-color:transparent;box-shadow:none}
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .parrilla,
:root:not([data-theme="dark"]) .balance,
:root:not([data-theme="dark"]) .arts,
:root:not([data-theme="dark"]) .grid--stats,
:root:not([data-theme="dark"]) .ganancia-mes{border-color:transparent;box-shadow:none}
.card.pasos{background:var(--ink-700);border-color:transparent}
.paso{background:var(--ink-900);border-color:transparent}
.paso__num{border-radius:50%}

/* Botones secundarios: el gris relleno de iOS, sin borde */
.btn:not(.btn--gold):not(.btn--danger):not(.btn--ghost){--bg:var(--gris-control);--bd:transparent}
@media (hover:hover) and (pointer:fine){
  .btn:not(.btn--gold):not(.btn--danger):not(.btn--ghost):hover{background-color:var(--gris-control-hover);border-color:transparent}
}
.btn--lg{border-radius:var(--r-lg)}
.btn--gold{font-weight:600}
/* Lo que quedaba con "pie" duro */
.stepper,.slot--taken,.cal-btn,.jornada__boton,.paso,.permiso,.quick-prices button,.tabs button.is-active{box-shadow:none}
.quick-prices button{background:var(--gris-control);border-color:transparent;font-weight:600}
.cal-btn{background:var(--gris-control);border-color:transparent}
.stepper{border-color:transparent;background:var(--gris-control)}

/* Control segmentado de iOS */
.tabs,.segmento{background:var(--gris-control);border-radius:9px;padding:2px}
.tabs button,.segmento button{border-radius:7px;font-weight:500}
.tabs button.is-active,.segmento button.is-active{
  background:var(--ink-700);color:var(--cream);font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
}
:root[data-theme="dark"] .tabs button.is-active,
:root[data-theme="dark"] .segmento button.is-active{background:#636366;color:#fff;box-shadow:none}

/* Campos: más limpios, línea fina */
input,select,textarea{border-color:var(--line-strong);border-radius:var(--r-md)}
input:hover,select:hover,textarea:hover{border-color:rgba(60,60,67,.36)}
:root[data-theme="dark"] input:hover,:root[data-theme="dark"] select:hover,:root[data-theme="dark"] textarea:hover{border-color:rgba(120,120,128,.6)}
input::placeholder,textarea::placeholder{color:#6e6e73}

/* Avatares redondos con gradiente gris, como Contactos */
.avatar{border-radius:50%;font-family:var(--font-ui);font-stretch:100%;font-weight:600;letter-spacing:0;color:#fff;
  background:linear-gradient(180deg,#a5aab4,#858a94)}
:root[data-theme="dark"] .avatar{background:linear-gradient(180deg,#6c707a,#4d5058);color:#fff}
.avatar--sm,.avatar--xs,.barber-card .avatar--sm{border-radius:50%}

/* La hoja de "Más" y los modales: esquinas de iOS */
.modal{border-radius:var(--r-xl)}

/* En el celular, tocar una pestaña no la deja "encendida" (el hover se queda pegado en las pantallas táctiles) */
@media (max-width:760px){
  .topnav--app a:not(.is-active),.topnav--app button.nav-mas:not(.is-active){color:var(--sobre-cuero-2)}
  :root:not([data-theme="dark"]) .topnav--app a:not(.is-active),
  :root:not([data-theme="dark"]) .topnav--app button.nav-mas:not(.is-active){color:var(--text-3)}
}
/* Botón principal deshabilitado, como en iOS: gris suave, texto apagado */
.btn--gold[disabled]{opacity:1;background:var(--gris-control);border-color:transparent;color:var(--faint)}
.btn--gold[disabled] .ico{color:var(--faint)}
:root[data-theme="dark"] .grid--stats,:root[data-theme="dark"] .card,:root[data-theme="dark"] .balance{border-color:transparent}

/* Cierre del barbero: la suma de propinas y vales, cuando se pide */
.invoice .cierre-barbero .cierre-suma td{border-top:1px solid var(--line-soft);border-bottom:0;font-weight:500;padding-top:9px;padding-bottom:9px}
.invoice .cierre-barbero .cierre-suma tr:first-child td{border-top:1px solid var(--line-strong)}
.invoice .cierre-barbero .cierre-suma .cierre-suma__total td{font-weight:700;font-size:1.05em;border-top:1px solid var(--line-strong)}

/* =========================================================
   Fase 4. Instrument Sans, gráficas más limpias y una entrada
   más protagonista. Solo presentación.
   ========================================================= */
:root{
  --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-num:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
body{letter-spacing:0}
.stat__value,.money,.balance__cifra,.ganancia-mes__cifra,.art__stock b,.slot__price,.jornada__num{font-variant-numeric:tabular-nums lining-nums}

/* Gráficas: barras finas y redondeadas en gris; la más alta en latón con su valor.
   Al tocar o pasar por otra barra, esa toma el color y muestra su valor. */
.chart{height:184px}
.bar{cursor:default;outline:0}
.bar__fill{width:min(100%,22px);border-radius:7px;background:rgba(var(--tint),.16)}
.bar--dim .bar__fill{background:rgba(var(--tint),.07)}
.bar.is-max .bar__fill,.bar:hover .bar__fill,.bar:focus .bar__fill{background:var(--gold)}
.chart:hover .bar.is-max:not(:hover) .bar__fill,
.chart:focus-within .bar.is-max:not(:focus) .bar__fill{background:rgba(var(--tint),.16)}
.bar__val{opacity:0;transform:translateY(3px);transition:opacity .15s var(--ease-out),transform .15s var(--ease-out);font-weight:600;color:var(--cream)}
.bar.is-max .bar__val,.bar:hover .bar__val,.bar:focus .bar__val{opacity:1;transform:none}
.chart:hover .bar.is-max:not(:hover) .bar__val,
.chart:focus-within .bar.is-max:not(:focus) .bar__val{opacity:0}
.bar:focus-visible .bar__fill{outline:2px solid var(--gold);outline-offset:2px}
.rank__bar{height:10px;border-radius:99px;background:rgba(var(--tint),.07)}
.rank__bar i{border-radius:99px;background:rgba(var(--tint),.28)}
.rank__row:first-child .rank__bar i{background:var(--gold)}
@media (prefers-reduced-motion:reduce){.bar__val{transition:none}}
/* En el celular no hay "pasar el ratón": cada barra lleva su cifra a la vista, como antes */
@media (hover:none){
  .bar .bar__val,.chart:hover .bar.is-max:not(:hover) .bar__val,.chart:focus-within .bar.is-max:not(:focus) .bar__val{opacity:1;transform:none}
}

/* Entrada (barberías y administración): el poste manda; el formulario es un
   panel oscuro translúcido sobre el mismo fondo, no una tarjeta blanca. */
main.acceso{background:radial-gradient(120% 70% at 50% 0%,#2a2b31 0%,#0e0e10 55%,#000 100%)}
main.acceso .acceso__marca{margin-bottom:28px}
main.acceso .acceso__marca .pole{--w:42px;--h:118px;--d:38px;--t:2.4s}
main.acceso .acceso__marca h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;font-stretch:100%;margin:18px 0 6px}
main.acceso .card{
  --ink-700:#1c1c1e;--ink-650:#2c2c2e;--ink-600:#2c2c2e;--cream:#f5f5f7;--text-2:#d1d1d6;--text-3:#98989d;--muted:#98989d;--faint:#8e8e93;
  --line-soft:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);--tint:255,255,255;--gris-control:rgba(120,120,128,.24);--gris-control-hover:rgba(120,120,128,.32);
  color:var(--cream);background:rgba(28,28,30,.72);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:26px 24px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
}
main.acceso .card h3{font-stretch:100%;font-weight:700;letter-spacing:-.02em}
main.acceso .card .btn--gold{--bg:var(--gold);--fg:#16171b;--bd:var(--gold)}
main.acceso .card .btn--gold .ico{color:#16171b}
@media (hover:hover) and (pointer:fine){main.acceso .card .btn--gold:hover{background-color:var(--laton-claro);border-color:var(--laton-claro);color:#16171b}}
main.acceso input::placeholder{color:#8e8e93}
main.acceso input:hover{border-color:rgba(255,255,255,.28)}

/* =========================================================
   Paleta "invierno": navy de protagonista, blanco y negro
   azulado para los detalles. Sustituye al latón.
   ========================================================= */
:root{
  --navy:#24375F;--navy-2:#2e4677;--acero:#456789;--azul-claro:#AFC3E0;--gris-azul:#8A9BB5;--lavanda:#E6E5F0;
  --ink-900:#eff1f7;--ink-650:#eff1f7;--ink-800:#f6f7fb;
  --cream:#0f1726;--text-2:#2b3446;--text-3:#5f6b80;--muted:#5f6b80;--faint:#8A9BB5;
  --line-soft:rgba(36,55,95,.10);--line-strong:rgba(36,55,95,.20);
  --gold:var(--navy);--gold-press:#1b2a49;--gold-hi:var(--navy);--gold-dim:rgba(69,103,137,.12);
  --laton-claro:var(--azul-claro);--line:rgba(36,55,95,.32);--on-gold:#fff;
  --boton:var(--navy);--boton-hover:var(--navy-2);--sobre-boton:#fff;--icono-boton:var(--azul-claro);
  --cuero:#0f1726;--barra:var(--navy);
  --gris-control:rgba(69,103,137,.10);--gris-control-hover:rgba(69,103,137,.17);
}
:root[data-theme="dark"]{
  --ink-900:#070b14;--ink-800:#0b111d;--ink-750:#121a2b;--ink-700:#121a2b;--ink-650:#1a2438;--ink-600:#1a2438;--ink-500:#2c3850;
  --cream:#eef2f9;--text-2:#cdd6e6;--text-3:#8A9BB5;--muted:#8A9BB5;--faint:#6f7d96;--fainter:#2c3850;
  --line-soft:rgba(175,195,224,.12);--line-strong:rgba(175,195,224,.22);
  --gold:var(--azul-claro);--gold-press:#c4d3ea;--gold-hi:var(--azul-claro);--gold-dim:rgba(175,195,224,.16);
  --laton-claro:var(--azul-claro);--line:rgba(175,195,224,.4);--on-gold:#0f1726;
  --boton:var(--azul-claro);--boton-hover:#c4d3ea;--sobre-boton:#0f1726;--icono-boton:var(--navy);
  --cuero:#060a13;--barra:var(--azul-claro);
  --gris-control:rgba(175,195,224,.12);--gris-control-hover:rgba(175,195,224,.2);
}
/* Barras de arriba y de abajo: blanco azulado en claro, navy casi negro en oscuro */
.topbar::before{background:rgba(247,248,252,.82)}
:root[data-theme="dark"] .topbar::before{background:rgba(9,14,25,.82)}
@media (max-width:760px){
  :root:not([data-theme="dark"]) .topnav--app{background:rgba(247,248,252,.92)}
  :root[data-theme="dark"] .topnav--app{background:rgba(9,14,25,.92)}
}
/* Lo que tenía el latón escrito a mano */
input:focus,select:focus,textarea:focus{border-color:var(--acero);box-shadow:0 0 0 3px rgba(69,103,137,.22)}
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus{border-color:var(--azul-claro);box-shadow:0 0 0 3px rgba(175,195,224,.22)}
@media (hover:hover) and (pointer:fine){.art__acciones .btn--gold:hover{background-color:rgba(69,103,137,.2);color:var(--gold-hi)}}
:root[data-theme="dark"] .art__acciones .btn--gold:hover{background-color:rgba(175,195,224,.24)}
.avatar{background:linear-gradient(180deg,var(--gris-azul),var(--acero));color:#fff}
:root[data-theme="dark"] .avatar{background:linear-gradient(180deg,#3d5577,#24375F);color:#eef2f9}
.paso__num{background:var(--navy);color:#fff}
.sync i{background:#4fb477}
/* Sobre fondos oscuros (entrada y bienvenida) el botón va en azul claro */
.portada{background:radial-gradient(120% 70% at 50% 0%,#22345a 0%,#0c1426 55%,#060a13 100%)}
.portada .btn--gold,main.acceso .card .btn--gold{--bg:var(--azul-claro);--fg:#0f1726;--bd:var(--azul-claro)}
.portada .btn--gold .ico,main.acceso .card .btn--gold .ico{color:#0f1726}
@media (hover:hover) and (pointer:fine){.portada .btn--gold:hover,main.acceso .card .btn--gold:hover{background-color:#c4d3ea;border-color:#c4d3ea;color:#0f1726}}
main.acceso{background:radial-gradient(120% 70% at 50% 0%,#22345a 0%,#0c1426 55%,#060a13 100%)}
main.acceso .card{--ink-700:#121a2b;--ink-650:#1a2438;--ink-600:#1a2438;--cream:#eef2f9;--text-2:#cdd6e6;--text-3:#8A9BB5;--muted:#8A9BB5;--faint:#8A9BB5;
  --line-soft:rgba(175,195,224,.12);--line-strong:rgba(175,195,224,.2);--gold:var(--azul-claro);--gold-hi:var(--azul-claro);
  background:rgba(18,26,43,.72);border-color:rgba(175,195,224,.12)}
main.acceso input:focus{border-color:var(--azul-claro);box-shadow:0 0 0 3px rgba(175,195,224,.22)}
:root{--gold-soft:rgba(69,103,137,.10)}
:root[data-theme="dark"]{--gold-soft:rgba(175,195,224,.12)}
.cal-btn:focus-visible{border-color:var(--acero);box-shadow:0 0 0 3px rgba(69,103,137,.22)}

/* Modo oscuro: botones más visibles. Los secundarios llevan un relleno azul
   claro más fuerte y un filo; la pestaña elegida se tiñe de azul claro. */
:root[data-theme="dark"]{--gris-control:rgba(175,195,224,.17);--gris-control-hover:rgba(175,195,224,.27)}
:root[data-theme="dark"] .btn:not(.btn--gold):not(.btn--danger):not(.btn--ghost),
:root[data-theme="dark"] .cal-btn,
:root[data-theme="dark"] .quick-prices button:not(.is-active){box-shadow:inset 0 0 0 1px rgba(175,195,224,.24);color:#fff}
:root[data-theme="dark"] .btn--ghost{--bg:rgba(175,195,224,.13);--fg:#fff;box-shadow:inset 0 0 0 1px rgba(175,195,224,.2)}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] .btn--ghost:hover{background-color:rgba(175,195,224,.22)}}
:root[data-theme="dark"] .btn--danger{--bg:rgba(255,105,97,.12);--bd:rgba(255,105,97,.5)}
:root[data-theme="dark"] .btn--gold[disabled]{color:var(--text-3);box-shadow:inset 0 0 0 1px rgba(175,195,224,.18)}
:root[data-theme="dark"] .btn--gold[disabled] .ico{color:var(--text-3)}
:root[data-theme="dark"] .tabs,:root[data-theme="dark"] .segmento{background:rgba(175,195,224,.1)}
:root[data-theme="dark"] .tabs button,:root[data-theme="dark"] .segmento button{color:var(--text-2)}
:root[data-theme="dark"] .tabs button.is-active,
:root[data-theme="dark"] .segmento button.is-active{background:var(--azul-claro);color:#0f1726}
:root[data-theme="dark"] .tema-btn{box-shadow:inset 0 0 0 1px rgba(175,195,224,.24)}
/* Días que se trabaja: el encendido se distingue de un vistazo en oscuro */
:root[data-theme="dark"] .dias-semana .dia{background:transparent;border-color:rgba(175,195,224,.22);color:var(--text-3)}
:root[data-theme="dark"] .dias-semana .dia.is-active{background:var(--azul-claro);border-color:var(--azul-claro);color:#0f1726}