/* ================================================================
   Tema.css — Sistema visual del Laboratorio (claro / oscuro)
   Se carga AL FINAL en todas las paginas del sistema, despues del CSS
   propio de cada pagina, y sobreescribe colores, superficies y animaciones.
   El tema activo lo marca js/Tema.js en <html data-tema="claro|oscuro">.

   Paleta pensada para un laboratorio de computo:
   - Azul electrico -> cian: lo "tecnico" (acciones principales, activo).
   - Ambar Undeb: acento de marca y avisos.
   - Colores de estatus de equipos: se respeta el significado que ya
     usaban (recibido ambar, revisado naranja, pendiente gris, reparado
     azul, entregado verde, no reparado rojo), solo afinados.
   ================================================================ */
/* Fuentes servidas desde el propio servidor (antes venian de Google Fonts en cada
   carga). Son fuentes variables: un solo archivo cubre todos los pesos. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root,
html[data-tema="claro"] {
  color-scheme: light;

  --fondo: #f3f6fb;
  --fondo-aura-1: rgba(37, 99, 235, 0.13);
  --fondo-aura-2: rgba(6, 182, 212, 0.11);
  --fondo-aura-3: rgba(245, 178, 30, 0.08);
  --fondo-rejilla: rgba(15, 23, 42, 0.035);

  --superficie: rgba(255, 255, 255, 0.72);
  --superficie-fuerte: rgba(255, 255, 255, 0.9);
  --superficie-solida: #ffffff;
  --superficie-hundida: rgba(241, 245, 249, 0.85);
  --superficie-hover: rgba(37, 99, 235, 0.06);
  --borde: rgba(226, 232, 240, 0.95);
  --borde-fuerte: #cbd5e1;
  --linea: rgba(15, 23, 42, 0.07);

  --texto: #0f172a;
  --texto-2: #334155;
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;

  --primario: #2563eb;
  --primario-hover: #1d4ed8;
  --primario-texto: #1d4ed8;
  --primario-suave: rgba(37, 99, 235, 0.1);
  --primario-borde: rgba(37, 99, 235, 0.28);
  --acento: #06b6d4;
  --marca: #f5b21e;
  --marca-suave: rgba(245, 178, 30, 0.14);
  --degradado: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --degradado-marca: linear-gradient(135deg, #f5b21e 0%, #f97316 100%);

  --exito: #10b981;
  --exito-suave: rgba(16, 185, 129, 0.12);
  --aviso: #f59e0b;
  --aviso-suave: rgba(245, 158, 11, 0.14);
  --peligro: #ef4444;
  --peligro-suave: rgba(239, 68, 68, 0.1);
  --violeta: #8b5cf6;
  --violeta-suave: rgba(139, 92, 246, 0.12);

  /* Estatus de equipos */
  --estado-recibido: #f59e0b;
  --estado-revisado: #f97316;
  --estado-pendiente: #64748b;
  --estado-reparado: #3b82f6;
  --estado-entregado: #22c55e;
  --estado-noreparado: #ef4444;

  /* Series de graficas (hex para poder agregar transparencia en JS) */
  --serie-1: #3b82f6;
  --serie-2: #06b6d4;
  --serie-3: #f59e0b;
  --serie-4: #8b5cf6;
  --serie-5: #10b981;
  --serie-6: #ef4444;
  --serie-7: #64748b;
  --serie-8: #ec4899;

  --sombra: 0 10px 28px -14px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sombra-hover: 0 20px 40px -18px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sombra-flotante: 0 24px 48px -20px rgba(15, 23, 42, 0.35);
  --sombra-primario: 0 10px 22px -10px rgba(37, 99, 235, 0.6);

  /* Filas de tablas */
  --fila: rgba(255, 255, 255, 0.95);
  --fila-borde: rgba(226, 232, 240, 0.9);
  --fila-hover: #ffffff;
  --blur: blur(20px) saturate(160%);

  --radio: 18px;
  --radio-md: 14px;
  --radio-sm: 10px;
  --header-alto: 68px;
  --aside-ancho: 248px;
  --aside-mini: 78px;

  --fuente: 'Plus Jakarta Sans', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #0a0f1c;
  --fondo-aura-1: rgba(37, 99, 235, 0.22);
  --fondo-aura-2: rgba(6, 182, 212, 0.13);
  --fondo-aura-3: rgba(245, 178, 30, 0.06);
  --fondo-rejilla: rgba(148, 163, 184, 0.045);

  --superficie: rgba(17, 24, 39, 0.72);
  --superficie-fuerte: rgba(17, 24, 39, 0.92);
  --superficie-solida: #111827;
  --superficie-hundida: rgba(30, 41, 59, 0.6);
  --superficie-hover: rgba(59, 130, 246, 0.1);
  --borde: rgba(51, 65, 85, 0.65);
  --borde-fuerte: #475569;
  --linea: rgba(148, 163, 184, 0.12);

  --texto: #e2e8f0;
  --texto-2: #cbd5e1;
  --texto-suave: #94a3b8;
  --texto-tenue: #64748b;

  --primario: #3b82f6;
  --primario-hover: #60a5fa;
  --primario-texto: #93c5fd;
  --primario-suave: rgba(59, 130, 246, 0.16);
  --primario-borde: rgba(96, 165, 250, 0.35);
  --acento: #22d3ee;
  --marca-suave: rgba(245, 178, 30, 0.14);
  --degradado: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);

  --exito-suave: rgba(16, 185, 129, 0.16);
  --aviso-suave: rgba(245, 158, 11, 0.16);
  --peligro: #f87171;
  --peligro-suave: rgba(248, 113, 113, 0.14);
  --violeta: #a78bfa;
  --violeta-suave: rgba(167, 139, 250, 0.16);

  --estado-pendiente: #94a3b8;
  --estado-reparado: #60a5fa;

  --serie-1: #60a5fa;
  --serie-2: #22d3ee;
  --serie-3: #fbbf24;
  --serie-4: #a78bfa;
  --serie-5: #34d399;
  --serie-6: #f87171;
  --serie-7: #94a3b8;
  --serie-8: #f472b6;

  --sombra: 0 10px 30px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sombra-hover: 0 22px 44px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(96, 165, 250, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sombra-flotante: 0 24px 56px -18px rgba(0, 0, 0, 0.85);
  --sombra-primario: 0 10px 24px -10px rgba(59, 130, 246, 0.7);

  --fila: rgba(30, 41, 59, 0.55);
  --fila-borde: rgba(51, 65, 85, 0.5);
  --fila-hover: rgba(37, 52, 78, 0.85);
}

/* Transicion suave SOLO mientras se cambia de tema (la pone Tema.js) */
html.tema-transicion,
html.tema-transicion *,
html.tema-transicion *::before,
html.tema-transicion *::after {
  transition: background-color 0.45s var(--curva), border-color 0.45s var(--curva),
    color 0.45s var(--curva), fill 0.45s var(--curva), box-shadow 0.45s var(--curva) !important;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
* {
  font-family: var(--fuente);
}

/* Varios CSS por pagina declaraban "Montserrat"/Arial; ahora todo usa la fuente del
   tema (Montserrat ya no se descarga). Los iconos (.fa) conservan la suya. */
body *:not(.fa):not(.fa *) {
  font-family: var(--fuente) !important;
}

#equipos tbody td:first-child p {
  font-family: var(--fuente-mono) !important;
}

/* FontAwesome necesita su propia fuente */
.fa,
i.fa {
  font-family: FontAwesome !important;
}

html,
body {
  background: var(--fondo);
  color: var(--texto);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Rejilla tipo "placa de circuito" muy tenue + auras de color */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  border-radius: 0;
  filter: none;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--fondo-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--fondo-rejilla) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 0;
  filter: none;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 10% -10%, var(--fondo-aura-1), transparent 65%),
    radial-gradient(700px 460px at 95% 0%, var(--fondo-aura-2), transparent 65%),
    radial-gradient(600px 420px at 80% 110%, var(--fondo-aura-3), transparent 65%);
  animation: auraFlotar 22s ease-in-out infinite alternate;
}

::selection {
  background: var(--primario);
  color: #fff;
}

a {
  color: var(--primario-texto);
}

:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* Bootstrap 5.0 no trae modo oscuro: ajustamos lo que usamos */
html[data-tema="oscuro"] .alert-danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
  color: #fecaca;
}

html[data-tema="oscuro"] .alert-success {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
  color: #a7f3d0;
}

html[data-tema="oscuro"] .alert-warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fde68a;
}

html[data-tema="oscuro"] .alert-info,
html[data-tema="oscuro"] .alert-primary {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
  color: #bfdbfe;
}

html[data-tema="oscuro"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

/* ---------------------------------------------------------------
   3. LAYOUT GENERAL
   --------------------------------------------------------------- */
.contenedor {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  animation: none;
}

.main {
  display: flex;
  align-items: stretch;
  width: 100%;
  flex: 1;
  justify-content: flex-start;
}

.main .principal,
.main .principal#principal {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  background: transparent;
  padding: 24px 28px 40px;
}

/* ---------------------------------------------------------------
   4. HEADER
   --------------------------------------------------------------- */
.Menu {
  position: sticky;
  top: 0;
  z-index: 1040;
  height: var(--header-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 14px;
  background: var(--superficie-fuerte);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 8px 24px -18px rgba(15, 23, 42, 0.35);
  animation: bajarHeader 0.5s var(--curva) both;
}

/* Linea de marca bajo el header */
.Menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primario) 25%, var(--acento) 60%, var(--marca) 85%, transparent);
  opacity: 0.55;
}

.Menu .menu-izq {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.Menu div:first-child {
  padding: 0;
}

.Menu .logo-link {
  display: flex;
  align-items: center;
}

.Menu .logo-link img,
.Menu div img {
  height: 34px;
  width: auto;
  display: block;
  transition: transform 0.3s var(--curva);
}

.Menu .logo-link:hover img {
  transform: scale(1.04);
}

/* Cambio de logo segun tema */
.logo-oscuro {
  display: none !important;
}

html[data-tema="oscuro"] .logo-claro {
  display: none !important;
}

html[data-tema="oscuro"] .logo-oscuro {
  display: block !important;
}

.menu-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primario-suave);
  border: 1px solid var(--primario-borde);
  color: var(--primario-texto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-etiqueta i {
  font-size: 0.85rem;
}

.menu-etiqueta .punto-vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--exito);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: latido 2s infinite;
}

/* Botones redondos del header */
.btn-icono {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 1.05rem;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--curva-rebote);
}

.btn-icono:hover {
  background: var(--primario-suave);
  border-color: var(--primario-borde);
  color: var(--primario-texto);
  transform: translateY(-1px);
}

.btn-icono:active {
  transform: scale(0.92);
}

.btn-icono .badge-notif {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--peligro);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--superficie-solida);
}

.btn-icono.tiene-pendientes i {
  animation: campana 2.4s ease-in-out infinite;
  transform-origin: 50% 10%;
}

/* Interruptor de tema: sol y luna giran al cambiar */
.btn-tema i {
  position: absolute;
  transition: transform 0.5s var(--curva-rebote), opacity 0.3s ease;
}

.btn-tema .icono-sol {
  transform: rotate(-90deg) scale(0);
  opacity: 0;
  color: var(--marca);
}

.btn-tema .icono-luna {
  transform: rotate(0) scale(1);
  opacity: 1;
}

html[data-tema="oscuro"] .btn-tema .icono-sol {
  transform: rotate(0) scale(1);
  opacity: 1;
}

html[data-tema="oscuro"] .btn-tema .icono-luna {
  transform: rotate(90deg) scale(0);
  opacity: 0;
}

.subMenu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
}

.subMenu > img,
.subMenu #Usuario {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--borde);
  background: var(--superficie-solida);
  transition: border-color 0.2s ease, transform 0.2s var(--curva-rebote), box-shadow 0.2s ease;
}

.subMenu > img:hover,
.subMenu #Usuario:hover {
  border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--primario-suave);
  transform: translateY(-1px);
}

/* Desplegables (usuario y notificaciones) */
.subMenu .oculto,
.subMenu .ocultoNotificacion {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  left: auto;
  transform: none;
  min-width: 250px;
  width: auto;
  padding: 8px;
  border-radius: 16px;
  background: var(--superficie-fuerte);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-flotante);
  z-index: 1060;
}

.subMenu .ocultoNotificacion {
  right: 100px;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
}

.subMenu .oculto.abierto,
.subMenu .ocultoNotificacion.abierto {
  display: block;
  animation: desplegar 0.22s var(--curva) both;
}

.subMenu .oculto p,
.subMenu .oculto a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  color: var(--texto-2);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.subMenu .oculto .linea {
  width: 100%;
  margin: 0;
  border-bottom: none;
}

.subMenu .oculto i {
  width: 18px;
  color: var(--texto-suave);
  font-size: 0.95rem;
  text-align: center;
}

.subMenu .oculto p:hover,
.subMenu .oculto a:hover {
  background: var(--superficie-hover);
  color: var(--texto);
}

.subMenu .oculto .out,
.subMenu .oculto .out:visited,
.subMenu .oculto .out i {
  color: var(--peligro) !important;
}

.subMenu .oculto .out {
  margin-top: 4px;
  border-top: 1px solid var(--linea);
  border-radius: 0 0 10px 10px;
}

.subMenu .oculto .out:hover {
  background: var(--peligro-suave);
}

.desplegable-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linea);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.desplegable-titulo span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--aviso-suave);
  color: var(--estado-recibido);
  letter-spacing: 0;
}

.subMenu .ocultoNotificacion p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--texto-2);
  transition: background 0.15s ease;
}

.subMenu .ocultoNotificacion p::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--estado-recibido);
  box-shadow: 0 0 0 3px var(--aviso-suave);
}

.subMenu .ocultoNotificacion p:hover {
  background: var(--superficie-hover);
}

.subMenu .ocultoNotificacion .verEquipo,
.subMenu .ocultoNotificacion .verEquipo:visited {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--primario-suave);
  color: var(--primario-texto);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.subMenu .ocultoNotificacion .verEquipo:hover {
  background: var(--primario);
  color: #fff;
}

.notif-vacia {
  padding: 22px 10px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.notif-vacia i {
  display: block;
  margin-bottom: 8px;
  font-size: 1.6rem;
  color: var(--exito);
}

.subMenu .ocultoNotificacion .notif-vacia::before {
  display: none;
}

.usuario-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linea);
}

.usuario-cabecera .avatar-letra {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--degradado);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.usuario-cabecera strong {
  display: block;
  color: var(--texto);
  font-size: 0.9rem;
  line-height: 1.2;
}

.usuario-cabecera small {
  color: var(--texto-suave);
  font-size: 0.76rem;
}

/* ---------------------------------------------------------------
   5. MENU LATERAL
   --------------------------------------------------------------- */
.main aside,
.main aside.aside {
  position: sticky;
  top: var(--header-alto);
  align-self: flex-start;
  flex: 0 0 var(--aside-ancho);
  width: var(--aside-ancho);
  height: calc(100vh - var(--header-alto));
  min-height: 0;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(380px 240px at 0% 0%, var(--primario-suave), transparent 70%),
    var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--borde);
  box-shadow: 8px 0 24px -20px rgba(15, 23, 42, 0.3);
  z-index: 1030;
  transition: flex-basis 0.3s var(--curva), width 0.3s var(--curva), transform 0.3s var(--curva);
}

.aside-seccion {
  padding: 4px 26px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.main aside ul,
.lista-aside {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main aside ul li {
  margin: 0;
  list-style: none;
  animation: entrarIzq 0.45s var(--curva) both;
}

.main aside ul li:nth-child(1) { animation-delay: 0.05s; }
.main aside ul li:nth-child(2) { animation-delay: 0.1s; }
.main aside ul li:nth-child(3) { animation-delay: 0.15s; }
.main aside ul li:nth-child(4) { animation-delay: 0.2s; }
.main aside ul li:nth-child(5) { animation-delay: 0.25s; }
.main aside ul li:nth-child(6) { animation-delay: 0.3s; }
.main aside ul li:nth-child(7) { animation-delay: 0.35s; }

.main aside ul li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 14px;
  padding: 11px 14px;
  border: none;
  border-left: none;
  border-radius: 12px;
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.main aside ul li a i {
  width: 20px;
  margin: 0;
  flex-shrink: 0;
  font-size: 1.05rem;
  text-align: center;
  color: var(--texto-tenue);
  transition: color 0.2s ease, transform 0.25s var(--curva-rebote);
}

.main aside ul li a b,
.main aside ul li a .nav-label {
  display: inline;
  font-size: 0.92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main aside ul li a:hover {
  background: var(--superficie-hover);
  color: var(--primario-texto);
  border-left-color: transparent;
}

.main aside ul li a:hover i {
  color: var(--primario);
  transform: scale(1.15);
}

.main aside ul li.active > a,
.main aside ul li a.active {
  background: var(--degradado);
  color: #fff;
  box-shadow: var(--sombra-primario);
}

.main aside ul li.active > a i,
.main aside ul li a.active i {
  color: #fff;
}

/* Brillo que recorre el item activo */
.main aside ul li.active > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: brillo 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Leyenda de estatus al pie del menu */
.aside-leyenda {
  margin: auto 14px 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--superficie-hundida);
  border: 1px solid var(--borde);
  white-space: nowrap;
}

.aside-leyenda p {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.aside-leyenda span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--texto-suave);
}

.aside-leyenda span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}

/* Menu colapsado (escritorio) */
@media (min-width: 993px) {
  html.aside-mini .main aside {
    flex-basis: var(--aside-mini);
    width: var(--aside-mini);
  }

  html.aside-mini .main aside ul li a {
    justify-content: center;
    gap: 0;
    padding: 12px 0;
  }

  html.aside-mini .main aside ul li a b,
  html.aside-mini .main aside ul li a .nav-label,
  html.aside-mini .aside-seccion,
  html.aside-mini .aside-leyenda {
    display: none;
  }

  html.aside-mini .main aside ul li a i {
    font-size: 1.15rem;
  }
}

/* Overlay del menu en movil */
.aside-overlay {
  position: fixed;
  inset: 0;
  z-index: 1035;
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ---------------------------------------------------------------
   6. FOOTER
   --------------------------------------------------------------- */
footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
}

footer img {
  width: auto;
  height: 22px;
  opacity: 0.85;
}

footer p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------
   7. TITULOS DE PAGINA
   --------------------------------------------------------------- */
.titulo,
.principal .Usuarios .titulo,
.Titulo,
.tituloF {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0 0 22px;
  padding: 18px 22px 18px 26px;
  border-radius: var(--radio);
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  overflow: hidden;
  text-align: left;
  color: var(--texto);
  animation: subir 0.5s var(--curva) both;
}

/* Barra de acento a la izquierda */
.titulo::before,
.Titulo::before,
.tituloF::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--degradado);
}

.titulo h1,
.tituloF h1,
h1.Titulo {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--texto);
}

h1.Titulo {
  display: flex;
  max-width: 850px;
  margin: 0 auto 22px;
}

.contenedorNU ~ .Titulo,
.IngresarEquipo > .Titulo {
  margin-left: auto;
  margin-right: auto;
}

/* Contenedores que solo envolvian al titulo con <br> */
.principal > br,
.resultado > br,
.IngresarEquipo > br,
.BuscarCliente > br,
.BuscarRemision > br,
.Usuarios > br,
.informacion > br {
  display: none;
}

/* ---------------------------------------------------------------
   8. BOTONES
   --------------------------------------------------------------- */
.btnExportar,
.btnCrearCliente,
.btnCrearUsuario,
.btnCrearRemision,
.formSearch button,
.terminar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 8px 18px 0;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--curva), box-shadow 0.25s ease, filter 0.2s ease;
}

.btnCrearCliente,
.btnCrearUsuario,
.btnCrearRemision,
.formSearch button {
  background: var(--degradado);
  color: #fff !important;
  box-shadow: var(--sombra-primario);
}

.btnExportar {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(16, 185, 129, 0.65);
}

.btnExportar a,
.btnCrearCliente i,
.btnCrearUsuario i,
.btnCrearRemision i,
.btnExportar i {
  color: #fff;
  margin: 0;
  text-decoration: none;
}

.btnExportar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btnExportar:hover,
.btnCrearCliente:hover,
.btnCrearUsuario:hover,
.btnCrearRemision:hover,
.formSearch button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  background-color: transparent;
}

.btnExportar:active,
.btnCrearCliente:active,
.btnCrearUsuario:active,
.btnCrearRemision:active,
.formSearch button:active {
  transform: translateY(0) scale(0.97);
}

/* Brillo que cruza el boton al pasar el mouse */
.btnExportar::after,
.btnCrearCliente::after,
.btnCrearUsuario::after,
.btnCrearRemision::after,
.formulario .btn::after,
.cot-form .cot-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--curva);
  pointer-events: none;
}

.btnExportar:hover::after,
.btnCrearCliente:hover::after,
.btnCrearUsuario:hover::after,
.btnCrearRemision:hover::after,
.formulario .btn:hover::after,
.cot-form .cot-btn:hover::after {
  left: 140%;
}

/* Boton principal de formularios */
.formulario .btn,
.modal .formulario .btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 0;
  background: var(--degradado);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: filter 0.2s ease, letter-spacing 0.3s ease;
}

.formulario .btn:hover,
.modal .formulario .btn:hover {
  background: var(--degradado);
  color: #fff;
  filter: brightness(1.08);
  letter-spacing: 0.03em;
  box-shadow: none;
}

.formulario .btn:active,
.modal .formulario .btn:active {
  background: var(--degradado);
  filter: brightness(0.95);
}

.modal .formulario .btn:disabled {
  filter: grayscale(0.4) brightness(0.9);
  cursor: wait;
}

/* Agregar / Guardar refacciones (NuevaCotizacion y EditarRemision) */
.AgregarRefaccion form #Agregar,
.AgregarRefaccion form #Guardar {
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  transition: transform 0.2s var(--curva), filter 0.2s ease;
}

.AgregarRefaccion form #Agregar {
  background: var(--degradado);
  box-shadow: var(--sombra-primario);
}

.AgregarRefaccion form #Guardar {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.AgregarRefaccion form #Agregar:hover,
.AgregarRefaccion form #Guardar:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------
   9. FORMULARIOS
   --------------------------------------------------------------- */
.contenedorNU,
.modal .contenedorNU {
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  animation: subir 0.55s var(--curva) 0.08s both;
}

.modal .contenedorNU {
  animation: none;
}

/* Datos del cliente en solo lectura (bloque superior) */
.contenedorNU .inputBloqueo {
  position: relative;
  background: var(--superficie-hundida);
  border-bottom: 1px dashed var(--borde-fuerte);
  padding-bottom: 24px;
}

.contenedorNU input[type="text"],
.contenedorNU input[type="password"],
.contenedorNU input[type="email"],
.contenedorNU input[type="date"],
.contenedorNU input[type="number"],
.contenedorNU input[type="tel"],
.contenedorNU input[type="datetime-local"],
.contenedorNU select,
.contenedorNU textarea,
.par select,
.modal .contenedorNU input[type="text"],
.modal .contenedorNU input[type="password"],
.modal .contenedorNU input[type="email"],
.modal .contenedorNU input[type="date"],
.modal .contenedorNU input[type="number"],
.modal .contenedorNU select,
.modal .contenedorNU textarea,
.AgregarRefaccion form input,
.formSearch input[type="month"],
.formularioComentarios form textarea {
  padding: 13px 15px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie-fuerte);
  backdrop-filter: none;
  color: var(--texto);
  font-size: 0.94rem;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.contenedorNU input::placeholder,
.contenedorNU textarea::placeholder,
.AgregarRefaccion form input::placeholder {
  color: var(--texto-tenue);
  font-weight: 400;
}

.contenedorNU input:not(.bloqueo):hover,
.contenedorNU select:not(.bloqueo):hover,
.contenedorNU textarea:not(.bloqueo):hover {
  border-color: var(--borde-fuerte);
}

.contenedorNU input[type="text"]:not(.bloqueo):focus,
.contenedorNU input[type="password"]:not(.bloqueo):focus,
.contenedorNU input[type="email"]:not(.bloqueo):focus,
.contenedorNU input[type="date"]:not(.bloqueo):focus,
.contenedorNU input[type="number"]:not(.bloqueo):focus,
.contenedorNU input[type="tel"]:not(.bloqueo):focus,
.contenedorNU select:not(.bloqueo):focus,
.contenedorNU textarea:not(.bloqueo):focus,
.par select:not(.bloqueo):focus,
.modal .contenedorNU input:not(.bloqueo):focus,
.modal .contenedorNU select:focus,
.modal .contenedorNU textarea:focus,
.AgregarRefaccion form input:focus,
.formSearch input[type="month"]:focus,
.formularioComentarios form textarea:focus {
  outline: none;
  border-color: var(--primario);
  background: var(--superficie-solida);
  box-shadow: 0 0 0 4px var(--primario-suave);
}

.contenedorNU select option {
  background: var(--superficie-solida);
  color: var(--texto);
}

/* Campos bloqueados */
.bloqueo,
.modal .bloqueo,
.contenedorNU .bloqueo {
  background: transparent !important;
  color: var(--texto-2) !important;
  border-color: var(--linea) !important;
  border-style: solid;
  cursor: not-allowed;
  box-shadow: none !important;
}

.bloqueo:hover,
.bloqueo:focus {
  background: transparent !important;
}

/* Iconos de calendario en modo oscuro */
html[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-tema="oscuro"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-tema="oscuro"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
}

/* Selector segmentado (radios) */
.formulario .estatus,
.modal .formulario .estatus,
.modal .formulario .grupo-radio,
.formulario .par:has(> .label-radio) {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie-hundida);
  overflow: visible;
}

.formulario .estatus .label-radio,
.modal .formulario .estatus .label-radio,
.modal .formulario .grupo-radio .label-radio,
.formulario .par .label-radio {
  border: none !important;
  border-radius: 10px !important;
  background: transparent;
  color: var(--texto-suave);
  font-weight: 600;
  padding: 11px 10px;
  margin: 0;
  transition: background 0.25s var(--curva), color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.formulario .estatus .label-radio:hover,
.modal .formulario .grupo-radio .label-radio:hover,
.formulario .par .label-radio:hover {
  color: var(--texto);
  background: var(--superficie-hover);
}

.formulario input[type="radio"]:checked + .label-radio,
.modal .formulario input[type="radio"]:checked + .label-radio,
.formulario .par input[type="radio"]:checked + .label-radio {
  background: var(--degradado-marca);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(245, 158, 11, 0.8);
  animation: pop 0.3s var(--curva-rebote);
}

/* Interruptor (Remisiones) */
.slider {
  background-color: var(--borde-fuerte);
  border-radius: 999px;
}

.slider:before {
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

input:checked + .slider {
  background: var(--exito);
}
/* ---------------------------------------------------------------
   10. TABLAS (DataTables) — filas flotantes tipo tarjeta
   Cada fila es una "tarjeta" separada de las demas; al pasar el mouse
   se levanta y muestra una barra de color a la izquierda.
   --------------------------------------------------------------- */
.resultado {
  padding: 0;
  animation: subir 0.55s var(--curva) 0.1s both;
}

.dt-container {
  position: relative;
  padding: 0;
  border-radius: 22px;
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  color: var(--texto-2);
  overflow: hidden;
}

/* Barra superior: buscador */
.dt-container > .top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, var(--superficie-hundida), transparent);
}

.dt-container > .top .dt-search {
  margin: 0;
}

/* Zona de la tabla */
.dt-container .dt-layout-table,
.dt-container > table,
.dt-container > .dt-scroll {
  padding: 4px 14px 0;
}

.dt-container .Tabla,
.Tabla {
  width: 100% !important;
  margin: 0 auto;
  border: none;
  border-collapse: separate;
  border-spacing: 0 8px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* General.css forzaba 16px en todo; DataTables envuelve el titulo en un span */
.Tabla thead th *,
.dt-container .dt-search *,
.dt-container .dt-length *,
.dt-container .dt-info * {
  font-size: inherit;
}

.Tabla th,
.Tabla thead th,
table.dataTable thead > tr > th {
  position: static;
  padding: 10px 14px 4px !important;
  background: transparent !important;
  color: var(--texto-tenue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none !important;
  border-radius: 0 !important;
  white-space: nowrap;
  transition: color 0.2s ease;
}

table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
  color: var(--texto-2);
  outline: none;
}

/* Columna por la que se ordena: texto de color con subrayado */
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
  color: var(--primario-texto);
}

table.dataTable thead > tr > th.dt-ordering-asc .dt-column-title,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-title {
  padding-bottom: 3px;
  background: linear-gradient(var(--primario), var(--primario)) no-repeat left bottom / 100% 2px;
}

table.dataTable thead span.dt-column-order {
  opacity: 0.5;
}

/* Celdas: la fila completa forma una tarjeta */
.Tabla td,
table.dataTable tbody td {
  height: 60px;
  padding: 10px 14px !important;
  background: var(--fila) !important;
  color: var(--texto-2);
  font-size: 0.88rem;
  border: none !important;
  border-top: 1px solid var(--fila-borde) !important;
  border-bottom: 1px solid var(--fila-borde) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.Tabla td:first-child {
  border-left: 1px solid var(--fila-borde) !important;
  border-radius: 14px 0 0 14px !important;
}

.Tabla td:last-child {
  border-right: 1px solid var(--fila-borde) !important;
  border-radius: 0 14px 14px 0 !important;
}

.Tabla td:only-child {
  border-radius: 14px !important;
}

.Tabla tbody tr {
  position: relative;
  animation: filaEntrada 0.2s var(--curva) both;
  transition: transform 0.2s var(--curva), filter 0.2s ease;
}

/* Escalonado muy corto: al buscar o paginar los datos aparecen casi al instante */
.Tabla tbody tr:nth-child(2) { animation-delay: 0.012s; }
.Tabla tbody tr:nth-child(3) { animation-delay: 0.024s; }
.Tabla tbody tr:nth-child(4) { animation-delay: 0.036s; }
.Tabla tbody tr:nth-child(5) { animation-delay: 0.048s; }
.Tabla tbody tr:nth-child(n+6) { animation-delay: 0.06s; }

/* Hover: la fila se levanta, se tiñe y aparece la barra de acento */
.Tabla tbody tr:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.1));
}

.Tabla tbody tr:hover td,
table.dataTable.display > tbody > tr:hover > * {
  background: var(--fila-hover) !important;
  border-color: var(--primario-borde) !important;
  box-shadow: none !important;
}

.Tabla tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 var(--primario) !important;
}

table.dataTable.display > tbody > tr.odd > *,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.even > * {
  box-shadow: none !important;
}

/* Primera columna resaltada (folio / nombre) */
.Tabla tbody td:first-child {
  color: var(--texto);
  font-weight: 700;
}

/* Numero de OS en monoespaciada: se lee como folio */
#equipos tbody td:first-child p {
  display: inline-block;
  margin: 6px 0 0;
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--superficie-hundida);
  border: 1px solid var(--linea);
  font-family: var(--fuente-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto);
}

#equipos tbody td:first-child {
  text-align: center;
}

.estado-nombre {
  color: var(--texto);
}

.estado-pago {
  color: var(--texto-suave);
}

/* Mensaje de tabla vacia */
table.dataTable td.dt-empty {
  padding: 40px 10px !important;
  color: var(--texto-suave);
  font-weight: 600;
}

/* Barra inferior: cantidad por pagina, paginacion e info */
.dt-container > .bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--linea);
  margin-top: 6px;
}

.dt-container > .bottom > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.dt-container > .bottom .col-sm-6,
.dt-container > .bottom .col-sm-12 {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

.dt-container > .bottom .col-sm-12 {
  flex-basis: 100%;
}

.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dt-search label,
.dt-length label,
.dt-container .dt-info {
  color: var(--texto-suave) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.dt-container .dt-info {
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--texto-tenue) !important;
}

.dt-search label {
  margin-right: 8px;
}

.dt-search input,
.dt-container .dt-search input {
  height: 42px;
  min-width: 280px;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--borde) !important;
  border-radius: 999px !important;
  background-color: var(--superficie-solida) !important;
  color: var(--texto) !important;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, min-width 0.3s var(--curva);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
}

.dt-search input:focus {
  min-width: 340px;
}

.dt-container .dt-length select {
  height: 36px;
  padding: 0 28px 0 12px !important;
  margin: 0 8px;
  border: 1px solid var(--borde) !important;
  border-radius: 999px !important;
  background-color: var(--superficie-solida) !important;
  color: var(--texto) !important;
  font-weight: 700;
}

.dt-search input:focus,
.dt-container .dt-length select:focus {
  outline: none;
  border-color: var(--primario) !important;
  box-shadow: 0 0 0 4px var(--primario-suave) !important;
}

/* Paginacion en forma de "pastilla" */
.dt-container .dt-paging nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--superficie-hundida);
  border: 1px solid var(--borde);
}

.dt-container .dt-paging .dt-paging-button {
  min-width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--texto-2) !important;
  font-size: 0.84rem !important;
  font-weight: 700;
  line-height: 34px;
  transition: background 0.15s ease, color 0.15s ease;
}

.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--superficie-solida) !important;
  color: var(--primario-texto) !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--degradado) !important;
  color: #fff !important;
  box-shadow: var(--sombra-primario);
}

.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover {
  color: var(--texto-tenue) !important;
  opacity: 0.5;
}

.dt-container .dt-processing,
div.dt-processing {
  background: var(--superficie-fuerte) !important;
  border: 1px solid var(--borde);
  border-radius: 14px;
  color: var(--texto-2);
  box-shadow: var(--sombra-flotante);
}

div.dt-processing > div:last-child > div {
  background: var(--primario) !important;
}

/* Botones de accion: chips de color siempre visibles */
.acciones {
  gap: 6px;
}

.acciones a,
.Tabla td > a.editar,
.Tabla td > a.borrar,
.Tabla td > a.coti,
.Tabla td > a.reingreso,
.Tabla td > a.nuevoEquipo,
.Tabla td .exportar {
  --c: var(--primario);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 2px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  text-decoration: none;
  vertical-align: middle;
  transition: background 0.15s ease, transform 0.2s var(--curva-rebote), box-shadow 0.2s ease;
}

.acciones a i,
.Tabla td > a i,
.Tabla td .exportar i {
  font-size: 15px !important;
  line-height: 1;
  color: var(--c) !important;
  transition: color 0.15s ease;
}

.acciones .editar, .Tabla td > a.editar { --c: var(--primario); }
.acciones .borrar, .Tabla td > a.borrar { --c: var(--peligro); }
.acciones .coti, .acciones .nuevoEquipo, .Tabla td > a.coti, .Tabla td > a.nuevoEquipo { --c: var(--exito); }
.acciones .reingreso, .Tabla td > a.reingreso { --c: var(--aviso); }
.Tabla td .exportar { --c: var(--peligro); }

.acciones a:hover,
.Tabla td > a.editar:hover,
.Tabla td > a.borrar:hover,
.Tabla td > a.coti:hover,
.Tabla td > a.reingreso:hover,
.Tabla td > a.nuevoEquipo:hover,
.Tabla td .exportar:hover {
  background: var(--c);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px var(--c);
}

.acciones a:hover i,
.Tabla td > a:hover i,
.Tabla td .exportar:hover i {
  color: #fff !important;
}

.editar i, .editar:visited i { color: var(--primario); }
.borrar i, .borrar:visited i { color: var(--peligro); }
.coti i, .nuevoEquipo i { color: var(--exito); }
.reingreso i { color: var(--aviso); }
.exportar i, #exportar i { color: var(--peligro); }

/* Puntos de estatus de equipos */
.recibido,
.revisado,
.pendiente,
.reparado,
.entregado,
#noReparado,
.defecto {
  --c: var(--estado-pendiente);
  display: inline-block;
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}

.recibido { --c: var(--estado-recibido); }
.revisado { --c: var(--estado-revisado); }
.pendiente { --c: var(--estado-pendiente); }
.reparado { --c: var(--estado-reparado); }
.entregado { --c: var(--estado-entregado); }
#noReparado { --c: var(--estado-noreparado); }

/* Recibido = aun no se revisa: late para llamar la atencion */
.recibido {
  animation: latidoEstado 2s ease-out infinite;
}

html[data-tema="oscuro"] .recibido,
html[data-tema="oscuro"] .revisado,
html[data-tema="oscuro"] .reparado,
html[data-tema="oscuro"] .entregado,
html[data-tema="oscuro"] #noReparado {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent), 0 0 10px color-mix(in srgb, var(--c) 70%, transparent);
}

/* Tablas de refacciones (NuevaCotizacion / EditarRemision / modales) */
.Refacciones table,
.modal .Refacciones table {
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--superficie);
  box-shadow: none;
}

.Refacciones th,
.modal .Refacciones th {
  background: var(--superficie-hundida) !important;
  color: var(--texto-suave) !important;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.Refacciones td,
.modal .Refacciones td {
  background: transparent !important;
  color: var(--texto-2) !important;
  border-bottom: 1px solid var(--linea) !important;
}

.Refacciones tbody tr:hover td {
  background: var(--superficie-hover) !important;
}

.Refacciones .total,
.total {
  color: var(--texto);
}

.AgregarRefaccion,
.AgregarRefaccion p,
.AgregarRefaccion form label {
  color: var(--texto-2);
}

/* Cotizacion (.cot) — solo color; la estructura ya la da Cotizacion.css */
.cot {
  color: var(--texto-2);
}

.cot-cliente,
.cot-desc,
.cot-importe {
  color: var(--texto);
}

.cot-etiqueta,
.cot-meta,
.cot-vacio td,
.cot-form-titulo {
  color: var(--texto-suave);
}

.cot-resumen,
.cot-fila-total td {
  background: var(--primario-suave);
  border-color: var(--primario-borde);
}

.cot-resumen span,
.cot-tabla tfoot .cot-etiqueta-total {
  color: var(--texto-suave);
}

.cot-resumen strong,
.cot-fila-total td,
.cot-fila-total .cot-etiqueta-total {
  color: var(--primario-texto) !important;
}

.cot-panel,
.cot-form {
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

.cot-tabla thead th {
  background: var(--superficie-hundida);
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
}

.cot-tabla tbody td {
  border-bottom: 1px solid var(--linea);
}

.cot-tabla tbody tr:hover td {
  background: var(--superficie-hover);
}

.cot-tabla tfoot td {
  background: var(--superficie-hundida);
  border-top: 1px solid var(--borde);
}

.cot-campo label {
  color: var(--texto-suave);
}

.cot-campo input {
  background: var(--superficie-fuerte);
  border: 1px solid var(--borde);
  color: var(--texto);
}

.cot-campo input:focus {
  background: var(--superficie-solida);
  border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--primario-suave);
}

.cot-money::before {
  color: var(--texto-suave);
}

.cot-form .cot-btn {
  position: relative;
  overflow: hidden;
  background: var(--degradado);
  box-shadow: var(--sombra-primario);
}

.cot-form .cot-btn:hover {
  background: var(--degradado);
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------
   11. DASHBOARD
   --------------------------------------------------------------- */
.dash-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: var(--radio);
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: subir 0.5s var(--curva) both;
}

.dash-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primario), var(--acento), var(--marca));
}

.dash-header-izq {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dash-header-icono {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--degradado);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: var(--sombra-primario);
}

.dash-header h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.dash-header p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--texto-suave);
}

.dash-header p strong {
  color: var(--texto-2);
}

.dash-filtro-activo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--marca-suave);
  color: #b45309;
  font-size: 0.76rem;
  font-weight: 700;
}

html[data-tema="oscuro"] .dash-filtro-activo {
  color: var(--marca);
}

.dash-header-der {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-header .btn-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-fuerte);
  color: var(--texto-2);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dash-header .btn-filtro i {
  color: var(--primario);
}

.dash-header .btn-filtro:hover,
.dash-header .btn-filtro.activo {
  border-color: var(--primario);
  color: var(--primario-texto);
  transform: translateY(-1px);
}

.dash-header .btn-filtro.limpiar {
  text-decoration: none;
}

.dash-header .btn-filtro.limpiar i {
  color: var(--peligro);
}

/* Filtro por meses */
.formSearch {
  display: none;
  width: 100%;
  padding: 0;
  margin-bottom: 18px;
}

.formSearch form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radio);
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

.formSearch .campo-mes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
}

.formSearch label {
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formSearch input[type="month"] {
  width: 100%;
  margin: 0;
}

.formSearch button {
  width: auto;
  height: 47px;
  margin: 0;
  padding: 0 24px;
  font-size: 0.92rem;
  border: none;
}

/* Tarjetas KPI */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
  padding: 0;
}

.cards .card {
  --accent: var(--primario);
  --accent-suave: var(--primario-suave);
  position: relative;
  max-width: none;
  flex: initial;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: transform 0.3s var(--curva), box-shadow 0.3s ease, border-color 0.3s ease;
  animation: subir 0.55s var(--curva) both;
}

.cards .card:nth-of-type(1) { animation-delay: 0.08s; }
.cards .card:nth-of-type(2) { animation-delay: 0.16s; }
.cards .card:nth-of-type(3) { animation-delay: 0.24s; }
.cards .card:nth-of-type(4) { animation-delay: 0.32s; }

/* Linea de acento inferior */
.cards .card::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  opacity: 0.6;
  transition: left 0.35s var(--curva), right 0.35s var(--curva), opacity 0.3s ease;
}

/* Halo del color de la tarjeta */
.cards .card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-suave), transparent 70%);
  transition: transform 0.5s var(--curva);
  pointer-events: none;
}

.cards .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--borde));
}

.cards .card:hover::after {
  left: 0;
  right: 0;
  opacity: 1;
}

.cards .card:hover::before {
  transform: scale(1.35);
}

.cards .card i,
.card i {
  position: relative;
  width: 52px;
  height: 52px;
  line-height: 52px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--accent-suave);
  color: var(--accent);
  font-size: 1.35rem;
  text-align: center;
  transition: transform 0.4s var(--curva-rebote);
}

.cards .card:hover i {
  transform: rotate(-8deg) scale(1.08);
}

.cards .card .info {
  position: relative;
  min-width: 0;
}

.cards .card .info h1 {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cards .card .info p {
  margin: 4px 0 0;
  color: var(--texto);
  font-size: clamp(1.2rem, 1.45vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cards .card1 { --accent: var(--primario); --accent-suave: var(--primario-suave); }
.cards .card2 { --accent: var(--violeta); --accent-suave: var(--violeta-suave); }
.cards .card3 { --accent: var(--peligro); --accent-suave: var(--peligro-suave); }
.cards .card4 { --accent: var(--exito); --accent-suave: var(--exito-suave); }

.cards .card1 i, .cards .card2 i, .cards .card3 i, .cards .card4 i {
  color: var(--accent);
  background-color: var(--accent-suave);
}

.cards .card1 .info p, .cards .card2 .info p, .cards .card3 .info p, .cards .card4 .info p {
  color: var(--texto);
}

/* Graficas */
.datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
}

.pequeno {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  width: auto;
}

.chart-container,
.chart-container-pequeno {
  position: relative;
  width: auto;
  padding: 18px;
  border-radius: var(--radio);
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  transition: box-shadow 0.3s ease, transform 0.3s var(--curva);
  animation: subir 0.6s var(--curva) both;
}

.chart-container:hover,
.chart-container-pequeno:hover {
  box-shadow: var(--sombra-hover);
}

.datos > :nth-child(1) { animation-delay: 0.12s; }
.datos > :nth-child(2) > :nth-child(1) { animation-delay: 0.16s; }
.datos > :nth-child(2) > :nth-child(2) { animation-delay: 0.2s; }
.datos > :nth-child(3) { animation-delay: 0.24s; }
.datos > :nth-child(4) { animation-delay: 0.28s; }

.chart-container.full-width {
  min-height: 400px;
}

.chart-container.horizontal-chart {
  min-height: 400px;
}

.chart-container-pequeno {
  min-height: 0;
  height: 192px;
}

.chart-container-pequeno canvas {
  width: 100%;
}

/* ---------------------------------------------------------------
   12. INFORMACION
   --------------------------------------------------------------- */
.informacion {
  max-width: 900px;
  margin: 0 auto;
}

.informacion .info {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--sombra);
  animation: subir 0.55s var(--curva) 0.08s both;
}

.informacion .info p {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--superficie-hundida);
  border: 1px solid var(--linea);
  color: var(--texto-2);
  font-size: 0.92rem;
  line-height: 1.4;
  transition: transform 0.25s var(--curva), border-color 0.25s ease, background 0.25s ease;
}

.informacion .info p:hover {
  transform: translateY(-2px);
  border-color: var(--primario-borde);
  background: var(--superficie-hover);
}

.informacion .info p i {
  width: 40px;
  height: 40px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--primario-suave);
  color: var(--primario);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.informacion .info .InfoTitulo {
  grid-column: 1 / -1;
  justify-content: center;
  padding: 16px;
  background: var(--degradado);
  border: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.informacion .info .InfoTitulo:hover {
  background: var(--degradado);
}

/* ---------------------------------------------------------------
   13. MODALES Y ALERTAS
   Encabezado con icono y franja de color, formulario "plano" (sin la
   caja dentro de la caja) y el boton de guardar fijo al pie del modal
   para que nunca quede cortado al hacer scroll.
   --------------------------------------------------------------- */
.modal-backdrop.show {
  opacity: 1;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-backdrop {
  background: transparent;
}

.modal .modal-dialog {
  max-width: 760px;
}

.modal .modal-content {
  position: relative;
  border-radius: 24px;
  background: var(--superficie-solida);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-flotante), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: var(--texto-2);
  overflow: hidden;
}

/* Franja superior de marca */
.modal .modal-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--primario), var(--acento), var(--marca));
}

.modal.fade .modal-dialog {
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: transform 0.4s var(--curva-rebote), opacity 0.25s ease;
}

.modal.show .modal-dialog {
  transform: none;
  opacity: 1;
}

.modal .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--linea);
  background:
    radial-gradient(500px 160px at 0% 0%, var(--primario-suave), transparent 70%),
    var(--superficie-solida);
}

.modal .modal-icono {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--degradado);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: var(--sombra-primario);
  animation: pop 0.45s var(--curva-rebote) 0.1s both;
}

.modal .modal-titulos {
  flex: 1;
  min-width: 0;
}

.modal .modal-title {
  margin: 0;
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.modal .modal-subtitulo {
  margin: 2px 0 0;
  color: var(--texto-suave);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Boton cerrar cuadrado */
.modal .modal-header .btn-close {
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-hundida) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 14px no-repeat;
  opacity: 1;
  filter: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--curva-rebote);
}

.modal .modal-header .btn-close:hover {
  background-color: var(--peligro-suave);
  border-color: var(--peligro);
  transform: rotate(90deg);
}

.modal .modal-header .btn-close:focus {
  box-shadow: 0 0 0 4px var(--primario-suave);
}

.modal .modal-body {
  padding: 22px 24px 0;
  background: var(--superficie-solida);
}

.modal .cargandoModal {
  padding: 50px 0;
  text-align: center;
  color: var(--texto-suave);
}

.modal .cargandoModal i {
  color: var(--primario);
}

/* Formulario dentro del modal: sin caja propia */
.modal .contenedorNU {
  width: 100%;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
  animation: none;
}

.modal .formulario .contenedor-inputs,
.modal .contenedorNU .formulario .contenedor-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 0 22px;
}

/* Lo que ya viene en pares ocupa toda la fila (los pares ya son 2 columnas) */
.modal .formulario .contenedor-inputs > .par,
.modal .formulario .contenedor-inputs > .grupo-radio,
.modal .formulario .contenedor-inputs > .estatus,
.modal .formulario .contenedor-inputs > textarea,
.modal .formulario .contenedor-inputs > .alert,
.modal .formulario .contenedor-inputs > p,
.modal .formulario .contenedor-inputs > div {
  grid-column: 1 / -1;
}

.modal .par {
  gap: 14px;
}

/* Datos del cliente en solo lectura (Ingresar / Reingresar equipo) */
.modal .contenedorNU .inputBloqueo {
  margin-bottom: 20px;
  padding: 16px;
  gap: 12px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 16px;
  background: var(--superficie-hundida);
}

.modal .contenedorNU .inputBloqueo + .formulario .contenedor-inputs {
  padding-top: 0;
}

.modal .contenedorNU input[type="text"],
.modal .contenedorNU input[type="password"],
.modal .contenedorNU input[type="email"],
.modal .contenedorNU input[type="date"],
.modal .contenedorNU input[type="number"],
.modal .contenedorNU input[type="tel"],
.modal .contenedorNU select,
.modal .contenedorNU textarea,
.modal .formulario input[type="text"],
.modal .formulario input[type="password"],
.modal .formulario input[type="email"],
.modal .formulario input[type="date"],
.modal .formulario input[type="number"],
.modal .formulario select,
.modal .formulario textarea {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie-hundida);
  backdrop-filter: none;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.modal .formulario textarea,
.modal .contenedorNU textarea {
  height: auto;
  min-height: 90px;
  padding: 12px 15px;
  resize: vertical;
}

.modal .contenedorNU input:not(.bloqueo):hover,
.modal .contenedorNU select:hover,
.modal .formulario input:not(.bloqueo):hover,
.modal .formulario select:hover {
  border-color: var(--borde-fuerte);
}

.modal .contenedorNU input:not(.bloqueo):focus,
.modal .contenedorNU select:focus,
.modal .contenedorNU textarea:focus,
.modal .formulario input:not(.bloqueo):focus,
.modal .formulario select:focus,
.modal .formulario textarea:focus {
  outline: none;
  border-color: var(--primario);
  background: var(--superficie-solida);
  box-shadow: 0 0 0 4px var(--primario-suave);
}

.modal .bloqueo {
  height: 42px !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid var(--linea) !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  color: var(--texto) !important;
  font-weight: 600 !important;
}

/* Selectores segmentados (rol, sexo, cliente nuevo/existente, estatus) */
.modal .formulario .estatus,
.modal .formulario .grupo-radio {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie-hundida);
  overflow: visible;
}

.modal .formulario .estatus .label-radio,
.modal .formulario .grupo-radio .label-radio {
  flex: 1 1 50%;
  min-height: 42px;
  padding: 10px;
  border: none !important;
  border-radius: 10px !important;
  background: transparent;
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-weight: 700;
}

.modal .formulario .estatus .label-radio:hover,
.modal .formulario .grupo-radio .label-radio:hover {
  background: var(--superficie-solida);
  color: var(--texto);
}

.modal .formulario input[type="radio"]:checked + .label-radio {
  background: var(--superficie-solida);
  color: var(--primario-texto);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.2), inset 0 0 0 1.5px var(--primario);
  animation: pop 0.3s var(--curva-rebote);
}

/* Boton guardar: fijo al pie del modal, siempre visible.
   Es un <input type="submit">, asi que la "barra" que tapa el contenido al
   hacer scroll se dibuja con una sombra extendida del color del fondo. */
.modal .formulario .btn {
  position: sticky;
  bottom: 16px;
  z-index: 3;
  display: block;
  width: 100%;
  height: 52px;
  margin: 0 0 16px;
  padding: 0 24px;
  border: none;
  border-radius: 14px;
  background: var(--degradado);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 16px var(--superficie-solida), 0 -20px 30px 4px var(--superficie-solida), var(--sombra-primario);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s var(--curva);
}

.modal .formulario .btn:hover {
  background: var(--degradado);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 0 16px var(--superficie-solida), 0 -20px 30px 4px var(--superficie-solida), var(--sombra-primario);
  letter-spacing: 0.01em;
}

.modal .formulario .btn:active {
  background: var(--degradado);
  transform: scale(0.98);
}

.modal .formulario .btn:disabled {
  filter: grayscale(0.4) brightness(0.9);
  cursor: wait;
}

/* Alertas: tarjeta con barra lateral en lugar del bloque rosa */
.alert {
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: 14px;
  background: var(--superficie-solida);
  color: var(--texto-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.alert i.fa:first-child,
.alert strong > i.fa {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.alert strong {
  color: var(--texto);
}

.alert-danger,
html[data-tema="oscuro"] .alert-danger {
  border-color: color-mix(in srgb, var(--peligro) 30%, var(--borde));
  border-left-color: var(--peligro);
  background: color-mix(in srgb, var(--peligro) 7%, var(--superficie-solida));
  color: var(--texto-2);
}

.alert-danger i.fa:first-child,
.alert-danger strong > i.fa {
  background: var(--peligro-suave);
  color: var(--peligro);
}

.alert-warning,
html[data-tema="oscuro"] .alert-warning {
  border-left-color: var(--aviso);
  background: color-mix(in srgb, var(--aviso) 8%, var(--superficie-solida));
  color: var(--texto-2);
}

.alert-success,
html[data-tema="oscuro"] .alert-success {
  border-left-color: var(--exito);
  background: color-mix(in srgb, var(--exito) 8%, var(--superficie-solida));
  color: var(--texto-2);
}

.modal .alert {
  margin-bottom: 18px;
}

.principal > .alert {
  animation: subir 0.5s var(--curva) both;
}

@media (max-width: 640px) {
  .modal .formulario .contenedor-inputs,
  .modal .contenedorNU .formulario .contenedor-inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal .modal-header {
    padding: 18px 16px 14px;
  }

  .modal .modal-body {
    padding: 18px 16px 0;
  }

}

/* SweetAlert2 */
.swal2-popup {
  border-radius: 22px !important;
  background: var(--superficie-solida) !important;
  color: var(--texto-2) !important;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-flotante);
}

.swal2-title {
  color: var(--texto) !important;
}

.swal2-html-container {
  color: var(--texto-2) !important;
}

.swal2-styled.swal2-confirm {
  border-radius: 12px !important;
  background: var(--degradado) !important;
  box-shadow: var(--sombra-primario) !important;
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  border-radius: 12px !important;
}

.swal2-input,
.swal2-select,
.swal2-textarea {
  border-radius: 12px !important;
  background: var(--superficie-fuerte) !important;
  border: 1px solid var(--borde) !important;
  color: var(--texto) !important;
}

html[data-tema="oscuro"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
html[data-tema="oscuro"] .swal2-icon.swal2-success .swal2-success-fix {
  background: var(--superficie-solida) !important;
}

div:where(.swal2-container).swal2-backdrop-show {
  background: rgba(2, 6, 23, 0.5) !important;
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------
   14. LOGIN
   --------------------------------------------------------------- */
body.pagina-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

body.pagina-login .contenedor {
  min-height: 0;
  display: block;
  width: 100%;
  max-width: 410px;
  margin: 20px;
  padding: 42px 34px 34px;
  border-radius: 26px;
  background: var(--superficie-fuerte);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-flotante);
  text-align: center;
  overflow: hidden;
  animation: loginEntrada 0.7s var(--curva-rebote) both;
}

body.pagina-login .contenedor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primario), var(--acento), var(--marca));
}

body.pagina-login .contenedor img {
  width: 62%;
  margin: 0 auto 6px;
  filter: none;
}

body.pagina-login .login-sub {
  margin: 0 0 24px;
  color: var(--texto-suave);
  font-size: 0.85rem;
  font-weight: 600;
}

body.pagina-login .login-sub i {
  color: var(--primario);
  margin-right: 6px;
}

body.pagina-login form input[type="text"],
body.pagina-login form input[type="password"] {
  margin: 0 0 14px;
  padding: 15px 16px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie-solida);
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 500;
  backdrop-filter: none;
}

body.pagina-login form input::placeholder {
  color: var(--texto-tenue);
}

body.pagina-login form input[type="text"]:focus,
body.pagina-login form input[type="password"]:focus {
  border-color: var(--primario);
  background: var(--superficie-solida);
  box-shadow: 0 0 0 4px var(--primario-suave);
}

body.pagina-login form input[type="submit"] {
  margin-top: 8px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: var(--degradado);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: var(--sombra-primario);
  transition: transform 0.2s var(--curva), filter 0.2s ease;
}

body.pagina-login form input[type="submit"]:hover {
  background: var(--degradado);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

body.pagina-login .btn-tema {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 5;
}

body.pagina-login .contenedor.fade-out {
  animation: loginSalida 0.5s var(--curva) forwards;
}

/* ---------------------------------------------------------------
   15. ANIMACIONES
   --------------------------------------------------------------- */
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes entrarIzq {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

@keyframes bajarHeader {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: none; }
}

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes filaEntrada {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes brillo {
  0%, 60% { background-position: 150% 0; }
  100% { background-position: -100% 0; }
}

@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes latidoEstado {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
}

@keyframes campana {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(14deg); }
  90% { transform: rotate(-12deg); }
  94% { transform: rotate(8deg); }
  97% { transform: rotate(-4deg); }
}

@keyframes auraFlotar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-30px, 20px, 0) scale(1.06); }
}

@keyframes loginEntrada {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes loginSalida {
  to { opacity: 0; transform: translateY(-12px) scale(0.97); }
}

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

/* ---------------------------------------------------------------
   16. RESPONSIVO
   --------------------------------------------------------------- */
@media (max-width: 1200px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  /* El menu lateral se vuelve cajon deslizable */
  .main aside,
  .main aside.aside {
    position: fixed;
    top: var(--header-alto);
    left: 0;
    bottom: 0;
    height: auto;
    width: var(--aside-ancho);
    background: var(--superficie-solida);
    transform: translateX(-105%);
    box-shadow: var(--sombra-flotante);
  }

  html.aside-abierto .main aside {
    transform: none;
  }

  html.aside-abierto .aside-overlay {
    opacity: 1;
    visibility: visible;
  }

  .main aside ul li a b,
  .main aside ul li a .nav-label {
    display: inline !important;
  }

  .main aside ul li a i {
    width: 20px !important;
    margin: 0 !important;
  }

  .datos {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .principal,
  .main .principal#principal {
    padding: 18px 16px 32px;
  }
}

@media (max-width: 640px) {
  .menu-etiqueta {
    display: none;
  }

  .Menu {
    padding: 0 12px 0 10px;
  }

  .Menu .logo-link img {
    height: 28px;
  }

  .subMenu {
    gap: 6px;
  }

  .subMenu .ocultoNotificacion {
    position: fixed;
    top: calc(var(--header-alto) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }

  .subMenu .oculto {
    position: fixed;
    top: calc(var(--header-alto) + 8px);
    right: 12px;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .principal .cards .card {
    width: auto;
    margin: 0;
  }

  .main .principal .datos canvas,
  .pequeno {
    display: grid;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
  }

  .main .principal .datos canvas {
    display: block;
  }

  .dash-header-der {
    width: 100%;
  }

  .dash-header .btn-filtro {
    flex: 1;
    justify-content: center;
  }

  .dt-search input,
  .dt-container .dt-search input {
    min-width: 0;
    width: 100%;
  }

  .par,
  .modal .par {
    flex-direction: column;
    gap: 14px;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }

  .titulo h1,
  h1.Titulo {
    font-size: 1.2rem;
  }
}

/* Mensajes de error de los formularios (contraseñas que no coinciden, etc.) */
.formulario .error,
.modal .formulario .error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px 12px 16px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--peligro) 30%, var(--borde));
  border-left: 4px solid var(--peligro);
  border-radius: 12px;
  background: color-mix(in srgb, var(--peligro) 7%, var(--superficie-solida));
  color: var(--peligro);
  font-size: 0.86rem;
  font-weight: 600;
}

.formulario .error:empty {
  display: none;
}