/* =========================================================================
   Capacitrivia — estilo base (liquid glass)
   -------------------------------------------------------------------------
   Tema claro con gama de grises y naranjas, contrastes en azul/morado y los
   clásicos verde/rojo para estados. Superficies de vidrio translúcido con
   iluminación y degradados (especialmente en modales). Pensado responsive
   (mobile-first) para uso cómodo en tableta/celular.

   NOTA: este es el estilo BASE. El refinamiento estético se aborda en una
   fase posterior; aquí quedan definidos los tokens y componentes para
   construir con esa consideración.
   ========================================================================= */

:root {
  /* Grises */
  --gris-900: #1d2430;
  --gris-700: #3a4452;
  --gris-600: #566273;
  --gris-500: #7a8699;
  --gris-400: #a7b0bf;
  --gris-300: #cfd6e0;
  --gris-200: #e6eaf1;
  --gris-100: #f2f5fa;

  /* Naranjas (acento principal) */
  --naranja-600: #ea580c;
  --naranja-500: #f97316;
  --naranja-400: #fb923c;
  --naranja-300: #fdba74;

  /* Contrastes */
  --azul-600: #2563eb;
  --azul-500: #3b82f6;
  --morado-600: #7c3aed;
  --morado-500: #8b5cf6;

  /* Estados */
  --verde-600: #16a34a;
  --verde-500: #22c55e;
  --rojo-600: #dc2626;
  --rojo-500: #ef4444;

  /* Semánticos */
  --texto: var(--gris-900);
  --texto-suave: var(--gris-600);
  --borde: rgba(120, 134, 153, 0.28);

  /* Vidrio */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-fuerte: rgba(255, 255, 255, 0.82);
  --glass-borde: rgba(255, 255, 255, 0.7);
  --blur: 16px;

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(29, 36, 48, 0.06), 0 2px 8px rgba(29, 36, 48, 0.06);
  --sombra-md: 0 8px 24px rgba(29, 36, 48, 0.10);
  --sombra-lg: 0 24px 60px rgba(29, 36, 48, 0.22);

  --radio: 14px;
  --radio-sm: 10px;
  --radio-lg: 22px;

  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  color: var(--texto);
  background: linear-gradient(135deg, #f6f7fb 0%, #eef1f8 48%, #f4eee9 100%);
  background-attachment: fixed;
  line-height: 1.5;
}

/* Iluminación de fondo: manchas de color difusas, fijas. */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.bg-aurora::before {
  top: -12vw; right: -8vw;
  background: radial-gradient(circle at 30% 30%, var(--naranja-400), transparent 68%);
}
.bg-aurora::after {
  bottom: -16vw; left: -10vw;
  background: radial-gradient(circle at 60% 40%, var(--azul-500), transparent 66%);
}

/* ----- Layout general ----- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(14px, 4vw, 32px);
  border-bottom: 1px solid var(--glass-borde);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 1.1rem;
}
.topbar .brand .dot {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--naranja-500), var(--naranja-600));
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.45), inset 0 1px 1px rgba(255,255,255,0.6);
}
.topbar .spacer { flex: 1; }
.topbar .usuario {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 0.82rem; color: var(--texto-suave);
}
.topbar .usuario strong { color: var(--texto); font-size: 0.9rem; }

.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px);
}

/* ----- Superficie de vidrio ----- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--glass-borde);
}

.panel {
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  overflow: hidden;
}

/* ----- Cabecera del panel ----- */
.panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px clamp(16px, 3vw, 26px);
  border-bottom: 1px solid var(--borde);
}
.panel-head h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}
.panel-head .sub { color: var(--texto-suave); font-size: 0.85rem; margin-top: 2px; }
.panel-head .acciones { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ----- Botones ----- */
.btn {
  --bg: var(--glass-bg-fuerte);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--bg);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: var(--sombra-sm);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-md); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(135deg, var(--naranja-400), var(--naranja-600));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.35), inset 0 1px 1px rgba(255,255,255,0.4);
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-azul { background: linear-gradient(135deg, var(--azul-500), var(--azul-600)); border-color: transparent; color: #fff; }
.btn-morado { background: linear-gradient(135deg, var(--morado-500), var(--morado-600)); border-color: transparent; color: #fff; }
.btn-success { background: linear-gradient(135deg, var(--verde-500), var(--verde-600)); border-color: transparent; color: #fff; }
.btn-danger { background: linear-gradient(135deg, var(--rojo-500), var(--rojo-600)); border-color: transparent; color: #fff; }
.btn-sm { padding: 6px 10px; font-size: 0.78rem; border-radius: 9px; }
.btn-icon { padding: 7px; width: 34px; height: 34px; justify-content: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ----- Menú desplegable (plantilla) ----- */
.menu { position: relative; }
.menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  padding: 8px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  display: none;
  z-index: 30;
}
.menu.abierto .menu-lista { display: block; }
.menu-lista a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.85rem;
}
.menu-lista a:hover { background: rgba(37, 99, 235, 0.10); }
.menu-lista .sep { height: 1px; background: var(--borde); margin: 6px 4px; }
.menu-lista .etiqueta { padding: 6px 11px 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-suave); }

/* ----- Filtros ----- */
.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px clamp(16px, 3vw, 26px);
  border-bottom: 1px solid var(--borde);
}
.filtros .buscar {
  position: relative;
  flex: 1 1 260px;
  min-width: 180px;
}
.filtros .buscar input { width: 100%; padding-left: 36px; }
.filtros .buscar svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--gris-500); }

/* ----- Campos de formulario ----- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); }
input[type="text"], input[type="search"], input[type="file"],
input[type="number"], input[type="date"], select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.85);
  color: var(--texto);
  font: inherit;
  font-size: 0.88rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
select[multiple] { min-height: 92px; padding: 6px; }
.campo .ayuda { font-size: 0.74rem; color: var(--gris-500); }
.campo .error { font-size: 0.76rem; color: var(--rojo-600); min-height: 0; }
/* Inputs compactos: numéricos (máx. 3 dígitos) y fecha. No se estiran al ancho
   del campo flex. */
.input-num { width: 5.5rem; align-self: flex-start; text-align: center; }
.input-fecha { width: 13rem; max-width: 100%; align-self: flex-start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

/* ----- Tabla ----- */
.tabla-wrap { width: 100%; overflow-x: auto; }
table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.tabla thead th {
  text-align: left;
  padding: 12px clamp(12px, 2vw, 18px);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  background: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
}
table.tabla tbody td {
  padding: 12px clamp(12px, 2vw, 18px);
  border-bottom: 1px solid rgba(120, 134, 153, 0.16);
  vertical-align: middle;
}
table.tabla tbody tr { transition: background 0.12s ease; }
table.tabla tbody tr:hover { background: rgba(255, 255, 255, 0.5); }
table.tabla tbody tr.inactivo { opacity: 0.62; }
.nombre-cel { font-weight: 600; }
.correo-cel { display: block; font-weight: 400; font-size: 0.78rem; color: var(--texto-suave); }
.doc-cel { color: var(--texto-suave); }
.acciones-cel { display: flex; gap: 6px; justify-content: flex-end; }

/* ----- Chips / badges ----- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.chip + .chip { margin-left: 4px; }
.chip-perfil { background: rgba(124, 58, 237, 0.12); color: var(--morado-600); border-color: rgba(124, 58, 237, 0.25); }
.badge-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; }
.badge-estado .punto { width: 8px; height: 8px; border-radius: 50%; }
.badge-estado.activo { color: var(--verde-600); }
.badge-estado.activo .punto { background: var(--verde-500); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.badge-estado.inactivo { color: var(--gris-500); }
.badge-estado.inactivo .punto { background: var(--gris-400); }

/* ----- Paginación / vacío ----- */
.pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 26px);
}
.paginacion { display: flex; gap: 6px; align-items: center; }
.paginacion .pag-info { color: var(--texto-suave); font-size: 0.82rem; }
.vacio { text-align: center; padding: 56px 20px; color: var(--texto-suave); }
.vacio .icono { font-size: 2.2rem; opacity: 0.5; }

/* =========================================================================
   Modales
   ========================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(10px, 4vh, 48px) 14px;
  background: rgba(29, 36, 48, 0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow-y: auto;
}
.modal-overlay.abierto { display: flex; animation: overlay-in 0.16s ease; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: var(--radio-lg);
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(251, 146, 60, 0.18), transparent 46%),
    radial-gradient(130% 90% at 100% 0%, rgba(59, 130, 246, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-borde);
  box-shadow: var(--sombra-lg);
  animation: modal-in 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal.ancho { max-width: 760px; }
/* Highlight superior (iluminación) */
.modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
@keyframes modal-in { from { transform: translateY(14px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 12px;
}
.modal-head h2 { margin: 0; font-size: 1.12rem; font-weight: 700; }
.modal-head .sub { color: var(--texto-suave); font-size: 0.82rem; margin-top: 3px; }
.modal-cerrar {
  margin-left: auto;
  border: none; background: rgba(120,134,153,0.12);
  width: 32px; height: 32px; border-radius: 9px;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--texto-suave);
}
.modal-cerrar:hover { background: rgba(220, 38, 38, 0.14); color: var(--rojo-600); }
.modal-body { padding: 8px 22px 6px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 20px;
  flex-wrap: wrap;
}

/* Línea de tiempo del historial */
.timeline { list-style: none; margin: 6px 0 10px; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 2px solid var(--borde);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 2px; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--naranja-400), var(--naranja-600));
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
}
.timeline .cuando { font-size: 0.76rem; color: var(--texto-suave); }
.timeline .que { font-weight: 600; margin: 1px 0 4px; }
.timeline .cambios { font-size: 0.8rem; color: var(--gris-700); }
.timeline .cambios .fila { display: flex; gap: 6px; flex-wrap: wrap; }
.timeline .cambios b { color: var(--texto); }
.timeline .antes { color: var(--rojo-600); text-decoration: line-through; opacity: 0.8; }
.timeline .despues { color: var(--verde-600); }
.timeline .actor { font-size: 0.74rem; color: var(--gris-500); }

/* Resumen de carga masiva */
.resumen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.resumen .caja {
  flex: 1 1 110px; text-align: center;
  padding: 12px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde); background: rgba(255,255,255,0.6);
}
.resumen .caja .n { font-size: 1.5rem; font-weight: 700; }
.resumen .caja .et { font-size: 0.74rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.4px; }
.resumen .caja.ok .n { color: var(--verde-600); }
.resumen .caja.upd .n { color: var(--azul-600); }
.resumen .caja.err .n { color: var(--rojo-600); }
.lista-errores { max-height: 220px; overflow-y: auto; font-size: 0.82rem; }
.lista-errores .er { padding: 7px 10px; border-radius: 8px; background: rgba(220,38,38,0.08); margin-bottom: 6px; }

/* Estado vacío dentro de modal */
.modal .vacio { padding: 34px 10px; }

/* ----- Toasts ----- */
#toast-stack {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(92vw, 380px);
}
.toast {
  padding: 12px 16px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  background: var(--glass-bg-fuerte);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-borde);
  border-left: 4px solid var(--azul-500);
  font-size: 0.86rem;
  animation: toast-in 0.2s ease;
}
.toast.ok { border-left-color: var(--verde-500); }
.toast.error { border-left-color: var(--rojo-500); }
@keyframes toast-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ----- Responsive: tabla -> tarjetas en móvil ----- */
@media (max-width: 720px) {
  .panel-head .acciones { width: 100%; }
  table.tabla thead { display: none; }
  table.tabla, table.tabla tbody, table.tabla tr, table.tabla td { display: block; width: 100%; }
  table.tabla tbody tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    margin-bottom: 12px;
    padding: 6px 4px;
    background: rgba(255,255,255,0.55);
  }
  table.tabla tbody td { border: none; padding: 7px 14px; display: flex; justify-content: space-between; gap: 14px; }
  table.tabla tbody td::before {
    content: attr(data-label);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--texto-suave); font-weight: 600;
  }
  .acciones-cel { justify-content: flex-start; flex-wrap: wrap; }
  table.tabla tbody td.acciones-cel::before { display: none; }
}

/* =========================================================================
   Navegación del encabezado (menús de módulos + menú de usuario)
   ========================================================================= */
.brand { text-decoration: none; color: inherit; }

.nav-menus { display: flex; gap: 4px; margin-left: 10px; }
.nav-toggle, .usuario-boton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: none; background: transparent; color: var(--texto);
  font: inherit; font-weight: 600; font-size: 0.88rem; border-radius: 10px; cursor: pointer;
}
.nav-toggle .ic { font-size: 0.95rem; }
.caret { font-size: 0.68rem; color: var(--texto-suave); }
.nav-toggle:hover, .usuario-boton:hover { background: rgba(255, 255, 255, 0.55); }
.nav-toggle.activo { color: var(--naranja-600); background: rgba(249, 115, 22, 0.10); }
.menu-lista a.activo { background: rgba(249, 115, 22, 0.12); color: var(--naranja-600); font-weight: 600; }

.usuario-menu .menu-lista { min-width: 220px; }
.usuario-boton .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 0.85rem;
  background: linear-gradient(135deg, var(--azul-500), var(--morado-600));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.usuario-boton .usuario-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.usuario-boton .usuario-txt strong { font-size: 0.86rem; }
.usuario-boton .usuario-txt span { font-size: 0.74rem; color: var(--texto-suave); font-weight: 500; }
.logout-form { margin: 0; }
.salir {
  width: 100%; text-align: left; border: none; background: transparent; font: inherit;
  font-size: 0.85rem; font-weight: 600; padding: 9px 11px; border-radius: 9px;
  cursor: pointer; color: var(--rojo-600);
}
.salir:hover { background: rgba(220, 38, 38, 0.12); }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .nav-menus { order: 3; width: 100%; margin: 4px 0 2px; overflow-x: auto; }
  .usuario-boton .usuario-txt { display: none; }
}

/* =========================================================================
   Autenticación (login) y páginas de error — misma estética glass
   ========================================================================= */
.centro-auth { width: 100%; max-width: 420px; }

.auth-card, .error-card {
  width: 100%;
  border-radius: var(--radio-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251, 146, 60, 0.18), transparent 46%),
    radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.83));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-borde);
  box-shadow: var(--sombra-lg);
}
.auth-card { padding: 30px 28px 28px; }

.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.auth-brand .dot {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, var(--naranja-500), var(--naranja-600));
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.auth-titulo { margin: 18px 0 2px; font-size: 1.4rem; }
.auth-sub { margin: 0 0 18px; color: var(--texto-suave); font-size: 0.88rem; }
.auth-submit { width: 100%; justify-content: center; margin-top: 8px; padding: 11px; }

.aviso { padding: 10px 13px; border-radius: var(--radio-sm); font-size: 0.84rem; margin-bottom: 14px; border: 1px solid transparent; }
.aviso-warn { background: rgba(249, 115, 22, 0.12); color: var(--naranja-600); border-color: rgba(249, 115, 22, 0.3); }
.aviso-error { background: rgba(220, 38, 38, 0.10); color: var(--rojo-600); border-color: rgba(220, 38, 38, 0.28); }

.error-card { max-width: 440px; text-align: center; padding: 34px 28px; }
.error-code {
  font-size: 3.4rem; font-weight: 800; line-height: 1; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--naranja-500), var(--naranja-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-code.azul { background: linear-gradient(135deg, var(--azul-500), var(--azul-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-code.morado { background: linear-gradient(135deg, var(--morado-500), var(--morado-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-code.rojo { background: linear-gradient(135deg, var(--rojo-500), var(--rojo-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-card h1 { margin: 6px 0 8px; font-size: 1.3rem; }
.error-card p { color: var(--texto-suave); font-size: 0.9rem; margin: 0 0 20px; }

/* ----- Editor de trivias ----- */
.editor-body { padding: 18px clamp(16px, 3vw, 26px) 26px; }
.editor-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.editor-h2 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.pregunta-card { border-radius: var(--radio); padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra-sm); }
.pregunta-head { display: flex; align-items: center; margin-bottom: 10px; }
.pregunta-num { font-weight: 700; color: var(--naranja-600); }
.opciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .opciones-grid { grid-template-columns: 1fr; } }
.opcion-row { display: flex; align-items: center; gap: 8px; }
.op-letra {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: #fff;
  background: linear-gradient(135deg, var(--azul-500), var(--morado-600));
}
.opcion-row .q-opcion { flex: 1; }
.op-correcta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--texto-suave); white-space: nowrap; }
.op-correcta input { width: auto; }

/* ----- Editor de campañas: comodines + lista dual ----- */
/* Comodines en fila: ambos caben en una sola línea si hay ancho; si no, bajan. */
.comodines-config { display: flex; flex-flow: row wrap; gap: 10px; margin-bottom: 6px; }
.comodin-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  flex: 1 1 280px; min-width: 240px;
  padding: 10px 12px; border: 1px solid var(--borde);
  border-radius: var(--radio-sm); background: rgba(255, 255, 255, 0.5);
}
.comodin-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.88rem; flex: 1 1 auto; }
.comodin-check input { width: auto; }
.comodin-usos { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--texto-suave); margin-left: auto; }
.comodin-usos input { width: 64px; text-align: center; }

/* Filtros de destinatarios: nombre + documento + cargo en una grilla responsiva. */
.dual-filtros {
  display: grid; gap: 8px; margin: 10px 0;
  grid-template-columns: 1fr 1fr minmax(140px, 1fr) auto;
  align-items: center;
}
.dual-filtros input, .dual-filtros select { width: 100%; }
@media (max-width: 560px) {
  .dual-filtros { grid-template-columns: 1fr 1fr; }
  .dual-filtros #btn-buscar-dest { grid-column: 1 / -1; }
}

.dual-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 720px) { .dual-list { grid-template-columns: 1fr; } }
.dual-col { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; background: rgba(255, 255, 255, 0.4); }
.dual-head { display: flex; align-items: baseline; gap: 8px; }
.dual-acciones { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.dual-lista { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.dual-lista li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.65); border: 1px solid var(--borde);
}
.dual-lista li .dual-info { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.dual-info strong { font-size: 0.86rem; }
.dual-info span { font-size: 0.74rem; color: var(--texto-suave); }
.dual-vacio { justify-content: center; color: var(--texto-suave); font-size: 0.82rem; background: transparent !important; border: none !important; }

/* ----- Restablecimiento de contraseña ----- */
.pass-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pass-row input { flex: 1 1 160px; }
.chip-clave {
  background: rgba(249, 115, 22, 0.14);
  color: var(--naranja-600);
  border-color: rgba(249, 115, 22, 0.3);
  margin-left: 6px;
}

/* =========================================================================
   Mis trivias (dashboard Personal)
   ========================================================================= */
.mis-trivias { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 18px clamp(16px,3vw,26px) 26px; }
.mt-card { border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; gap: 10px; }
.mt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mt-nombre { margin: 0; font-size: 1.05rem; }
.mt-estado { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.estado-en_curso { background: rgba(37,99,235,.14); color: var(--azul-600); }
.estado-disponible { background: rgba(22,163,74,.14); color: var(--verde-600); }
.estado-finalizada { background: rgba(120,134,153,.16); color: var(--gris-600); }
.estado-vencida { background: rgba(220,38,38,.12); color: var(--rojo-600); }
.mt-trivia { font-size: 0.84rem; color: var(--texto-suave); }
.mt-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-datos div { display: flex; flex-direction: column; }
.mt-datos span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); }
.mt-datos strong { font-size: 0.9rem; }
.mt-accion { margin-top: 4px; }
.mt-nota { font-size: 0.8rem; color: var(--texto-suave); }

/* =========================================================================
   Motor de juego (pantalla inmersiva)
   ========================================================================= */
.juego-body {
  margin: 0; min-height: 100vh; font-family: var(--fuente); color: #eaf0ff;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(37,99,235,.40), transparent 60%),
    linear-gradient(180deg, #0b1030, #0a1b4a 55%, #0b1030);
  background-attachment: fixed;
}
.juego-stage { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.juego-top { display: flex; align-items: center; gap: 12px; padding: 14px clamp(12px,4vw,30px); }
.juego-salir { color: #cdd7ff; text-decoration: none; font-size: 0.85rem; opacity: .85; }
.juego-salir:hover { opacity: 1; }
.juego-logo { flex: 1; text-align: center; display: flex; flex-direction: column; line-height: 1; }
.logo-sub { font-size: 0.6rem; letter-spacing: 3px; color: #f6c667; opacity: .8; }
.logo-main {
  font-size: clamp(1.6rem,5vw,2.6rem); font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe9a8, #f0b429 55%, #a9720a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(240,180,41,.45));
}
.juego-progreso { min-width: 120px; text-align: right; font-size: 0.82rem; color: #bcd0ff; }
.juego-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 10px clamp(12px,5vw,40px) 30px; width: 100%; max-width: 1000px; margin: 0 auto; }
.comodines-barra { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.comodin-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(246,198,103,.5); background: rgba(10,20,60,.6); color: #f6e3b5;
  font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; backdrop-filter: blur(6px);
}
.comodin-btn .cm-icono { font-weight: 900; color: #f0b429; }
.comodin-btn .cm-rest { background: #f0b429; color: #2a1a00; border-radius: 999px; padding: 0 7px; font-size: .72rem; }
.comodin-btn:disabled { opacity: .4; cursor: not-allowed; }
.pregunta-panel {
  width: 100%; border-radius: 16px; padding: 22px 26px; text-align: center;
  background: linear-gradient(180deg, rgba(8,16,54,.9), rgba(10,24,70,.9));
  border: 2px solid rgba(120,170,255,.5);
  box-shadow: 0 0 0 2px rgba(0,0,0,.3) inset, 0 10px 40px rgba(0,0,0,.4), 0 0 30px rgba(80,140,255,.2);
}
.pregunta-enunciado { font-size: clamp(1.05rem,2.4vw,1.5rem); font-weight: 600; }
.respuestas-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .respuestas-grid { grid-template-columns: 1fr; } }
.respuesta {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 10px; cursor: pointer;
  text-align: left; color: #eef3ff; font: inherit; font-size: clamp(.9rem,2vw,1.05rem);
  background: linear-gradient(180deg, rgba(10,22,66,.92), rgba(8,16,50,.92));
  border: 2px solid rgba(120,170,255,.45);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  transition: transform .08s, box-shadow .15s, background .15s;
}
.respuesta:hover { transform: translateY(-1px); }
.respuesta .r-letra { color: #f0b429; font-weight: 900; font-size: 1.05em; min-width: 1.2em; }
.respuesta.selected { background: linear-gradient(180deg, #e0820f, #b4610a); border-color: #ffd77a; color: #fff; }
.respuesta.correcta { background: linear-gradient(180deg, #1f9d4e, #157a3b); border-color: #7ef0a6; color: #fff; }
.respuesta.correcta .r-letra, .respuesta.selected .r-letra { color: #fff; }
.respuesta.errada { background: linear-gradient(180deg, #c0392b, #8f271d); border-color: #ff9c90; color: #fff; }
.respuesta.neutro { background: linear-gradient(180deg, #3a4a80, #28356a); }
.juego-acciones { display: flex; gap: 12px; min-height: 44px; }
.btn-juego {
  padding: 11px 22px; border-radius: 12px; border: 1px solid #ffd77a;
  background: linear-gradient(180deg, #f0b429, #c98a10); color: #2a1a00; font: inherit; font-weight: 800;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn-juego:hover { filter: brightness(1.05); }
.btn-juego:disabled { opacity: .42; cursor: not-allowed; filter: none; }
.btn-juego:disabled:hover { filter: none; }
.audiencia-box {
  position: fixed; top: 84px; right: 18px; width: 200px; padding: 12px; border-radius: 14px;
  background: rgba(8,16,50,.85); border: 1px solid rgba(120,170,255,.4); backdrop-filter: blur(8px); z-index: 5;
}
.audiencia-titulo { font-size: .78rem; color: #bcd0ff; margin-bottom: 8px; text-align: center; }
.audiencia-barras { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 130px; }
.aud-col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.aud-barra-wrap { height: 90px; display: flex; align-items: flex-end; }
.aud-barra { width: 26px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #5aa0ff, #2563eb); min-height: 3px; }
.aud-val { font-size: .68rem; color: #eaf0ff; }
.aud-letra { font-weight: 800; color: #f0b429; font-size: .85rem; }
@media (max-width: 820px) {
  .audiencia-box { position: static; width: 100%; margin: 0 auto; order: -1; }
  .audiencia-barras { height: 110px; }
}
.juego-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,26,.78); backdrop-filter: blur(6px); padding: 20px;
}
/* El atributo `hidden` debe ocultar SIEMPRE. Varias clases con `display` propio
   (overlay, botones del juego, caja de audiencia) le ganaban a la regla UA
   `[hidden]{display:none}` por orden de cascada, dejando elementos visibles que
   debían estar ocultos. */
[hidden] { display: none !important; }
.overlay-card {
  text-align: center; max-width: 420px; padding: 30px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,22,66,.95), rgba(8,16,50,.95));
  border: 1px solid rgba(120,170,255,.5); box-shadow: 0 20px 60px rgba(0,0,0,.5); color: #eaf0ff;
}
.overlay-card h2 { margin: .4em 0; }
.res-icono { font-size: 2.6rem; }
.res-score { font-size: 2.4rem; font-weight: 900; color: #f0b429; }
.res-pct { color: #bcd0ff; margin-bottom: 16px; }

/* ----- Resultados de campaña: tabs y detalle ----- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--borde); background: rgba(255,255,255,.6); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.tab-btn.activo { background: linear-gradient(135deg, var(--azul-500), var(--azul-600)); color: #fff; border-color: transparent; }
.det-resumen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: .9rem; }
.det-fechas { color: var(--texto-suave); font-size: .78rem; }
.chip-ok { background: rgba(22,163,74,.14); color: var(--verde-600); border-color: rgba(22,163,74,.25); }
.det-preg { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,.55); }
.det-preg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.det-num { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--azul-500), var(--morado-600)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; }
.det-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.det-ok { background: rgba(22,163,74,.14); color: var(--verde-600); }
.det-mal { background: rgba(220,38,38,.12); color: var(--rojo-600); }
.det-sin { background: rgba(120,134,153,.16); color: var(--gris-600); }
.det-enun { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.det-resp { font-size: .84rem; }
.det-correcta { font-size: .8rem; color: var(--verde-600); margin-top: 2px; }

/* ----- Modal: fila de enlace para copiar ----- */
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row input { flex: 1; min-width: 0; font-size: 0.82rem; }

/* ----- Home / Menú principal ----- */
.home-wrap { padding: clamp(20px, 3vw, 30px); }
.home-hero { margin-bottom: 22px; }
.home-hero h1 { margin: 0 0 4px; font-size: 1.5rem; }
.home-hero .sub { color: var(--texto-suave); font-size: 0.92rem; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.home-card {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.5); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 40, 80, .10); border-color: rgba(124, 58, 237, .3); }
.home-card-top { display: flex; align-items: center; gap: 10px; }
.home-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(124, 58, 237, .14));
}
.home-card h2 { margin: 0; font-size: 1.05rem; }
.home-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.home-links a {
  font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--borde); color: var(--texto); background: rgba(255, 255, 255, .7);
}
.home-links a:hover { border-color: var(--morado-600); color: var(--morado-600); }
.home-vacio { color: var(--texto-suave); font-size: .9rem; }
.det-comodin { font-size: .78rem; color: var(--morado-600); margin-top: 2px; }
.logo-prueba { font-size: .6rem; letter-spacing: 2px; color: #ff9c90; font-weight: 800; margin-top: 2px; }