/* ============================================================
 * Embarques RD — Panel v2: compatibilidad con las vistas actuales
 *
 * Las vistas propias del panel (Dashboard, Órdenes, Mensajes, Mi perfil,
 * Administración…) están escritas con las clases .erd-pu-* de siempre.
 * En vez de reescribirlas todas de golpe, se siguen envolviendo en un
 * contenedor .erd-pu para que conserven sus estilos, y aquí se le quita
 * únicamente su comportamiento de "capa de aplicación a pantalla completa",
 * que ahora lo aporta la cáscara nueva.
 *
 * Así las 11 secciones se ven desde el primer día, y se van convirtiendo
 * al diseño nuevo de una en una sin prisa y sin romper nada.
 *
 * Esta hoja se carga DESPUÉS de erd-pu.css y de erd-panel-v2.css.
 * ============================================================ */

/* ---------- El contenedor viejo deja de ser la pantalla ---------- */
.erd-pu2 .erd-pu.erd-pu-legacy {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

/* Sin la cáscara vieja dentro: la aporta la nueva. */
.erd-pu2 .erd-pu-legacy > .erd-pu-side,
.erd-pu2 .erd-pu-legacy .erd-pu-top,
.erd-pu2 .erd-pu-legacy .erd-pu-tabbar,
.erd-pu2 .erd-pu-legacy .erd-pu-pagehead { display: none; }

/* El área de contenido vieja deja de desplazarse por su cuenta:
   quien desplaza ahora es el contenedor de la v2. */
.erd-pu2 .erd-pu-legacy .erd-pu-main,
.erd-pu2 .erd-pu-legacy .erd-pu-content {
  overflow: visible;
  height: auto;
  padding: 0;
  flex: none;
}

/* ---------- Módulos avanzados en iframe ---------- */
.erd-pu2-frame-wrap {
  background: var(--card, #fff);
  border-radius: var(--r-card, 4px);
  box-shadow: var(--shadow-card, 0 0 10px rgba(0,0,0,.1));
  overflow: hidden;
  /* Alto útil: ventana menos la barra superior, la cabecera y el respiro. */
  height: calc(100vh - var(--topbar-h, 42px) - 150px);
  min-height: 460px;
}

.erd-pu2-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Con pestañas encima el módulo dispone de menos alto. */
.erd-pu2 .panel-tabs + .erd-pu2-frame-wrap {
  height: calc(100vh - var(--topbar-h, 42px) - 190px);
}

@media (max-width: 900px) {
  .erd-pu2-frame-wrap,
  .erd-pu2 .panel-tabs + .erd-pu2-frame-wrap { height: calc(100vh - 200px); }
}

/* ============================================================
 * Filtro desplegable con el aspecto del diseno
 *
 * En el diseno los filtros son texto azul con una flechita, no cajas.
 * Aqui tienen que FUNCIONAR de verdad, asi que por debajo son un
 * <select> nativo al que se le quita toda su apariencia.
 * ============================================================ */
.erd-pu2 .panel-filter--select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.erd-pu2 .panel-filter--select select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-weight: 600;
  padding: 0 2px 0 0;
  cursor: pointer;
  outline: none;
}

.erd-pu2 .panel-filter--select select:focus-visible {
  outline: 2px solid var(--navy-l);
  outline-offset: 2px;
  border-radius: 2px;
}

.erd-pu2 .panel-filter--select i { font-size: 9px; color: var(--link); pointer-events: none; }

/* El pie de la lista alinea el contador a la izquierda y el boton a la derecha. */
.erd-pu2 .panel-pagination { display: flex; align-items: center; gap: 12px; }
.erd-pu2 .panel-pagination #erd-pu-ocount { margin-right: auto; }

/* La ficha v2 pone su propia accion de volver en la cabecera de pagina,
   asi que el enlace que trae la ficha de siempre sobra. */
.erd-pu2 .erd-pu-legacy--od > .erd-pu-back { display: none; }

/* Linea de contacto bajo el titulo (ficha de orden y Mi perfil). */
.erd-pu2 .panel-subtitle {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ============================================================
 * Ficha de orden: barra de acciones
 *
 * La cabecera v2 ya muestra el numero de orden, sus pastillas y la
 * linea de contacto, asi que el titulo que repite la ficha de siempre
 * sobra. Lo que SI se conserva es la fila de controles (cambiar estado,
 * cancelar, asignar), porque estan cableados al JavaScript del panel y
 * mover eso de sitio es justo lo que rompe cosas sin avisar.
 *
 * Aqui solo se esconde lo duplicado y la fila se presenta como la barra
 * de acciones del diseno: alineada a la derecha, sin adornos.
 * ============================================================ */
.erd-pu2 .erd-pu-legacy--od .erd-pu-od-job,
.erd-pu2 .erd-pu-legacy--od .erd-pu-od-head > div:first-child { display: none; }

.erd-pu2 .erd-pu-legacy--od .erd-pu-od-head {
  justify-content: flex-end;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.erd-pu2 .erd-pu-legacy--od .erd-pu-od-headright {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* El selector de estado.
 *
 * Ojo: el panel sustituye los <select> nativos por un desplegable propio
 * (.erd-pu-selbox) y esconde el original, asi que estilizar el <select>
 * no cambia nada de lo que se ve. Hay que apuntar al sustituto.
 * Su menu vive en <body>, fuera del contenedor, por eso lleva su propia
 * regla sin el prefijo .erd-pu2. */
.erd-pu2 .erd-pu-legacy--od .erd-pu-selbox {
  border-radius: var(--r-btn);
  padding: 7px 11px;
  min-height: 33px;
  font-size: 12.5px;
  font-weight: 600;
}

.erd-pu2 .erd-pu-legacy--od .erd-pu-selwrap { width: auto; }

/* El menu desplegable se inserta en <body>, fuera del contenedor, asi que
   su regla NO puede llevar el prefijo .erd-pu2. Se acota por su propia clase. */
.erd-pu-selmenu { border-radius: 4px; }
.erd-pu-selmenu .erd-pu-selmenu-opt { font-size: 12.5px; }

/* Estado activo del desplegable propio (al pasar el raton, enfocar o abrir).
 *
 * El tema (Astra) pinta CUALQUIER <button> de navy en :hover/:focus, y la
 * base del diseno (`.erd-pu2 button { color: inherit }`) dejaba el texto
 * heredado, oscuro: el "+1" del telefono salia navy sobre navy (captura de
 * Manuel, 2/9/2026). Aqui el estado es explicito: fondo navy, texto y
 * flecha en blanco. Vale para todos los selects del panel (estado, codigo
 * de pais, producto, cliente, metodo de pago...). */
.erd-pu2 .erd-pu-selbox:hover,
.erd-pu2 .erd-pu-selbox:focus,
.erd-pu2 .erd-pu-selwrap.is-open .erd-pu-selbox {
  background: var(--navy, #1e3a5f);
  border-color: var(--navy, #1e3a5f);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, .16);
}
.erd-pu2 .erd-pu-selbox:hover .erd-pu-selbox-lbl,
.erd-pu2 .erd-pu-selbox:focus .erd-pu-selbox-lbl,
.erd-pu2 .erd-pu-selwrap.is-open .erd-pu-selbox .erd-pu-selbox-lbl,
.erd-pu2 .erd-pu-selbox:hover .erd-pu-selbox-car,
.erd-pu2 .erd-pu-selbox:focus .erd-pu-selbox-car,
.erd-pu2 .erd-pu-selwrap.is-open .erd-pu-selbox .erd-pu-selbox-car { color: #fff; }

/* ============================================================
 * El reseteo de botones del diseno no debe pisar a las vistas de siempre
 *
 * erd-panel-v2.css trae `.erd-pu2 button { color: inherit }` como base.
 * Esa regla tiene mas peso que las de erd-pu.css (`.erd-pu-btn`, etc.),
 * asi que dentro del panel nuevo los botones de confirmar, cancelar y
 * demas perdian su color y salian con el del texto.
 *
 * Aqui se les devuelve el suyo. Se apunta a las clases concretas para no
 * tocar los botones del diseno, que si deben heredar.
 * ============================================================ */
/* Cada uno con SU color, no todos blanco. El de eliminar es de texto rojo
 * sobre fondo blanco: ponerle texto blanco lo dejaba invisible, y en el
 * Directorio se veian recuadros vacios donde debia estar la papelera. */
.erd-pu2 .erd-pu-btn,
.erd-pu2 .erd-pu-cfm-actions button { color: #fff; }

.erd-pu2 .erd-pu-btn-ghost {
  background: #eef3f9;
  color: var(--navy);
}

/* Botones verdes de confirmar ("Marcar pagado", "Confirmar" del crew):
 * mismo problema, el reseteo les dejaba las letras oscuras sobre verde
 * (captura de Manuel, 2/9/2026). Texto e icono en blanco, tambien al
 * pasar el raton o enfocar (el tema intenta pintarlos navy en :hover). */
.erd-pu2 .erd-pu-btn-confirm,
.erd-pu2 .erd-pu-btn-confirm i { color: #fff; }
.erd-pu2 .erd-pu-btn-confirm:hover,
.erd-pu2 .erd-pu-btn-confirm:focus { background: #15803d; color: #fff; }

/* Pestanas activas del crew (Pickups / Deliveries) son <button>: mismo reseteo. */
.erd-pu2 .erd-pu-tab.is-active { color: #fff; }

.erd-pu2 .erd-pu-btn-danger {
  background: #fff;
  color: #dc3545;
  border: 1px solid #f1c2c7;
}
.erd-pu2 .erd-pu-btn-danger:hover { background: #fee2e2; }

/* ============================================================
 * Quién lleva la barra de desplazamiento
 *
 * El contenedor .erd-pu2 es una capa fija a pantalla completa y era
 * quien desplazaba. Su barra se dibuja pegada al borde derecho de la
 * ventana... justo encima de la barra superior, que tambien es fija.
 * Resultado: el avatar del usuario quedaba cortado por la mitad.
 *
 * Ahora desplaza el CONTENIDO. Asi la barra empieza por debajo de la
 * barra superior y a la derecha del rail, sin tapar nada.
 * ============================================================ */
.erd-pu2 { overflow: hidden; }

.erd-pu2 .panel-main {
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Un respiro entre el ultimo icono y el borde. */
.erd-pu2 .panel-topbar { padding-right: 14px; }

/* ============================================================
 * El tema no puede deformar los botones del panel
 *
 * Astra estiliza TODOS los <button> de la pagina con
 * `padding: 15px 30px`. El diseno no declara relleno para el avatar,
 * las herramientas de la barra, la hamburguesa ni las casillas, asi
 * que el del tema se colaba: el avatar salia como un ovalo de 60x30
 * en vez de un circulo de 28, y la inicial quedaba cortada.
 *
 * Se toca SOLO el relleno, y solo en los que no traen el suyo: los
 * demas botones del diseno ya lo declaran y no se rozan.
 * ============================================================ */
.erd-pu2 .panel-avatar,
.erd-pu2 .panel-tool,
.erd-pu2 .panel-hamburger,
.erd-pu2 .panel-checkbox {
  padding: 0;
  line-height: 1;
  min-width: 0;
  border: 0;
}

/* ============================================================
 * Ajuste fino contra el sistema de referencia
 *
 * Valores medidos EN VIVO sobre app.smartmoving.com a 1440x900
 * (28/08/2026). No son gustos: es lo que ese sistema tiene puesto.
 * Se ponen aqui y no en erd-panel-v2.css porque esa hoja se genera
 * automaticamente desde el diseno y se sobrescribe al recompilar.
 * ============================================================ */

/* La barra superior de la referencia mide 56, no 42. Todo lo demas
   (rail, contenido, menus) se coloca a partir de esta variable, asi
   que cambiarla aqui basta. */
.erd-pu2 { --topbar-h: 56px; }

/* Titulo de pagina: 32/42 en peso ligero. */
.erd-pu2 .panel-title { font-size: 32px; line-height: 42px; }

/* Antetitulo gris sobre el titulo (HOME, ORDENES, DESPACHO...). */
.erd-pu2 .panel-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .64);
  margin: 0 0 1px;
}

/* Titulo de tarjeta: gris y sin negrita, no navy en negrita. */
.erd-pu2 .panel-card-title { font-size: 16px; font-weight: 400; color: #5c5c5c; }

/* ---------- La tira de indicadores ----------
   En la referencia los cuatro indicadores son UNA tarjeta partida por
   separadores finos, con la cifra grande y del color de su icono. */
.erd-pu2 .panel-kpi-strip {
  display: flex;
  align-items: stretch;
  padding: 0;
  margin: 0 0 14px;
}

.erd-pu2 .panel-kpi-strip .panel-kpi {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.erd-pu2 .panel-kpi-strip .panel-kpi + .panel-kpi {
  border-left: 1px solid var(--border);
}

.erd-pu2 .panel-kpi-strip .panel-kpi-value {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
}

.erd-pu2 .panel-kpi--green  .panel-kpi-value { color: #2f8f47; }
.erd-pu2 .panel-kpi--indigo .panel-kpi-value { color: #3730a3; }
.erd-pu2 .panel-kpi--gold   .panel-kpi-value { color: #96701c; }
.erd-pu2 .panel-kpi--navy   .panel-kpi-value { color: var(--navy); }
.erd-pu2 .panel-kpi-strip .panel-kpi-value em { color: inherit; opacity: .55; }

/* En pantallas estrechas la tira se parte en dos filas en vez de
   apretar cuatro cifras de 32px en un palmo. */
@media (max-width: 1100px) {
  .erd-pu2 .panel-kpi-strip { flex-wrap: wrap; }
  .erd-pu2 .panel-kpi-strip .panel-kpi { flex: 1 1 45%; }
  .erd-pu2 .panel-kpi-strip .panel-kpi:nth-child(3) { border-left: 0; }
  .erd-pu2 .panel-kpi-strip .panel-kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 620px) {
  .erd-pu2 .panel-kpi-strip .panel-kpi { flex: 1 1 100%; border-left: 0; }
  .erd-pu2 .panel-kpi-strip .panel-kpi + .panel-kpi { border-top: 1px solid var(--border); }
}

/* ---------- Las tablas no llevan rejilla ----------
 * El tema (Astra) le pone a TODA tabla de la pagina un borde de 0.8px en
 * cada celda, incluido el lateral. Resultado: los listados del panel salian
 * cuadriculados como una hoja de calculo. El sistema de referencia no dibuja
 * ni una sola linea vertical: separa las columnas con espacio y solo subraya
 * las filas.
 *
 * Aqui se quitan las verticales que mete el tema y se respetan las
 * horizontales que si define el diseno.
 */
.erd-pu2 table,
.erd-pu2 table > thead > tr > th,
.erd-pu2 table > tbody > tr > td,
.erd-pu2 table > tbody > tr > th {
  border-left: 0;
  border-right: 0;
}

/* La tabla de resumen del dashboard va del todo limpia. */
.erd-pu2 .panel-activity,
.erd-pu2 .panel-activity th,
.erd-pu2 .panel-activity td { border: 0; }
.erd-pu2 .panel-activity td,
.erd-pu2 .panel-activity th { padding: 6px 14px; }

/* Filas menos apretadas: la referencia respira mucho mas (53px por fila).
   No se copia entero para no perder de vista media pantalla de ordenes,
   pero se sube de 8 a 11 para acercarse. */
.erd-pu2 .panel-table tbody td { padding: 11px 12px; }
.erd-pu2 .panel-table thead th { padding: 10px 12px; }

/* El antetitulo que ademas es enlace de vuelta (ficha de orden). */
.erd-pu2 .panel-eyebrow--back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--link);
}
.erd-pu2 .panel-eyebrow--back:hover { text-decoration: underline; }
.erd-pu2 .panel-eyebrow--back i { font-size: 11px; }

/* ============================================================
 * DESPACHO — vistas nuevas
 *
 * Calendario de recursos, Confirmacion de trabajos y Confirmacion
 * de crew. Copian la forma del sistema de referencia con los datos
 * que Embarques si tiene: dia y crew. No hay rejilla de horas ni
 * filas por camion porque no existe ni la hora ni el camion.
 * ============================================================ */

/* Flechas de mes pegadas al titulo, como en la referencia. */
.erd-pu2 .panel-monthnav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  vertical-align: 4px;
}
.erd-pu2 .panel-monthnav:hover { background: #eaeff6; color: var(--navy); }
.erd-pu2 .panel-monthname { margin-left: 8px; }

/* Renglon de resumen sobre la tarjeta. */
.erd-pu2 .panel-dispcal-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.erd-pu2 .panel-dispcal-bar b { color: var(--text-strong); font-weight: 600; }
.erd-pu2 .panel-dispcal-bar b.is-alert { color: #b4590f; }
.erd-pu2 .panel-dispcal-bar > a { margin-left: auto; }

/* ---------- Rejilla del mes ---------- */
.erd-pu2 .panel-dispcal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.erd-pu2 .panel-dispcal-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
  padding: 8px 10px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}
.erd-pu2 .panel-dispcal-day:hover { background: #f7f9fc; }
.erd-pu2 .panel-dispcal-day.is-out { background: #fbfcfe; color: var(--muted-2); }
.erd-pu2 .panel-dispcal-day.is-out .panel-dispcal-num { color: var(--muted-2); }

.erd-pu2 .panel-dispcal-head { display: flex; align-items: center; gap: 6px; }
.erd-pu2 .panel-dispcal-num {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--text-strong);
}
.erd-pu2 .panel-dispcal-dow { font-size: 9px; letter-spacing: .8px; color: var(--muted); }
.erd-pu2 .panel-dispcal-mon { font-size: 9px; letter-spacing: .8px; color: #b4590f; font-weight: 700; }

/* El dia de hoy, con el numero dentro de un circulo lleno. */
.erd-pu2 .panel-dispcal-day.is-today .panel-dispcal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  border-radius: 50rem;
  background: var(--navy-l, #2f6fb0);
  color: #fff;
}

.erd-pu2 .panel-dispcal-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.erd-pu2 .panel-dispcal-counts i { font-size: 9px; opacity: .7; margin-right: 2px; }

.erd-pu2 .panel-dispcal-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.erd-pu2 .panel-dispcal-bar-bg {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 4px;
  background: #e9eef5;
  overflow: hidden;
}
.erd-pu2 .panel-dispcal-bar-fill {
  display: block;
  height: 100%;
  background: var(--navy-l, #2f6fb0);
}
.erd-pu2 .panel-dispcal-bar-fill.is-full { background: #2f8f47; }
.erd-pu2 .panel-dispcal-pct {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 26px;
  text-align: right;
}

@media (max-width: 900px) {
  .erd-pu2 .panel-dispcal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erd-pu2 .panel-dispcal-day.is-out { display: none; }
  .erd-pu2 .panel-dispcal-dow { display: none; }
}

/* El filtro lateral tambien se usa como enlace, no solo como boton. */
.erd-pu2 a.panel-sidefilter { display: block; text-decoration: none; }

/* ---------- Confirmacion de crew ---------- */
.erd-pu2 .panel-crewgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  align-items: start;
}

.erd-pu2 .panel-crewcol { padding: 0; overflow: hidden; }
.erd-pu2 .panel-crewcol .panel-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.erd-pu2 .panel-crewcol .panel-card-title { display: flex; align-items: center; gap: 8px; }
.erd-pu2 .panel-crewcol-n {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: #eef2f7;
  border-radius: 50rem;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.erd-pu2 .panel-crewcol-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  max-height: 420px;
  overflow-y: auto;
}
.erd-pu2 .panel-crewcol-empty { margin: 0; font-size: 12px; color: var(--muted-2); }

.erd-pu2 .panel-crewcol--open .panel-card-head { background: #fffaf2; }
.erd-pu2 .panel-crewcol--alert { margin: 0 0 14px; border: 1px solid #f3d9b5; }
.erd-pu2 .panel-crewcol--alert .panel-card-head { background: #fff8ed; color: #8a5209; }
.erd-pu2 .panel-crewcol--alert .panel-card-title { color: #8a5209; }
.erd-pu2 .panel-crewcol--alert .panel-crewcol-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-height: none;
}
.erd-pu2 .panel-crewjob-wrap { display: flex; flex-direction: column; gap: 3px; }
.erd-pu2 .panel-crewjob-who { font-size: 11px; font-weight: 600; color: #8a5209; }

.erd-pu2 .panel-crew-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Tarjeta de un trabajo dentro de la columna. */
.erd-pu2 .panel-crewjob {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy-l, #2f6fb0);
  border-radius: var(--r-btn);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}
.erd-pu2 .panel-crewjob:hover { background: #f7f9fc; }
.erd-pu2 .panel-crewjob.is-late { border-left-color: #c2410c; }
.erd-pu2 .panel-crewjob-top { display: flex; align-items: baseline; gap: 8px; }
.erd-pu2 .panel-crewjob-top b { font-size: 12.5px; color: var(--text-strong); }
.erd-pu2 .panel-crewjob-date { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.erd-pu2 .panel-crewjob.is-late .panel-crewjob-date { color: #c2410c; font-weight: 600; }
.erd-pu2 .panel-crewjob-cli { font-weight: 600; }
.erd-pu2 .panel-crewjob-addr {
  color: var(--muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erd-pu2 .panel-crewjob-foot { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-top: 2px; }

/* Recogida que ya paso de fecha y sigue sin hacerse. */
.erd-pu2 .panel-late { color: #c2410c; font-weight: 600; white-space: nowrap; }
.erd-pu2 .panel-late i { font-size: 10px; margin-right: 3px; }

/* ============================================================
 * Igualada fina con la referencia — segunda pasada
 *
 * Medido con el MISMO extractor corriendo en las dos pantallas,
 * a 1440x900, el 28/08/2026. Cada valor de aqui es el que tiene
 * app.smartmoving.com, no una aproximacion a ojo.
 * ============================================================ */

/* --- Etiqueta del indicador ---
   Alli es "Moves <small>This month</small>": 16px normal en minusculas,
   con el matiz en 9.6px. Aqui era un renglon de 9px en mayusculas. */
.erd-pu2 .panel-kpi-strip .panel-kpi-label {
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(0, 0, 0, .87);
  margin: 0 0 2px;
}
.erd-pu2 .panel-kpi-strip .panel-kpi-label small {
  font-size: 9.6px;
  font-weight: 400;
  margin-left: 3px;
}

/* --- Cabecera de listado ---
   Alli: 12px peso 500, sin espaciado extra, texto oscuro. */
.erd-pu2 .panel-table thead th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  color: rgba(0, 0, 0, .87);
  background: #f6f8fa;
}

/* --- Celda de listado --- 12.5 -> 14, que es lo que mide alli. */
.erd-pu2 .panel-table tbody td { font-size: 14px; }

/* --- Tabla de resumen del Dashboard ---
   Alli mide 19.2px, que en nuestras etiquetas (mas largas que
   "Leads" o "Booked") desbordaria la tarjeta. Se sube a 14, que
   es el mismo cuerpo que el listado. */
.erd-pu2 .panel-activity,
.erd-pu2 .panel-activity td,
.erd-pu2 .panel-activity th { font-size: 14px; }

/* --- Etiqueta de las fichas de datos (ficha de orden) ---
   Alli: 10px peso 500, espaciado 1.6px, gris #5c5c5c. */
.erd-pu2 .panel-kv-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  color: #5c5c5c;
}

/* --- El "volver" del antetitulo va en gris, no en azul --- */
.erd-pu2 .panel-eyebrow--back { color: rgba(0, 0, 0, .64); }

/* ============================================================
 * Conmutador de diseño en el menú de usuario
 *
 * El dueño quiere comparar el panel clásico y el nuevo antes de
 * quedarse con uno. Rótulo pequeño + la opción activa con su check.
 * ============================================================ */
.erd-pu2 .panel-pop-label {
  display: block;
  padding: 7px 14px 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.erd-pu2 .panel-pop-list a.is-current {
  display: flex;
  align-items: center;
  cursor: default;
  font-weight: 600;
  color: var(--navy);
}
.erd-pu2 .panel-pop-list a.is-current i {
  margin-left: auto;
  font-size: 10px;
  color: #2f8f47;
}

/* Boton "Panel clasico" en la barra superior: pastilla con borde, del
   mismo tamano que el selector de idioma que tiene al lado. En movil se
   queda solo el icono para no comerse la barra. */
.erd-pu2 .panel-switch-design {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  margin-right: 8px;
  border: 1px solid var(--border);
  border-radius: 50rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.erd-pu2 .panel-switch-design:hover { background: #eef3f9; text-decoration: none; }
.erd-pu2 .panel-switch-design i { font-size: 11px; }

@media (max-width: 700px) {
  .erd-pu2 .panel-switch-design { padding: 0 8px; }
  .erd-pu2 .panel-switch-design-txt { display: none; }
}