/* emesports — shadcn/radix design system (vanilla CSS) */

/* ── Design tokens (shadcn HSL palette) ───────────────────────────────────── */
:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 5%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 5%);
  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(0 0% 42%);
  --border: hsl(0 0% 90%);
  --input: hsl(0 0% 90%);
  --primary: hsl(0 0% 7%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(0 0% 96%);
  --secondary-foreground: hsl(0 0% 7%);
  --accent: hsl(0 0% 96%);
  --accent-foreground: hsl(0 0% 7%);
  --destructive: hsl(0 72% 51%);
  --destructive-foreground: hsl(0 0% 100%);
  --ring: hsl(0 0% 7%);
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.08);
}


/* ── Dark mode (shadcn dark palette) ────────────────────────────────────────
   Se activa por preferencia del sistema o por el toggle (data-theme). */
:root { --page: hsl(0 0% 97%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: hsl(0 0% 4%);
    --background: hsl(0 0% 7%);
    --foreground: hsl(0 0% 96%);
    --card: hsl(0 0% 9%);
    --card-foreground: hsl(0 0% 96%);
    --muted: hsl(0 0% 13%);
    --muted-foreground: hsl(0 0% 64%);
    --border: hsl(0 0% 17%);
    --input: hsl(0 0% 17%);
    --primary: hsl(0 0% 96%);
    --primary-foreground: hsl(0 0% 7%);
    --secondary: hsl(0 0% 13%);
    --secondary-foreground: hsl(0 0% 96%);
    --accent: hsl(0 0% 13%);
    --accent-foreground: hsl(0 0% 96%);
    --ring: hsl(0 0% 83%);
  }
  :root:not([data-theme="light"]) .brand-logo { filter: none; }
}
:root[data-theme="dark"] {
  --page: hsl(0 0% 4%);
  --background: hsl(0 0% 7%);
  --foreground: hsl(0 0% 96%);
  --card: hsl(0 0% 9%);
  --card-foreground: hsl(0 0% 96%);
  --muted: hsl(0 0% 13%);
  --muted-foreground: hsl(0 0% 64%);
  --border: hsl(0 0% 17%);
  --input: hsl(0 0% 17%);
  --primary: hsl(0 0% 96%);
  --primary-foreground: hsl(0 0% 7%);
  --secondary: hsl(0 0% 13%);
  --secondary-foreground: hsl(0 0% 96%);
  --accent: hsl(0 0% 13%);
  --accent-foreground: hsl(0 0% 96%);
  --ring: hsl(0 0% 83%);
}
:root[data-theme="dark"] .brand-logo { filter: none; }


/* ── Tipografía de marca: Hanson Bold (avoltaportugal.com) en display ─────── */
@font-face {
  font-family: 'Hanson';
  src: url('/static/fonts/Hanson-Bold.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}
.page-header h1, .rail-hdr-row h2 {
  font-family: 'Hanson', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .015em;
}
.page-header h1 { font-size: 19px; }
.rail-hdr-row h2 { font-size: 13.5px; }


/* ── Dark: muesca amarilla de marca, badges y chips legibles ──────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rail-row.active { box-shadow: inset 3px 0 0 #FBC800; }
  :root:not([data-theme="light"]) .badge-pending { background: hsl(45 90% 14%); color: hsl(45 95% 62%); }
  :root:not([data-theme="light"]) .badge-neutral { background: hsl(38 85% 13%); color: hsl(40 90% 60%); }
  :root:not([data-theme="light"]) .badge-sent    { background: hsl(142 60% 12%); color: hsl(142 65% 58%); }
  :root:not([data-theme="light"]) .badge-error   { background: hsl(0 65% 14%);  color: hsl(0 90% 68%); }
}
:root[data-theme="dark"] .rail-row.active { box-shadow: inset 3px 0 0 #FBC800; }
:root[data-theme="dark"] .badge-pending { background: hsl(45 90% 14%); color: hsl(45 95% 62%); }
:root[data-theme="dark"] .badge-neutral { background: hsl(38 85% 13%); color: hsl(40 90% 60%); }
:root[data-theme="dark"] .badge-sent    { background: hsl(142 60% 12%); color: hsl(142 65% 58%); }
:root[data-theme="dark"] .badge-error   { background: hsl(0 65% 14%);  color: hsl(0 90% 68%); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font-family: inherit; }

/* ── Lucide icon sizing ── */
[data-lucide] { display: inline-block; vertical-align: middle; width: 16px; height: 16px; }
.icon-xs [data-lucide], [data-lucide].icon-xs { width: 12px; height: 12px; }
.icon-sm [data-lucide], [data-lucide].icon-sm { width: 14px; height: 14px; }
[data-lucide].icon-md, .icon-md [data-lucide] { width: 16px; height: 16px; }
[data-lucide].icon-lg, .icon-lg [data-lucide] { width: 20px; height: 20px; }
[data-lucide].icon-xl, .icon-xl [data-lucide] { width: 24px; height: 24px; }

/* ── Top nav ── */
.top-nav {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.top-nav .brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--foreground);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* The asset is the light (white) logo — invert it onto light backgrounds */
.brand-logo { height: 18px; width: auto; display: block; filter: invert(1); }
.nav-sep { color: var(--border); font-size: 20px; font-weight: 200; line-height: 1; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-right .btn-icon { width: 32px; height: 32px; padding: 7px; }
.top-nav .crumb { color: var(--muted-foreground); font-size: 13px; }
.top-nav .crumb:hover { color: var(--foreground); }
.top-nav .crumb-current { color: var(--foreground); font-size: 13px; font-weight: 600; }

/* ── App header: top bar + section tab bar as one sticky unit ─────────────── */
.app-header { position: sticky; top: 0; z-index: 100; }
.app-header .top-nav { position: static; }   /* header owns the stickiness */
.top-nav.no-border { border-bottom: none; box-shadow: none; }
.tab-bar {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* Tabs anchor to the SAME left edge as the breadcrumb on every page — the
   position never shifts between centered-content pages and full-bleed ones. */
.tab-bar-inner {
  padding: 0 24px;
  display: flex;
  gap: 2px;
}
a.nav-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 13px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
a.nav-tab [data-lucide] { width: 14px; height: 14px; opacity: .7; }
a.nav-tab:hover { color: var(--foreground); }
a.nav-tab.active {
  color: var(--foreground);
  font-weight: 600;
  border-bottom-color: var(--foreground);
}
a.nav-tab.active [data-lucide] { opacity: 1; }
.top-nav a:not(.brand) { color: var(--muted-foreground); font-size: 13px; }
.top-nav a:not(.brand):hover { color: var(--foreground); }
.top-nav span { color: var(--muted-foreground); font-size: 13px; }

/* ── Main content ── */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Page heading ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
}
.page-header p {
  color: var(--muted-foreground);
  font-size: 13px;
  margin-top: 3px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s ease;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.btn-primary:hover { opacity: .88; }
.btn-secondary {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--muted); }
.btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.btn-destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}
.btn-destructive:hover { opacity: .9; }
.btn-outline-destructive {
  background: transparent;
  color: var(--destructive);
  border-color: hsl(0 72% 85%);
}
.btn-outline-destructive:hover { background: hsl(0 72% 97%); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn-icon { padding: 8px; width: 34px; height: 34px; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn .spinner {
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .6s linear infinite;
}

/* ── Card ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-body { padding: 20px; }
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header h2 { font-size: 15px; font-weight: 600; flex: 1; }

/* ── Form inputs ── */
.form-group { margin-bottom: 16px; }
/* Direct-child only: field labels get the uppercase treatment, but labels used
   as wrappers for other controls (e.g. .seg-opt) keep their own styling. */
.form-group > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 6px;
  line-height: 1.4;
}
.label-opt {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted-foreground);
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-family: inherit;
  background: var(--background);
  color: var(--foreground);
  transition: border-color .12s, box-shadow .12s;
  outline: none;
  line-height: 1.5;
}
/* Uniform control height so inputs and selects align in mixed rows */
input[type="text"],
input[type="email"],
input[type="password"],
select {
  height: 36px;
}
/* Native selects render with their own chrome — flatten to match inputs */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}
input::placeholder { color: var(--muted-foreground); }

/* ── Form section (titled group inside a panel) ── */
.form-section {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 18px;
}
.form-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.form-section-desc {
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 0 0 14px;
}
.form-hint {
  font-size: 11.5px;
  color: var(--muted-foreground);
  margin-top: 10px;
  line-height: 1.5;
}

/* ── Section sub-nav (Vercel-style underline links) ── */
.subnav {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.subnav-link {
  padding: 0 2px 11px;
  margin-right: 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .12s, border-color .12s;
  cursor: pointer;
}
.subnav-link [data-lucide] { opacity: .7; }
.subnav-link:hover { color: var(--foreground); }
.subnav-link.active { color: var(--foreground); border-bottom-color: var(--foreground); }
.subnav-link.active [data-lucide] { opacity: 1; }

/* ── Tabs ── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  gap: 0;
}
.tab-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  font-family: inherit;
}
.tab-btn:hover { color: var(--foreground); }
.tab-btn.active { color: var(--foreground); border-bottom-color: var(--foreground); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Alerts ── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success { background: hsl(142 76% 95%); color: hsl(142 72% 29%); border: 1px solid hsl(142 60% 85%); }
.alert-error   { background: hsl(0 86% 97%);  color: hsl(0 72% 40%);   border: 1px solid hsl(0 60% 90%); }
.alert-info    { background: hsl(214 100% 97%); color: hsl(214 80% 40%); border: 1px solid hsl(214 60% 88%); }

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted-foreground);
}
.empty-icon { font-size: 36px; margin-bottom: 14px; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--foreground); margin-bottom: 6px; }
.empty-state p { font-size: 13px; margin-bottom: 20px; }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--foreground);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* ── Grid ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── ⋯ Menu button ── */
.card-menu-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s, background .15s, border-color .15s;
  z-index: 20;
}
.race-card:hover .card-menu-btn,
.stage-card:hover .card-menu-btn,
.card-menu-btn.open { opacity: 1; }
.card-menu-btn:hover,
.card-menu-btn.open { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.35); }

/* Stage card has light thumb bg — use dark icon on white */
.stage-card > .card-menu-btn {
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.08);
  color: var(--foreground);
}
.stage-card > .card-menu-btn:hover,
.stage-card > .card-menu-btn.open { background: rgba(255,255,255,.95); }

/* ── Dropdown menu (shadcn Popover style) ── */
.card-dropdown {
  position: absolute;
  top: 42px; right: 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  min-width: 192px;
  z-index: 500;
  display: none;
  padding: 4px;
  animation: dropIn .12s ease;
}
.card-dropdown.open { display: block; }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--foreground);
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background .1s;
  font-family: inherit;
}
.dropdown-item:hover { background: var(--muted); }
.dropdown-item.danger { color: var(--destructive); }
.dropdown-item.danger:hover { background: hsl(0 86% 97%); }
.dropdown-item [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
.dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Race card ── */
.race-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .2s, border-color .2s;
  position: relative;
  cursor: pointer;
}
.race-card:hover { box-shadow: var(--shadow-md); border-color: hsl(214 32% 80%); }

.race-card-cover {
  /* proporción exacta del banner oficial (1200×280): entra entero */
  height: auto; aspect-ratio: 1200 / 280; min-height: 76px;
  position: relative;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  overflow: hidden;
  background: #1e3a5f;
}
.race-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.race-card-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.3) 100%);
}
.race-card-body {
  padding: 14px 16px 16px;
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Stretched link: clicking anywhere on the card navigates */
.race-card-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.race-card .race-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}
.race-card .race-meta {
  color: var(--muted-foreground);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.race-card .race-meta span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--border);
}

/* ── Stage card ── */
.stage-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
  position: relative;
}
.stage-card:hover { box-shadow: var(--shadow-md); border-color: hsl(214 32% 80%); }
.stage-card-link { display: block; text-decoration: none; color: inherit; }
.stage-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.stage-thumb {
  /* Formato del arte oficial de etapa (8000×2500 → 3.2:1): todas iguales */
  height: auto; aspect-ratio: 3.2; min-height: 76px;
  background: #1e3a5f;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground);
  position: relative;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  overflow: hidden;
}
.stage-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.stage-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 100%);
}

/* ── Icon picker (stage edit) ── */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.icon-option {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.icon-option:hover { color: var(--foreground); border-color: var(--muted-foreground); }
.icon-option.selected {
  border-color: var(--foreground);
  color: var(--foreground);
  background: var(--background);
  box-shadow: 0 0 0 1px var(--foreground);
}
.stage-info { padding: 12px 14px 14px; }
.stage-n {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 3px;
}
.stage-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}
.stage-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* ── shadcn Dialog (Radix-style) ── */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayIn .15s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.dialog-content {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-xl);
  width: 440px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  animation: dialogIn .15s ease;
  position: relative;
}
@keyframes dialogIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dialog-header {
  padding: 20px 24px 0;
}
.dialog-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.dialog-description {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.dialog-body { padding: 16px 24px; }
.dialog-footer {
  padding: 0 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dialog-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.dialog-close:hover { background: var(--muted); color: var(--foreground); }

/* ── Confirm dialog (destructive variant) ── */
#confirm-dialog .dialog-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: hsl(0 86% 97%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: var(--destructive);
}
#confirm-dialog .dialog-icon [data-lucide] { width: 20px; height: 20px; }

/* ── Color swatches ── */
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s, outline-color .1s;
  padding: 0;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { outline-color: var(--foreground); outline-offset: 2px; transform: scale(1.08); }

/* Custom color picker button */
.color-custom-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1.5px dashed var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, background .15s, color .15s;
  position: relative;
}
.color-custom-btn:hover {
  border-color: var(--foreground);
  background: var(--background);
  color: var(--foreground);
}

.color-preview {
  height: 56px;
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 14px;
  transition: background .2s;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.color-preview img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Upload zone ── */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--foreground);
  background: var(--muted);
}
.upload-zone input[type="file"] { display: none; }
.upload-hint { font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }

/* ── Cover picker tabs ── */
.cover-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.cover-tab {
  flex: 1; padding: 7px; text-align: center;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.cover-tab.active { background: var(--foreground); color: var(--primary-foreground); border-color: var(--foreground); }
.cover-tab:not(.active):hover { background: var(--muted); color: var(--foreground); }
.cover-tab [data-lucide] { width: 13px; height: 13px; }

/* ── Emails / table ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 8px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--muted); }

/* ── Status badges ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.badge-pending { background: hsl(43 96% 93%); color: hsl(32 81% 40%); }
.badge-sent    { background: hsl(142 76% 93%); color: hsl(142 72% 30%); }
.badge-error   { background: hsl(0 86% 96%);   color: hsl(0 72% 45%); }

/* ── Config panel ── */
.config-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

/* ── Processing page ── */
.loading-page {
  max-width: 500px; margin: 60px auto; text-align: center; padding: 0 24px;
}
.progress-log {
  margin-top: 20px; text-align: left;
  background: var(--muted); border-radius: var(--radius);
  padding: 14px 16px; font-size: 12px; font-family: monospace;
  max-height: 220px; overflow-y: auto; line-height: 1.8;
  color: var(--muted-foreground);
}

/* ── File tags ── */
.file-list { display: flex; gap: 8px; flex-wrap: wrap; }
.file-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 12px;
}

/* ── Race header menu button ── */
.header-menu-wrap { position: relative; }

/* ── Misc layout helpers ── */
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
/* Top-aligned so labels in adjacent columns sit on the same baseline; uniform
   control heights (36px) keep the inputs/selects aligned at the bottom too. */
.form-row { display: flex; gap: 12px; align-items: flex-start; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Email preview ── */
.email-preview {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 8px;
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}
.email-preview iframe {
  width: 100%;
  height: 280px;
  border: none;
}

/* ── Collapsible ── */
details > summary { list-style: none; cursor: pointer; user-select: none; }
details > summary::-webkit-details-marker { display: none; }

/* ── Stat chips (page-header summary) ─────────────────────────────────────── */
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.stat-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  box-shadow: var(--shadow-sm);
}
.stat-chip .stat-value {
  font-size: 17px; font-weight: 700; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  line-height: 1;
}
.stat-chip .stat-label { font-size: 12px; color: var(--muted-foreground); }
/* All counters in foreground black — only "sin email verificado" keeps its
   alert color, so the one number that needs action is the one that pops. */
.stat-chip.stat-ok .stat-value,
.stat-chip.stat-warn .stat-value  { color: var(--foreground); }
.stat-chip.stat-alert .stat-value { color: var(--destructive); }
.stat-chip-btn {
  cursor: pointer; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.stat-chip-btn:hover { border-color: hsl(0 72% 75%); box-shadow: var(--shadow); }

/* Settings gear with "needs attention" dot when sending is unconfigured */
.config-btn { position: relative; }
.config-alert-dot {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--destructive);
  border: 2px solid var(--background);
}

/* Flash highlight when jumping to a row */
@keyframes rowFlash {
  0%   { background: hsl(0 86% 94%); }
  100% { background: transparent; }
}
.row-flash td { animation: rowFlash 1.6s ease-out; }

/* ── Callout (QA / info banner) ───────────────────────────────────────────── */
.callout {
  display: flex; gap: 13px;
  background: hsl(43 96% 97%);
  border: 1px solid hsl(43 80% 86%);
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 20px;
}
.callout-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: hsl(43 92% 90%);
  color: hsl(32 81% 38%);
  display: flex; align-items: center; justify-content: center;
}
.callout-icon [data-lucide] { width: 16px; height: 16px; }
.callout-body { font-size: 12.5px; line-height: 1.6; color: hsl(28 40% 30%); }
.callout-title { font-weight: 700; font-size: 13px; color: hsl(26 60% 22%); margin-bottom: 1px; }
.callout-body strong { color: hsl(26 60% 22%); }

/* ── Stage tabs (emails page) ─────────────────────────────────────────────── */
.stage-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.stage-tab {
  border: none; background: none; cursor: pointer;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  padding: 9px 13px 11px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .12s, border-color .12s;
  border-radius: 6px 6px 0 0;
}
.stage-tab:hover { color: var(--foreground); background: var(--muted); }
.stage-tab.active {
  color: var(--foreground);
  font-weight: 600;
  border-bottom-color: var(--foreground);
  background: transparent;
}
.stage-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 10px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.stage-tab.active .stage-count {
  background: var(--foreground); color: var(--primary-foreground);
  border-color: var(--foreground);
}

/* ── Emails table ─────────────────────────────────────────────────────────── */
/* Fixed layout + explicit column widths so every stage's table lines up
   identically — column edges don't drift with content from tab to tab. */
/* The emails page needs more room than the default 1120px container so the
   entity column fits "Junta de Freguesia de …" names unclipped. */
main:has(.emails-table) { max-width: 1440px; }
.emails-table { table-layout: fixed; width: 100%; }
.emails-table col.c-idx     { width: 44px; }
.emails-table col.c-email   { width: 300px; }
.emails-table col.c-status  { width: 112px; }
.emails-table col.c-actions { width: 392px; }
/* PT stages: one widget per câmara, its juntas grouped inside. The câmara row
   reads as the card header (soft background). Long parish names wrap instead
   of clipping. Rows are clickable (toggle the preview). */
.email-group { margin-bottom: 14px; overflow: hidden; }
.email-group:last-of-type { margin-bottom: 20px; }
/* Each entity row is followed by its (hidden) preview row, so the generic
   tr:last-child rule never reaches the last VISIBLE row — strip its border
   here or it doubles up against the card's own bottom edge. */
.emails-table tbody tr:nth-last-child(2) td { border-bottom: none; }
.emails-table tr.row-camara td { background: var(--muted); }
.emails-table tr.row-camara:hover td,
.data-table tr[data-uid]:hover td { background: var(--muted); }
.concello-name.wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.emails-table tr[data-uid] { cursor: pointer; }
.emails-table td { padding: 13px 12px; }
.emails-table .row-idx {
  text-align: center; color: var(--muted-foreground);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.emails-table tr:hover .row-idx { color: var(--foreground); }
.concello-name {
  font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.km-range {
  font-size: 11.5px; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.km-note { font-variant-numeric: normal; }
.km-note::before { content: "·"; margin: 0 5px; color: var(--border); }
.email-input {
  width: 100%; max-width: 280px; box-sizing: border-box;
  font-size: 12.5px; padding: 7px 10px; display: block;
}
.verify-line {
  margin-top: 6px; font-size: 11px; min-height: 18px;
  display: flex; align-items: center; gap: 6px;
}
.verify-line a { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
.verify-ok { color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 5px; }
.badge-gps  { background: hsl(199 89% 94%); color: hsl(201 90% 32%); font-size: 10px; }
.badge-neutral { background: hsl(43 96% 90%); color: hsl(26 83% 34%); font-size: 10px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
/* Preview as a dropdown trigger: chevron flips, button stays "pressed" open */
.preview-btn .pv-chev { width: 12px; height: 12px; margin-left: -2px; opacity: .6; transition: transform .15s ease; }
.preview-btn.open { background: var(--muted); color: var(--foreground); }
.preview-btn.open .pv-chev { transform: rotate(180deg); }
.row-actions .btn-xs { padding: 5px 9px; }
.btn-exclude { color: var(--muted-foreground); opacity: .45; }
tr:hover .btn-exclude { opacity: 1; }

/* Preview row */
.preview-cell { padding: 0 14px 16px !important; background: var(--muted); }
.preview-frame-wrap {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: none;
  overflow: hidden;
  background: var(--background);
}
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  margin-top: 12px;
}
.preview-toolbar-label {
  font-size: 12px; font-weight: 600; color: var(--foreground);
  display: inline-flex; align-items: center; gap: 7px;
}
.preview-toolbar-label [data-lucide] { width: 13px; height: 13px; color: var(--muted-foreground); }

/* ── Segmented control (shadcn-style radio group) ─────────────────────────── */
.seg {
  display: inline-flex;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px);
  padding: 3px;
  gap: 3px;
}
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--muted-foreground);
  border-radius: calc(var(--radius) - 4px);
  transition: color .12s, background .12s, box-shadow .12s;
  white-space: nowrap;
}
.seg-opt input:checked + span {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.seg-opt:hover span { color: var(--foreground); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Toasts (shadcn / sonner style) ───────────────────────────────────────── */
.toaster {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 1px);
  box-shadow: var(--shadow-lg);
  padding: 13px 14px;
  cursor: default;
  animation: toastIn .22s cubic-bezier(.21,1.02,.73,1);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.leaving { opacity: 0; transform: translateX(12px) scale(.97); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.toast-icon [data-lucide] { width: 18px; height: 18px; }
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--foreground);
  word-wrap: break-word;
}
.toast-desc {
  font-size: 12px; line-height: 1.45;
  color: var(--muted-foreground);
  margin-top: 2px;
  word-wrap: break-word;
}
.toast-close {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: none; background: transparent;
  color: var(--muted-foreground);
  cursor: pointer; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  margin: -2px -2px 0 0;
}
.toast-close:hover { background: var(--muted); color: var(--foreground); }
.toast-close [data-lucide] { width: 14px; height: 14px; }
.toast-success .toast-icon { color: hsl(142 72% 36%); }
.toast-error   .toast-icon { color: var(--destructive); }
.toast-info    .toast-icon { color: hsl(214 80% 50%); }
.toast-loading .toast-icon { color: var(--muted-foreground); }
.toast-loading .spinner { width: 16px; height: 16px; border-width: 2px; }
@media (max-width: 560px) {
  .toaster { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* ══ Responsive (móvil / tablet) ═══════════════════════════════════════════ */
@media (max-width: 720px) {
  main { padding: 20px 14px; }
  /* Barra superior: envuelve en dos líneas en vez de cortar botones */
  .top-nav {
    height: auto; min-height: 52px; flex-wrap: wrap;
    padding: 8px 14px; gap: 6px; row-gap: 6px;
  }
  .nav-right { gap: 6px; }
  .nav-right .btn { padding: 7px 10px; font-size: 12px; }
  /* Migas largas: recortar con elipsis, nunca desbordar la barra */
  .top-nav .crumb, .top-nav .crumb-current {
    max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tab-bar-inner { padding: 0 14px; overflow-x: auto; }
  .page-header { flex-wrap: wrap; }
  .page-header .btn { flex-shrink: 0; }
  /* ── Emails en móvil: TARJETAS, no tabla con scroll lateral ──────────────
     Cada entidad se apila: nombre + km/teléfono, email a ancho completo,
     estado y botonera envolvente. Solo CSS: el markup de tabla no cambia. */
  .email-group { overflow-x: visible; }
  .emails-table { min-width: 0; display: block; }
  .emails-table colgroup, .emails-table thead, .emails-table .row-idx { display: none; }
  .emails-table tbody { display: block; }
  .emails-table tbody tr { display: block; padding: 14px 16px 13px; border-bottom: 1px solid var(--border); }
  .emails-table tbody tr:last-child { border-bottom: none; }
  .emails-table tbody td {
    display: block; border: none;
    padding: 0 !important; text-align: left !important;
  }
  .emails-table .concello-name { font-size: 14.5px; white-space: normal; }
  .emails-table td:nth-child(3) { margin-top: 10px; }
  .emails-table .email-input { width: 100%; }
  .emails-table .status-cell { margin-top: 8px; }
  .emails-table td:nth-child(5) { margin-top: 10px; }
  .row-actions { justify-content: flex-start; flex-wrap: wrap; white-space: normal; gap: 6px; }
  .emails-table tbody tr[id^="preview-"] { padding: 0; }
  .nav-right { flex-wrap: wrap; justify-content: flex-end; }
  /* Enviar pendientes: botón fijo abajo, siempre a un pulgar de distancia */
  #send-all-form { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 95; margin: 0; }
  #send-all-form .btn {
    width: 100%; justify-content: center; padding: 14px; font-size: 14px;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
  }
  main:has(#send-all-form) { padding-bottom: 88px; }
  /* Hub compacto: tarjetas de etapa como filas (miniatura + nombre + chips) */
  #tab-etapas .grid-3 { grid-template-columns: 1fr; gap: 10px; }
  .stage-card-link { display: flex; align-items: stretch; }
  .stage-thumb {
    width: 76px; min-width: 76px; height: auto; align-self: stretch;
    border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
  }
  .stage-thumb [data-lucide] { width: 20px !important; height: 20px !important; }
  .stage-info { padding: 10px 44px 10px 12px; flex: 1; min-width: 0; }
}

/* Pantallas muy estrechas: botones de la barra superior en modo icono
   (el title de cada botón sigue contando qué hace). */
@media (max-width: 540px) {
  .nav-right .btn:not(.btn-icon) { font-size: 0; gap: 0; padding: 8px 9px; }
  .nav-right .btn:not(.btn-icon) [data-lucide] { width: 15px; height: 15px; }
  /* Diálogos: a (casi) pantalla completa y con scroll interno */
  .dialog-content {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 88vh; overflow-y: auto;
  }
  .dropdown-menu, .card-dropdown { max-width: calc(100vw - 24px); }
  .upload-zone { padding: 24px 12px; }
}

/* ── Rail lateral de navegación (shadcn-style) ─────────────────────────────
   Aparece dentro de una carrera: carrera arriba + lista de etapas. Colapsable
   a rail de iconos (⌘B). En móvil desaparece (la navegación actual se queda). */
body.has-rail { --rail-w: 348px; }   /* mismo ancho que el panel del mapa */
body.has-rail.rail-collapsed { --rail-w: 54px; }

/* El rail empieza DEBAJO de la cabecera (migas + tabs), nunca la tapa; el
   alto exacto lo ajusta un JS mínimo (la cabecera puede crecer en móvil). */
.side-rail {
  position: fixed; top: 95px; left: 0; bottom: 0; width: var(--rail-w);
  z-index: 90; background: var(--background);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: width .15s ease;
}
/* El contenido se CENTRA en el espacio que queda a la derecha del rail
   (margin-left fijo a secas anulaba el margin:auto del main). */
body.has-rail main {
  margin-left: calc(var(--rail-w) + max(0px, (100vw - var(--rail-w) - 1120px) / 2));
  margin-right: max(0px, (100vw - var(--rail-w) - 1120px) / 2);
  transition: margin-left .15s ease;
}
body.has-rail main:has(.emails-table) {
  margin-left: calc(var(--rail-w) + max(0px, (100vw - var(--rail-w) - 1440px) / 2));
  margin-right: max(0px, (100vw - var(--rail-w) - 1440px) / 2);
}
body.has-rail .stage-iframe { left: var(--rail-w); width: calc(100% - var(--rail-w)); transition: left .15s ease, width .15s ease; }
/* El rail ya lleva la marca: fuera el logo duplicado de la miga de pan */
body.has-rail .top-nav .brand, body.has-rail .top-nav .brand + .nav-sep { display: none; }

/* Cabecera = primera fila de título, calcada al panel derecho del mapa */
.rail-hdr { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.rail-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: hsl(0 0% 58%); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-hdr-row h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--foreground); }
.rail-toggle {
  border: 0; background: transparent; cursor: pointer; line-height: 0;
  color: var(--muted-foreground); padding: 6px; border-radius: 6px;
}
.rail-toggle:hover { background: var(--muted); color: var(--foreground); }

/* Lista a sangre con líneas finas — mismo lenguaje que el rutómetro del mapa */
.rail-list { flex: 1; overflow-y: auto; }
/* Mismas métricas que las filas del rutómetro del mapa: los dos sidebars
   deben parecer el mismo componente. */
.rail-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 8px; border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.rail-row:hover { background: var(--muted); }
/* Activa: gris suave con muesca negra — shadcn puro */
.rail-row.active {
  background: var(--muted);
  box-shadow: inset 3px 0 0 var(--foreground);
}
.rail-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-row-top { display: flex; align-items: baseline; gap: 8px; }
.rail-row-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-row-km {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--foreground);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rail-row-sub {
  font-size: 10px; color: hsl(0 0% 58%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El número solo se ve colapsado, plano y sin color */
.rail-n {
  display: none; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Colapsado: solo iconos (números de etapa); textos y extras fuera */
body.rail-collapsed .rail-eyebrow,
body.rail-collapsed .rail-hdr-row h2,
body.rail-collapsed .rail-row-body { display: none; }
body.rail-collapsed .rail-n { display: block; }
body.rail-collapsed .rail-hdr { padding: 14px 6px 10px; }
body.rail-collapsed .rail-hdr-row { justify-content: center; }
body.rail-collapsed .rail-row { justify-content: center; padding: 9px 6px; }
body.rail-collapsed .rail-row.active .rail-n { color: var(--foreground); }

@media (max-width: 860px) {
  body.has-rail, body.has-rail.rail-collapsed { --rail-w: 0px; }
  .side-rail { display: none; }
}

/* ── Tabs shadcn (segmented) centradas en la barra superior ───────────────── */
.app-header .top-nav, .top-nav { position: relative; }
.app-header .top-nav { position: relative; }  /* el sticky lo lleva .app-header */
.seg-tabs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 2px; background: var(--muted);
  border-radius: 10px; padding: 3px;
}
.seg-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--muted-foreground);
  white-space: nowrap;
}
.seg-tab:hover { color: var(--foreground); }
.seg-tab.active {
  background: var(--background); color: var(--foreground);
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.seg-tab [data-lucide] { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .seg-tabs { position: static; transform: none; margin-left: 12px; }
}

/* Eliminar discreto: icono fantasma; el rojo solo aparece al pasar el ratón */
.btn-delete-quiet { color: var(--muted-foreground); }
.btn-delete-quiet:hover { background: hsl(0 72% 51% / .12); color: var(--destructive); }