/* =====================================================================
   AR-POS Barber — «El letrero de precios»
   Fieltro negro, letras blancas a presión, rojo de etiqueta.
   Tailwind (CDN) maneja el layout; aquí viven los tokens, las piezas
   del mundo y el movimiento.
   ===================================================================== */

:root {
    /* Fieltro y sus pasos de tono */
    --felt: #161616;
    --felt-2: #1f1f1e;
    --felt-3: #2a2a28;
    --felt-4: #353532;

    /* Letras */
    --letter: #f4f1ea;
    --letter-2: #b9b4aa;
    --letter-3: #8a867e;

    /* Placa crema (lo que el usuario sostiene) */
    --cream: #efeae0;
    --cream-2: #e4ddd0;
    --ink: #161616;
    --ink-2: #57534c;

    /* Color reservado: tu elección y la acción principal */
    --tag: #c9392a;
    --tag-press: #ad2f22;
    --tag-lit: #e8604a;      /* rojo como texto sobre fieltro (contraste 4.9:1) */
    --tag-hover: #d4402f;

    /* Campos sobre la placa crema */
    --field-cream: #fbf9f4;
    --field-cream-line: #cfc7b8;
    --field-cream-placeholder: #8b857a;

    /* Estados */
    --amber: #e8b04b;
    --wa: #25d366;

    /* Movimiento */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-press: 160ms;
    --dur-ui: 240ms;
}

html {
    background: var(--felt);
    color: var(--letter);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
}

body {
    min-height: 100dvh;
    font-family: Barlow, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overscroll-behavior-y: none;
}

[x-cloak] { display: none !important; }

/* ---------- Superficies del navegador ---------- */
::selection { background: var(--tag); color: #fff; }
input, textarea { caret-color: var(--tag); }
:focus-visible { outline: 2px solid var(--letter); outline-offset: 2px; }
.on-cream :focus-visible { outline-color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--felt-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--felt-4); border: 3px solid var(--felt); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Letras del letrero ---------- */
.board-type {
    font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* El tablero: fieltro con ranuras horizontales (la textura real del letrero) */
.board {
    background-color: var(--felt-2);
    background-image: repeating-linear-gradient( /* taste-skill-ignore: ranuras del fieltro del letrero (textura del objeto, no relleno) */
        to bottom,
        transparent 0 12px,
        rgba(0, 0, 0, 0.2) 12px 14px
    );
}

/* Filas del tablero: sin bordes, separadas por el aire y un paso de tono al tocar */
.board-row {
    transition: background-color 150ms ease, transform var(--dur-press) var(--ease-out);
}
.board-row:active { transform: scale(0.985); }

/* ---------- Placa crema ---------- */
.plate {
    background: var(--cream);
    color: var(--ink);
}

/* ---------- Controles ---------- */
.press { transition: transform var(--dur-press) var(--ease-out), background-color 150ms ease, color 150ms ease, opacity 150ms ease; }
.press:active:not(:disabled) { transform: scale(0.97); }

.btn-tag {
    background: var(--tag);
    color: #fff;
}
.btn-tag:active:not(:disabled) { background: var(--tag-press); }
.btn-tag:disabled { opacity: 0.55; }

.field {
    width: 100%;
    background: var(--felt-2);
    color: var(--letter);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--felt-4); /* taste-skill-ignore: contorno de campo de formulario */
    border-radius: 2px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    transition: box-shadow 150ms ease;
}
.field::placeholder { color: var(--letter-3); }
.field[type="time"], .field[type="date"], select.field { color-scheme: dark; }
.field-cream[type="date"] { color-scheme: light; }
@media (max-width: 639px) {
    /* En pantallas chicas el ícono del selector se come el «AM/PM»; el teléfono abre su selector igual */
    .field[type="time"] { padding-left: 0.75rem; padding-right: 0.5rem; }
    .field[type="time"]::-webkit-calendar-picker-indicator { display: none; }
}
.field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--letter); } /* taste-skill-ignore: contorno de campo de formulario */
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--tag); } /* taste-skill-ignore: contorno de campo de formulario */

.field-cream {
    width: 100%;
    background: var(--field-cream);
    color: var(--ink);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--field-cream-line); /* taste-skill-ignore: contorno de campo de formulario */
    border-radius: 2px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    transition: box-shadow 150ms ease;
}
.field-cream::placeholder { color: var(--field-cream-placeholder); }
.field-cream:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: contorno de campo de formulario */
.field-cream[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--tag); } /* taste-skill-ignore: contorno de campo de formulario */

/* Control segmentado con placa deslizante */
.segmented { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--felt-2); padding: 3px; }
.segmented-plate {
    position: absolute; top: 3px; bottom: 3px; left: 3px;
    background: var(--felt-4);
    transition: transform var(--dur-ui) var(--ease-out);
}
.segmented button { position: relative; z-index: 1; }

/* ---------- Movimiento firma: las letras se acomodan ---------- */
@keyframes settle {
    from { opacity: 0; transform: translateY(-7px); filter: blur(2px); }
    to   { opacity: 1; transform: none; filter: none; }
}
.settle {
    animation: settle 280ms var(--ease-out) both;
    animation-delay: calc(min(var(--i, 0), 18) * 18ms);
}

/* Entrada de cada paso / vista */
@keyframes view-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.view-in { animation: view-in var(--dur-ui) var(--ease-out) both; }

/* ---------- Hoja inferior (placa que sube) ---------- */
.sheet {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 220ms var(--ease-out), visibility 0s linear 220ms;
    will-change: transform;
}
.sheet.is-open {
    transform: none;
    visibility: visible;
    transition: transform 460ms var(--ease-drawer), visibility 0s;
}
/* En escritorio (recepción) la hoja de walk-in vive acoplada, siempre visible */
@media (min-width: 1024px) {
    .sheet-dock, .sheet-dock.is-open {
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
    }
}
/* En escritorio la placa de confirmación se acopla bajo tu elección y aparece en su lugar */
@media (min-width: 1024px) {
    .sheet-inline {
        transform: translateY(-6px);
        opacity: 0;
        transition: transform 160ms var(--ease-out), opacity 120ms ease, visibility 0s linear 160ms;
    }
    .sheet-inline.is-open {
        transform: none;
        opacity: 1;
        transition: transform 320ms var(--ease-out), opacity 200ms ease, visibility 0s;
    }
}
.backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Toast ---------- */
.toast {
    transform: translate(-50%, calc(-100% - 24px));
    opacity: 0;
    transition: transform 220ms var(--ease-out), opacity 180ms ease;
}
.toast.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    transition: transform 420ms var(--ease-drawer), opacity 200ms ease;
}

/* Esqueleto de carga */
@keyframes breathe { 50% { opacity: 0.45; } }
.skeleton { background: var(--felt-3); animation: breathe 1.4s ease-in-out infinite; }

/* Hover solo con puntero fino (en táctil, :hover queda pegado) */
@media (hover: hover) and (pointer: fine) {
    .board-row:hover { background-color: var(--felt-3); }
    .hover-letter:hover { color: var(--letter); }
    .btn-tag:hover:not(:disabled) { background: var(--tag-hover); }
    .hover-plate:hover { background-color: var(--felt-3); }
    .plate .hover-cream:hover { background-color: var(--cream-2); }
}

.safe-bottom { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }

/* =====================================================================
   Datos (estadísticas). Tinta de datos: verdín, la pátina del bronce del
   letrero. Validada con dataviz/validate_palette.js en fieltro y en papel.
   Las letras nunca llevan el color del dato: los textos siguen en tinta.
   ===================================================================== */
:root {
    --data: #26987b;            /* serie única */
    --data-booked: #7fd3bf;     /* pronóstico: lo agendado (seguro) */
    --data-expected: #2c8471;   /* pronóstico: lo esperado (estimación) */
    --grid: #2a2a28;
}
.bar { background: var(--data); border-radius: 4px 4px 0 0; transition: filter 150ms ease, opacity 150ms ease; }
.bar-h { background: var(--data); border-radius: 0 4px 4px 0; transition: filter 150ms ease; }
.bar-booked { background: var(--data-booked); }
.bar-expected { background: var(--data-expected); }
.gridline { border-top: 1px solid var(--grid); } /* taste-skill-ignore: retícula de eje (spec dataviz), no ornamento */
.hit:focus-visible { outline: 2px solid var(--letter); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .hit:hover .bar, .hit:hover .bar-h { filter: brightness(1.18); }
}
.chart-tip {
    position: fixed; z-index: 60; pointer-events: none;
    background: var(--cream); color: var(--ink);
    padding: 0.5rem 0.75rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); /* taste-skill-ignore: tooltip flotante */
    transform: translate(-50%, calc(-100% - 10px));
}
.chart-tip.below { transform: translate(-50%, 0); }
.print-only { display: none; }

/* =====================================================================
   Impresión: papel blanco, tinta negra, sin navegación ni controles.
   ===================================================================== */
@media print {
    @page { margin: 14mm 12mm; }
    :root {
        --data: #008a6e;
        --data-booked: #16705f;
        --data-expected: #74b9a9;
        --grid: #d9d6cf;
    }
    html, body { background: #fff !important; color: #111 !important; color-scheme: light; }
    .no-print, .chart-tip { display: none !important; }
    .print-only { display: block !important; }
    .board, .bg-felt-2, .bg-felt-3, .bg-felt-4, header { background: #fff !important; background-image: none !important; }
    .board { box-shadow: inset 0 0 0 1px #d9d6cf; } /* taste-skill-ignore: marco de tabla impresa */
    .text-letter, .text-letter-2 { color: #111 !important; }
    .text-letter-3 { color: #555 !important; }
    .print-avoid { break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
    .settle, .view-in { animation: none !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Movimiento reducido: se queda el color y la opacidad, se va el viaje ---------- */
@media (prefers-reduced-motion: reduce) {
    .settle, .view-in { animation-name: fade; animation-delay: 0ms; }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
    .sheet, .sheet.is-open { transform: none; transition: opacity 200ms ease, visibility 0s; opacity: 0; }
    .sheet.is-open { opacity: 1; }
    .toast, .toast.is-open { transform: translate(-50%, 0); }
    .press:active:not(:disabled), .board-row:active { transform: none; }
    .segmented-plate { transition: none; }
    .skeleton { animation: none; }
}