/* ==============================================================
   Paleta corporativa TRADEL SERVICE SRL
   Un solo degrade de azul, del mas oscuro al mas claro, del que
   sale TODO el color del sistema:

     #021024  tinta      fondo de la barra lateral y del tema oscuro
     #052659  marino     cabecera, titulos y encabezados de tabla
     #5483B3  azul medio bordes marcados, iconos apagados
     #7DA0CA  azul suave filos, textos de la barra lateral
     #C1E8FF  celeste    resaltados, fila elegida, rotulos del menu

   El rojo del isotipo se reserva para lo que urge (falta completar,
   borrar, anulada) y el verde para lo que salio bien. Los tonos
   intermedios de la escala se calculan una sola vez aca abajo: en
   el resto de la hoja no se escribe ningun color a mano.
   ============================================================== */

:root {
  /* ---------------- La escala, del mas claro al mas oscuro ------------- */
  --az-50:  #f2f8fe;
  --az-100: #e1f1ff;
  --az-200: #c1e8ff;
  --az-300: #9fc4e4;
  --az-400: #7da0ca;
  --az-500: #5483b3;
  --az-600: #2c5486;
  --az-700: #123a73;
  --az-800: #052659;
  --az-900: #021024;
  --az-950: #010a18;

  /* Los mismos azules en RGB, para las sombras y los velos. */
  --az-950-rgb: 1, 10, 24;
  --az-900-rgb: 2, 16, 36;
  --az-800-rgb: 5, 38, 89;
  --az-600-rgb: 44, 84, 134;
  --az-500-rgb: 84, 131, 179;
  --az-200-rgb: 193, 232, 255;

  /* ------------------------- Colores de marca ------------------------- */
  --tradel-azul-marino: var(--az-800);
  --tradel-azul-medio:  var(--az-700);
  --tradel-azul:        var(--az-600);
  --tradel-azul-claro:  var(--az-300);
  --tradel-rojo:        #d64550;
  --tradel-rojo-osc:    #a92f3a;
  --tradel-verde:       #2f8f6b;
  --tradel-verde-osc:   #237053;
  --tradel-naranja:     #c9702c;
  --tradel-gris:        #6b7f99;

  /* --------------------------- Superficies ----------------------------
     El fondo de la pantalla es un degrade muy suave del celeste al azul
     claro: hace que las tarjetas blancas se despeguen sin necesidad de
     recuadros gruesos. */
  --fondo: linear-gradient(180deg, #e8f2fb 0%, #d7e6f4 55%, #cbdcee 100%);
  --superficie: #ffffff;
  --superficie-2: #eef5fd;
  --superficie-3: #e1edf9;
  --superficie-apagada: #e6ecf4;
  --borde: #c4d8ec;
  --borde-suave: #d7e4f2;
  --texto-titulo: var(--az-800);
  --texto-tenue: #5c7391;

  /* Cabecera y barra lateral: el mismo degrade de la paleta, la cabecera
     acostada y la barra parada. */
  --cabecera: linear-gradient(100deg, var(--az-800) 0%, var(--az-700) 62%, #164683 100%);
  --lateral: linear-gradient(180deg, var(--az-800) 0%, #041a3e 52%, var(--az-900) 100%);
  --lateral-borde: rgba(var(--az-200-rgb), 0.16);
  --lateral-texto: #b9d3ec;
  --lateral-grupo: var(--az-400);
  --lateral-activo: linear-gradient(90deg, rgba(var(--az-200-rgb), 0.26), rgba(var(--az-200-rgb), 0.08));
  --ancho-lateral: 252px;

  /* Sombras: siempre azules, nunca negras, para que no ensucien. */
  --sombra-1: 0 1px 3px rgba(var(--az-900-rgb), 0.10);
  --sombra-2: 0 4px 14px rgba(var(--az-900-rgb), 0.14);
  --sombra-3: 0 14px 42px rgba(var(--az-900-rgb), 0.32);
  --anillo-foco: 0 0 0 0.18rem rgba(var(--az-500-rgb), 0.32);

  /* Bootstrap: color principal de la plantilla */
  --bs-primary: var(--az-600);
  --bs-primary-rgb: 44, 84, 134;
  --bs-body-bg: var(--superficie);
  --bs-body-color: #12293f;
  --bs-secondary-color: #5c7391;
  --bs-border-color: var(--borde);
  --bs-link-color: var(--az-700);
  --bs-link-color-rgb: 18, 58, 115;
  --bs-link-hover-color: var(--az-800);
  --bs-link-hover-color-rgb: 5, 38, 89;

  /* ---------------- Medidas de los campos de captura ----------------
     Un solo juego de medidas para todo el sistema: la guia, las ventanas
     de alta y las tablas que se escriben a mano usan el mismo alto y el
     mismo tamano de letra, para que la pantalla entre completa sin
     scroll y las filas se lean parejas. */
  --campo-alto: 1.8rem;
  --campo-alto-sm: 1.6rem;
  --campo-texto: 0.75rem;
  --campo-texto-sm: 0.72rem;
  --campo-etiqueta: 0.71rem;
  --campo-radio: 6px;

  /* ------------- Colores segun el campo tenga o no dato -------------
     Con dato: fondo blanco, letra oscura y un filo azul a la izquierda.
     Falta (obligatorio vacio): rosado con borde punteado, igual que la
     celda pendiente del sistema de seguimiento.
     Opcional vacio: celeste apagado, para que no compita con lo que falta. */
  --campo-lleno-fondo: #ffffff;
  --campo-lleno-borde: var(--az-300);
  --campo-lleno-color: #10304f;
  --campo-lleno-filo: var(--az-600);

  --campo-falta-fondo: #fdeff0;
  --campo-falta-borde: #e5aeb3;
  --campo-falta-color: #9a4a53;
  --campo-falta-filo: var(--tradel-rojo);
  --campo-falta-marcador: #bd7a83;

  --campo-opcional-fondo: #eef4fb;
  --campo-opcional-borde: #cddeef;
  --campo-opcional-color: #74869c;
  --campo-opcional-filo: #c0d3e8;

  /* ------------- Avisos: los dos unicos colores no azules -------------
     Verde apagado para lo que salio bien o esta marcado, rojo del isotipo
     para lo que falta o se borra. Ambos rebajados para que convivan con
     el azul sin gritar. */
  --verde-tenue: #e2f1ea;
  --verde-tinta: #1f6a4f;
  --fila-marcada: #d9ede4;
  --rojo-tenue: #fbe3e5;
  --rojo-tenue-borde: #f0bcc1;
  /* Tercer acento, solo para distinguir un rol del otro en las pastillas. */
  --naranja-tenue: #f7e8d7;
  --naranja-tinta: #96521c;
}

[data-bs-theme='dark'] {
  --fondo: linear-gradient(180deg, var(--az-900) 0%, var(--az-950) 100%);
  --superficie: #072141;
  --superficie-2: #0a2b53;
  --superficie-3: #0d3563;
  --superficie-apagada: #0b2545;
  --borde: #16406f;
  --borde-suave: #12335a;
  --texto-titulo: var(--az-200);

  --cabecera: linear-gradient(100deg, var(--az-900) 0%, #06255a 70%, #093067 100%);
  --lateral: linear-gradient(180deg, #04193c 0%, var(--az-900) 55%, var(--az-950) 100%);
  --lateral-texto: #a9c6e2;
  --lateral-grupo: var(--az-400);
  --lateral-activo: linear-gradient(90deg, rgba(var(--az-200-rgb), 0.22), rgba(var(--az-200-rgb), 0.06));

  --sombra-1: 0 1px 3px rgba(0, 0, 0, 0.45);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 14px 42px rgba(0, 0, 0, 0.6);

  --bs-body-bg: var(--superficie);
  --bs-body-color: #dbeafc;
  --bs-secondary-color: #93b2d3;
  --bs-border-color: var(--borde);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: var(--superficie-2);
  --bs-tertiary-bg: var(--superficie-3);
  --bs-link-color: var(--az-200);
  --bs-link-color-rgb: 193, 232, 255;
  --bs-link-hover-color: #ffffff;
  --bs-link-hover-color-rgb: 255, 255, 255;

  --campo-lleno-fondo: #061d39;
  --campo-lleno-borde: #1c4a80;
  --campo-lleno-color: #e3f0fd;
  --campo-lleno-filo: var(--az-400);

  --campo-falta-fondo: #3a1a20;
  --campo-falta-borde: #7d3b45;
  --campo-falta-color: #f0b4bb;
  --campo-falta-marcador: #c98d95;

  --campo-opcional-fondo: #0a2747;
  --campo-opcional-borde: #16406f;
  --campo-opcional-color: #85a3c4;
  --campo-opcional-filo: #16406f;

  --verde-tenue: #123c2d;
  --verde-tinta: #8fdcbd;
  --fila-marcada: #123c2d;
  --rojo-tenue: #3a1a20;
  --rojo-tenue-borde: #7d3b45;
  --naranja-tenue: #3d2a15;
  --naranja-tinta: #e0b183;
}
body {
  font-size: 0.875rem;
  background: var(--fondo);
  background-attachment: fixed;
  color: var(--bs-body-color);
}

/* Lo que se marca con el mouse toma el celeste de la paleta. */
::selection {
  background: var(--az-200);
  color: var(--az-900);
}

[data-bs-theme='dark'] ::selection {
  background: var(--az-600);
  color: #fff;
}

/* Las barras de desplazamiento tambien son de la casa: sobre fondo claro
   van azules apagadas y sobre el azul oscuro, celestes translucidas. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--az-300) transparent;
}

.barra-lateral *,
.barra-lateral {
  scrollbar-color: rgba(var(--az-200-rgb), 0.35) transparent;
}

/* ===================== Estructura general ===================== */

.app {
  display: flex;
  min-height: 100vh;
}

.contenido {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Cabecera azul marino con el logotipo, al estilo del sistema de
   seguimiento de guias. */
.encabezado {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 1.4rem;
  min-height: 58px;
  background: var(--cabecera);
  color: #fff;
  box-shadow: var(--sombra-2);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Filo celeste al pie de la cabecera: cierra la franja azul y la separa
   del contenido sin necesidad de una linea gruesa. */
.encabezado::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--az-500), var(--az-200) 45%, transparent);
  opacity: 0.75;
}

/* Quien esta trabajando y el boton de salida, al otro extremo de la
   cabecera. */
.sesion-cabecera {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.sesion-fecha {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

.sesion-usuario {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.sesion-usuario .bi {
  margin-right: 0.25rem;
  color: rgba(255, 255, 255, 0.7);
}

.sesion-usuario b {
  color: #fff;
}

.sesion-cabecera .btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
}

.encabezado h1 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}

.encabezado p {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.68);
}

.cuerpo {
  flex: 1;
  padding: 1rem 1.4rem 1.6rem;
}

/* ======================= Barra lateral ======================== */

.barra-lateral {
  width: var(--ancho-lateral);
  flex: 0 0 var(--ancho-lateral);
  background: var(--lateral);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  /* Filo celeste al costado, como el canto del degrade de la paleta. */
  box-shadow: inset -1px 0 0 rgba(var(--az-200-rgb), 0.14), 2px 0 12px rgba(var(--az-900-rgb), 0.25);
  z-index: 1035;
}

/* El logotipo de la empresa encabeza la barra lateral: va solo, en una
   franja de la misma altura que la cabecera, para no restarle sitio al
   menu. */
.marca {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 1rem;
  min-height: 58px;
  border-bottom: 1px solid var(--lateral-borde);
  background: rgba(var(--az-950-rgb), 0.35);
}

.marca-logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}

.menu {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.6rem 1rem;
}

.menu .grupo {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lateral-grupo);
  padding: 1rem 0.7rem 0.4rem;
}

.menu a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.52rem 0.7rem;
  margin-bottom: 0.12rem;
  border-radius: 8px;
  color: var(--lateral-texto);
  text-decoration: none;
  font-size: 0.83rem;
  line-height: 1.25;
}

.menu a i {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  flex: 0 0 auto;
}

.menu a {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu a:hover {
  background: rgba(var(--az-200-rgb), 0.10);
  color: #fff;
}

/* La opcion en la que se esta parado: fondo celeste translucido y un filo
   celeste a la izquierda, el tono mas claro de la paleta. */
.menu a.activo {
  background: var(--lateral-activo);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--az-200), inset 0 0 0 1px rgba(var(--az-200-rgb), 0.22);
}

.menu a.activo i { color: var(--az-200); }

.pie-lateral {
  border-top: 1px solid var(--lateral-borde);
  padding: 0.6rem;
}

.opcion-lateral {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lateral-texto);
  font-size: 0.83rem;
}

.opcion-lateral:hover {
  background: rgba(var(--az-200-rgb), 0.10);
  color: #fff;
}

.opcion-lateral .valor {
  font-size: 0.72rem;
  color: var(--az-400);
}

.empresa-lateral {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.2rem;
}

.empresa-lateral .avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--tradel-rojo);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.empresa-lateral .datos {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
}

.empresa-lateral b {
  color: var(--az-100);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empresa-lateral small {
  font-size: 0.68rem;
  color: var(--az-400);
}

/* Barra lateral deslizable en pantallas chicas */
.velo {
  display: none;
}

@media (max-width: 991.98px) {
  .barra-lateral {
    position: fixed;
    top: 0;
    left: calc(var(--ancho-lateral) * -1);
    z-index: 1045;
    transition: left 0.2s ease;
  }
  .barra-lateral.abierta {
    left: 0;
  }
  .velo.visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(var(--az-900-rgb), 0.55);
    z-index: 1040;
  }
  .encabezado,
  .cuerpo {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sesion-fecha {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .encabezado p,
  .sesion-usuario {
    display: none;
  }
}

/* ====================== Pantalla de ingreso ==================== */

/* La aplicacion arranca oculta: recien se muestra cuando el usuario
   entro, asi nadie ve datos antes de identificarse. */
[hidden] {
  display: none !important;
}

.pantalla-ingreso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* La entrada al sistema muestra la paleta entera: del azul tinta de
     abajo al celeste de arriba. */
  background: radial-gradient(120% 90% at 50% 0%, var(--az-700) 0%, var(--az-800) 45%, var(--az-900) 100%);
}

.tarjeta-ingreso {
  width: 100%;
  max-width: 360px;
  position: relative;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 18px 50px rgba(var(--az-950-rgb), 0.55);
  text-align: center;
  overflow: hidden;
}

/* Cinta de la paleta arriba de la tarjeta. */
.tarjeta-ingreso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--az-900), var(--az-700) 35%, var(--az-500) 70%, var(--az-200));
}

.ingreso-logo {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto 0.9rem;
  display: block;
}

.tarjeta-ingreso h1 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--az-800);
  margin: 0;
}

.ingreso-bajada {
  font-size: 0.78rem;
  color: var(--tradel-azul);
  margin: 0.15rem 0 1.1rem;
}

.tarjeta-ingreso label {
  display: block;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--az-700);
  margin-bottom: 0.25rem;
}

.tarjeta-ingreso .form-control {
  height: 2.4rem;
  font-size: 0.9rem;
}

.tarjeta-ingreso .input-group .btn {
  font-size: 0.8rem;
}

/* Cada campo separado del siguiente, como en la ventana de referencia. */
.tarjeta-ingreso .form-control,
.tarjeta-ingreso .input-group {
  margin-bottom: 0.9rem;
}

.tarjeta-ingreso .input-group .form-control {
  margin-bottom: 0;
}

.tarjeta-ingreso .btn-primary {
  height: 2.5rem;
  font-weight: 600;
}

/* La tarjeta va siempre en claro (lleva data-bs-theme="light" en el HTML):
   el logotipo de la empresa es de letras negras y sobre fondo azul no se
   leeria. */

/* ================= Bootstrap con colores TRADEL =============== */

/* Boton principal: el azul de la paleta con una sombra corta, para que se
   despegue del blanco de la tarjeta. */
.btn-primary {
  --bs-btn-bg: var(--az-700);
  --bs-btn-border-color: var(--az-700);
  --bs-btn-hover-bg: var(--az-800);
  --bs-btn-hover-border-color: var(--az-800);
  --bs-btn-active-bg: var(--az-900);
  --bs-btn-active-border-color: var(--az-900);
  --bs-btn-disabled-bg: var(--az-500);
  --bs-btn-disabled-border-color: var(--az-500);
  box-shadow: 0 1px 2px rgba(var(--az-900-rgb), 0.25);
}

.btn-primary:hover { box-shadow: 0 3px 10px rgba(var(--az-900-rgb), 0.28); }

.btn-secondary {
  --bs-btn-bg: var(--az-500);
  --bs-btn-border-color: var(--az-500);
  --bs-btn-hover-bg: var(--az-600);
  --bs-btn-hover-border-color: var(--az-600);
  --bs-btn-active-bg: var(--az-700);
  --bs-btn-active-border-color: var(--az-700);
}

.btn-outline-secondary {
  --bs-btn-color: var(--az-700);
  --bs-btn-border-color: var(--az-400);
  --bs-btn-hover-bg: var(--az-600);
  --bs-btn-hover-border-color: var(--az-600);
  --bs-btn-active-bg: var(--az-700);
  --bs-btn-active-border-color: var(--az-700);
}

[data-bs-theme='dark'] .btn-outline-secondary { --bs-btn-color: var(--az-200); }

/* Las sombras de Bootstrap tambien se pasan al azul de la paleta: sobre el
   fondo celeste una sombra negra se ve sucia. */
.shadow-sm { box-shadow: var(--sombra-1) !important; }
.shadow    { box-shadow: var(--sombra-2) !important; }

/* Un solo anillo de foco para todo: celeste, visible sobre claro y oscuro. */
.btn:focus-visible,
.menu a:focus-visible,
.opcion-lateral:focus-visible {
  outline: 2px solid var(--az-400);
  outline-offset: 1px;
}

.btn-outline-primary {
  --bs-btn-color: var(--az-700);
  --bs-btn-border-color: var(--az-600);
  --bs-btn-hover-bg: var(--az-600);
  --bs-btn-hover-border-color: var(--az-600);
  --bs-btn-active-bg: var(--az-700);
  --bs-btn-active-border-color: var(--az-700);
  --bs-btn-disabled-color: var(--az-700);
  --bs-btn-disabled-border-color: var(--az-600);
}

.btn-danger {
  --bs-btn-bg: var(--tradel-rojo);
  --bs-btn-border-color: var(--tradel-rojo);
  --bs-btn-hover-bg: var(--tradel-rojo-osc);
  --bs-btn-hover-border-color: var(--tradel-rojo-osc);
  --bs-btn-active-bg: var(--tradel-rojo-osc);
  --bs-btn-active-border-color: var(--tradel-rojo-osc);
  --bs-btn-disabled-bg: var(--tradel-rojo);
  --bs-btn-disabled-border-color: var(--tradel-rojo);
}

.btn-outline-danger {
  --bs-btn-color: var(--tradel-rojo-osc);
  --bs-btn-border-color: var(--tradel-rojo);
  --bs-btn-hover-bg: var(--tradel-rojo);
  --bs-btn-hover-border-color: var(--tradel-rojo);
  --bs-btn-active-bg: var(--tradel-rojo-osc);
  --bs-btn-active-border-color: var(--tradel-rojo-osc);
}

.btn-success {
  --bs-btn-bg: var(--tradel-verde);
  --bs-btn-border-color: var(--tradel-verde);
  --bs-btn-hover-bg: var(--tradel-verde-osc);
  --bs-btn-hover-border-color: var(--tradel-verde-osc);
  --bs-btn-active-bg: var(--tradel-verde-osc);
  --bs-btn-active-border-color: var(--tradel-verde-osc);
}

.bg-primary { background-color: var(--tradel-azul) !important; }
.bg-danger  { background-color: var(--tradel-rojo) !important; }
.bg-success { background-color: var(--tradel-verde) !important; }
.text-primary { color: var(--tradel-azul-marino) !important; }

.text-bg-success { background-color: var(--tradel-verde) !important; color: #fff !important; }
.text-bg-danger  { background-color: var(--tradel-rojo) !important; color: #fff !important; }

/* ==============================================================
   CAMPOS DE CAPTURA
   Todo lo que se escribe o se elige en el sistema usa este mismo
   juego de medidas y colores: la guia, las ventanas de alta y las
   tablas que se llenan a mano. El color dice de un vistazo como
   esta el campo, sin tener que leerlo:

     con dato      -> blanco, letra oscura y filo azul
     falta (*)     -> rosado con borde punteado y filo rojo
     opcional vacio-> gris apagado con borde punteado

   Las clases campo-lleno / campo-pendiente / campo-libre las pone
   js/campos.js; aca solo se definen.
   ============================================================== */

.form-control,
.form-select {
  min-height: var(--campo-alto);
  padding: 0.18rem 0.5rem;
  border-radius: var(--campo-radio);
  font-size: var(--campo-texto);
  line-height: 1.3;
}

/* La flecha del desplegable, a escala del control. */
.form-select {
  padding-right: 1.5rem;
  background-size: 11px 8px;
  background-position: right 0.45rem center;
}

.form-control-sm,
.form-select-sm {
  min-height: var(--campo-alto-sm);
  padding: 0.12rem 0.4rem;
  font-size: var(--campo-texto-sm);
  border-radius: 5px;
}

.form-select-sm { padding-right: 1.35rem; background-position: right 0.35rem center; }

textarea.form-control { min-height: 3.2rem; }

/* Las fechas traen su propio icono de calendario: sin esto se comen el
   alto del control. */
input[type='date'].form-control,
input[type='datetime-local'].form-control { padding-right: 0.35rem; }

.form-control::placeholder {
  font-size: 0.71rem;
  font-style: italic;
  opacity: 0.9;
}

/* Los botones pegados al campo (papelera y lapiz) bajan al mismo alto: si
   no, el input-group vuelve a crecer y se pierde lo ganado. */
.input-group .btn {
  padding: 0.1rem 0.45rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

.input-group-sm .btn { padding: 0.05rem 0.4rem; font-size: 0.78rem; }

/* ------------------------- Los tres estados ------------------------- */

.campo-lleno {
  background-color: var(--campo-lleno-fondo);
  border-color: var(--campo-lleno-borde);
  border-style: solid;
  color: var(--campo-lleno-color);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--campo-lleno-filo);
}

.campo-pendiente {
  background-color: var(--campo-falta-fondo);
  border-color: var(--campo-falta-borde);
  border-style: dashed;
  color: var(--campo-falta-color);
  box-shadow: inset 2px 0 0 var(--campo-falta-filo);
}

.campo-pendiente::placeholder { color: var(--campo-falta-marcador); opacity: 1; }

.campo-libre {
  background-color: var(--campo-opcional-fondo);
  border-color: var(--campo-opcional-borde);
  border-style: dashed;
  color: var(--campo-opcional-color);
  box-shadow: inset 2px 0 0 var(--campo-opcional-filo);
}

/* Mientras se escribe manda el foco: fondo limpio y filo azul, sin importar
   como estaba el campo. */
.form-control:focus,
.form-select:focus {
  background-color: var(--bs-body-bg);
  border-color: var(--tradel-azul);
  border-style: solid;
  color: var(--bs-body-color);
  box-shadow: inset 2px 0 0 var(--tradel-azul), var(--anillo-foco);
}

/* Guia ya declarada: todo el formulario queda gris y sin filo. */
.form-control:disabled,
.form-select:disabled,
.form-control[disabled] {
  background-color: var(--superficie-apagada);
  border-color: var(--borde);
  border-style: solid;
  color: var(--texto-tenue);
  font-weight: 400;
  box-shadow: none;
  opacity: 1;
}

[data-bs-theme='dark'] .form-control:disabled,
[data-bs-theme='dark'] .form-select:disabled {
  background-color: var(--superficie-apagada);
  border-color: var(--borde);
  color: var(--bs-secondary-color);
}

/* Leyenda de colores, arriba del formulario de la guia. */
.leyenda-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie-2);
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
}

.leyenda-campos span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.leyenda-campos i {
  width: 1.5rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px dashed var(--campo-falta-borde);
  background: var(--campo-falta-fondo);
  box-shadow: inset 2px 0 0 var(--campo-falta-filo);
}

.leyenda-campos .lleno {
  border: 1px solid var(--campo-lleno-borde);
  background: var(--campo-lleno-fondo);
  box-shadow: inset 2px 0 0 var(--campo-lleno-filo);
}

.leyenda-campos .libre {
  border: 1px dashed var(--campo-opcional-borde);
  background: var(--campo-opcional-fondo);
  box-shadow: inset 2px 0 0 var(--campo-opcional-filo);
}

[data-bs-theme='dark'] .leyenda-campos { background: var(--superficie-2); border-color: var(--borde); }



.form-check-input:checked {
  background-color: var(--tradel-azul);
  border-color: var(--tradel-azul);
}

.form-check-input:focus {
  border-color: var(--tradel-azul);
  box-shadow: var(--anillo-foco);
}

/* Tarjetas: en vez del filo plano de antes, arriba va una cinta con el
   degrade de la paleta (de tinta a celeste). */
.card {
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.card::before {
  content: '';
  display: block;
  height: 3px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--az-800), var(--az-600) 45%, var(--az-400) 78%, var(--az-200));
}

.card-header {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  color: var(--texto-titulo);
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
}

[data-bs-theme='dark'] .card-header {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  color: var(--az-200);
  border-bottom-color: var(--borde);
}

.alert-danger {
  --bs-alert-color: var(--tradel-rojo-osc);
  --bs-alert-bg: var(--rojo-tenue);
  --bs-alert-border-color: var(--rojo-tenue-borde);
}

/* =========================== Tablas =========================== */

.table > :not(caption) > * > * { padding: 0.26rem 0.4rem; font-size: 0.76rem; }
.table-hover tbody tr { cursor: pointer; }

/* Encabezados de tabla en azul marino, con el degrade de la paleta */
.table > thead.table-light {
  --bs-table-bg: var(--az-800);
  --bs-table-color: #ffffff;
  --bs-table-border-color: var(--az-700);
  background-image: linear-gradient(180deg, var(--az-700), var(--az-800));
}

/* Fila bajo el mouse, en celeste. */
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  background-color: var(--az-100);
  color: var(--bs-body-color);
}

[data-bs-theme='dark'] .table-hover > tbody > tr:hover > * {
  background-color: var(--superficie-3);
  color: var(--bs-body-color);
}

.table > thead.table-light th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* La tabla de items se llena a mano fila por fila: los controles van al ras
   de la celda para que entren mas filas en pantalla. */
.tabla-items input,
.tabla-items select {
  font-size: var(--campo-texto-sm);
  min-height: var(--campo-alto-sm);
}

.tabla-items td { padding: 0.15rem 0.25rem; }

/* Fila cerrada: el dato como texto, y la descripcion larga completa en
   varias lineas en vez de cortada dentro de un campo. */
.tabla-items td.celda-item {
  font-size: var(--campo-texto-sm);
  padding: 0.3rem 0.45rem;
  vertical-align: middle;
}

.tabla-items td.celda-item-descripcion {
  white-space: normal;
  line-height: 1.25;
}

/* Dato que falta: celda en rojo con la palabra "Falta", para que el operario
   lo vea entre muchos items sin esperar al rechazo de SUNAT. */
.tabla-items td.falta-dato {
  background: rgba(220, 53, 69, 0.12);
  color: var(--tradel-rojo);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.45);
}

.tabla-items tr.item-con-falta > td:first-child { box-shadow: inset 3px 0 0 var(--tradel-rojo); }

/* N° de linea: el mismo que dice el aviso ("linea 138"). */
.tabla-items td.celda-linea {
  font-size: var(--campo-texto-sm);
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
}

.tabla-items tr.item-con-falta > td.celda-linea {
  color: var(--tradel-rojo);
  font-weight: 700;
}

/* Fila abierta con el lapiz: se distingue de las cerradas. */
.tabla-items tr.item-editando > td { background: var(--az-100, #eef4fb); }

.tabla-items textarea[data-c='descripcion'] {
  font-size: var(--campo-texto-sm);
  min-height: var(--campo-alto-sm);
  resize: vertical;
}

.celda-numero { font-variant-numeric: tabular-nums; }

/* Columna de acciones de la lista de guias */
.acciones {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.acciones a,
.acciones button {
  border: 0;
  background: transparent;
  padding: 0.1rem 0.2rem;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
}

.acciones .ico-pdf { color: var(--tradel-rojo); }
.acciones .ico-xml,
.acciones .ico-ticket,
.acciones .ico-info { color: var(--tradel-azul); }

/* Ticket de 80 mm: icono con el rotulo "IMP80" debajo, como los de XML/JSON */
.acciones .ico-ticket {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.95rem;
}
.acciones .ico-ticket .rotulo {
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.acciones .desactivado { color: var(--bs-secondary-color); opacity: 0.35; cursor: not-allowed; }

/* ------------------- Pantalla de correos ---------------------
   Cada fila es una guia que mando el cliente con sus adjuntos. Los nombres
   de archivo son largos, asi que se cortan y se leen completos en el tooltip. */

.adjunto {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 0.72rem;
  text-decoration: none;
}

.adjunto.ico-pdf { color: var(--tradel-rojo); }
.adjunto.ico-xml { color: var(--tradel-azul); }
.adjunto.ico-cdr { color: var(--tradel-verde); }
.adjunto.ico-otro { color: var(--tradel-gris); }
.adjunto:hover { text-decoration: underline; }

/* La ruta de la carpeta se muestra completa pero sin robarle ancho al resto. */
.ruta {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
  word-break: break-all;
}

/* Correo asignado, arriba de los filtros. */
.buzon-asignado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.buzon-asignado > .bi-envelope-at { color: var(--tradel-azul); }

/* Cada fila es un correo. Los textos largos se parten en lineas (el max-width
   va en un div: en el td no tiene efecto) para que entre en el celular. */
.tabla-correos td { font-size: 0.75rem; vertical-align: top; }
.tabla-correos th { font-size: 0.72rem; }
.celda-correo { max-width: 13rem; overflow-wrap: anywhere; }
.celda-correo.ancha { max-width: 18rem; }
.archivo-correo { max-width: 14rem; line-height: 1.25; margin-bottom: 0.15rem; }
.archivo-correo.rechazado {
  font-size: 0.72rem;
  color: var(--tradel-rojo);
  overflow-wrap: anywhere;
}
.archivo-correo.rechazado .nombre { text-decoration: line-through; }
.archivo-correo .motivo { display: block; font-size: 0.66rem; }
.motivo-rechazo { margin-top: 0.2rem; color: var(--tradel-rojo); font-size: 0.68rem; }
.tabla-correos tr.correo-rechazado > td { background-color: rgba(214, 69, 80, 0.05); }

/* ====================== Formulario de guia ==================== */

/* ------------------- Bloques por asunto ----------------------
   La guia se llena por partes: el comprobante, el traslado, la carga,
   la ruta, la unidad... Cada parte va en su propio recuadro con el
   titulo arriba, igual que la representacion impresa de SUNAT, para
   que se vea de un golpe que campos van juntos. */

.bloque {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--bs-body-bg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.bloque-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.42rem 0.8rem;
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border-bottom: 1px solid var(--borde);
  box-shadow: inset 3px 0 0 var(--az-500);
  color: var(--texto-titulo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bloque-titulo i {
  font-size: 0.9rem;
  color: var(--tradel-azul);
}

/* Controles que viajan en la barra del titulo (la carga del Excel). */
.bloque-extra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
}

.bloque-extra label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
}

.bloque-extra input[type='file'] { max-width: 15rem; }

.bloque-cuerpo {
  flex: 1;
  padding: 0.6rem 0.7rem 0.25rem;
}

.bloque-cuerpo.sin-relleno { padding: 0; }

.bloque .campo:last-child { margin-bottom: 0.4rem; }

/* Los cinco interruptores se reparten en las columnas que entren: a lo ancho
   de la pantalla entran los cinco en una sola linea. */
.lista-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.1rem 1.2rem;
  margin-bottom: 0.15rem;
}

/* Pagador del flete y transporte subcontratado: no se marcan a mano, se
   muestran como quedaran en la guia. El grupo no arma reja propia (seria
   otra, con otras columnas): sus dos lineas entran en la de arriba. */
.indicadores-automaticos { display: contents; }

/* Se leen como un interruptor mas: sin recuadro y con la letra de las
   etiquetas, corridos lo que mide el interruptor para que los textos
   queden en la misma linea vertical.
   Cada uno toma dos columnas, asi el flete cae debajo de "Transbordo
   programado" y el subcontratado en la tercera, a la altura de "Retorno
   vehiculo vacio". */
.indicador-auto {
  grid-column: auto / span 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding-left: 2.5em;
  font-size: 0.875em;
}

/* Abre linea propia: si sobra lugar en la fila de los interruptores no se
   mete ahi, estos dos van siempre debajo y juntos. */
.indicador-auto:first-child { grid-column: 1 / span 2; }

.indicador-auto > b {
  font-weight: 700;
  white-space: nowrap;
}

/* Sin dato todavia: no se resalta. */
.indicador-auto > b.sin-dato {
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.pista-indicadores {
  margin: 0.3rem 0 0.2rem;
}

/* Doc Ref, Sub. Contratista, Campos Adicionales y Flete. */
.botones-complemento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.botones-complemento .btn {
  min-height: 3rem;
  font-size: 0.82rem;
  /* Borde marcado para que el boton se distinga aun con poca vista. */
  border: 2px solid var(--az-500) !important;
  color: var(--az-800);
}

.botones-complemento .btn:hover,
.botones-complemento .btn:focus-visible {
  border-color: var(--az-700) !important;
  background: var(--az-100);
}

[data-bs-theme='dark'] .botones-complemento .btn {
  border-color: var(--az-300) !important;
  color: var(--az-100);
}

[data-bs-theme='dark'] .botones-complemento .btn:hover,
[data-bs-theme='dark'] .botones-complemento .btn:focus-visible {
  border-color: var(--az-200) !important;
  background: var(--az-800);
}

/* Guardar borrador y Declarar: siempre juntos al final. */
/* El bloque de "Guardar" y "Declarar" es el ultimo paso: su filo va en el
   tono mas claro de la paleta para que se distinga del resto. */
.bloque-acciones .bloque-titulo { box-shadow: inset 3px 0 0 var(--az-200); }

.barra-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.barra-acciones .pista-acciones {
  margin-right: auto;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.barra-acciones .btn { min-width: 10rem; }

@media (max-width: 575.98px) {
  .bloque-titulo { flex-wrap: wrap; }
  .bloque-extra { margin-left: 0; width: 100%; }
  .barra-acciones .btn { flex: 1 1 100%; }

  /* En el celular la reja es de una sola columna: cada indicador toma la
     que haya y no se estira a dos. */
  .indicador-auto,
  .indicador-auto:first-child { grid-column: auto; }
}

/* Etiqueta a la izquierda + control a la derecha, como en la pantalla de
   referencia. En pantallas chicas la etiqueta pasa arriba del control. */
.campo {
  display: grid;
  grid-template-columns: 8.4rem 1fr;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Sin esto los controles con ancho propio (las fechas, por ejemplo) estiran
   su columna y desbordan el bloque. */
.campo > * { min-width: 0; }

/* Dentro de un bloque el recuadro ya achica el espacio: la etiqueta ocupa
   un poco menos para que el control respire. */
.bloque .campo { grid-template-columns: 7.6rem 1fr; }

/* Bloque de una sola linea (los datos de la carga): los campos van uno al
   lado del otro, con la etiqueta mas corta, y el gutter de la fila hace de
   separacion entre ellos. */
.bloque .campos-en-linea .campo {
  grid-template-columns: 6rem 1fr;
  margin-bottom: 0;
}

.campo > label {
  text-align: right;
  font-size: var(--campo-etiqueta);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color);
  margin: 0;
}

.campo > label b {
  color: var(--tradel-rojo);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .campo { grid-template-columns: 1fr; }
  .campo > label { text-align: left; }
}

.unidad-peso { max-width: 5.5rem; flex: 0 0 auto; }

/* Cabecera de la guia: los controles no se estiran hasta el borde del
   bloque, y los dos de cada columna miden lo mismo (manda la fecha, que es
   la que necesita su ancho), asi el recuadro queda parejo. */
#transportista,
#fecha_emision { max-width: 12.5rem; }

#serie,
#fecha_traslado { max-width: 10.5rem; }

/* Visor de JSON */
pre.json {
  background: linear-gradient(160deg, var(--az-800), var(--az-900));
  color: var(--az-200);
  border: 1px solid var(--az-700);
  padding: 1rem;
  border-radius: 0.375rem;
  font-size: 0.78rem;
  max-height: 60vh;
  overflow: auto;
}

.estado-BORRADOR { background: var(--az-500); }
.estado-GENERADA { background: var(--tradel-verde); }
.estado-RECHAZADA { background: var(--tradel-rojo); }
.estado-ANULADA  { background: var(--tradel-rojo); }

/* ==============================================================
   VENTANAS (modales) DE SELECCION Y DE ALTA DE REGISTROS
   Mismo lenguaje visual del sistema de seguimiento (CUCHAREABLE):
   cabecera azul marino, tabla de cabecera oscura fija, fila
   resaltada al pasar el mouse y botones de accion bien marcados.
   ============================================================== */

.ventana .modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: var(--sombra-3);
  overflow: hidden;
}

/* Cinta de la paleta arriba de cada ventana: dice de un vistazo que lo que
   esta encima es una ventana del sistema. */
.ventana .modal-content::before {
  content: '';
  display: block;
  height: 3px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--az-800), var(--az-600) 45%, var(--az-400) 78%, var(--az-200));
}

/* Las ventanas de seleccion se ajustan a lo que muestran: el ancho lo pone su
   tabla, no una medida fija que dejaria franjas vacias entre las columnas. El
   minimo lo marcan la cabecera y el pie; el maximo, la pantalla. */
.ventana .modal-dialog.ventana-ajustada {
  width: max-content;
  min-width: min(96vw, 34rem);
  max-width: min(96vw, 68rem);
}

/* Formularios de una sola columna (chofer, vehiculo): con la ventana ancha el
   campo quedaba con media ventana vacia al costado. */
.ventana .modal-dialog.ventana-angosta { max-width: min(96vw, 31rem); }

/* Formularios de dos columnas (cliente, punto, usuario): lo que necesitan las
   dos columnas de campos y nada mas. */
/* Pagador del flete: las tres opciones en linea, pegadas a su texto, en vez
   de la reja de columnas anchas del formulario principal. */
.lista-pagador {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
}

/* N° de documento (11 digitos como mucho) y tipo: no necesitan todo el
   ancho de la fila, eso queda para la razon social. */
.campo-form > .campo-corto { max-width: 10rem; }
/* El tipo lleva la flecha y alguno es largo ("Carnet de extranjeria"). */
.campo-form > select.campo-corto { max-width: 12rem; }

.ventana .modal-dialog.ventana-media { max-width: min(96vw, 46rem); }

/* Con varias ventanas encimadas, la de arriba cubre toda la pantalla y
   dejaria muertas a las de atras. Anulando los clics en la capa (el panel
   los recibe igual) se puede volver a una ventana de atras sin cerrar nada. */
.modal-backdrop {
  --bs-backdrop-bg: var(--az-900);
  --bs-backdrop-opacity: 0.55;
}

.modal.ventana { pointer-events: none; }
.ventana .modal-content { pointer-events: auto; }

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

/* Cabecera limpia, como la del sistema de seguimiento: fondo blanco, el
   nombre de la ventana a la izquierda con un icono chico al lado, y lo que
   se puede hacer en ella al otro extremo. */
.ventana-cabecera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border-bottom: 1px solid var(--borde);
  /* La cabecera es el asa: el cursor lo anuncia para no andar probando. */
  cursor: grab;
  user-select: none;
}

/* Sobre los controles de la cabecera manda el cursor del control. */
.ventana-cabecera :is(button, a, input, select, label) { cursor: pointer; }

/* Nombre de la ventana: el icono dice de que se trata sin tener que leer. */
.ventana-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-right: auto;
}

.ventana-marca > .bi {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--tradel-azul);
}

/* La bajada acompana al nombre en la misma linea mientras entre; si la
   ventana es angosta, baja sola. */
.ventana-textos {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  min-width: 0;
}

.ventana-cabecera .modal-title {
  margin: 0;
  color: var(--tradel-azul-marino);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* De que es la ventana: el cliente, la guia. Se lee al costado del nombre,
   apagado, para no competir con el. */
.ventana-bajada {
  font-size: 0.72rem;
  color: var(--tradel-gris);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ventana-acciones {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.ventana-conteo {
  font-size: 0.72rem;
  color: var(--tradel-gris);
  white-space: nowrap;
}

/* Boton de alta rapida: verde, como el "Agregar" del sistema de
   seguimiento. Va a la derecha de la cabecera y su globo dice que se
   agrega en esta ventana ("Agregar nuevo Remitente"). */
.btn-agregar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  height: 26px;
  padding: 0 0.6rem;
  border: 1px solid var(--tradel-verde-osc);
  border-radius: 7px;
  background: var(--tradel-verde);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--az-900-rgb), 0.18);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn-agregar > .bi { font-size: 0.8rem; }

.btn-agregar:hover {
  background: var(--tradel-verde-osc);
  box-shadow: 0 2px 6px rgba(var(--az-900-rgb), 0.25);
}

.btn-agregar:active { transform: translateY(1px); }

.btn-agregar:focus-visible {
  outline: 2px solid var(--verde-tinta);
  outline-offset: 2px;
}

/* --------------------------- Filtro --------------------------- */

.fila-filtro {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fila-filtro > label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* El filtro no es un dato de la guia: se deja neutro, sin el color de
   "falta completar". */
.fila-filtro > input {
  font-size: 0.78rem;
}

/* Ventanas que ademas traen un desplegable para acotar (el departamento en
   la de ubigeo): entran los cuatro controles en la misma linea. */
.fila-filtro.con-selector {
  grid-template-columns: auto auto auto 1fr;
}

.fila-filtro > select {
  font-size: 0.78rem;
  width: auto;
}

/* --------------------- Tabla de seleccion --------------------- */

.tabla-seleccion {
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: auto;
  max-height: 52vh;
}

.tabla-seleccion table { margin: 0; }

.tabla-seleccion thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--az-800);
  background-image: linear-gradient(180deg, var(--az-700), var(--az-800));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 0;
  padding: 0.5rem 0.55rem;
}

/* Cada celda ocupa lo que ocupa su dato: sin esto el navegador reparte el
   sobrante entre todas las columnas y deja huecos en las cortas. */
.tabla-seleccion tbody td {
  padding: 0.3rem 0.5rem;
  font-size: 0.76rem;
  border-color: var(--borde-suave);
  white-space: nowrap;
}

/* Cuando la tabla es mas angosta que la ventana, el sobrante no se reparte
   entre todas las columnas (eso es lo que abria huecos): se lo queda la
   columna de texto largo, que es la unica que gana algo con el. */
.tabla-seleccion thead th,
.tabla-seleccion tbody td { width: 1%; }

.tabla-seleccion thead th.col-libre,
.tabla-seleccion tbody td.celda-texto,
.tabla-seleccion tbody td.celda-larga { width: auto; }

/* Direcciones y razones sociales: en vez de estirar la ventana hasta el borde
   de la pantalla, se parten en dos lineas a partir de cierto ancho. */
.tabla-seleccion .celda-texto {
  max-width: 26rem;
  white-space: normal;
  line-height: 1.25;
}

.tabla-seleccion tbody tr { cursor: pointer; }
.tabla-seleccion tbody tr:nth-child(even) > td { background: var(--superficie-2); }

.tabla-seleccion tbody tr:hover > td,
.tabla-seleccion tbody tr.activa > td {
  background: var(--az-200);
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

.tabla-seleccion tbody tr.activa > td:first-child {
  box-shadow: inset 3px 0 0 var(--tradel-azul);
}

.tabla-seleccion .col-destacada {
  font-weight: 700;
  color: var(--tradel-azul-marino);
  white-space: nowrap;
}

/* Botones de icono de todo el sistema: la papelera roja borra y el lapiz azul
   modifica, edita o agrega informacion. Este es el unico lugar donde se
   definen, asi que todas las ventanas se ven igual. */
.btn-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--tradel-rojo);
  font-size: 0.9rem;
  line-height: 1;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.btn-opt:hover {
  background: var(--tradel-rojo);
  color: #fff;
}

.btn-opt:active { transform: translateY(1px); }

/* Los dos botones de la columna "Opciones": si no entran al ancho de la
   columna se acomodan uno debajo del otro. */
.tabla-seleccion .celda-opciones {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
}

.btn-opt-editar { color: var(--bs-primary); }

.btn-opt-editar:hover {
  background: var(--bs-primary);
  color: #fff;
}

/* Los mismos dos botones cuando van pegados a un campo (input-group): ahi el
   recuadro lo pone Bootstrap, aca van solo los colores para que se lean igual
   que en las tablas. */
.btn-borrar { color: var(--tradel-rojo); }

.btn-borrar:hover,
.btn-borrar:focus {
  background-color: var(--tradel-rojo);
  border-color: var(--tradel-rojo);
  color: #fff;
}

.btn-editar { color: var(--bs-primary); }

.btn-editar:hover,
.btn-editar:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.mensaje-vacio {
  padding: 0.7rem 0.2rem 0;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

/* ------------------ Ventana "Importar GRE" -------------------- */

/* Aca no se elige una fila: se marcan varias. La marcada queda en verde para
   que se distinga del simple paso del mouse, que es azul. */
.tabla-seleccion tbody tr.marcada > td { background: var(--fila-marcada); }

.tabla-seleccion tbody tr.marcada > td:first-child {
  box-shadow: inset 3px 0 0 var(--tradel-verde);
}

/* Las direcciones de la GRE son largas: se muestran en dos lineas en vez de
   estirar la columna. */
.tabla-seleccion .celda-larga {
  max-width: 22rem;
  white-space: normal;
  line-height: 1.25;
}

/* El tope va en un div dentro de la celda: el navegador no respeta max-width
   en una celda de tabla, y sin esto la direccion estiraba la ventana. */
.tabla-gre .corte-destinatario { max-width: 9rem; white-space: normal; }
.tabla-gre .corte-llegada { max-width: 10rem; white-space: normal; }

.tabla-gre thead th { padding: 0.45rem 0.4rem; }
.tabla-gre tbody td { padding: 0.25rem 0.4rem; }

/* XML y PDF uno al lado del otro: apilados, cada fila salia el doble de alta. */
.tabla-gre .celda-opciones { flex-wrap: nowrap; }

/* "solo PDF" va debajo del numero: al costado ensanchaba toda la columna
   Serie aunque la marca estuviera en una sola fila. */
.tabla-gre .marca-solo-pdf {
  display: block;
  width: max-content;
  margin-top: 2px;
  font-size: 0.6rem;
}

.pie-importar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}

/* Lo que quedo pendiente de revisar despues de importar una GRE. */
.avisos-gre {
  position: relative;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.avisos-gre ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.avisos-gre .btn-close { position: absolute; top: 0.45rem; right: 0.5rem; font-size: 0.6rem; }

/* ----------------------------- Pie ---------------------------- */

.ventana-pie {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  border-top: 1px solid var(--borde);
}

.ventana-pie .pista {
  margin-right: auto;
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
}

.ventana-pie kbd {
  padding: 0.05rem 0.3rem;
  margin-right: 0.15rem;
  border-radius: 4px;
  background: var(--tradel-azul-marino);
  font-size: 0.65rem;
}

.ventana-pie .btn { min-width: 84px; font-weight: 600; }

/* ------------------ Formulario de alta / edicion --------------- */

.form-ventana .seccion {
  margin: 0.55rem 0 0.15rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--borde);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tradel-azul-marino);
}

.form-ventana .row > .col-12:first-child .seccion { margin-top: 0; }

.campo-form {
  display: grid;
  grid-template-columns: 7.6rem 1fr;
  align-items: center;
  gap: 0.4rem;
}

.campo-form > label {
  margin: 0;
  font-size: var(--campo-etiqueta);
  color: var(--bs-body-color);
  line-height: 1.2;
}

.campo-form > label .obligatorio {
  color: var(--tradel-rojo);
  font-weight: 700;
  margin-right: 0.15rem;
}

/* Los campos de solo lectura que se llenan desde un buscador (el ubigeo, la
   entidad) ya no llevan el gris de "no editable": ahora los pinta su estado
   (con dato / falta), que dice mas. El candado lo indican los botones. */

/* Distrito / provincia / departamento: se llenan solos con el ubigeo */
.campo-form .derivado {
  background-color: var(--superficie-2);
  color: var(--tradel-azul-marino);
  font-weight: 600;
  border-color: var(--az-300);
  border-style: dashed;
  box-shadow: inset 2px 0 0 var(--az-400);
}

.campo-form .form-control.is-invalid,
.campo-form .form-select.is-invalid { border-color: var(--tradel-rojo); }

/* Parte de abajo de la ventana del cliente: las direcciones que se le
   designan (los destinos del destinatario, por ejemplo). */
.form-ventana .grupo-direcciones {
  margin-top: 0.9rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--borde);
}

.form-ventana .interruptores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie-2);
}

@media (max-width: 575.98px) {
  .campo-form { grid-template-columns: 1fr; }
  .fila-filtro { grid-template-columns: 1fr; }
  .ventana-pie .pista { display: none; }
}

/* ==============================================================
   GESTION DE USUARIOS
   Lista de accesos al modulo: los filtros arriba, el alta en su
   propia ventana y cada dato de la fila en su pastilla.
   ============================================================== */

.barra-usuarios {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.7rem;
}

.barra-usuarios .btn { margin-left: auto; }

.filtro-usuarios {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 11rem;
}

.filtro-usuarios label {
  margin: 0;
  font-size: var(--campo-etiqueta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* PIN, serie y estado: el dato se lee de un vistazo por su color. */
.pastilla {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pastilla-pin      { background: var(--verde-tenue); color: var(--verde-tinta); letter-spacing: 0.16em; }
.pastilla-serie    { background: var(--superficie-3); color: var(--az-700); font-family: ui-monospace, 'Consolas', monospace; }
.pastilla-activo   { background: var(--verde-tenue); color: var(--verde-tinta); }
.pastilla-inactivo { background: var(--superficie-apagada); color: var(--texto-tenue); }

/* ------------------ Filas de las listas de maestros ------------------
   Las listas de clientes, choferes y vehiculos son largas y todas las
   filas se parecen, asi que el ojo no encuentra donde agarrarse. Se le
   da peso al dato que identifica al registro, se apaga el que solo
   acompana y los codigos van en monoespaciado para que las cifras
   caigan alineadas y se comparen de un vistazo. La tabla no cambia:
   son las mismas columnas, escritas con jerarquia. */

.celda-titulo {
  font-weight: 650;
  color: var(--texto-titulo);
  line-height: 1.25;
}

/* Documentos, placas y brevetes: cifras que se leen en vertical. */
.celda-codigo {
  font-family: ui-monospace, 'Consolas', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--az-700);
  white-space: nowrap;
}

/* El dato de apoyo (direccion, telefono) no compite con el titulo. */
.celda-apoyo {
  color: var(--texto-tenue);
  font-size: 0.8rem;
}

/* Sin dato cargado: una raya tenue, para que no se lea como un error. */
.celda-vacia {
  color: var(--borde);
  user-select: none;
}

/* Varias pastillas en una misma celda (los roles del cliente). */
.celda-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pastilla-remitente      { background: var(--az-100); color: var(--az-700); }
.pastilla-destinatario   { background: var(--verde-tenue); color: var(--verde-tinta); }
.pastilla-subcontratista { background: var(--naranja-tenue); color: var(--naranja-tinta); }
.pastilla-pagador        { background: var(--superficie-apagada); color: var(--texto-tenue); }

.usuario-alias {
  font-family: ui-monospace, 'Consolas', monospace;
  font-weight: 700;
  color: var(--tradel-azul-marino);
}

/* Lo que el usuario no tiene cargado (sin DNI, sin serie) va apagado. */
.celda-vacia { color: var(--bs-secondary-color); opacity: 0.55; }

.sel-rol {
  min-width: 6.2rem;
  margin: 0 auto;
  font-weight: 700;
  color: var(--tradel-azul-marino);
}

/* Los dos botones de la columna ACCIONES, aca y en las ventanas. */
.celda-opciones {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
}

.btn-opt-alta { color: var(--tradel-verde); }

.btn-opt-alta:hover {
  background: var(--tradel-verde);
  color: #fff;
}

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

[data-bs-theme='dark'] .bloque { border-color: var(--borde); background: var(--superficie); }
[data-bs-theme='dark'] .bloque-titulo {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  color: var(--az-200);
  border-bottom-color: var(--borde);
}
[data-bs-theme='dark'] .bloque-titulo i { color: var(--az-400); }
[data-bs-theme='dark'] .tabla-items tr.item-editando > td { background: var(--superficie-2); }
[data-bs-theme='dark'] .tabla-seleccion { border-color: var(--borde); }
[data-bs-theme='dark'] .tabla-seleccion tbody td { border-color: var(--borde); }
[data-bs-theme='dark'] .tabla-seleccion tbody tr:nth-child(even) > td { background: var(--superficie-2); }
[data-bs-theme='dark'] .tabla-seleccion tbody tr:hover > td,
[data-bs-theme='dark'] .tabla-seleccion tbody tr.activa > td { background: var(--az-700); }
[data-bs-theme='dark'] .tabla-seleccion .col-destacada { color: var(--az-200); }
[data-bs-theme='dark'] .ventana-cabecera {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border-bottom-color: var(--borde);
}
[data-bs-theme='dark'] .ventana-cabecera .modal-title { color: var(--az-100); }
[data-bs-theme='dark'] .ventana-marca > .bi { color: var(--az-200); }
[data-bs-theme='dark'] .ventana-bajada,
[data-bs-theme='dark'] .ventana-conteo { color: var(--bs-secondary-color); }
[data-bs-theme='dark'] .ventana-pie {
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  border-top-color: var(--borde);
}
[data-bs-theme='dark'] .pastilla-serie    { background: var(--superficie-2); color: var(--az-200); }
[data-bs-theme='dark'] .pastilla-inactivo { background: var(--superficie-2); color: var(--bs-secondary-color); }

/* En oscuro el azul claro de las pastillas se apaga contra el fondo. */
[data-bs-theme='dark'] .pastilla-remitente { background: var(--superficie-3); color: var(--az-200); }
[data-bs-theme='dark'] .pastilla-pagador   { background: var(--superficie-2); color: var(--bs-secondary-color); }
[data-bs-theme='dark'] .celda-titulo       { color: var(--az-100); }
[data-bs-theme='dark'] .celda-codigo       { color: var(--az-200); }
[data-bs-theme='dark'] .celda-vacia        { color: var(--superficie-3); }
[data-bs-theme='dark'] .usuario-alias,
[data-bs-theme='dark'] .sel-rol { color: var(--az-200); }
[data-bs-theme='dark'] .form-ventana .seccion { color: var(--az-200); border-bottom-color: var(--borde); }
[data-bs-theme='dark'] .form-ventana .interruptores { background: var(--superficie-2); border-color: var(--borde); }
[data-bs-theme='dark'] .form-ventana .grupo-direcciones { border-top-color: var(--borde); }
[data-bs-theme='dark'] .campo-form .derivado {
  background-color: var(--superficie);
  color: var(--az-200);
  border-color: var(--borde);
  box-shadow: inset 2px 0 0 var(--borde);
}

/* ==============================================================
   PUNTOS DE PARTIDA Y LLEGADA
   La pantalla se lee de izquierda a derecha: primero de que cliente
   son las direcciones y despues, en la tabla, cuales son y para que
   se usan (partida, llegada o las dos cosas).
   ============================================================== */

.puntos {
  display: grid;
  grid-template-columns: minmax(12.5rem, 17rem) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: stretch;
}

/* En la barra del titulo los tres botones van siempre en una sola linea:
   con la lista de clientes al lado, la tabla es lo que tiene que respirar. */
.bloque-direcciones .bloque-titulo { flex-wrap: wrap; }
.bloque-direcciones .bloque-extra .btn { white-space: nowrap; }

/* ------------------------ Lista de clientes ------------------- */

.filtro-clientes {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--borde-suave);
}

.lista-clientes {
  max-height: calc(100vh - 15rem);
  overflow-y: auto;
}

.cliente-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--borde-suave);
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cliente-item:hover { background: var(--superficie-2); }

.cliente-item.activo {
  background: var(--superficie-2);
  border-left-color: var(--tradel-azul);
}

.cliente-nombre {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--texto-titulo);
  line-height: 1.2;
}

.cliente-doc {
  font-family: ui-monospace, 'Consolas', monospace;
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
}

/* Cuantas direcciones tiene, cuantas de partida, cuantas de llegada y
   cuantas le faltan confirmar. En el panel angosto se acomodan en dos
   lineas antes que salirse. */
.cliente-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

/* --------------------- Barra de la tabla ---------------------- */

.barra-puntos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.55rem;
}

.barra-puntos .filtro-usuarios { flex: 1 1 18rem; }

.filtros-uso {
  display: flex;
  gap: 0.25rem;
}

/* Los cuatro filtros de uso: el elegido queda pintado como una pestana. */
.chip-uso {
  padding: 0.12rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
}

.chip-uso:hover { border-color: var(--az-400); color: var(--tradel-azul); }

.chip-uso.activo {
  background: var(--tradel-azul);
  border-color: var(--tradel-azul);
  color: #fff;
}

.conteo-puntos {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* ------------------------- Las tablas ------------------------- */

/* Las direcciones van en dos tablas, en el orden del traslado: arriba de
   donde sale la carga y abajo a donde llega. */
.tabla-puntos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.grupo-puntos {
  border: 1px solid var(--borde-suave);
  border-radius: 0.45rem;
  overflow: hidden;
}

.grupo-cabecera {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--borde-suave);
  border-left: 3px solid var(--tradel-azul);
  background: var(--superficie-2);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-titulo);
}

.grupo-llegada .grupo-cabecera { border-left-color: var(--verde-tinta); }

/* Para que se distingan de un vistazo sin tener que leer el titulo. */
.grupo-partida .grupo-cabecera > .bi { color: var(--tradel-azul); }
.grupo-llegada .grupo-cabecera > .bi { color: var(--verde-tinta); }

/* De que es cada tabla, en chico y al costado del nombre. */
.grupo-ayuda {
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.grupo-conteo { flex: 0 0 auto; }

/* Cada lista se desplaza sola y los titulos quedan a la vista; con las dos
   tablas a la vez se reparten el alto de la ventana. */
.grupo-puntos .table-responsive {
  max-height: calc(50vh - 9rem);
  overflow-y: auto;
}

/* Con un solo filtro de uso encendido, la tabla que queda usa todo el alto. */
.tabla-puntos.un-grupo .table-responsive { max-height: calc(100vh - 21rem); }

.tabla-puntos thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-puntos tbody tr:nth-child(even) > td { background: var(--superficie-2); }

/* Son ocho columnas en media pantalla: se recorta el aire de los costados
   para que entren sin barra horizontal en un monitor de 1280. */
.tabla-puntos .table > :not(caption) > * > * { padding-left: 0.28rem; padding-right: 0.28rem; }

/* La direccion es la columna elastica: se parte donde haga falta para que
   las demas (ubigeo, distrito, local anexo) no se salgan de la pantalla. */
.tabla-puntos .celda-direccion {
  display: block;
  min-width: 10rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.codigo-ubigeo {
  font-family: ui-monospace, 'Consolas', monospace;
  font-weight: 700;
  color: var(--tradel-azul-marino);
}

.celda-uso {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
}

.pastilla-total     { background: var(--superficie-3); color: var(--az-700); }
.pastilla-partida   { background: var(--az-100); color: var(--az-700); }
.pastilla-llegada   { background: var(--verde-tenue); color: var(--verde-tinta); }
.pastilla-pendiente { background: var(--rojo-tenue); color: var(--tradel-rojo-osc); }

/* --------------------- Carga desde el Excel ------------------- */

.importar-puntos .form-text { margin: -0.1rem 0 0.5rem; }
.importar-puntos .form-check { margin-top: 0.6rem; }

.resultado-carga { margin-top: 0.8rem; }

.lista-resultado {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
}

.lista-resultado .pendiente { color: var(--tradel-rojo-osc); }

@media (max-width: 1279.98px) {
  .puntos { grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr); }
  /* El ancho es para las direcciones: la aclaracion de cada tabla se va. */
  .grupo-ayuda { display: none; }
  .grupo-conteo { margin-left: auto; }
}

@media (max-width: 991.98px) {
  .puntos { grid-template-columns: 1fr; }
  .lista-clientes { max-height: 14rem; }
  .grupo-puntos .table-responsive,
  .tabla-puntos.un-grupo .table-responsive { max-height: none; }
}

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

[data-bs-theme='dark'] .cliente-item:hover,
[data-bs-theme='dark'] .cliente-item.activo { background: var(--superficie-2); }
[data-bs-theme='dark'] .cliente-item.activo { border-left-color: var(--az-400); }
[data-bs-theme='dark'] .chip-uso { background: var(--superficie-2); border-color: var(--borde); }
[data-bs-theme='dark'] .chip-uso.activo { background: var(--az-600); border-color: var(--az-600); color: #fff; }
[data-bs-theme='dark'] .codigo-ubigeo { color: var(--az-200); }
/* El verde ya se aclara solo en el tema oscuro; el azul de partida no. */
[data-bs-theme='dark'] .grupo-partida .grupo-cabecera { border-left-color: var(--az-400); }
[data-bs-theme='dark'] .grupo-partida .grupo-cabecera > .bi { color: var(--az-200); }
[data-bs-theme='dark'] .pastilla-total   { background: var(--superficie-3); color: var(--az-200); }
[data-bs-theme='dark'] .pastilla-partida { background: var(--superficie-3); color: var(--az-200); }
[data-bs-theme='dark'] .lista-resultado .pendiente { color: #f0b4bb; }

/* Sobre el azul oscuro el texto de los botones de contorno azul se perdia:
   toma el celeste de la paleta, como los de contorno gris. */
[data-bs-theme='dark'] .btn-outline-primary {
  --bs-btn-color: var(--az-200);
  --bs-btn-border-color: var(--az-500);
  --bs-btn-disabled-color: var(--az-400);
}

/* ==============================================================
   ACCESO REFORZADO
   Paneles de la tarjeta de ingreso, recuperacion del PIN, pestanas
   de la ventana de usuarios y etiquetas de estado de las cuentas.
   ============================================================== */

/* Los tres paneles comparten la tarjeta: se ve uno a la vez. */
.panel-ingreso { margin-top: 0.15rem; }

.tarjeta-ingreso .panel-ingreso .btn-primary { margin-bottom: 0.4rem; }

.ingreso-enlace {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tradel-azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ingreso-enlace:hover { color: var(--az-800); }

.ingreso-nota {
  margin: 0.8rem 0 0;
  font-size: 0.7rem;
  color: var(--texto-tenue);
}

.ingreso-ayuda {
  font-size: 0.78rem;
  color: var(--az-700);
  margin: 0 0 0.8rem;
}

.ingreso-espera {
  font-size: 0.8rem;
  color: var(--az-700);
  margin: 0.4rem 0 0.6rem;
}

/* El numero que hay que tocar en el correo: grande, para leerlo de lejos. */
.numero-grande {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--az-800);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 0.4rem 0;
  margin: 0.3rem auto 0.4rem;
  max-width: 11rem;
  font-variant-numeric: tabular-nums;
}

.pin-generado { font-family: ui-monospace, 'Consolas', monospace; letter-spacing: 0.25em; }

/* Pagina del enlace del correo. */
.tabla-solicitud {
  width: 100%;
  font-size: 0.8rem;
  margin: 0.9rem 0;
  text-align: left;
}

.tabla-solicitud td { padding: 0.15rem 0; }
.tabla-solicitud td:first-child { color: var(--texto-tenue); width: 42%; }
.tabla-solicitud td:last-child { color: var(--az-800); font-weight: 600; }

.opciones-numero {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.opcion-numero {
  flex: 1 1 0;
  font-size: 1.9rem;
  font-weight: 800;
  padding: 0.5rem 0;
  font-variant-numeric: tabular-nums;
}

/* Cabecera: "Mi PIN" junto a "Cerrar sesion". */
.sesion-cabecera .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.45);
}

/* Pestanas de la ventana de usuarios. */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.8rem;
}

.pestana {
  border: 1px solid transparent;
  border-bottom: 0;
  background: none;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-tenue);
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
}

.pestana:hover { color: var(--az-700); }

.pestana.activa {
  color: var(--az-800);
  background: var(--superficie);
  border-color: var(--borde);
}

.pestana-conteo:not(:empty) {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border-radius: 8px;
  font-size: 0.65rem;
  background: var(--tradel-rojo);
  color: #fff;
}

/* Estados de las cuentas. */
.pastilla-bloqueado { background: var(--naranja-tenue); color: var(--naranja-tinta); }
.pastilla-temporal  { background: var(--az-100); color: var(--az-700); }
.pastilla-alterada  { background: var(--tradel-rojo); color: #fff; }

.nota-celda { font-size: 0.62rem; color: var(--naranja-tinta); }

/* Textos largos partidos en lineas en vez de ensanchar la tabla. */
.texto-partido { max-width: 13rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }

.tabla-usuarios td, .tabla-usuarios th { white-space: nowrap; }
.tabla-usuarios .btn-opt[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Contadores del dia en la pestana Actividad. */
.contadores-dia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.contador {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  display: flex;
  flex-direction: column;
}

.contador b { font-size: 1.35rem; color: var(--az-800); line-height: 1.1; }
.contador span { font-size: 0.68rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em; }
.contador-aviso b { color: var(--naranja-tinta); }
.contador-alerta b { color: var(--tradel-rojo-osc); }

.evento-aviso { color: var(--naranja-tinta); font-weight: 600; }
.evento-alerta { color: var(--tradel-rojo-osc); font-weight: 700; }

.ip-bloqueada { display: inline-block; margin: 0.15rem 0.6rem 0.15rem 0; }

.form-alertas { max-width: 46rem; }

.confirmacion-texto { font-size: 0.85rem; }

[data-bs-theme='dark'] .pestana.activa { background: var(--superficie-2); color: var(--az-200); }
[data-bs-theme='dark'] .contador { background: var(--superficie-2); }
[data-bs-theme='dark'] .contador b { color: var(--az-200); }
[data-bs-theme='dark'] .pastilla-temporal { background: var(--superficie-3); color: var(--az-200); }

@media (max-width: 575.98px) {
  .sesion-fecha { display: none; }
  .numero-grande { font-size: 3rem; }
}

/* ==============================================================
   Alta visibilidad
   Parte del personal tiene baja vision: etiquetas, titulos de bloque,
   separaciones y textos de ayuda van mas oscuros y marcados en todas
   las ventanas. Se resuelve aca, al final, para que valga para todo el
   sistema sin tocar ventana por ventana.
   ============================================================== */

:root {
  /* Textos secundarios (etiquetas, ayudas, rotulos de columnas): del gris
     azulado claro al marino de los titulos, apenas aclarado. */
  --bs-secondary-color: #1e3a5f;
  --texto-tenue: #1e3a5f;
  --tradel-gris: #3d5675;

  /* Bordes y separaciones mas visibles. */
  --borde: #93b3d4;
  --borde-suave: #b5cce4;
  --bs-border-color: var(--borde);

  /* Campos: los vacios y opcionales tambien se leen con claridad. */
  --campo-lleno-borde: var(--az-500);
  --campo-opcional-borde: #a9c3de;
  --campo-opcional-color: #4a6182;
  --campo-falta-borde: #d98a92;
  --campo-falta-color: #8a2f3a;
}

[data-bs-theme='dark'] {
  --bs-secondary-color: #c9dcf0;
  --texto-tenue: #c9dcf0;
  --tradel-gris: #a9c1dc;
  --borde: #2f5f94;
  --borde-suave: #24507f;
  --bs-border-color: var(--borde);
  --campo-lleno-borde: #3a6ba3;
  --campo-opcional-borde: #2f5f94;
  --campo-opcional-color: #b0c8e2;
}

/* Etiquetas de los campos: mismo tono marino del titulo de la ventana. */
.campo > label,
.campo-form > label,
.form-label,
.col-form-label,
.filtro-usuarios label {
  color: var(--texto-titulo);
  font-weight: 600;
  /* Sin el espaciado extra: en negrita la etiqueta sigue entrando en su
     columna sin partirse. */
  letter-spacing: 0;
}

/* Titulos de bloque y de tarjeta: banda celeste con filo marcado. */
.bloque-titulo,
[data-bs-theme='dark'] .bloque-titulo {
  background: linear-gradient(180deg, var(--az-200), var(--az-100));
  border-bottom: 1px solid var(--az-400);
  box-shadow: inset 4px 0 0 var(--az-600);
  color: var(--az-800);
  font-size: 0.75rem;
}
.bloque-titulo i { color: var(--az-700); }

.card-header {
  background: linear-gradient(180deg, var(--az-200), var(--az-100));
  border-bottom-color: var(--az-400);
  color: var(--az-800);
  font-weight: 700;
}

.bloque { border-color: var(--az-300); }

[data-bs-theme='dark'] .bloque-titulo,
[data-bs-theme='dark'] .card-header {
  background: linear-gradient(180deg, #144277, #0e3563);
  border-bottom-color: var(--az-500);
  color: #ffffff;
}
[data-bs-theme='dark'] .bloque-titulo i { color: var(--az-200); }
[data-bs-theme='dark'] .bloque { border-color: #2f5f94; }

/* Textos de ayuda: legibles, no apagados. */
.form-text,
.text-muted,
.text-body-secondary,
.text-secondary {
  color: var(--bs-secondary-color) !important;
}
.form-control::placeholder { color: #4f6688; opacity: 1; }
[data-bs-theme='dark'] .form-control::placeholder { color: #9fb9d6; }

/* Correos: estado de despacho de cada guia del cliente (una por linea). */
.estado-gre { display: flex; align-items: center; gap: 0.3rem; line-height: 1.6; }
.estado-gre .badge { font-size: 0.66rem; }

/* Campos de clave: son type="text" (para que el navegador no ofrezca
   guardarlas ni sugiera claves guardadas) y se tapan con puntos. */
input[data-clave] { -webkit-text-security: disc; text-security: disc; }
input[data-clave].clave-visible { -webkit-text-security: none; text-security: none; }

/* --- Crear cuenta con Google (pantalla de ingreso y /registro.html) --- */
.ingreso-registro {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--bs-border-color);
}
.ingreso-separador {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  background: #fff;
}
.registro-google {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.75rem 0 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
  text-align: left;
  font-size: 0.85rem;
}
.registro-google b { font-size: 0.95rem; }
.btn-google + .btn-google { margin-top: 0.45rem; }
.codigo-registro {
  font-size: 1.6rem !important;
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============================ Celular ============================ */
/* El sistema se usa desde la unidad en movimiento: en pantallas angostas
   todo va en una columna, con controles grandes para el dedo, las tablas
   se leen como tarjetas (movil.js les pone el titulo a cada dato) y una
   barra fija abajo lleva a lo que mas se usa. En la PC no cambia nada. */

.barra-movil { display: none; }

@media (max-width: 767.98px) {
  /* El fondo "fijo" no se pinta bien en los celulares. */
  body { background-attachment: scroll; }

  /* --- Cabecera: solo iconos en los botones, titulo en una linea --- */
  .encabezado {
    gap: 0.6rem;
    min-height: 52px;
    padding-top: env(safe-area-inset-top);
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
  .encabezado > div:not(.sesion-cabecera) { min-width: 0; }
  .encabezado h1 {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sesion-cabecera { gap: 0.4rem; }
  .sesion-cabecera .texto-boton { display: none; }
  .sesion-cabecera .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  #btnMenu { width: 40px; height: 40px; font-size: 1.15rem; }

  .cuerpo {
    padding: 0.75rem max(0.6rem, env(safe-area-inset-left)) calc(5.2rem + env(safe-area-inset-bottom));
  }
  .cuerpo > .card > .card-body,
  .cuerpo .card-body { padding: 0.75rem; }

  /* --- Controles comodos para el dedo (16px evita el zoom de iPhone) --- */
  .app .form-control,
  .app .form-select,
  .modal .form-control,
  .modal .form-select,
  .pantalla-ingreso .form-control {
    font-size: 16px;
    min-height: 44px;
  }
  .app .input-group > .btn,
  .modal .input-group > .btn { min-width: 44px; }
  .app .btn:not(.btn-opt):not(.btn-close),
  .modal .btn:not(.btn-opt):not(.btn-close) { min-height: 42px; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .form-switch .form-check-input { width: 2.4em; }
  .form-check { min-height: 2rem; display: flex; align-items: center; gap: 0.4rem; }
  .form-check .form-check-input { margin-top: 0; }

  /* --- Formularios: la etiqueta arriba del control --- */
  .campo,
  .bloque .campo,
  .bloque .campos-en-linea .campo {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    margin-bottom: 0.15rem;
  }
  .campo > label { text-align: left; }
  #transportista, #fecha_emision, #serie, #fecha_traslado { max-width: none; }
  .campo-form { flex-direction: column; align-items: stretch !important; }
  .campo-form > label { text-align: left !important; width: auto !important; }
  .campo-form > .campo-corto,
  .campo-form > select.campo-corto { max-width: none; }

  /* Cabecera de la guia: boton, titulo y estado en fila, sin encimarse. */
  .cabecera-guia {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left !important;
  }
  .cabecera-guia > #btnNueva,
  .cabecera-guia > #badgeEstado {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  .cabecera-guia > .titulo-guia { flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.2; }
  .cabecera-guia > #badgeEstado { order: 3; }

  .bloque-extra { flex-wrap: wrap; gap: 0.4rem; }
  .bloque-extra input[type='file'] { flex: 1 1 100%; }
  .barra-acciones { flex-wrap: wrap; }
  .barra-acciones .pista-acciones { flex: 1 1 100%; }
  .barra-acciones .btn { flex: 1 1 100%; min-height: 48px; font-size: 1rem; }
  .botones-complemento { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .botones-complemento .btn { width: 100%; }

  /* Filtros de los listados: un control por linea, botones a lo ancho. */
  .fila-filtro { flex-wrap: wrap; }
  .fila-filtro > * { flex: 1 1 100%; max-width: none !important; }

  /* --- Tablas como tarjetas --- */
  .table-responsive:has(> .tabla-tarjetas),
  .tabla-seleccion:has(> .tabla-tarjetas) { overflow: visible; }
  table.tabla-tarjetas,
  .tabla-tarjetas > tbody,
  .tabla-tarjetas > tfoot,
  .tabla-tarjetas > tbody > tr,
  .tabla-tarjetas > tfoot > tr,
  .tabla-tarjetas > tbody > tr > td,
  .tabla-tarjetas > tfoot > tr > td {
    display: block;
    width: 100% !important;
  }
  .tabla-tarjetas { border: 0 !important; background: transparent; }
  .tabla-tarjetas > thead { display: none; }
  .tabla-tarjetas > tbody > tr {
    position: relative;
    margin-bottom: 0.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--borde) !important;
    border-radius: 10px;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(var(--az-900-rgb), 0.08);
  }
  /* El titulo va a la izquierda (posicion absoluta) y el contenido de la
     celda, sea lo que sea, a la derecha. */
  .tabla-tarjetas > tbody > tr > td {
    position: relative;
    min-height: 2rem;
    padding: 0.35rem 0 0.35rem calc(38% + 0.6rem) !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--bs-border-color) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .tabla-tarjetas > tbody > tr > td:last-child { border-bottom: 0 !important; }
  .tabla-tarjetas > tbody > tr > td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 38%;
    line-height: 1.2;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
  }
  .tabla-tarjetas > tbody > tr > td.sin-etiqueta { padding-left: 0 !important; }
  .tabla-tarjetas > tbody > tr > td.sin-etiqueta::before { content: none; }
  /* Mensaje de "sin registros": sin recuadro. */
  .tabla-tarjetas > tbody > tr:has(> td[colspan]:only-child) {
    border-style: dashed !important;
    box-shadow: none;
    text-align: center;
  }
  .tabla-tarjetas > tbody > tr > td[colspan] { text-align: center !important; }
  /* Botones de accion de la tarjeta: en fila, faciles de tocar. */
  .tabla-tarjetas td .btn-opt { min-width: 40px; min-height: 40px; }
  .tabla-tarjetas > tfoot > tr > td { border: 0 !important; padding: 0.3rem 0 !important; text-align: left !important; }
  .tabla-tarjetas > tfoot .btn { width: 100%; margin: 0.4rem 0 0 !important; }

  /* --- Ventanas a pantalla completa --- */
  .modal-dialog:not(.ventana-angosta) {
    margin: 0;
    max-width: none !important;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
  .modal-dialog:not(.ventana-angosta) > .modal-content {
    min-height: 100%;
    border-radius: 0 !important;
    border: 0;
  }
  .modal-dialog-scrollable:not(.ventana-angosta) { height: 100%; max-height: none; }
  .modal-dialog-scrollable:not(.ventana-angosta) > .modal-content { max-height: 100%; height: 100%; }
  .ventana-pie {
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .ventana-pie .btn { flex: 1 1 auto; }
  .ventana-pie .pista { display: none; }
  .ventana-cabecera { flex-wrap: wrap; gap: 0.4rem; }

  /* Avisos arriba de la barra de abajo. */
  #avisos { bottom: calc(4.4rem + env(safe-area-inset-bottom)) !important; left: 0; right: 0; }
  #avisos .toast { width: 100%; }

  /* --- Barra de abajo --- */
  .barra-movil {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    padding: 0.25rem max(0.25rem, env(safe-area-inset-right)) calc(0.25rem + env(safe-area-inset-bottom)) max(0.25rem, env(safe-area-inset-left));
    background: var(--cabecera);
    box-shadow: 0 -4px 18px rgba(var(--az-950-rgb), 0.3);
  }
  .barra-movil > a,
  .barra-movil > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }
  .barra-movil .bi { font-size: 1.3rem; line-height: 1; }
  .barra-movil > .activa { color: #fff; background: rgba(255, 255, 255, 0.12); }
  .barra-movil > a:active,
  .barra-movil > button:active { background: rgba(255, 255, 255, 0.2); }
  /* El menu lateral cubre tambien la barra. */
  .barra-lateral { z-index: 1046; }

  /* --- Ingreso --- */
  .pantalla-ingreso { padding: 1rem 0.75rem; align-items: flex-start; }
  .tarjeta-ingreso { padding: 1.3rem 1.1rem 1.2rem; }
}
@media (max-width: 767.98px) {
  .bloque-cuerpo.sin-relleno { padding: 0.5rem; }
}