/* =====================================================
   MINIALFA
   PERMISOS - COMISIONES
===================================================== */


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

.commission-modal svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


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

.commission-modal {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


.commission-backdrop {
    background: rgba(8, 25, 37, 0.76);
}


/* =====================================================
   VENTANA
===================================================== */

.commission-window {
    width: min(100%, 720px);
    max-height: min(92vh, 880px);
    overflow-y: auto;

    background: #ffffff;

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

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

    scrollbar-width: thin;
}


.commission-modal.show .commission-window,
.commission-modal.is-open .commission-window,
.commission-modal[aria-hidden="false"] .commission-window {
    animation: commissionWindowIn 0.22s ease-out;
}


@keyframes commissionWindowIn {

    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


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

.commission-header {
    padding: 18px 20px;
    background: #ffffff;
}


.commission-header-content {
    min-width: 0;
}


.commission-header-content > span {
    display: block;

    color: var(--success);

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.commission-header h2 {
    margin: 4px 0;

    color: var(--brand-dark);

    font-size: 1.28rem;
    font-weight: 800;
}


.commission-header p {
    margin: 0;

    color: var(--muted);

    font-size: 0.8rem;
    line-height: 1.5;
}


/* =====================================================
   CERRAR
===================================================== */

.commission-close {
    width: 42px;
    height: 42px;
    padding: 0;

    cursor: pointer;

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


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

    background: var(--danger-soft);

    border-color: #e5a49f;

    box-shadow:
        0 5px 12px
        rgba(196, 76, 67, 0.10);

    transform: translateY(-1px);
}


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


/* =====================================================
   SECCIONES
===================================================== */

.commission-section {
    padding: 16px 20px;
}


.commission-section-title {
    margin-bottom: 11px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;
}


.commission-section-title > div {
    min-width: 0;
}


.commission-section-title > div > span,
.commission-section-title > div > strong {
    display: block;
}


.commission-section-title > div > span {
    margin-bottom: 2px;

    color: var(--success);

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


.commission-section-title > div > strong {
    color: var(--brand-dark);

    font-size: 0.84rem;
    font-weight: 800;
}


.commission-section-title > small {
    color: #687782;

    font-size: 0.65rem;
    font-weight: 650;

    text-align: right;
}


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

.commission-search-box input {
    min-height: 42px;

    color: var(--text);

    font-size: 0.8rem;
}


.commission-search-box input:focus {
    outline: none;

    border-color: var(--success);

    box-shadow:
        0 0 0 3px
        rgba(42, 133, 85, 0.10);
}


/* =====================================================
   DROPDOWN
===================================================== */

.commission-employee-options {
    display: none;
}


.commission-employee-options.show {
    display: block;

    animation:
        commissionDropdownIn
        0.16s ease-out;
}


@keyframes commissionDropdownIn {

    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

.commission-employee-option {
    cursor: pointer;
}


.commission-option-data {
    min-width: 0;
}


.commission-option-data strong,
.commission-option-data small {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.commission-option-data strong {
    color: var(--brand-dark);

    font-size: 0.78rem;
}


.commission-option-data small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 0.68rem;
}


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

.commission-selected-employee[hidden] {
    display: none !important;
}


.commission-selected-employee {
    padding: 10px 11px;
}


.commission-selected-data {
    min-width: 0;
}


.commission-selected-data span,
.commission-selected-data strong,
.commission-selected-data small {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.commission-selected-data span {
    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 700;

    text-transform: uppercase;
}


.commission-selected-data strong {
    margin-top: 1px;

    color: var(--brand-dark);

    font-size: 0.79rem;
}


.commission-selected-data small {
    margin-top: 1px;

    color: var(--muted);

    font-size: 0.67rem;
}


.commission-selected-check {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: #ffffff;

    background: var(--success);

    border-radius: 50%;
}


/* =====================================================
   CONTROLES
===================================================== */

.commission-control,
.commission-textarea {
    color: var(--text);

    font-size: 0.78rem;

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


.commission-control:focus,
.commission-textarea:focus {
    outline: none;

    border-color: var(--success);

    box-shadow:
        0 0 0 3px
        rgba(42, 133, 85, 0.10);
}


.commission-control:disabled,
.commission-textarea:disabled {
    color: #59666f;

    background: #f6f8f9;

    cursor: default;
}


.commission-select {
    appearance: none;
}


/* =====================================================
   MODALIDADES
===================================================== */

.commission-mode-grid {
    display: grid;

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

    gap: 8px;
}


.commission-mode-option {
    min-height: 72px;

    padding: 10px 11px;

    color: var(--text);

    background: var(--surface-soft);

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

    text-align: left;

    cursor: pointer;

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


.commission-mode-option strong,
.commission-mode-option small {
    display: block;
}


.commission-mode-option strong {
    color: var(--brand-dark);

    font-size: 0.75rem;
}


.commission-mode-option small {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.64rem;
    line-height: 1.35;
}


.commission-mode-option:hover:not(:disabled) {
    background: #f1faf5;

    border-color:
        rgba(42, 133, 85, 0.42);

    transform: translateY(-1px);
}


.commission-mode-option.selected,
.commission-mode-option[aria-pressed="true"] {
    color: var(--success);

    background: var(--success-soft);

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


.commission-mode-option.selected strong,
.commission-mode-option[aria-pressed="true"] strong {
    color: var(--success);
}


.commission-mode-option:disabled {
    cursor: default;
}


/* =====================================================
   CALENDARIO
===================================================== */

.commission-calendar {
    padding: 11px 12px 12px;

    overflow: hidden;

    background: #f7f9fa;

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


.commission-calendar-header {
    min-height: 37px;

    margin-bottom: 8px;
}


.commission-calendar-navigation > strong {
    min-width: 130px;

    color: var(--brand-dark);

    font-size: 0.72rem;
    font-weight: 800;

    text-align: center;
}


/* =====================================================
   NAVEGACIÓN
===================================================== */

.commission-calendar-navigation button,
.commission-today {
    min-width: 36px;
    min-height: 36px;

    padding: 5px 8px;

    cursor: pointer;

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


.commission-calendar-navigation button:hover,
.commission-today:hover {
    color: #ffffff;

    background: var(--success);

    border-color: var(--success);

    transform: translateY(-1px);
}


/* =====================================================
   DÍAS SEMANA
===================================================== */

.commission-weekdays {
    margin-bottom: 4px;
    gap: 4px;
}


.commission-weekdays span {
    padding: 3px 0;

    color: #62717c;

    font-size: 0.59rem;
    font-weight: 800;
}


/* =====================================================
   DÍAS DEL CALENDARIO
===================================================== */

.commission-calendar-days {
    gap: 4px;
}


.commission-calendar-days button {
    width: 100%;

    height: 39px;
    min-height: 39px;

    aspect-ratio: auto;

    padding: 0;

    color: var(--text);

    background: #ffffff;

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

    font-size: 0.73rem;

    cursor: pointer;

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


.commission-calendar-days button:hover:not(:disabled) {
    color: var(--success);

    background: #eff9f3;

    border-color: #b9dfc8;

    transform: translateY(-1px);
}


.commission-day.weekend:not(.selected-single):not(.selected-start):not(.selected-end):not(.in-range) {
    color: #7a8790;

    background: #f1f4f5;
}


.commission-day.today:not(.selected-single):not(.selected-start):not(.selected-end) {
    color: var(--success);

    background: var(--success-soft);

    font-weight: 800;
}


/* =====================================================
   FECHA INDIVIDUAL
===================================================== */

.commission-day.selected-single {
    color: #ffffff;

    background: var(--success);

    border-color: var(--success);

    font-weight: 800;
}


/* =====================================================
   RANGO
===================================================== */

.commission-day.in-range {
    color: #226541;

    background: #dff2e7;

    border-color: #cbe8d6;

    border-radius: 4px;

    font-weight: 650;
}


.commission-day.selected-start,
.commission-day.selected-end {
    color: #ffffff;

    background: var(--success);

    border-color: var(--success);

    font-weight: 800;
}


.commission-day.selected-start.selected-end {
    border-radius: 8px;
}


.commission-day:disabled {
    opacity: 1;
    cursor: default;
}


.commission-day.empty {
    height: 39px;
    min-height: 39px;
}


/* =====================================================
   RESUMEN DE FECHA
===================================================== */

.commission-date-summary {
    margin-top: 10px;

    padding: 10px 11px;

    display: grid;

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

    align-items: center;

    gap: 12px;

    color: #245d3d;

    background: var(--success-soft);

    border:
        1px solid
        rgba(42, 133, 85, 0.18);

    border-left:
        4px solid
        var(--success);

    border-radius: 8px;
}


.commission-date-main {
    min-width: 0;
}


.commission-date-main span,
.commission-date-main strong {
    display: block;
}


.commission-date-main span {
    font-size: 0.61rem;
    font-weight: 700;

    text-transform: uppercase;
}


.commission-date-main strong {
    margin-top: 2px;

    color: var(--brand-dark);

    font-size: 0.76rem;
}


/* =====================================================
   DURACIÓN
===================================================== */

.commission-duration[hidden] {
    display: none !important;
}


.commission-duration {
    min-width: 74px;

    padding: 6px 10px;

    color: #ffffff;

    background: var(--success);

    border-radius: 8px;

    text-align: center;
}


.commission-duration strong,
.commission-duration span {
    display: block;
}


.commission-duration strong {
    font-size: 1rem;
    line-height: 1.1;
}


.commission-duration span {
    margin-top: 1px;

    font-size: 0.58rem;
}


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

.commission-time-section[hidden] {
    display: none !important;
}


.commission-time-section {
    margin: 0 20px 15px;

    padding: 13px;

    display: grid;

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

    gap: 10px;

    background: #f3faf6;

    border:
        1px solid
        rgba(42, 133, 85, 0.20);

    border-left:
        4px solid
        var(--success);

    border-radius: 10px;
}


.commission-time-field {
    display: grid;
    gap: 5px;
}


.commission-time-field label {
    color: var(--brand-dark);

    font-size: 0.7rem;
    font-weight: 750;
}


.commission-time-error {
    grid-column: 1 / -1;
}


/* =====================================================
   TEXTAREA
===================================================== */

.commission-textarea {
    min-height: 88px;
}


.commission-observation {
    min-height: 78px;
}


.commission-text-footer {
    margin-top: 4px;

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

    gap: 10px;

    color: var(--muted);

    font-size: 0.65rem;
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.commission-info {
    margin: 14px 20px;

    padding: 11px 12px;

    display: flex;
    align-items: flex-start;

    gap: 8px;

    color: #2e6747;

    background: #f1faf5;

    border: 1px solid #d2e9dc;
    border-left: 4px solid var(--success);

    border-radius: 8px;
}


.commission-info svg {
    margin-top: 1px;

    flex: 0 0 auto;

    color: var(--success);
}


.commission-info p {
    margin: 0;

    font-size: 0.7rem;
    line-height: 1.5;
}


/* =====================================================
   GUARDADO
===================================================== */

.commission-saved[hidden] {
    display: none !important;
}


.commission-saved {
    margin: 0 20px 14px;

    padding: 11px 12px;

    display: flex;
    align-items: flex-start;

    gap: 8px;
}


.commission-saved span,
.commission-saved strong {
    display: block;
}


.commission-saved span {
    font-size: 0.68rem;
}


.commission-saved strong {
    margin-top: 2px;

    font-size: 0.72rem;
}


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

.commission-actions {
    padding: 14px 20px;
}


.commission-secondary,
.commission-primary,
.commission-document {
    min-height: 41px;

    padding: 8px 13px;

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

    gap: 7px;

    font-size: 0.76rem;

    cursor: pointer;

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


.commission-secondary:hover {
    background: #f4f7f8;

    border-color: #b9c7d1;

    transform: translateY(-1px);
}


.commission-primary:not(:disabled):hover {
    background: var(--brand-dark);

    box-shadow:
        0 6px 14px
        rgba(10, 40, 58, 0.15);

    transform: translateY(-1px);
}


.commission-primary:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


.commission-document:hover {
    color: #ffffff;

    background: var(--success);

    border-color: var(--success);

    transform: translateY(-1px);
}


.commission-secondary:active,
.commission-primary:not(:disabled):active,
.commission-document:active {
    transform: scale(0.97);
}


/* =====================================================
   HIDDEN
===================================================== */

.commission-error[hidden],
.commission-selected-employee[hidden],
.commission-saved[hidden] {
    display: none !important;
}


/* =====================================================
   FOCUS
===================================================== */

.commission-close:focus-visible,
.commission-mode-option:focus-visible,
.commission-calendar-navigation button:focus-visible,
.commission-today:focus-visible,
.commission-day:focus-visible,
.commission-secondary:focus-visible,
.commission-primary:focus-visible,
.commission-document:focus-visible {
    outline:
        3px solid
        rgba(42, 133, 85, 0.16);

    outline-offset: 2px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 620px) {

    .commission-mode-grid {
        grid-template-columns: 1fr;
    }


    .commission-calendar-header {
        align-items: stretch;
        flex-direction: column;
    }


    .commission-calendar-navigation {
        justify-content: space-between;
    }


    .commission-calendar-navigation > strong {
        min-width: 0;
        flex: 1;
    }


    .commission-today {
        align-self: flex-start;
    }

}


@media (max-width: 520px) {

    .commission-time-section {
        margin-inline: 15px;

        grid-template-columns: 1fr;
    }


    .commission-time-error {
        grid-column: auto;
    }


    .commission-date-summary {
        grid-template-columns: 1fr;
    }


    .commission-duration {
        justify-self: start;
    }


    .commission-info,
    .commission-saved {
        margin-inline: 15px;
    }

}


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

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

    .commission-window,
    .commission-close,
    .commission-employee-options,
    .commission-mode-option,
    .commission-day,
    .commission-secondary,
    .commission-primary,
    .commission-document {
        animation: none;
        transition: none;
    }

}