@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Mountains+of+Christmas:wght@400;700&display=swap');

/* ========= Variables (Tema Oscuro Navideño) ========= */
:root{
  /* Base oscura */
  --bg-primary: #0A1929; /* Azul oscuro elegante */
  --bg-secondary: #1E1E1E; /* Gris oscuro */
  --text-primary: #E8F5E9; /* Verde claro para texto */
  --text-secondary: #B0BEC5; /* Gris azulado claro */

  /* Superficies oscuras */
  --surface: #1A1A2E; /* Azul muy oscuro */
  --surface-2: #16213E; /* Azul oscuro ligeramente más claro */

  /* Paleta navideña - Brillante sobre oscuro */
  --christmas-red: #190c2b; /* Rojo brillante */
  --christmas-red-light: #85176a;
  --christmas-red-dark: #c530b1;
  --christmas-green: #241452; /* Verde brillante */
  --christmas-green-light: #66BB6A;
  --christmas-green-dark: #2E7D32;
  --christmas-gold: #440e55; /* Dorado brillante */
  --christmas-gold-light: #f94dff;
  --christmas-gold-dark: #ff0080;
  --christmas-silver: #E0E0E0; /* Plata para contraste */

  /* Variantes */
  --red-500: #6b1281;
  --red-300: #9f1ac0;
  --green-500: #a34caf;
  --green-300: #bb66b7;
  --amber-400: #ff0080;

  /* Gradientes navideños brillantes */
  --grad-primary: linear-gradient(135deg, var(--christmas-green) 0%, var(--christmas-red) 50%, var(--christmas-gold) 100%);
  --grad-green: linear-gradient(135deg, var(--christmas-green) 0%, var(--christmas-green-light) 100%);
  --grad-red: linear-gradient(135deg, var(--christmas-red) 0%, var(--christmas-red-light) 100%);
  --grad-dark: linear-gradient(135deg, #1A1A2E 0%, #0A1929 100%);

  /* Bordes y sombras oscuros */
  --border: rgba(255, 107, 107, 0.3); /* Rojo semitransparente */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.9);
  --glow: 0 0 15px rgba(255, 215, 0, 0.4);

  /* Radios y spacing */
  --r-md: 12px;
  --r-lg: 16px;
  --pad: 1rem;
  --pad-lg: 1.5rem;
}

/* ========= Base ========= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body {
  height: 100%;
  background-color: var(--bg-primary);
}
body{
  font-family:'Poppins', Arial, sans-serif;
  line-height:1.6;
  margin:0;
  color:var(--text-primary);
  background: var(--grad-dark);

  /* Efecto de estrellas/noche navideña */
  background-image:
  radial-gradient(circle at 10% 20%, rgba(76, 175, 80, 0.08) 0%, transparent 20%),
  radial-gradient(circle at 90% 80%, rgba(255, 107, 107, 0.08) 0%, transparent 20%),
  radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);

  /* Sticky footer layout */
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}

/* Para que el main ocupe el espacio disponible */
main{ flex:1 0 auto; }

/* ========= Header ========= */
header{
  background: var(--grad-primary);
  color: white;
  padding: 1.25rem;
  text-align: center;
  border-bottom: 4px solid var(--christmas-gold);
  box-shadow: var(--shadow-md), var(--glow);
  position: relative;
  overflow: hidden;
}

/* Efecto brillante en header */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
                              transparent 70%
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Decoración navideña en header */
header::after {
  content: "✦ ✦ ✦";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  color: var(--christmas-gold);
  font-size: 1.2rem;
  letter-spacing: 15px;
  opacity: 0.8;
}

header h1{
  margin: 0.5rem 0 0.5rem 0;
  font-weight: 700;
  letter-spacing: .2px;
  font-family: 'Mountains of Christmas', cursive;
  font-size: 2.4rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
}

header p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* ========= Nav ========= */
.site-nav{
  position:sticky; top:0; z-index:50;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--christmas-red);
  box-shadow: var(--shadow-md), 0 0 10px rgba(255, 107, 107, 0.3);
  display:flex; align-items:center; justify-content:center;
  padding:.5rem .75rem;
}

/* Botón hamburguesa */
.nav-toggle{
  display:none;
  background:transparent;
  border:2px solid var(--christmas-gold);
  padding:.5rem;
  border-radius:10px;
  cursor:pointer;
  margin-right:.75rem;
  color: var(--christmas-gold);
}
.nav-toggle:focus{outline:none; box-shadow:0 0 0 3px rgba(255, 215, 0, 0.5)}
.nav-toggle .burger{
  display:block; width:22px; height:2px; background:var(--christmas-gold);
  margin:4px 0; transition:.25s ease;
}

/* Links */
.nav-links{
  display:flex; gap:0.25rem .5rem; flex-wrap:wrap; align-items:center; justify-content:center;
}
.nav-links a{
  color: white;
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:10px;
  position:relative;
  transition: all .3s ease;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 107, 107, 0.2);
}
.nav-links a:hover{
  background:rgba(255, 107, 107, 0.2);
  transform:translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
  border-color: var(--christmas-red);
}

/* ========= Main / Contenedores ========= */
main{
  padding:2rem 1rem;
  max-width:1200px; margin:0 auto;
}

.login-container,
.generator-container,
.constancias-container,
.container{
  background: var(--surface);
  color: #0A9115; 
  border: 2px solid var(--christmas-red);
  border-radius:var(--r-lg);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(76, 175, 80, 0.2);
  padding:2rem;
  max-width:900px; margin:2rem auto;
  position:relative;
  overflow:hidden;

  /* Efecto de brillo en los bordes */
  box-shadow:
  inset 0 0 20px rgba(255, 215, 0, 0.1),
  0 0 30px rgba(0, 0, 0, 0.8);
}

.container::before,
.login-container::before,
.generator-container::before,
.constancias-container::before{
  content:'';
  position:absolute; left:0; top:0; height:6px; width:100%;
  background: var(--grad-primary);
  box-shadow: 0 0 10px var(--christmas-red);
}

/* Decoración de esquinas */
.container::after {
  content: "🎄";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  filter: drop-shadow(0 0 5px var(--christmas-green));
  animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* ========= Formularios ========= */
.form-group{ margin-bottom:1.1rem; }
label{
  display:block; margin-bottom:.4rem; font-weight:600;
  color:var(--christmas-green-light);
}
input[type="text"], input[type="password"] {
  width: 15%;
  min-width: 260px;
  max-width: 520px;
  padding: .98rem 1rem;
  border-radius: 12px;
  /*color del box al estar desactivado*/
  border: 2px solid #fff;
  background: rgb(0, 0, 0);
  color: white;
  transition: all .3s ease;
}
input:focus{
  outline:none;
  border-color:var(--christmas-red);
  /*color del box al estar activado*/
  box-shadow:0 0 0 4px rgb(253, 253, 253),
  0 0 15px rgb(255, 255, 255);
  background: rgba(26, 26, 46, 1);
}

/* Placeholder estilizado */
input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ========= Botones ========= */
.btn{
  background: var(--grad-red);
  color: white;
  border: none;
  padding:.9rem 1.35rem;
  border-radius:12px;
  cursor:pointer;
  display:inline-block;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(214, 20, 214, 0.4),
  inset 0 1px 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
                              transparent
  );
  transition: left 0.7s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(255, 107, 107, 0.6),
  0 0 20px rgba(255, 107, 107, 0.3);
  filter: brightness(1.1);
}

/* Secundario */
.btn.btn-secondary{
  background: var(--grad-green);
  border: 2px solid var(--christmas-green);
  color: white;
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
}
.btn.btn-secondary:hover{
  background: var(--grad-green);
  box-shadow:0 12px 28px rgba(76, 175, 80, 0.6),
  0 0 20px rgba(76, 175, 80, 0.3);
  border-color: var(--christmas-green-light);
}

/* ========= Alertas / Estado / Result ========= */
.alert{
  padding:1rem; margin-bottom:1rem; border-radius:12px;
  border: 2px solid var(--border);
  font-weight:600;
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(5px);
}
.error{
  background: rgba(197, 48, 48, 0.15);
  color: var(--christmas-red-light);
  border-color: var(--christmas-red);
  border-left: 6px solid var(--christmas-red);
  box-shadow: inset 0 0 10px rgba(197, 48, 48, 0.2);
}
.success{
  background: rgba(46, 125, 50, 0.15);
  color: var(--christmas-green-light);
  border-color: var(--christmas-green);
  border-left: 6px solid var(--christmas-green);
  box-shadow: inset 0 0 10px rgba(46, 125, 50, 0.2);
}
.status{
  margin:1rem 0; padding:1rem; border-radius:12px;
  background: var(--surface-2);
  border: 2px solid var(--christmas-gold);
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

/* Result (para acciones al finalizar) */
.result{
  margin:1rem 0; padding:1rem; border-radius:12px;
  background: rgba(46, 125, 50, 0.15);
  border: 2px solid var(--christmas-green);
  border-left: 6px solid var(--christmas-green);
  box-shadow: inset 0 0 15px rgba(76, 175, 80, 0.2);
}
.result-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ========= Tabla ========= */
table{
  width:100%; border-collapse:collapse; margin-top:1rem;
  background: var(--surface);
  border: 2px solid var(--christmas-green);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow-md),
  inset 0 0 20px rgba(0, 0, 0, 0.5);
}
th, td{
  padding:1rem; text-align:left;
  border-bottom:1px solid rgba(76, 175, 80, 0.3);
}
th{
  background: var(--grad-green);
  color: white;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
tr:nth-child(even){ background: rgba(76, 175, 80, 0.05); }
tr:hover{
  background: rgba(255, 215, 0, 0.1);
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
}

/* ========= Spinner ========= */
.spinner{
  width:20px; height:20px; border-radius:50%;
  border:3px solid rgba(255, 255, 255, 0.1);
  border-top:3px solid var(--christmas-red);
  display:inline-block; animation:spin 1s linear infinite;
  vertical-align:middle;
  box-shadow: 0 0 10px var(--christmas-red);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.spinner-wrap{ display:flex; align-items:center; gap:.6rem; }
.spinner-lg{
  width:28px; height:28px; border-width:4px;
  border-top-color: var(--christmas-gold);
}

/* ========= Barra de progreso ========= */
.progress-bar{
  width:100%; height:8px; background: rgba(255, 255, 255, 0.1);
  border-radius:8px; overflow:hidden;
  border:1px solid var(--christmas-green);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.progress-fill{
  height:100%;
  background: var(--grad-primary);
  animation: progressAnimation 2s ease-in-out infinite alternate;
  box-shadow: 0 0 10px var(--christmas-red);
}

@keyframes progressAnimation {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 10px var(--christmas-red);
  }
  100% {
    background-position: 100% 50%;
    box-shadow: 0 0 15px var(--christmas-gold);
  }
}

/* ========= Utilidades ========= */
.hidden{ display:none !important; }
.btn-full{ width:100%; }

/* ========= Créditos / Depósitos ========= */
.credits-panel{
  background: #111;
  border: 2px solid #fff;
  border-radius:12px;
  padding:1rem 1.25rem;
  margin-bottom:1rem;
  box-shadow: var(--shadow-md),
  inset 0 0 15px rgba(255, 215, 0, 0.1);
  position:relative; overflow:hidden;
}
.credits-panel::before{
  content:'';
  position:absolute; left:0; top:0; width:100%; height:4px;
  background: var(--grad-primary);
}
.panel-title{
  margin:0 0 .75rem 0; font-size:1rem; font-weight:700;
  color: #fff;
  padding-bottom:.5rem; border-bottom:2px solid var(--christmas-gold);
}
.credits-info{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; font-size:.95rem; }
.credits-available{ font-weight:700; color:var(--christmas-green-light); }
.credits-used{ color:var(--christmas-red-light); }
.credits-server{ color:var(--text-secondary); }
.credits-status{ font-size:.9rem; }
.credits-status > div{
  padding:.35rem .6rem; border-radius:10px;
  display:inline-block;
  border:2px solid var(--border);
  background: rgba(26, 26, 46, 0.8);
}
.status-good{
  background: rgba(76, 175, 80, 0.15);
  color:var(--christmas-green-light);
  border-color:var(--christmas-green);
}
.status-warning{
  background: rgba(255, 215, 0, 0.15);
  color:var(--christmas-gold-light);
  border-color:var(--christmas-gold);
}
.status-error{
  background: rgba(255, 107, 107, 0.15);
  color:var(--christmas-red-light);
  border-color:var(--christmas-red);
}

/* Último depósito */
.last-deposit-compact{
  background: rgba(85, 149, 221, 0.15);
  border: 2px solid var(--christmas-green);
  border-radius:12px; padding:1rem; margin-bottom:1rem;
  box-shadow: var(--shadow-md),
  inset 0 0 10px rgba(76, 175, 80, 0.2);
}
.last-deposit-compact .panel-title{
  border-bottom-color:var(--christmas-green);
  color:var(--christmas-green-light);
}
.deposit-summary{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.deposit-amount{ font-weight:700; color:var(--christmas-green-light); }
.deposit-arrow{ color:var(--text-secondary); }
.deposit-credits{ color:var(--christmas-red-light); font-weight:700; }
.deposit-date{ color:var(--text-secondary); font-size:.88rem; margin-left:auto; }
.deposit-note{
  margin-top:.5rem; font-style:italic; color:var(--text-secondary); font-size:.7rem;
  padding:.25rem .5rem; background: rgba(26, 26, 46, 0.8); border-radius:8px;
  border:1px solid var(--christmas-green);
}

/* ========= Auth wrapper (centrado) ========= */
.auth-wrapper{
  min-height:calc(100vh - 200px);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem;
  background-image:
  radial-gradient(circle at 20% 30%, rgba(255, 107, 107, 0.05) 0%, transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(76, 175, 80, 0.05) 0%, transparent 40%);
}

/* ========= Footer (arreglado y sticky) ========= */
footer.site-footer{
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(10px);
  border-top: 4px solid var(--christmas-red);
  color: var(--text-primary);
  padding: 1.25rem 1rem;
  box-shadow: var(--shadow-md),
  0 0 20px rgba(255, 107, 107, 0.2);
  flex-shrink:0;
  position: relative;
  overflow: hidden;
}

/* Efecto de luces navideñas en footer */
footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--christmas-red),
                              var(--christmas-green),
                              var(--christmas-gold),
                              var(--christmas-red)
  );
  background-size: 200% 100%;
  animation: lights 2s linear infinite;
}

@keyframes lights {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}



.footer-inner{
  max-width:1200px; margin:0 auto;
  display:grid; gap:1rem;
  grid-template-columns: 1fr auto;
  align-items:center;
  position: relative;
  z-index: 1;
}
.footer-brand{
  font-weight:700;
  color:var(--christmas-gold);
  font-family: 'Mountains of Christmas', cursive;
  font-size: 1.3rem;
}
.footer-links{ display:flex; gap:.9rem; flex-wrap:wrap; }
.footer-links a{
  color:var(--text-primary);
  text-decoration:none;
  padding:.25rem .5rem;
  border-radius:8px;
  transition: all .3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-links a:hover{
  background:rgba(255, 107, 107, 0.2);
  color:var(--christmas-gold);
  border-color: var(--christmas-red);
  transform: translateY(-2px);
}
.footer-legal{
  margin-top:.5rem; font-size:.85rem;
  color:rgba(176, 190, 197, 0.7);
  grid-column: 1 / -1;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
}

/* ========= Responsive ========= */
@media (max-width: 960px){
  .nav-toggle{ display:inline-block; }
  .site-nav{ justify-content:space-between; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    background: rgba(26, 26, 46, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 3px solid var(--christmas-red);
    display:none; flex-direction:column; gap:0;
    box-shadow: var(--shadow-lg);
  }
  .nav-links a{
    padding:1rem 1.25rem; border-radius:0;
    border-top:1px solid rgba(255, 255, 255, 0.1);
  }
  .site-nav.open .nav-links{ display:flex; }
  .site-nav.open .nav-toggle[aria-expanded="true"] .burger:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .site-nav.open .nav-toggle[aria-expanded="true"] .burger:nth-child(2){ opacity:0; }
  .site-nav.open .nav-toggle[aria-expanded="true"] .burger:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  input[type="text"], input[type="password"]{ width:100%; min-width:0; }
  .btn{ width:100%; text-align:center; }

  .footer-inner{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .footer-links{ justify-content:center; }
  main{ padding:1.25rem .9rem; }
}

/* Estrellas decorativas (opcional) */
.star {
  position: fixed;
  background-color: var(--christmas-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: twinkleStar 3s infinite alternate;
}

@keyframes twinkleStar {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Para agregar estrellas con JavaScript o manualmente:
 < d*iv class="star" style="width: 3px; height: 3px; top: 10%; left: 5%;"></div>
 <div class="star" style="width: 2px; height: 2px; top: 20%; left: 15%;"></div>
 <div class="star" style="width: 4px; height: 4px; top: 30%; left: 80%;"></div>
 */