/* =================================================================
   GOTHIC CASTLE THEME — Visual Ambiance Only
   Fortaleza medieval gótica bajo tormenta nocturna
   Paleta: Negro (#010508) · Azul marino (#030d1e) ·
           Azul eléctrico (#0055cc) · Cian frío (#00ccee)
   SIN violeta · SIN magenta · SIN rojo · SIN naranja
   Todos los textos, estructuras y layouts intactos.
   ================================================================= */

/* ---------------------------------------------------------------
   0. HTML / BODY
--------------------------------------------------------------- */
html {
  /* Scrollbar Firefox */
  scrollbar-color: rgba(0, 90, 200, 0.70) rgba(1, 5, 18, 0.90) !important;
}

/* Crea stacking context: body::before (z-index:-1) queda ENCIMA
   del fondo de design.json pero DEBAJO del contenido. */
body {
  isolation: isolate;
}

/* ---------------------------------------------------------------
   OVERLAY GÓTICO — superpuesto al fondo PHP existente
   El fondo de design.json (imagen_principal/imagen_bottom/color_body)
   sigue funcionando sin cambios.
   Capas (frente → fondo dentro del overlay):
     1. Atmósfera superior: tormenta oscura
     2. Aura azul eléctrica arriba-centro
     3. Resplandor borde izquierdo
     4. Resplandor borde derecho
     5. Niebla inferior
     6. Partículas sutiles (patrón 38 px)
     7. Partículas finas   (patrón 61 px)
     8. Silueta castillo gótico SVG (parte inferior)
--------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    radial-gradient(ellipse 135% 38% at 50% -2%,  rgba(0, 16, 62, 0.88) 0%, rgba(0, 4, 18, 0.40) 50%, transparent 78%),
    radial-gradient(ellipse 42%  20% at 50%  9%,  rgba(0, 42, 160, 0.18) 0%, transparent 100%),
    radial-gradient(ellipse 20%  90% at  0% 50%,  rgba(0, 20, 72, 0.24) 0%, transparent 100%),
    radial-gradient(ellipse 20%  90% at 100% 50%, rgba(0, 20, 72, 0.24) 0%, transparent 100%),
    radial-gradient(ellipse 100% 28% at 50% 104%, rgba(0,  8, 30, 0.68) 0%, transparent 100%),
    radial-gradient(circle, rgba(0, 170, 255, 0.09) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 140, 220, 0.06) 1px, transparent 1px),
    url('../img/gothic-castle.svg');

  background-size:
    cover,
    cover,
    cover,
    cover,
    cover,
    38px 38px,
    61px 61px,
    100% 62vh;

  background-position:
    top center,
    top center,
    center left,
    center right,
    bottom center,
    center center,
    center center,
    bottom center;

  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat,
    no-repeat;
}

/* ---------------------------------------------------------------
   1. ANIMACIÓN — destello de relámpago muy sutil
--------------------------------------------------------------- */
@keyframes gothic-lightning {
  0%,   88%,   92%,   95%,  100% { opacity: 0; }
  89%                            { opacity: 0.09; }
  90%                            { opacity: 0; }
  93%                            { opacity: 0.05; }
  94%                            { opacity: 0; }
}

@keyframes gothic-twinkle {
  0%,  100% { opacity: 0.7; }
  50%        { opacity: 1.0; }
}

/* Destello de relámpago — overlay fijo dentro del stacking context de body */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 35% at 68% 9%, rgba(0, 75, 255, 0.60) 0%, transparent 75%);
  opacity: 0;
  animation: gothic-lightning 14s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ---------------------------------------------------------------
   2. PANELES — card-area (panel principal y sidebar)
      Fondo casi negro-azulado · Borde azul oscuro fino
      Sombra profunda · Resplandor cian muy leve
--------------------------------------------------------------- */
.card-area {
  background: rgba(2, 7, 20, 0.92) !important;
  border: 1px solid rgba(0, 55, 138, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(0, 85, 195, 0.07),
    0 6px 28px rgba(0, 0, 0, 0.88),
    0 2px 8px  rgba(0, 0, 0, 0.75),
    inset 0 0 28px rgba(0, 22, 65, 0.12),
    0 0 3px rgba(0, 145, 255, 0.08) !important;
}

.hero-section .hero-content .card-area {
  background: rgba(2, 7, 20, 0.92) !important;
  border: 1px solid rgba(0, 55, 138, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(0, 85, 195, 0.07),
    0 6px 28px rgba(0, 0, 0, 0.88),
    inset 0 0 28px rgba(0, 22, 65, 0.12),
    0 0 3px rgba(0, 145, 255, 0.08) !important;
}

/* ---------------------------------------------------------------
   3. STAT WIDGET — #gGST_Wrap
--------------------------------------------------------------- */
#gGST_Wrap {
  background: rgba(1, 5, 18, 0.82) !important;
  border: 1px solid rgba(0, 55, 130, 0.45) !important;
  box-shadow:
    0 0 22px rgba(0, 0, 0, 0.80),
    0 0 8px  rgba(0, 50, 130, 0.18) !important;
  backdrop-filter: blur(6px) !important;
}

/* ---------------------------------------------------------------
   4. HEADER / NAVBAR
--------------------------------------------------------------- */
.header-section,
.header-section.fixed-header {
  background: rgba(1, 4, 14, 0.95) !important;
  border-bottom: 1px solid rgba(0, 52, 126, 0.40) !important;
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.88),
    0 0  10px rgba(0, 38, 110, 0.14) !important;
  backdrop-filter: blur(8px) !important;
}

/* ---------------------------------------------------------------
   4b. BOTONES DE NAVEGACIÓN (navbar.php)
   Los botones tienen estilos inline — se anulan con !important.
   Fondo: cristal oscuro azulado · Borde: azul marino fino
   Sombra profunda · Resplandor cian al hover
--------------------------------------------------------------- */

/* Contenedor de botones — panel/ventana gótica */
.d-flex[align="center"] {
  background: rgba(2, 7, 20, 0.78) !important;
  border: 1px solid rgba(0, 55, 138, 0.45) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(0, 80, 190, 0.06),
    0 4px 22px rgba(0, 0, 0, 0.82),
    inset 0 0 20px rgba(0, 18, 55, 0.10),
    0 0 2px rgba(0, 130, 255, 0.07) !important;
  padding: 10px 8px !important;
  height: auto !important;
  backdrop-filter: blur(4px) !important;
}

/* Botones individuales — cristal oscuro */
.d-flex .btn-success,
.d-flex .btn.btn-success {
  background-color: rgba(2, 8, 24, 0.82) !important;
  border: 1px solid rgba(0, 68, 160, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(0, 100, 220, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.70) !important;
  color: rgba(185, 215, 255, 0.90) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.d-flex .btn-success:hover,
.d-flex .btn.btn-success:hover {
  background-color: rgba(0, 20, 55, 0.92) !important;
  border: 1px solid rgba(0, 108, 235, 0.72) !important;
  box-shadow:
    0 0 12px rgba(0, 148, 255, 0.28),
    inset 0 1px 0 rgba(0, 140, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.80) !important;
  color: rgba(0, 210, 255, 1.00) !important;
}

/* Botón dropdown de idiomas */
.dropdown > .btn-success,
.dropdown > .btn.btn-success {
  background-color: rgba(2, 8, 24, 0.82) !important;
  border: 1px solid rgba(0, 68, 160, 0.52) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.70) !important;
  color: rgba(185, 215, 255, 0.90) !important;
}

/* ---------------------------------------------------------------
   5. MODAL
--------------------------------------------------------------- */
.modal-content {
  background-color: rgba(3, 9, 26, 0.97) !important;
  border: 1px solid rgba(0, 62, 148, 0.50) !important;
  box-shadow:
    0 0 55px rgba(0, 0, 0, 0.92),
    0 0 18px rgba(0, 48, 128, 0.28) !important;
}

/* ---------------------------------------------------------------
   6. TABLAS — filas y celdas
      El color del texto NO se toca; solo el fondo y borde
--------------------------------------------------------------- */
.table > :not(caption) > * > * {
  background-color: rgba(2, 7, 20, 0.70) !important;
  border-bottom: 1px solid rgba(0, 40, 95, 0.42) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 15, 42, 0.55) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(0, 22, 60, 0.78) !important;
}

/* ---------------------------------------------------------------
   7. INPUTS, FORMULARIOS
--------------------------------------------------------------- */
.form-control {
  background-color: rgba(2, 7, 22, 0.88) !important;
  border-color: rgba(0, 55, 130, 0.50) !important;
  color: rgba(190, 220, 255, 0.92) !important;
}

.form-control:focus {
  background-color: rgba(2, 8, 25, 0.94) !important;
  border-color: rgba(0, 100, 220, 0.65) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 80, 200, 0.18) !important;
}

input {
  background-color: rgba(2, 7, 22, 0.88) !important;
  border-color: rgba(0, 55, 130, 0.50) !important;
}

/* ---------------------------------------------------------------
   8. DROPDOWN MENUS
--------------------------------------------------------------- */
.dropdown-menu {
  background: rgba(2, 7, 22, 0.97) !important;
  border: 1px solid rgba(0, 55, 130, 0.48) !important;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.85) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(0, 25, 70, 0.80) !important;
  color: rgba(0, 195, 255, 0.95) !important;
}

/* ---------------------------------------------------------------
   9. PAGINACIÓN
--------------------------------------------------------------- */
.page-link {
  background-color: rgba(2, 7, 22, 0.92) !important;
  border-color: rgba(0, 50, 125, 0.42) !important;
  color: rgba(140, 195, 255, 0.88) !important;
}

.page-link:hover {
  background-color: rgba(0, 25, 68, 0.90) !important;
  color: rgba(0, 200, 255, 1.00) !important;
}

.page-item.active .page-link {
  background-color: rgba(0, 55, 150, 0.70) !important;
  border-color: rgba(0, 90, 210, 0.65) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background-color: rgba(2, 7, 18, 0.75) !important;
  border-color: rgba(0, 35, 90, 0.30) !important;
}

/* ---------------------------------------------------------------
   10. BOTONES — resplandor sutil al hover (solo sombra, sin color)
--------------------------------------------------------------- */
.btn-success:hover {
  box-shadow: 0 0 10px rgba(0, 175, 255, 0.22) !important;
}

.btn-primary:hover {
  box-shadow: 0 0 10px rgba(0, 120, 255, 0.28) !important;
}

/* ---------------------------------------------------------------
   11. BARRA ONLINE (progress bar)
--------------------------------------------------------------- */
.webengine-online-bar {
  background-color: rgba(2, 8, 24, 0.85) !important;
  border: 1px solid rgba(0, 45, 110, 0.38) !important;
}

.webengine-online-bar-progress {
  background: linear-gradient(90deg, #002866, #0066cc, #00aaee) !important;
}

/* ---------------------------------------------------------------
   12. SCROLLBAR
--------------------------------------------------------------- */
::-webkit-scrollbar-track {
  background: rgba(1, 5, 18, 0.95) !important;
  border-radius: 5px !important;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
  background: rgba(0, 80, 195, 0.68) !important;
  border-radius: 5px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 110, 240, 0.85) !important;
}

/* ---------------------------------------------------------------
   13. SELECTION
--------------------------------------------------------------- */
::selection {
  background: rgba(0, 80, 200, 0.40) !important;
  color: rgba(0, 220, 255, 1.00) !important;
}

/* ---------------------------------------------------------------
   14. HR-LINE (separadores decorativos del template)
--------------------------------------------------------------- */
.hr-line {
  background: rgba(0, 80, 180, 0.40) !important;
}

/* ---------------------------------------------------------------
   15. CARD (Bootstrap .card)
--------------------------------------------------------------- */
.card {
  background-color: rgba(2, 7, 20, 0.88) !important;
  border-color: rgba(0, 52, 130, 0.42) !important;
}

/* ---------------------------------------------------------------
   16. ALERTA SUCCESS / ERROR (paneles info)
--------------------------------------------------------------- */
.bg-success {
  background-color: rgba(0, 50, 90, 0.40) !important;
  color: rgba(0, 210, 255, 0.95) !important;
}

/* ---------------------------------------------------------------
   17. FOOTER — zona inferior de la página
--------------------------------------------------------------- */
footer,
body > center {
  background: transparent !important;
  border-top: 1px solid rgba(0, 45, 110, 0.28) !important;
}

/* ---------------------------------------------------------------
   18. PRELOADER — fondo negro puro (sin cambio visual notable)
--------------------------------------------------------------- */
.preloader {
  background-color: #010508 !important;
}

/* ---------------------------------------------------------------
   19. LINEAS DECORATIVAS DEL TEMPLATE (lines / animated lines)
      Cambia el amarillo/dorado por azul eléctrico
--------------------------------------------------------------- */
.lines .line::after {
  background: linear-gradient(to bottom, rgba(0, 160, 255, 0) 0%, rgba(0, 160, 255, 0.70) 75%, rgba(0, 160, 255, 0.70) 100%) !important;
}

/* ---------------------------------------------------------------
   20. CUSTOM NAV sub-menus
--------------------------------------------------------------- */
.header-section .custom-nav .sub-menu {
  background: rgba(1, 5, 16, 0.97) !important;
  border: 1px solid rgba(0, 50, 125, 0.40) !important;
}

/* ---------------------------------------------------------------
   21. ALERTS (Bootstrap)
--------------------------------------------------------------- */
.alert {
  background-color: rgba(2, 8, 26, 0.82) !important;
  border-color: rgba(0, 55, 138, 0.42) !important;
  color: rgba(160, 210, 255, 0.92) !important;
}