/* Panel del equipo de WE FLY, generado desde tokens.json */
:root {
  --brand-700: #2a0b47;
  --brand-600: #60199c;
  --brand-100: #f5effb;
  --paper: #f4f1f8;
  --surface: #ffffff;
  --border: #e7e3ee;
  --border-control: #8f879d;
  --ink: #1d1530;
  --ink-muted: #5f5a6b;
  --on-brand: #ffffff;
  --accent: #fbbc34;
  --accent-strong: #e0a215;
  --success: #0f7d54;
  --success-bg: #edf7f2;
  --warning: #7a4b00;
  --warning-bg: #fff3d1;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --neutral: #4a4456;
  --neutral-bg: #efedf3;
  --offline: #5f5a6b;
  --focus: #2a0b47;
  --print-ink: #000000;
  --print-rule: #6b6b6b;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --tap-min: 56px;
  --nav-height: 72px;
  --sidebar-width: 264px;
  --sidepanel-width: 480px;
  --content-max: 1176px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(29,21,48,0.06);
  --shadow-raised: 0 8px 24px rgba(29,21,48,0.14);
  --shadow-sheet: 0 -8px 24px rgba(29,21,48,0.16);
  --font-display: "Familjen Grotesk", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

600;700&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

/* Globos Aerostáticos Teotihuacán · componentes del panel. Todo valor sale de tokens.css. */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
*, *::before, *::after { box-sizing: border-box; }
.gat-root { font-family: var(--font-sans); color: var(--ink); }
.gat-num { font-variant-numeric: tabular-nums; }
.gat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gat-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.gat-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.gat-pad { padding: var(--space-4); }
.gat-muted { color: var(--ink-muted); }
.gat-caption { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Foco: 3 px morado oscuro con hueco blanco de 2 px */
.gat-root :focus-visible, .gat-focus:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }

/* Íconos */
.gat-icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gat-icon-sm { width: 20px; height: 20px; }
.gat-icon-xl { width: 64px; height: 64px; stroke-width: 2.4; }

/* Botones */
.gat-btn-wrap { display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gat-btn-wrap.is-block { display: flex; width: 100%; }
.gat-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 2px solid transparent; font: 600 16px/20px var(--font-sans); cursor: pointer; text-align: center; text-decoration: none; white-space: normal; -webkit-tap-highlight-color: transparent; }
.gat-btn.is-block { width: 100%; }
.gat-btn-primary { background: var(--brand-600); color: var(--on-brand); font-size: 17px; font-weight: 700; }
.gat-btn-primary:hover { background: var(--brand-700); }
.gat-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-control); }
.gat-btn-secondary:hover { background: var(--brand-100); }
.gat-btn-quiet { background: transparent; color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; padding: 0 var(--space-3); }
.gat-btn-quiet:hover { background: var(--brand-100); }
.gat-btn-destructive { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.gat-btn-destructive.is-confirm { background: var(--danger); color: var(--on-brand); font-weight: 700; }
.gat-btn[aria-disabled="true"] { background: var(--neutral-bg); color: var(--ink-muted); border-color: var(--neutral-bg); cursor: not-allowed; text-decoration: none; }
.gat-btn-reason { min-height: 20px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gat-btn-icon { min-width: var(--tap-min); padding: 0 var(--space-3); }

/* Etiquetas de estado */
.gat-pill { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 28px; padding: 2px 10px 2px 8px; border-radius: var(--radius-sm); font: 600 14px/20px var(--font-sans); white-space: nowrap; border: 1px solid transparent; }
.gat-pill .gat-icon { width: 16px; height: 16px; stroke-width: 2.4; }
.gat-tone-success { background: var(--success-bg); color: var(--success); }
.gat-tone-warning { background: var(--warning-bg); color: var(--warning); }
.gat-tone-danger { background: var(--danger-bg); color: var(--danger); }
.gat-tone-neutral { background: var(--neutral-bg); color: var(--neutral); }
.gat-tone-brand { background: var(--brand-100); color: var(--brand-600); }
.gat-tone-outline { background: var(--surface); color: var(--ink); border-color: var(--border-control); }
.gat-new { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--accent); color: var(--ink); font: 700 12px/22px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }

/* Cifras */
.gat-stat { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-height: 96px; display: flex; flex-direction: column; gap: 2px; }
.gat-stat-label { font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.gat-stat-value { font: 700 28px/32px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.gat-stat-note { min-height: 20px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gat-stat-value.is-long { font-size: 22px; line-height: 32px; overflow-wrap: normal; white-space: nowrap; }
.gat-stat.is-warning .gat-stat-note { color: var(--warning); font-weight: 600; }
.gat-stat.is-danger .gat-stat-value { color: var(--danger); }
.gat-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-2); }

/* Aforo */
.gat-cap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gat-cap-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.gat-cap-name { font: 600 17px/24px var(--font-sans); }
.gat-cap-free { font: 700 22px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.gat-cap-bar { display: flex; height: 16px; border-radius: var(--radius-sm); overflow: hidden; background: var(--neutral-bg); border: 1px solid var(--border-control); }
.gat-cap-bar > span { display: block; height: 100%; }
.gat-cap-sold { background: var(--brand-600); }
.gat-cap-prev { background: var(--brand-700); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 2px, transparent 2px 6px); }
.gat-cap-held { background: var(--accent); background-image: repeating-linear-gradient(45deg, var(--accent-strong) 0 2px, transparent 2px 6px); }
.gat-cap-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-1) var(--space-3); font-size: 14px; line-height: 20px; margin: 0; }
.gat-cap-legend dt { color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.gat-cap-legend dd { margin: 0 0 var(--space-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.gat-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* Resultado del abordaje */
.gat-board { border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); min-height: 280px; justify-content: center; }
.gat-board-word { font: 700 44px/46px var(--font-display); letter-spacing: 0.01em; margin: 0; }
.gat-board-sub { font: 600 20px/28px var(--font-sans); margin: 0; }
.gat-board-folio { font: 600 22px/28px var(--font-mono); letter-spacing: 0.06em; }
.gat-board-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font: 600 18px/24px var(--font-sans); margin: 0; }
.gat-board-facts dt { font: 600 14px/20px var(--font-sans); opacity: 0.9; }
.gat-board-facts dd { margin: 0; font: 700 24px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.gat-board-alert { background: var(--surface); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: 600 17px/24px var(--font-sans); width: 100%; max-width: 420px; }
.gat-board-alert strong { color: var(--danger); }
.gat-board.is-ok { background: var(--success); color: var(--on-brand); }
.gat-board.is-done { background: var(--accent); color: var(--ink); }
.gat-board.is-no { background: var(--danger); color: var(--on-brand); }
.gat-board.is-offline { background: var(--offline); color: var(--on-brand); }
@media (max-width: 359px) { .gat-board-word { font-size: 36px; line-height: 40px; } }

/* Campos */
.gat-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gat-field-label { font: 600 14px/20px var(--font-sans); color: var(--ink); display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.gat-field-opt { font-weight: 400; color: var(--ink-muted); }
.gat-input { width: 100%; min-height: var(--tap-min); padding: 0 var(--space-4); border: 2px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); }
.gat-input::placeholder { color: var(--ink-muted); }
.gat-input:disabled { background: var(--neutral-bg); color: var(--ink-muted); border-color: var(--neutral-bg); }
.gat-input.is-error { border-color: var(--danger); }
.gat-input-affix { display: flex; align-items: stretch; }
.gat-input-affix > .gat-affix { display: flex; align-items: center; padding: 0 var(--space-3); border: 2px solid var(--border-control); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--paper); color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.gat-input-affix > .gat-input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.gat-field-msg { min-height: 20px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gat-field-msg.is-error { color: var(--danger); font-weight: 600; }
.gat-check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap-min); padding: var(--space-3) var(--space-4); border: 2px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.gat-check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--brand-600); }

/* Control segmentado */
.gat-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); padding: var(--space-1); background: var(--neutral-bg); border-radius: var(--radius-md); }
.gat-seg button { min-height: var(--tap-min); border: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: 600 16px/20px var(--font-sans); cursor: pointer; padding: 4px var(--space-2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gat-seg button small { font-weight: 400; font-size: 14px; line-height: 18px; color: var(--ink-muted); }
.gat-seg button[aria-pressed="true"] { background: var(--surface); border-color: var(--brand-600); color: var(--brand-600); }
.gat-seg button[aria-pressed="true"] small { color: var(--ink); }
.gat-seg.is-tall button { min-height: 64px; }

/* Avisos */
.gat-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 2px solid transparent; }
.gat-notice-body { flex: 1; min-width: 0; }
.gat-notice-title { font: 600 16px/24px var(--font-sans); margin: 0; }
.gat-notice-text { font-size: 14px; line-height: 20px; margin: 0; }
.gat-notice-action { flex: none; align-self: center; }
@media (max-width: 479px) { .gat-notice { flex-wrap: wrap; } .gat-notice-action { width: 100%; padding-left: 36px; } .gat-notice-action .gat-btn { width: 100%; } }
.gat-notice.is-critical { background: var(--danger); color: var(--on-brand); }
.gat-notice.is-warning { background: var(--warning-bg); color: var(--ink); border-color: var(--accent-strong); }
.gat-notice.is-warning .gat-notice-title { color: var(--warning); }
.gat-notice.is-stale { background: var(--surface); color: var(--ink); border-color: var(--accent-strong); border-style: dashed; }
.gat-notice.is-offline { background: var(--offline); color: var(--on-brand); }
.gat-notice.is-info { background: var(--brand-100); color: var(--ink); }
.gat-notice.is-success { background: var(--success-bg); color: var(--ink); }
.gat-notice.is-critical .gat-btn-secondary, .gat-notice.is-offline .gat-btn-secondary { border-color: var(--surface); }

/* Hoja de confirmación */
.gat-scrim { position: fixed; inset: 0; background: rgba(29,21,48,0.48); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.gat-scrim.is-inline { position: relative; inset: auto; min-height: 100%; padding-top: var(--space-6); }
.gat-sheet { background: var(--surface); width: 100%; max-width: 520px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-5) var(--space-4) var(--space-4); box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 768px) { .gat-scrim { align-items: center; } .gat-sheet { border-radius: var(--radius-lg); } }
.gat-sheet-title { font: 600 22px/28px var(--font-display); margin: 0; }
.gat-sheet-body { margin: 0; }
.gat-sheet-sign { font-size: 14px; line-height: 20px; color: var(--ink-muted); display: flex; gap: var(--space-1); align-items: center; }
.gat-sheet-actions { display: flex; flex-direction: column-reverse; gap: var(--space-2); margin-top: var(--space-2); }
@media (min-width: 768px) { .gat-sheet-actions { flex-direction: row; justify-content: flex-end; } }

/* Folio */
.gat-folio { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 16px/24px var(--font-mono); letter-spacing: 0.04em; color: var(--ink); }
.gat-folio button { min-height: var(--tap-min); min-width: var(--tap-min); border: 0; background: transparent; color: var(--brand-600); border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* Abordaje: entrada de folio */
.gat-folio-entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gat-folio-input { width: 100%; min-height: 72px; text-align: center; font: 600 28px/36px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); padding: 0 var(--space-3); }

/* Tarjeta de reserva del día */
.gat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gat-card-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.gat-card-name { font: 600 18px/24px var(--font-sans); margin: 0; }
.gat-card-sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.gat-card-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.gat-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.gat-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.gat-weights li { display: flex; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--border); padding: 4px 0; }
.gat-weights .is-over { color: var(--danger); font-weight: 700; }
.gat-weights .is-missing { color: var(--warning); font-weight: 600; }
.gat-card-money { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper); }
.gat-card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-2); }
.gat-card-foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; font-size: 14px; line-height: 20px; color: var(--ink-muted); border-top: 1px solid var(--border); padding-top: var(--space-3); }

/* Navegación */
.gat-tabbar { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom)); min-height: var(--nav-height); }
.gat-tab { position: relative; min-height: 64px; border: 0; background: transparent; color: var(--ink-muted); font: 600 13px/16px var(--font-sans); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; padding: 0 2px; }
.gat-tab[aria-current="page"] { color: var(--brand-600); background: var(--brand-100); }
.gat-tab.is-main { background: var(--surface); color: var(--brand-600); border: 2px solid var(--brand-600); }
.gat-tab.is-main[aria-current="page"] { background: var(--brand-600); color: var(--on-brand); }
.gat-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--ink); font: 700 12px/22px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.gat-badge.is-danger { background: var(--danger); color: var(--on-brand); }
.gat-tab .gat-badge { position: absolute; top: 4px; left: calc(50% + 6px); }
.gat-side { width: var(--sidebar-width); background: var(--brand-700); color: var(--on-brand); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; }
.gat-side-brand { font: 700 18px/22px var(--font-display); padding: 0 var(--space-2); }
.gat-side-group { display: flex; flex-direction: column; gap: var(--space-1); }
.gat-side-title { font: 600 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-100); padding: 0 var(--space-2) var(--space-1); }
.gat-side-link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--on-brand); text-decoration: none; font: 500 16px/20px var(--font-sans); cursor: pointer; border: 0; background: transparent; text-align: left; width: 100%; }
.gat-side-link:hover { background: rgba(255,255,255,0.08); }
.gat-side-link[aria-current="page"] { background: var(--surface); color: var(--brand-700); font-weight: 700; }
.gat-side-link .gat-badge { margin-left: auto; }
.gat-side-user { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.2); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; line-height: 20px; }
.gat-side-user button { min-height: var(--tap-min); background: transparent; border: 0; color: var(--on-brand); text-decoration: underline; text-underline-offset: 3px; font: 500 14px/20px var(--font-sans); text-align: left; padding: 0 var(--space-2); cursor: pointer; }

/* Paginación */
.gat-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.gat-pager-info { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gat-pager-btns { display: flex; gap: var(--space-2); }

/* Estados de carga */
.gat-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.gat-state-title { font: 600 18px/24px var(--font-sans); margin: 0; }
.gat-state-text { margin: 0; color: var(--ink-muted); max-width: 36ch; }
.gat-skel { display: block; height: 16px; border-radius: var(--radius-sm); background: var(--neutral-bg); }
.gat-skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
@media (prefers-reduced-motion: no-preference) { .gat-skel { animation: gat-pulse 1.4s ease-in-out infinite; } }
@keyframes gat-pulse { 50% { opacity: 0.55; } }

/* Calendario */
.gat-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gat-cal-dow { font: 600 13px/20px var(--font-sans); color: var(--ink-muted); text-align: center; }
.gat-day { min-height: 64px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.gat-day-num { font: 700 16px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.gat-day-state { font: 600 11px/14px var(--font-sans); }
.gat-day-count { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.gat-day.is-full { background: var(--brand-600); color: var(--on-brand); border-color: var(--brand-600); }
.gat-day.is-full .gat-day-count { color: var(--on-brand); }
.gat-day.is-open .gat-day-state { color: var(--success); }
.gat-day.is-low .gat-day-state { color: var(--warning); }
.gat-day.is-empty .gat-day-state { color: var(--ink-muted); }
.gat-day.is-closed { background: var(--neutral-bg); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(74,68,86,0.18) 6px 7px); }
.gat-day.is-closed .gat-day-state { color: var(--neutral); }
.gat-day.is-nodata { border-style: dashed; }
.gat-day.is-past { background: var(--paper); color: var(--ink-muted); }
.gat-day.is-today { outline: 3px solid var(--brand-700); outline-offset: -1px; }
@media (min-width: 768px) { .gat-day { min-height: 96px; padding: 8px; } .gat-day-state { font-size: 13px; line-height: 16px; } }

/* Carritos y contactos */
.gat-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gat-item-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.gat-item-amount { font: 700 22px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.gat-steps { display: flex; gap: 4px; align-items: center; }
.gat-steps span { width: 28px; height: 8px; border-radius: 4px; background: var(--neutral-bg); border: 1px solid var(--border-control); }
.gat-steps span.is-done { background: var(--brand-600); border-color: var(--brand-600); }
.gat-steps span.is-failed { background: var(--danger); border-color: var(--danger); }
.gat-quote { margin: 0; padding: var(--space-3); background: var(--paper); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; }
.gat-urgency { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 2px solid var(--ink); font: 600 17px/24px var(--font-sans); }

/* Resumen del alta */
.gat-summary { background: var(--brand-100); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.gat-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); font-size: 15px; line-height: 22px; }
.gat-summary dt { color: var(--ink-muted); }
.gat-summary dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gat-summary-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border-control); padding-top: var(--space-2); font: 700 22px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.gat-summary.is-bar { position: sticky; bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sheet); flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Hojas impresas: blanco y negro, carta */
.gat-print { background: #ffffff; color: var(--print-ink); font: 400 11pt/1.35 var(--font-sans); width: 8.5in; min-height: 11in; padding: 0.5in; }
.gat-print h1 { font: 700 18pt/1.1 var(--font-display); margin: 0; }
.gat-print-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2pt solid var(--print-ink); padding-bottom: 6pt; margin-bottom: 8pt; gap: 12pt; }
.gat-print-meta { font-size: 10pt; text-align: right; }
.gat-print table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gat-print th { text-align: left; font: 700 9pt/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1.5pt solid var(--print-ink); padding: 4pt 6pt; }
.gat-print td { border-bottom: 0.75pt solid var(--print-rule); padding: 6pt; height: 26pt; vertical-align: middle; }
.gat-print .is-num { text-align: right; }
.gat-print .is-folio { font-family: var(--font-mono); letter-spacing: 0.04em; }
.gat-print-box { display: inline-block; width: 14pt; height: 14pt; border: 1.25pt solid var(--print-ink); }
.gat-print-warn { border: 1.5pt solid var(--print-ink); padding: 6pt 8pt; margin: 8pt 0; font-weight: 700; }
.gat-print-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4pt 12pt; border: 0.75pt solid var(--print-rule); padding: 6pt 8pt; margin-top: 8pt; font-size: 10pt; }
.gat-print-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 36pt; margin-top: 36pt; }
.gat-print-sign div { border-top: 1pt solid var(--print-ink); padding-top: 4pt; font-size: 10pt; }
.gat-print-foot { margin-top: 12pt; font-size: 8pt; color: var(--print-rule); display: flex; justify-content: space-between; }
@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: #ffffff; }
  .gat-print { width: auto; min-height: 0; padding: 0; }
  .gat-print-break { break-before: page; }
  .gat-no-print { display: none !important; }
}

/* Diseño de pantalla del panel. Todo valor sale de tokens.css; los componentes viven en gat.css. */

html, body { overflow-x: hidden; }
#app { min-height: 100vh; }
a { color: var(--brand-600); }
.app-block { display: block; }
.app-mb { margin-bottom: var(--space-4); }
.app-mt { margin-top: var(--space-3); }
.app-mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.app-right { text-align: right; }
.app-due { color: var(--danger); }
.app-money { font-size: 20px; }
.app-money-due { font-size: 20px; color: var(--danger); }
.app-warn-line { margin: 0; font-size: 14px; line-height: 20px; color: var(--warning); font-weight: 600; }
/* Una píldora larga («Ana (mostrador) le escribió hace 3 h») se salía de su tarjeta a 320 px:
   gat.css la deja en una sola línea; aquí parte la línea cuando no cabe. */
.app-shell .gat-pill { max-width: 100%; }
@media (max-width: 400px) { .app-shell .gat-pill { white-space: normal; } }

/* Estructura */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1; min-width: 0; padding-bottom: calc(var(--nav-height) + var(--space-5)); }
.app-shell.is-wide { flex-direction: row; }
.app-shell.is-wide .app-main { padding-bottom: var(--space-6); }
.app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
.app-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: none; }
.app-page { padding: var(--space-4); max-width: var(--content-max); margin: 0 auto; }
.app-shell.is-wide .app-page { padding: var(--space-6); }
.app-head { margin-bottom: var(--space-4); }
.app-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.app-head-txt { min-width: 0; }
.app-title { font: 700 28px/32px var(--font-display); margin: 0; overflow-wrap: anywhere; }
.app-shell.is-wide .app-title { font-size: 32px; line-height: 36px; }
.app-sub { margin: 4px 0 0; color: var(--ink-muted); font-size: 16px; }
.app-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.app-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-2) 0 0; color: var(--brand-600); font: 600 16px/20px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.app-banner { margin-bottom: var(--space-4); }
.app-banner .gat-notice.is-offline { position: sticky; top: 0; }
.app-section { margin-top: var(--space-5); }
.app-section:first-child { margin-top: 0; }
.app-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.app-h2 { font: 600 17px/24px var(--font-sans); margin: 0; }
.app-h3 { font: 600 16px/24px var(--font-sans); margin: 0; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-3); }
.app-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-2) var(--space-4); }
.app-inline-check .gat-check { border-width: 1px; padding: var(--space-2) var(--space-3); }

/* Hojas */
.app-sheet { max-height: 92vh; overflow-y: auto; }
.app-sheet.is-wide { max-width: 640px; }
.app-sheet-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.app-sheet-body { display: flex; flex-direction: column; gap: var(--space-3); }
.app-toast { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--nav-height) + var(--space-3)); z-index: 60; max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-raised); border-radius: var(--radius-md); }
.app-shell.is-wide .app-toast { top: var(--space-4); right: var(--space-5); bottom: auto; left: auto; width: 440px; }
.app-toast .gat-notice { border-color: var(--success); }
/* Con una hoja abierta, el aviso breve sube arriba: abajo taparía los botones de la
   hoja o el renglón de su error. (Al abrir otra hoja, el aviso anterior se quita.) */
body:has(.gat-scrim) .app-toast { top: calc(env(safe-area-inset-top, 0px) + var(--space-3)); bottom: auto; }

/* Entrada */
.app-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.app-login-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.app-login-brand { margin: 0; font: 700 18px/22px var(--font-display); color: var(--brand-600); }
.app-pass { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: start; }
.app-pass > .gat-btn { margin-top: 26px; }

/* Listas y filas */
.app-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.app-listrow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
a.app-listrow:hover { background: var(--brand-100); }
.app-listrow.is-static { min-height: 0; }
.app-linkrow { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 0 var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 600; }
.app-linkrow:hover { background: var(--brand-100); }
.app-linkrow-txt { flex: 1; }
.app-fold { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: var(--space-2); }
.app-fold summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4); cursor: pointer; font-weight: 600; }
.app-fold summary::-webkit-details-marker { display: none; }
.app-fold summary > span:first-child { flex: 1; }
.app-fold[open] .app-fold-ico { transform: rotate(90deg); }
.app-fold-body { padding: 0 var(--space-4) var(--space-4); }
.app-kv { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--space-2) var(--space-3); }
.app-kv > div { display: contents; }
.app-kv dt { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.app-kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.app-search { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-bottom: var(--space-3); }
.app-bar { display: block; height: 10px; background: var(--neutral-bg); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-control); }
.app-bar-fill { display: block; height: 100%; background: var(--brand-600); }
.app-bar-fill.is-danger { background: var(--danger); }
.app-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.app-bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-2); font-size: 15px; }
.app-bars li .app-bar { grid-column: 1 / -1; }
.app-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); align-items: center; }
.app-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-4); border: 2px solid var(--border-control); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 600 15px/20px var(--font-sans); cursor: pointer; }
.app-chip.is-on { border-color: var(--brand-600); background: var(--brand-100); color: var(--brand-600); }
.app-chip-n { font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.app-optlist { display: flex; flex-direction: column; gap: var(--space-2); }
.app-opt { display: flex; justify-content: space-between; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border: 2px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 600 16px/20px var(--font-sans); cursor: pointer; text-align: left; }
.app-opt.is-on { border-color: var(--brand-600); background: var(--brand-100); color: var(--brand-600); }
.app-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.app-toolbar > .app-search { flex: 1 1 320px; margin: 0; }
.app-toolbar > .gat-field { flex: 0 1 240px; }
.app-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 2px solid var(--border); }
.app-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-3); color: var(--ink-muted); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.app-tabs a[aria-current="page"] { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.app-endbar { display: flex; justify-content: flex-end; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.app-placeholder { min-height: var(--tap-min); display: flex; align-items: center; padding: 0 var(--space-4); border: 2px dashed var(--border-control); border-radius: var(--radius-md); color: var(--ink-muted); }

/* Hoy: salidas */
.app-salida { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.app-salida.is-open { border-color: var(--brand-600); }
.app-salida-head { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-4); background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-lg); }
.app-salida.is-open .app-salida-head { background: var(--brand-100); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.app-salida-hora { grid-column: 1 / -1; font: 700 22px/28px var(--font-display); }
.app-salida-dato { display: flex; flex-direction: column; }
.app-salida-dato strong { font-variant-numeric: tabular-nums; }
.app-salida-occ { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-2); }
.app-occ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-embudo { display: flex; align-items: flex-start; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.app-embudo .gat-icon, .app-embudo svg { flex: 0 0 auto; width: 18px; height: 18px; }
.app-salida-chev { grid-column: 1 / -1; min-height: 40px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.app-salida-body { padding: var(--space-4); }
.app-salida-cols { display: grid; gap: var(--space-4); }
.app-prov { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-self: start; }
.app-prov-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.app-foot-actions { margin-left: auto; display: flex; gap: var(--space-1); flex-wrap: wrap; }
.app-mail { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-4); }
.app-mail p { margin: 0 0 var(--space-2); }
@media (min-width: 1024px) {
  .app-salida-head { grid-template-columns: 1.4fr repeat(6, 1fr) 1.8fr auto; align-items: center; }
  .app-salida-hora, .app-salida-occ { grid-column: auto; }
  .app-salida-chev { grid-column: auto; border: 0; padding: 0 var(--space-2); }
  .app-salida-cols { grid-template-columns: 1fr 300px; }
}

/* Abordar */
.app-board-layout { display: grid; gap: var(--space-5); }
.app-board-actions { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-2); }
.app-board-actions .gat-btn-quiet { color: inherit; }
.gat-board.is-done .app-board-actions .gat-btn-quiet { color: var(--ink); }
.gat-board .gat-btn-quiet { color: var(--on-brand); }
.gat-board.is-done .gat-btn-quiet { color: var(--ink); }
.gat-board .gat-btn-primary { background: var(--brand-700); border-color: var(--surface); }
.app-viewfinder { aspect-ratio: 4 / 3; max-height: 260px; background: var(--brand-700); color: var(--on-brand); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); outline: 4px dashed var(--accent); outline-offset: -24px; }
@media (min-width: 1024px) { .app-board-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }

/* Reservas */
.app-res-layout { display: grid; gap: var(--space-4); }
.app-res-main { min-width: 0; }
@media (min-width: 1024px) { .app-res-layout.has-panel { grid-template-columns: minmax(0, 1fr) var(--sidepanel-width); } }
.app-res-summary { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-variant-numeric: tabular-nums; }
.app-res-tools { margin-bottom: var(--space-3); max-width: 360px; }
.app-resrow { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.app-resrow.is-selected { border-color: var(--brand-600); background: var(--brand-100); }
.app-resrow-main { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: var(--space-1) 0; min-height: var(--tap-min); cursor: pointer; font: inherit; color: inherit; }
.app-resrow-when { font-size: 15px; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.app-near { font-size: 13px; font-weight: 700; padding: 0 8px; border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--neutral); }
.app-near.is-today { background: var(--brand-600); color: var(--on-brand); }
.app-resrow-name { font: 600 18px/24px var(--font-sans); }
.app-resrow-meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.app-resrow-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: var(--space-2); }
.app-resrow-money { font-variant-numeric: tabular-nums; }
.app-resrow-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-note { display: flex; gap: var(--space-1); align-items: flex-start; margin: 0; font-size: 14px; line-height: 20px; background: var(--warning-bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.app-sidepanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-4); position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; align-self: start; }
.app-sidepanel-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }

/* Tablas */
.app-table-wrap { width: 100%; }
.app-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }
.app-table th { text-align: left; font: 600 13px/16px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-3); border-bottom: 2px solid var(--border); }
.app-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); height: var(--tap-min); vertical-align: middle; }
.app-table .is-num { text-align: right; }
.app-table tbody tr { cursor: pointer; }
.app-table tbody tr:hover, .app-table tr.is-selected { background: var(--brand-100); }
@media (max-width: 767px) {
  .app-table, .app-table tbody, .app-table tr, .app-table td { display: block; }
  .app-table { border: 0; background: none; }
  .app-table thead { display: none; }
  .app-table tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); padding: var(--space-2) 0; }
  .app-table td { height: auto; border: 0; padding: 4px var(--space-3); display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .app-table td::before { content: attr(data-l); color: var(--ink-muted); font-size: 14px; text-align: left; }
  .app-table .is-num { text-align: right; }
}

/* Ficha */
.app-ficha-id { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.app-anchors { display: flex; gap: var(--space-1); overflow-x: auto; margin: 0 calc(-1 * var(--space-4)) var(--space-3); padding: 0 var(--space-4) var(--space-1); position: sticky; top: 0; background: var(--paper); z-index: 5; }
.app-anchors a { flex: none; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-3); color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.app-ficha-cols { display: grid; gap: 0 var(--space-6); }
.app-ficha .app-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-3); scroll-margin-top: 72px; }
.app-ficha.is-compact .app-section { border: 0; padding: var(--space-3) 0; border-top: 1px solid var(--border); border-radius: 0; }
.app-ficha.is-compact .app-ficha-cols { display: block; }
.app-weights-lg { font-size: 15px; grid-template-columns: 1fr; }
.app-money-box { display: flex; flex-direction: column; gap: var(--space-3); }
.app-note-form { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.app-textarea { padding-top: 14px; padding-bottom: 14px; min-height: 88px; resize: vertical; }
.app-pass-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.app-qr { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-md); }
.app-qr-svg rect { fill: var(--ink); }
@media (min-width: 1024px) { .app-ficha:not(.is-compact) .app-ficha-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .app-ficha-col.is-side { position: sticky; top: 56px; align-self: start; } .app-anchors { margin: 0 0 var(--space-3); padding: 0; } }

/* Alta */
.app-alta { display: grid; gap: var(--space-5); }
.app-alta-form .app-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-3); }
.app-alta-form .app-section:first-child { margin-top: 0; }
.app-alta-side { position: sticky; top: var(--space-4); align-self: start; display: flex; flex-direction: column; gap: var(--space-3); }
.app-alta-bar { position: fixed; left: 0; right: 0; bottom: var(--nav-height); z-index: 30; }
.app-alta-bar .gat-summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.app-shell:not(.is-wide) .app-alta { padding-bottom: 96px; }
.app-alta-btns { display: flex; flex-direction: column; gap: var(--space-1); }
.app-vuelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); }
.app-vuelo { display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 88px; padding: var(--space-3); border: 2px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.app-vuelo.is-on { border-color: var(--brand-600); background: var(--brand-100); box-shadow: inset 0 0 0 1px var(--brand-600); }
.app-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); margin-top: 6px; }
.app-day-btn { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: var(--space-2); border: 2px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 18px; cursor: pointer; text-align: left; }
.app-day-btn span { color: var(--ink-muted); }
.app-day-btn.is-on { border-color: var(--brand-600); background: var(--brand-100); }
.app-day-btn.is-closed { background: var(--neutral-bg); }
.app-stepper { display: grid; grid-template-columns: var(--tap-min) 1fr var(--tap-min); gap: var(--space-2); align-items: center; max-width: 240px; }
.app-stepper.is-sm { max-width: 200px; flex: none; }
.app-stepper-val { text-align: center; font: 700 22px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.app-adic { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.app-adic.is-off { background: var(--paper); }
.app-wa { display: grid; grid-template-columns: minmax(120px, 0.8fr) 1.2fr; gap: var(--space-2); }
.app-pax { display: grid; grid-template-columns: 1fr 140px; gap: var(--space-2); }
@media (max-width: 359px) { .app-pax, .app-wa { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .app-alta { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }

/* Calendario */
.app-cal-layout { display: grid; gap: var(--space-4); }
.app-cal-sel .gat-day { outline: 3px solid var(--brand-600); outline-offset: 1px; }
.app-sidepanel.is-static { position: sticky; }
@media (min-width: 1024px) { .app-cal-layout.has-panel { grid-template-columns: minmax(0, 1fr) var(--sidepanel-width); } }

/* Caja */
.app-caja-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.app-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 4px; }
.app-hero-val { font: 700 40px/44px var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-hero.is-due .app-hero-val { color: var(--danger); }
.app-caja-cols { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .app-caja-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* Ventas */
.gat-item.is-selected { border-color: var(--brand-600); background: var(--brand-100); }
.app-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidepanel-width); gap: var(--space-4); align-items: start; }
.app-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.app-msg { padding: var(--space-3); border-radius: var(--radius-md); max-width: 92%; }
.app-msg p { margin: 4px 0 0; }
.app-msg-who { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 600; }
.app-msg.is-cliente { background: var(--surface); border: 1px solid var(--border-control); align-self: flex-start; }
.app-msg.is-asistente { background: var(--brand-100); align-self: flex-end; }
.app-msg.is-guardian { background: var(--warning-bg); align-self: stretch; max-width: none; }
.app-msg.is-equipo { background: var(--success-bg); align-self: stretch; max-width: none; }
.app-msg.is-sistema { background: none; border: 1px dashed var(--border-control); align-self: center; font-size: 14px; }
.app-followup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }

/* Embudo */
.app-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.app-funnel li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); align-items: center; }
.app-funnel li.is-leak { border: 2px solid var(--danger); }
.app-funnel-name { font-weight: 600; }
.app-funnel-num { text-align: right; font-variant-numeric: tabular-nums; }
.app-funnel-bar { grid-column: 1 / -1; height: 14px; background: var(--neutral-bg); border-radius: var(--radius-sm); overflow: hidden; }
.app-funnel-bar span { display: block; height: 100%; background: var(--brand-600); }
.app-funnel-loss { grid-column: 1 / -1; }

/* Recorridos */
.app-flows { list-style: none; padding: 0; margin: 0; }

/* Impresos en pantalla */
.app-print-page { background: var(--neutral-bg); min-height: 100vh; padding-bottom: var(--space-6); }
.app-print-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); }
.app-print-page .gat-print { margin: var(--space-4) auto 0; box-shadow: var(--shadow-raised); max-width: 100%; overflow-x: auto; }
.app-print-kicker { font-size: 9pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.app-print-pass { display: flex; gap: 24pt; align-items: center; margin-top: 12pt; }
.app-print-pass .app-qr-svg rect { fill: #000000; }
.app-print-folio { font: 600 20pt/1.2 var(--font-mono); letter-spacing: 0.06em; }
.app-print-empty { padding: var(--space-6); text-align: center; }
.gat-print tfoot td { border-top: 1.5pt solid var(--print-ink); border-bottom: 0; }
@media (max-width: 860px) { .app-print-page .gat-print { width: 100%; min-height: 0; padding: 16px; } }
@media print {
  .app-print-page { background: #ffffff; padding: 0; }
  .app-print-page .gat-print { margin: 0; box-shadow: none; }
}
.gat-cal [role="gridcell"] { min-width: 0; } .gat-cal [role="gridcell"] .gat-day { width: 100%; height: 100%; }
.app-nowrap { flex-wrap: nowrap; }
@media (max-width: 767px) { .app-nowrap { flex-wrap: wrap; justify-content: flex-end; } }

/* ── Panel conectado al motor (7-oct-2026) ─────────────────────────────────── */
/* El error de una escritura tiene su renglón reservado: el formulario no se mueve. */
.app-errline { min-height: 20px; margin: 0; font-size: 14px; line-height: 20px; color: var(--danger); font-weight: 600; }
.app-center { text-align: center; margin: 0; }
.app-note-danger { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.app-note-danger .gat-icon { flex: none; }
.app-chip-danger { border-color: var(--danger); color: var(--danger); }
.app-nuevo { align-items: flex-start; }
.app-nuevo > .gat-new { margin-top: 18px; flex: none; }
.app-viewfinder { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: 320px; }
.app-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-funnel li.is-carga { background: var(--paper); border-style: dashed; }
.app-side-viejo { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--on-brand); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.app-adic .gat-check { border: 0; padding: 0; min-height: var(--tap-min); flex: 1; }
.app-salida-dato strong { overflow-wrap: anywhere; }
/* Los botones de una hoja no se salen a 320 px. */
.gat-sheet-actions { flex-wrap: wrap; }
.gat-sheet-actions > * { flex: 1 1 auto; }

/* ── A 320 px no se sale nada (medido con scripts/verifica-panel-nuevo.mjs) ── */
/* El control segmentado del sistema repartía columnas iguales: con cinco rangos o
   «Transferencia» a 320 px el texto no cabía y se salía. Aquí cada botón toma su
   ancho y el renglón se parte cuando ya no cabe. */
.gat-seg { display: flex; flex-wrap: wrap; }
.gat-seg button { flex: 1 1 auto; min-width: 0; }
.gat-pager-btns { flex-wrap: wrap; flex: 1 1 240px; }
.gat-pager-btns > * { flex: 1 1 120px; }
.gat-pager .gat-btn { padding: 0 var(--space-3); }
.app-nuevo { flex-wrap: wrap; }
.app-resrow-meta span, .app-resrow-meta a, .gat-card-sub, .app-kv dd, .gat-quote { overflow-wrap: anywhere; min-width: 0; }
.app-listrow { flex-wrap: wrap; }
.app-listrow > span:first-child { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.app-tabs { flex-wrap: wrap; }
.app-tabs a { flex: 1 1 auto; justify-content: center; }
.gat-day { min-width: 0; overflow: hidden; }
@media (max-width: 400px) {
  .gat-day { padding: 3px; }
  .gat-day-state, .gat-day-count { font-size: 10px; line-height: 12px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
  .app-table td { flex-wrap: wrap; }
  .app-table td > * { min-width: 0; }
}
/* Las cifras se encogen con su tarjeta: «MX$7,800» no se parte en dos renglones. */
.gat-stat { container-type: inline-size; }
.gat-stat-value { overflow-wrap: normal; font-size: min(28px, 19cqi); }
.gat-stat-value.is-long { font-size: min(22px, 13.5cqi); }
/* 💳 La liga de pago y el extra libre (11-nov-2026, WE FLY). La dirección de la liga se parte
   donde haga falta: son 60 caracteres sin un espacio y a 320 px desbordarían la tarjeta. */
.app-liga { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.app-liga.is-compacta { padding: 0; border: 0; background: none; }
.app-liga-linea { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.app-liga-url { margin: 0; font: 500 13px/18px var(--font-mono); color: var(--ink-muted); overflow-wrap: anywhere; word-break: break-all; }
.app-liga-btns { flex-wrap: wrap; }
.app-cobrar-dinero { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-variant-numeric: tabular-nums; }
.app-cobrar-filtro { max-width: 640px; }
.app-libre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 160px) auto; gap: var(--space-2); align-items: end; }
@media (max-width: 480px) { .app-libre { grid-template-columns: 1fr; } }

/* ── 👥 Cuenta y usuarios (12-nov-2026, clon de Bookeo §10) ─────────────────── */
.app-usuario { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.app-usuario > span:first-child { flex: 1 1 260px; min-width: 0; }
.app-usuario .gat-card-row { margin-top: var(--space-2); }
.app-usuario-acciones { flex: 0 1 auto; max-width: 100%; justify-content: flex-end; }
.app-pasos { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); }
/* ── 👤 Clientes, informes y estadísticas (12-nov-2026, clon de Bookeo) ── */
.app-clientes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-2); }
.app-cliente { display: flex; align-items: stretch; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.app-cliente.is-selected { border-color: var(--brand-600); background: var(--brand-100); }
.app-cliente-marca { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; cursor: pointer; }
.app-cliente-marca input { width: 22px; height: 22px; accent-color: var(--brand-600); cursor: pointer; }
.app-cliente > a { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; min-height: 56px; padding: var(--space-2) var(--space-3) var(--space-2) 0; color: var(--ink); text-decoration: none; }
.app-cliente > a:hover strong { text-decoration: underline; }
.app-iniciales { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700); font: 600 15px/1 var(--font-sans); }
.app-cliente.is-selected .app-iniciales { background: var(--surface); }
.app-cliente-txt { display: flex; flex-direction: column; min-width: 0; }
.app-cliente-txt strong, .app-cliente-txt span { overflow-wrap: anywhere; }
.app-abc { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-3); }
.app-abc a { display: inline-grid; place-items: center; min-width: 56px; min-height: 56px; padding: 0 var(--space-2); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; text-transform: uppercase; font-weight: 600; }
.app-abc a:first-child { text-transform: none; }
.app-abc a[aria-current="page"] { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-brand); }
.app-linkbtn { background: none; border: 0; padding: 0; color: var(--brand-700); text-decoration: underline; font: inherit; cursor: pointer; min-height: 0; }
.app-previa { margin-top: var(--space-3); }
.app-previa-marco { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.app-table tbody tr.is-static { cursor: default; }
.app-table tbody tr.is-static:hover { background: none; }
.app-table tbody tr.app-fila-mes td { background: var(--paper); }
.app-folio-celda { white-space: nowrap; font-family: var(--font-mono); font-size: 14px; }
/* 🎈 12-nov-2026 · Inicio, la salida, la edición de la reserva y la lista de oficina (clon de Bookeo). */
.app-inicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 1024px) { .app-inicio { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.app-inicio-col { min-width: 0; }
.app-feed-item { width: 100%; text-align: left; cursor: pointer; font: inherit; justify-content: flex-start; align-items: flex-start; }
.app-feed-item > .gat-icon { flex: none; margin-top: 2px; color: var(--ink-muted); }
.app-feed-item strong { font-weight: 500; }
.app-feed-item.is-nuevo { border-left: 4px solid var(--brand-600); }
.app-feed-item.is-nuevo strong { font-weight: 700; }
.app-feed-item:hover { background: var(--brand-100); }
.app-agenda-dia { margin-bottom: var(--space-3); }
.app-agenda.is-algunas { background: var(--success-bg); }
.app-agenda.is-completa { background: var(--success-bg); border-left: 6px solid var(--success); }
.app-agenda.is-bloqueada { background: var(--warning-bg); border-left: 6px solid var(--warning); }
.app-estado-visita { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.app-estado-visita .gat-row { flex-wrap: wrap; }
.app-edicion { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 900px) { .app-edicion { grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); align-items: start; } }
.app-edicion-form { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.app-edicion-precio { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.app-fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.app-fieldset legend { padding: 0 var(--space-1); }
.app-fieldset[disabled] { opacity: 0.6; }
.app-pasos { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.app-paso { align-items: center; gap: var(--space-2); }
.app-paso .gat-btn { font-size: 22px; font-weight: 700; }
.app-paso-num { min-width: 2ch; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.app-salida-reserva { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.app-salida-reserva:hover { box-shadow: var(--shadow-raised); }
/* Las opciones del catálogo tienen nombres largos («Desayuno Buffet en Restaurante La Martina Teotihuacán»): con la
   columna de la etiqueta en `auto`, el valor quedaba de una letra por renglón. Aquí las dos columnas reparten. */
.app-salida-reserva .app-kv { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.app-salida-reserva .app-kv dd { text-align: right; overflow-wrap: break-word; }
.app-oficina h2 { font: 700 14pt/1.2 var(--font-display); margin: 12pt 0 6pt; border-bottom: 1pt solid var(--print-rule); }
.app-oficina h3 { font: 700 12pt/1.2 var(--font-sans); margin: 8pt 0 2pt; }
.app-oficina p { margin: 0 0 2pt; }
.app-oficina-reserva { border-top: 0.5pt solid var(--print-rule); padding: 4pt 0 4pt 10pt; break-inside: avoid; }
.app-oficina-reserva ul { margin: 2pt 0 0 14pt; padding: 0; }
.app-oficina-bloqueos { border-top: 0.5pt dashed var(--print-rule); padding: 4pt 0 0 10pt; }
/* 🖨 12-nov-2026 (rama wfmx-acceso, Bookeo #34) · la lista de oficina en carta y en A4. La hoja de pantalla mide lo
   que mida la ventana (nunca más de 8.5 in) y en papel toma el ancho de la hoja que elija la impresora: «size: auto»
   en una página con nombre, así la lista sirve en carta y en A4 sin cambiar los manifiestos (que siguen en carta).
   Nada se sale de la hoja: los textos largos (correos, hoteles, líneas extra) se parten donde haga falta. */
.app-oficina { page: oficina; overflow-wrap: anywhere; }
.app-oficina h3 { break-after: avoid; }
.app-oficina-salida { break-inside: auto; }
.app-oficina-salida > p:first-of-type { margin-bottom: 2pt; }
.app-oficina-extra { font-style: italic; }
.app-oficina-participantes { list-style: none; margin: 4pt 0 0 0 !important; padding: 0 0 0 10pt !important; border-left: 1pt solid var(--print-rule); }
.app-oficina-participantes li { padding: 1pt 0; break-inside: avoid; }
.app-oficina-participantes li > * { display: block; }
.app-oficina-bloqueo { padding: 2pt 0; break-inside: avoid; }
.app-oficina-bloqueo + .app-oficina-bloqueo { border-top: 0.5pt dotted var(--print-rule); }
@page oficina { size: auto; margin: 12mm; }
@media print {
  .app-oficina { width: auto; max-width: none; padding: 0; font-size: 10pt; }
  .app-oficina .gat-print-head { break-after: avoid; }
}
@media (max-width: 860px) { .app-oficina { font-size: 12px; } }
/* 🔗 La pestaña «Acceso» de una salida: el enlace directo se lee entero y se parte donde haga falta (80 caracteres sin
   un espacio desbordarían la hoja a 320 px). */
.app-enlace-salida { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--neutral-bg); font: 500 13px/18px var(--font-mono); overflow-wrap: anywhere; word-break: break-all; align-self: stretch; }
.app-bk-casilla { align-self: stretch; }
.app-bk-casilla.is-bloqueada { opacity: 0.6; }

/* 🗓 12-nov-2026 · El calendario de Bookeo por días (screens/salidas.jsx): una fila por salida con la
   leyenda de Bookeo («Sin reservas» blanco, «Algunas reservas» verde claro, «Reservas completas» verde,
   «Bloqueado» naranja, «Cancelado» gris). El color nunca va solo: cada fila dice su estado en texto. */
.app-bk-dias { display: flex; flex-direction: column; gap: var(--space-4); }
.app-bk-dia > .app-h3 { margin-bottom: var(--space-2); }
.app-bk-fila { display: grid; grid-template-columns: 14px auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; width: 100%; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-left-width: 6px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.app-bk-fila:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.app-bk-hora { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-bk-txt { min-width: 0; overflow-wrap: anywhere; }
.app-bk-iconos { display: flex; gap: var(--space-1); }
.app-bk-punto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-control); vertical-align: -2px; margin-right: 6px; }
.app-bk-fila .app-bk-punto { margin-right: 0; }
.app-bk-sin { border-left-color: var(--border-control); }
.app-bk-punto.app-bk-sin { background: var(--surface); }
.app-bk-algunas { border-left-color: var(--success); background: var(--success-bg); }
.app-bk-punto.app-bk-algunas { background: var(--success-bg); border-color: var(--success); }
.app-bk-completa { border-left-color: var(--success); background: var(--success-bg); box-shadow: inset 0 0 0 2px var(--success); }
.app-bk-punto.app-bk-completa { background: var(--success); border-color: var(--success); box-shadow: none; }
.app-bk-bloqueada { border-left-color: var(--warning); background: var(--warning-bg); }
.app-bk-punto.app-bk-bloqueada { background: var(--warning); border-color: var(--warning); }
.app-bk-cancelada { border-left-color: var(--neutral); background: var(--neutral-bg); color: var(--ink-muted); }
.app-bk-punto.app-bk-cancelada { background: var(--neutral); border-color: var(--neutral); }
.app-bk-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-3); font-size: 14px; }
.app-bk-experiencias { border: 0; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
/* 🗓 13-nov-2026 · una casilla apagada (sin el permiso) se ve apagada; su porqué va debajo del grupo (.gat-btn-reason). */
.gat-check.is-disabled { cursor: not-allowed; color: var(--ink-muted); border-color: var(--neutral-bg); }
.app-bk-seccion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.app-bk-seccion > .app-list { align-self: stretch; }
.app-bk-tarjeta { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.app-bk-periodo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-2); align-items: end; }
@media (max-width: 480px) { .app-bk-fila { grid-template-columns: 14px minmax(0, 1fr) auto; } .app-bk-hora { display: none; } }
/* ⭐ Reseñas, agradecimiento y remarketing (12-nov-2026, screens/resenas.jsx) */
.app-estrellas { color: var(--accent-strong); font-size: 18px; letter-spacing: 1px; white-space: nowrap; }
.app-estrellas-vacias { color: var(--border-control); }
.app-mensaje { min-height: 200px; resize: vertical; padding-top: 14px; padding-bottom: 14px; }
.app-variables { flex-wrap: wrap; gap: var(--space-2); }
.app-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.app-resenas-cabeza { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.app-resena-resumen { max-width: 420px; overflow-wrap: anywhere; }
.app-resena-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-table tbody tr.is-static { cursor: default; }
.app-table tbody tr.is-static:hover { background: transparent; }
.app-table td.app-fecha { white-space: nowrap; }

/* ═══════════ 🧭 12-nov-2026 · EL MENÚ COMO EL DE BOOKEO (navegacion.jsx) ═══════════
   Computadora: la barra de arriba (marca, cinco secciones y Cuenta, Ayuda y Salir) y debajo la
   subnavegación de la sección. Celular: la marca y Cuenta arriba, las cinco secciones abajo.
   Todo control mide al menos 56 px de alto, como el resto del panel. */
.app-shell.is-menu.is-wide { flex-direction: column; }
.app-barra { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 0 var(--space-5); background: var(--brand-700); color: var(--on-brand); }
.app-barra-marca { font: 700 20px/24px var(--font-display); color: var(--on-brand); text-decoration: none; white-space: nowrap; margin-right: var(--space-3); display: inline-flex; align-items: center; min-height: var(--tap-min); }
.app-barra-secciones { display: flex; align-items: stretch; gap: var(--space-1); flex: 1; min-width: 0; }
.app-barra-seccion, .app-barra-accion { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--on-brand); text-decoration: none; cursor: pointer; white-space: nowrap; font: 600 13px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.app-barra-accion { text-transform: none; letter-spacing: 0; font-size: 14px; }
.app-barra-seccion:hover, .app-barra-accion:hover { background: rgba(255,255,255,0.10); }
.app-barra-seccion[aria-current="page"], .app-barra-accion[aria-current="page"] { background: var(--surface); color: var(--brand-700); }
.app-barra-seccion:focus-visible, .app-barra-accion:focus-visible, .app-barra-marca:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.app-barra-derecha { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.app-barra .gat-badge { margin-left: 2px; }
/* Entre 1024 y 1279 px, Cuenta, Ayuda y Salir van sólo con su ícono (con su nombre para el lector). */
@media (max-width: 1279px) {
  .app-barra-accion-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-barra-accion { padding: 0 var(--space-3); min-width: var(--tap-min); justify-content: center; }
  .app-barra { padding: 0 var(--space-4); }
}
.app-subnav { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); }
.app-shell.is-wide .app-subnav { top: 64px; }
.app-subnav-fila { display: flex; align-items: center; gap: var(--space-1); max-width: var(--content-max); margin: 0 auto; padding: var(--space-1) var(--space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-subnav-fila::-webkit-scrollbar { display: none; }
.app-shell.is-wide .app-subnav-fila { padding: var(--space-1) var(--space-6); }
.app-subnav-item { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-sans); white-space: nowrap; }
.app-subnav-item:hover { background: var(--brand-100); }
.app-subnav-item[aria-current="page"] { background: var(--brand-100); color: var(--brand-600); box-shadow: inset 0 -3px 0 var(--brand-600); }
.app-subnav-item.is-destacado { border: 2px solid var(--brand-600); color: var(--brand-600); }
.app-subnav-item.is-destacado[aria-current="page"] { background: var(--brand-600); color: var(--on-brand); box-shadow: none; }
.app-subnav-item:focus-visible, .app-migas:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.app-subnav-sesion { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; padding-left: var(--space-3); }
.app-subnav.is-migas .app-subnav-fila { padding-top: 0; padding-bottom: 0; }
.app-migas { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap-min); color: var(--brand-600); font: 600 15px/20px var(--font-sans); text-decoration: none; }
.app-migas:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-cabecera { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); background: var(--brand-700); color: var(--on-brand); }
.app-cabecera-marca { font: 700 18px/22px var(--font-display); color: var(--on-brand); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.app-cabecera-cuenta { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--on-brand); text-decoration: none; font: 600 15px/20px var(--font-sans); }
.app-cabecera-cuenta[aria-current="page"] { background: var(--surface); color: var(--brand-700); }
.app-shell:not(.is-wide) .app-subnav { top: 56px; }
.app-tab-txt { display: block; max-width: 100%; text-align: center; font-size: 12px; line-height: 14px; hyphens: manual; overflow-wrap: normal; }
/* Las cuadrículas de MARKETING y CONFIGURACIÓN: ícono, título y su descripción, como en Bookeo. */
.app-cuadricula { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.app-tarjeta { display: flex; align-items: flex-start; gap: var(--space-3); height: 100%; min-height: var(--tap-min); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); }
.app-tarjeta:hover { border-color: var(--brand-600); }
.app-tarjeta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.app-tarjeta-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--brand-100); color: var(--brand-600); }
.app-tarjeta-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-tarjeta-titulo { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font: 700 16px/22px var(--font-sans); color: var(--brand-700); }
.app-tarjeta-desc { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.app-indice { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* 🧭 Las pantallas de Configuración que faltaban (screens/configuracion.jsx, recursos.jsx y analiticas.jsx). */
.app-logos { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.app-logo { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); max-width: 100%; }
.app-logo img { display: block; max-width: 100%; height: auto; }
.app-logo.is-oscuro img { background: #15509f; border-radius: var(--radius-sm); }
.app-muestras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.app-muestras li { display: flex; align-items: center; gap: var(--space-2); }
.app-muestra { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.app-previa-correo { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); max-width: 420px; }
.app-previa-franja { display: flex; justify-content: center; padding: var(--space-3); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.app-previa-franja img { max-width: 100%; height: auto; }
.app-previa-cuerpo { padding: var(--space-4); border: 1px solid; border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); font: 400 15px/22px var(--font-sans); color: var(--ink); }
.app-previa-boton { display: inline-block; padding: 12px 20px; border-radius: var(--radius-md); color: #ffffff; font-weight: 700; }
.app-integraciones { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.app-integracion { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.app-integracion-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.app-integracion p { margin: 0; }
/* 🗓 12-nov-2026 · Google Calendar ocupa el ancho de la cuadrícula: lleva formulario, estado y experiencias. */
.app-integracion-ancha { grid-column: 1 / -1; }
.app-integracion-ancha .app-section { margin: 0; }
.app-gcal-pasos { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.app-tramo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
@media (max-width: 480px) { .app-tramo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .app-tramo > :last-child { grid-column: 1 / -1; } }
.app-ejemplo { padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper); }
.app-ejemplo p { margin: var(--space-2) 0 0; font-weight: 600; }
.app-previa-senales { max-width: 520px; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.app-previa-senales-titulo { margin: 0 0 var(--space-2); font-weight: 700; }
.app-previa-senales-cal { margin: 0 0 4px; }
.app-previa-senales-cal span { color: var(--accent-strong); }
.app-previa-senales blockquote { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 3px solid var(--brand-100); }
.app-previa-senales footer { margin-top: 4px; color: var(--ink-muted); font-size: 14px; }
.app-asignacion { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.app-asignacion p { margin: 0; }
/* 🧭 El celular angosto (320 px): la fila de la sección compacta, sin íconos salvo el de Abordar, para que Abordar
   quede a la vista desde INICIO sin deslizar; la sesión de Cuenta, en su propio renglón. */
@media (max-width: 400px) {
  .app-subnav-fila { gap: 2px; }
  .app-subnav-item { padding: 0 var(--space-2); font-size: 14px; gap: 4px; }
  .app-subnav-item:not(.is-destacado) .gat-icon { display: none; }
}
.app-subnav-sesion.is-movil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin: 0; padding: 0 var(--space-4) var(--space-1); border-top: 1px solid var(--border); }
.app-tramo > .gat-btn { align-self: start; margin-top: 28px; }
.app-integracion .app-kv dd { overflow-wrap: anywhere; }

/* ⭐ 12-nov-2026 · el correo de rescate v2 (remarketing2): las filas de las tablas que no se abren,
   la miniatura del GIF tal como sale en el correo y la barra de la probabilidad de ser la mejor. */
.app-table tr.is-static { cursor: default; }
.app-table tbody tr.is-static:hover { background: none; }
@media (max-width: 767px) { .app-table tbody tr.is-static:hover { background: var(--surface); } }
.app-rescate-gif { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.app-rescate-gif img { flex: none; width: 112px; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--neutral-bg); }
.app-rescate-texto { max-width: 420px; overflow-wrap: anywhere; }
.app-rescate-prob { display: grid; grid-template-columns: 3.5em minmax(80px, 1fr); gap: var(--space-2); align-items: center; min-width: 140px; }
@media (max-width: 767px) {
  .app-rescate-tabla td[data-l="Variante"] { display: block; text-align: left; }
  .app-rescate-tabla td[data-l="Variante"]::before { display: none; }
  .app-rescate-gif img { width: 96px; }
  .app-rescate-prob { min-width: 0; width: 60%; }
}

/* 📊 12-nov-2026 · los informes y «Eliminar los antiguos» (informes y clientes): la lista de la vista previa
   no empuja los botones fuera de la hoja, y los datos largos (correo, huella) no rompen la tabla. */
.app-antiguos { max-height: 320px; overflow-y: auto; padding-right: var(--space-1); }
.app-celda-larga { overflow-wrap: anywhere; }

/* ✋ 12-nov-2026 · aceptar o rechazar reservas (Bookeo #19 y #96): la fila de una solicitud pendiente lleva el
   texto a la izquierda y «Aceptar» y «Rechazar» a la derecha; en el celular, los botones bajan y ocupan el ancho.
   El plazo de pago después de aceptar va en tres columnas que se apilan en el celular. */
.app-solicitudes .app-list { gap: var(--space-2); }
.app-solicitud { align-items: flex-start; }
.app-solicitud-txt { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.app-solicitud-btns { flex: none; flex-wrap: nowrap; }
/* En la ventana de una salida (más angosta) los botones van debajo del texto, como en el celular. */
.app-bk-seccion.app-solicitudes .app-solicitud { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.app-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-2) var(--space-4); }
.app-bk-solicitudes { background: var(--warning-bg); color: var(--warning); }
@media (max-width: 767px) {
  /* Rejilla de una columna (no flex en columna: Chrome le daba al texto el alto de su ancho mínimo y dejaba un hueco). */
  .app-solicitud { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .app-solicitud-btns { flex-wrap: wrap; }
  .app-solicitud-btns > * { flex: 1 1 0; }
  .app-solicitud-btns .gat-btn { width: 100%; justify-content: center; }
}

/* ── 🔐 El doble factor (MFA), 13-nov-2026 (clon de Bookeo §10, fila #90) ─────────
   El QR va SIEMPRE negro sobre blanco, con su margen: así lo lee cualquier cámara, también en un tema oscuro. */
.app-mfa-qr { align-self: center; display: flex; justify-content: center; padding: var(--space-2); background: #ffffff; border: 1px solid var(--border-control); border-radius: var(--radius-md); }
.app-mfa-qr svg { display: block; width: 208px; height: 208px; max-width: 100%; }
.app-mfa-pasos { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.app-mfa-clave { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--neutral-bg); font: 600 16px/24px var(--font-mono); letter-spacing: 0.06em; word-spacing: 0.25em; overflow-wrap: anywhere; text-align: center; }
.app-mfa-codigos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.app-mfa-codigos li { padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--neutral-bg); font: 600 16px/24px var(--font-mono); letter-spacing: 0.04em; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 340px) { .app-mfa-codigos { grid-template-columns: 1fr; } }