/*==============================================================
# ESTILOS DE LA AGENDA (Estación Futuro)
# Esta hoja se carga en:
#   - index.asp (portada): tarjetas de acceso a los días
#   - /agenda/dia23.asp, dia24.asp, dia25.asp
# Todas las reglas van dentro de clases propias de la agenda
# (.agenda-card, .agenda-dia, .ficha-agenda...) para no afectar
# al resto de la web.
==============================================================*/

/*--------------------------------------------------------------
# 1. Portada: tarjetas de acceso a los días
--------------------------------------------------------------*/

.agenda-dias{
    margin-bottom:30px;
}

.agenda-card{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:12px;
    height:300px;
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
    transition:transform .4s, box-shadow .4s;
}

.agenda-card:hover,
.agenda-card:focus{
    color:#fff;
    text-decoration:none;
}

.agenda-card:focus-visible{
    outline:3px solid #e77b00;
    outline-offset:4px;
}

.agenda-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s, filter .6s;
}

.agenda-card .overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding-bottom:56px;       /* deja sitio a la franja del horario */
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,.15);
    transition:background .5s;
}

/* Vale igual como h2 (portada de la agenda) o h3 (página de inicio) */
.agenda-card .dia-titulo{
    width:auto;
    margin:0;
    padding:0;
    border:0;
    color:#fff;
    line-height:1.1;
    font-family:"Raleway", sans-serif;
    text-shadow:0 2px 6px rgba(0,0,0,.4);
    opacity:0;
    transform:translateY(-20px);
    transition:opacity .5s, transform .5s;
}

.agenda-card .dia-titulo span{
    display:block;
}

.agenda-card .dia-semana{
    font-size:18px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.agenda-card .dia-numero{
    font-size:70px;
    font-weight:700;
}

.agenda-card .dia-mes{
    font-size:24px;
    font-weight:500;
    letter-spacing:2px;
}

.agenda-card .ver-actividades{
    margin-top:20px;
    border:2px solid #fff;
    padding:8px 20px;
    border-radius:40px;
    font-weight:600;
    opacity:0;
    transition:opacity .5s;
}

.agenda-card .fecha{
    position:absolute;
    top:15px;
    left:15px;
    background:rgba(255,255,255,.9);
    color:#222;
    padding:10px 12px;
    border-radius:8px;
    text-align:center;
    z-index:10;
    line-height:1;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
}

.agenda-card .fecha .numero{
    display:block;
    font-size:34px;
    font-weight:700;
}

.agenda-card .fecha .mes{
    display:block;
    font-size:12px;
    letter-spacing:2px;
}

/* Horario del día: siempre visible, en una franja al pie de la tarjeta */
.agenda-card .horario{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:10;
    margin:0;
    padding:9px 12px;
    background:rgba(255,255,255,.92);
    color:#003366;
    font-size:15px;
    font-weight:700;
    text-align:center !important;
    line-height:1.3;
}

.agenda-card .horario .bx{
    font-size:18px;
    vertical-align:-3px;
    margin-right:2px;
}

/* Al pasar el ratón o llegar con el teclado */
.agenda-card:hover,
.agenda-card:focus-within{
    transform:translateY(-8px);
}

.agenda-card:hover img,
.agenda-card:focus-within img{
    transform:scale(1.1);
    filter:brightness(.45);
}

.agenda-card:hover .overlay,
.agenda-card:focus-within .overlay{
    background:rgba(0,0,0,.25);
}

.agenda-card:hover .dia-titulo,
.agenda-card:hover .ver-actividades,
.agenda-card:focus-within .dia-titulo,
.agenda-card:focus-within .ver-actividades{
    opacity:1;
    transform:translateY(0);
}

/* Pantallas táctiles (sin ratón): el texto se ve siempre y sobra la etiqueta de fecha */
@media (hover:none){
    .agenda-card img,
    .agenda-card:hover img,
    .agenda-card:focus-within img{
        transform:none;
        filter:brightness(.5);
    }
    .agenda-card .dia-titulo,
    .agenda-card .ver-actividades{
        opacity:1;
        transform:none;
    }
    .agenda-card .fecha{
        display:none;
    }
    .agenda-card:hover,
    .agenda-card:focus-within{
        transform:none;
    }
}

/* Móvil: tarjetas más bajas, una debajo de otra */
@media (max-width:767px){
    .agenda-card{
        height:250px;
    }
    .agenda-card .dia-numero{
        font-size:50px;
    }
    .agenda-card .ver-actividades{
        margin-top:12px;
    }
}

@media (prefers-reduced-motion: reduce){
    .agenda-card,
    .agenda-card img,
    .agenda-card .overlay,
    .agenda-card .dia-titulo,
    .agenda-card .ver-actividades{
        transition:none;
    }
    .agenda-card:hover,
    .agenda-card:focus-within,
    .agenda-card:hover img,
    .agenda-card:focus-within img{
        transform:none;
    }
}


/*--------------------------------------------------------------
# 2. Páginas de día: cabecera y botones de cambio de día
--------------------------------------------------------------*/

/* Por si el título de la cabecera pasa de h2 a h1 */
.breadcrumbs h1{
    font-family:'Orbitron', sans-serif;
    font-size:20px;
    font-weight:600;
    color:#d07530;
    margin:0;
}

/* Botones de día: misma estética que el filtro por horas
   (borde azul, azul tenue al pasar el ratón, azul lleno el día activo) */
.agenda-dia .dia{
    display:inline-block;
    width:48px;
    height:48px;
    line-height:44px;          /* 48px menos los 2px de borde arriba y abajo */
    text-align:center;
    border-radius:50%;
    margin:5px;
    background:#fff;
    color:#003366;
    border:2px solid #003366;
    font-family:"Raleway", sans-serif;
    font-size:18px;
    font-weight:bold;
    transition:.3s;
}

.agenda-dia .dia:hover{
    background:#e7eef5;
    color:#003366;
    text-decoration:none;
}

.agenda-dia .dia.activo,
.agenda-dia .dia.activo:hover{
    background:#003366;
    color:#fff;
}

.agenda-dia .dia:focus-visible{
    outline:3px solid #e77b00;
    outline-offset:2px;
}

/*--------------------------------------------------------------
# 3. Páginas de día: filtro por horas, tabla resumen y fichas
--------------------------------------------------------------*/

/* Texto alineado a la izquierda (style.css justifica el body) */
.agenda-dia{
    text-align:left;
}

/* ----- Filtro por horas ----- */
.filtro-horas{
    border:0;
    margin:0 0 10px;
    padding:0;
}

.filtro-horas legend{
    width:auto;
    font-size:14px;
    font-weight:700;
    margin-bottom:6px;
}

.filtro-botones{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.filtro-botones button{
    font-family:"Open Sans", sans-serif;
    font-size:13px;
    font-weight:600;
    color:#003366;
    background:#fff;
    border:2px solid #003366;
    border-radius:30px;
    padding:3px 14px;
    cursor:pointer;
    transition:.3s;
}

.filtro-botones button:hover{
    background:#e7eef5;
}

.filtro-botones button[aria-pressed="true"]{
    background:#003366;
    color:#fff;
}

.filtro-botones button:focus-visible,
.volver-resumen:focus-visible,
.tabla-resumen a:focus-visible{
    outline:3px solid #e77b00;
    outline-offset:2px;
}

.filtro-grupo{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
    margin-top:8px;
}

.filtro-etiqueta{
    min-width:60px;
    font-size:13px;
    font-weight:700;
    color:#616972;
}

.agenda-contador{
    font-weight:600;
    margin-bottom:12px;
}

/* ----- Tabla resumen ----- */
#resumen{
    scroll-margin-top:100px;   /* para que la cabecera fija no tape la tabla */
}

.tabla-resumen{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.tabla-resumen caption{
    caption-side:top;          /* Bootstrap la pone abajo por defecto */
    font-family:"Raleway", sans-serif;
    font-size:16px;
    font-weight:700;
    color:#003366;
    padding:0 0 8px;
}

.tabla-resumen th,
.tabla-resumen td{
    text-align:left;
    vertical-align:top;
    padding:9px 12px;
    border-bottom:1px solid #e7e7e7;
}

.tabla-resumen thead th{
    font-family:"Raleway", sans-serif;
    background:#f6f7f8;
    border-bottom:2px solid #003366;
}

.tabla-resumen .col-hora{
    font-weight:700;
    color:#003366;
    min-width:9em;             /* las horas largas pasan a varias líneas */
}

/* ----- Fichas (reutilizan .actividad) ----- */
.ficha-agenda .actividad{
    display:flex;
    flex-direction:column;
    scroll-margin-top:100px;
    background:#fff;
    padding:25px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,.10);
    border-left:8px solid #e77b00;
}

.ficha-agenda .actividad img{
    border-radius:8px;
}

.actividad-img{
    display:block;
    width:100%;
    height:auto;          /* la altura sale de la propia imagen */
    margin-bottom:18px;
}

.actividad-subt{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#616972;
    margin-top:3px;
}

.actividad-desc{
    margin-bottom:14px;
}

.actividad-datos{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:6px 14px;
    margin-bottom:14px;
}

.actividad-datos dt{
    font-weight:700;
}

.actividad-datos dd{
    margin:0;
}

.horas-lista{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    list-style:none;
    margin:0;
    padding:0;
}

.horas-lista li{
    background:#003366;
    color:#fff;
    font-weight:700;
    font-size:13px;
    border-radius:30px;
    padding:0 10px;
}

.actividad-reserva{
    background:#fdf1e4;
    border-radius:6px;
    padding:10px 14px;
    margin-bottom:14px;
}

.actividad-reserva .bx{
    color:#b35e1f;
    font-size:18px;
    vertical-align:-3px;
}

.volver-resumen{
    margin-top:auto;
    align-self:flex-start;
    font-size:13px;
}

.agenda-vacio{
    background:#f6f7f8;
    border-radius:6px;
    padding:20px;
}

@media (max-width:480px){
    .ficha-agenda .actividad{
        padding:18px;
    }
    .actividad-datos{
        grid-template-columns:1fr;
        gap:0;
    }
    .actividad-datos dd{
        margin-bottom:8px;
    }
}

/* Al llegar con "Volver al resumen" el foco pasa al destino: sin recuadro en el contenedor */
.agenda-dia [tabindex="-1"]:focus{
    outline:none;
}

@media (prefers-reduced-motion: reduce){
    .agenda-dia .dia,
    .filtro-botones button{
        transition:none;
    }
}