/*
Theme Name: Astra Child
Template: astra
*/



/* COMIENZO CSS LUNIS */

#modal-editar-lunis .modal-dialog {
    max-width: 300px; /* Ajusta el tamaño del modal */
}

#modal-editar-lunis .modal-body {
    padding: 10px; /* Reduce el relleno */
}

#modal-editar-lunis input.form-control {
    font-size: 0.875rem; /* Tamaño de fuente más pequeño */
}

/* Reducir el tamaño del modal */
.modal-dialog.modal-sm {
    max-width: 200px;
}

/* Mover la "X" más lejos del borde */
.modal-header .close {
    margin-right: 20px;
}


/* Ajustar el tamaño de la fuente y el espaciado de las filas */
#tabla_lunis_total td {
    font-size: 10px;
    padding: 4px;
}

/* Evitar que la columna de nombres se desborde a varias líneas */$id_torneo
#tabla_lunis_total td:nth-child(2) {
    white-space: nowrap;
}

/* Conseguir que las cabeceras no hagan scroll */
.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f8f9fa;
}


/* FIN CSS LUNIS */

:root {
  --color-primary: #228100;
  --color-secondary: #00C0FF;
  --color-background: #F0F0F0;
  --color-text: #333;
  --color-error: red;
}

/* Estilos generales */
#mi_primary {
  text-align: center;
  background-color: var(--color-background);
  padding: 20px;
  margin-left: 20px;
}

.mi_secundario {
  text-align: left;
  margin-left: 20px;
}

/******** botoneras de los eventos *******/
/* esto es para el fondo de los botones del evento */
.botones-evento-fondo {
    flex-basis: 100%;
    border: 2px solid var(--color-text);
    padding: 20px;
    margin-top: 20px;
    background-color: var(--color-background);
}

/* esto es para el contenedor de los botones del evento */
.botones-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* esto es para distibuir los botones en filas de 3 botones*/
.boton-form {
    flex: 0 1 calc(33.333% - 10px);
    margin-bottom: 10px;
}

/* y esto para que queden bonitos los textos */
.boton-form input[type="submit"] {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    white-space: normal;
    height: auto;
    min-height: 60px;
    line-height: 1.3;
    text-align: center;
}

/* esto es para los botones del evento que se ponen después de finalizar el torneo */
.botones-evento-1 {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    text-align: center;
}


/* esto es para el botón de EDITAR EL PERFIL Y LA CUENTA DE USUARIO que cuelga de un shortcode */
.contenedor-boton-editar {
  display: flex;
  justify-content: center;
  gap: 20px; /* ¡Espacio entre botones! Ajusta este valor */
  width: 100%;
  margin: 20px 0; /* Ajusta el espacio según necesites */
}


/* Mantén tus estilos actuales del botón */
.elementor-shortcode .botones-evento-1 {
  background: #fafafa !important;
  color: #00a32a !important;
  border: 2px solid #00a32a !important;
  border-radius: 50px !important;
  padding: 15px 30px !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
}

.elementor-shortcode .botones-evento-1:hover {
  background: #00a32a !important;
  color: #000 !important;
}


/* Oculta la pestaña "Privacidad" en el perfil del usuario en todos los dispositivos */
li a[data-tab="privacy"] {
    display: none !important;
}

/* Opcional: Ajusta el margen de las otras pestañas */
.um-account-nav li {
    margin-right: 0 !important;
}


/* Oculta la ruedecita del perfil del usuario que sale en editar perfil de Ultimate Member */
.um-profile-edit, 
.um-profile-meta a[href*="um_action=edit"], 
.um-account-edit, 
.um-account-side li.um-account-edit-a {
    display: none !important;
}


/**** botonera de solo Comité de competición ***/
/* esto es para el contenedor de los botones del comité en el evento */
.comite-fondo {
    flex-basis: 100%;
    border: 2px solid var(--color-text);
    padding: 10px;
    margin-top: 20px;
    background-color: #d5dbdb;
}
/* esto para el texto*/
.comite-fondo h4 {
    text-align: center;
    margin-bottom: 10px;
}


/* Estilo para los botones de acción EN JUGAR CON...*/
.accion-button {
    background-color: #0073e6;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}


/* Estilos de productos y cuentas */
.product .summary {
  width: 70%;
  float: right;
}

/**************** WOOCOMMERCE  ********************/
.woocommerce-MyAccount-navigation {
  display: none;
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 100%;
}

.woocommerce-orders-table__row {
  border-bottom: 10px solid var(--color-primary) !important;
}

.woocommerce a.remove:after{
color:#008000 !important;
content:"🗑️Quitar";
display: inline;
font-size: 30px;
position: absolute;
left: -30px;
}

/* esto es para el mensaje en el resumen-inscripcion*/
.woocommerce #payment ul.payment_methods li, .woocommerce-page #payment ul.payment_methods li {
	font-size: 20px;
  list-style-type: none;
	color:red !important;
}

/* cambia el color del método de pago para mayor visibilidad. */
.woocommerce #payment div.payment_box, .woocommerce-page #payment div.payment_box {
	font-size: 20px;
  color: red !important;
}


/************* Estilos de mensajes y avisos ************/
.error-alf-noticia, .aviso-alf-noticia {
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;
}

.error-alf-noticia {
  color: var(--color-error);
}

.aviso-alf-noticia {
  color: var(--color-primary);
}

.aviso-plazas-limitadas {
  color: var(--color-error);
  font-size: 35px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.mensaje-torneo-pendiente {
  color: var(--color-secondary);
  font-size: 35px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.mensaje-torneo-abierto {
  color: var(--color-primary);
  font-size: 35px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.mensaje-torneo-cerrado {
  color: var(--color-error);
  font-size: 35px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.2;
}


.mensaje-no-conectado {
    text-align: center;
    padding: 20px;
    margin-top: 160px;
}
.mensaje {
    background-color: #acc8cc;
    padding: 20px;
    margin-top: 50px; /* Espacio en la parte superior del mensaje */
    text-align: center; /* Alinear el contenido al centro */
}



.hoja-control-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}





.seleccion-jugador-form {
    margin: 20px 0;
    text-align: center;
}

.seleccion-jugador-select {
    font-size: 18px; /* Aumenta el tamaño de la fuente */
    padding: 10px;
    width: 80%; /* Ajusta el ancho según tus necesidades */
    max-width: 400px; /* Establece un ancho máximo */
    border: 2px solid #4CAF50; /* Añade un borde para que destaque */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f8f8f8; /* Color de fondo suave */
    cursor: pointer;
}

.seleccion-jugador-option {
    font-size: 18px; /* Asegura que las opciones también tengan un tamaño de fuente grande */
    padding: 5px;
}

/* Estilo para el texto "Selecciona un jugador" */
.seleccion-jugador-select option:first-child {
    font-weight: bold;
    color: #4CAF50;
}

/* Mejora la apariencia en hover */
.seleccion-jugador-select:hover {
    border-color: #45a049;
}

/* Estilo cuando el select está enfocado */
.seleccion-jugador-select:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}


.campo-edicion {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.campo-label {
    min-width: 200px;
    margin-right: 10px;
}

.radio-group {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.radio-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
}

.radio-group input[type="radio"] {
    margin-right: 5px;
}
















.estrellas {
    display: flex;
    flex-direction: row-reverse; /* Importante: invierte el orden de las estrellas */
    justify-content: flex-end;
}

.estrellas input[type="radio"] {
    display: none;
}

.star {
    font-size: 30px;
    cursor: pointer;
    color: #ccc;
    transition: color 0.2s;
}

/* Al pasar el ratón */
.estrellas:hover .star {
    color: #ccc;
}

.estrellas .star:hover,
.estrellas .star:hover ~ .star {
    color: #f39c12;
}

/* Estrellas seleccionadas */
.estrellas input[type="radio"]:checked ~ .star {
    color: #f39c12;
}



/******************* Estilos de tablas ******************/
/* Estilo para la tabla de equipos */
.equipos-table {
  width: 100%;
  border-collapse: collapse;
}

/* Estilo para las cabeceras de la tabla */
.table-header {
  background-color: var(--color-secondary);
  color: white;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

/* Estilo para las filas impares */
.equipos-table tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/******************** Estilos responsivos *****************/
@media (max-width: 768px) {
  .boton-form {
    flex-basis: 100%;
  }

  .boton-form input[type="submit"] {
    min-height: 70px;
    font-size: 20px;
  }

  .aviso-plazas-limitadas {
    font-size: 28px;
  }

  .product .summary {
    width: 100%;
    float: none;
  }
  /*
  .tribe-events-single-event-description form input[type="submit"] {
      max-width: none;
  }
*/


}



@media (max-width: 600px) {
  table {
    width: 100%;
    font-size: 10px;
  }

  th, td {
    padding: 5px;
    white-space: normal;
  }

  .mobile-table .table-header {
    display: none;
  }

  .mobile-table td:before {
    content: attr(data-label);
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f2f2f2;
    padding: 5px;
    margin-bottom: 5px;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}



/******** HAY QUE REVISAR ANTES DE BORRARLOS, CREO QUE NO SE USAN, LOS DEJO DE MOMENTO ****/
.titulo {
    color: red;
}

.boton-volver {
    flex-basis: 100%;
    margin-top: 20px;
}


<style>
    .mobile-table {
        width: 100%;
    }
    .mobile-table, .mobile-table thead, .mobile-table tbody, .mobile-table th, .mobile-table td, .mobile-table tr {
        display: block;
    }
    .mobile-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .mobile-table tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
    .mobile-table td {
        border: none;
        position: relative;
        padding-left: 50%;
        text-align: left;
    }
    .mobile-table td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: bold;
    }
    .mobile-table input[type="text"],
    .mobile-table select {
        width: 100%;
        box-sizing: border-box;
    }
</style>


.custom-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-table .table-header {
    background-color: #f2f2f2; /* Color de fondo gris claro */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.custom-table .table-header th {
    padding: 12px;
    text-align: left;
    font-weight: bold;
    color: #333; /* Color de texto oscuro */
    border-bottom: 2px solid #ddd; /* Línea inferior */
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 600px) {
    .mobile-table .table-header {
        display: none; /* Oculta la cabecera en móviles */
    }

    .mobile-table td:before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        background-color: #f2f2f2;
        padding: 5px;
        margin-bottom: 5px;
        display: block;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .boton-form {
        flex-basis: 100%;
        max-width: none;
    }

    .boton-form input[type="submit"] {
        font-size: 20px; /* Mantiene el mismo tamaño de letra en móviles */
        min-height: 70px; /* Aumenta la altura mínima en móviles */
    }

    .aviso-plazas-limitadas {
    font-size: 28px; /* Reduce ligeramente el tamaño de fuente en móviles */
    line-height: 1.2; /* Aumenta aún más el interlineado en móviles */
    }

}


/* Esta clase se utiliza para mostrar el mensaje de estado en cuentas_todos_torneos.php */
#status-message {
    margin-top: 20px;
    font-size: 20px; /* Ajusta el tamaño según tus preferencias */
    font-weight: bold; /* Opcional: puede añadir énfasis al texto */
    color: #333; /* Cambia el color si lo deseas */
}

/* Estilo para el loader (un circulo con una bolita) */
/* esta clase saca un circulo negro con una bolita blanca y un con uncirculo azul  */
.loader {
    width: 50px; /* Tamaño del spinner */
    height: 50px; /* Tamaño del spinner */
    border: 8px solid #f3f3f3; /* Color del fondo */
    border-top: 8px solid #3498db; /* Color del spinner */
    border-radius: 50%; /* Círculo */
    animation: spin 1s linear infinite; /* Animación */
    display: inline-block; /* Permitir que se alinee con el texto */
}


/* muestra el logo de lAG dando vueltas en cuentas_todos_torneos.php */
#loading-logo {
    width: 50px; /* Ajusta el tamaño según necesites */
    height: 50px; /* Ajusta el tamaño según necesites */
    animation: spin 1s linear infinite; /* Aplicar animación de giro */
    display: inline-block; /* Permitir que se alinee con el texto */
    border-radius: 50%; /* Círculo */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.password-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}

.um-field-password input[type="password"] {
    padding-right: 35px !important;
}


.mensaje-inicial {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}