/* ==========================================================================
   COMPONENTE: CALENDARIO SCOUT
   Archivo: /css/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: borde destacado y número oscurecido */
.calendario-tabla td.dia-celda.es-hoy {
    outline: 2px solid var(--color-grupo) !important; 
    outline-offset: -2px;
    color: var(--scout-global-oscuro) !important;
    font-weight: 800 !important;
    background-color: #ffffff !important; 
}

/* 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;
}
/* Botones más pequeños SOLO en este contexto — no se toca la clase
   compartida ".scout-btn-accion" (usada en botones grandes por todo el
   sitio), se sobreescribe aquí con más especificidad. "line-height:1"
   (19/08/2026, "se puede reducir mucho más la altura") — sin esto la
   línea de texto reservaba más alto del que ocupa visualmente, aunque el
   padding ya fuera pequeño. */
.scout-barra-gestor-botones .scout-btn-accion {
    padding: 3px 8px;
    font-size: 0.82rem;
    line-height: 1;
    gap: 4px;
}

@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;
    }
    /* Botones aún más compactos que en escritorio — con esto los dos
       ("Ver lista de inscritos" + "Editar esta publicación") caben en la
       misma fila incluso en un móvil estrecho, en vez de apilarse uno
       debajo del otro (que hubiera dejado la barra en 3 filas). */
    .scout-barra-gestor-botones {
        gap: 5px;
    }
    .scout-barra-gestor-botones .scout-btn-accion {
        padding: 2px 6px;
        font-size: 0.72rem;
        gap: 3px;
    }
}

/* 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;
}