/* ============================================================
   Sillas App — Hoja de estilos única (styles.css)
   Developed by Tlacuache Ops & K2.8
   Temas:
     - Claro por defecto (:root); oscuro con <html data-theme="dark">.
     - El interruptor vive en js/theme.js: escribe data-theme en <html>
       y todas las reglas toman sus colores de las variables de abajo.
     - Cero colores quemados en componentes: cada color usado tiene su
       variable, con su par claro/oscuro cuando hace falta.
   ============================================================ */

/* ---------- Tema claro (defecto) ---------- */

:root {
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --ib: #0ea5e9;
  --ob: #10b981;
  --active: #f59e0b;
  --danger: #ef4444;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);

  /* Resplandores del fondo (gradientes radiales) */
  --glow-ib: rgba(56, 189, 248, .14);
  --glow-ob: rgba(52, 211, 153, .12);

  /* Superficies concretas */
  --header-bg: rgba(255, 255, 255, .85);
  --input-bg: #ffffff;
  --row-hover: rgba(15, 23, 42, .04);
  --on-primary: #ffffff;
  --focus-ring: rgba(37, 99, 235, .5);
  --focus-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
  --primary-soft-bg: rgba(37, 99, 235, .08);
  --primary-soft-border: rgba(37, 99, 235, .5);

  /* Familia IB (azul cielo) */
  --ib-text: #0369a1;
  --ib-soft-bg: rgba(14, 165, 233, .10);
  --ib-soft-border: rgba(14, 165, 233, .55);
  --ib-btn-bg: rgba(14, 165, 233, .12);
  --ib-badge-bg: rgba(14, 165, 233, .15);

  /* Familia OB (esmeralda) */
  --ob-text: #047857;
  --ob-soft-bg: rgba(16, 185, 129, .10);
  --ob-soft-border: rgba(16, 185, 129, .55);
  --ob-btn-bg: rgba(16, 185, 129, .12);
  --ob-badge-bg: rgba(16, 185, 129, .15);
  --ob-done-bg: rgba(16, 185, 129, .14);

  /* Familia ámbar (activo / vuelos extra / avisos) */
  --amber-text: #b45309;
  --amber-strong: #f59e0b;
  --amber-soft-bg: rgba(245, 158, 11, .10);
  --amber-soft-border: rgba(245, 158, 11, .6);
  --amber-border: rgba(245, 158, 11, .5);
  --amber-badge-bg: rgba(245, 158, 11, .16);

  /* Familia neutra (completados) y peligro */
  --neutral-text: #475569;
  --neutral-badge-bg: rgba(100, 116, 139, .16);
  --danger-strong: #ef4444;

  /* Sincronización del piso (bordes de los chips de pasos hechos) */
  --sync-online-border: rgba(16, 185, 129, .5);
  --sync-busy-border: rgba(245, 158, 11, .5);
  --sync-offline-border: rgba(239, 68, 68, .5);

  /* Botón de "terminar servicio" (verde sólido) */
  --btn-end-a: #10b981;
  --btn-end-b: #059669;

  /* Pestañas y toasts */
  --tab-count-on-bg: rgba(255, 255, 255, .25);
  --toast-bg: #0f172a;
  --toast-text: #e2e8f0;
  --toast-shadow: 0 10px 30px rgba(15, 23, 42, .35);

  /* Overlay de contraseña: la tarjeta siempre va clara (formulario serio) */
  --overlay-bg: rgba(11, 17, 32, .72);
  --pwd-bg: #ffffff;
  --pwd-text: #0f172a;

  /* Paleta de las gráficas (la lee js/dashboard.js) */
  --chart-text: #334155;
  --chart-muted: #64748b;
  --chart-grid: rgba(15, 23, 42, .10);
  --chart-ib-a: #0ea5e9;
  --chart-ib-b: #0369a1;
  --chart-ob-a: #34d399;
  --chart-ob-b: #059669;
  --chart-accent: #6366f1;
  --chart-area-a: rgba(99, 102, 241, .35);
  --chart-area-b: rgba(99, 102, 241, .02);
  --chart-track: rgba(15, 23, 42, .10);
  --chart-axis: #cbd5e1;
}

/* ---------- Tema oscuro ---------- */

html[data-theme="dark"] {
  --bg: #0b1120;
  --card: rgba(148, 163, 184, .07);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: rgba(148, 163, 184, .16);
  --shadow: none;

  --glow-ib: rgba(56, 189, 248, .12);
  --glow-ob: rgba(52, 211, 153, .10);

  --header-bg: rgba(11, 17, 32, .8);
  --input-bg: rgba(2, 6, 23, .5);
  --row-hover: rgba(148, 163, 184, .08);

  --ib-text: #7dd3fc;
  --ob-text: #6ee7b7;

  --amber-text: #fbbf24;
  --amber-strong: #fbbf24;

  --neutral-text: #94a3b8;
  --danger-strong: #f87171;

  --chart-text: #cbd5e1;
  --chart-muted: #94a3b8;
  --chart-grid: rgba(148, 163, 184, .12);
  --chart-ib-a: #38bdf8;
  --chart-ib-b: #0369a1;
  --chart-ob-a: #34d399;
  --chart-ob-b: #047857;
  --chart-accent: #818cf8;
  --chart-area-a: rgba(129, 140, 248, .35);
  --chart-area-b: rgba(129, 140, 248, .02);
  --chart-track: rgba(148, 163, 184, .15);
  --chart-axis: #334155;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

/* El atributo hidden siempre gana: sin esto, una clase con
   display:flex (p. ej. .btn) deja visible lo que debe estar oculto. */
[hidden] { display: none !important; }

/* Páginas protegidas (index, piso, panel) nacen ocultas y js las
   revela SOLO tras confirmar la sesión (ver requireAuth). Así nadie
   ve la página de asignación ni el panel ni un instante antes del
   login. visibility (no display) para no mover el layout. */
body.pre-auth { visibility: hidden; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--glow-ib), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--glow-ob), transparent 60%),
    var(--bg);
}

main.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 16px;
  flex: 1;
}

h1, h2 { margin: 0; }

/* ---------- Cabecera ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand { font-size: 1.15rem; font-weight: 800; }
.brand-sub { color: var(--muted); font-weight: 600; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-name {
  color: var(--muted);
  font-size: .9rem;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Tarjetas ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

html[data-theme="dark"] .card {
  backdrop-filter: blur(10px);
}

.card-title { font-size: 1.15rem; margin-bottom: 12px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card-header .card-title { margin-bottom: 0; }

.muted { color: var(--muted); }
.muted-sm { color: var(--muted); font-size: .85rem; font-weight: 500; }

/* ---------- Formularios ---------- */

label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 14px;
}

input, select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-shadow);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Registro: formulario grande y claro ---------- */

/* Solo el formulario de asignación: etiquetas en negrita y grandes,
   inputs con altura de dedo. El resto de la app conserva su tamaño. */
#service-form label,
#service-form .field-label {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

#service-form .field-label { margin-bottom: 8px; }

#service-form input[type="text"] { min-height: 48px; font-size: 17px; }

.field-block { margin: 0 0 16px; }

.field-hint {
  margin: -6px 0 8px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
}

/* Pistas de ayuda muy cortas, en palabras simples */
.form-note {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  margin: 8px 0 0;
}

/* ---------- Buscadores: opciones grandes (vuelo y auxiliar) ---------- */

.pick-results { display: grid; gap: 8px; margin-top: 8px; }

.pick-option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
}

.pick-option:hover { transform: translateY(-1px); }

.opt-flight { font-size: 1.15rem; }

/* Opción de vuelo listado: colores del tipo (mismo tema que .badge-ib/.badge-ob) */
.pick-flight-ib {
  border-color: var(--ib-soft-border);
  background: var(--ib-soft-bg);
  color: var(--ib-text);
}

.pick-flight-ob {
  border-color: var(--ob-soft-border);
  background: var(--ob-soft-bg);
  color: var(--ob-text);
}

/* Opción ámbar: vuelo extra (IRROPS), no está en la lista */
.pick-extra {
  border-color: var(--amber-soft-border);
  background: var(--amber-soft-bg);
  color: var(--amber-text);
}

/* Elección de tipo para vuelo extra: dos botones grandes */
.type-choice {
  margin-top: 10px;
  padding: 12px;
  border: 2px dashed var(--amber-soft-border);
  border-radius: 12px;
  background: var(--amber-soft-bg);
}

.type-choice-title { margin: 0 0 10px; font-size: 1rem; font-weight: 800; }

.type-choice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.type-btn {
  min-height: 56px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 12px;
  border: 2.5px solid;
  cursor: pointer;
  transition: all .15s;
}

.type-ib {
  border-color: var(--ib);
  background: var(--ib-btn-bg);
  color: var(--ib-text);
}

.type-ob {
  border-color: var(--ob);
  background: var(--ob-btn-bg);
  color: var(--ob-text);
}

/* Tarjetas de confirmación: "✓ VUELO ELEGIDO" / "✓ ASIGNADO A" */
.confirm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 14px 16px;
  border: 2.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.confirm-text { margin: 0; font-size: 1.05rem; font-weight: 700; }

.confirm-card.card-ib { border-color: var(--ib); background: var(--ib-soft-bg); }
.confirm-card.card-ib .confirm-text { color: var(--ib-text); }
.confirm-card.card-ob { border-color: var(--ob); background: var(--ob-soft-bg); }
.confirm-card.card-ob .confirm-text { color: var(--ob-text); }

/* Vuelo extra: mismo aviso ámbar, con borde rayado */
.confirm-card.extra {
  border-style: dashed;
  border-color: var(--amber-soft-border);
  background: var(--amber-soft-bg);
}
.confirm-card.extra .confirm-text { color: var(--amber-text); }

/* Tarjeta informativa del selector de auxiliar: "⭐ YO MISMO" (neutra)
   o "✓ ASIGNADO A" (verde de confirmación). Sin botón: es solo aviso. */
.assign-status {
  margin-top: 8px;
  padding: 14px 16px;
  border: 2.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

/* Elegido un auxiliar: verde de confirmación (mismo tema que .badge-ob) */
.assign-status.assign-picked {
  border-color: var(--ob);
  background: var(--ob-soft-bg);
}
.assign-status.assign-picked .confirm-text { color: var(--ob-text); }

/* Ficha elegida en la lista: borde verde + ✓ en el nombre */
.assign-opt.picked {
  border-color: var(--ob);
  background: var(--ob-soft-bg);
}
.assign-opt.picked .assign-name { color: var(--ob-text); }

/* Aviso de bloqueo en edición: el dueño no se cambia */
.assign-locked {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}

/* Resultados del buscador de auxiliar: nombre grande + correo pequeño */
.assign-name { display: block; font-size: 1.05rem; font-weight: 800; }
.assign-mail { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); }

/* Botón grande y prominente: "Asignar servicio" */
.btn-lg {
  width: 100%;
  min-height: 56px;
  font-size: 1.15rem;
  border-radius: 14px;
}

/* ---------- Pestañas de la tabla de hoy ---------- */

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.tab-btn {
  min-height: 48px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
}

/* Activa: azul + recuadro blanco en el contador (color + texto + símbolo) */
.tab-btn.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.tab-count {
  display: inline-block;
  min-width: 24px;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  background: var(--border);
  color: var(--muted);
}

.tab-btn.active .tab-count { background: var(--tab-count-on-bg); color: var(--on-primary); }

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-error {
  color: var(--danger);
  font-size: .9rem;
  margin: 0 0 12px;
}

.hint {
  color: var(--muted);
  font-size: .82rem;
  margin: 12px 0 0;
}

.center { text-align: center; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px; /* objetivo táctil */
  padding: 10px 18px;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}

.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: transparent;
  color: var(--on-primary);
}

.btn-ghost { background: transparent; }

.btn-mini {
  min-height: 0;
  padding: 4px 9px;
  font-size: .78rem;
  border-radius: 8px;
  margin: 2px 2px 2px 0;
}

.btn-stamp { border-color: var(--active); color: var(--amber-strong); }
.btn-danger { border-color: var(--danger); color: var(--danger-strong); }

.btn-block { width: 100%; }

/* ---------- Insignias (badges) ---------- */

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.badge-ib { background: var(--ib-badge-bg); color: var(--ib-text); }
.badge-ob { background: var(--ob-badge-bg); color: var(--ob-text); }
.badge-active { background: var(--amber-badge-bg); color: var(--amber-text); }
.badge-completed { background: var(--neutral-badge-bg); color: var(--neutral-text); }
.badge-count { background: var(--border); color: var(--muted); }

/* ---------- Tablas ---------- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  white-space: nowrap;
}

th {
  text-align: left;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 10px;
}

td {
  padding: 9px 10px;
  border-top: 1px solid var(--border);
}

tbody tr:hover { background: var(--row-hover); }

.cell-strong { font-weight: 700; }
.actions { white-space: normal; min-width: 170px; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 22px 10px;
}

/* ---------- Toasts (avisos flotantes) ---------- */

#toast-host {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  width: min(420px, 92vw);
}

.toast {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--toast-bg);
  color: var(--toast-text);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--toast-shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  border-left: 4px solid var(--primary);
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { border-left-color: var(--ob); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--ib); }

/* ---------- Login ---------- */

.login-body {
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(900px 500px at 90% -10%, var(--glow-ib), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, var(--glow-ob), transparent 60%),
    var(--bg);
}

html[data-theme="dark"] .login-body {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--glow-ib), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--glow-ob), transparent 60%),
    var(--bg);
}

.login-card { width: min(400px, 100%); }

.login-brand { text-align: center; margin-bottom: 18px; }
.login-logo { font-size: 2.6rem; }
.login-brand h1 { font-size: 1.5rem; }
.login-brand .muted { margin: 4px 0 0; }

/* Fila del interruptor de tema: pegada a la derecha, sobre la tarjeta */
.login-theme-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.login-body .app-footer {
  position: fixed;
  bottom: 12px;
  width: 100%;
}

/* ---------- Panel: controles y KPIs ---------- */

.controls-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
}

.seg-group {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.seg-btn {
  min-height: 42px;
  padding: 8px 18px;
  font: inherit;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
}

.seg-btn.active { background: var(--primary); color: var(--on-primary); }

.control-date, .control-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .88rem;
}

.control-date input, .control-filter select {
  width: auto;
  margin-top: 0;
}

.range-label {
  margin-left: auto;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 960px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
}

.kpi-card { padding: 12px 14px; text-align: center; }

.gauge { width: 100%; height: 120px; }

.kpi-caption {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.kpi-stats { text-align: center; }

.stat-label {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.stat-value {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 800;
}

.stat-amber { color: var(--active); }

/* ---------- Panel: gráficas ---------- */

.chart-card { padding: 16px; }

.chart { width: 100%; }
.chart-lg { height: 340px; }
.chart-md { height: 400px; }
.chart-sm { height: 240px; }

/* Aviso permanente cuando la librería de gráficas no cargó (CDN caído):
   ocupa el hueco de la gráfica para que la página no quede vacía. */
.chart-error {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 140px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
}

@media (min-width: 768px) {
  .chart-lg { height: 420px; }
  .chart-md { height: 460px; }
}

/* ---------- Footer ---------- */

.app-footer {
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  padding: 22px 16px;
}

/* ---------- Detalles de accesibilidad ---------- */

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Cambio de contraseña forzado (primer acceso) ---------- */
/* Overlay a pantalla completa: bloquea la app hasta cambiarla. */

.pwd-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
}

.pwd-card {
  width: min(400px, 100%);
  background: var(--pwd-bg); /* siempre claro: es un formulario serio */
  color: var(--pwd-text);
}

.pwd-card input { background: var(--pwd-bg); }

/* ---------- Vista de piso (auxiliar, fase 4) ---------- */
/* Móvil primero: tarjetas grandes con UN botón gigante por servicio. */

.piso-main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 12px 28px;
  display: grid;
  gap: 14px;
  flex: 1;
}

.piso-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subtítulo gris y pequeño: para qué sirve la sección */
.piso-section-sub {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}

/* Línea fina de estado (✓ Todo bien / ↻ Mandando… / ✂ Sin señal):
   texto normal, sin pastillas, sin círculos, sin horas. El color va
   SIEMPRE acompañado de símbolo + palabra. */
.sync-line {
  margin: 0;
  padding: 2px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--muted);
}

.sync-line-ok { color: var(--ob-text); }
.sync-line-busy { color: var(--amber-text); }
.sync-line-offline { color: var(--danger-strong); }

.piso-list {
  display: grid;
  gap: 12px;
}

/* Tarjeta de servicio activo */
.piso-card {
  padding: 16px;
  display: grid;
  gap: 12px;
  border-left: 4px solid var(--active);
}

.piso-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.piso-passenger {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.piso-meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
}

/* Tiempo transcurrido desde la asignación */
.piso-elapsed {
  margin: 0;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--amber-strong);
  background: var(--amber-soft-bg);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .95rem;
}

/* Mini-estado ⏱ 🛫 ✅: los hechos se pintan en verde */
.piso-stamps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.stamp-chip {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;
  border: 1.5px dashed var(--border);
  color: var(--muted);
}

.stamp-chip.done {
  border-style: solid;
  border-color: var(--sync-online-border);
  background: var(--ob-done-bg);
  color: var(--ob-text);
}

/* El botón gigante: el siguiente paso pendiente */
.piso-btn {
  width: 100%;
  min-height: 64px;
  font-size: 1.2rem;
  border-radius: 14px;
}

.piso-btn-received { border-color: var(--active); color: var(--amber-strong); border-width: 2px; }
.piso-btn-boarded { border-color: var(--ib); color: var(--ib-text); border-width: 2px; }
.piso-btn-ended {
  background: linear-gradient(135deg, var(--btn-end-a), var(--btn-end-b));
  border-color: transparent;
  color: var(--on-primary);
}

.piso-all-done {
  margin: 0;
  text-align: center;
  font-weight: 800;
  color: var(--ob-text);
}

/* Sección colapsable de completados */
.piso-done { padding: 0; overflow: hidden; }

.piso-done summary {
  cursor: pointer;
  font-weight: 700;
  padding: 14px 16px;
  color: var(--muted);
}

.piso-done .piso-list { padding: 0 12px 12px; }

.piso-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 6px;
  border-top: 1px solid var(--border);
  font-size: .9rem;
}

.piso-done-name { font-weight: 700; }
.piso-done-times { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

.piso-hint { text-align: center; }

.pwd-intro { margin: 0 0 14px; color: var(--muted); }