/**
 * Tema global del panel — importa el design system.
 * Mantener este archivo en todas las páginas para consistencia visual.
 */
@import url("design-tokens.css?v=20260808c");
@import url("panel-ui.css?v=20260724b");
@import url("stark-hud.css?v=20260808b");

/* Cache-bust hint for deploy: 20260723d — contraste forzado anti-gris */

/* Compatibilidad: páginas sin clase panel-app siguen heredando base */
body:not(.panel-app) {
  background:
    radial-gradient(900px 500px at 20% 0%, var(--primary-muted), transparent 60%),
    radial-gradient(700px 500px at 90% 15%, var(--info-muted), transparent 55%),
    var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body:not(.panel-app) .table,
body:not(.panel-app) .table thead,
body:not(.panel-app) .table tbody,
body:not(.panel-app) .table tr,
body:not(.panel-app) .table th,
body:not(.panel-app) .table td {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

body:not(.panel-app) .form-control,
body:not(.panel-app) .form-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

body:not(.panel-app) .form-control:focus,
body:not(.panel-app) .form-select:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}

body:not(.panel-app) .form-control,
body:not(.panel-app) .form-select,
body:not(.panel-app) textarea {
  color: var(--text-primary) !important;
}

body:not(.panel-app) .form-control::placeholder,
body:not(.panel-app) textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

body:not(.panel-app) .text-muted,
body:not(.panel-app) .form-text,
body:not(.panel-app) small.text-muted {
  color: var(--text-secondary) !important;
}

body:not(.panel-app) .alert-secondary {
  background: var(--surface-solid) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

body:not(.panel-app) .alert-info.text-dark,
body:not(.panel-app) .alert.text-dark {
  color: var(--text-primary) !important;
}

/* ============================================================================
 * CAPA NEÓN GLOBAL (2026-07-23) — mismo lenguaje del checkout, calibrado para
 * todo el panel: glow + realce al pasar el cursor en botones/tarjetas/badges,
 * anillo de foco neón, y un barrido de luz SOLO en los botones primarios (no en
 * tablas ni formularios, para no marear en páginas con muchos datos).
 * Todo se apaga con prefers-reduced-motion.
 * ==========================================================================*/
@keyframes neonSweep {
  0%   { transform: translateX(-160%) skewX(-16deg); }
  60%  { transform: translateX(420%)  skewX(-16deg); }
  100% { transform: translateX(420%)  skewX(-16deg); }
}
@keyframes neonBreath {
  0%, 100% { box-shadow: 0 0 0 1px var(--border), 0 0 18px -12px var(--primary); }
  50%      { box-shadow: 0 0 0 1px var(--primary-border), 0 0 26px -10px var(--primary); }
}

/* Botones: glow según su color y realce al hover ------------------------- */
.btn { transition: transform .16s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.btn-primary, .btn-warning {
  position: relative; overflow: hidden;
  box-shadow: 0 0 18px -6px var(--primary), 0 6px 18px -10px rgba(0,0,0,.6);
}
.btn-primary:hover, .btn-warning:hover {
  box-shadow: 0 0 26px -4px var(--primary), 0 10px 26px -10px rgba(0,0,0,.6);
}
/* barrido de luz solo en primarios */
.btn-primary::after, .btn-warning::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-160%) skewX(-16deg);
  animation: neonSweep 4.6s cubic-bezier(.5,0,.25,1) infinite;
  pointer-events: none;
}
.btn-success  { box-shadow: 0 0 16px -7px var(--success); }
.btn-danger   { box-shadow: 0 0 16px -7px var(--danger); }
.btn-info     { box-shadow: 0 0 16px -7px var(--info); }
.btn-outline-light:hover, .btn-outline-secondary:hover { box-shadow: 0 0 18px -8px var(--info); }

/* Tarjetas / paneles: borde con glow suave y realce al hover ------------- */
.card, .panel-card, .surface-card {
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover, .panel-card:hover, .surface-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--primary-border), 0 12px 34px -14px rgba(0,0,0,.7), 0 0 24px -14px var(--primary);
}

/* Badges: leve resplandor según su tono ---------------------------------- */
.badge { text-shadow: 0 0 8px currentColor; }

/* Focos de formulario: anillo neón -------------------------------------- */
.form-control:focus, .form-select:focus, .btn-check:focus + .btn {
  border-color: var(--info) !important;
  box-shadow: 0 0 0 3px var(--info-muted), 0 0 16px -6px var(--info) !important;
}

/* Enlaces: glow al pasar el cursor -------------------------------------- */
a:not(.btn):hover { text-shadow: 0 0 10px currentColor; }

/* Filas de tabla: realce sobrio al pasar (sin animación, legible) -------- */
.table-hover tbody tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(56,189,248,.06);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-warning::after { animation: none; opacity: 0; }
  .btn, .card, .panel-card, .surface-card { transition: none; }
  .btn:hover, .card:hover, .panel-card:hover, .surface-card:hover { transform: none; }
}