/* =========================
   TEMA NAVIDEÑO (ROJO/VERDE/BLANCO)
   Pegar al FINAL del main.css
   ========================= */

:root{
  --xmas-red:   #c1121f;
  --xmas-green: #0b6b3a;
  --xmas-deep:  #052a17;
  --xmas-white: #f8fafc;
  --xmas-cream: #fff7e6;
  --xmas-gold:  #d4af37;
}

/* Fondo general */
body.bg-dark{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,255,255,.25), transparent 55%),
    radial-gradient(700px 400px at 85% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, #7a0f17, #c1121f 45%, #8b1018);
  color: var(--xmas-white);
}

/* Navbar */
.navbar.bg-black{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 400px at 85% 10%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, #4a0a0f, #8f0d16 45%, #3b070b) !important;

  border-bottom: 1px solid rgba(255,255,255,.22) !important;
}

/* Texto navideño (ya tienes Mountains of Christmas en el nav) */
.navbar .text-light.fw-bold{
  color: var(--xmas-cream) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* “bg-black” en cards/box: pásalo a verde oscuro */
.bg-black{
  background-color: rgba(255, 250, 240, 0.92) !important; /* blanco crema */
}


/* Bordes y textos secundarios */
.border-secondary{
  border-color: rgba(248,250,252,.18) !important;
}
.text-secondary{
  color: rgba(248,250,252,.78) !important;
}
.form-text.text-secondary{
  color: rgba(248,250,252,.65) !important;
}

/* Cards */
.card{
  background-color: rgba(255, 250, 240, 0.92) !important;
  color: #4a0a0f !important;
  border: 1px solid rgba(193,18,31,.35) !important;
}
.rounded-4{
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Títulos con toque navideño */
h1,h2,h3,h4,h5,.card-title{
  font-family: "Merienda", cursive;
  letter-spacing: .3px;
}

/* Títulos dentro de cards */
.card .card-title,
.card h1, .card h2, .card h3, .card h4, .card h5{
  color: #1b1b1b !important;
}

/* Bootstrap "text-secondary" en crema: que sea gris legible */
.text-secondary{
  font-family: "Cinzel", serif;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .2px;
  color: rgba(0,0,0,.65) !important;
}

/* Labels y ayudas de formulario */
.form-label{
  color: rgba(0,0,0,.85) !important;
}
.form-text{
  color: rgba(0,0,0,.60) !important;
}

.text-center{
    color: #fffaf0;
}
/* Inputs */
.form-control{
  background: #fffaf0 !important;
  color: #1b1b1b !important;
  border-color: rgba(120, 30, 30, .25) !important;
}
.form-control::placeholder{
  color: rgba(0,0,0,.45) !important;
}
.form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(200, 40, 40, .20) !important;
  border-color: rgba(200, 40, 40, .45) !important;
}

/* Badges sobre crema */
.badge.text-bg-secondary{
  background: rgba(120,30,30,.18) !important;
  color: #1b1b1b !important;
}

.form-text.text-secondary{
  color: rgba(0,0,0,.70) !important;
}

/* Botón principal (era btn-warning) -> rojo navideño */
.btn-warning{
  background: linear-gradient(180deg, #d61f2c, var(--xmas-red)) !important;
  border-color: rgba(0,0,0,.15) !important;
  color: var(--xmas-white) !important;
  font-weight: 800;
  letter-spacing: .2px;
}
.btn-warning:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Badge */
.badge.text-bg-secondary{
  background-color: rgba(248,250,252,.14) !important;
  color: var(--xmas-white) !important;
  border: 1px solid rgba(248,250,252,.18);
}

/* Más “visible” sin alargar tiempo: corazón más grande y árbol parpadea más */
.latido{ animation: latidoSuave 1.2s ease-in-out infinite; }
@keyframes latidoSuave{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.65); }
}

.parpadeo{ animation: brilloSuave 1.0s ease-in-out infinite; }
@keyframes brilloSuave{
  0%, 100% { opacity: 0.45; filter: brightness(1); transform: scale(1); }
  50%      { opacity: 1;    filter: brightness(1.9); transform: scale(1.12); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .latido, .parpadeo{ animation: none !important; }
}


/* Solo en la página success: alias destacado */
.card .display-6.mono{
  color: #c1121f;            /* rojo navideño */
  text-shadow: 0 2px 6px rgba(193,18,31,.35);
}