/* tema.css — sistema visual de Barberprof (especificación de interfaz v1, 18-09-2026).
   Fuente de verdad: docs/especificacion-interfaz/. Oscuro por defecto; no hay tema claro.
   Lo ÚNICO que cambia entre barberías es --accent (lo pone el panel con el color de la barbería). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

:root{
  color-scheme:dark;
  /* Color base */
  --color-bg:#161826;
  --bg-sunken:#131523;
  --color-surface:#232532;
  --surface-quiet:#1D1F2E;
  --surface-inset:#1B1D2E;
  --color-text:#E9E9ED;
  --text-muted:rgb(233 233 237 / .62);          /* mínimo permitido: 62 % */
  --color-divider:rgb(233 233 237 / .16);

  /* El acento de la barbería y su rampa. Con el acento por defecto (#9184D9) la rampa queda
     en los valores de la especificación: 100 #F5F4FF, 200 #E7E5FE, 400 #B5ABFC, 800 #423A6A,
     900 #2B2741. Con cualquier otro color, la misma receta arma su propia rampa. */
  --accent:#9184D9;
  --color-accent:var(--accent);
  --color-accent-100:color-mix(in oklab, var(--accent) 6%, #fff);
  --color-accent-200:color-mix(in oklab, var(--accent) 17%, #fff);
  --color-accent-400:color-mix(in oklch, var(--accent) 62%, #fff);
  --color-accent-800:color-mix(in oklab, var(--accent) 40%, var(--color-bg));
  --color-accent-900:color-mix(in oklab, var(--accent) 16%, var(--color-bg));

  /* Estados: mismo brillo que el acento, poca saturación; solo punto, texto o borde. */
  --state-ok:#74B08E;   --state-ok-text:#A8D4BD;
  --state-warn:#CFA257; --state-warn-text:#E4C68F;
  --state-bad:#CF7D7D;  --state-bad-text:#E0A9A9;

  /* Tipografía, espacio y forma */
  --fuente:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --radio-chip:6px; --radio-control:8px; --radio-tarjeta:12px; --radio-modal:14px;
  --sombra:0 1px 2px rgb(0 0 0 / .22),0 10px 28px -16px rgb(0 0 0 / .55);
  --franja:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 9px);

  /* Escala de texto (escritorio) */
  --t-cifra:34px; --t-titulo:15px; --t-tarjeta:14px; --t-ui:13px; --t-tabla:13.5px; --t-sec:11.5px; --t-etiqueta:10.5px;

  /* Nombres antiguos del panel, apuntando a los tokens nuevos: así lo que aún no se rediseña
     igual hereda el sistema. */
  --ink:var(--color-text); --muted:var(--text-muted); --line:var(--color-divider);
  --paper:var(--surface-inset); --danger:var(--state-bad); --white:var(--color-surface);
  --verde:var(--bg-sunken); --lime:var(--color-accent-400);
}
@media(max-width:700px){
  :root{--t-cifra:41px; --t-titulo:20px; --t-ui:14px; --t-tabla:14.5px; --t-etiqueta:11px}
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 var(--t-ui)/1.5 var(--fuente);-webkit-font-smoothing:antialiased}
b,strong,th,h1,h2,h3,h4,legend,summary{font-weight:500}   /* solo dos pesos: 400 y 500 */
h1,h2,h3,h4{margin:0 0 8px;line-height:1.3;letter-spacing:-.01em}
h1{font-size:var(--t-titulo)} h2{font-size:var(--t-tarjeta)} h3{font-size:var(--t-ui)}
p{margin:0 0 12px}
a{color:var(--color-accent-400)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:var(--color-accent-800)}
.num,time,.cifra strong,td.num{font-variant-numeric:tabular-nums}
.muted,.secundario{color:var(--text-muted)}
.secundario{font-size:var(--t-sec)}
.etiqueta{font-size:var(--t-etiqueta);font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--text-muted);font-weight:400}

/* ── Marca: el logo sobre la baldosa oscura. La franja del poste queda como
      textura de la cabecera, no como marca. ─────────────────────────────── */
.marca{display:inline-block;width:28px;height:28px;flex:0 0 28px;border-radius:8px;border:1px solid var(--color-divider);background:url('/logo.png') center/auto 70% no-repeat,var(--surface-inset)}
.franja-superior{height:8px;background:var(--franja)}

/* ── Botones ──────────────────────────────────────────────────────────────
   Principal: contorno de acento sobre transparente. Si la barbería elige un acento claro
   (luminosidad > 70 %), se rellena con el acento y el texto pasa a --color-bg. */
.btn{--borde:var(--color-accent);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--borde);border-radius:var(--radio-control);background:transparent;color:var(--color-accent-200);font:500 var(--t-ui)/1.2 var(--fuente);text-decoration:none;white-space:nowrap;transition:background-color .12s}
.btn:hover{background:color-mix(in oklab,var(--borde) 7%,transparent)}
.btn:active{background:color-mix(in oklab,var(--borde) 14%,transparent)}
.btn.enfasis{background:color-mix(in oklab,var(--accent) 15%,transparent)}
:root[data-acento=claro] .btn:not(.secondary):not(.danger):not(.fantasma):not(.soft){background:var(--accent);border-color:var(--accent);color:var(--color-bg)}
.btn.secondary{--borde:var(--color-divider);color:var(--color-text)}
.btn.secondary:hover{background:rgb(233 233 237 / .06)}
.btn.danger{--borde:var(--state-bad);color:var(--state-bad-text)}
.btn.fantasma,.btn.soft{border-color:transparent;color:var(--color-accent-400)}
.btn.small{min-height:36px;padding:0 12px}                    /* barras densas de escritorio */
.btn.icono{width:44px;padding:0} .btn.icono.small{width:32px;min-height:32px}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.motivo{font-size:var(--t-sec);color:var(--text-muted)}      /* por qué un botón está deshabilitado */

/* ── Chips de estado: 24 px, radio 6, punto de 6 px ─────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radio-chip);font-size:var(--t-sec);line-height:1;white-space:nowrap;background:#292B31;color:var(--color-text);vertical-align:middle}
.chip.estado::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.chip.confirmada{background:var(--color-accent-900);color:var(--color-accent-200)}
.chip.confirmada::before{background:var(--color-accent)}
.chip.cobrada{background:rgb(116 176 142 / .18);color:var(--state-ok-text)}
.chip.no-llego{background:rgb(207 125 125 / .16);color:var(--state-bad-text)}
.chip.aviso{background:rgb(207 162 87 / .16);color:var(--state-warn-text)}
.chip.cancelada{background:transparent;border:1px solid var(--color-divider);color:var(--text-muted);text-decoration:line-through}
.chip.origen{background:#292B31;color:var(--text-muted)}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */
.tarjeta{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra)}
.cifra{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra);padding:16px 18px;min-width:0}
/* Una cifra de plata NUNCA se corta con "…": esconder dígitos es mentir. Donde el espacio es
   poco, se achica la letra (ver .ag-dos y .neg-kpis), no el número. */
.cifra strong{display:block;font:500 var(--t-cifra)/1.08 var(--fuente);letter-spacing:-.03em;margin:8px 0 6px;white-space:nowrap}
.cifra .comparacion{font-size:var(--t-sec);color:var(--text-muted)}
.cifra.destacada{border-color:var(--color-accent)}
.cifra.negativa strong{color:var(--state-bad-text)}
.sube{color:var(--state-ok-text)} .baja{color:var(--state-bad-text)}

/* Barra de ocupación: marcas en la mediana del rubro (56 %) y en las mejores barberías (75 %). */
.ocupacion{position:relative;height:6px;border-radius:3px;background:var(--surface-inset);margin:10px 0 4px}
.ocupacion>i{display:block;height:100%;max-width:100%;border-radius:3px;background:var(--color-accent)}
.ocupacion::before,.ocupacion::after{content:'';position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px}
.ocupacion::before{left:56%;background:rgb(255 255 255 / .55)}
.ocupacion::after{left:75%;background:#D2CEFD}

/* Mapa de calor: celdas de 13 px, días en columnas y horas en filas, de 900 a 400. */
.mapa{display:grid;gap:3px;justify-content:start;font-size:var(--t-sec);color:var(--text-muted)}
.mapa i{width:13px;height:13px;border-radius:3px;background:color-mix(in oklab,var(--color-accent-400) calc(var(--n,0) * 100%),var(--color-accent-900))}
.mapa i.vacio{background:var(--surface-inset)}
.leyenda-mapa{display:flex;align-items:center;gap:6px;font-size:var(--t-sec);color:var(--text-muted)}
.leyenda-mapa i{width:44px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--color-accent-900),var(--color-accent-400))}

/* Hueco libre: se ve, no se esconde. */
.hueco{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 12px;border:1px solid rgb(233 233 237 / .1);border-radius:var(--radio-control);background:repeating-linear-gradient(135deg,rgb(233 233 237 / .035) 0 6px,transparent 6px 12px);color:var(--text-muted);font-size:var(--t-sec)}

/* Tarjeta de fidelización: sellados con relleno de acento y visto; faltantes con contorno al 22 %. */
.sellos{display:flex;flex-wrap:wrap;gap:10px}
.sellos span{width:30px;height:30px;border-radius:50%;border:1.5px solid rgb(233 233 237 / .22);display:grid;place-items:center;font-size:12px;color:var(--text-muted)}
.sellos span.full{background:var(--accent);border-color:var(--accent);color:var(--color-bg)}

/* Separador: regla de 1 px que se desvanece en los extremos. Mejor espacio que regla. */
.separador,.divider{height:1px;border:0;margin:20px 0;background:linear-gradient(90deg,transparent,var(--color-divider) 36px,var(--color-divider) calc(100% - 36px),transparent)}

/* ── Modal (escritorio) y hoja inferior (celular) ─────────────────────── */
dialog{width:452px;max-width:calc(100% - 32px);max-height:88vh;overflow:auto;padding:24px;border:1px solid var(--color-divider);border-radius:var(--radio-modal);background:var(--color-surface);color:var(--color-text);box-shadow:0 24px 64px rgb(0 0 0 / .5)}
dialog::backdrop{background:rgb(16 18 32 / .72)}
dialog .close{position:absolute;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--text-muted);font-size:22px;line-height:1}
dialog .close:hover{background:rgb(233 233 237 / .06)}
@media(max-width:700px){
  dialog{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92dvh;border-radius:20px 20px 0 0;border-bottom:0;padding:30px 18px calc(20px + env(safe-area-inset-bottom))}
  dialog::before{content:'';position:absolute;top:10px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgb(233 233 237 / .25)}
  dialog[open]{animation:subir .22s ease-out}
}
@keyframes subir{from{transform:translateY(40px);opacity:.4}}

/* ── Estados vacíos, carga y error ─────────────────────────────────────── */
.vacio-icono,.empty-icon{width:40px;height:40px;border-radius:10px;border:1px solid var(--color-divider);background:var(--surface-inset);display:grid;place-items:center;color:var(--color-accent-400);font-size:18px;margin:0 auto 14px}
.esqueleto{background:rgb(255 255 255 / .07);border-radius:var(--radio-control)}   /* sin brillo animado */

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