@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --olive-900: #34402c;
  --olive-700: #596648;
  --olive-600: #687654;
  --olive-100: #e7eadf;
  --bone: #f4f1e8;
  --paper: #fcfbf7;
  --ink: #20241e;
  --muted: #756b59;
  --line: #ddd8ca;
  --amber: #b67a32;
  --amber-soft: #f6ead8;
  --danger: #9f3f36;
  --danger-soft: #fae8e5;
  --success: #41623c;
  --success-soft: #e5efe2;
  --blue: #426b78;
  --table-row-hover: rgb(231 235 219 / 60%);
  --shadow: 0 10px 30px rgb(50 54 42 / 8%);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Nada debe producir desplazamiento horizontal del documento. En el celular un
   solo elemento que no encoge —un nombre largo, una pastilla con
   white-space:nowrap, una tabla ancha— empujaba el ancho de la página entera:
   la cabecera (sticky) y la barra inferior (fixed) se dimensionan contra ese
   ancho, así que el recorte no se veía sólo en el bloque culpable sino en toda
   la pantalla. Es `clip` y no `hidden` a propósito: `hidden` crea un contenedor
   de desplazamiento y rompería el `position:sticky` de la cabecera, la barra
   del calendario y los encabezados fijos. */
html, body { overflow-x: clip; }
#view, #view > * { max-width: 100%; }
/* El chip de rol de la cabecera cede ancho antes de empujar la página: con
   dos roles ("Administrativo · Personal") no cabía junto al título. */
#topRole { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tailwind no está emitiendo los valores arbitrarios de max-width que usaba el
   aviso flotante (max-w-[90vw]), así que su tope de ancho se fija aquí. */
#toast { max-width: min(92vw, 32rem); }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
/* iOS amplía la página al enfocar un campo con letra menor a 16px y no la
   regresa al salir; como la app no recarga entre vistas, ese zoom se arrastra
   a todas las pantallas y todo queda recortado por la derecha (cabecera,
   tablas, barra inferior). El `font: inherit` de arriba deja los campos en los
   15px del body —y, por ir fuera de capa, le gana al `text-base` de
   Tailwind—, así que en pantallas táctiles se fijan 16px. !important porque
   hay selectores más específicos que achican la letra (.report-payroll-group). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgb(182 122 50 / 35%);
  outline-offset: 2px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .editorial { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.03; letter-spacing: -.025em; }
h2 { font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.1; }
h3 { font-size: 1rem; }

.app-shell { min-height: 100dvh; }
.sidebar { display: none; }
.page-wrap { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 68px; padding: 10px 16px;
  background: rgb(252 251 247 / 94%); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.brand-title { display: block; font-weight: 800; letter-spacing: .09em; font-size: .8rem; }
.brand-sub { display: block; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-pill { border: 1px solid var(--line); background: var(--bone); padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.icon-btn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); cursor: pointer; }
.content { width: min(100%, 1280px); margin: 0 auto; padding: 22px 16px 112px; }
.page-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.page-heading > .btn { width: 100%; }
.page-heading h1 { margin-bottom: 6px; }
.page-heading p { margin: 0; color: var(--muted); max-width: 62ch; }
.eyebrow { color: var(--olive-700); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .72rem; }
.bottom-nav {
  position: fixed; z-index: 40; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgb(252 251 247 / 97%); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgb(50 54 42 / 6%);
}
.bottom-nav a { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); border-radius: 12px; font-size: .65rem; font-weight: 700; }
.bottom-nav a .nav-icon { font-size: 1.1rem; line-height: 1; }
.bottom-nav a.active { background: var(--olive-100); color: var(--olive-900); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px; }
.soft-card { background: rgb(255 255 255 / 45%); border: 1px solid var(--line); border-radius: 15px; padding: 15px; }
.grid { display: grid; gap: 14px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: 16px; }
.stat-value { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: 2rem; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .78rem; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2, .section-head h3 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.strong { font-weight: 800; }

.btn { min-height: 46px; border: 1px solid transparent; border-radius: 13px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; cursor: pointer; transition: transform .12s, background .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--olive-700); color: white; }
.btn-primary:hover { background: var(--olive-900); }
.btn-secondary { background: var(--paper); color: var(--olive-900); border-color: var(--line); }
.btn-amber { background: var(--amber); color: white; }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: #e9bcb6; }
.btn-ghost { background: transparent; color: var(--olive-900); }
.btn-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sticky-actions { position: sticky; bottom: 76px; z-index: 20; display: flex; justify-content: flex-end; gap: 10px; padding: 12px; margin: 24px -4px 0; background: rgb(244 241 232 / 92%); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(12px); }

.field-grid { display: grid; gap: 15px; }
.field { display: grid; gap: 6px; }
.field label, .label { font-size: .78rem; font-weight: 800; color: var(--olive-900); }
.required::after { content: " *"; color: var(--danger); }
.control { width: 100%; min-height: 48px; border: 1px solid #cfc9ba; border-radius: 12px; padding: 10px 12px; color: var(--ink); background: white; }
textarea.control { min-height: 100px; resize: vertical; }
.control:focus { border-color: var(--olive-600); outline: 3px solid rgb(104 118 84 / 15%); }
.hint { font-size: .72rem; color: var(--muted); }
.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--olive-700); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch-ui { width: 46px; height: 26px; border-radius: 999px; background: #c9c4b7; padding: 3px; transition: .2s; }
.switch-ui::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; transition: .2s; box-shadow: 0 2px 5px #0002; }
.switch input:checked + .switch-ui { background: var(--olive-600); }
.switch input:checked + .switch-ui::after { transform: translateX(20px); }

.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: #e9e5db; border-radius: 14px; margin-bottom: 18px; scrollbar-width: none; }
.tab { min-height: 42px; flex: 1 0 auto; border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 11px; font-weight: 800; cursor: pointer; }
.tab.active { background: var(--paper); color: var(--olive-900); box-shadow: 0 2px 8px #3331; }
.tab-panel[hidden] { display: none !important; }
.filter-bar { display: grid; gap: 10px; padding: 12px; margin-bottom: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; }
.search { position: relative; }
.search .control { padding-left: 40px; }
.search::before { content: "⌕"; position: absolute; top: 8px; left: 13px; font-size: 1.35rem; color: var(--muted); }

.list { display: grid; gap: 10px; }
.list-card { display: grid; gap: 12px; padding: 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; }
.list-main { min-width: 0; }
.list-main h3 { margin: 0 0 3px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: .78rem; }
.list-actions { display: flex; gap: 8px; align-items: center; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 12px; border-bottom: 1px solid #ebe7dd; vertical-align: middle; }
.data-table tbody tr { transition: background-color .15s; }
.data-table tbody tr:hover { background: var(--table-row-hover); }
.data-table tr:last-child td { border: 0; }
.table-scroll { overflow-x: auto; }
.desktop-table { display: none; }

.badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 27px; padding: 4px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--amber-soft); color: #87591f; }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-neutral { background: #ece9e1; color: #5f5a50; }
.badge-blue { background: #e3eef0; color: var(--blue); }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--olive-900); font-size: .76rem; font-weight: 700; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border-radius: 13px; background: var(--olive-100); color: var(--olive-900); font-size: .82rem; }
.notice.warning { background: var(--amber-soft); color: #714718; }
.notice.danger { background: var(--danger-soft); color: var(--danger); }
.inline-confirm { display: none; margin-top: 12px; padding: 14px; border: 1px solid #e6b6ae; background: var(--danger-soft); border-radius: 13px; }
.inline-confirm.open { display: block; }
.inline-editor { display: none; margin-top: 16px; padding: 18px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.inline-editor.open { display: block; }
#recipe-form, #user-form, #person-form, #expense-form, #new-provider { border-color: var(--line); background: var(--paper); color: var(--ink); }

.hero { min-height: 100dvh; display: grid; align-items: center; padding: 24px 16px; position: relative; overflow: hidden; background: var(--paper); }
.hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--olive-100); right: -230px; top: -180px; }
.hero-inner { width: min(100%, 1120px); margin: auto; position: relative; z-index: 1; }
.hero-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 42px; }
.hero-brand img { width: 72px; height: 72px; border-radius: 50%; }
.hero-grid { display: grid; gap: 28px; }
.hero-photo { display: none; margin-top: 24px; height: 180px; overflow: hidden; border-radius: 18px; position: relative; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(.65) contrast(.92); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(52 64 44 / 45%), transparent); }
.hero-copy p { color: var(--muted); font-size: 1rem; max-width: 54ch; }
.role-grid { display: grid; gap: 10px; }
.role-card { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: white; cursor: pointer; transition: .2s; box-shadow: 0 6px 16px #36382d0a; }
.role-card:hover { border-color: var(--olive-600); transform: translateY(-2px); }
.role-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; background: var(--olive-100); color: var(--olive-900); font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.role-card p { margin: 2px 0 0; color: var(--muted); font-size: .75rem; }
.role-arrow { margin-left: auto; font-size: 1.2rem; }

.quick-grid { grid-template-columns: repeat(2, 1fr); }
.quick-action { min-height: 112px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.quick-action .qa-icon { font-size: 1.25rem; color: var(--olive-700); }
.agenda-item { display: grid; grid-template-columns: 58px 1fr; gap: 13px; }
.agenda-time { font-weight: 800; color: var(--olive-900); }
.progress { height: 8px; border-radius: 999px; background: #e4dfd4; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--olive-600); }

.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 18px; }
.step { height: 7px; border-radius: 99px; background: #ddd8ca; }
.step.done, .step.current { background: var(--olive-600); }
.step-label { margin: -7px 0 14px; color: var(--olive-700); font-weight: 800; font-size: .78rem; }
.wizard-panel[hidden] { display: none; }
.select-card { position: relative; display: block; border: 1px solid var(--line); background: white; border-radius: 15px; padding: 14px; cursor: pointer; }
.select-card:has(input:checked) { border-color: var(--olive-600); box-shadow: inset 0 0 0 1px var(--olive-600); background: #f5f7f1; }
.select-card input { position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; accent-color: var(--olive-700); }
.price { font-family: "DM Serif Display", Georgia, serif; font-size: 1.2rem; }

.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.calendar-toolbar > .tabs { flex: 1 0 100%; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(46px, 1fr)); min-width: 560px; }
.calendar-shell { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.cal-dayname { padding: 10px 6px; color: var(--muted); text-align: center; font-size: .68rem; font-weight: 800; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.cal-day { min-height: 92px; padding: 7px; border-right: 1px solid #ece8df; border-bottom: 1px solid #ece8df; background: white; }
.cal-day.muted-day { color: #aaa397; background: #faf8f3; }
.cal-number { font-size: .75rem; font-weight: 700; }
.cal-event { display: block; width: 100%; margin-top: 5px; padding: 6px; border: 0; border-left: 4px solid var(--olive-600); border-radius: 7px; background: var(--olive-100); color: var(--olive-900); text-align: left; font-size: .63rem; line-height: 1.25; cursor: pointer; }
.cal-event.staff-pink { border-left-color: #d990a4; }
.cal-event.staff-sky { border-left-color: #68aaca; }
.event-detail { margin-top: 14px; }

.summary-bar { position: sticky; top: 78px; z-index: 12; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--olive-900); color: white; border-radius: 14px; box-shadow: var(--shadow); }
.summary-bar .muted { color: #d8ddcf; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.qty button { width: 42px; height: 42px; border: 0; background: #f3f0e8; font-weight: 900; cursor: pointer; }
.qty output { width: 38px; text-align: center; font-weight: 800; }

.task-row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.task-row:last-child { border: 0; }
.task-row input { margin-top: 3px; width: 21px; height: 21px; accent-color: var(--olive-700); }
.task-row:has(input:checked) .task-title { text-decoration: line-through; color: var(--muted); }

.staff-subnav { display: flex; overflow-x: auto; gap: 6px; margin: -4px 0 18px; padding-bottom: 3px; scrollbar-width: none; }
.staff-subnav button { min-height: 42px; flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); font-weight: 800; cursor: pointer; }
.staff-subnav button.active { color: white; background: var(--olive-700); border-color: var(--olive-700); }
.staff-panel[hidden] { display: none !important; }
@media (max-width:639px) {
  /* El ancho de la mesa y el tamaño de sus sillas los fija el slider de la
     vista (setMesaZoom en app.js escribe --mesa-w y --mesa-silla; 50% ≈ 9rem).
     Los laterales se reparten lo que sobre. La mesa lleva `self-start`, así
     que no se estira cuando los laterales quedan más altos que ella. */
  .mesa-layout { grid-template-columns:minmax(0,1fr) var(--mesa-w,9rem) minmax(0,1fr) !important; }
  .mesa-layout .mesa-silla { width:var(--mesa-silla,1.75rem); height:var(--mesa-silla,1.75rem); }
  /* La Terraza lleva sus 4 mesas en 2×2 también en móvil, así que su tablero
     necesita 3rem más que el del Estudio; las sillas se miden contra ese
     ancho (cqw) y el slider sigue agrandándolas o achicándolas. */
  .mesa-layout.mesa-terraza { grid-template-columns:minmax(0,1fr) calc(var(--mesa-w,9rem) + 3rem) minmax(0,1fr) !important; }
}
/* De sm en adelante la mesa es cuadrada (aspect-square) y se estira con la
   fila del grid, porque los laterales de participantes suelen ser más altos
   que ella. Sin un ancho explícito el navegador resolvía la proporción al
   revés —tomaba la altura de la fila y ensanchaba el tablero—, y la mesa se
   salía de su columna: las sillas del este acababan pintadas por debajo del
   panel derecho de participantes. `w-full` en el tablero fija el ancho (el de
   su columna) y este mínimo garantiza que quepan las seis sillas de cada
   costado aunque la columna quede estrecha. */
@media (min-width:640px) {
  .mesa-tablero { min-height: 27rem; }
}
/* Arrastrar y soltar en la mesa de trabajo (app.js, soltarEnMesa). Lo
   arrastrable no selecciona texto ni abre el menú de la presión larga en iOS. */
.mesa-arrastrable { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.mesa-arrastrando, body.mesa-arrastrando * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
.mesa-origen { opacity: .35; }
.mesa-destino { outline: 3px solid var(--color-brand); outline-offset: 2px; background: var(--color-brand-soft) !important; }
.mesa-destino-ocupada { outline: 3px solid var(--color-st-cancelado); outline-offset: 2px; }
.mesa-fantasma {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  max-width: 16rem; padding: 4px 12px; border-radius: 10px; text-align: center;
  background: var(--color-brand); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.mesa-fantasma-quitar { background: var(--color-st-cancelado); }
/* El aviso va en su propio renglón: junto al nombre se cortaba. */
.mesa-fantasma-quitar::after { content: attr(data-aviso); display: block; font-size: .7rem; font-weight: 600; }
/* Nombre de la persona sentada en el panel de acciones. Texto, botón y campo
   tienen el mismo alto, así la mesa no se mueve al pasar a editar. El campo
   tiene que ganarle al min-height de 48px de `#view input:not(…):not(…)`,
   que pesa (1,2,1): con #mesaPlano el selector pasa a (2,1,0). */
.mesa-nombre-alto { height: 1.75rem; line-height: 1.75rem; }
/* Zoom de la mesa en el celular: compacto y en la esquina, con el icono de
   maximizar después del "+". El rango le tiene que ganar a `#view input`
   (min-height 48px y fondo blanco con !important, peso (1,4,1)). */
/* Zoom y maximizar son sólo del celular. Esta regla va fuera de capa y le
   ganaba al `sm:hidden` de Tailwind: en web se veían. El display se decide
   aquí, con el mismo corte de 640px que usa la mesa. */
.mesa-zoom { display: none; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 6px; padding: 0 4px; }
@media (max-width:639px) { .mesa-zoom { display: flex; } }
.mesa-zoom-etiqueta { flex-shrink: 0; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-soft); }
#view #mesaPlano .mesa-zoom-rango { width: 6.5rem; height: 1rem; min-height: 0; padding: 0; border: 0; background-color: transparent !important; }
.mesa-max-boton {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--color-brand-dark); cursor: pointer;
}
.mesa-max-boton svg { width: 1.05rem; height: 1.05rem; }
.mesa-max-boton:active { background: var(--color-brand-soft); }
/* Mesa maximizada: la misma #mesaPlano fija sobre toda la pantalla, encima de
   la cabecera (30) y la barra inferior (40/45) pero debajo del aviso (70) y de
   la etiqueta que se arrastra. Tablero y sillas los mide ajustaMesaMax. */
body.mesa-max-abierta { overflow: hidden; }
.mesa-max {
  position: fixed; inset: 0; z-index: 60; max-width: none !important; margin: 0 !important;
  display: flex; flex-direction: column; overflow: auto; background: var(--paper);
  padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
/* Sin bloqueo de orientación (iPhone) y con el teléfono en vertical, la mesa
   se gira 90°: mide de ancho el alto de la pantalla y se lee de lado. Si el
   teléfono se pone en horizontal, la media query deja de aplicar. */
@media (orientation: portrait) {
  .mesa-max.mesa-max-girar {
    inset: auto; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw;
    transform: translateX(100vw) rotate(90deg); transform-origin: top left;
  }
}
.mesa-max-barra { display: flex; align-items: center; gap: 8px; min-height: 2rem; margin-bottom: 4px; }
.mesa-max-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 700; color: var(--color-brand-dark); }
.mesa-max-zona { flex-shrink: 0; padding: 0 4px; border: 0; background: transparent; font-size: .75rem; font-weight: 700; color: var(--color-brand-dark); text-decoration: underline; cursor: pointer; }
.mesa-max .mesa-pie { display: none; }
.mesa-max .mesa-layout, .mesa-max .mesa-layout.mesa-terraza {
  grid-template-columns: minmax(0,1fr) var(--mmax-t,18rem) minmax(0,1fr) !important;
  height: var(--mmax-t,18rem); gap: 8px; align-items: stretch;
}
.mesa-max .mesa-tablero, .mesa-max .terraza-tablero {
  width: var(--mmax-t,18rem) !important; height: var(--mmax-t,18rem) !important;
  min-height: 0 !important; aspect-ratio: auto !important; padding: 6px !important; align-self: stretch !important;
}
/* La Terraza maximizada: su encabezado repite lo que ya dice el rótulo de
   arriba y le quitaba el alto a la segunda fila de mesas. */
.mesa-max .terraza-tablero { overflow: auto; justify-content: center; }
.mesa-max .terraza-encabezado { display: none; }
.mesa-max .terraza-mesas { row-gap: 10px !important; }
.mesa-max .mesa-layout .mesa-silla { width: var(--mmax-silla,2rem) !important; height: var(--mmax-silla,2rem) !important; }
.mesa-max .mesa-silla .mesa-silla-num { font-size: max(9px, calc(var(--mmax-silla,2rem) * .36)) !important; }
/* Los laterales tienen el ancho que la mesa ya no ocupa: letra legible. */
.mesa-max .mesa-panel { max-height: none !important; height: var(--mmax-t,18rem) !important; }
.mesa-max .mesa-panel-grupo { font-size: 10px !important; padding: 2px 6px !important; }
.mesa-max .mesa-panel-nombre { font-size: 12px !important; }
.mesa-max .mesa-panel-sub { font-size: 11px !important; }
/* Rótulo «Asignando “Ana” al lugar 3 (O3)» mientras se elige o arrastra. */
.mesa-rotulo-asigna { color: var(--color-brand-dark); font-weight: 700; }
.mesa-rotulo-ocupado, .mesa-rotulo-quita { color: var(--color-st-cancelado); font-weight: 700; }
.mesa-nombre-editable {
  display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; background: transparent; border: 0; padding: 0; cursor: text;
}
.mesa-nombre-editable:hover { text-decoration: underline; }
.mesa-nombre-lapiz { margin-left: .35em; font-weight: 400; color: var(--color-ink-soft); }
#view #mesaPlano .mesa-nombre-campo {
  display: block; width: 100%; max-width: 18rem; min-height: 0; margin: 0 auto; padding: 0 .5rem;
  border: 1px solid var(--color-brand); border-radius: 6px !important; background: #fff;
  font-family: inherit; font-size: .875rem; font-weight: 700; text-align: center; color: var(--color-brand-dark);
}
#view #mesaPlano .mesa-nombre-campo:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.seat-scroll { overflow-x: auto; padding: 8px 0; }
.worktable { min-width: 620px; width: 620px; margin: 0 auto; display: grid; grid-template-columns: 88px 1fr 88px; grid-template-rows: 76px 1fr 76px; gap: 10px; padding: 15px; border: 6px solid #aab39a; border-radius: 24px; background: #e9eddf; }
.seat-side { display: flex; gap: 7px; align-items: center; justify-content: center; }
.seat-side.vertical { flex-direction: column; }
.seat { width: 64px; height: 58px; border: 2px dashed var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; font-size: .68rem; line-height: 1.2; }
.seat.assigned { border-style: solid; border-color: #a48e57; background: #eee8d5; }
.seat.confirmed { border-style: solid; border-color: var(--olive-700); background: var(--olive-600); color: white; }
.table-center { grid-column: 2; grid-row: 2; display: grid; place-items: center; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.seat-top { grid-column: 2; grid-row: 1; }
.seat-left { grid-column: 1; grid-row: 2; }
.seat-right { grid-column: 3; grid-row: 2; }
.seat-bottom { grid-column: 2; grid-row: 3; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 10px; font-size: .72rem; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 4px; background: var(--paper); border: 1px dashed var(--line); vertical-align: -2px; }
.legend .leg-assigned::before { background: #eee8d5; border: 1px solid #a48e57; }
.legend .leg-confirmed::before { background: var(--olive-600); border: 1px solid var(--olive-600); }

.bar-chart { display: flex; align-items: end; gap: 12px; height: 190px; padding: 15px 8px 0; border-bottom: 1px solid var(--line); }
.bar { flex: 1; min-width: 24px; height: var(--h); position: relative; background: var(--olive-600); border-radius: 8px 8px 0 0; }
.bar::after { content: attr(data-label); position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: .68rem; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 90px; width: calc(100% - 32px); max-width: 460px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 14px 16px; color: white; background: var(--olive-900); border-radius: 14px; box-shadow: 0 15px 40px #0003; transition: .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#skip-link:focus { position: fixed; z-index: 200; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 14px; margin: 0; overflow: visible; clip: auto; white-space: normal; color: white; background: var(--olive-900); border-radius: 10px; }

@media (min-width: 700px) {
  .content { padding: 30px 28px 100px; }
  .page-heading { flex-direction: row; align-items: end; justify-content: space-between; }
  .page-heading > .btn { width: auto; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
  .field-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: minmax(230px, 1fr) auto auto; align-items: center; }
  .list-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .hero-photo { display: block; }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .sticky-actions { bottom: 82px; }
  .calendar-toolbar > .tabs { flex: 0 1 auto; }
}

@media (min-width: 1024px) {
  .app-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 24px 16px; color: white; background: var(--olive-900); overflow-y: auto; }
  .side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 25px; border-bottom: 1px solid #ffffff26; }
  .side-brand img { width: 52px; height: 52px; border-radius: 50%; }
  .side-brand strong { display: block; letter-spacing: .1em; }
  .side-brand small { color: #cdd4c5; }
  .side-role { padding: 20px 8px 8px; color: #abb6a2; text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; font-weight: 800; }
  .side-nav { display: grid; gap: 4px; }
  .side-nav a { min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: #dbe0d6; font-weight: 700; font-size: .85rem; }
  .side-nav a.active { background: #ffffff17; color: white; }
  .side-nav a:hover { background: #ffffff0d; }
  .side-footer { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid #ffffff26; color: #cdd4c5; font-size: .75rem; }
  .topbar { position: relative; padding: 14px 32px; }
  .topbar .brand { display: none; }
  .bottom-nav { display: none; }
  .content { padding: 38px 38px 60px; }
  .sticky-actions { bottom: 20px; }
  .desktop-table { display: block; }
  .mobile-list { display: none; }
  .toast { bottom: 30px; }
}

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

/* Integración del motor funcional de Vero con la identidad visual multipágina
   de Entredos. Estas reglas complementan las utilidades Tailwind del motor. */
#app { background: var(--bone); }
#sidebar { background: var(--olive-900) !important; }
#app > main > header {
  min-height: 68px; background: rgb(252 251 247 / 94%) !important;
  backdrop-filter: blur(14px); border-color: var(--line) !important;
}
#view { width: min(100%, 1280px); padding-bottom: 104px; }
#view > .bg-white,
#view .bg-white.border.border-line.rounded-xl {
  background: var(--paper) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}
#view input:not([type="checkbox"]):not([type="radio"]),
#view select, #view textarea {
  min-height: 48px; border-radius: 12px !important; border-color: #cfc9ba;
}
#login input:not(:disabled):not([readonly]),
#view input:not([type="checkbox"]):not([type="radio"]):not(:disabled):not([readonly]),
#view select:not(:disabled),
#view textarea:not(:disabled):not([readonly]) {
  background-color: #fff !important;
}
#view input:not([type="checkbox"]):not([type="radio"]):disabled,
#view input:not([type="checkbox"]):not([type="radio"])[readonly],
#view select:disabled,
#view textarea:disabled,
#view textarea[readonly] {
  background-color: var(--color-surface2, #f4f2e9) !important;
  color: var(--muted);
  cursor: not-allowed;
}
#view input:focus, #view select:focus, #view textarea:focus {
  outline: 3px solid rgb(104 118 84 / 15%); outline-offset: 0;
}
#view table tbody tr {
  transition: background-color .15s;
}
#view table tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}
#view button, #nav a { border-radius: 12px; }
#view .font-serif, #viewTitle, #notifPanel .font-serif { font-family: "DM Serif Display", Georgia, serif !important; font-weight: 400; }
#topRole { border-radius: 999px; background: var(--olive-100) !important; color: var(--olive-900) !important; }
#login { background: var(--bone) !important; position: relative; overflow: hidden; }
#login::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--olive-100); right:-230px; top:-180px; }
#login > div { position:relative; z-index:1; background:var(--paper); border-radius:24px !important; border-color:var(--line); box-shadow:var(--shadow); }
#login img { width: 132px; height:132px; box-shadow:none; }

.vero-bottom-nav {
  position:fixed; z-index:45; left:0; right:0; bottom:0; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)); padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  background:rgb(252 251 247 / 97%); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgb(50 54 42 / 6%);
}
.vero-bottom-nav a { min-width:0; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); font-size:.62rem; font-weight:700; text-align:center; }
.vero-bottom-nav .nav-icon { font-size:1.05rem; line-height:1; }
.vero-bottom-nav a.active { color:var(--olive-900) !important; background:var(--olive-100) !important; }

.workshop-stepper { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:8px; }
.workshop-step { height:7px; border-radius:99px; background:#ddd8ca; }
.workshop-step.done,.workshop-step.current { background:var(--olive-600); }
.workshop-step-label { margin-bottom:18px; color:var(--olive-700); font-weight:800; font-size:.78rem; }
.workshop-panel[hidden] { display:none !important; }
.workshop-actions { position:sticky; z-index:20; bottom:74px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:12px; margin:24px -4px -4px; background:rgb(244 241 232 / 92%); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(12px); }

/* Barra de herramientas del calendario (mes, Agenda/Mes, alta): se queda
   pegada justo debajo de la cabecera de la app —que también es sticky— para
   no perderla al bajar por la agenda o la cuadrícula. El alto real de esa
   cabecera lo mide ajustaAltoCabecera() en --alto-cabecera, porque cambia
   con el ancho (en sm: aparece el subtítulo). */
.cal-toolbar {
  position:sticky; top:var(--alto-cabecera,64px); z-index:20;
  margin:0 0 16px; padding:8px;
  background:rgb(244 241 232 / 94%); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:16px;
}

/* Acciones del detalle de un taller: misma barra pegada al fondo del
   asistente, pero en celular los botones se reparten un solo renglón (y
   encogen) para no comerse la pantalla. */
@media (max-width:699px) {
  .workshop-actions-compacta { gap:6px; padding:8px; }
  .workshop-actions-compacta button { flex:1 1 0; min-width:0; padding:9px 4px; font-size:.7rem; line-height:1.15; }
}

.calendar-view-tabs { display:flex; gap:4px; padding:4px; background:#e9e5db; border-radius:14px; }
.calendar-view-tabs button { min-height:42px; padding:8px 14px; border-radius:11px; color:var(--muted); font-weight:800; }
.calendar-view-tabs button.active { background:var(--paper); color:var(--olive-900); box-shadow:0 2px 8px #3331; }
.agenda-time { min-width:64px; color:var(--olive-900); font-weight:800; }
.per-cal-grid { gap:0 !important; }
.per-cal-cell { min-height:0; overflow:hidden; }
.per-cal-day { min-height:96px; }
.per-cal-count { display:grid; place-items:center; width:2rem; height:2rem; margin:10px auto 0; border-radius:999px; background:var(--olive-100); color:var(--olive-900); font-weight:800; font-size:.95rem; }
.per-pagos-table { width:100%; table-layout:fixed; }
.compras-tickets-table { width:100% !important; min-width:100%; table-layout:fixed; }

/* Cuenta (cobro durante el taller). Los dos saldos comparten renglón hasta en
   el teléfono más angosto: son las dos mitades de lo mismo y abrir uno no debe
   reacomodar el otro. */
.cuenta-saldos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
/* El cobro es el objetivo táctil principal de la pantalla —se opera de pie, con
   el cliente enfrente—, y BTN_A se queda en ~44px de alto. */
.cuenta-cobrar { width:100%; min-height:48px; }
/* La ✕ del detalle es un objetivo táctil, no un adorno del encabezado; los
   márgenes negativos evitan que crezca el alto de la barra del título. */
.cuenta-detalle-cerrar { display:grid; place-items:center; width:44px; height:44px; margin:-10px -8px -10px 0; border-radius:10px; }
.cuenta-detalle-table { width:100%; table-layout:fixed; }
/* Los importes se leen en columna, alineados a la derecha; se hace aquí y no
   con text-right porque styles.css carga antes que tailwind.css y el TH ya
   trae text-left. */
.cuenta-detalle-table th:nth-child(3), .cuenta-detalle-table td:nth-child(3) { text-align:right; }

/* El "← Volver" de cualquier detalle (gestión de reserva, detalle de taller,
   confirmaciones) se queda a la vista al recorrer la pantalla, pegado justo
   debajo de la cabecera de la app —que también es sticky—. */
.detalle-volver { position:sticky; top:var(--alto-cabecera,64px); z-index:19; }

/* Encabezados que no se pierden al recorrer la vista: el filtro de talleres y
   el selector de periodo (mes/semana) del perfil laboral. Se pegan justo
   debajo de la cabecera de la app —que también es sticky— con su medida real
   (--alto-cabecera, ver ajustaAltoCabecera). */
.encabezado-fijo { position:sticky; top:var(--alto-cabecera,64px); z-index:20; }

/* Pestañas de una vista (Recetas registradas / Nueva receta, Usuarios / Alta
   de usuario, Gastos, Pagos, Compras): se quedan pegadas justo debajo de la
   cabecera de la app —que también es sticky— para no perderlas al recorrer
   la lista. El alto real de la cabecera lo mide ajustaAltoCabecera(). */
.tabs-fijas { position:sticky; top:var(--alto-cabecera,64px); z-index:20; }

/* Encabezados ordenables de la tabla de ingresos del reporte. */
.report-orden { display: inline-flex; align-items: center; gap: 4px; padding: 0;
                font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
                background: none; border: 0; cursor: pointer; }
.report-orden:hover { color: var(--olive-700); text-decoration: underline; }
.report-orden.activo { color: var(--olive-900); }

/* ---- Ver horarios: agenda de todo el personal ---- */
/* Semana: rejilla horas × días. La columna de horas se queda fija al recorrer
   en horizontal, que es lo que salva la vista en el celular: siete días no
   caben a lo ancho, así que se recorren sin perder la referencia de la hora. */
.hor-semana-scroll { overflow-x: auto; }
.hor-semana { display: grid; grid-template-columns: 52px repeat(7, minmax(112px, 1fr)); min-width: 100%; }
.hor-horas-col { position: sticky; left: 0; z-index: 2; background: var(--paper); border-right: 1px solid var(--line); }
.hor-cabeza { height: 34px; display: flex; align-items: center; justify-content: center;
              font-size: .62rem; font-weight: 800; text-transform: capitalize;
              color: var(--muted); background: var(--bone); border-bottom: 1px solid var(--line); }
.hor-hora { height: var(--hor-alto, 44px); display: flex; align-items: flex-start; justify-content: flex-end;
            padding: 2px 4px 0 0; font-size: .58rem; color: var(--muted); }
.hor-dia-col { border-right: 1px solid var(--line); min-width: 0; }
.hor-dia-col.hor-hoy .hor-cabeza { color: var(--olive-900); background: var(--olive-100); }
.hor-pista { position: relative; }
.hor-linea { position: absolute; left: 0; right: 0; height: 1px; background: #ebe7dd; }
/* left/width los fija el render: cada bloque recibe su fracción del ancho del
   día según con cuántos coincida en horario (ver reparteSolapes). */
/* Fondo olivo muy suave: el bloque se distingue de la rejilla sin competir con
   la franja de color del personal, que es lo que debe destacar. El fondo es
   opaco a propósito —los bloques se encabalgan y uno translúcido dejaría ver
   el de atrás. */
.hor-bloque { position: absolute; overflow: hidden; display: block; width: auto;
              padding: 2px 3px; border: 1px solid #d7ded0; border-radius: 6px;
              text-align: left; cursor: pointer;
              background: #f2f5ee; box-shadow: 0 1px 3px rgb(50 54 42 / 12%); }
.hor-bloque:hover { border-color: var(--olive-600); background: var(--olive-100); z-index: 15 !important; }
/* Abierto: se despega del reparto por solapes y muestra todo el texto, así que
   deja de recortar y se dibuja por encima de los bloques con los que compite. */
.hor-abierto { z-index: 20; overflow: visible; border-color: var(--olive-700);
               background: var(--olive-100);
               box-shadow: 0 6px 18px rgb(50 54 42 / 18%); }
.hor-txt-completo { white-space: normal !important; overflow: visible !important; }
.hor-bloque-hora { display: block; font-size: .5rem; font-weight: 800; line-height: 1.1;
                   color: var(--olive-700); white-space: nowrap; }
.hor-bloque-color { display: block; height: 6px; border-radius: 99px; margin-bottom: 3px; }
.hor-bloque-txt { display: block; font-size: .58rem; font-weight: 700; line-height: 1.15;
                  overflow: hidden; text-overflow: ellipsis; }
/* Sólo en la vista de un día, donde la columna es ancha y hay sitio para el
   horario y los responsables sin apretar el título. */
.hor-bloque-sub { display: block; font-size: .55rem; line-height: 1.2; color: var(--muted);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hor-un-dia { grid-template-columns: 52px minmax(0, 1fr); }

@media (max-width: 699px) {
  /* Letra y celdas más chicas: el mes completo tiene que caber a lo ancho. */
  .hor-semana { grid-template-columns: 40px repeat(7, minmax(92px, 1fr)); }
  /* Un solo día ocupa el ancho disponible: aquí no hay nada que recorrer. */
  .hor-un-dia { grid-template-columns: 40px minmax(0, 1fr); }
  .hor-hora { font-size: .52rem; }
  .hor-cabeza { font-size: .55rem; height: 30px; }
  .hor-bloque-txt { font-size: .53rem; }
  .hor-bloque-hora { font-size: .46rem; }
  .hor-bloque-color { height: 5px; }
}

/* Selector de sesiones de un paquete de varios talleres (alta de reserva).
   Iba con grid-cols-[1fr_auto_1fr]: "1fr" es minmax(auto,1fr), así que un
   nombre largo —"PRIVADA Ravioles (Loreny)"— no deja encoger la pista y la
   columna de seleccionados se salía de la pantalla. Con minmax(0,1fr) las dos
   listas ceden ancho, y en el celular se apilan: tres columnas ahí no dejan
   leer ninguna. */
.pkg-sesiones-grid { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:start; }
.pkg-sesiones-grid > * { min-width:0; }
@media (max-width:699px){
  .pkg-sesiones-grid { grid-template-columns:minmax(0,1fr); }
  /* Apiladas, las flechas dejan de separar columnas y pasan a una fila entre
     las dos listas. */
  /* !important porque tailwind.css se carga DESPUÉS de esta hoja y sus
     utilidades (.flex-col, .pt-7) tienen la misma especificidad; sin él
     ganarían y las flechas seguirían en columna. Mismo criterio que el resto
     de este bloque móvil. */
  .pkg-sesiones-acciones { flex-direction:row !important; justify-content:center; padding-top:0 !important; }
  .pkg-sesiones-acciones button { min-width:88px; }
}

/* Selector de talleres de un paquete/extra: dos columnas que tienen que caber
   en el celular. Sin min-width:0 los nombres largos estiran la cuadrícula y
   la columna derecha se sale de la tarjeta. */
.cp-talleres-grid > * { min-width:0; }
.cp-talleres-col { max-height:16rem; }
.cp-talleres-grid button { overflow-wrap:anywhere; }

/* Filas de resumen de las confirmaciones (etiqueta a la izquierda, valor a la
   derecha): sin min-width:0 un valor largo y sin espacios —"Cata|Maridaje|
   Mixología Individual", un total, una fecha— no se parte y se sale de la
   tarjeta en lugar de ocupar un segundo renglón. */
.row-resumen > * { min-width:0; }
.row-resumen > :last-child { text-align:right; overflow-wrap:anywhere; }

/* En celular aprovechamos todo el ancho útil para formularios, tablas y
   tarjetas de datos. Los controles conservan su área táctil propia. */
@media (max-width:699px) {
  #view { padding-left:2px !important; padding-right:2px !important; }
  #view > .p-4, #view > .p-5, #view > .p-6,
  #view .bg-white.border.border-line.rounded-xl,
  #view .rounded-xl.border.border-line.bg-white { padding-left:2px !important; padding-right:2px !important; }
  #view table th, #view table td { padding-left:2px !important; padding-right:2px !important; }
  .per-pagos-table th, .per-pagos-table td { white-space:normal; overflow-wrap:anywhere; }
  .per-pagos-table th:nth-child(1), .per-pagos-table td:nth-child(1) { width:21%; }
  .per-pagos-table th:nth-child(2), .per-pagos-table td:nth-child(2) { width:30%; }
  .per-pagos-table th:nth-child(4), .per-pagos-table td:nth-child(4) { width:19%; }
  .per-pagos-table th:nth-child(5), .per-pagos-table td:nth-child(5) { width:30%; }
  .compras-tickets-table th:nth-child(1), .compras-tickets-table td:nth-child(1) { width:24%; }
  .compras-tickets-table th:nth-child(2), .compras-tickets-table td:nth-child(2) { width:48%; }
  .compras-tickets-table th:nth-child(3), .compras-tickets-table td:nth-child(3) { width:28%; }
  .compras-tickets-table td { overflow-wrap:anywhere; }
  .cuenta-detalle-table { font-size:.68rem; }
  .cuenta-detalle-table th, .cuenta-detalle-table td { white-space:normal; }
  .cuenta-detalle-table th:nth-child(1), .cuenta-detalle-table td:nth-child(1) { width:22%; }
  .cuenta-detalle-table th:nth-child(2), .cuenta-detalle-table td:nth-child(2) { width:50%; }
  .cuenta-detalle-table th:nth-child(3), .cuenta-detalle-table td:nth-child(3) { width:28%; }
  .cuenta-detalle-table td:nth-child(2) { overflow-wrap:anywhere; }
  #view input, #view select, #view textarea, #view button { /* no quitar el padding táctil de los controles */ }
  .per-cal-day { padding-left:0 !important; padding-right:0 !important; }
  .per-cal-activity { display:none !important; }
  .per-cal-day > span { font-size:.62rem !important; }
  .per-cal-day button { padding-left:1px !important; padding-right:1px !important; border-radius:5px !important; }
  .per-cal-day button strong { font-size:.56rem !important; line-height:1.1; white-space:normal; overflow-wrap:anywhere; }
  .per-cal-cell { aspect-ratio:1 / 1; }
  .per-cal-day { min-height:0; }
  .per-cal-count { width:1.45rem; height:1.45rem; margin-top:5px; font-size:.75rem; }
  .row-resumen { gap:8px; font-size:.72rem; }
  /* Participantes de un taller: cuatro columnas de ancho fijo que sí caben en
     el celular. Sin table-layout:fixed el nombre y el paquete estiran la
     tabla y "Saldo" queda cortado fuera de la pantalla. */
  .reservas-part-table { table-layout:fixed; }
  .reservas-part-table th, .reservas-part-table td { white-space:normal; overflow-wrap:anywhere; }
  .reservas-part-table td { font-size:.68rem; }
  .reservas-part-table th { font-size:.58rem; letter-spacing:.04em; }
  .reservas-part-table th:nth-child(1), .reservas-part-table td:nth-child(1) { width:40%; }
  .reservas-part-table th:nth-child(2), .reservas-part-table td:nth-child(2) { width:22%; }
  .reservas-part-table th:nth-child(3), .reservas-part-table td:nth-child(3) { width:19%; }
  .reservas-part-table th:nth-child(4), .reservas-part-table td:nth-child(4) { width:19%; }
  .reservas-part-table td small, .reservas-part-table td span { font-size:.6rem; }
  .reservas-part-table .badge { min-height:0; gap:4px; padding:3px 6px; font-size:.58rem; }
  .reservas-part-table .badge::before { width:5px; height:5px; }
  /* Selector de talleres del catálogo: letra y alturas más chicas para que
     las dos columnas y los botones del centro entren en la pantalla. */
  .cp-talleres-grid { gap:4px; }
  .cp-talleres-col { max-height:11rem; }
  .cp-talleres-col button { padding:6px 6px; }
  .cp-talleres-col strong { font-size:.72rem; line-height:1.2; }
  .cp-talleres-col small { font-size:.62rem; line-height:1.2; }
  .cp-talleres-botones { padding-top:22px; gap:4px; }
  .cp-talleres-botones button { min-width:0; padding:6px 8px; font-size:.72rem; }

  /* La barra de acciones se ancla al fondo de la PANTALLA, no al final de la
     tarjeta: con un formulario largo (el selector de talleres, el alta de
     reserva) el sticky dependía del alto del contenedor y los botones podían
     quedar fuera de vista. Se deja hueco al final del contenido para que la
     barra no tape lo último. */
  .workshop-actions {
    position:fixed; left:4px; right:4px; bottom:calc(74px + env(safe-area-inset-bottom));
    margin:0; z-index:20;
  }
  #view { padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important; }
}

/* Venta de productos: el total y "Agregar a la cuenta" se anclan al fondo de
   la PANTALLA, porque la lista de productos es larga y el botón quedaba al
   final, fuera de vista. Hasta 1023px la navegación inferior
   (.vero-bottom-nav, z-45) ocupa los últimos ~74px: con bottom:0 la barra
   quedaba escondida detrás de ella, así que se monta encima. */
@media (max-width:1023px) {
  .venta-acciones {
    position:fixed; left:4px; right:4px; bottom:calc(74px + env(safe-area-inset-bottom));
    margin:0; z-index:30; padding:10px 12px;
    background:rgb(244 241 232 / 96%); backdrop-filter:blur(12px);
    border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  }
}

/* Inventario del taller: las acciones (registrar compra, ir a caja) se quedan
   pegadas al fondo de la pantalla mientras se recorre la tabla de existencias,
   que es larga y dejaba los botones fuera de vista al final de la tarjeta.
   Sticky —no fixed— para que sigan dentro de la tarjeta y no tapen el resto de
   la pantalla cuando la tabla es corta. */
.inventario-acciones {
  position:sticky; bottom:0; z-index:10;
  margin:12px -16px -16px; padding:10px 16px;
  background:rgb(255 255 255 / 96%); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  border-radius:0 0 12px 12px;
}
/* Hasta 1023px la navegación inferior ocupa los últimos ~74px: la barra se
   monta encima en vez de esconderse detrás. */
@media (max-width:1023px) {
  .inventario-acciones { bottom:calc(74px + env(safe-area-inset-bottom)); }
}
@media (min-width:640px) {
  .inventario-acciones { margin:16px -20px -20px; padding:12px 20px; }
}

@media (min-width:1024px) {
  .vero-bottom-nav { display:none; }
  #view { padding-bottom:60px; }
  .workshop-actions { bottom:20px; }
}

/* =========================================================
   Reporte principal administrativo
   ========================================================= */
.report-center { display: grid; gap: 16px; }
.report-principal-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.report-principal-kpi { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:14px; border:1px solid var(--line); border-top:3px solid var(--olive-600); border-radius:14px; background:var(--paper); text-align:center; }
.report-principal-kpi small { color:var(--muted); font-size:.72rem; font-weight:800; }
.report-principal-kpi strong { font-family:"DM Serif Display",Georgia,serif; font-size:1.45rem; line-height:1.1; overflow-wrap:anywhere; }
.report-principal-kpi span { color:var(--muted); font-size:.7rem; }
.report-principal-lines { display:grid; gap:0; }
.report-principal-lines > div { display:grid; grid-template-columns:1fr auto; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); }
.report-principal-lines small { grid-column:1 / -1; color:var(--muted); font-size:.68rem; }
.report-principal-lines .total { font-weight:800; border-bottom:0; }
.report-principal-waterfall { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.report-principal-waterfall span,.report-principal-waterfall > strong { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:var(--surface2,#f4f2e9); font-size:.75rem; }
.report-principal-waterfall b { font-size:1rem; }
.report-principal-waterfall > strong { background:var(--olive-100); color:var(--olive-900); }
.report-payroll-group { display:grid; gap:3px; color:var(--muted); font-size:.66rem; font-weight:800; white-space:nowrap; }
.report-payroll-group select { min-height:40px; padding:7px 9px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fff; font-size:.78rem; }
.report-payroll-people { display:grid; gap:6px; min-width:190px; }
.report-payroll-person { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.report-payroll-person i { display:inline-block; width:10px; height:10px; flex:0 0 10px; border-radius:999px; box-shadow:0 0 0 1px #fff,0 0 0 2px var(--line); }
.report-payroll-person span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-payroll-person b { margin-left:auto; white-space:nowrap; }
.report-payroll-total { background:var(--olive-100); font-weight:800; }
.admin-cal-grid { gap:0 !important; }
.admin-cal-cell { border-radius:0 !important; }
.admin-cal-wrap { padding:0 !important; }
.admin-cal-cell button { font-size:.64rem !important; }
.admin-cal-cell > .text-\[11px\] { font-size:.64rem !important; }
/* El nombre del taller se parte en varias líneas en vez de cortarse con
   puntos suspensivos: en la cuadrícula del mes «Tacos de Pulpo a las Brasas
   con Salsa…» obligaba a pasar el cursor para saber de qué taller se trataba.
   La celda crece sola porque su alto es min-h, no una altura fija. anywhere
   cubre el nombre de una sola palabra más ancho que la columna. Aplica a las
   tres cuadrículas que comparten estas clases: Calendario, Mis talleres y el
   calendario de cursos de Marketing. */
.admin-cal-cell button > span:first-child { white-space:normal; overflow-wrap:anywhere; }
/* Fecha marcada en la cuadrícula del Calendario: la que toma el alta de un
   taller o actividad. Se pinta por dentro (inset) para no descuadrar la
   rejilla, que no lleva separación entre celdas. */
.admin-cal-cell.cal-dia-marcable { cursor:pointer; }
.admin-cal-cell.cal-dia-marcable:hover { background:#f6f7f1; }
.admin-cal-cell.cal-dia-marcado,
.admin-cal-cell.cal-dia-marcado:hover { background:var(--color-brand-soft); box-shadow:inset 0 0 0 2px var(--color-brand); }
.admin-cal-cell.cal-dia-marcado > span:first-child { color:var(--color-brand-dark); }
.cal-fecha-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border-radius:999px;
  background:var(--color-brand-soft); border:1px solid var(--color-brand); color:var(--color-brand-dark);
  font-size:.78rem; font-weight:700; white-space:nowrap;
}
.cal-fecha-chip button { width:20px; height:20px; border-radius:999px; line-height:1; color:inherit; }
.cal-fecha-chip button:hover { background:#fff; }
.report-center section { min-width: 0; }
.report-tabs {
  display: flex; gap: 5px; overflow-x: auto; padding: 5px; margin-bottom: -4px;
  background: #e8e4d9; border: 1px solid var(--line); border-radius: 15px; scrollbar-width: thin;
}
.report-tabs button {
  flex: 1 0 auto; min-height: 44px; padding: 8px 12px; border: 0; background: transparent;
  color: var(--muted); font-size: .76rem; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.report-tabs button.active { color: var(--olive-900); background: var(--paper); box-shadow: 0 2px 8px #3331; }
.report-tab-wide { display: none; }
.report-global {
  position: sticky; z-index: 24; top: 68px; display: grid; gap: 9px; padding: 11px;
  background: rgb(252 251 247 / 96%); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 26px #32362a14;
  backdrop-filter: blur(14px);
}
.report-global-main { display: flex; align-items: end; gap: 9px; overflow-x: auto; padding-bottom: 1px; }
.report-global label, .report-filter-grid label, .report-directory-filters label, .report-inline-filters label, .report-be-inputs label {
  display: grid; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 800; white-space: nowrap;
}
.report-global select, .report-global input, .report-filter-grid select, .report-directory-filters select,
.report-directory-filters input, .report-inline-filters select, .report-be-inputs input, .report-pager select {
  min-height: 40px !important; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px !important;
  color: var(--ink); background: white; font-size: .78rem;
}
.report-check { display: flex !important; flex-direction: row; align-items: center; align-self: center; gap: 7px !important; }
.report-check input { min-height: auto !important; width: 18px; height: 18px; accent-color: var(--olive-700); }
.report-filter-details summary, .report-chart-table summary, .report-insufficient summary {
  width: fit-content; color: var(--olive-900); font-size: .76rem; font-weight: 800; cursor: pointer;
}
.report-filter-grid { display: grid; gap: 9px; grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: 10px; }
.report-filter-grid label, .report-filter-grid button { min-width: 0; }
.report-chips { display: flex; gap: 6px; align-items: center; overflow-x: auto; min-height: 35px; }
.report-chip {
  flex: 0 0 auto; min-height: 31px; padding: 5px 9px; color: var(--olive-900); background: white;
  border: 1px solid var(--line); border-radius: 999px !important; font-size: .68rem; font-weight: 750;
}
.report-chip.fixed { background: var(--olive-100); }
.report-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.report-section-head h3 { margin: 0 0 3px; font-family: "DM Serif Display", Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.report-section-head p { margin: 0; max-width: 68ch; color: var(--muted); font-size: .76rem; }
.report-kpi-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.report-kpi {
  min-height: 135px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 13px;
  border: 1px solid var(--line); border-top: 3px solid var(--olive-600); border-radius: 15px !important;
  color: var(--ink); background: var(--paper); box-shadow: var(--shadow); text-align: left; cursor: pointer;
}
.report-kpi.negative { border-top-color: var(--danger); }
.report-kpi > span { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.report-kpi strong { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.12rem,4vw,1.7rem); font-weight: 400; line-height: 1.1; }
.report-kpi em { margin-top: auto; color: var(--olive-700); font-size: .67rem; font-style: normal; font-weight: 800; }
.report-delta { display: block; color: var(--muted); font-size: .62rem; font-weight: 700; }
.report-delta.up { color: var(--success); }
.report-delta.down { color: var(--danger); }
.report-source { display: inline-flex; width: fit-content; padding: 2px 7px; border-radius: 999px; font-size: .6rem; font-weight: 900; }
.source-real { color: var(--success); background: var(--success-soft); }
.source-mixed { color: #7a501f; background: var(--amber-soft); }
.source-estimated { color: var(--blue); background: #e3eef0; }
.report-grid-2 { display: grid; gap: 14px; margin-top: 14px; }
.report-chart { min-width: 0; margin: 0; }
.report-chart figcaption { margin-bottom: 8px; color: var(--ink); font-family: "DM Serif Display", Georgia, serif; font-size: 1rem; }
.report-chart svg { display: block; width: 100%; height: auto; max-height: 390px; overflow: visible; }
.report-axis { stroke: #c8c3b7; stroke-width: 1; }
.report-svg-label, .report-svg-value { fill: var(--muted); font: 10px Manrope, sans-serif; }
.report-svg-value { fill: var(--ink); font-weight: 700; }
.report-bar { fill: var(--olive-600); }
.report-dot { fill: var(--amber); stroke: var(--paper); stroke-width: 2; }
.report-legend { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-bottom: 6px; color: var(--muted); font-size: .67rem; }
.report-legend span { display: inline-flex; align-items: center; gap: 5px; }
.report-legend i { width: 14px; height: 7px; display: inline-block; border-radius: 99px; }
.report-axis-label { margin-bottom: 4px; color: var(--muted); font-size: .65rem; }
.report-chart-table { margin-top: 8px; }
.report-chart-table > .overflow-x-auto { margin-top: 8px; max-height: 360px; overflow: auto; }
.report-empty { padding: 30px 12px; color: var(--muted); background: var(--bone); border-radius: 12px; text-align: center; font-size: .78rem; }
.report-alerts { display: grid; gap: 8px; margin-top: 12px; }
.report-alerts button { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px !important; background: white; text-align: left; }
.report-alerts button > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-weight: 900; }
.report-alerts button.warning > span:first-child { color: #7a501f; background: var(--amber-soft); }
.report-alerts strong, .report-alerts small { display: block; }
.report-alerts small { color: var(--muted); font-size: .68rem; }
.report-alerts em { color: var(--olive-700); font-size: .65rem; font-style: normal; font-weight: 800; }
.report-stack-chart { display: grid; gap: 7px; }
.report-stack-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 7px; color: var(--muted); font-size: .62rem; }
.report-stack-row > div { height: 16px; display: flex; overflow: hidden; border-radius: 5px; background: #e7e3d9; }
.report-stack-row i { display: block; height: 100%; }
.stack-new { background: var(--olive-600) !important; }.stack-known { background: var(--amber) !important; }.stack-react { background: var(--blue) !important; }
.report-segment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.report-segment-grid article { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.report-segment-grid span, .report-segment-grid strong, .report-segment-grid small { display: block; }
.report-segment-grid span { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.report-segment-grid strong { margin: 3px 0; font-size: 1rem; }
.report-segment-grid small { color: var(--muted); font-size: .62rem; }
.report-kpi-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; margin: 12px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.report-kpi-strip > span { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px; background: var(--paper); color: var(--muted); font-size: .65rem; font-weight: 700; }
.report-kpi-strip b { color: var(--ink); font-family: "DM Serif Display", Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.report-kpi-strip small { color: var(--muted); font-size: .6rem; }
.report-directory-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
.report-directory-filters .report-search { grid-column: 1 / -1; }
.report-link { padding: 0; border: 0; color: var(--olive-900); background: transparent; text-align: left; cursor: pointer; }
.report-link strong, .report-link small { display: block; }
.report-link small { color: var(--muted); font-size: .68rem; }
.report-desktop-table { display: none; }
.report-mobile-list { display: grid; gap: 8px; }
.report-mobile-row { border: 1px solid var(--line); border-radius: 12px; background: white; }
.report-mobile-row summary { display: flex; justify-content: space-between; gap: 8px; padding: 11px; cursor: pointer; list-style: none; }
.report-mobile-row summary strong, .report-mobile-row summary small { display: block; }
.report-mobile-row summary small { color: var(--muted); font-size: .65rem; }
.report-mobile-row > div { display: grid; gap: 7px; padding: 0 11px 11px; }
.report-mobile-row > div span { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .7rem; }
.report-mobile-row > div b { color: var(--ink); }
.report-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; color: var(--muted); font-size: .68rem; }
.report-pager label { display: flex; align-items: center; gap: 5px; }
.report-pager div { display: flex; gap: 5px; }
.report-pager button { min-width: 40px; min-height: 38px; border: 1px solid var(--line); background: white; font-weight: 900; }
.report-pager button:disabled { opacity: .4; }
.report-ranking-grid { display: grid; gap: 14px; }
.report-ranking-grid h4 { margin: 0 0 7px; font-size: .78rem; }
.report-ranking { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.report-ranking li { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: .7rem; }
.report-ranking li > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.report-ranking li > span > b { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--olive-100); font-size: .6rem; }
.report-ranking li small { display: block; color: var(--muted); font-size: .57rem; }
.report-ranking li strong { flex: 0 0 auto; }
.report-mini-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.report-mini-kpis > span { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.report-mini-kpis small, .report-mini-kpis b { display: block; }
.report-mini-kpis small { color: var(--muted); font-size: .62rem; }
.report-mini-kpis b { overflow: hidden; font-family: "DM Serif Display", Georgia, serif; font-size: 1rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.report-secondary-metric, .report-loss-note, .report-privacy-note { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--bone); font-size: .7rem; }
.report-inline-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.report-insufficient { margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.report-insufficient p { margin: 7px 0 0; color: var(--muted); font-size: .7rem; }
.report-be-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.report-be-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 14px; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--olive-100); }
.report-be-result strong { font-family: "DM Serif Display", Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.report-be-result span { color: var(--muted); font-size: .7rem; }
.report-subtabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 12px; padding: 4px; border-radius: 13px; background: #e8e4d9; }
.report-subtabs button { flex: 1 0 auto; min-height: 40px; padding: 7px 10px; border: 0; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 800; }
.report-subtabs button.active { color: var(--olive-900); background: var(--paper); box-shadow: 0 2px 7px #3331; }
.report-forecast { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; padding: 12px; border: 1px dashed #b9ae96; border-radius: 13px; background: #f7f3e8; color: var(--muted); font-size: .68rem; }
.report-forecast div { margin-right: auto; }.report-forecast div span,.report-forecast div strong { display: block; }.report-forecast strong { color: var(--ink); }
.report-loss-note { color: var(--danger); background: var(--danger-soft); border-color: #e9bcb6; }
.report-ops-alerts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.report-ops-alerts article { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--success-soft); color: var(--success); }
.report-ops-alerts article.warning { color: #7a501f; background: var(--amber-soft); }
.report-ops-alerts b, .report-ops-alerts span { display: block; }.report-ops-alerts b { font-size: 1.2rem; }.report-ops-alerts span { font-size: .62rem; }
.report-findings { max-height: 330px; overflow: auto; }
.report-findings p { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.report-heatmap { display: grid; grid-template-columns: minmax(76px,auto) repeat(var(--weeks),minmax(34px,1fr)); gap: 4px; min-width: max-content; overflow-x: auto; }
.report-heatmap b, .report-heatmap strong { padding: 4px; color: var(--muted); font-size: .58rem; }
/* Detalle de ventas de productos: la celda "Productos vendidos" venía como
   una sola línea corrida (nombre, unidades e importe pegados). Cada producto
   pasa a su propio renglón, con el nombre a la izquierda, las unidades
   separadas y el importe alineado a la derecha. */
.report-product-list { display: grid; gap: 5px; }
.report-product-item { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline; gap: 2px 10px; font-size: .75rem; }
.report-product-item strong { min-width: 0; overflow-wrap: anywhere; }
.report-product-item span { color: var(--muted); font-size: .7rem; white-space: nowrap; text-align: right; }
.report-product-item b { white-space: nowrap; text-align: right; }

.report-heatmap i { min-width: 34px; min-height: 30px; display: grid; place-items: center; border-radius: 6px; color: color-mix(in srgb, var(--ink) calc((1 - var(--heat)) * 100%), white); background: color-mix(in srgb, var(--olive-600) calc(var(--heat) * 100%), var(--bone)); font-size: .58rem; font-style: normal; }

/* Tablas largas de los detalles del reporte (ingresos, sueldos, compras…):
   la tabla recorre dentro de su marco y el encabezado se queda pegado arriba,
   para no perder de vista qué columna es cuál al llegar a los últimos
   registros. El fondo lo pone la clase del <th> (bg-surface2), así que las
   filas no se transparentan por debajo. */
.tabla-encabezado-fijo { max-height: min(70vh,34rem); overflow-y: auto; }
/* Con border-collapse (preflight de Tailwind) el borde inferior de un <th>
   pegado no se pinta al recorrer: se dibuja con una sombra interior. */
.tabla-encabezado-fijo thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--line); }

@media (min-width:700px) {
  .report-tab-wide { display: inline; }.report-tab-short { display: none; }
  .report-filter-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .report-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .report-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-segment-grid article { padding: 15px; }.report-segment-grid strong { font-size: 1.2rem; }
  .report-kpi-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .report-directory-filters { grid-template-columns: minmax(210px,1.5fr) repeat(5,minmax(115px,1fr)); }
  .report-directory-filters .report-search { grid-column: auto; }
  .report-desktop-table { display: block; }.report-mobile-list { display: none; }
  .report-ranking-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-mini-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .report-be-inputs { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (min-width:1100px) {
  .report-tabs button { font-size: .8rem; }
  .report-kpi-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .report-kpi-strip.finance { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .report-ranking-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .report-mini-kpis { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-width:699px) {
  .report-principal-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .report-principal-kpi { padding:9px 6px; }
  .report-principal-kpi strong { font-size:1.15rem; }
  .admin-cal-cell { font-size:.68rem; }
  .admin-cal-cell button { font-size:.55rem !important; padding-left:1px !important; padding-right:1px !important; }
  .admin-cal-cell button > span:first-child { line-height:1.05; }
  .report-global { top: 68px; }
  .report-global-main { flex-wrap: wrap; }
  .report-global-main .report-export-csv { order: 3; flex: 1 0 100%; width: 100%; }
  .report-global-main .inline-flex { flex: 0 0 auto; }
  .report-kpi { min-height: 122px; padding: 11px; }
  .report-kpi > .report-source { margin-top: 1px; }
  .report-chart svg { min-height: 180px; }
  .report-section-head { align-items: flex-start; }
  /* En móvil las tablas del reporte no caben con la fuente de escritorio: se
     achica un punto y se esconde la columna de forma de pago, que ya viene
     desglosada abajo en "Totales por forma de pago". */
  .report-center table { font-size: .72rem; }
  .report-center th { font-size: .6rem; }
  .report-center td, .report-center th { padding-left: 7px; padding-right: 7px; }
  .report-center .col-pago { display: none; }
  .report-product-list { gap: 4px; }
  .report-product-item { font-size: .66rem; gap: 1px 7px; }
  .report-product-item span { font-size: .62rem; }
  .tabla-encabezado-fijo { max-height: 62vh; }
}

/* Aviso de "cargando" del arranque y de las vistas que esperan a la operación:
   un latido de opacidad en lugar de un giro, para no encargarle al navegador
   una animación de transformación justo en el primer pintado. */
.cargando-latido { animation: cargando-latido 1.4s ease-in-out infinite; }
@keyframes cargando-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .cargando-latido { animation: none; }
}

/* Botón congelado mientras su acción viaja a PostgreSQL (congelaBoton en
   app.js). Se marca con aria-busy y no con :disabled a secas porque hay
   botones que nacen deshabilitados por regla de negocio —"Reservar" sin cupo,
   "Actualizar precio final" sin permiso— y ésos no están esperando nada. */
button[aria-busy="true"],
button[aria-busy="true"]:hover {
  opacity: .6;
  cursor: progress;
  filter: none;
  animation: cargando-latido 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  button[aria-busy="true"] { animation: none; }
}