/* ==========================================================================
   assets/candles.css — Estilos generales de la portada (COMÚN a Velario y Enviaunarosa)
   Fase 4.7: un solo archivo. Los colores y medidas que cambian de una web a otra
   son variables --web-… definidas en includes/sitio.php → 'tema' (la cabecera las
   escribe en <style id="tema-web">). Las pocas reglas propias de una sola web van
   con :where(html[data-web="…"]) delante, que no cambia la especificidad.
   ========================================================================== */
a:link { text-decoration: none; }
:where(html[data-web="velario"]) a {
	color: #ffff00;
	text-decoration: underline;
}

/*MODIFICANDO ANCHURA TOTAL*/
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	max-width: var(--web-ancho);}
	
.card {
    float:left;
    background-color: rgb(0, 0, 0);
    margin-top: 20px;
  }
  .row{
    justify-content: center !important;
    
  /*FONDO DE PÁGINA*/
  }
  body {
    background-color: rgb(0, 0, 0);
  }
  #pagination_controls {
      clear: both;
  }
   /*TEXTO CONTADOR DE VELAS*/
  #textStats{
    color: var(--web-estadisticas);
    font-size: 16pt;
  }
 /*NUMERO CONTADOR DE ROSAS GRATIS Y ETERNAS*/
  #totalcandles, #totalcandleson, .contador-num{
    color: var(--web-contador);
    font-size: var(--web-contador-tam);
  }
/*TEXTO NOMBRE DE LA ROSA */
  .textNameCandle{
    color: var(--web-nombre);
    font-size: 16pt;
    
  }
  .pagination {
      justify-content: center;
  }
  /*PAGINACION LINK*/
  .page-item.active .page-link {
      background-color: var(--web-pag-fondo);
      border-color: var(--web-pag-borde);
  }
  .page-link {
      font-weight: bold;
      color: #000000;
      background-color: #dedede;
      border: 1px solid #b3b3b3;
  }
  #modalfree_view_title{
    margin-top: 5px;
    cursor: pointer;
  }
  
  
  /*BOTÓN AÑADIR ROSA GRATIS*/
  #add_candle_button{
    color: #fff;
    background-color: var(--web-b0-fondo);
    border-color: var(--web-b0-borde);
    font-size: x-large;
    margin: var(--web-b0-margen);
  }
  #add_candle_button:hover{
    color: #000;
    background-color: #ffff00;
    border-color: var(--web-b0h-borde);
    font-size: x-large;
    margin: var(--web-b0-margen);
    box-shadow: var(--web-b0h-sombra);
  }
  
  /*BOTÓN AÑADIR ETERNA*/
  #add_candle_button1{
    color: var(--web-b1-color);
    background-color: var(--web-b1-fondo);
    border-color: var(--web-b1-borde);
    font-size: x-large;
    margin: var(--web-b1-margen);
  }
  #add_candle_button1:hover{
    color: var(--web-b1h-color);
    background-color: var(--web-b1h-fondo);
    border-color: var(--web-b1h-borde);
    font-size: x-large;
    margin: 3px;
    box-shadow: var(--web-b1h-sombra);
  }
  
    /*BOTÓN AÑADIR VELA ETERNA PAYPAL*/
  #add_candle_button2{
    color: #000;
    background-color: #99ff33;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
  
  
  /* PLAY STORE*/

.play_store {
    position: relative;
    text-align: center; /* Alinea el contenido al centro horizontalmente */
    color: #ffffff;
    margin-top: var(--web-play-margen);
}
    
    .parpadeante_play {
  text-align: center;
  font-size: 25px;
  color: #ffffff;
  font-weight: bold;
  animation: parpadeo 2s infinite, desplazamiento 2s infinite alternate;
}

#play_store {
    width: 150px; /* ajusta el tamaño según tus necesidades */
    height: auto;
    text-align: center; /* Alinea el contenido al centro horizontalmente */
    margin-top: var(--web-play-img-margen);
    transition: transform 0.5s ease; /* agrega una transición suave al efecto hover */
}

a:hover img {
    transform: rotate(360deg); /* cambia la propiedad según el efecto deseado */
}
  
  /* Línea parpadeante bajo el título (Feliz día / aviso) */
.parpadeante {
  text-align: center;
  font-size: var(--web-parpadeante-tam);
  color: var(--web-parpadeante);
  font-weight: bold;
    animation: parpadeo var(--web-parpadeante-ritmo) infinite, desplazamiento 2s infinite alternate;
 
}

/* BOTONES DE IDIOMAS */
.lang-button {
    background-color: black !important; /* Fondo negro para los botones de idiomas */
    color: white; /* Color del texto en blanco */
    align-content: center !important;
    margin-left: 20px;
    border: none !important; /* Eliminar borde si lo deseas */
    margin-right:  5px !important; /* Espacio entre los botones */
    margin-bottom: 10px; /* Espacio debajo de los botones (opcional) */
}

/* Para que el hover también tenga fondo negro */
.lang-button:hover {
    background-color: black !important;
    border-color: black !important;
}

/* Evitar que el último botón tenga margen a la derecha */
.lang-button:last-child {
    margin-right: 0;
}
/* Fase 6.1 — Móvil: las 5 banderas en una sola fila y con zona de toque cómoda (44 px) */
@media (max-width: 575.98px) {
    .lang-button {
        min-width: 44px;
        min-height: 44px;
        margin: 0 3px 10px !important;
        padding: 6px !important;
    }
    .lang-button img { max-width: none; }
}

@keyframes parpadeo {
  0%, 100% {
    opacity: var(--web-parpadeo-min); /* Opacidad mínima durante el parpadeo */
  }
  50% {
    opacity: 1;
  }
}

@keyframes dilatacion {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4); /* Ajusta el valor según tu preferencia */
  }
}
 
      /*BOTÓN AÑADIR RAMO*/
      
    .hidden {
      display: none;
    }

   .red-button0{
    color: #fff;
    background-color: #ff0000;
    border-color: #ffd500;
    font-size: x-large;
    margin: 3px;
  }
   .red-button1{
    color: #fff;
    background-color: #0000ff;
    border-color: #ff5000;
    font-size: x-large;
    margin: 3px;
  }
  
  .red-button2{
    color: #fff;
    background-color: #00bb2d;;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
  .red-button3{
    color: #fff;
    background-color: #ffab0a;;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
  
  
  #add_candle_buttonramo1.red-button{
    color: #fff;
    background-color: #9f1499;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
  #add_candle_buttonramo1.red-button:hover{
  background-color: #00bb2d;
  border-color: #e6000f;
}

  #add_candle_buttonramo2.red-button{
    color: #fff;
    background-color: #ff001b;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
  #add_candle_buttonramo2.red-button:hover{
  background-color: #00bb2d;
  border-color: #e6000f;
}

  #add_candle_buttonramo3.red-button{
    color: #fff;
    background-color: #ffab0a;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
    #add_candle_buttonramo3.red-button:hover{
  background-color: #00bb2d;
  border-color: #e6000f;
}

  #add_candle_buttonramo4.red-button{
    color: #000;
    background-color: var(--web-ramo4);
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
  #add_candle_buttonramo4.red-button:hover{
  background-color: #00bb2d;
  border-color: #e6000f;
}
  #button-show {
    color: #fff;
    background-color: #0000FF;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
  }
    #button-show.red-button2:hover{
  background-color: #00bb2d;
  border-color: #e6000f;
  }
  #button-hide {
    color: #fff;
    background-color: #0000FF;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
}
  #button-hide.red-button2:hover {
  background-color: #00bb2d;
  border-color: #e6000f;
}
   
  /*TEXTO COPYRIGHT*/

#footer-copyright {
    color: #ffffff !important; /* Cambia el color del enlace a amarillo */
    text-decoration: none; /* Elimina la subrayado predeterminado */
	
}

#footer-copyright:hover {
    color: orange; /* Cambia el color al pasar el ratón sobre el enlace */
}
:where(html[data-web="velario"]) .text-center {
	text-align: center !important;
	color: #fff !important;
}

.first ul li a {
    color: white; 

}


  
  
  /*BOTON UCRANIA */
  #add_candle_button_ucrania{
    color: #000;
    border-color: #ffef00;
    font-size: x-large;
    margin: 3px;
    background: -webkit-linear-gradient(90deg, rgba(255,213,0,1) 50%, rgba(0,91,187,1) 50%);
  }
  .btn-tercero-ucrania{
      padding: 30px 10px 0px 10px;
      color: #000;
  }
  
  /*BOTON DEL MODAL PARA ENVIAR VELA*/  
  .btn-primary {
    color: #fff;
    background-color: var(--web-primario-fondo);
    border-color: var(--web-primario-borde);
  }
  .btn-primary:hover{
    background-color: var(--web-primario-hover-fondo);
    border-color: var(--web-primario-hover-borde);
  }

  #buttonstop{
    text-align: center;
    /*padding-bottom: 5px;*/
  }
     /* BOTÓN ARRIBA */

  .icon-arrow-up2:before {
    content: "\ea3a";
  }
  .goup {
    background: var(--web-subir);
    bottom: 5px;
    border: 2px solid #ffc576;
    border-radius: 10px;
    cursor: pointer;
    padding: 5px;
    position: fixed;
    right: -100px;
    transition: 0.4s all;
  }
  .goup:hover {
    background: #ffc576;
    border-color:#54006a;
    transition: 0.4s all;
  }
  .goup:hover > i {
    color: #690697;
  }
  .goup i {
    color: #ffffff;
  }
  .goupshow {
    right: 10px;
    transition: 0.4s all;
  }
   /* VIDEO CABECERA PARA EL VELARIO. Para tener un ancho máximo debemos de establecer el width del DIV.delimitador */
  

   .video-container {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* height: 700px; */
}

.video-container video {
    position: relative;
    /* max-height: 80%; */
    bottom: 0;
    width: 100%;
    height: auto;
    left: 55%;
    transform: translateX(-55%);
    margin-top: 20px;
}
/*
  .video-container video{
    max-height: 50%;
  }
  video {
    width: 100%;
    height: auto;
  }
*/



@media only screen and (max-width: 450px) {
  #mythumb {
    width: var(--web-miniatura-movil) !important;
    height: 110px !important;
  }
  .card{
    width: 7rem !important;
  }
.textNameCandle {
  font-size: 11pt !important;
}
:where(html[data-web="velario"]) .textNameCandle {
  text-align:center;
}
img, svg {
  vertical-align: middle;
}
:where(html[data-web="velario"]) img, :where(html[data-web="velario"]) svg {
  margin-left: -25px !important;
  margin-left: auto;
}
.red_image{ margin-left:5px !important;
vertical-align: middle;}
.redes{ margin:auto !important}

.ucrania{
font-size: 16px;
}
/*MODIFICANDO ANCHURA TOTAL*/
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	max-width: 100%;}

}



/*
@media only screen and (min-width: 1640px) {
      #mythumb {
    width: 120px !important;
    height: 110px !important;
  }
  .card{
    width: 12rem  !important;
  }
.textNameCandle {
  font-size: 12pt !important;
}
img, svg {
  vertical-align: middle;
  margin-left: -25px !important;
}
.red_image{ margin-left:5px !important;
vertical-align: middle;}
.redes{ margin:auto !important}
.ucrania{
font-size: 16px;
*/

/* (llave sobrante retirada en Fase 4: no cerraba ningún bloque) */

/* Interruptor «compartir» (.rocker) de los modales — antes en templates_html/footer.html (Fase 4).
   Mismas reglas que en assets/candles.css de Enviaunarosa. */
    /* Switch starts here */
    .rocker {
      display: inline-block;
      position: relative;
      /*
      SIZE OF SWITCH
      ==============
      All sizes are in em - therefore
      changing the font-size here
      will change the size of the switch.
      See .rocker-small below as example.
      */
      font-size: 2em;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      color: #000;
      width: 7em;
      height: 4em;
      overflow: hidden;
      border-bottom: 0.5em solid #eee;
    }
    
    .rocker-small {
      font-size: 0.75em; /* Sizes the switch */
      margin: 1em;
    }
    
    .rocker::before {
      content: "";
      position: absolute;
      top: 0.5em;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #54006a;
      border: 0.5em solid #ddd;   /*Cambia el color del borde gris */
      border-bottom: 0;
    }
    
    .rocker input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .switch-left,
    .switch-right {
      cursor: pointer;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2.5em;
      width: 3em;
      transition: 0.2s;
    }
    
    .switch-left {
      height: 2.4em;
      width: 2.75em;
      left: 0.85em;
      bottom: 0.4em;
      background-color: #ddd;
      transform: rotate(15deg) skewX(15deg);
    }
    
    .switch-right {
      right: 0.5em;
      bottom: 0;
      background-color: #ff0000;
      color: #fff;
    }
    
    .switch-left::before,
    .switch-right::before {
      content: "";
      position: absolute;
      width: 0.4em;
      height: 2.45em;
      bottom: -0.45em;
      background-color: #54006a;
      transform: skewY(-65deg);
    }
    
    .switch-left::before {
      left: -0.4em;
    }
    
    .switch-right::before {
      right: -0.375em;
      background-color: transparent;
      transform: skewY(65deg);
    }
    
    input:checked + .switch-left {
      background-color: #54006a;
      color: #fff;
      bottom: 0px;
      left: 0.5em;
      height: 2.5em;
      width: 3em;
      transform: rotate(0deg) skewX(0deg);
    }
    
    input:checked + .switch-left::before {
      background-color: transparent;
      width: 3.0833em;
    }
    
    input:checked + .switch-left + .switch-right {
      background-color: #ddd;
      color: #888;
      bottom: 0.4em;
      right: 0.8em;
      height: 2.4em;
      width: 2.75em;
      transform: rotate(-15deg) skewX(-15deg);
    }
    
    input:checked + .switch-left + .switch-right::before {
      background-color: #54006a;
    }
    
    /* Keyboard Users */
    input:focus + .switch-left {
      color: #333;
    }
    
    input:checked:focus + .switch-left {
      color: #fff;
    }
    
    input:focus + .switch-left + .switch-right {
      color: #fff;
    }
    
    input:checked:focus + .switch-left + .switch-right {
      color: #333;
    }

/* ---------- Reglas que venían de Enviaunarosa (Fase 4.7) ---------- */
/* Votos (me gusta / no me gusta) */
#votes-container {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
}
.vote-thumb {
    margin: 0 10px;
    font-size: 24px;
}
#likes-count, #dislikes-count {
    margin-top: -20px;
}
/* Texto previo a la paginación */
#miDiv {
    background-color: #000;
    color: white;
    padding: 25px;
    border: 2px solid red;
    font-size: 16pt;
}
#miDiv h3,
#miDiv span {
    display: inline;
    margin-right: 10px;
    text-align: center;
}
#miDiv span {
    color: yellow;
}
/* Botones de ramo (colores rosa y amarillo) */
.red-button4{
    color: #fff;
    background-color: #ff0080;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
}
.red-button5{
    color: #fff;
    background-color: #ffff00;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
}
#add_candle_buttonramo5.red-button{
    color: #000;
    background-color: #fdff00;
    border-color: #ff0000;
    font-size: x-large;
    margin: 3px;
}
#add_candle_buttonramo5.red-button:hover{
    background-color: #ffff00;
    border-color: #e6000f;
}
/* Títulos de los grupos de frases en negrita */
#select_phrase optgroup {
    font-weight: bold;
}
:where(html[data-web="rosa"]) .imenu {
    width: 100% !important;
}
:where(html[data-web="rosa"]) .redes {
    margin: auto !important;
    margin-left: 10px;
}
@media only screen and (max-width: 450px) {
  :where(html[data-web="rosa"]) .emoji {
    list-style-type: none;
    cursor: pointer;
    display: inline-block;
    width: auto;
    height: auto;
    top: 8px;
    transform: scale(1, 1);
    transition: opacity .5s ease-in-out 1s, transform .07s ease-in-out 0s, top .07s ease-in-out 0s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

/* Fase 10: las miniaturas de Velario son cuadradas y el hueco es 150×140; así no se deforman.
   Enviaunarosa no: sus rosas siempre se han visto estiradas a todo el hueco (más anchas),
   que es su aspecto original (corrección del 14 oct.). */
html:not([data-web="rosa"]) #results_box img#mythumb { object-fit: contain; }