/* Transición suave entre páginas (Chrome 126+, Edge, Safari 18.2+).
   Ignorado por browsers que no lo soportan. */
@view-transition { navigation: auto; }

/* ============================================================
   Uberall — sistema de diseño
   Paleta y tipografía del Brand Center (Turquesa Atlántico #459C95,
   Azul Profundo #161C2A, Celeste Fresco #82D0D7, Poppins):
     · Superficies de marca en navy profundo (sidebar, login, headers)
     · Titulares en Poppins semibold, con itálica turquesa de énfasis
     · Labels/eyebrows en mono uppercase con tracking amplio
     · Fondo de página cálido (no gris frío), bordes cálidos
     · Estados como pills con fondo tenue, nunca colores planos saturados
   Ver docs/specs/00-brand-design-system.md
============================================================ */

:root {
  /* ── Marca ─────────────────────────────────────────────── */
  --uc-navy:        #161C2A;   /* Azul Profundo: sidebar, login, hero */
  --uc-navy-2:      #21293B;   /* elevación sobre navy */
  --uc-navy-3:      #2D374C;   /* bordes sobre navy */
  --uc-brand:       #459C95;   /* Turquesa Atlántico: superficies, gráficos */
  --uc-brand-deep:  #2E6A65;   /* turquesa para TEXTO sobre fondo claro */
  --uc-brand-hover: #245450;   /* hover de texto/acción */
  --uc-brand-300:   #82D0D7;   /* Celeste Fresco: énfasis sobre navy */
  --uc-brand-50:    #E4F1EF;   /* fondo tenue */

  /*
    Alias de la paleta anterior. Los nombres --uc-blue* siguen usándose
    directo en varias views (Dashboard, Platform, Wizard, LinkTelegram), así
    que se mantienen en vez de renombrarlos. Apuntan al turquesa PROFUNDO, no
    al de marca: en esas views el token se usa sobre todo como color de
    texto, y el turquesa claro sobre blanco da 3.1:1, abajo del mínimo AA.
  */
  --uc-blue:        var(--uc-brand-deep);
  --uc-blue-700:    var(--uc-brand-hover);
  --uc-blue-300:    var(--uc-brand-300);
  --uc-blue-50:     var(--uc-brand-50);

  /* ── Superficies ───────────────────────────────────────── */
  --uc-bg:          #FAF9F7;   /* fondo de página, cálido */
  --uc-surface:     #FFFFFF;
  --uc-surface-2:   #F4F2EE;   /* thead, filas alternas */
  --uc-border:      #E7E3DC;   /* borde cálido */
  --uc-border-soft: #F0EDE7;

  /* ── Texto ─────────────────────────────────────────────── */
  --uc-text:        #14181F;
  --uc-text-muted:  #6E7480;
  --uc-text-subtle: #9AA0AB;
  --uc-on-navy:       #EDEFF3;
  --uc-on-navy-muted: #99A2B4;

  /* ── Estados (pills) ───────────────────────────────────── */
  --uc-ok:        #157F4A;
  --uc-ok-bg:     #E6F4EC;
  --uc-info:      #0B6E9E;
  --uc-info-bg:   #E4F1F8;
  --uc-warn:      #9C5B12;
  --uc-warn-bg:   #FBEEDE;
  --uc-danger:    #B3261E;
  --uc-danger-bg: #FBEAE8;
  --uc-neutral:    #5A6070;
  --uc-neutral-bg: #EEEDEA;

  /* ── Legacy (compat con views existentes) ──────────────── */
  --uc-black:    #161C2A;
  --uc-gray-50:  #FAF9F7;
  --uc-gray-100: #F0EDE7;
  --uc-gray-200: #E7E3DC;
  --uc-gray-400: #9AA0AB;
  --uc-gray-600: #6E7480;
  --uc-gray-800: #2A303C;

  /* ── Elevación y forma ─────────────────────────────────── */
  --uc-shadow-sm: 0 1px 2px rgba(22, 28, 42, 0.04), 0 1px 3px rgba(22, 28, 42, 0.05);
  --uc-shadow-md: 0 6px 16px -4px rgba(22, 28, 42, 0.10), 0 2px 6px -2px rgba(22, 28, 42, 0.06);
  --uc-radius:    12px;
  --uc-radius-sm: 8px;

  /* ── Tipografía ────────────────────────────────────────── */
  --uc-font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --uc-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --uc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Base ───────────────────────────────────────────────────── */
html, body {
  font-family: var(--uc-font-sans);
  color: var(--uc-text);
  background: var(--uc-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Titulares en Poppins semibold — la firma visual de la marca. */
h1, h2, h3, .uc-display {
  font-family: var(--uc-font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--uc-text);
}
h4, h5, h6 { letter-spacing: -0.01em; font-weight: 600; }

/* Itálica de énfasis, como en el material de marca. */
.uc-display em, .uc-display i, h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--uc-blue);
}
.uc-on-dark .uc-display em, .uc-auth-side em { color: var(--uc-blue-300); }

/* Eyebrow / label: mono uppercase con tracking amplio. */
.uc-eyebrow {
  font-family: var(--uc-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--uc-text-subtle);
}

/* ── Acción primaria ────────────────────────────────────────── */
.btn {
  border-radius: var(--uc-radius-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.btn-primary {
  --bs-btn-bg:           var(--uc-navy);
  --bs-btn-border-color: var(--uc-navy);
  --bs-btn-hover-bg:           var(--uc-navy-2);
  --bs-btn-hover-border-color: var(--uc-navy-2);
  --bs-btn-active-bg:           var(--uc-navy-2);
  --bs-btn-active-border-color: var(--uc-navy-2);
  --bs-btn-disabled-bg:         var(--uc-navy);
  --bs-btn-disabled-border-color: var(--uc-navy);
}
.btn-outline-primary {
  --bs-btn-color:        var(--uc-blue);
  --bs-btn-border-color: var(--uc-blue);
  --bs-btn-hover-bg:     var(--uc-navy);
  --bs-btn-hover-border-color: var(--uc-navy);
  --bs-btn-active-bg:    var(--uc-navy);
  --bs-btn-active-border-color: var(--uc-navy);
}
.btn-outline-secondary {
  --bs-btn-color:        var(--uc-text-muted);
  --bs-btn-border-color: var(--uc-border);
  --bs-btn-hover-bg:     var(--uc-surface-2);
  --bs-btn-hover-color:  var(--uc-text);
  --bs-btn-hover-border-color: var(--uc-border);
}
.bg-primary  { background-color: var(--uc-blue) !important; }
.text-primary{ color:            var(--uc-blue) !important; }
.link-primary, a { color: var(--uc-blue); text-underline-offset: 2px; }
a:hover { color: var(--uc-blue-700); }

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--uc-blue);
  box-shadow: 0 0 0 .2rem rgba(69, 156, 149, .13);
}
.form-check-input:checked {
  background-color: var(--uc-blue);
  border-color: var(--uc-blue);
}

/* ── Layout ─────────────────────────────────────────────────── */
.uc-shell { display: flex; min-height: 100vh; }

/* ── Sidebar: superficie de marca en navy ───────────────────── */
.uc-sidebar {
  width: 244px;
  background: var(--uc-navy);
  color: var(--uc-on-navy-muted);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1030;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.uc-sidebar__brand {
  padding: 1.125rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}
.uc-sidebar__brand .uc-logo-wordmark,
.uc-sidebar__brand .uc-logo-mark {
  /* Se limita por ancho Y alto en vez de fijar el ancho: el logo de la marca
     puede ser un wordmark apaisado (Uberall) o un isotipo con texto debajo,
     casi cuadrado (Boating Club). Fijando solo el ancho, el cuadrado se
     estiraba a 165px de alto y se comía el sidebar. */
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.uc-context-badge {
  margin: 0.5rem 0.875rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--uc-navy-2);
  border: 1px solid var(--uc-navy-3);
  border-radius: var(--uc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.uc-context-badge span {
  color: var(--uc-on-navy);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-context-badge form button {
  background: none; border: none; padding: 0;
  color: var(--uc-on-navy-muted);
  font-size: 0.85rem; cursor: pointer; flex-shrink: 0;
}
.uc-context-badge form button:hover { color: #fff; }

.uc-sidebar__nav { flex: 1; overflow-y: auto; padding: 0.75rem; }
.uc-sidebar__nav .uc-nav-section {
  padding: 0.75rem 0.75rem 0.375rem;
  font-family: var(--uc-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,0.38);
  font-weight: 600;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.uc-sidebar__nav .uc-nav-section:hover { color: rgba(255,255,255,0.6); }
.uc-nav-chevron { font-size: 0.7rem; opacity: 0.5; transition: transform 0.15s ease; }
.uc-nav-section.collapsed .uc-nav-chevron { transform: rotate(-90deg); }
.uc-nav-group { display: flex; flex-direction: column; }
.uc-nav-group.collapsed { display: none; }
.uc-sidebar__nav a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  color: var(--uc-on-navy-muted);
  text-decoration: none;
  font-size: 0.87rem;
  border-radius: var(--uc-radius-sm);
  margin-bottom: 0.0625rem;
  transition: background-color .12s ease, color .12s ease;
}
.uc-sidebar__nav a:hover { background: rgba(255,255,255,0.06); color: var(--uc-on-navy); }
.uc-sidebar__nav a.active {
  background: var(--uc-blue);
  color: #fff;
  font-weight: 500;
}
.uc-sidebar__nav a .uc-nav-icon { width: 18px; height: 18px; font-size: 0.95rem; flex-shrink: 0; opacity: .85; }

.uc-sidebar__footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.uc-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--uc-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8rem; flex-shrink: 0;
}
.uc-sidebar__footer .uc-user-name { color: var(--uc-on-navy); font-weight: 500; font-size: 0.82rem; line-height: 1.2; }
.uc-sidebar__footer .uc-user-role {
  color: var(--uc-on-navy-muted);
  font-family: var(--uc-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.uc-sidebar__footer form button {
  background: none; border: 0; padding: 0;
  color: var(--uc-on-navy-muted); font-size: 0.78rem; cursor: pointer;
}
.uc-sidebar__footer form button:hover { color: #fff; }

/* ── Contenido ──────────────────────────────────────────────── */
.uc-main { flex: 1; margin-left: 244px; display: flex; flex-direction: column; }
.uc-topbar {
  height: 62px;
  padding: 0 1.75rem;
  background: var(--uc-surface);
  border-bottom: 1px solid var(--uc-border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1020;
}
.uc-topbar h1, .uc-topbar .uc-page-title {
  font-family: var(--uc-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--uc-text);
}
.uc-content { padding: 1.75rem; flex: 1; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem;
}
.topbar h1 {
  font-family: var(--uc-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  box-shadow: none;
  background: var(--uc-surface);
}
.card-header {
  background: var(--uc-surface);
  border-bottom: 1px solid var(--uc-border-soft);
  font-family: var(--uc-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--uc-text-subtle);
  padding: 0.75rem 1rem;
}

/* ── Tablas ─────────────────────────────────────────────────── */
.table { --bs-table-border-color: var(--uc-border-soft); }
.table > :not(caption) > * > * { padding: 0.7rem 0.75rem; }
.table thead th {
  font-family: var(--uc-font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uc-text-subtle);
  font-weight: 600;
  border-bottom: 1px solid var(--uc-border);
  background: transparent;
}
.table-light, .table > :not(caption) > * > th.table-light {
  --bs-table-bg: var(--uc-surface-2);
  border-bottom: 1px solid var(--uc-border);
}
.table-hover > tbody > tr:hover > * { background-color: var(--uc-surface-2); }

/* ── Badges como pills de estado ─────────────────────────────
   Las views usan utilidades de Bootstrap (bg-success, bg-warning…).
   Las reinterpretamos como pills de fondo tenue: cambia el look en
   toda la app sin tocar una sola vista. */
.badge {
  font-family: var(--uc-font-mono);
  font-weight: 600;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.32em 0.7em;
  border-radius: 999px;
  line-height: 1.35;
}
.badge.bg-success   { background-color: var(--uc-ok-bg)      !important; color: var(--uc-ok); }
.badge.bg-info      { background-color: var(--uc-info-bg)    !important; color: var(--uc-info); }
.badge.bg-warning   { background-color: var(--uc-warn-bg)    !important; color: var(--uc-warn); }
.badge.bg-danger    { background-color: var(--uc-danger-bg)  !important; color: var(--uc-danger); }
.badge.bg-secondary { background-color: var(--uc-neutral-bg) !important; color: var(--uc-neutral); }
.badge.bg-primary   { background-color: var(--uc-blue-50)    !important; color: var(--uc-blue); }
/* Bootstrap agrega text-dark a algunos badges; lo neutralizamos. */
.badge.bg-warning.text-dark, .badge.bg-info.text-dark { color: inherit !important; }

/* Pills explícitas (mismos modificadores que worker-pwa). */
.uc-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-family: var(--uc-font-mono);
  font-size: 0.64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  line-height: 1.35; white-space: nowrap;
}
.uc-pill--assigned { background: var(--uc-blue-50);   color: var(--uc-blue); }
.uc-pill--enroute  { background: var(--uc-info-bg);   color: var(--uc-info); }
.uc-pill--delayed  { background: var(--uc-warn-bg);   color: var(--uc-warn); }
.uc-pill--closed   { background: var(--uc-ok-bg);     color: var(--uc-ok); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label { font-size: 0.84rem; font-weight: 500; color: var(--uc-gray-800); }
.form-control, .form-select {
  border-color: var(--uc-border);
  border-radius: var(--uc-radius-sm);
  background-color: var(--uc-surface);
}
.form-control::placeholder { color: var(--uc-text-subtle); }

/* ── Login: superficie de marca ─────────────────────────────── */
.uc-auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  background: var(--uc-surface);
}
.uc-auth-side {
  background: var(--uc-navy);
  color: var(--uc-on-navy);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.uc-auth-side::after {
  content: '';
  position: absolute;
  bottom: -220px; right: -220px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(69, 156, 149, 0.22) 0%, transparent 62%);
  border-radius: 50%;
}
.uc-auth-side__brand { display: flex; flex-direction: column; gap: 0.875rem; position: relative; z-index: 1; }
.uc-auth-side__brand .uc-logo-wordmark,
.uc-auth-side__brand .uc-logo-mark {
  max-width: 165px; max-height: 60px;
  width: auto; height: auto; object-fit: contain; display: block;
}
.uc-auth-side__footer {
  font-family: var(--uc-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--uc-on-navy-muted);
  position: relative; z-index: 1;
}
.uc-auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.uc-auth-form > div { width: 100%; max-width: 380px; }
.uc-auth-form h1 { font-size: 1.9rem; }

/* ── KPIs: número en serif, label en mono ───────────────────── */
.uc-kpi {
  background: var(--uc-surface);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  padding: 0.95rem 1.05rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  height: 100%;
}
.uc-kpi__label {
  font-family: var(--uc-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--uc-text-subtle);
  font-weight: 600;
}
.uc-kpi__value {
  font-family: var(--uc-font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--uc-text);
}
.uc-kpi__hint { font-size: 0.72rem; color: var(--uc-text-muted); }

/* ── Paneles del dashboard ──────────────────────────────────── */
.uc-panel {
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: var(--uc-surface);
}
.uc-panel > .card-header {
  background: var(--uc-surface);
  border-bottom: 1px solid var(--uc-border-soft);
  font-family: var(--uc-font-mono);
  font-size: 0.66rem;
  color: var(--uc-text-subtle);
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.uc-panel .card-body { padding: 1rem; }

.uc-empty { padding: 2rem 1rem; text-align: center; color: var(--uc-text-muted); }
.uc-empty__title {
  font-family: var(--uc-font-display);
  font-weight: 600; color: var(--uc-text); font-size: 1.05rem; margin-bottom: 0.35rem;
}
.uc-empty__hint { font-size: 0.85rem; }

.uc-stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--uc-border-soft);
}
.uc-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.uc-stat-row__label { font-size: 0.85rem; color: var(--uc-text-muted); }
.uc-stat-row__value { font-size: 1rem; font-weight: 600; color: var(--uc-text); }

.uc-rating { text-align: center; padding: 0.25rem 0; }
.uc-rating__score {
  font-family: var(--uc-font-display);
  font-size: 2.4rem; font-weight: 600; color: var(--uc-text); line-height: 1;
}
.uc-rating__score .text-muted { font-size: 1rem; font-weight: 400; margin-left: 0.15rem; }
.uc-rating__stars { color: #E0A526; font-size: 1.05rem; letter-spacing: 0.1em; margin-top: 0.25rem; }
.uc-rating__hint { font-size: 0.72rem; color: var(--uc-text-muted); margin-top: 0.15rem; }

/* Tendencia semanal — barras */
.uc-trend { display: flex; align-items: flex-end; justify-content: space-around; height: 110px; gap: 0.4rem; }
.uc-trend__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; height: 100%; }
.uc-trend__bars { display: flex; align-items: flex-end; gap: 2px; flex: 1; width: 100%; justify-content: center; }
.uc-trend__bar { width: 35%; min-height: 2px; border-radius: 3px 3px 0 0; transition: height 0.3s ease; }
.uc-trend__bar--created   { background: var(--uc-brand); }
.uc-trend__bar--completed { background: var(--uc-ok); }
.uc-trend__label {
  font-family: var(--uc-font-mono);
  font-size: 0.62rem; color: var(--uc-text-subtle); text-transform: uppercase; letter-spacing: 0.06em;
}

.uc-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }

.uc-progress { width: 100%; height: 6px; background: var(--uc-surface-2); border-radius: 3px; overflow: hidden; }
.uc-progress__bar { height: 100%; background: var(--uc-brand); border-radius: 3px; transition: width 0.3s ease; }

.uc-stack { display: flex; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--uc-surface-2); }
.uc-stack__seg { height: 100%; transition: width 0.3s ease; }

/* ── Topbar mobile + drawer ─────────────────────────────────── */
.uc-mobile-topbar {
  display: none;
  position: sticky; top: 0; z-index: 1029;
  background: var(--uc-navy);
  color: #fff;
  align-items: center; gap: 0.875rem;
  padding: 0.7rem 1rem;
}
.uc-mobile-topbar__toggle {
  background: none; border: 0; color: #fff;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.4rem; padding: 0;
  border-radius: var(--uc-radius-sm);
}
.uc-mobile-topbar__toggle:hover { background: rgba(255,255,255,0.1); }
.uc-mobile-topbar__brand { display: flex; align-items: center; gap: 0.5rem; }
.uc-mobile-topbar__brand img { height: 22px; width: auto; }
.uc-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(22, 28, 42, 0.5);
  z-index: 1029; opacity: 0; transition: opacity 0.2s ease;
}
.uc-backdrop.is-open { display: block; opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 992px) {
  .uc-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .uc-sidebar.is-open { transform: translateX(0); }
  .uc-main          { margin-left: 0; }
  .uc-mobile-topbar { display: flex; }
  .uc-content       { padding: 1rem 1rem 2rem; }
  .topbar           { flex-wrap: wrap; gap: 0.5rem; }
  .topbar h1        { font-size: 1.3rem; }
  .uc-auth-shell    { grid-template-columns: 1fr; }
  .uc-auth-side     { display: none; }
}

@media (max-width: 576px) {
  .uc-content   { padding: 0.875rem 0.875rem 2rem; }
  .topbar       { flex-direction: column; align-items: stretch; }
  .topbar > *   { width: 100%; }
  .topbar .btn, .topbar > a { width: 100%; text-align: center; }
  .card         { border-radius: 10px; }
  .uc-kpi__value { font-size: 1.7rem; }
  .row.g-2 > [class*="col-"] { margin-bottom: 0.5rem; }
  .table-sm > :not(caption) > * > * { padding: 0.4rem 0.4rem; }
  td .btn + .btn, td .btn + form, td form + .btn, td form + form { margin-top: 0.25rem; }
  td .btn, td form .btn { display: block; width: 100%; }
}

body.uc-no-scroll { overflow: hidden; }

/* ── Buscador global del sidebar ────────────────────────────── */
.uc-sidebar__search { position: relative; margin: 0 0.75rem 0.75rem; }
.uc-sidebar__search-icon {
  position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4); font-size: 0.85rem; pointer-events: none;
}
.uc-sidebar__search-input {
  width: 100%;
  background: var(--uc-navy-2);
  border: 1px solid var(--uc-navy-3);
  color: #fff;
  padding: 0.45rem 0.6rem 0.45rem 1.9rem;
  border-radius: var(--uc-radius-sm);
  font-size: 0.85rem;
  outline: none;
}
.uc-sidebar__search-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.uc-sidebar__search-input:focus { border-color: var(--uc-blue); background: var(--uc-navy-2); }
.uc-sidebar__search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--uc-surface);
  color: var(--uc-text);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-sm);
  box-shadow: var(--uc-shadow-md);
  z-index: 1000; max-height: 60vh; overflow-y: auto;
}
.uc-sidebar__search-list { padding: 0.25rem 0; }
.uc-sidebar__search-item {
  display: block; padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--uc-border-soft);
  text-decoration: none; color: inherit;
}
.uc-sidebar__search-item:last-child { border-bottom: 0; }
.uc-sidebar__search-item:hover { background: var(--uc-surface-2); }
.uc-sidebar__search-item__title {
  font-size: 0.85rem; font-weight: 600; color: var(--uc-text);
  display: flex; justify-content: space-between; gap: 0.5rem;
}
.uc-sidebar__search-item__kind {
  font-family: var(--uc-font-mono);
  font-size: 0.62rem; color: var(--uc-text-subtle);
  text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0;
}
.uc-sidebar__search-item__snippet {
  font-size: 0.78rem; color: var(--uc-text-muted); margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.uc-sidebar__search-empty { padding: 0.75rem; font-size: 0.8rem; color: var(--uc-text-muted); text-align: center; }
.uc-sidebar__search-all {
  display: block; text-align: center; padding: 0.55rem;
  font-family: var(--uc-font-mono);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--uc-blue); text-decoration: none;
  border-top: 1px solid var(--uc-border-soft);
}
.uc-sidebar__search-all:hover { background: var(--uc-surface-2); }

/* ── Estrellas de rating ────────────────────────────────────── */
.uc-stars { display: inline-flex; gap: 1px; font-size: 1rem; line-height: 1; }
.uc-stars .uc-star { display: inline-block; }
.uc-star--full  { color: #E0A526; }
.uc-star--empty { color: #D8D4CD; }
.uc-star--half {
  background: linear-gradient(90deg, #E0A526 50%, #D8D4CD 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Cabeceras ordenables del listado de órdenes ─────────────────────────── */
/* El link va del color del texto de la cabecera y sin subrayado: se ve como
   un título, no como un link suelto en medio de la tabla. El subrayado
   aparece recién al pasar por encima, que es donde hace falta la pista de
   que se puede tocar. */
.table thead th a { cursor: pointer; }
.table thead th a:hover { text-decoration: underline !important; }
.table thead th.uc-orden-activo { font-weight: 700; }