/* =====================================================
   MINIALFA
   MÓDULO DE HORARIOS

   IMPORTANTE:
   Las clases de las opciones principales utilizan
   "schedule-option-*" para evitar conflictos con
   los CSS de las subventanas.
===================================================== */


/* =====================================================
   PANEL PRINCIPAL
===================================================== */

.schedules-panel {
    padding:
        clamp(20px, 3vw, 30px);

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

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


/* =====================================================
   ENCABEZADO
===================================================== */

.schedules-header {
    margin-bottom:
        24px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        22px;
}


.schedules-title {
    min-width:
        0;
}


.schedules-title h2 {
    margin:
        4px 0 5px;

    color:
        var(--brand-dark);

    font-size:
        clamp(
            1.25rem,
            2.2vw,
            1.55rem
        );

    line-height:
        1.2;
}


.schedules-title p {
    margin:
        0;

    max-width:
        650px;

    color:
        var(--muted);

    font-size:
        0.9rem;

    line-height:
        1.5;
}


/* =====================================================
   ICONO DEL ENCABEZADO
===================================================== */

.schedules-header-icon {
    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--accent-dark);

    background:
        #e8f4f5;

    border-radius:
        12px;
}


.schedules-header-icon svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =====================================================
   DISTRIBUCIÓN
===================================================== */

.schedules-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px;
}


.overtime-card-container {
    margin-top:
        18px;
}


/* =====================================================
   TARJETAS PRINCIPALES
===================================================== */

.schedule-card {
    position:
        relative;

    width:
        100%;

    min-height:
        142px;

    padding:
        22px;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        18px;

    appearance:
        none;

    -webkit-appearance:
        none;

    color:
        var(--text);

    background:
        var(--surface-soft);

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

    border-radius:
        15px;

    outline:
        none;

    box-shadow:
        none !important;

    filter:
        none !important;

    text-align:
        left;

    transform:
        translateY(0);

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}


/* =====================================================
   ESTADOS DEL BOTÓN
===================================================== */

.schedule-card:focus,
.schedule-card:visited {
    box-shadow:
        none !important;

    filter:
        none !important;
}


.schedule-card:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        3px;
}


@media (hover: hover) and (pointer: fine) {

    .schedule-card:hover {
        background:
            #ffffff;

        box-shadow:
            none !important;

        filter:
            none !important;

        transform:
            translateY(-2px);
    }

}


.schedule-card:active {
    box-shadow:
        none !important;

    filter:
        none !important;

    transform:
        translateY(1px)
        scale(0.985);
}


/* =====================================================
   ICONO DE TARJETA
===================================================== */

.schedule-card-icon {
    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        14px;

    box-shadow:
        none;

    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}


.schedule-card-icon svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =====================================================
   CREAR HORARIO
===================================================== */

.schedule-option-create
.schedule-card-icon {
    color:
        #075985;

    background:
        #e7f2f8;
}


.schedule-option-create
.schedule-card-eyebrow {
    color:
        #075985;
}


.schedule-option-create
.schedule-card-arrow {
    color:
        #075985;
}


@media (hover: hover) and (pointer: fine) {

    .schedule-option-create:hover {
        border-color:
            #87bad1;
    }


    .schedule-option-create:hover
    .schedule-card-icon {
        background:
            #dceef7;

        transform:
            scale(1.04);
    }

}


/* =====================================================
   GESTIONAR HORARIOS
===================================================== */

.schedule-option-manage
.schedule-card-icon {
    color:
        var(--accent-dark);

    background:
        #e3f3f3;
}


.schedule-option-manage
.schedule-card-eyebrow {
    color:
        var(--accent-dark);
}


.schedule-option-manage
.schedule-card-arrow {
    color:
        var(--accent-dark);
}


@media (hover: hover) and (pointer: fine) {

    .schedule-option-manage:hover {
        border-color:
            #8ac4c6;
    }


    .schedule-option-manage:hover
    .schedule-card-icon {
        background:
            #d8eeee;

        transform:
            scale(1.04);
    }

}


/* =====================================================
   HORAS EXTRA
===================================================== */

.schedule-option-overtime
.schedule-card-icon {
    color:
        var(--warning);

    background:
        var(--warning-soft);
}


.schedule-option-overtime
.schedule-card-eyebrow {
    color:
        var(--warning);
}


.schedule-option-overtime
.schedule-card-arrow {
    color:
        var(--warning);
}


@media (hover: hover) and (pointer: fine) {

    .schedule-option-overtime:hover {
        border-color:
            #dbb66d;
    }


    .schedule-option-overtime:hover
    .schedule-card-icon {
        background:
            #ffe8c3;

        transform:
            scale(1.04);
    }

}


/* =====================================================
   CONTENIDO
===================================================== */

.schedule-card-content {
    min-width:
        0;
}


.schedule-card-eyebrow {
    display:
        block;

    margin-bottom:
        3px;

    font-size:
        0.71rem;

    font-weight:
        800;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.schedule-card-content h3 {
    margin:
        2px 0 5px;

    color:
        var(--brand-dark);

    font-size:
        1.06rem;

    font-weight:
        750;

    line-height:
        1.25;
}


.schedule-card-content p {
    margin:
        0;

    max-width:
        500px;

    color:
        var(--muted);

    font-size:
        0.86rem;

    line-height:
        1.48;
}


/* =====================================================
   FLECHA
===================================================== */

.schedule-card-arrow {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    background:
        transparent;

    border-radius:
        9px;

    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}


.schedule-card-arrow svg {
    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


@media (hover: hover) and (pointer: fine) {

    .schedule-card:hover
    .schedule-card-arrow {
        transform:
            translateX(3px);
    }


    .schedule-option-create:hover
    .schedule-card-arrow {
        background:
            #edf5fa;
    }


    .schedule-option-manage:hover
    .schedule-card-arrow {
        background:
            #edf7f7;
    }


    .schedule-option-overtime:hover
    .schedule-card-arrow {
        background:
            var(--warning-soft);
    }

}


/* =====================================================
   NOTA
===================================================== */

.schedules-note {
    margin-top:
        20px;

    padding:
        12px 14px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        #075985;

    background:
        #edf7fb;

    border:
        1px solid
        #cfe4ee;

    border-radius:
        11px;
}


.schedules-note svg {
    margin-top:
        1px;

    flex:
        0 0 auto;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.schedules-note span {
    font-size:
        0.78rem;

    line-height:
        1.45;
}


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

@media (max-width: 820px) {

    .schedules-grid {
        grid-template-columns:
            1fr;
    }


    .schedule-card {
        min-height:
            125px;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .schedules-panel {
        padding:
            17px;
    }


    .schedules-header-icon {
        display:
            none;
    }


    .schedule-card {
        min-height:
            112px;

        padding:
            17px;

        gap:
            14px;
    }


    .schedule-card-icon {
        width:
            48px;

        height:
            48px;
    }


    .schedule-card-content h3 {
        font-size:
            1rem;
    }


    .schedule-card-content p {
        font-size:
            0.82rem;
    }

}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media (max-width: 420px) {

    .schedule-card {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .schedule-card-arrow {
        display:
            none;
    }


    .schedule-card-icon {
        width:
            44px;

        height:
            44px;
    }

}


/* =====================================================
   MOVIMIENTO REDUCIDO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .schedule-card,
    .schedule-card-icon,
    .schedule-card-arrow {
        transition:
            none;
    }

}