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


/* =====================================================
   MODAL
===================================================== */

.create-schedule-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    place-items: center;

    padding: 20px;
}


.create-schedule-modal.show,
.create-schedule-modal.is-open,
.create-schedule-modal.active,
.create-schedule-modal[aria-hidden="false"] {
    display: grid;
}



/* =====================================================
   FONDO
===================================================== */

.create-schedule-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(8, 25, 37, 0.72);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


.create-schedule-modal.show
.create-schedule-backdrop,
.create-schedule-modal.is-open
.create-schedule-backdrop,
.create-schedule-modal.active
.create-schedule-backdrop {
    animation:
        createScheduleBackdropIn
        0.18s ease-out;
}



/* =====================================================
   TARJETA
===================================================== */

.create-schedule-card {
    position: relative;

    z-index: 1;

    width:
        min(100%, 900px);

    max-height:
        calc(100vh - 40px);

    overflow-x: hidden;

    overflow-y: auto;

    background:
        var(--surface);

    border:
        1px solid
        rgba(214, 222, 229, 0.8);

    border-radius:
        18px;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.30);

    scrollbar-width: thin;

    scrollbar-color:
        #bcc9d2
        transparent;
}


.create-schedule-modal.show
.create-schedule-card,
.create-schedule-modal.is-open
.create-schedule-card,
.create-schedule-modal.active
.create-schedule-card {
    animation:
        createScheduleModalIn
        0.22s ease-out;
}



/* =====================================================
   SVG
===================================================== */

.create-schedule-modal svg {
    flex: 0 0 auto;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}



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

.create-schedule-header {
    padding:
        22px 24px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );

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


.create-schedule-title {
    min-width: 0;
}


.create-schedule-title > span {
    color:
        #075985;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.create-schedule-header h2 {
    margin:
        4px 0;

    color:
        var(--brand-dark);

    font-size:
        1.35rem;

    line-height:
        1.2;
}


.create-schedule-header p {
    margin: 0;

    color:
        var(--muted);

    font-size:
        0.85rem;

    line-height:
        1.45;
}



/* =====================================================
   BOTÓN CERRAR
===================================================== */

.create-schedule-close {
    width: 42px;

    height: 42px;

    padding: 0;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    color:
        var(--brand);

    background:
        #ffffff;

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

    border-radius:
        11px;

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


.create-schedule-close:hover {
    color:
        var(--danger);

    background:
        var(--danger-soft);

    border-color:
        #e5a49f;

    transform:
        translateY(-1px);
}


.create-schedule-close:active {
    transform:
        scale(0.94);
}



/* =====================================================
   FORMULARIO
===================================================== */

#createScheduleForm {
    padding: 24px;
}



/* =====================================================
   GRID PRINCIPAL
===================================================== */

.create-schedule-grid {
    display: grid;

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

    gap:
        18px 20px;
}


.create-full-field {
    grid-column:
        1 / -1;
}



/* =====================================================
   CAMPOS
===================================================== */

.create-field {
    min-width: 0;

    display: grid;

    align-content: start;

    gap: 7px;
}


.create-field > label,
.create-field-title label {
    color:
        var(--text);

    font-size:
        0.81rem;

    font-weight:
        750;
}



/* =====================================================
   CABECERA DE CAMPOS
===================================================== */

.create-field-title {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 12px;
}


.create-field-title span {
    color:
        var(--muted);

    font-size:
        0.70rem;

    font-weight:
        650;
}



/* =====================================================
   INPUTS / SELECTS
===================================================== */

.create-field input:not([type="checkbox"]),
.create-field select,
.create-employee-search input {
    width: 100%;

    min-height:
        46px;

    padding:
        10px 13px;

    color:
        var(--text);

    background:
        #ffffff;

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

    border-radius:
        10px;

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


.create-field input::placeholder,
.create-employee-search input::placeholder {
    color:
        #8a98a6;
}


.create-field input:not([type="checkbox"]):hover,
.create-field select:hover,
.create-employee-search input:hover {
    border-color:
        #b8c6d0;
}


.create-field input:not([type="checkbox"]):focus,
.create-field select:focus,
.create-employee-search input:focus {
    border-color:
        var(--accent);

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(8, 122, 131, 0.13);
}



/* =====================================================
   SELECT
===================================================== */

.create-select-wrapper {
    position: relative;
}


.create-select-wrapper select {
    padding-right:
        42px;

    appearance: none;

    -webkit-appearance:
        none;

    cursor: pointer;
}


.create-select-wrapper::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 16px;

    width: 7px;
    height: 7px;

    border-right:
        2px solid
        var(--muted);

    border-bottom:
        2px solid
        var(--muted);

    pointer-events:
        none;

    transform:
        translateY(-65%)
        rotate(45deg);
}


.create-select-wrapper:focus-within::after {
    border-color:
        var(--accent-dark);
}



/* =====================================================
   COMIDA
===================================================== */

.create-meal-section {
    padding: 16px;

    background:
        #f8fbfc;

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

    border-radius:
        12px;
}


.create-meal-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 14px;
}


.create-meal-header > div {
    min-width: 0;
}


.create-meal-eyebrow {
    display: block;

    margin-bottom:
        2px;

    color:
        var(--accent-dark);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.create-meal-header strong {
    display: block;

    color:
        var(--brand-dark);

    font-size:
        0.9rem;

    font-weight:
        750;
}


.create-optional-badge {
    flex: 0 0 auto;

    padding:
        4px 8px;

    color:
        var(--muted);

    background:
        #ffffff;

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

    border-radius:
        999px;

    font-size:
        0.68rem;

    font-weight:
        700;
}


.create-meal-description {
    margin:
        6px 0 14px;

    color:
        var(--muted);

    font-size:
        0.76rem;

    line-height:
        1.45;
}


.create-meal-grid {
    display: grid;

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

    gap: 14px;
}



/* =====================================================
   DÍAS LABORALES
===================================================== */

.create-days {
    display: grid;

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

    gap: 9px;
}


.create-day-option {
    position: relative;

    min-height:
        64px;

    padding:
        9px 6px;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 1px;

    color:
        var(--muted);

    background:
        var(--surface-soft);

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

    border-radius:
        10px;

    cursor: pointer;

    user-select: none;

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


.create-day-option:hover {
    color:
        var(--accent-dark);

    background:
        #f1f8f8;

    border-color:
        #acd0d1;

    transform:
        translateY(-1px);
}


.create-day-option input {
    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.create-day-short {
    font-size:
        0.89rem;

    font-weight:
        800;
}


.create-day-option small {
    font-size:
        0.64rem;

    font-weight:
        650;
}


.create-day-option:has(
    input:checked
) {
    color:
        #ffffff;

    background:
        var(--accent-dark);

    border-color:
        var(--accent-dark);

    transform:
        translateY(-2px);
}


.create-day-option:has(
    input:checked
):hover {
    background:
        var(--accent);

    border-color:
        var(--accent);
}


.create-day-option input:focus-visible
~ .create-day-short {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        5px;

    border-radius:
        4px;
}



/* =====================================================
   VALIDACIÓN
===================================================== */

.create-field-error {
    display: none;

    color:
        var(--danger);

    font-size:
        0.72rem;

    font-weight:
        650;
}


.create-field.has-error
.create-field-error {
    display: block;
}


.create-field.has-error
input:not([type="checkbox"]),
.create-field.has-error
select {
    border-color:
        var(--danger);
}



/* =====================================================
   EMPLEADOS
===================================================== */

.create-employees {
    padding: 14px;

    background:
        var(--surface-soft);

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

    border-radius:
        12px;
}



/* =====================================================
   BUSCADOR
===================================================== */

.create-employee-search {
    position: relative;

    margin-bottom:
        11px;
}


.create-search-icon {
    position: absolute;

    top: 50%;
    left: 15px;

    z-index: 3;

    width: 18px;
    height: 18px;

    display: grid;

    place-items: center;

    color:
        var(--muted);

    pointer-events: none;

    transform:
        translateY(-50%);
}


#createEmployeeSearch {
    padding-left:
        47px !important;

    appearance:
        textfield;

    -webkit-appearance:
        textfield;
}


#createEmployeeSearch::-webkit-search-decoration {
    display: none;
}



/* =====================================================
   LISTA DE EMPLEADOS
===================================================== */

.create-employee-list {
    max-height:
        260px;

    overflow-y: auto;

    display: grid;

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

    gap: 9px;

    scrollbar-width:
        thin;
}



/* =====================================================
   EMPLEADO
===================================================== */

.create-employee-item {
    position: relative;

    min-width: 0;

    min-height:
        60px;

    padding:
        9px 10px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 12px;

    background:
        #ffffff;

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

    border-radius:
        10px;

    cursor: pointer;

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


.create-employee-item:hover {
    background:
        #f7fbfb;

    border-color:
        #b5d2d3;

    transform:
        translateY(-1px);
}


.create-employee-item > input {
    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    pointer-events: none;
}



/* =====================================================
   DATOS DEL EMPLEADO
===================================================== */

.create-employee-person {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;
}


.create-employee-person > div:last-child {
    min-width: 0;
}


.create-avatar {
    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    color:
        #ffffff;

    background:
        var(--brand);

    border-radius:
        50%;

    font-size:
        0.70rem;

    font-weight:
        800;

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


.create-employee-person strong,
.create-employee-person span {
    display: block;

    overflow: hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.create-employee-person strong {
    color:
        var(--brand-dark);

    font-size:
        0.80rem;

    font-weight:
        750;
}


.create-employee-person span {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        0.70rem;
}



/* =====================================================
   CHECK VISUAL
===================================================== */

.create-employee-check {
    width: 26px;

    height: 26px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    color:
        transparent;

    background:
        #ffffff;

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

    border-radius:
        8px;

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


.create-employee-check svg {
    stroke-width: 2;
}



/* =====================================================
   EMPLEADO SELECCIONADO
===================================================== */

.create-employee-item:has(
    > input:checked
) {
    background:
        #e8f4f5;

    border-color:
        #93c6c9;
}


.create-employee-item:has(
    > input:checked
)
.create-avatar {
    background:
        var(--accent-dark);

    transform:
        scale(1.03);
}


.create-employee-item:has(
    > input:checked
)
.create-employee-check {
    color:
        #ffffff;

    background:
        var(--accent-dark);

    border-color:
        var(--accent-dark);

    transform:
        scale(1.04);
}



/* =====================================================
   SIN EMPLEADOS
===================================================== */

.create-employees-empty {
    grid-column:
        1 / -1;

    min-height:
        130px;

    padding:
        22px;

    display: grid;

    place-items: center;

    align-content: center;

    color:
        var(--muted);

    background:
        #ffffff;

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

    border-radius:
        10px;

    text-align: center;
}


.create-employees-empty-icon {
    width: 44px;

    height: 44px;

    margin-bottom:
        8px;

    display: grid;

    place-items: center;

    color:
        var(--brand);

    background:
        #edf2f4;

    border-radius:
        50%;
}


.create-employees-empty strong {
    color:
        var(--brand-dark);

    font-size:
        0.86rem;
}


.create-employees-empty span {
    margin-top:
        4px;

    max-width:
        390px;

    font-size:
        0.73rem;

    line-height:
        1.45;
}



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

.create-schedule-note {
    margin-top:
        12px;

    padding:
        11px 13px;

    display: flex;

    align-items:
        flex-start;

    gap: 9px;

    color:
        #075985;

    background:
        #edf7fb;

    border:
        1px solid
        #cfe4ee;

    border-radius:
        10px;
}


.create-schedule-note svg {
    margin-top:
        1px;
}


.create-schedule-note span {
    font-size:
        0.75rem;

    line-height:
        1.45;
}



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

.create-schedule-message {
    padding:
        11px 13px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    font-size:
        0.77rem;

    font-weight:
        650;

    line-height:
        1.45;
}


.create-schedule-message[hidden] {
    display:
        none !important;
}


.create-schedule-message.is-error {
    color:
        #8d1d15;

    background:
        var(--danger-soft);

    border-color:
        #e6aaa5;
}


.create-schedule-message.is-success {
    color:
        #17633c;

    background:
        var(--success-soft);

    border-color:
        #add3bd;
}



/* =====================================================
   ACCIONES
===================================================== */

.create-schedule-actions {
    margin-top:
        22px;

    padding-top:
        18px;

    display: flex;

    align-items: center;

    justify-content:
        flex-end;

    gap: 10px;

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


.create-cancel-button,
.create-confirm-button {
    min-height:
        43px;

    padding:
        9px 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius:
        10px;

    font-size:
        0.84rem;

    font-weight:
        750;

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



/* =====================================================
   CANCELAR
===================================================== */

.create-cancel-button {
    color:
        var(--text);

    background:
        #ffffff;

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


.create-cancel-button:hover {
    background:
        var(--surface-soft);

    border-color:
        #b9c7d1;

    transform:
        translateY(-2px);
}



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

.create-confirm-button {
    color:
        #ffffff;

    background:
        var(--brand);

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


.create-confirm-button:hover:not(:disabled) {
    background:
        var(--brand-dark);

    border-color:
        var(--brand-dark);

    box-shadow:
        0 7px 16px
        rgba(10, 40, 58, 0.18);

    transform:
        translateY(-2px);
}


.create-confirm-button:disabled {
    opacity:
        0.55;

    cursor:
        not-allowed;

    box-shadow:
        none;

    transform:
        none;
}


.create-cancel-button:active,
.create-confirm-button:not(:disabled):active {
    transform:
        translateY(1px)
        scale(0.97);
}



/* =====================================================
   ANIMACIONES
===================================================== */

@keyframes createScheduleModalIn {

    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes createScheduleBackdropIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}



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

@media (max-width: 720px) {

    .create-days {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }


    .create-employee-list {
        grid-template-columns:
            1fr;
    }

}



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

@media (max-width: 650px) {

    .create-schedule-modal {
        padding:
            10px;
    }


    .create-schedule-card {
        max-height:
            calc(100vh - 20px);

        border-radius:
            15px;
    }


    .create-schedule-header,
    #createScheduleForm {
        padding:
            18px;
    }


    .create-schedule-grid {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .create-full-field {
        grid-column:
            auto;
    }


    .create-meal-grid {
        grid-template-columns:
            1fr;
    }


    .create-schedule-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .create-cancel-button,
    .create-confirm-button {
        width:
            100%;
    }

}



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

@media (max-width: 430px) {

    .create-days {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .create-day-option {
        min-height:
            55px;
    }


    .create-schedule-actions {
        grid-template-columns:
            1fr;
    }


    .create-schedule-header h2 {
        font-size:
            1.2rem;
    }

}



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

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

    .create-schedule-modal.show
    .create-schedule-card,

    .create-schedule-modal.show
    .create-schedule-backdrop,

    .create-day-option,

    .create-employee-item,

    .create-avatar,

    .create-employee-check,

    .create-cancel-button,

    .create-confirm-button {
        animation:
            none;

        transition:
            none;
    }

}

/* =====================================================
   MENSAJE DEL FORMULARIO
===================================================== */

.edit-schedule-message {
    padding: 11px 13px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 0.77rem;
    font-weight: 650;
    line-height: 1.45;
}


.edit-schedule-message[hidden] {
    display: none !important;
}


.edit-schedule-message.is-error {
    color: #8d1d15;

    background: var(--danger-soft);

    border-color: #e6aaa5;
}


.edit-schedule-message.is-success {
    color: #17633c;

    background: var(--success-soft);

    border-color: #add3bd;
}