/* =====================================================
   SEEI STUDIO
   HORARIOS.CSS
===================================================== */


/* =========================
   HERO HORARIOS
========================= */

.schedule-hero {
    position: relative;
    min-height: 620px;

    padding:
        calc(var(--header-height) + 70px)
        8%
        80px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: var(--white);

    /*
       Puedes agregar después una imagen:
       assets/images/horarios/horarios-hero.jpg
    */

    background:
        linear-gradient(
            135deg,
            #6f8daf,
            #8fa4bc 48%,
            #9aaa91
        );
}


.schedule-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 34, 46, .38),
            rgba(20, 34, 46, .12)
        );
}


.schedule-hero-content {
    position: relative;
    z-index: 1;

    width: min(760px, 100%);
}


.schedule-hero-content .eyebrow {
    color: rgba(255,255,255,.82);
}


.schedule-hero h1 {
    margin: 16px 0;

    font-size:
        clamp(3.5rem, 7vw, 6.5rem);

    font-weight: 300;
    line-height: 1;

    letter-spacing: -3px;
}


.schedule-hero p {
    width: min(650px, 100%);

    margin-inline: auto;

    color: rgba(255,255,255,.90);

    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================
   INTRO
========================= */

.schedule-hero + .section-shell {
    padding-bottom: 40px;
}


/* =========================
   FILTROS
========================= */

.schedule-filters {

    width:
        min(1400px, calc(100% - 80px));

    margin:
        0 auto 55px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
}


.schedule-filter {

    padding:
        11px 24px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    color:
        var(--dark);

    background:
        var(--white);

    font:
        inherit;

    font-size:
        .88rem;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.schedule-filter:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--primary);

    color:
        var(--primary);
}


.schedule-filter.active {

    color:
        var(--white);

    background:
        var(--primary);

    border-color:
        var(--primary);

    box-shadow:
        0 10px 24px
        rgba(77, 103, 134, .18);
}


/* =========================
   CONTENEDOR HORARIOS
========================= */

.schedule-container {

    width:
        min(1400px, calc(100% - 80px));

    margin:
        0 auto 100px;
}


/* =========================
   DÍA
========================= */

.schedule-day {

    margin-bottom:
        38px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        26px;

    background:
        var(--white);

    box-shadow:
        var(--shadow);
}


.schedule-day-header {

    padding:
        24px 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        linear-gradient(
            135deg,
            #edf2f5,
            #f6f8f7
        );

    border-bottom:
        1px solid var(--border);
}


.schedule-day-header h2 {

    font-size:
        clamp(1.6rem, 3vw, 2.2rem);

    font-weight:
        500;
}


.schedule-day-count {

    color:
        var(--text);

    font-size:
        .82rem;

    font-weight:
        500;
}


/* =========================
   TABLA DESKTOP
========================= */

.schedule-table {

    width:
        100%;

    border-collapse:
        collapse;
}


.schedule-table thead {

    background:
        #fafbfb;
}


.schedule-table th {

    padding:
        18px 24px;

    color:
        #7b8790;

    font-size:
        .72rem;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    text-align:
        left;

    text-transform:
        uppercase;

    border-bottom:
        1px solid var(--border);
}


.schedule-table td {

    padding:
        22px 24px;

    color:
        var(--text);

    vertical-align:
        middle;

    border-bottom:
        1px solid var(--border);
}


.schedule-table tbody tr:last-child td {

    border-bottom:
        0;
}


.schedule-table tbody tr {

    transition:
        background .25s ease;
}


.schedule-table tbody tr:hover {

    background:
        #f8faf9;
}


/* =========================
   HORA
========================= */

.schedule-time {

    color:
        var(--dark);

    font-size:
        1rem;

    font-weight:
        600;

    white-space:
        nowrap;
}


/* =========================
   CLASE
========================= */

.schedule-class-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.schedule-class-name {

    color:
        var(--dark);

    font-size:
        1rem;

    font-weight:
        600;
}


.schedule-category {

    width:
        fit-content;

    padding:
        5px 10px;

    border-radius:
        999px;

    font-size:
        .68rem;

    font-weight:
        600;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* Yoga */

.schedule-category.yoga {

    color:
        #63745d;

    background:
        #edf3eb;
}


/* Fitness */

.schedule-category.fitness {

    color:
        #5d7189;

    background:
        #edf2f8;
}


/* Wellness */

.schedule-category.wellness {

    color:
        #81775f;

    background:
        #f5f1e8;
}


/* =========================
   INSTRUCTOR / NIVEL
========================= */

.schedule-instructor {

    color:
        var(--dark);

    font-weight:
        500;
}


.schedule-level {

    color:
        var(--text);

    font-size:
        .85rem;
}


/* =========================
   BOTÓN RESERVAR
========================= */

.schedule-reserve-btn {

    min-height:
        44px;

    padding:
        10px 22px;

    border:
        1px solid var(--secondary);

    border-radius:
        999px;

    color:
        var(--white);

    background:
        var(--secondary);

    font:
        inherit;

    font-size:
        .82rem;

    font-weight:
        600;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.schedule-reserve-btn:hover {

    transform:
        translateY(-2px);

    background:
        #829378;

    border-color:
        #829378;

    box-shadow:
        0 10px 22px
        rgba(78, 101, 70, .20);
}


/* =========================
   MENSAJE PROVISIONAL
========================= */

.schedule-notice {

    width:
        min(900px, calc(100% - 80px));

    margin:
        0 auto 55px;

    padding:
        20px 26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px solid
        rgba(127, 155, 190, .24);

    border-radius:
        18px;

    color:
        #586b7a;

    background:
        #f0f4f7;

    font-size:
        .88rem;

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================
   TARJETAS MOBILE
========================= */

.schedule-mobile-list {

    display:
        none;
}


.schedule-mobile-card {

    padding:
        22px;

    border-bottom:
        1px solid var(--border);
}


.schedule-mobile-card:last-child {

    border-bottom:
        0;
}


.schedule-mobile-top {

    margin-bottom:
        16px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;
}


.schedule-mobile-time {

    color:
        var(--primary);

    font-size:
        .92rem;

    font-weight:
        600;
}


.schedule-mobile-card h3 {

    margin:
        8px 0;

    font-size:
        1.35rem;

    font-weight:
        500;
}


.schedule-mobile-details {

    margin-top:
        14px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    color:
        var(--text);

    font-size:
        .84rem;
}


.schedule-mobile-details strong {

    color:
        var(--dark);
}


/* =========================
   EMPTY STATE
========================= */

.schedule-empty {

    padding:
        70px 30px;

    border:
        1px solid var(--border);

    border-radius:
        26px;

    background:
        var(--white);

    box-shadow:
        var(--shadow);

    text-align:
        center;
}


.schedule-empty h2 {

    margin-bottom:
        10px;

    font-size:
        1.8rem;
}


.schedule-empty p {

    color:
        var(--text);

    line-height:
        1.7;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .schedule-hero {

        min-height:
            580px;
    }


    .schedule-container,
    .schedule-filters {

        width:
            calc(100% - 44px);
    }


    .schedule-table th,
    .schedule-table td {

        padding:
            18px 16px;
    }


    .schedule-table {

        font-size:
            .9rem;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .schedule-hero {

        min-height:
            560px;

        padding:
            calc(var(--header-height) + 55px)
            18px
            60px;
    }


    .schedule-hero h1 {

        font-size:
            clamp(3rem, 15vw, 4.6rem);

        letter-spacing:
            -2px;
    }


    .schedule-hero p {

        font-size:
            .95rem;
    }


    .schedule-hero + .section-shell {

        padding-bottom:
            30px;
    }


    .schedule-filters {

        width:
            calc(100% - 32px);

        margin-bottom:
            30px;

        gap:
            8px;
    }


    .schedule-filter {

        padding:
            9px 15px;

        font-size:
            .78rem;
    }


    .schedule-notice {

        width:
            calc(100% - 32px);

        margin-bottom:
            30px;

        padding:
            17px 18px;

        font-size:
            .8rem;
    }


    .schedule-container {

        width:
            calc(100% - 32px);

        margin-bottom:
            70px;
    }


    .schedule-day {

        margin-bottom:
            24px;

        border-radius:
            22px;
    }


    .schedule-day-header {

        padding:
            20px 20px;
    }


    .schedule-day-header h2 {

        font-size:
            1.45rem;
    }


    /*
       Ocultamos tabla desktop
    */

    .schedule-table {

        display:
            none;
    }


    /*
       Mostramos tarjetas mobile
    */

    .schedule-mobile-list {

        display:
            block;
    }


    .schedule-mobile-card {

        padding:
            22px 20px;
    }


    .schedule-mobile-card
    .schedule-reserve-btn {

        width:
            100%;

        margin-top:
            20px;
    }

}
/* Corrección de tarjetas dinámicas */
.schedule-class-card,.schedule-card{min-width:0;overflow:hidden}.schedule-class-content,.schedule-card-content{min-width:0;padding:24px}.schedule-class-content h3,.schedule-card-content h3{overflow-wrap:anywhere}.schedule-class-meta,.schedule-card-meta{display:flex;flex-wrap:wrap;gap:10px 16px}.schedule-reserve-btn,[data-reserve-schedule]{margin-top:18px;max-width:100%;width:100%;box-sizing:border-box}.schedule-day-items{padding:18px}.schedule-container{overflow:visible}@media(max-width:700px){.schedule-container,.schedule-filters{width:min(100% - 28px,1400px)}.schedule-day{border-radius:18px}.schedule-day-items{padding:12px}.schedule-class-content,.schedule-card-content{padding:18px}.schedule-reserve-btn,[data-reserve-schedule]{margin:16px 0 0}}


/* =====================================================
   TARJETAS DINÁMICAS — estructura generada por horarios.js
===================================================== */
.schedule-day-title {
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #edf2f5, #f6f8f7);
    border-bottom: 1px solid var(--border);
}
.schedule-day-title h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.schedule-day-title span { color: var(--text); font-size: .85rem; }
.schedule-list { display: grid; }
.schedule-card {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(240px, 2fr) minmax(170px, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 24px 30px;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.schedule-card:last-child { border-bottom: 0; }
.schedule-time, .schedule-class, .schedule-extra { min-width: 0; }
.schedule-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.schedule-time strong { font-size: 1rem; white-space: nowrap; }
.schedule-time span { color: var(--text); white-space: nowrap; }
.schedule-class span { display: block; margin-bottom: 5px; color: var(--primary); font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.schedule-class h3 { margin: 0 0 5px; overflow-wrap: anywhere; font-size: 1.12rem; }
.schedule-class p, .schedule-extra span, .schedule-extra small { margin: 0; display: block; overflow-wrap: anywhere; color: var(--text); }
.schedule-extra { display: grid; gap: 5px; }
.schedule-reserve-btn {
    min-width: 112px;
    margin: 4px 0;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: #91a685;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.schedule-reserve-btn:hover { transform: translateY(-1px); filter: brightness(.96); }
@media (max-width: 900px) {
    .schedule-container, .schedule-filters { width: min(100% - 32px, 1400px); }
    .schedule-card { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
    .schedule-reserve-btn { justify-self: start; }
}
@media (max-width: 600px) {
    .schedule-day { border-radius: 18px; }
    .schedule-day-title { padding: 18px 20px; }
    .schedule-card { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
    .schedule-reserve-btn { width: 100%; margin-top: 6px; }
}


/* =====================================================
   V2.1.2 — HORARIOS DINÁMICOS DEL PANEL
   Esta estructura corresponde a js/horarios.js.
===================================================== */
.schedule-day-title {
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg,#edf2f5,#f7f9f8);
  border-bottom: 1px solid var(--border);
}
.schedule-day-title h2 { margin:0; font-size:clamp(1.45rem,2.4vw,2rem); line-height:1.15; }
.schedule-day-title span { color:#728087; font-size:.82rem; font-weight:600; white-space:nowrap; }
.schedule-list { display:grid; }
.schedule-card {
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(240px,1.8fr) minmax(170px,1fr) auto;
  align-items:center;
  gap:24px;
  width:100%;
  padding:25px 30px;
  border-bottom:1px solid var(--border);
  background:#fff;
  min-width:0;
}
.schedule-card:last-child { border-bottom:0; }
.schedule-card > * { min-width:0; }
.schedule-time { display:flex; flex-direction:column; gap:3px; }
.schedule-time strong { color:var(--dark); font-size:1rem; line-height:1.3; }
.schedule-time span { color:#76858c; font-size:.88rem; }
.schedule-class span { display:block; margin-bottom:4px; color:var(--primary); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.schedule-class h3 { margin:0 0 5px; color:var(--dark); font-size:1.05rem; line-height:1.3; overflow-wrap:anywhere; }
.schedule-class p { margin:0; color:#65747b; line-height:1.5; overflow-wrap:anywhere; }
.schedule-extra { display:flex; flex-direction:column; gap:5px; color:#52636b; overflow-wrap:anywhere; }
.schedule-extra small { color:#7b888e; }
.schedule-reserve-btn {
  justify-self:end;
  min-width:112px;
  padding:13px 22px;
  margin:0;
  border:0;
  border-radius:999px;
  background:#9bad94;
  color:#fff;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.schedule-reserve-btn:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(66,83,70,.18); background:#849b7b; }
@media (max-width:900px){
  .schedule-container,.schedule-filters{width:min(100% - 32px,1400px)}
  .schedule-card{grid-template-columns:1fr 1.5fr;gap:18px 24px;padding:22px 24px}
  .schedule-extra{grid-column:1/2}
  .schedule-reserve-btn{grid-column:2/3;justify-self:end}
}
@media (max-width:620px){
  .schedule-day{border-radius:20px}
  .schedule-day-title{padding:20px;align-items:flex-start}
  .schedule-card{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .schedule-extra,.schedule-reserve-btn{grid-column:auto}
  .schedule-reserve-btn{justify-self:stretch;width:100%;margin-top:4px;min-height:46px}
}