/* ==========================================================================
   COMPONENTE: CALENDARIO SCOUT
   Archivo: /css/modulos/eventos/shortcode-calendario.css
   ========================================================================== */

.calendario-contenedor {
    background-color: #ffffff !important;
    border-radius: var(--radio-tarjeta) !important;
    border: 1px solid var(--scout-global-borde) !important;
    box-shadow: var(--sombra-tarjeta) !important;
    overflow: hidden;
    margin-bottom: 2rem;
}

.calendario-header {
    /* Fondo gris perlado neutro (mezcla del gris grupo con 90% blanco) */
    background-color: color-mix(in srgb, var(--color-grupo), white 90%) !important;
    color: var(--color-grupo) !important; /* Gris ceniza para el texto */
    font-weight: 700 !important;
    padding: 12px 15px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--scout-global-borde) !important;
}

/* Relleno recortado un 50% en móvil (19/08/2026, a petición expresa: "en
   un móvil el espacio es oro"... "disminuye un 50% los dos aires que
   quedan" — este es el segundo de los dos, la franja gris de "«
   Agosto 2026 »" — el primero es el propio relleno de la caja "Agenda",
   style.css). Solo se toca aquí, no en la regla base de arriba, para no
   afectar al mismo calendario si se usa en algún sitio con más ancho de
   sobra. */
@media (max-width: 480px) {
    .calendario-header {
        padding: 6px 7px;
    }
}

/* Navegación del calendario (Flechas) */
body .wp-site-blocks .calendario-contenedor .calendario-header a.cal-nav,
body .wp-site-blocks .calendario-contenedor .calendario-header a.cal-nav:visited,
body .wp-site-blocks .calendario-contenedor .calendario-header a.cal-nav:focus {
    color: var(--color-grupo) !important; 
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 1.4em !important; 
    opacity: 1 !important; 
    padding: 0 10px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    background-color: transparent !important;
    border: none !important;
}

/* Hover de las flechas (se iluminan en tu verde al pasar el ratón) */
body .wp-site-blocks .calendario-contenedor .calendario-header a.cal-nav:hover {
    color: var(--scout-global-base) !important; 
    transform: scale(1.2) !important; 
    background-color: transparent !important;
}

.calendario-tabla {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.calendario-tabla th,
.calendario-tabla td {
    width: 14.28% !important;
    padding: 0 !important; 
    text-align: center !important;
    border: 1px solid var(--scout-global-borde) !important;
    height: 45px !important; 
}

/* Cabeceras de días (L, M, X...) */
.calendario-tabla thead th {
    color: var(--scout-global-oscuro) !important;
    height: 35px !important; 
    vertical-align: middle !important;
}

/* Cabeceras de fin de semana (S y D) */
.calendario-tabla thead th:nth-child(6),
.calendario-tabla thead th:nth-child(7) {
    color: var(--scout-global-base) !important;
    background-color: color-mix(in srgb, var(--scout-global-fondo), white 60%) !important;
}

/* Días fuera del mes actual */
.calendario-tabla td.fuera-de-mes {
    background-color: var(--scout-global-fondo) !important;
    color: color-mix(in srgb, var(--scout-global-texto), transparent 60%) !important;
}

/* Números del calendario */
.calendario-tabla td.dia-celda {
    position: relative;
    vertical-align: top;
    padding-top: 4px !important; 
    color: var(--scout-global-texto) !important;
    font-weight: 700 !important;
    font-size: 1.05em !important; 
}

/* --- FINES DE SEMANA (Sábados y Domingos) --- */
.calendario-tabla td.dia-celda.fin-de-semana {
    background-color: color-mix(in srgb, var(--scout-global-fondo), white 60%) !important;
}

/* Día actual: cuadrado de esquinas redondeadas alrededor del número (gris medio). */
.calendario-tabla .numero-dia.es-hoy {
    display: inline-block;
    min-width: 1.7em;
    padding: 0 4px;
    /* 1.2 (no 1.5): con letra grande, como en el PC, el cuadrado se metía encima de los puntos. */
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid var(--color-grupo);
    border-radius: 8px;
}

/* Días ya pasados: gris (los puntos de colores siguen visibles) */
.calendario-tabla td.dia-celda.es-pasado {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
}

/* Puntos de los días pasados, más suaves */
.calendario-tabla td.dia-celda.es-pasado .dot {
    opacity: 0.45;
}

/* Contenedor de las bolitas */
.dia-indicadores {
    position: absolute;
    bottom: 3px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3px; 
}

.dot {
    width: 6px;
    height: 6px;
    aspect-ratio: 1 / 1;   /* fuerza que sea siempre cuadrado, nunca ovalado */
    flex-shrink: 0;        /* evita que el flex lo comprima */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15); /* sombra más ligera, menos "borrosa" */
}

/* ==========================================================================
   BARRA "SOLO GESTORES" (Administrador/Scouter/Secretaría/Tesorería —
   sw_caja_acciones_gestor(), shortcode-calendario.php). Visible en la
   ficha de evento/noticia individual, solo para quien puede gestionarla.
   19/08/2026, a petición expresa: "es demasiado ancha, gasta mucho
   espacio (altura)... quita ese borde enrosado de la izquierda".
   ========================================================================== */
.scout-barra-gestor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 15px;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-aviso);
    box-sizing: border-box;
}
.scout-barra-gestor-texto {
    color: #4a148c;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
/* "align-items:center" (19/08/2026, a petición expresa: "centra
   verticalmente los botones") — el <div> que envuelve cada botón
   (style="margin:10px 0", ya anulado más abajo) es un bloque normal, no
   un elemento flex, así que sin esto se quedaba anclado arriba de la
   fila en vez de centrado con el resto. */
.scout-barra-gestor-botones {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* Los botones llegan ya envueltos en su propio "<div style="margin:10px
   0">" (sw_boton_ver_inscripciones()/sw_boton_editar_post(),
   shortcode-listado_inscritos_evento.php / shortcodes-panel-scouter.php)
   — ese margen tenía sentido cuando el botón podía aparecer suelto en
   cualquier otro sitio, pero aquí dentro solo añade alto de sobra (el
   "gap" del flex de arriba ya separa los botones entre sí).
   "!important" (19/08/2026, fallo real encontrado: "estás disminuyendo
   los botones... pero no el aire alrededor") — ese margen está puesto
   como estilo EN LÍNEA en el PHP, que gana a cualquier CSS externo sin
   "!important" por delante; sin él, esta regla nunca llegó a aplicarse
   de verdad (10px arriba + 10px abajo seguían ahí, invisibles a simple
   vista entre el padding ya recortado). */
.scout-barra-gestor-botones > div {
    margin: 0 !important;
    /* 19/08/2026, reincidencia: aunque ".scout-barra-gestor-botones" ya es
       flex con "align-items:center", el <div> envolvente de cada botón
       (marcado en línea por PHP, sin ese "display:flex" propio) sigue
       colocando su enlace ".scout-btn-accion" por alineación de línea
       base — la caja de línea que genera es más alta que el propio
       enlace, y la línea base deja más hueco arriba que abajo, así que el
       botón se veía "bajo" dentro de la barra pese a estar centrado el
       propio wrapper. "display:flex" en el wrapper hace que su hijo se
       centre de verdad, en vez de por línea de texto. */
    display: flex !important;
    align-items: center !important;
}
/* Los botones usan su tamaño normal (".scout-btn-accion", medidas en theme.json, 10/11/2026). Antes aquí se
   reducían a mano, y la barra quedaba demasiado baja; CLAUDE.md prohíbe el relleno y la letra escritos a mano. */

@media (max-width: 480px) {
    .scout-barra-gestor {
        padding: 3px 8px;
        gap: 4px;
    }
    /* La frase "Administrador — estas acciones solo las ves tú" no cabe
       en una pantalla estrecha junto a los botones — se dejan pasar a su
       propia línea (ver "justify-content" de arriba, ya centra cada fila
       cuando envuelve) en vez de forzar "white-space:nowrap" a costa de
       desbordar. */
    .scout-barra-gestor-texto {
        white-space: normal;
        font-size: 0.76rem;
    }
    .scout-barra-gestor-botones {
        gap: 5px;
    }
}

/* Evento cancelado: mismo color de sección pero atenuado, para diferenciarlo
   de un vistazo sin necesitar una leyenda aparte */
.dot-cancelado {
    opacity: 0.35 !important;
    box-shadow: none !important;
}