/* ============================================================
   Estilos compartidos por todas las páginas.
   ============================================================ */
:root {
  --primary-color: #546E7A;
  --primary-dark: #455a64;
  --primary-light: #78909c;
}

body {
  background: #f4f4f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ---- Login ---- */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.login-box {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: center;
  max-width: 350px;
  width: 100%;
}
.login-logo {
  width: 140px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 6px;
  display: block;
}
.login-box input {
  width: 85%;
  padding: 12px;
  margin: 10px 0;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  outline: none;
}
.login-box button {
  width: 93%;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  border: none;
}
.login-box button:hover { background-color: var(--primary-dark); }
.login-box button:disabled { opacity: 0.75; cursor: default; }
.error-msg { color: red; font-size: 14px; margin-top: 10px; display: none; }

/* Spinner simple sin depender de Bootstrap (para index.html, que no lo carga) */
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-inline 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes spin-inline { to { transform: rotate(360deg); } }

/* Rueda de carga más grande, en degradé con los colores de uystart (para
   pantallas que tardan un momento en traer datos reales — Viajes/Planificar,
   Navegación — y no tenían ningún indicador mientras tanto, quedaban en
   blanco). El "anillo" se logra con un conic-gradient + una máscara radial
   que recorta el centro, así el grosor no depende de border-image (poco
   consistente entre navegadores). */
.uystart-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 12px;
  color: var(--primary-color);
}
.uystart-loader {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--primary-light), var(--primary-color), var(--primary-dark), var(--primary-light));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: uystart-spin 0.9s linear infinite;
}
@keyframes uystart-spin { to { transform: rotate(360deg); } }

/* Flechita de los acordeones de Viajes UPM (resumen, filtros/acciones):
   Bootstrap ya pone aria-expanded en el botón toggle solo, así que la
   rotación es puro CSS, sin JS aparte para escuchar el show/hide del collapse. */
.uystart-accordion-toggle i { transition: transform 0.2s ease; }
.uystart-accordion-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }

/* Logo del header: por defecto assets/favicon.png (cuadrado), pero nav.js lo
   reemplaza por el logo propio de la empresa si tiene uno cargado (ver
   GET /auth/logo y empresas.html, que es donde el rol Super lo sube) — un
   logo real casi nunca es cuadrado, así que se fija el alto y se deja el
   ancho libre con object-fit:contain en vez de forzarlo a 28x28 y
   deformarlo. */
.nav-brand-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.nav-offcanvas-logo { height: 32px; width: auto; max-width: 150px; object-fit: contain; }

/* El logo actual (Transporte Facal/ForeStart) tiene el fondo propio en
   #49656D, no exactamente --primary-color (#546E7A) — se pisa el color SOLO
   en la barra de arriba y el panel mobile (donde va el logo), con selector
   más específico que ".bg-primary-custom" en vez de tocar --primary-color:
   esa variable la usan botones/modales/badges de toda la app, cambiarla
   ahí correría el color de cosas que no tienen nada que ver con el logo. */
.navbar.bg-primary-custom { background-color: #49656D !important; }

/* ---- Menú principal (offcanvas en mobile, barra normal en desktop) ----
   En mobile el panel es un fondo claro con texto oscuro (más legible y
   "moderno" que el típico menú blanco sobre blanco); en desktop, donde el
   offcanvas se vuelve parte de la barra de color, el texto pasa a blanco.
   Ver nav.js para el markup. Fondo plano (no gradiente) a propósito: un
   logo con fondo propio sólido (ver nav-offcanvas-logo) solo queda sin
   costura si el fondo de atrás es el mismo color plano en todos lados, no
   un degradé que varía. */
#navMenu .offcanvas-header {
  background: #49656D;
}
#navMenu .offcanvas-title { color: #fff; font-weight: 600; }
#navMenu .btn-close { filter: invert(1) grayscale(100%) brightness(2); opacity: 0.85; }
#navMenu .btn-close:hover { opacity: 1; }

#navMenu .offcanvas-body { display: flex; flex-direction: column; padding-top: 0.5rem; }

#navMenu .navbar-nav .nav-link,
#navMenu .navbar-nav .dropdown-toggle {
  color: var(--primary-dark);
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  margin-bottom: 2px;
  font-size: 1.05rem;
}
#navMenu .navbar-nav .nav-link:hover,
#navMenu .navbar-nav .nav-link.active,
#navMenu .navbar-nav .dropdown-toggle.active {
  background-color: rgba(84, 110, 122, 0.1);
  font-weight: 600;
}
#navMenu .dropdown-menu {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0 0 0 1.25rem;
}
#navMenu .dropdown-item {
  color: var(--primary-color);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 1rem;
}
#navMenu .dropdown-item:hover,
#navMenu .dropdown-item.active {
  background-color: rgba(84, 110, 122, 0.1);
  color: var(--primary-dark);
  font-weight: 600;
}

#navMenu .nav-user-footer {
  margin-top: auto;
  border-top: 1px solid #e9ecef;
  padding-top: 14px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#navMenu .nav-user-footer .user-name { color: #6c757d; font-size: 0.9rem; }
#navMenu .nav-user-footer a { color: var(--primary-dark); text-decoration: none; font-weight: 600; }
#navMenu .nav-user-footer a:hover { color: var(--primary-color); }

@media (min-width: 992px) {
  #navMenu .offcanvas-body { flex-direction: row; align-items: center; padding-top: 0; }
  #navMenu .navbar-nav { flex-direction: row; }

  #navMenu .navbar-nav .nav-link,
  #navMenu .navbar-nav .dropdown-toggle {
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    font-size: 1rem;
  }
  #navMenu .navbar-nav .nav-link:hover,
  #navMenu .navbar-nav .nav-link.active,
  #navMenu .navbar-nav .dropdown-toggle.active {
    background-color: rgba(255, 255, 255, 0.15);
  }
  #navMenu .dropdown-menu {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 0.5rem;
    margin-top: 0.35rem;
  }
  #navMenu .dropdown-item { color: var(--primary-dark); }

  #navMenu .nav-user-footer {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-left: 12px;
  }
  #navMenu .nav-user-footer .user-name { color: rgba(255,255,255,0.75); }
  #navMenu .nav-user-footer a { color: #fff; }
  #navMenu .nav-user-footer a:hover { color: rgba(255,255,255,0.8); }
}

/* Ícono hamburguesa (bi-list) más grande y con buen área táctil */
.navbar-toggler i.bi-list { font-size: 1.9rem; line-height: 1; }

/* ---- Colores / botones compartidos ---- */
.bg-primary-custom { background-color: var(--primary-color) !important; }
.btn-primary-custom { background-color: var(--primary-color); border-color: var(--primary-color); color: white; }
.btn-primary-custom:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: white; }
.btn-outline-primary-custom { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary-custom:hover { background-color: var(--primary-color); color: white; }
.text-primary-custom { color: var(--primary-color) !important; }

/* ---- Dashboard ---- */
.dashboard-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ---- Formularios: campos ---- */
.field-group {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid var(--primary-color);
}
.btn-icon { display: inline-flex; align-items: center; gap: 5px; }
.audio-field textarea { resize: vertical; }
.btn-mic.btn-mic-active {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important;
  animation: micPulse 1.2s infinite;
}
@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(220,53,69,.5); }
  70% { box-shadow: 0 0 0 10px rgba(220,53,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

#map { height: 300px; width: 100%; border-radius: 8px; margin-top: 15px; border: 1px solid #ced4da; }
.btn-sm-custom { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }

/* ---- Admin: builder de formularios (estilo Google Forms) ---- */
.form-list-item {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.form-list-item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
.pregunta-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-left: 4px solid var(--primary-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.pregunta-sub { border-left-color: #adb5bd; background: #f8f9fa; margin-bottom: 0; }

/* Árbol de sub-preguntas: línea vertical que conecta el campo padre con
   cada hijo (y con el botón "+" para agregar el próximo), como un
   explorador de archivos. */
.arbol-subpreguntas {
  margin-top: 12px;
  margin-left: 10px;
  padding-left: 20px;
  border-left: 2px solid #dee2e6;
}
.arbol-item { position: relative; margin-bottom: 10px; }
.arbol-item:last-child { margin-bottom: 0; }
.arbol-item::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -20px;
  width: 16px;
  height: 2px;
  background: #dee2e6;
}
/* Caja de condición dentro de una sub-pregunta: con qué opción(es) del
   padre aparece — la primera cosa que se ve al entrar a la card (a qué
   padre pertenece ya se ve por la indentación del árbol, no hace falta
   repetirlo acá). */
.condicion-box {
  background: #eef6ff;
  border: 1px solid #cfe2ff;
  border-radius: 8px;
  padding: 10px 12px;
}
.condicion-titulo { font-size: 0.85rem; font-weight: 600; color: #084298; }

/* Lista de opciones de un campo Lista/Radio: una por fila (no chips en
   línea), para que se lean de un vistazo cuando hay varias. */
.campo-opcion-item {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9rem;
}
.campo-opcion-item [data-action="quitar-opcion"] { cursor: pointer; color: #adb5bd; }
.campo-opcion-item [data-action="quitar-opcion"]:hover { color: #dc3545; }

.btn-agregar-subpregunta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed #adb5bd;
  border-radius: 8px;
  background: #fff;
  color: #6c757d;
  padding: 8px 14px;
  font-size: 0.875rem;
  line-height: 1;
}
.btn-agregar-subpregunta:hover { border-color: var(--primary-color); color: var(--primary-color); background: #f8f9fa; }

.drag-handle {
  cursor: grab;
  text-align: center;
  color: #adb5bd;
  padding: 0.25rem 0;
  font-size: 1.1rem;
}
.drag-handle:hover { color: var(--primary-color); }
.sortable-ghost { opacity: 0.4; }
.sortable-chosen .drag-handle { cursor: grabbing; }

/* ---- Admin ---- */
.form-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 15px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.form-header:hover { opacity: 0.9; }
.form-card { border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; border-radius: 12px; overflow: hidden; }
.status-badge { font-size: 0.8rem; padding: 5px 10px; border-radius: 20px; }

@media (max-width: 768px) {
  .btn-responsive { width: 100%; margin-bottom: 8px; }
  .field-group { padding: 12px; }
  .action-group { display: flex; flex-direction: column; gap: 5px; }
}

/* ============================================================
   VIAJES UPM — diseño portado del proyecto original de Apps Script
   (legacy-appsscript/ViajesUPM/Styles.html). Todo lo de acá abajo está
   scopeado a viajes.html (clases .estado-*, .mc-*, .tabla-viajes-upm) para
   no afectar el resto de las tablas del sitio.
   ============================================================ */
.chofer-select { font-size: 0.92rem !important; padding: 2px 6px !important; min-width: 80px !important; }
.descanso-insuficiente { background-color: #FFBFC8 !important; border-radius: 4px; }
.descanso-negativo { color: #e74c3c !important; }
.descanso-positivo { color: #288545 !important; }
.celda-ok { background-color: #DAF0E1 !important; }

/* Encabezados/celdas sin salto de línea — si no, "Nro. viaje" se ensancha
   de más y empuja "Carga" a cortarse. Scopeado a esta tabla nomás. */
.tabla-viajes-upm th, .tabla-viajes-upm td { white-space: nowrap; }
/* Tabla de escritorio: mismo tamaño de fuente que el desplegable de
   choferes (.chofer-select) y que la info/paginación de abajo, para que
   no se sienta más chica que el resto. .table-responsive de más arriba
   ya da scroll horizontal si en alguna pantalla angosta no entra todo.
   SOLO en escritorio (min-width) — en celular es la tarjeta mc-card la
   que manda, con sus propios tamaños de fuente (más grandes a propósito). */
@media (min-width: 577px) {
  .tabla-viajes-upm { font-size: 0.92rem; }
  .tabla-viajes-upm th, .tabla-viajes-upm td { padding: 0.4rem 0.55rem; }
  .tabla-viajes-upm .form-select-sm, .tabla-viajes-upm .btn-sm { font-size: 0.88rem; padding: 0.2rem 0.45rem; }
  .tabla-viajes-upm select.chofer-select { min-width: 110px; }
  #ultimaActualizacion, #upmPaginacionInfo { font-size: 0.9rem; }
}

/* Bloque de resumen (matrículas/predios) debajo de los filtros */
.upm-resumen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; margin-bottom: 4px; }
.upm-resumen-matricula { font-size: 0.92rem; font-weight: 400; padding: 1px 0; display: flex; align-items: center; gap: 8px; }
.upm-resumen-predio { font-size: 0.85rem; padding: 3px 0; }
.upm-resumen-predio-detalle { font-size: 0.78rem; padding-left: 14px; }
.upm-resumen-total { grid-column: 1 / -1; font-size: 0.92rem; font-weight: 600; padding-top: 4px; margin-top: 3px; border-top: 1px solid rgba(0,0,0,0.08); }

/* Móvil: en vez de dos columnas apretadas, una lista de a
   RESUMEN_UPM_POR_PAGINA matrículas con puntos abajo para pasar de página
   (como un carrusel) — se ve menos "vacío"/separado que el grid. */
.upm-resumen-lista-movil { display: flex; flex-direction: column; }
.upm-resumen-lista-movil .upm-resumen-matricula { padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.upm-resumen-dots { display: flex; justify-content: center; gap: 7px; margin: 8px 0 4px; }
.upm-resumen-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,0.15); }
.upm-resumen-dot.active { background: var(--primary-color, #546E7A); }

/* Mapa GPS — flecha tipo Waze: halo pulsante (indica "en vivo") de fondo,
   y encima la flecha en sí (color uystart, borde blanco fino), ver
   iconoFlechaGpsUPM/iconoFlechaNav. La transición de posición va en el
   ícono que Leaflet mueve (.upm-gps-arrow-icon); la rotación va en el
   <svg> (.upm-gps-arrow-svg) — así no compiten por el mismo transform. */
.upm-gps-arrow-icon { transition: transform 0.4s linear; }
.upm-gps-arrow-svg { transition: transform 0.4s linear; }
.upm-gps-arrow-halo {
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(84,110,122,0.35);
  animation: upm-gps-pulso 1.8s ease-out infinite;
}
@keyframes upm-gps-pulso {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.3); opacity: 0; }
}

/* Etiqueta de matrícula al lado de cada flecha en "Ver todos los camiones" */
.upm-flota-etiqueta {
  font-weight: 600; font-size: 0.75rem; padding: 1px 6px;
  background: var(--primary-color, #546E7A); color: #fff;
  border: none; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.upm-flota-etiqueta::before { border-right-color: var(--primary-color, #546E7A); }

/* Switch "GPS del camión / de este dispositivo" en color uystart en vez del
   azul de Bootstrap por defecto. */
.upm-switch-brand:checked { background-color: var(--primary-color, #546E7A); border-color: var(--primary-color, #546E7A); }
.upm-switch-brand:focus { border-color: var(--primary-color, #546E7A); box-shadow: 0 0 0 0.25rem rgba(84, 110, 122, 0.25); }

/* Banner rotativo de "Ver todos UPM", adentro del mapa abajo a la
   izquierda — mismo estilo discreto que el control de atribución de
   Leaflet (fondo blanco translúcido, letra chica), pero del otro lado. */
.upm-nav-banner-flota {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  font-size: 15px;
  padding: 4px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barra de controles de "Repasar recorrido guardado", tipo reproductor de
   video — bien discreta (fondo apenas visible, sin ocupar todo el ancho del
   mapa) para no tapar el mapa de abajo; la barra de progreso y el botón
   play/pausa (solo ícono, redondo) van en la misma línea. */
.upm-nav-controles-reproduccion {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  padding: 4px 6px;
  backdrop-filter: blur(1px);
}
.upm-nav-seek {
  width: 110px;
  opacity: 0.8;
}
.upm-nav-seek:hover, .upm-nav-seek:focus { opacity: 1; }
.upm-nav-btn-reproducir {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Botón "EN VIVO" al lado de play/pausa — mismo lenguaje que el indicador
   de directos de YouTube (punto apagado = ya se está viendo en vivo, punto
   encendido y pulsante = hay un repaso en curso o en pausa, tocá para
   volver), pero discreto y con los colores de uystart en vez del rojo de
   YouTube: sin fondo propio (se funde en el cartel translúcido de al
   lado), solo el color del texto/punto cambia. */
.upm-nav-btn-envivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: #8b9198;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 6px;
  border-radius: 14px;
  flex: none;
  cursor: pointer;
}
.upm-nav-dot-vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b7bcc2;
  display: inline-block;
}
.upm-nav-btn-envivo-activo { color: var(--primary-color, #546E7A); }
.upm-nav-btn-envivo-activo .upm-nav-dot-vivo {
  background: var(--primary-color, #546E7A);
  animation: upm-nav-pulso-vivo 1.4s ease-in-out infinite;
}
@keyframes upm-nav-pulso-vivo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84, 110, 122, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(84, 110, 122, 0); }
}

/* Estados — tabla de escritorio (celda de matrícula) */
.estado-planificado    { background-color: #DAF0E1 !important; }
.estado-enviajeaorigen { background-color: #DAF0E1 !important; }
.estado-enorigen       { background-color: #DDE6ED !important; }
.estado-cargado        { background-color: #C5D7E3 !important; }
.estado-endestino      { background-color: #B0C8D9 !important; }
.estado-cerrado        { background-color: #546E7A !important; color: white !important; }
.estado-cancelado      { background-color: #F6B26B !important; }
.checkbox-enviado      { background-color: #A6DBB7 !important; }

/* ---- Tarjetas móviles (mobile cards) ---- */
:root {
  --mc-bg-enviado   : #DAF0E1;
  --mc-bg-pendiente : #ffffff;
  --mc-bg-resto     : #f3f5f7;
}
.mc-card {
  display: block;
  border-radius: 12px;
  border: 0.5px solid rgba(0,0,0,0.09);
  border-top: none !important;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mc-td { padding: 0 !important; border: none !important; }
.table-striped tbody tr.mc-card:nth-of-type(odd),
.table-striped tbody tr.mc-card:nth-of-type(even),
.table-hover   tbody tr.mc-card:hover,
tbody tr.mc-card:nth-child(odd),
tbody tr.mc-card:nth-child(even) {
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
}
.mc-check            { width: 16px; height: 16px; accent-color: var(--primary-color); flex-shrink: 0; }
.mc-plate-text       { font-size: 1.05rem; font-weight: 500; color: #1a1a1a; letter-spacing: 0.3px; }
.mc-plate-text.muted { color: #999; }
.mc-select {
  font-size: 0.9rem !important;
  border: 0.5px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 2px 5px;
  background: #ffffff !important;
  color: #1a1a1a;
  min-width: 75px;
  height: auto;
  line-height: 1.3;
}
.mc-badge { font-size: 0.9rem; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.2px; }
.mc-icon-sm { font-size: 12px; color: var(--primary-color); flex-shrink: 0; }
.mc-chip { font-size: 0.80rem; padding: 2px 7px; border-radius: 12px; background: rgba(0,0,0,0.07); color: #444; border: 0.5px solid rgba(0,0,0,0.15); }
.mc-driver-line1 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mc-driver-name  { font-weight: 500; color: #1a1a1a; }
.mc-rest         { font-size: 0.68rem; color: #288545; display: flex; align-items: center; gap: 2px; }
.mc-ok-line      { font-size: 0.68rem; color: #666; padding-left: 2px; line-height: 1.2; }
.mc-route {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: #555;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 5px 9px;
  margin: 4px 12px 8px;
}
.mc-origin { font-weight: 500; color: #1a1a1a; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-dest   { flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; }
.mc-arrow  { font-size: 10px; color: #888; flex-shrink: 0; }
.mc-divider { height: 0.5px; background: rgba(0,0,0,0.07); margin: 0 12px; }
.mc-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0,0,0,0.03);
  border-top: 0.5px solid rgba(0,0,0,0.07);
}
.mc-act         { font-size: 0.68rem; color: #555; }
.mc-enviado-tag { font-size: 0.7rem; color: #555; display: flex; align-items: center; gap: 4px; }
.mc-enviado-tag i { font-size: 11px; color: #34a853; }

/* Badges por estado (tarjeta móvil) */
.mc-badge-planificado { background: #c8ebd2; color: #1a5c2a; }
.mc-badge-enviado     { background: #d0f0da; color: #1b5e20; }
.mc-badge-enorigen    { background: #e3eef5; color: #1a5070; }
.mc-badge-cargado     { background: #cce0ea; color: #0d3f59; }
.mc-badge-endestino   { background: #b8d0dc; color: #0a2e41; }
.mc-badge-cerrado     { background: #546E7A; color: #fff; }
.mc-badge-cancelado   { background: #fce8d5; color: #7d3a0a; }

/* Cerrado/Cancelado: fondo oscuro → texto blanco (clase .mc-dark-card en JS) */
.mc-dark-card .mc-plate-text       { color: #fff !important; }
.mc-dark-card .mc-plate-text.muted { color: rgba(255,255,255,0.7) !important; }
.mc-dark-card .mc-icon-sm          { color: rgba(255,255,255,0.7) !important; }
.mc-dark-card .mc-driver-name      { color: #fff !important; }
.mc-dark-card .mc-rest             { color: rgba(255,255,255,0.85) !important; }
.mc-dark-card .mc-ok-line          { color: rgba(255,255,255,0.7) !important; }
.mc-dark-card .mc-route            { background: rgba(255,255,255,0.1) !important; }
.mc-dark-card .mc-origin           { color: #fff !important; }
.mc-dark-card .mc-dest             { color: rgba(255,255,255,0.85) !important; }
.mc-dark-card .mc-arrow            { color: rgba(255,255,255,0.6) !important; }
.mc-dark-card .mc-footer           { background: rgba(255,255,255,0.08) !important; border-top-color: rgba(255,255,255,0.12) !important; }
.mc-dark-card .mc-act              { color: rgba(255,255,255,0.75) !important; }
.mc-dark-card .mc-enviado-tag      { color: rgba(255,255,255,0.85) !important; }
.mc-dark-card .mc-chip             { color: #fff !important; background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.2) !important; }
.mc-dark-card .mc-divider          { background: rgba(255,255,255,0.12) !important; }

.mc-btn-enviar {
  font-size: 0.75rem; font-weight: 500;
  padding: 4px 12px; border-radius: 8px;
  border: none; background: var(--primary-color); color: #fff;
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; transition: background 0.15s;
}
.mc-btn-enviar:hover    { background: var(--primary-dark); }
.mc-btn-enviar:disabled { background: #a0b4bc; cursor: not-allowed; }
.mc-btn-cancelar {
  font-size: 0.72rem;
  padding: 3px 10px; border-radius: 8px;
  border: 0.5px solid #e08642; background: transparent; color: #e08642;
  cursor: pointer; transition: background 0.15s;
}
.mc-btn-cancelar:hover { background: #fce8d5; }

/* Activar layout de tarjetas en móvil — SOLO dentro de .tabla-viajes-upm,
   para no tocar ninguna otra tabla del sitio. */
@media (max-width: 576px) {
  .tabla-viajes-upm.table { min-width: unset !important; width: 100% !important; table-layout: fixed !important; font-size: 0.85rem; }
  .tabla-viajes-upm thead { display: none !important; }
  .tabla-viajes-upm tbody { display: block !important; width: 100% !important; }
  .tabla-viajes-upm tbody tr.mc-card { display: block !important; width: 100% !important; box-sizing: border-box; }
  .tabla-viajes-upm tbody tr.mc-card td:not(.mc-td) { display: none !important; }
  .tabla-viajes-upm .mc-td { display: block !important; width: 100% !important; box-sizing: border-box !important; }

  /* Las mc-card ya son "la caja" — envolverlas en OTRA tarjeta Bootstrap
     (con su propio borde/sombra/padding) suma un margen que el diseño
     original no tenía (era una única caja de borde a borde). Se lo saca
     solo en celular; en escritorio la tarjeta exterior queda igual que el
     resto del sitio. */
  .tabla-viajes-upm-card { border: none !important; box-shadow: none !important; background: transparent !important; }
  .tabla-viajes-upm-card .table-responsive { padding: 0 !important; }
}

/* Look común de las tablas tipo DataTables (buscador, orden, exportar a
   Excel, paginado) usadas en varias pantallas de catálogo — ver
   assets/dataTableComun.js para el JS que arma la config. El wrapper que
   arma DataTables queda DENTRO de ".tabla-cc-wrapper" (un <div> puesto a
   mano alrededor del <table> en el HTML), así estas reglas aplican sin
   importar el id de cada tabla — antes esto se escribía a mano en cada
   pantalla apuntando a "#tablaX_wrapper".
   Prefijo ".tabla-cc-wrapper" (no solo ".tabla-cc") a propósito en el fondo
   del encabezado: DataTables 2.x trae su propia regla
   "table.table.dataTable>:not(caption)>*>*{background-color:var(--bs-table-bg)}"
   con DOS clases — con una sola clase (".tabla-cc thead th") esa regla le
   ganaba por especificidad y el encabezado quedaba blanco (texto blanco
   sobre blanco = invisible). Remitos no tenía este problema porque usaba
   un selector con #id, que siempre le gana a cualquier combinación de
   clases. */
.tabla-cc-wrapper .tabla-cc thead th {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
}
.tabla-cc-wrapper .tabla-cc td.dtr-control, .tabla-cc-wrapper .tabla-cc th.dtr-control {
  width: 22px; padding-left: 8px !important; padding-right: 0 !important;
}
.tabla-cc-wrapper .dt-search { text-align: left; }
.tabla-cc-wrapper .dt-search .form-control { width: 220px; }
.tabla-cc-wrapper .dt-length label { margin-right: 0.4rem; }
.tabla-cc-wrapper .dt-length select { width: auto; }
.tabla-cc-wrapper .pagination {
  --bs-pagination-color: var(--primary-color);
  --bs-pagination-hover-color: var(--primary-color);
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}

/* ---- Swal.fire "enriquecido" (confirmarSwal, ver assets/apiClient.js) ----
   Modelo único para confirmaciones de SweetAlert2 en toda la app: sin
   ícono, título como cabecera de color uystart con letra blanca y una cruz
   para cerrar (en vez del ícono redondo grande + título centrado por
   defecto de SweetAlert2), padding:0 en el popup (+ overflow:hidden) para
   que el título quede pegado a los bordes y las esquinas redondeadas del
   popup se lo recorten solas — el resto del contenido pone su propio
   padding. */
.swal-uystart-popup { font-size: 0.85rem; padding: 0 !important; border-radius: 0.4rem; overflow: hidden; }
.swal-uystart-title {
  background: var(--primary-color); color: #fff !important; margin: 0 !important;
  padding: 0.9rem 2.5rem 0.9rem 1.1rem; font-size: 1.05rem !important; text-align: left;
}
.swal-uystart-close {
  color: #fff !important; top: 0.55rem !important; right: 0.7rem !important;
  font-size: 1.6rem !important; width: 1.6rem !important; height: 1.6rem !important;
}
/* padding-bottom propio (no 0): mostrarSwal() no muestra botones (solo la
   cruz), así que .swal-uystart-actions no existe/no aporta espacio — sin
   esto el texto quedaba pegado al borde inferior del popup ("cortado").
   Cuando sí hay botones (confirmarSwal), el padding-top de .actions se
   suma al padding-bottom de acá — un poco más de aire entre el texto y los
   botones, no rompe nada. */
.swal-uystart-html { padding: 1rem 1.1rem 1.1rem !important; margin: 0 !important; }
.swal-uystart-actions { padding: 0.4rem 1.1rem 1.1rem !important; margin: 0 !important; }
.swal-uystart-actions button { font-size: 0.85rem; padding: 0.375rem 0.9rem; }