/* Travel agency screens. The shell, panels, tables, forms and states come from Koozco.UI (koozco-ui.css);
   the tokens below re-brand it (ocean blue and sunset orange) without forking components. */
/* Identity of this app: the tokens below are the app's own look ("koozco" theme). They are scoped so a catalog theme (css/koozco-themes.css, ADR 0065)
   replaces them instead of fighting them from a later stylesheet; the dark form restores the dark values of Koozco.UI that the light block would override. */
:root:not([data-koozco-theme]), :root[data-koozco-theme="koozco"] {
  --rz-primary: #1f6f8b;
  --rz-primary-dark: #17566c;
  --rz-primary-light: #e6f2f5;
  --rz-success: #2c7356;
  --rz-info: #2d7d99;
  --rz-warning: #a35f22;
  --brand: #1f6f8b;
  --ink: #1d2f36;
  --muted: #56666b;
  --line: #e3e9ea;
  --surface: #f6f5f2;
  --accent: #d9822b;
  --anchor: #1b6680;
  --id-nav-ink: #17566c; --id-nav-bg: #e6f2f5;
  --id-avatar-bg: #e6f0f2; --id-avatar-ink: #1d5a6e;
  --hero-bg: #f3eadb; --hero-line: #e8dcc6; --hero-label: #5a4630; --hero-ink: #574632; --hero-fg: #1f2d2a; --hero-font: Georgia, serif;
  --metric-label: #55656a; --metric-icon: #3f8299; --component-ink: #4c5d62;
  --row-line: #eef2f2; --time-ink: #1d5a6e; --time-line: #dde8ea;
  --art-ink: #17566c; --art-shadow: #5a463014;
}
:root:not([data-koozco-theme])[data-theme="dark"], :root[data-koozco-theme="koozco"][data-theme="dark"] {
  --rz-primary: var(--brand-text);
  --rz-primary-dark: color-mix(in srgb, var(--brand-text) 85%, #000);
  --rz-primary-light: color-mix(in srgb, var(--brand) 35%, #0f1613);
  --ink: #e4ede9;
  --muted: #a7b5ae;
  --line: #2e3d38;
  --surface: #0f1613;
  --anchor: var(--link);
  --id-nav-ink: var(--nav-active-ink);
  --id-nav-bg: var(--nav-active-bg);
  --id-avatar-bg: var(--avatar-bg);
  --id-avatar-ink: var(--avatar-ink);
}
.sidebar nav a.active { color: var(--id-nav-ink, var(--nav-active-ink)); background: var(--id-nav-bg, var(--nav-active-bg)); }
.avatar { background: var(--id-avatar-bg, var(--avatar-bg)); color: var(--id-avatar-ink, var(--avatar-ink)); }
.avatar .rzi { font-size: 18px; }
.avatar.large .rzi { font-size: 28px; }
.cell-sub { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.loading-progress circle:last-child { stroke: var(--brand); }
.loading-progress-text:after { content: 'Preparando tu agencia…'; }

.hero { display: flex; align-items: center; justify-content: space-between; background: var(--hero-bg, var(--card-alt)); border: var(--border-width) solid var(--hero-line, var(--line)); border-radius: 14px; padding: 28px 36px; position: relative; overflow: hidden; min-height: 260px; margin-bottom: 24px; }
.hero-label { font-size: 10px; letter-spacing: 2px; color: var(--hero-label, var(--muted)); }
.hero h2 { font-family: var(--hero-font, var(--font-display)); font-size: 40px; font-weight: 400; letter-spacing: -1px; line-height: 1.12; margin: 12px 0; }
.hero p { font-size: 13px; color: var(--hero-ink, var(--muted)); margin-bottom: 15px; }
.hero a { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 650; }
.hero a .rzi { font-size: 17px; }

/* CSS-only sun, dashed route, plane and suitcase. */
.travel-art { width: 320px; height: 210px; position: relative; margin-right: 30px; flex-shrink: 0; }
.travel-art .sun { position: absolute; right: 20px; top: 6px; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); opacity: .9; }
.travel-art .route { position: absolute; left: 0; top: 30px; width: 220px; height: 90px; }
.travel-art .route path { fill: none; stroke: var(--art-ink, var(--brand)); stroke-width: 4; stroke-dasharray: 8 9; stroke-linecap: round; }
.travel-art .plane { position: absolute; left: 206px; top: 36px; font-size: 44px; color: var(--art-ink, var(--brand)); transform: rotate(80deg); }
.travel-art .suitcase { position: absolute; left: 112px; top: 104px; width: 118px; height: 84px; background: var(--brand); border-radius: 12px; box-shadow: 6px 10px 0 var(--art-shadow, transparent); }
.travel-art .handle { position: absolute; left: 38px; top: -18px; width: 42px; height: 22px; border: 6px solid var(--art-ink, var(--brand)); border-bottom: 0; border-radius: 10px 10px 0 0; }
.travel-art .stripe { position: absolute; top: 0; width: 12px; height: 84px; background: var(--hero-bg, var(--card-alt)); }
.travel-art .stripe.s1 { left: 26px; }
.travel-art .stripe.s2 { right: 26px; }

.art-caption { position: absolute; bottom: -6px; width: 100%; text-align: center; letter-spacing: 4px; font-size: 9px; color: var(--hero-label, var(--muted)); }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.metric { background: var(--card); border: var(--border-width) solid var(--line); border-radius: 11px; padding: 20px; }
.metric > div { display: flex; justify-content: space-between; align-items: center; color: var(--metric-label, var(--muted)); font-size: 12px; }
.metric .rzi { font-size: 19px; color: var(--metric-icon, var(--brand-text)); }
.metric > strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.8px; margin: 18px 0 10px; }
.metric > strong small { font-weight: 400; color: var(--muted); letter-spacing: 0; }
.metric > small { font-size: 11px; color: var(--muted); }
.metric .positive { color: var(--rz-success); }
.positive span { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-bottom: 24px; }
.dashboard-grid .panel, .component-grid .panel { margin-bottom: 0; }
.appointment-row { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: var(--border-width) solid var(--row-line, var(--line)); }
.appointment-row:last-child { border-bottom: 0; }
.appointment-row .time { font-size: 12px; color: var(--time-ink, var(--brand-text)); font-weight: 600; border: var(--border-width) solid var(--time-line, var(--line)); border-radius: 6px; padding: 7px; }
.appointment-row strong { font-size: 13px; }
.appointment-row small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.appointment-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; flex-shrink: 0; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--hero-bg, var(--card-alt)); border: var(--border-width) solid var(--hero-line, var(--line)); border-radius: 12px; padding: 24px; margin-bottom: 24px; gap: 18px; }
.summary-strip strong { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
.summary-strip span { display: block; font-size: 12px; color: var(--hero-ink, var(--muted)); margin-top: 7px; }
.capability-note { display: flex; align-items: flex-start; gap: 15px; color: var(--hero-ink, var(--muted)); padding: 18px 4px; }
.capability-note strong { font-size: 13px; }
.capability-note p { font-size: 13px; margin: 5px 0; }
.component-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.component-number { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--component-ink, var(--eyebrow)); margin-bottom: 10px; }
.detail-title { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.detail-title h2 { font-size: 20px; margin-bottom: 4px; }
.detail-title p { color: var(--muted); margin: 0; }
.detail-title > .rz-badge { margin-left: auto; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 30px; }
.detail-grid small { display: block; color: var(--muted); margin-bottom: 8px; }
.workflow { padding-left: 28px; line-height: 2.5; color: var(--muted); }
.workflow .current { color: var(--nav-active-ink); font-weight: 700; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.switch-row strong { font-size: 13px; }
.switch-row small { display: block; color: var(--muted); margin-top: 6px; }
.button-row, .badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.divider { border-top: 1px solid var(--line); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0; margin: 4px 0 12px; font-size: 12px; }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
.scheduler-panel { padding: 20px; }
.rz-scheduler { font-size: 12px; }
.rz-scheduler-appointment { background: var(--brand) !important; border-radius: 5px !important; }

@media (min-width: 1600px) {
  .hero { min-height: 290px; }
  .hero h2 { font-size: 46px; }
}

@media (max-width: 1200px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .travel-art { transform: scale(.85); margin-right: -10px; }
  .hero { padding: 26px; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .hero h2 { font-size: 34px; }
  .hero p br { display: none; }
  .travel-art { transform: scale(.7); margin: 0 -45px; }
  .component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { min-height: 230px; }
  .hero h2 { font-size: 34px; }
  .hero > div:first-child { position: relative; z-index: 1; }
  .travel-art { position: absolute; right: -90px; opacity: .15; }
  .metrics { gap: 10px; }
  .metric { padding: 15px; }
  .metric > strong { font-size: 21px; }
  .summary-strip { padding: 18px; }
  .summary-strip strong { font-size: 20px; }
  .scheduler-panel { padding: 8px; overflow: auto; }
  .rz-scheduler { min-width: 600px; }
  /* Radzen hides the view button labels (display: none) on narrow screens, which leaves the buttons without a name;
     keep the label for assistive technology while it stays visually hidden. */
  .rz-scheduler .rz-button-text { display: inline-block !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .detail-title { flex-wrap: wrap; }
  .detail-title > .rz-badge { margin-left: 0; }
  .detail-grid { grid-template-columns: 1fr; }
}
.cell-main { display: block; font-size: 13px; font-weight: 500; }

/* Dark theme (ADR 0038): the light values above are the prototype's own; these keep text and surfaces readable on the dark tokens of Koozco.UI. */
:root:not([data-koozco-theme])[data-theme="dark"] a, :root[data-koozco-theme="koozco"][data-theme="dark"] a { color: var(--link); } /* the identity of this app colors every link in the dark scheme; a catalog theme does not */
:root[data-theme="dark"] .metric > div, :root[data-theme="dark"] .metric > small, :root[data-theme="dark"] .metric > strong small,
:root[data-theme="dark"] .positive span, :root[data-theme="dark"] .workflow { color: var(--muted); }
:root[data-theme="dark"] .metric .rzi, :root[data-theme="dark"] .appointment-row .time, :root[data-theme="dark"] .workflow .current { color: var(--brand-text); }
:root[data-theme="dark"] .metric .positive { color: var(--ok-ink); }
:root[data-theme="dark"] .component-number { color: var(--eyebrow); }
:root[data-theme="dark"] .appointment-row { border-bottom-color: var(--line); }
:root[data-theme="dark"] .appointment-row .time { border-color: var(--line); }
:root[data-theme="dark"] .hero a { color: inherit; text-decoration: underline; }
:root[data-theme="dark"] .capability-note, :root[data-theme="dark"] .capability-note strong { color: var(--muted); }
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .summary-strip { color: var(--hero-fg, var(--ink)); }