/* =========================================================================
   DeCA Truck - sistema de diseño
   =========================================================================

   Lenguaje visual: sala de control logistica. Base grafito/azul noche que
   transmite solidez documental, ambar de señalizacion vial como acento (el
   mismo codigo de color que un panel ADR) y una capa de profundidad hecha
   con sombras en dos niveles en lugar de bordes duros.

   Reglas que sigue todo el fichero:
   - Los datos de documento (numero de carta, CIF, DNI, matricula) van SIEMPRE
     en monoespaciada y con cifras tabulares: es lo que hace que una tabla de
     albaranes se lea de un vistazo.
   - Nada de recursos externos: colores, texturas e iconografia se resuelven
     con CSS y SVG en linea, para que la aplicacion cargue igual sin internet.
   - Toda animacion se desactiva con prefers-reduced-motion.
   ========================================================================= */

:root {
  /* ---- Lienzo y superficies ---- */
  --cp-canvas: #eef1f6;
  --cp-canvas-deep: #e4e9f0;
  --cp-surface: #ffffff;
  --cp-surface-2: #f7f9fc;
  --cp-surface-3: #eef2f7;

  /* ---- Tinta ---- */
  --cp-ink: #101827;
  --cp-slate: #334155;
  --cp-slate-dark: #0f172a;
  --cp-muted: #64748b;
  --cp-muted-soft: #94a3b8;
  --cp-border: #dfe5ee;
  --cp-border-strong: #c8d2e0;

  /* ---- Acento ambar (señal) ---- */
  --cp-amber: #f5a524;
  --cp-amber-dark: #d4860a;
  --cp-amber-deep: #8a5606;
  --cp-amber-tint: rgba(245, 165, 36, 0.16);
  --cp-amber-glow: rgba(245, 165, 36, 0.38);

  /* ---- Azul de marca (enlaces, foco, informacion) ---- */
  --cp-brand: #2563eb;
  --cp-brand-dark: #1d4ed8;
  --cp-brand-tint: rgba(37, 99, 235, 0.10);

  /* ---- Estados ---- */
  --cp-route: #17855c;
  --cp-route-tint: rgba(23, 133, 92, 0.13);
  --cp-danger: #d0342c;
  --cp-danger-tint: rgba(208, 52, 44, 0.11);
  --cp-warn: #b45309;
  --cp-warn-tint: rgba(245, 158, 11, 0.14);

  /* ---- Tipografia ---- */
  --cp-font-sans: "Segoe UI Variable Display", "Segoe UI", -apple-system,
                  BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;

  /* ---- Radios ---- */
  --cp-r-sm: 8px;
  --cp-r-md: 12px;
  --cp-r-lg: 16px;
  --cp-r-xl: 22px;
  --cp-r-pill: 999px;

  /* ---- Sombras en dos niveles: contacto + difusion ---- */
  --cp-sh-xs: 0 1px 2px rgba(16, 24, 39, 0.06);
  --cp-sh-sm: 0 1px 2px rgba(16, 24, 39, 0.06), 0 2px 8px rgba(16, 24, 39, 0.05);
  --cp-sh-md: 0 2px 4px rgba(16, 24, 39, 0.06), 0 10px 24px rgba(16, 24, 39, 0.08);
  --cp-sh-lg: 0 4px 8px rgba(16, 24, 39, 0.07), 0 22px 48px rgba(16, 24, 39, 0.13);
  --cp-sh-xl: 0 8px 16px rgba(16, 24, 39, 0.10), 0 40px 80px rgba(16, 24, 39, 0.20);
  --cp-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);
  --cp-ring-amber: 0 0 0 4px rgba(245, 165, 36, 0.28);

  /* ---- Movimiento ---- */
  --cp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cp-t-fast: 140ms;
  --cp-t: 220ms;
  --cp-t-slow: 420ms;

  /* ---- Degradados reutilizables ---- */
  --cp-grad-brand: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #020617 100%);
  --cp-grad-amber: linear-gradient(135deg, #fbbf4a 0%, #f5a524 45%, #e08c0d 100%);
  --cp-grad-surface: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

/* =========================================================================
   1. Base
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--cp-canvas);
  /* Retícula tenue + dos halos de color: da profundidad sin usar imagenes. */
  background-image:
    radial-gradient(900px 480px at 12% -8%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(760px 420px at 92% 0%, rgba(245, 165, 36, 0.12), transparent 62%),
    linear-gradient(rgba(15, 23, 42, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.028) 1px, transparent 1px);
  background-size: auto, auto, 30px 30px, 30px 30px;
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--cp-ink);
  font-family: var(--cp-font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cp-ink);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
h2, .h2 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem); }

p { margin-bottom: 0.75rem; }

a {
  color: var(--cp-brand);
  text-decoration: none;
  transition: color var(--cp-t-fast) var(--cp-ease);
}
a:hover { color: var(--cp-brand-dark); }

.text-muted { color: var(--cp-muted) !important; }

hr {
  border-color: var(--cp-border);
  opacity: 1;
}

::selection {
  background: var(--cp-amber-tint);
  color: var(--cp-ink);
}

/* Barra de desplazamiento discreta */
* { scrollbar-width: thin; scrollbar-color: var(--cp-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--cp-border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--cp-r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--cp-muted-soft); background-clip: content-box; }

/* ---------- Foco visible (accesibilidad) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cp-brand);
  outline-offset: 2px;
  border-radius: var(--cp-r-sm);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--cp-brand);
  box-shadow: var(--cp-ring);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   2. Animaciones
   ========================================================================= */

@keyframes cp-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cp-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes cp-slide-right {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cp-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--cp-amber-glow); }
  50%      { box-shadow: 0 0 0 10px rgba(245, 165, 36, 0); }
}
@keyframes cp-spin {
  to { transform: rotate(360deg); }
}
@keyframes cp-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cp-road-dash {
  to { background-position-x: -120px; }
}

/* Entrada escalonada del contenido principal */
main > * {
  animation: cp-fade-up var(--cp-t-slow) var(--cp-ease-out) both;
}
main > *:nth-child(1) { animation-delay: 0ms; }
main > *:nth-child(2) { animation-delay: 45ms; }
main > *:nth-child(3) { animation-delay: 90ms; }
main > *:nth-child(4) { animation-delay: 135ms; }
main > *:nth-child(5) { animation-delay: 180ms; }
main > *:nth-child(n+6) { animation-delay: 220ms; }

.cp-reveal {
  animation: cp-fade-up var(--cp-t-slow) var(--cp-ease-out) both;
}

/* =========================================================================
   3. Marca y logotipo
   ========================================================================= */

.cp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.cp-logo__mark {
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(245, 165, 36, 0.35));
  transition: transform var(--cp-t) var(--cp-ease-out);
}
.cp-logo:hover .cp-logo__mark { transform: translateY(-1px) rotate(-3deg); }
.cp-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
}
.cp-logo__name {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.cp-logo__name em {
  font-style: normal;
  color: var(--cp-amber);
}
.cp-logo__tag {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
}
/* Variante sobre fondo claro */
.cp-logo--dark .cp-logo__name { color: var(--cp-ink); }
.cp-logo--dark .cp-logo__tag { color: var(--cp-muted); }

/* =========================================================================
   4. Navegacion
   ========================================================================= */

.navbar-cp {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0.6rem 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: box-shadow var(--cp-t) var(--cp-ease), background var(--cp-t) var(--cp-ease);
}
/* Franja de señalizacion: el detalle que ancla la marca al dominio */
.navbar-cp::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--cp-amber) 0 28px, transparent 28px 46px);
  background-size: 46px 3px;
  opacity: 0.85;
}
.navbar-cp.is-stuck {
  background: rgba(15, 23, 42, 0.96);
  box-shadow: var(--cp-sh-md);
}

.navbar-cp .navbar-brand { padding: 0; margin-right: 1.75rem; }

.navbar-cp .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  margin: 0 0.1rem;
  border-radius: var(--cp-r-pill);
  color: rgba(255, 255, 255, 0.74);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--cp-t-fast) var(--cp-ease),
              background var(--cp-t-fast) var(--cp-ease);
}
.navbar-cp .nav-link i { font-size: 1rem; opacity: 0.9; }
.navbar-cp .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
.navbar-cp .nav-link.active {
  color: var(--cp-slate-dark);
  background: var(--cp-amber);
  box-shadow: 0 4px 14px rgba(245, 165, 36, 0.35);
}
.navbar-cp .nav-link.active i { opacity: 1; }

.navbar-cp .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
  padding: 0.35rem 0.6rem;
}
.navbar-cp .navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--cp-amber); }
.navbar-cp .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* Menu de usuario */
.cp-user {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border-radius: var(--cp-r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background var(--cp-t-fast) var(--cp-ease);
}
.cp-user:hover { background: rgba(255, 255, 255, 0.16); }
.cp-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cp-grad-amber);
  color: var(--cp-slate-dark);
  font-size: 0.9rem;
}
.cp-user__name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-cp .dropdown-menu {
  margin-top: 0.6rem;
  padding: 0.4rem;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  box-shadow: var(--cp-sh-lg);
  animation: cp-scale-in var(--cp-t) var(--cp-ease-out);
}
.dropdown-item {
  border-radius: var(--cp-r-sm);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  transition: background var(--cp-t-fast) var(--cp-ease);
}
.dropdown-item:hover { background: var(--cp-surface-3); }

/* =========================================================================
   5. Cabecera de pagina
   ========================================================================= */

.cp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 1.5rem;
}
.cp-page-head__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
}
.cp-page-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: var(--cp-r-md);
  background: var(--cp-grad-brand);
  color: var(--cp-amber);
  font-size: 1.35rem;
  box-shadow: var(--cp-sh-md);
}
.cp-page-head__sub {
  margin: 0.25rem 0 0;
  color: var(--cp-muted);
  font-size: 0.9rem;
}
.cp-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Migas de pan */
.cp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--cp-muted);
}
.cp-breadcrumb li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cp-breadcrumb li + li::before {
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons";
  font-size: 0.6rem;
  opacity: 0.55;
}
.cp-breadcrumb a { color: var(--cp-muted); font-weight: 600; }
.cp-breadcrumb a:hover { color: var(--cp-brand); }
.cp-breadcrumb .active { color: var(--cp-ink); font-weight: 700; }

/* =========================================================================
   6. Tarjetas
   ========================================================================= */

.card {
  position: relative;
  background: var(--cp-grad-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-sm);
  transition: box-shadow var(--cp-t) var(--cp-ease),
              transform var(--cp-t) var(--cp-ease-out),
              border-color var(--cp-t) var(--cp-ease);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border-bottom: 1px solid var(--cp-border);
  padding: 0.95rem 1.25rem;
  border-radius: var(--cp-r-lg) var(--cp-r-lg) 0 0 !important;
}
.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--cp-surface-2);
  border-top: 1px solid var(--cp-border);
  border-radius: 0 0 var(--cp-r-lg) var(--cp-r-lg) !important;
}

/* Tarjeta que es un enlace: se eleva al pasar por encima */
a.card {
  color: inherit;
  overflow: hidden;
}
a.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cp-grad-amber);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--cp-t) var(--cp-ease-out);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cp-sh-lg);
  border-color: var(--cp-border-strong);
}
a.card:hover::before { transform: scaleY(1); }

/* Tarjeta de acceso rapido (paneles) */
.cp-quick {
  display: block;
  height: 100%;
}
.cp-quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.85rem;
  border-radius: var(--cp-r-md);
  background: var(--cp-amber-tint);
  color: var(--cp-amber-deep);
  font-size: 1.4rem;
  transition: transform var(--cp-t) var(--cp-ease-out),
              background var(--cp-t) var(--cp-ease);
}
.cp-quick:hover .cp-quick__icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--cp-grad-amber);
  color: var(--cp-slate-dark);
}
.cp-quick__arrow {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  color: var(--cp-muted-soft);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--cp-t) var(--cp-ease), transform var(--cp-t) var(--cp-ease-out);
}
.cp-quick:hover .cp-quick__arrow {
  opacity: 1;
  transform: none;
  color: var(--cp-amber-dark);
}

/* =========================================================================
   7. Panel de metricas
   ========================================================================= */

.stat-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  background: var(--cp-grad-surface);
  box-shadow: var(--cp-sh-sm);
  transition: transform var(--cp-t) var(--cp-ease-out), box-shadow var(--cp-t) var(--cp-ease);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cp-sh-lg);
}
/* Halo decorativo en la esquina */
.stat-card::after {
  content: "";
  position: absolute;
  top: -55px;
  right: -55px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cp-amber-tint) 0%, transparent 70%);
  pointer-events: none;
}
.stat-card__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.69rem;
  font-weight: 800;
  color: var(--cp-muted);
}
.stat-card__value {
  font-family: var(--cp-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cp-ink);
}
.stat-card__icon {
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--cp-r-md);
  background: var(--cp-surface-3);
  color: var(--cp-slate);
  font-size: 1.2rem;
}
.stat-card__foot {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--cp-muted);
}
/* Acentos por tipo de metrica */
.stat-card--amber .stat-card__icon { background: var(--cp-amber-tint); color: var(--cp-amber-deep); }
.stat-card--brand .stat-card__icon { background: var(--cp-brand-tint); color: var(--cp-brand); }
.stat-card--route .stat-card__icon { background: var(--cp-route-tint); color: var(--cp-route); }

/* =========================================================================
   8. Botones
   ========================================================================= */

.btn {
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--cp-r-sm);
  padding: 0.5rem 1rem;
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  transition: transform var(--cp-t-fast) var(--cp-ease-out),
              box-shadow var(--cp-t) var(--cp-ease),
              background var(--cp-t-fast) var(--cp-ease),
              color var(--cp-t-fast) var(--cp-ease),
              border-color var(--cp-t-fast) var(--cp-ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; }

/* Primario: degradado ambar con brillo que barre al pasar por encima */
.btn-cp-primary {
  position: relative;
  overflow: hidden;
  background: var(--cp-grad-amber);
  border: 1px solid var(--cp-amber-dark);
  color: var(--cp-slate-dark);
  box-shadow: 0 1px 2px rgba(16, 24, 39, 0.10), 0 6px 16px rgba(245, 165, 36, 0.32);
}
.btn-cp-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transition: left var(--cp-t-slow) var(--cp-ease);
}
.btn-cp-primary:hover {
  background: linear-gradient(135deg, #fcc25f 0%, #f5a524 50%, #d4860a 100%);
  border-color: var(--cp-amber-dark);
  color: var(--cp-slate-dark);
  box-shadow: 0 2px 4px rgba(16, 24, 39, 0.10), 0 12px 26px rgba(245, 165, 36, 0.42);
  transform: translateY(-1px);
}
.btn-cp-primary:hover::after { left: 140%; }
.btn-cp-primary:active { transform: translateY(0); }

.btn-cp-outline {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border-strong);
  color: var(--cp-slate);
  box-shadow: var(--cp-sh-xs);
}
.btn-cp-outline:hover {
  background: var(--cp-slate-dark);
  border-color: var(--cp-slate-dark);
  color: #fff;
  box-shadow: var(--cp-sh-md);
  transform: translateY(-1px);
}

.btn-cp-danger {
  background: var(--cp-surface);
  border: 1px solid rgba(208, 52, 44, 0.45);
  color: var(--cp-danger);
  box-shadow: var(--cp-sh-xs);
}
.btn-cp-danger:hover {
  background: var(--cp-danger);
  border-color: var(--cp-danger);
  color: #fff;
  box-shadow: 0 8px 20px rgba(208, 52, 44, 0.32);
  transform: translateY(-1px);
}

.btn-cp-success {
  background: var(--cp-surface);
  border: 1px solid rgba(23, 133, 92, 0.45);
  color: var(--cp-route);
  box-shadow: var(--cp-sh-xs);
}
.btn-cp-success:hover {
  background: var(--cp-route);
  border-color: var(--cp-route);
  color: #fff;
  box-shadow: 0 8px 20px rgba(23, 133, 92, 0.30);
  transform: translateY(-1px);
}

.btn-cp-link {
  background: none;
  border: none;
  padding: 0.5rem 0.6rem;
  color: var(--cp-brand);
  font-weight: 650;
  text-decoration: none;
}
.btn-cp-link:hover {
  color: var(--cp-brand-dark);
  background: var(--cp-brand-tint);
  border-radius: var(--cp-r-sm);
}

/* Boton fantasma para acciones de fila */
.btn-cp-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cp-muted);
  padding: 0.3rem 0.55rem;
}
.btn-cp-ghost:hover {
  background: var(--cp-surface-3);
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

/* Estado ocupado tras enviar un formulario */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn.is-loading::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cp-spin 0.6s linear infinite;
}

/* =========================================================================
   9. Formularios
   ========================================================================= */

.form-label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--cp-slate);
  margin-bottom: 0.3rem;
}
.form-control,
.form-select {
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-r-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--cp-ink);
  box-shadow: inset 0 1px 2px rgba(16, 24, 39, 0.035);
  transition: border-color var(--cp-t-fast) var(--cp-ease),
              box-shadow var(--cp-t-fast) var(--cp-ease),
              background var(--cp-t-fast) var(--cp-ease);
}
.form-control::placeholder { color: var(--cp-muted-soft); }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--cp-muted-soft); }
.form-control[readonly] {
  background-color: var(--cp-surface-3);
  color: var(--cp-slate);
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--cp-danger);
  background-image: none;
  box-shadow: 0 0 0 3px var(--cp-danger-tint);
}
.invalid-feedback {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cp-danger);
}
.form-text {
  font-size: 0.78rem;
  color: var(--cp-muted);
}

.form-check-input {
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.22em;
  border: 1.5px solid var(--cp-border-strong);
  transition: background-color var(--cp-t-fast) var(--cp-ease),
              border-color var(--cp-t-fast) var(--cp-ease);
}
.form-check-input:checked {
  background-color: var(--cp-brand);
  border-color: var(--cp-brand);
}
.form-check-label { font-size: 0.88rem; }
.form-switch .form-check-input:checked {
  background-color: var(--cp-route);
  border-color: var(--cp-route);
}

.input-group-text {
  background: var(--cp-surface-3);
  border-color: var(--cp-border-strong);
  color: var(--cp-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Campos de dato de documento: monoespaciada tambien al escribir */
input.doc-number { font-family: var(--cp-font-mono); letter-spacing: 0.04em; }

/* =========================================================================
   10. Tablas
   ========================================================================= */

.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
  color: var(--cp-ink);
  font-size: 0.885rem;
}
.table > thead > tr > th {
  background: var(--cp-surface-2);
  border-bottom: 1px solid var(--cp-border);
  padding: 0.7rem 1rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--cp-muted);
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--cp-border);
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr {
  transition: background var(--cp-t-fast) var(--cp-ease);
}
/* Solo un sombreado gris uniforme: sin marcas de color por celda */
.table-hover > tbody > tr:hover > * {
  background-color: var(--cp-surface-3);
  --bs-table-accent-bg: transparent;
}
.table tfoot td {
  background: var(--cp-surface-2);
  font-weight: 700;
}
/*
  La tabla dentro de una tarjeta hereda las esquinas redondeadas. No se usa
  overflow:hidden en la tarjeta porque recortaria las listas desplegables del
  buscador inteligente: se redondean las celdas de los extremos.
*/
.card > .table-responsive { border-radius: var(--cp-r-lg); }
.card > .table-responsive > .table > thead > tr > th:first-child { border-top-left-radius: var(--cp-r-lg); }
.card > .table-responsive > .table > thead > tr > th:last-child { border-top-right-radius: var(--cp-r-lg); }
.card > .table-responsive > .table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--cp-r-lg); }
.card > .table-responsive > .table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--cp-r-lg); }

/* Estado vacio */
.cp-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--cp-muted);
}
.cp-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--cp-surface-3);
  color: var(--cp-muted-soft);
  font-size: 1.9rem;
}

/* =========================================================================
   11. Insignias
   ========================================================================= */

.badge-cp {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.3em 0.65em;
  border-radius: var(--cp-r-pill);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-cp-standard {
  background: var(--cp-brand-tint);
  color: var(--cp-brand-dark);
  border-color: rgba(37, 99, 235, 0.22);
}
.badge-cp-adr {
  background: var(--cp-amber-tint);
  color: var(--cp-amber-deep);
  border-color: rgba(212, 134, 10, 0.45);
}
.badge-cp-activo {
  background: var(--cp-route-tint);
  color: var(--cp-route);
  border-color: rgba(23, 133, 92, 0.28);
}
.badge-cp-inactivo {
  background: var(--cp-danger-tint);
  color: var(--cp-danger);
  border-color: rgba(208, 52, 44, 0.26);
}
/* Punto de estado delante de la etiqueta */
.badge-cp-activo::before,
.badge-cp-inactivo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-cp-activo::before { box-shadow: 0 0 0 3px var(--cp-route-tint); }

.badge-cp-role-system-admin {
  background: rgba(16, 24, 39, 0.09);
  color: var(--cp-ink);
  border-color: rgba(16, 24, 39, 0.28);
}
.badge-cp-role-company-admin {
  background: var(--cp-brand-tint);
  color: var(--cp-brand-dark);
  border-color: rgba(37, 99, 235, 0.22);
}
.badge-cp-role-employee {
  background: var(--cp-route-tint);
  color: var(--cp-route);
  border-color: rgba(23, 133, 92, 0.24);
}

/* =========================================================================
   12. Etiquetas de seccion tipo manifiesto
   ========================================================================= */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--cp-slate);
}
.section-eyebrow__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--cp-r-sm);
  background: var(--cp-grad-brand);
  color: var(--cp-amber);
  font-family: var(--cp-font-mono);
  font-size: 0.78rem;
  box-shadow: var(--cp-sh-xs);
}

/* ---------- Datos de documento ---------- */
.doc-number {
  font-family: var(--cp-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.doc-number-lg {
  font-family: var(--cp-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cp-ink);
}

/* =========================================================================
   13. Autenticacion
   ========================================================================= */

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  background: var(--cp-grad-brand);
}
/* Dos halos que respiran muy lentamente, y una carretera de rayas al pie */
.auth-shell::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(620px 620px at 18% 22%, rgba(245, 165, 36, 0.20), transparent 60%),
    radial-gradient(680px 680px at 82% 78%, rgba(37, 99, 235, 0.24), transparent 62%);
  animation: cp-drift 22s var(--cp-ease) infinite;
  pointer-events: none;
}
.auth-shell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--cp-amber) 0 60px, transparent 60px 120px);
  background-size: 120px 6px;
  opacity: 0.5;
  animation: cp-road-dash 3.5s linear infinite;
}

.auth-layout {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border-radius: var(--cp-r-xl);
  overflow: hidden;
  box-shadow: var(--cp-sh-xl);
  animation: cp-scale-in var(--cp-t-slow) var(--cp-ease-out) both;
}

/* Panel de presentacion */
.auth-hero {
  position: relative;
  padding: 3rem 2.75rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(6px);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.auth-hero__title {
  margin: 2.25rem 0 0.85rem;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #fff;
}
.auth-hero__title span { color: var(--cp-amber); }
.auth-hero__text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  max-width: 38ch;
}
.auth-hero__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.auth-hero__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.86);
  animation: cp-slide-right var(--cp-t-slow) var(--cp-ease-out) both;
}
.auth-hero__list li:nth-child(1) { animation-delay: 120ms; }
.auth-hero__list li:nth-child(2) { animation-delay: 200ms; }
.auth-hero__list li:nth-child(3) { animation-delay: 280ms; }
.auth-hero__list i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--cp-r-sm);
  background: rgba(245, 165, 36, 0.18);
  color: var(--cp-amber);
  font-size: 0.85rem;
}
.auth-hero__foot {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Panel del formulario */
.auth-card {
  width: 100%;
  background: var(--cp-surface);
  padding: 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-card__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.auth-card__sub {
  color: var(--cp-muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
/*
  Tarjeta suelta, sin el panel de presentacion al lado: la usan las pantallas
  de recuperar contraseña y las de error. Necesita su propio ancho maximo y su
  sombra, que en el login los aporta el contenedor de la rejilla.
*/
.auth-shell > .auth-card {
  position: relative;
  z-index: 1;
  max-width: 470px;
  border-radius: var(--cp-r-xl);
  box-shadow: var(--cp-sh-xl);
  animation: cp-scale-in var(--cp-t-slow) var(--cp-ease-out) both;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  color: var(--cp-ink);
}
.auth-brand i { color: var(--cp-amber); font-size: 1.4rem; }

/* Campo con icono delante */
.cp-field { position: relative; }
.cp-field > i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-muted-soft);
  font-size: 0.95rem;
  pointer-events: none;
  transition: color var(--cp-t-fast) var(--cp-ease);
}
.cp-field .form-control { padding-left: 2.4rem; }
.cp-field .form-control:focus + i,
.cp-field:focus-within > i { color: var(--cp-brand); }

/* Pantallas estrechas: el panel de presentacion estorba mas que ayuda */
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; max-width: 460px; }
  .auth-hero { display: none; }
  .auth-card { padding: 2.25rem 1.75rem; }
}

/* =========================================================================
   14. Ficha de Carta de Porte
   ========================================================================= */

.card-ticket__divider {
  position: relative;
  text-align: center;
  border-top: 2px dashed var(--cp-border-strong);
  margin: 2.25rem 0 1.5rem;
}
/* Muescas laterales: el guiño al talon de billete */
.card-ticket__divider::before,
.card-ticket__divider::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cp-canvas);
  border: 1px solid var(--cp-border);
}
.card-ticket__divider::before { left: -1.9rem; }
.card-ticket__divider::after { right: -1.9rem; }
.card-ticket__divider span {
  position: relative;
  top: -0.8em;
  background: var(--cp-surface);
  padding: 0 0.85rem;
  font-family: var(--cp-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cp-muted);
}

.qr-frame {
  display: inline-block;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  box-shadow: var(--cp-sh-md);
  transition: transform var(--cp-t) var(--cp-ease-out), box-shadow var(--cp-t) var(--cp-ease);
}
.qr-frame:hover {
  transform: scale(1.03);
  box-shadow: var(--cp-sh-lg);
}
.qr-frame img { display: block; border-radius: 4px; }

/* =========================================================================
   15. Buscador inteligente (autocompletado)
   ========================================================================= */

/*
  El desplegable tiene que quedar por encima de la tarjeta o del bloque que
  venga despues. No basta con darle z-index a la lista: hay que elevar tambien
  al contenedor, porque los hermanos posteriores se pintan por encima cuando
  todos estan en el mismo nivel. Se eleva solo mientras el campo tiene el foco,
  para no alterar el apilado del resto de la pagina.
*/
.cp-autocomplete { position: relative; z-index: 1; }
.cp-autocomplete:focus-within { z-index: 1085; }
.cp-autocomplete__list {
  position: absolute;
  z-index: 1080;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  box-shadow: var(--cp-sh-lg);
  max-height: 260px;
  overflow-y: auto;
  padding: 0.3rem;
  display: none;
}
.cp-autocomplete__list.show {
  display: block;
  animation: cp-scale-in var(--cp-t-fast) var(--cp-ease-out);
  transform-origin: top;
}
.cp-autocomplete__item {
  padding: 0.5rem 0.65rem;
  border-radius: var(--cp-r-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 550;
  transition: background var(--cp-t-fast) var(--cp-ease);
}
.cp-autocomplete__item:hover,
.cp-autocomplete__item.active {
  background: var(--cp-brand-tint);
  color: var(--cp-brand-dark);
}
.cp-autocomplete__item small {
  display: block;
  color: var(--cp-muted);
  font-weight: 500;
  font-family: var(--cp-font-mono);
  font-size: 0.75rem;
}

/* =========================================================================
   16. Formulario de Carta de Porte
   ========================================================================= */

.cp-locked-block {
  position: relative;
  background: var(--cp-surface-2);
  border: 1px dashed var(--cp-border-strong);
  border-radius: var(--cp-r-md);
  padding: 1rem;
}
.cp-locked-block .form-control[readonly] { background-color: var(--cp-surface-3); }

.cp-envio-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  background: linear-gradient(135deg, var(--cp-surface-2), var(--cp-surface-3));
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  padding: 0.6rem 0.85rem;
  transition: border-color var(--cp-t) var(--cp-ease), box-shadow var(--cp-t) var(--cp-ease);
}
.cp-envio-box:focus-within {
  border-color: var(--cp-brand);
  box-shadow: var(--cp-ring);
}
.cp-envio-box__label {
  display: block;
  width: 100%;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cp-muted);
  font-weight: 800;
}
.cp-envio-box .form-check { margin-bottom: 0; }
.cp-envio-box .form-check-label { font-weight: 600; }
.cp-envio-box .bi-whatsapp { color: #25d366; }
.cp-envio-box .bi-envelope { color: var(--cp-brand); }

/* Mercancia peligrosa: una tarjeta por materia */
.cp-mercancia {
  position: relative;
  border: 1px solid var(--cp-border);
  border-left: 4px solid var(--cp-amber);
  border-radius: var(--cp-r-md);
  padding: 1.1rem;
  margin-bottom: 1rem;
  background: var(--cp-grad-surface);
  box-shadow: var(--cp-sh-xs);
  animation: cp-fade-up var(--cp-t) var(--cp-ease-out);
  transition: box-shadow var(--cp-t) var(--cp-ease), border-color var(--cp-t) var(--cp-ease);
}
.cp-mercancia:hover { box-shadow: var(--cp-sh-sm); }
.cp-mercancia__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--cp-border);
}
.cp-mercancia__titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 750;
  font-size: 0.88rem;
  color: var(--cp-slate);
}
.cp-mercancia__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: var(--cp-r-sm);
  background: var(--cp-amber-tint);
  color: var(--cp-amber-deep);
  font-family: var(--cp-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}
/* Con una sola mercancia no tiene sentido ofrecer quitarla */
.cp-mercancia:only-child .cp-mercancia__quitar { display: none; }

/* La mercancia general no es una señal de peligro: lleva el azul de marca
   en lugar del ambar reservado al ADR. */
.cp-mercancia--estandar { border-left-color: var(--cp-brand); }
.cp-mercancia--estandar .cp-mercancia__numero {
  background: var(--cp-brand-tint);
  color: var(--cp-brand-dark);
}

/* =========================================================================
   17. Avisos y alertas
   ========================================================================= */

.alert {
  position: relative;
  border: 1px solid var(--cp-border);
  border-left-width: 4px;
  border-radius: var(--cp-r-md);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 550;
  box-shadow: var(--cp-sh-sm);
  animation: cp-fade-up var(--cp-t) var(--cp-ease-out);
}
.alert-success {
  background: var(--cp-route-tint);
  border-color: var(--cp-border);
  border-left-color: var(--cp-route);
  color: #0d5c40;
}
.alert-danger {
  background: var(--cp-danger-tint);
  border-color: var(--cp-border);
  border-left-color: var(--cp-danger);
  color: #8f221c;
}
.alert-warning {
  background: var(--cp-warn-tint);
  border-color: var(--cp-border);
  border-left-color: var(--cp-amber);
  color: var(--cp-amber-deep);
}
.alert-info {
  background: var(--cp-brand-tint);
  border-color: var(--cp-border);
  border-left-color: var(--cp-brand);
  color: var(--cp-brand-dark);
}

/* =========================================================================
   18. Modales
   ========================================================================= */

.modal-content {
  border: none;
  border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-xl);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--cp-border);
  padding: 1.1rem 1.35rem;
}
.modal-title { font-size: 1.05rem; font-weight: 750; }
.modal-body { padding: 1.35rem; }
.modal-footer {
  border-top: 1px solid var(--cp-border);
  background: var(--cp-surface-2);
  padding: 0.85rem 1.35rem;
}
.modal-backdrop.show { opacity: 0.55; }
.modal.fade .modal-dialog {
  transform: scale(0.96) translateY(10px);
  transition: transform var(--cp-t) var(--cp-ease-out);
}
.modal.show .modal-dialog { transform: none; }

/* Icono circular de la cabecera del modal de confirmacion */
.cp-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cp-warn-tint);
  color: var(--cp-amber-deep);
  font-size: 1.3rem;
}

/* =========================================================================
   19. Paginacion
   ========================================================================= */

.pagination { gap: 0.3rem; }
.page-link {
  min-width: 38px;
  text-align: center;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-sm) !important;
  color: var(--cp-slate);
  font-weight: 650;
  font-size: 0.85rem;
  background: var(--cp-surface);
  transition: all var(--cp-t-fast) var(--cp-ease);
}
.page-link:hover {
  background: var(--cp-surface-3);
  border-color: var(--cp-border-strong);
  color: var(--cp-ink);
  transform: translateY(-1px);
}
.page-item.active .page-link {
  background: var(--cp-grad-brand);
  border-color: var(--cp-slate-dark);
  color: #fff;
  box-shadow: var(--cp-sh-sm);
}

/* =========================================================================
   20. Barra de filtros
   ========================================================================= */

.cp-filtros {
  position: relative;
  /* Por encima del listado que viene justo debajo, para que el desplegable
     del buscador de empresa no quede tapado por la tarjeta de la tabla. */
  z-index: 5;
  background: var(--cp-grad-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-sm);
  padding: 1rem 1.15rem;
  overflow: visible;
}
.cp-filtros .collapse,
.cp-filtros .collapse.show { overflow: visible; }

/* Misma idea dentro de los formularios largos: la tarjeta que tiene el foco
   se eleva sobre las siguientes mientras se usa su buscador. */
.card:focus-within { position: relative; z-index: 5; }
.cp-filtros-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cp-filtros-toggle i { transition: transform var(--cp-t) var(--cp-ease); }
.cp-filtros-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* =========================================================================
   21. Paginas de error
   ========================================================================= */

.cp-error {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.cp-error__code {
  font-family: var(--cp-font-mono);
  font-size: clamp(4.5rem, 3rem + 8vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--cp-grad-amber);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(245, 165, 36, 0.3));
}

/* =========================================================================
   22. Utilidades
   ========================================================================= */

.cp-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-border), transparent);
  margin: 1.5rem 0;
}
.cp-muted-box {
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r-md);
  padding: 0.85rem 1rem;
}
.cp-kv__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cp-muted);
  margin-bottom: 0.15rem;
}
.cp-kv__value { font-size: 0.92rem; color: var(--cp-ink); }

main.container, main.container-fluid { padding-bottom: 3rem; }

/* =========================================================================
   23. Impresion
   ========================================================================= */

@media print {
  .navbar-cp, .cp-page-head__actions, .cp-filtros, .pagination,
  .btn, form[data-confirm], .modal { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}