/* WAYNA · F11 UX T04 — Clientes, Reservas, Gestión (Food Cost, Rentabilidad, Reportes) y Facturación operativa.
   Solo panel `admin`. Tokens de wayna-tenant-shell.css / wayna-tenant-operations.css; aquí solo se definen los colores de los gráficos
   (valores propios de cada modo) y los patrones de filtros y tablas de las pantallas gerenciales. */
:root {
    --wy-on-solid: #ffffff;   /* texto sobre fondos de acento sólidos */
    --wy-chart-1: #0284c7;   /* ventas netas (Primary) */
    --wy-chart-2: #c2410c;   /* costo (atención) */
    --wy-chart-3: #15803d;   /* margen (positivo) */
    --wy-chart-4: #475569;   /* Food Cost % / neutro */
}
:root.dark {
    --wy-chart-1: #38bdf8;
    --wy-chart-2: #fb923c;
    --wy-chart-3: #4ade80;
    --wy-chart-4: #cbd5e1;
}

/* ---------- barra de periodo y filtros ---------- */
.wy-filterbar { display: grid; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--wy-surface); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.wy-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .875rem; border-radius: 999px; font-size: .875rem; cursor: pointer; background: var(--wy-surface-2); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-chip[aria-pressed="true"], .wy-chip.is-active { background: var(--wy-tone-info-bg); border-color: var(--wy-tone-info-solid); color: var(--wy-tone-info-fg); font-weight: 700; }
.wy-chip:focus-visible, .wy-input:focus-visible { outline: 3px solid var(--wy-secondary); outline-offset: 2px; }
.wy-fields { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.wy-field { display: grid; gap: .25rem; font-size: .8125rem; color: var(--wy-text-muted); }
.wy-input { width: 100%; min-height: 2.5rem; padding: .375rem .625rem; border-radius: .5rem; font-size: .875rem; background-color: var(--wy-surface); color: var(--wy-text); border: 1px solid var(--wy-border); }
/* Selects nativos: el chevron (imagen de fondo, posición, tamaño y no-repeat) viene de Filament. Aquí NO se usa el atajo `background:` (borraba posición/tamaño/repetición y el icono
   se repetía en mosaico) y se reserva el espacio del icono a la derecha para que el texto nunca quede encima. */
select.wy-input { padding-right: 2.5rem; text-overflow: ellipsis; }
.wy-viewing { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; font-size: .875rem; color: var(--wy-text-muted); }
.wy-viewing strong { color: var(--wy-text); }
.wy-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .875rem; }
.wy-note-sm { font-size: .8125rem; color: var(--wy-text-muted); }

/* ---------- pestañas de reportes ---------- */
.wy-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.wy-tab { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .375rem 1rem; border-radius: .625rem; font-size: .875rem; text-decoration: none; background: var(--wy-surface-2); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-tab[aria-current="page"] { background: var(--wy-tone-info-solid); border-color: var(--wy-tone-info-solid); color: var(--wy-on-solid); font-weight: 700; }

/* ---------- tarjeta / bloque ---------- */
.wy-card { padding: 1rem; border-radius: .75rem; background: var(--wy-surface); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-card__title { font-size: .9375rem; font-weight: 700; margin-bottom: .5rem; }
.wy-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.wy-grid-kpi { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 1024px) { .wy-grid-2 { grid-template-columns: 1fr 1fr; } }
.wy-dl { display: grid; grid-template-columns: 1fr auto; gap: .375rem 1rem; font-size: .875rem; }
.wy-dl dt { color: var(--wy-text-muted); }
.wy-dl dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wy-dl .wy-dl__total { padding-top: .375rem; border-top: 1px solid var(--wy-border); color: var(--wy-text); font-weight: 700; }

/* ---------- tablas gerenciales ---------- */
.wy-tablewrap { overflow-x: auto; border-radius: .75rem; background: var(--wy-surface); border: 1px solid var(--wy-border); }
.wy-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--wy-text); }
.wy-table caption { text-align: left; padding: .75rem 1rem 0; font-weight: 700; }
.wy-table th { padding: .625rem .75rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--wy-surface-2); color: var(--wy-text-muted); white-space: nowrap; }
.wy-table td { padding: .625rem .75rem; border-top: 1px solid var(--wy-border); vertical-align: top; }
.wy-table tfoot td { font-weight: 700; background: var(--wy-surface-2); }
.wy-table .wy-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wy-table button[data-sort] { all: unset; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.wy-table button[data-sort]:focus-visible { outline: 3px solid var(--wy-secondary); }
.wy-row--warn td { background: color-mix(in srgb, var(--wy-tone-attention-bg) 40%, transparent); }
.wy-row--neg td.wy-num[data-col="gross_margin"], .wy-row--neg td.wy-num[data-col="margin_percent"] { color: var(--wy-tone-danger-fg); font-weight: 700; }
.wy-table .wy-recon td { font-weight: 600; }
.wy-neg { color: var(--wy-tone-danger-fg); font-weight: 700; }
.wy-link { color: var(--wy-tone-info-fg); text-decoration: underline; }

/* ---------- gráficos (SVG con tokens; funcionan en claro y oscuro) ---------- */
.wy-chart { padding: .75rem; border-radius: .75rem; background: var(--wy-surface); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-chart svg { width: 100%; height: auto; display: block; }
.wy-chart__axis { stroke: var(--wy-border); stroke-width: 1; }
.wy-chart__max { fill: var(--wy-text-muted); font-size: 10px; }
.wy-chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wy-chart__dot { stroke: none; }
.wy-chart__hit { fill: transparent; }
.wy-chart__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: var(--wy-text-muted); margin-top: .5rem; }
.wy-chart__swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-inline-end: .25rem; vertical-align: -1px; }

/* ---------- Clientes / Reservas: ficha y agenda ---------- */
.wy-agenda { display: grid; gap: .75rem; }
.wy-agenda__day { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wy-text-muted); }

/* ---------- utilidades de las pantallas de detalle (sustituyen colores fijos de Tailwind) ---------- */
.wy-muted { color: var(--wy-text-muted); }
.wy-tint { border-radius: .75rem; padding: 1rem; border: 1px solid transparent; font-size: .875rem; }
.wy-tint--attention { background: var(--wy-tone-attention-bg); color: var(--wy-tone-attention-fg); border-color: var(--wy-tone-attention-solid); }
.wy-tint--info { background: var(--wy-tone-info-bg); color: var(--wy-tone-info-fg); border-color: var(--wy-tone-info-solid); }
.wy-tint--success { background: var(--wy-tone-success-bg); color: var(--wy-tone-success-fg); border-color: var(--wy-tone-success-solid); }
.wy-tint--neutral { background: var(--wy-tone-neutral-bg); color: var(--wy-tone-neutral-fg); border-color: var(--wy-tone-neutral-solid); }
.wy-linkbtn { all: unset; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--wy-tone-info-fg); text-decoration: underline; }
.wy-linkbtn--warn { color: var(--wy-tone-attention-fg); }
.wy-linkbtn:focus-visible { outline: 3px solid var(--wy-secondary); }

/* ---------- Calendario de reservas ---------- */
.wy-cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.wy-cal-bar__nav { display: flex; align-items: center; gap: .5rem; }
.wy-cal-title { font-size: 1.125rem; font-weight: 700; color: var(--wy-text); text-transform: capitalize; }
.wy-iconbtn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .625rem; cursor: pointer; background: var(--wy-surface-2); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-iconbtn svg { width: 1.25rem; height: 1.25rem; }
.wy-iconbtn:focus-visible { outline: 3px solid var(--wy-secondary); outline-offset: 2px; }
.wy-seg { display: inline-flex; padding: .1875rem; gap: .1875rem; border-radius: .75rem; background: var(--wy-surface-2); border: 1px solid var(--wy-border); }
.wy-seg button { min-height: 2.25rem; padding: .25rem 1rem; border-radius: .5rem; font-size: .875rem; color: var(--wy-text); cursor: pointer; background: transparent; border: 0; }
.wy-seg button[aria-pressed="true"] { background: var(--wy-tone-info-solid); color: var(--wy-on-solid); font-weight: 700; }
.wy-cal { display: grid; gap: .5rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wy-cal--week { grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); grid-template-columns: none; overflow-x: auto; padding-bottom: .5rem; }
@media (min-width: 1100px) { .wy-cal--week { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } }
.wy-cal__day { display: flex; flex-direction: column; gap: .375rem; min-height: 7rem; padding: .5rem; border-radius: .75rem; background: var(--wy-surface); border: 1px solid var(--wy-border); color: var(--wy-text); }
.wy-cal__day--muted { opacity: .55; }
.wy-cal__day--today { border-color: var(--wy-tone-info-solid); box-shadow: inset 0 0 0 1px var(--wy-tone-info-solid); }
.wy-cal__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .8125rem; color: var(--wy-text-muted); }
.wy-cal__num { font-size: 1.125rem; font-weight: 700; color: var(--wy-text); }
.wy-cal__more { all: unset; cursor: pointer; font-size: .75rem; font-weight: 600; color: var(--wy-tone-info-fg); text-decoration: underline; }
.wy-cal__wd { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wy-text-muted); }
.wy-res { display: grid; gap: .125rem; padding: .375rem .5rem; border-radius: .5rem; font-size: .8125rem; text-decoration: none; border: 1px solid transparent; }
.wy-res--pending { background: var(--wy-tone-attention-bg); color: var(--wy-tone-attention-fg); border-color: var(--wy-tone-attention-solid); }
.wy-res--confirmed { background: var(--wy-tone-info-bg); color: var(--wy-tone-info-fg); border-color: var(--wy-tone-info-solid); }
.wy-res:focus-visible { outline: 3px solid var(--wy-secondary); outline-offset: 1px; }
.wy-res__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.wy-res__meta { display: flex; flex-wrap: wrap; gap: .125rem .625rem; font-size: .75rem; }
.wy-res__meta span { display: inline-flex; align-items: center; gap: .25rem; }
.wy-res__meta svg { width: .875rem; height: .875rem; }
.wy-res--compact { padding: .25rem .375rem; font-size: .75rem; }
.wy-legend-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; color: var(--wy-text-muted); }

/* ---------- Reportes operativos (UX T04 · corrección UAT 02): shell con categorías, reportes como pestañas, KPIs, gráficos y tabla ---------- */
.wy-reports { display: grid; gap: 1rem; min-width: 0; }
.wy-tab { cursor: pointer; font-family: inherit; gap: .375rem; }
.wy-tab__icon, .wy-chip__icon { width: 1.125rem; height: 1.125rem; flex: none; }
.wy-chip { gap: .375rem; text-decoration: none; font-family: inherit; }
.wy-chip:disabled { opacity: .55; cursor: not-allowed; }
.wy-subtabs { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .125rem; border-bottom: 1px solid var(--wy-border); scrollbar-width: thin; }
.wy-subtab { flex: none; min-height: 2.5rem; padding: .375rem .875rem; font-size: .875rem; font-family: inherit; cursor: pointer; white-space: nowrap; background: transparent; color: var(--wy-text-muted); border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.wy-subtab:hover { color: var(--wy-text); }
.wy-subtab[aria-current="page"] { color: var(--wy-tone-info-fg); font-weight: 700; border-bottom-color: var(--wy-tone-info-solid); }
.wy-subtab:focus-visible { outline: 3px solid var(--wy-secondary); outline-offset: -3px; border-radius: .375rem; }
.wy-report-head { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-start; justify-content: space-between; }
.wy-report-title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--wy-text); }
.wy-report-desc { max-width: 46rem; font-size: .9375rem; color: var(--wy-text-muted); text-wrap: pretty; }
.wy-export { display: flex; flex-wrap: wrap; gap: .5rem; }
.wy-muted { color: var(--wy-text-muted); }
.wy-table--report { min-width: 40rem; }
.wy-table-foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding-top: .5rem; }
.wy-reports .wy-grid-2 > * { min-width: 0; }
/* barras horizontales */
.wy-bars__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.wy-bars__row { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr auto; gap: .625rem; align-items: center; font-size: .8125rem; }
.wy-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wy-text); }
.wy-bars__track { height: .75rem; border-radius: 999px; background: var(--wy-surface-2); border: 1px solid var(--wy-border); overflow: hidden; }
.wy-bars__fill { display: block; height: 100%; border-radius: 999px; background: var(--wy-chart-1); }
.wy-bars__value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wy-text); }
@media (max-width: 899px) { .wy-col--secondary { display: none; } .wy-table--report { min-width: 0; } }
@media (max-width: 640px) { .wy-bars__row { grid-template-columns: 1fr auto; } .wy-bars__track { grid-column: 1 / -1; order: 3; } }
.wy-narrow-note { display: none; }
@media (max-width: 899px) { .wy-narrow-note { display: block; } }

/* UX T06: la evolución ocupa todo el ancho; los resúmenes por canal y por medio de pago van debajo, uno junto al otro (apilados en pantallas angostas). */
.wy-reports .wy-grid-2 > .wy-chart--wide { grid-column: 1 / -1; }