/* ============================================================
   CLUB RESERVAS - ESTILOS
   Extraído de los bloques <style> que estaban repartidos por
   club-reservas.php. Organizado por la parte del plugin de la
   que procede cada bloque para facilitar su localización.
============================================================ */


/* ============================================================
   1) SHORTCODE [resumen_reservas]
      Barra de filtros (fechas, cuota, botones) y tabla resumen
============================================================ */

.barra-filtros {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 15px;
}

.filtros-izquierda {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.linea-filtro {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.botones-derecha {
    display: flex;
    align-items: center;
    gap: 60px; /* antes 10px */
    align-self: center;
}

.barra-filtros form {
    margin: 0;
}

/* Tabla */
#tablaReservas {
    border-collapse: collapse;
}

/* Cabeceras centradas */
#tablaReservas th {
    text-align: center;
}

/* Datos centrados */
#tablaReservas td {
    text-align: center;
}

/* Última columna (Total) alineada a la derecha */
#tablaReservas td:last-child {
    text-align: right;
    padding-right: 8px;
}


/* ============================================================
   2) SHORTCODE [resumen_reservas]
      Mensaje de aviso y columna "Total Recibo"
============================================================ */

.mensaje-aviso {
    text-align: center;
    color: brown;
}

/* Separación visual antes de Total Recibo */
.col-total-recibo {
    border-left: 4px solid #999 !important;
    padding-left: 15px !important;
}


/* ============================================================
   3) FUNCIÓN club_reservas_preview_mail()
      Vista previa / contenido del correo enviado a cada socio
============================================================ */

.preview-mail {
    margin-bottom: 120px;
    text-align: center;
    width: 100%;
}

.preview-mail > * {
    margin-left: auto;
    margin-right: auto;
}

.preview-mail table {
    width: auto;
    min-width: 720px;
    border-collapse: collapse;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

.preview-mail table th {
    background: #f0f0f0;
    text-align: center;
    padding: 6px 12px;
    border: 1px solid #ccc;
    white-space: nowrap;
}

.preview-mail table td {
    padding: 5px 12px;
    border: 1px solid #ccc;
    text-align: center;
    white-space: nowrap;
}

.preview-mail table td:last-child {
    text-align: right;
    min-width: 40px;
}

.preview-mail .destinatarios {
    margin-bottom: 20px;
    text-align: center;
}

.preview-mail .total {
    background: #f0f0f0;
    font-weight: bold;
}

.preview-mail .tabla-total {
    margin-top: 0px;
}

.preview-mail h2 {
    margin-bottom: 10px;
    text-align: center;
}

.preview-mail h3 {
    margin-top: 10px;
    text-align: center;
}


/* ============================================================
   4) FUNCIÓN vista_previa_llaves()
      Tabla de reservas de gimnasio sin registrar en la Web
============================================================ */

.tabla-llaves {
    width: auto;
    min-width: 900px;
    border-collapse: collapse;
    margin: 20px auto 0 auto;
}

.tabla-llaves th {
    background: #f0f0f0;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-align: center;
}

.tabla-llaves td {
    padding: 6px 12px;
    border: 1px solid #ccc;
    text-align: center;
}

.tabla-llaves td:nth-child(5) {
    text-align: center;
}


/* ============================================================
   5) BARRA DE PROGRESO - ENVÍO DE CORREOS
      Página vistapreviaremesa, botón "Enviar correos"
============================================================ */

.cr-progreso-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.cr-progreso-overlay.activo {
    display: flex;
}

.cr-progreso-caja {
    background: #fff;
    border-radius: 8px;
    padding: 30px 35px;
    width: 90%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.cr-progreso-caja h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.cr-progreso-aviso {
    color: brown;
    font-weight: bold;
    margin-bottom: 20px;
}

.cr-progreso-barra-fondo {
    width: 100%;
    background: #eee;
    border-radius: 20px;
    overflow: hidden;
    height: 22px;
    margin-bottom: 12px;
}

.cr-progreso-barra-relleno {
    height: 100%;
    width: 0%;
    background: #4caf50;
    transition: width 0.2s ease;
}

.cr-progreso-texto {
    font-size: 14px;
    color: #444;
    margin-bottom: 20px;
}

.cr-progreso-resumen {
    text-align: left;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
    font-size: 13px;
}

.cr-progreso-cerrar {
    display: none;
    padding: 8px 20px;
    cursor: pointer;
}