/* Tema oscuro (por defecto): tanto sin atributo data-theme como con
   data-theme="oscuro" explícito. Cada color de marca/estado trae también su
   variante "-rgb" (componentes sin la función rgb()) para poder usarlo con
   transparencia vía rgba(var(--x-rgb), alpha) sin fijar un color a mano que
   luego el tema claro no podría sobrescribir. */
:root {
  --bg: #100e0a;
  --bg-rgb: 16, 14, 10;
  --surface: #1a1611;
  --surface-hover: #221d16;
  --border: #2e2820;
  --gold: #c6a15b;
  --gold-rgb: 198, 161, 91;
  --gold-light: #d9bc7f;
  --text: #f2ece0;
  --text-muted: #a89f8f;
  --text-muted-rgb: 168, 159, 143;
  --danger: #d97060;
  --danger-rgb: 217, 112, 96;
  --success: #7fae6c;
  --success-rgb: 127, 174, 108;
  --info: #6ea8c6;
  --info-rgb: 110, 168, 198;
  --warning: #cf9a4a;
  --warning-rgb: 207, 154, 74;

  /* Texto encima de fondos de acento (botones dorados, etc). En oscuro el
     dorado es claro, así que hace falta texto oscuro encima; en el tema
     claro es al revés (ver más abajo) — por eso es variable y no un
     #1a1610 fijo repetido en cada regla. */
  --on-accent-text: #1a1610;

  /* Distintivo por tipo_servicio (borde + punto), independiente de los
     colores de estado de arriba para que no se confundan cuando aparecen
     juntos en la misma tarjeta. Tonos moderados, pensados para leerse como
     acento sobre --bg, no como color sólido. Reutilizable en cualquier
     pantalla que liste servicios (Hoy, tablero de reparto, etc). */
  --tipo-entrada: #7fae6c;
  --tipo-salida: #6ea8c6;
  --tipo-traslado: #cf9a4a;
  --tipo-disposicion: #a48fc7;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --radius: 14px;
  --tap-min: 48px;
}

/* Tema claro ("Modo exterior"): pensado para legibilidad bajo luz solar
   directa. Mismos nombres de variable que el tema oscuro — todo el resto
   del CSS los usa sin saber en qué tema está, así que no hace falta ningún
   otro cambio para que cualquier pantalla nueva funcione en ambos temas.
   Colores verificados con la fórmula de contraste WCAG contra --bg y
   --surface (todos ≥4.5:1, la mayoría 5.5-6:1 de margen). */
[data-theme='claro'] {
  --bg: #f7f3ec;
  --bg-rgb: 247, 243, 236;
  --surface: #ffffff;
  --surface-hover: #efe9db;
  --border: #ddd6c7;
  --gold: #8a6a2f;
  --gold-rgb: 138, 106, 47;
  /* Solo se usa como fondo de :hover de .btn — más oscuro que --gold a
     propósito (efecto "presionado"), no como color de texto en ningún
     sitio (para eso los usos ya apuntan a --gold directamente). */
  --gold-light: #6f5424;
  --text: #1a1712;
  --text-muted: #5a5448;
  --text-muted-rgb: 90, 84, 72;
  --danger: #b3402c;
  --danger-rgb: 179, 64, 44;
  --success: #3f6b32;
  --success-rgb: 63, 107, 50;
  --info: #316580;
  --info-rgb: 49, 101, 128;
  --warning: #8f5714;
  --warning-rgb: 143, 87, 20;

  --on-accent-text: #fdf8ee;

  --tipo-entrada: #3f6b32;
  --tipo-salida: #316580;
  --tipo-traslado: #8f5714;
  --tipo-disposicion: #6b5590;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

a {
  color: var(--gold);
}

.mono {
  font-family: var(--font-mono);
}

/* --- Layout --- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Deja hueco para la barra inferior fija en móvil; en escritorio no hace
     falta porque .bottom-nav se oculta. */
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  /* Salvaguarda mobile-first: si algún elemento puntual se desborda por el
     lado derecho (típicamente un control nativo de iOS Safari, ver
     input[type=date]/[type=time] más abajo), que quede recortado en vez de
     arrastrar scroll horizontal a toda la página. A propósito en .page y NO
     en html/body: overflow-x en <body> es un bug conocido de iOS Safari que
     rompe position:fixed en los descendientes (el bottom-nav se desplazaba
     con el scroll en vez de quedarse fijo). El overflow vertical lo sigue
     gestionando el navegador con normalidad (no se toca overflow-y). */
  overflow-x: hidden;
}

@media (min-width: 720px) {
  .page {
    padding-bottom: 0;
  }
}

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Centered auth screen --- */

.auth-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  animation: fade-in 0.35s ease;
}

.auth-card .brand {
  text-align: center;
  margin-bottom: 28px;
}

.auth-card .brand .gold {
  color: var(--gold);
}

.auth-card h1 {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

.auth-card p.subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* --- Forms --- */

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Campo del buscador global: más grande que un input normal, es el único
   elemento de esa pantalla — debe ser obvio dónde escribir. */
#buscar-input {
  min-height: 56px;
  font-size: 1.15rem;
}

.field select {
  appearance: none;
  /* El color va fijo dentro del SVG (data URI), no puede leer variables
     CSS — se sobreescribe la regla entera para el tema claro, ver abajo. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a89f8f'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23a89f8f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Mismo icono, con el --text-muted del tema claro (#5a5448) horneado en el
   SVG en vez del del tema oscuro. */
[data-theme='claro'] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235a5448'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%235a5448' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* input[type=date]/[type=time]: refuerzo explícito, no solo heredado de
   ".field input". El control nativo de iOS Safari puede intentar reservar
   más ancho del que le corresponde para su propio contenido (segmentos de
   fecha/hora); max-width/min-width evitan que ese ancho "deseado" gane
   sobre el 100% del padre, sea cual sea el contexto de layout (flex o
   bloque) en el que esté. */
.field input[type='date'],
.field input[type='time'] {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.field textarea {
  min-height: 90px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18);
}

.field .hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Campo que la extracción por IA (Nuevo servicio > Por IA) no pudo rellenar
   porque el texto no lo mencionaba — nunca se inventa un valor, se marca
   así para que se revise a mano. Desaparece solo en cuanto se toca el
   campo (ver marcarFaltante en servicio-form.js). */
.campo-ia-faltante label {
  color: var(--warning);
}

.campo-ia-faltante input,
.campo-ia-faltante select,
.campo-ia-faltante textarea {
  border-color: var(--warning);
  background: rgba(var(--warning-rgb), 0.08);
}

/* Campo + botón de acceso rápido (Google Maps en Origen/Destino,
   Flightradar24 en Número de vuelo). Solo se muestran en modo lectura del
   detalle de servicio (ver GtServicioForm.setFieldsDisabled) — en
   /servicios/nuevo se quedan ocultos porque nunca se llama a esa función. */
.field-with-action {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.field-with-action input {
  flex: 1;
  min-width: 0;
}

.field-action-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  min-height: var(--tap-min);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.2rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field-action-btn:hover {
  border-color: var(--gold);
  background: var(--surface-hover);
}

.field-action-btn[hidden] {
  display: none;
}

.field-row {
  display: flex;
  gap: 12px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

/* input[type=date] en iOS Safari tiene un ancho intrínseco propio para su
   texto ("18 ago 2026") que no siempre respeta el ancho asignado por flex
   en columnas estrechas, y puede pisar visualmente al campo vecino (Hora).
   En vez de perseguir un ancho exacto que dependa del idioma/formato del
   dispositivo, se apila en una sola columna en móvil — el mismo corte que
   ya separa mobile/escritorio en el resto de la app.
   display:block (no flex-direction:column) a propósito: Safari resuelve mal
   los anchos porcentuales de los hijos de un flex item en dirección columna
   (bug conocido de WebKit) y el input volvía a desbordarse por el lado
   derecho pese al width:100%. En bloque normal, width:100% + box-sizing:
   border-box se calculan sin ambigüedad. */
@media (max-width: 719.98px) {
  .field-row-fecha-hora {
    display: block;
  }

  .field-row-fecha-hora .field {
    min-width: 0;
    max-width: 100%;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 20px;
  background: var(--gold);
  color: var(--on-accent-text);
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: var(--gold-light);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn[hidden] {
  display: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.error-message {
  background: rgba(var(--danger-rgb), 0.12);
  border: 1px solid rgba(var(--danger-rgb), 0.4);
  color: var(--danger);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 18px;
  display: none;
}

.error-message.visible {
  display: block;
  animation: fade-in 0.2s ease;
}

/* Mismo contenedor que error-message, pero para avisos informativos (ej.
   "esta reserva es de ida y vuelta"), no fallos. */
.error-message.aviso {
  background: rgba(var(--info-rgb), 0.12);
  border-color: rgba(var(--info-rgb), 0.4);
  color: var(--info);
}

.banner-success {
  background: rgba(var(--success-rgb), 0.15);
  border: 1px solid rgba(var(--success-rgb), 0.4);
  color: var(--success);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 18px;
  animation: fade-in 0.3s ease;
}

/* --- App header --- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  /* En iPhone con notch/Dynamic Island, deja hueco para el safe area
     superior cuando la PWA corre en modo standalone (sin barra de Safari).
     env() sin soporte (escritorio/Android) devuelve 0px, así que no afecta. */
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}

.app-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-header .brand-mark {
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

.app-header .brand-mark .gold {
  color: var(--gold);
}

.app-header .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Nav principal (Diario/Histórico/Recursos/Cuenta): en escritorio vive como
   barra horizontal dentro del header; en móvil se oculta aquí porque pasa a
   ser la barra inferior fija (.bottom-nav), más cómoda para el pulgar. */
.top-nav {
  display: none;
}

/* En móvil, crear servicio ya vive en el botón central de .bottom-nav
   (bottom-nav-fab) — este icono del header sería un "+" duplicado. Solo
   hace falta en escritorio, donde .bottom-nav se oculta y no hay FAB que lo
   sustituya (mismo criterio que .top-nav arriba). */
.icon-link-nuevo-servicio {
  display: none;
}

@media (min-width: 720px) {
  .top-nav {
    display: flex;
    gap: 4px;
  }

  .icon-link-nuevo-servicio {
    display: inline-flex;
  }

  .top-nav-link {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .top-nav-link:hover {
    background: var(--surface-hover);
    color: var(--text);
  }

  .top-nav-link.active {
    color: var(--gold);
  }
}

/* Barra inferior fija: navegación principal en móvil, pensada para el
   pulgar (siempre visible, sin abrir/cerrar nada). Se oculta en escritorio,
   donde su lugar lo ocupa .top-nav dentro del header. */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  background: rgba(var(--bg-rgb), 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: 8px 4px 6px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.bottom-nav-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.bottom-nav-label {
  font-size: 0.7rem;
  font-weight: 500;
}

.bottom-nav-item.active {
  color: var(--gold);
}

/* Botón central "Nuevo servicio": sustituye al FAB flotante independiente
   que había antes. Sobresale por encima del borde superior de la barra
   (patrón habitual de acción principal centrada) — flex:none para no
   repartirse el espacio como los demás items, que sí son flex:1. */
.bottom-nav-fab {
  flex: none;
  align-self: center;
  width: 54px;
  height: 54px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  text-decoration: none;
  border: 3px solid var(--bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, transform 0.1s ease;
}

.bottom-nav-fab:active {
  transform: scale(0.94);
}

@media (min-width: 720px) {
  .bottom-nav {
    display: none;
  }
}

/* Icono de navegación reutilizable en el header (calendario, y lo que venga
   después: kanban, ajustes...). */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.2rem;
  transition: background 0.15s ease;
}

.icon-link:hover {
  background: var(--surface-hover);
}

.icon-link[hidden] {
  display: none;
}

.icon-link-badge {
  position: relative;
}

.icon-badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.icon-badge-count[hidden] {
  display: none;
}

/* Reset del chrome nativo de <button> para el toggle de tema, que reutiliza
   .icon-link (pensada originalmente para <a>). */
button.icon-link {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

.logout-btn {
  min-height: 40px;
  min-width: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.logout-btn:hover {
  background: var(--surface-hover);
  color: var(--danger);
}

/* --- Main content --- */

.main-content {
  flex: 1;
  padding: 24px 0 48px;
}

.page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title h1 {
  font-size: 1.5rem;
  margin: 0;
}

/* Navegación día anterior/siguiente de /hoy: mismo patrón "‹ label ›" que
   .cal-nav del calendario, reutilizando .icon-btn para las flechas. */
.dia-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Es un <a> a /calendario: mismo aspecto que el texto plano de antes, con
   el icono de calendario al lado como pista visual de que es pulsable. */
.dia-nav .today-date {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: capitalize;
  transition: color 0.15s ease;
}

.dia-nav .today-date:hover {
  color: var(--gold);
}

/* Copia del bloque de navegación al final del listado de servicios, para
   cambiar de día sin volver a subir en pantallas con muchos servicios. */
.dia-nav-bottom {
  margin-top: 20px;
  margin-bottom: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* --- Service cards --- */

.servicio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servicio-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  animation: fade-in 0.3s ease;
  transition: border-color 0.15s ease;
  text-decoration: none;
  color: inherit;
}

/* Solo se anima el gold en los otros 3 lados: el borde izquierdo lo dejamos
   fijo al color de tipo_servicio para que el distintivo no desaparezca al
   pasar el ratón por encima. */
.servicio-card:hover {
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  border-bottom-color: var(--gold);
}

.servicio-card .row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.servicio-card .row-top-left {
  display: flex;
  align-items: center;
}

.servicio-card .row-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.servicio-card .hora {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 600;
}

/* Distintivo de tipo_servicio: punto de color reutilizable en cualquier
   pantalla que muestre servicios (Hoy, tablero de reparto, etc). El mismo
   nombre de clase (.tipo-entrada, .tipo-salida, ...) también colorea el
   borde izquierdo de .servicio-card — una sola fuente de color por tipo. */
.tipo-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.tipo-entrada {
  --tipo-color: var(--tipo-entrada);
}
.tipo-salida {
  --tipo-color: var(--tipo-salida);
}
.tipo-traslado {
  --tipo-color: var(--tipo-traslado);
}
.tipo-disposicion {
  --tipo-color: var(--tipo-disposicion);
}

.tipo-dot.tipo-entrada,
.tipo-dot.tipo-salida,
.tipo-dot.tipo-traslado,
.tipo-dot.tipo-disposicion {
  background: var(--tipo-color);
}

.servicio-card.tipo-entrada,
.servicio-card.tipo-salida,
.servicio-card.tipo-traslado,
.servicio-card.tipo-disposicion {
  border-left-color: var(--tipo-color);
}

.servicio-card .ruta {
  font-size: 1rem;
  margin-bottom: 6px;
  line-height: 1.4;
}

.servicio-card .ruta .arrow {
  color: var(--text-muted);
  margin: 0 6px;
}

.servicio-card .meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.servicio-card .cliente {
  color: var(--text);
}

/* Fila de datos secundarios (pax, precio, vehículo, proveedor, cobro).
   Separada por un borde superior fino para diferenciarla de la info
   principal (hora/ruta/cliente) sin necesitar otra tarjeta ni acordeón. */
.servicio-card .detalles-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.servicio-card .detalles-row .dato {
  white-space: nowrap;
}

.servicio-card .detalles-row .separador {
  color: var(--border);
}

/* Fila aparte para accesorios de niños (asientos), justo debajo de
   detalles-row: mismo texto pequeño/gris, pero sin su línea divisoria
   propia — se lee como una continuación, no como otra sección distinta. */
.servicio-card .detalles-row-asientos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.servicio-card .detalles-row-asientos .dato {
  white-space: nowrap;
}

.servicio-card .detalles-row-asientos .separador {
  color: var(--border);
}

/* --- Estado badges --- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-pendiente {
  background: rgba(var(--text-muted-rgb), 0.15);
  color: var(--text-muted);
}

.badge-ofertado,
.badge-aceptado_por_colaborador,
.badge-confirmado_por_ofertante {
  background: rgba(var(--info-rgb), 0.15);
  color: var(--info);
}

.badge-asignado {
  background: rgba(var(--success-rgb), 0.15);
  color: var(--success);
}

.badge-completado {
  background: rgba(var(--gold-rgb), 0.18);
  color: var(--gold);
}

.badge-cancelado,
.badge-retirado {
  background: rgba(var(--danger-rgb), 0.15);
  color: var(--danger);
}

/* Indicador "Facturado" (solo admin — ver gtFacturadoBadgeHTML en
   servicio-display.js). Distinto de los badges de estado de arriba: usa
   --info para no confundirse visualmente con "Vendido"/completado. */
.badge-facturado {
  background: rgba(var(--info-rgb), 0.15);
  color: var(--info);
}

.badge-sin-facturar {
  background: rgba(var(--text-muted-rgb), 0.15);
  color: var(--text-muted);
}

/* Estado de cobro: siempre visible en la fila de detalles, en danger si
   falta por cobrar (la señal que más debe destacar) o en success si ya
   está pagado. */
.badge-pago-pendiente {
  background: rgba(var(--danger-rgb), 0.15);
  color: var(--danger);
}

.badge-pago-pagado {
  background: rgba(var(--success-rgb), 0.15);
  color: var(--success);
}

/* Vendido: el cliente paga al colaborador asignado, no a Juan, así que no
   es ni un cobro pendiente ni uno ya hecho por Juan — color neutro. */
.badge-pago-colaborador {
  background: rgba(var(--info-rgb), 0.15);
  color: var(--info);
}

/* --- Empty state --- */

.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--text-muted);
  animation: fade-in 0.4s ease;
}

.empty-state .icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.empty-state h2 {
  font-size: 1.2rem;
  color: var(--text);
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

/* --- Loading state --- */

.loading-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 720px) {
  .container {
    max-width: 760px;
  }
}

/* --- Formulario de nuevo servicio --- */

.form-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.form-back[hidden] {
  display: none;
}

.form-back:hover {
  color: var(--gold);
}

/* Acceso a la nota del día (tacógrafo) desde Hoy/fecha filtrada. Se resalta
   en dorado cuando ya existe una nota guardada ese día. */
.nota-dia-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nota-dia-btn:hover {
  border-color: var(--gold);
}

.nota-dia-btn.tiene-nota {
  border-color: var(--gold);
  color: var(--gold);
}

.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  animation: fade-in 0.3s ease;
}

.form-section h2 {
  font-size: 1.05rem;
  margin-bottom: 16px;
  color: var(--gold);
}

.form-section:last-of-type {
  margin-bottom: 24px;
}

/* Selector de proveedor: control segmentado (colaborador registrado vs
   texto libre). Solo el modo activo se envía; el otro se limpia. */
.segmented {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 12px;
}

.segmented button {
  flex: 1;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.segmented button.active {
  background: var(--gold);
  color: var(--on-accent-text);
}

.segmented button:disabled {
  color: var(--text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}

/* Checkbox tipo toggle, para "pagado" */
.toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
}

.toggle-field label {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle .track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s ease;
  cursor: pointer;
}

.toggle .track::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
}

.toggle input:checked + .track {
  background: rgba(var(--success-rgb), 0.25);
}

.toggle input:checked + .track::before {
  transform: translateX(20px);
  background: var(--success);
}

/* Steppers +/- para equipaje */
.stepper-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stepper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stepper .stepper-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stepper .stepper-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.stepper button {
  width: 40px;
  min-height: 40px;
  background: var(--bg);
  border: none;
  color: var(--gold);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.stepper button:hover {
  background: var(--surface-hover);
}

.stepper .stepper-value {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1rem;
}

/* Bloques dinámicos de niños */
.ninos-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nino-block {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: fade-in 0.2s ease;
}

.nino-block .field {
  margin-bottom: 0;
}

.nino-block .nino-numero {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding-right: 2px;
}

.nino-block .nino-edad {
  width: 90px;
  flex-shrink: 0;
}

.nino-block .nino-asiento {
  flex: 1;
  min-width: 0;
}

.pago-parte {
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  animation: fade-in 0.2s ease;
}

.pago-parte h3 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.pago-parte .field:last-child {
  margin-bottom: 0;
}

#pago-doble-suma-hint {
  font-size: 0.85rem;
  color: var(--warning);
}

/* Aviso no bloqueante (ej. descuadre entre las facturas de pago doble y los
   importes capturados en el servicio) — mismo tono que #pago-doble-suma-hint
   pero reutilizable en cualquier <p class="hint">. */
.hint-warning {
  color: var(--warning);
}

/* Botón de relleno rápido para un campo de texto libre (ej. causa de
   exención "operación intracomunitaria") — texto tipo enlace, sin el peso
   visual de un botón normal. */
.exento-causa-preset {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.78rem;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}

/* Bloque de factura de una parte de pago doble (Cliente/Proveedor), dentro
   de #factura-content — mismo estilo que .pago-parte del formulario de
   servicio, para que ambos se sientan coherentes. */
.factura-parte-bloque {
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
}

.factura-parte-bloque h3 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-submit-bar {
  position: sticky;
  /* Por encima de la barra inferior fija en móvil (si no, el botón de
     guardar quedaría tapado detrás de .bottom-nav). */
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  padding: 16px 0 20px;
}

@media (min-width: 720px) {
  .form-submit-bar {
    bottom: 0;
  }
}

/* --- Calendario --- */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-nav-label {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  text-transform: capitalize;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  border-color: var(--gold);
  background: var(--surface-hover);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.cal-day:hover {
  border-color: var(--gold);
}

.cal-day.outside {
  color: var(--text-muted);
  background: transparent;
}

.cal-day.today {
  border-color: var(--gold);
}

.cal-day-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.cal-day-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  min-height: 6px;
}

/* Punto de color + cantidad de ese tipo ese día (ej. "🟢2"), en vez de solo
   el punto: de un vistazo se ve cuántos servicios de cada tipo hay, sin
   entrar al día. El color del número y del punto salen de --tipo-color,
   heredado desde .tipo-entrada/.tipo-salida/... en este mismo elemento. */
.cal-tipo-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tipo-color);
}

.cal-day-dots .tipo-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  margin-right: 0;
  background: var(--tipo-color);
}

/* --- Detalle de servicio --- */

.btn-row {
  display: flex;
  gap: 12px;
}

.btn-row[hidden] {
  display: none;
}

.btn-row .btn {
  width: auto;
  flex: 1;
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(var(--danger-rgb), 0.4);
}

.btn-danger:hover {
  background: rgba(var(--danger-rgb), 0.12);
}

/* Menú "más opciones" (⋮) de la barra de acciones del detalle de servicio:
   agrupa las acciones secundarias (Eliminar, Copiar para colaborador) para
   que la barra fija solo muestre Editar/Duplicar directamente. */
.menu-mas-wrap {
  position: relative;
  flex: none;
}

.menu-mas-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.menu-mas-trigger:hover {
  border-color: var(--gold);
  background: var(--surface-hover);
}

/* Se abre hacia arriba: la barra está pegada al borde inferior de la
   pantalla, así que hacia abajo no habría sitio. */
.menu-mas-dropdown {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.menu-mas-dropdown[hidden] {
  display: none;
}

.menu-mas-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.menu-mas-item:hover {
  background: var(--surface-hover);
}

.menu-mas-item[hidden] {
  display: none;
}

.menu-mas-item-danger {
  color: var(--danger);
}

/* Barra de acciones fija del detalle de servicio (Editar/Eliminar en modo
   lectura, Guardar/Cancelar en modo edición): siempre visible sin tener que
   hacer scroll hasta el final. En móvil va justo encima de .bottom-nav (que
   ya reserva su propio safe-area-inset-bottom debajo); en escritorio, donde
   .bottom-nav no existe, baja hasta el borde real y añade su propio
   safe-area-inset-bottom. */
.detalle-actions-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 16;
  background: rgba(var(--bg-rgb), 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}

.detalle-actions-fixed[hidden] {
  display: none;
}

.detalle-actions-fixed .btn-row {
  padding: 12px 20px;
}

@media (min-width: 720px) {
  .detalle-actions-fixed {
    bottom: 0;
  }

  .detalle-actions-fixed .btn-row {
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* Hueco para que la última sección (Historial) no quede tapada detrás de
   la barra de acciones fija de arriba. */
#detalle-content {
  padding-bottom: 90px;
}

.page-title .badge {
  margin-left: 10px;
}

.historial-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.historial-item {
  position: relative;
  padding-left: 18px;
  border-left: 2px solid var(--border);
}

.historial-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.historial-item .historial-transicion {
  font-size: 0.9rem;
  color: var(--text);
}

.historial-item .historial-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.historial-item .historial-nota {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Modal de confirmación (eliminar) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
  animation: fade-in 0.15s ease;
}

/* display:flex de arriba anula el display:none que el navegador aplica por
   defecto al atributo [hidden] (una regla de autor gana sobre la del
   user-agent aunque tengan la misma especificidad); sin esto el modal se
   ve siempre, ignorando `hidden`. */
.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 380px;
}

.modal-card-wide {
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
}

.plantilla-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.plantilla-select-item {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.plantilla-select-item:hover {
  border-color: var(--gold);
}

.modal-card h2 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.modal-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
}

/* Indicador de "día con nota" (tacógrafo) sobre la celda del calendario,
   junto a los puntos de color de tipo de servicio. La nota en sí se ve/edita
   desde /hoy?fecha=..., no aquí (ver .nota-dia-btn). */
.cal-day-nota-flag {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.65rem;
  line-height: 1;
}

/* --- Índice de Recursos --- */

.recursos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 720px) {
  .recursos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.recurso-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  text-align: center;
  transition: border-color 0.15s ease;
}

.recurso-card:hover {
  border-color: var(--gold);
}

.recurso-card[hidden] {
  display: none;
}

.recurso-icon {
  font-size: 2rem;
}

.recurso-label {
  font-size: 0.9rem;
  font-weight: 500;
}

/* --- Catálogos simples de Recursos (listas + alta/edición admin) --- */

.catalogo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.catalogo-item.inactivo {
  opacity: 0.55;
}

.catalogo-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.catalogo-item-nombre {
  font-weight: 600;
}

.catalogo-item-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.catalogo-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.catalogo-item-actions .icon-btn {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

/* --- Marcadores de plantillas de mensaje --- */

.marcadores-box {
  margin: -8px 0 16px;
}

.marcadores-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.marcador-chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.marcador-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.catalogo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aviso-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.aviso-badge.caducado {
  background: rgba(var(--danger-rgb), 0.15);
  color: var(--danger);
}

.aviso-badge.proximo {
  background: rgba(var(--warning-rgb), 0.18);
  color: var(--warning);
}

/* --- Histórico --- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}

.stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.stat-card .stat-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--gold);
}

.stat-card.alerta .stat-value {
  color: var(--danger);
}

.desglose-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.desglose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.desglose-row:last-child {
  border-bottom: none;
}

.desglose-row .valor {
  font-family: var(--font-mono);
  color: var(--gold);
}

.chart-wrap {
  position: relative;
  height: 220px;
}

.tabs-nav {
  margin-bottom: 16px;
}

.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tabla-historico {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
}

.tabla-historico th,
.tabla-historico td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.tabla-historico th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tabla-historico tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.tabla-historico tbody tr:hover {
  background: var(--surface-hover);
}

.tabla-historico tbody tr:last-child td {
  border-bottom: none;
}

.tabla-historico .mono {
  color: var(--gold);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Página pública de verificación (/verificar/:id) --- */

.verificacion-container {
  padding-top: 24px;
  padding-bottom: 48px;
  max-width: 560px;
}

.verificacion-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--success-rgb), 0.15);
  color: var(--success);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.verificacion-container h1 {
  font-size: 1.6rem;
  margin-bottom: 2px;
}

.verificacion-container .form-section p {
  margin: 6px 0;
  font-size: 0.95rem;
}

.verificacion-lista {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.95rem;
}

.verificacion-lista li {
  margin: 4px 0;
  color: var(--text);
}

.verificacion-lista li::marker {
  color: var(--gold);
}

.verificacion-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 16px;
}

/* Legible en papel/impresión: fondo blanco, texto negro, sin chrome de app. */
@media print {
  body {
    background: #ffffff;
    color: #000000;
  }
  .app-header,
  .verificacion-badge,
  a.btn {
    display: none;
  }
  .form-section {
    background: #ffffff;
    border: 1px solid #999999;
  }
  .form-section h2,
  .verificacion-container h1 {
    color: #000000;
  }
  .hint,
  .verificacion-footer {
    color: #333333;
  }
}

/* --- Tablero de despacho (kanban) --- */

/* El resto de páginas usan .container a 640px (una sola columna de
   formulario); el tablero necesita todo el ancho disponible para que
   quepan varias columnas de golpe. */
.container-kanban {
  max-width: none;
  padding: 0 16px;
}

.kanban-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  text-align: center;
}

.kanban-toolbar .dia-nav {
  margin: 0;
}

#fecha-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  padding: 8px 10px;
}

.kanban-actualizado {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}

.kanban-columna {
  flex: 0 0 300px;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
}

.kanban-col-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
}

.kanban-col-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Selector de matrícula (punto 1): debajo del nombre, solo en columnas de
   conductor_interno — ver columnaVehiculoHTML en kanban.js. */
.kanban-col-vehiculo {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 6px 8px;
}

.kanban-col-sin-vehiculo {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* Asa de arrastre de la columna entera (punto 3): la columna fija "Sin
   asignar / Bolsa" no la tiene (ver columnaHeaderHTML en kanban.js), así
   que no hay forma de agarrarla para moverla. */
.kanban-col-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
}

.kanban-col-handle:active {
  cursor: grabbing;
}

.kanban-col-ghost {
  opacity: 0.5;
}

.kanban-col-nombre {
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-col-count {
  background: rgba(var(--gold-rgb), 0.15);
  color: var(--gold);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
}

.kanban-col-quitar {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
  border-radius: 6px;
  line-height: 1;
}

.kanban-col-quitar:hover {
  color: var(--danger);
  background: rgba(var(--danger-rgb), 0.12);
}

.kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
}

.kanban-col-vacia {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.kanban-card {
  cursor: grab;
}

.kanban-card .servicio-card {
  animation: none; /* el fade-in de .servicio-card compite mal con el redibujado cada 25s */
}

.kanban-card-ghost {
  opacity: 0.4;
}

.kanban-modal-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 20px;
}

.kanban-anadir-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}

.kanban-anadir-item:hover {
  border-color: var(--gold);
}

.kanban-anadir-rol {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.kanban-anadir-item:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 640px) {
  .kanban-columna {
    flex-basis: 260px;
    width: 260px;
  }
}