/* ============================================================
   SOLICITUDES ADMINISTRADOR
   ============================================================

   IMPORTANTE:
   Este archivo modifica EXCLUSIVAMENTE presentación.

   NO modifica:
   - Blazor
   - C#
   - Microsoft Graph
   - SharePoint
   - filtros
   - fechas
   - botones
   - @onclick
   - navegación
   - carga de datos
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --adm-bg: #f4f7fb;
    --adm-white: #ffffff;
    --adm-navy: #101653;
    --adm-blue: #3143aa;
    --adm-blue-hover: #26399d;
    --adm-cyan: #21c7ca;
    --adm-cyan-dark: #12afb4;
    --adm-line: #d9e2f0;
    --adm-line-strong: #c5d2e8;
    --adm-text: #111827;
    --adm-text-medium: #475467;
    --adm-muted: #98a2b3;
    --adm-blue-soft: #e0f2fe;
    --adm-blue-text: #075985;
    --adm-green-soft: #dcfce7;
    --adm-green-text: #067a3b;
    --adm-shadow: 0 10px 30px rgba(16, 24, 40, 0.07);
}


/* ============================================================
   PÁGINA
   ============================================================ */

.requests-page {
    width: 100% !important;
    height: 100dvh !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    background: var(--adm-bg) !important;
    background-image: none !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
    overflow: hidden !important;
}


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

    .requests-page .requests-shell {
        width: 100% !important;
        height: 100% !important;
        min-width: 1120px !important;
        background: var(--adm-bg) !important;
        border: 1px solid var(--adm-line) !important;
        border-radius: 28px !important;
        box-shadow: var(--adm-shadow) !important;
        overflow: hidden !important;
    }


    /* ============================================================
   HEADER
   ============================================================ */

    .requests-page .requests-header {
        position: relative !important;
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid var(--adm-line) !important;
    }


    /* ============================================================
   TÍTULO
   ============================================================ */

    .requests-page .department-title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: var(--adm-navy) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        z-index: 2 !important;
    }


    /* ============================================================
   USUARIO
   ============================================================ */

    .requests-page .user-information {
        position: absolute !important;
        left: 90px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        color: var(--adm-navy) !important;
        z-index: 5 !important;
    }


    .requests-page .user-email {
        color: var(--adm-navy) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }


    /* ============================================================
   ICONOS HEADER
   ============================================================ */

    .requests-page .header-icon {
        position: absolute !important;
        top: 50% !important;
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid var(--adm-line) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 14px rgba(16, 24, 40, 0.07) !important;
        cursor: pointer !important;
    }


    .requests-page .back-button {
        left: 12px !important;
    }


    .requests-page .home-button {
        right: 12px !important;
    }


    .requests-page .header-icon svg {
        width: 33px !important;
        height: 33px !important;
        fill: none !important;
        stroke: var(--adm-navy) !important;
        stroke-width: 2.5 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


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

    .requests-page .requests-main {
        position: relative !important;
        width: 100% !important;
        height: calc(100% - 60px) !important;
        background: var(--adm-bg) !important;
        overflow: hidden !important;
    }


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

    .requests-page .controls-area {
        position: relative !important;
        width: 100% !important;
        height: 134px !important;
        padding: 16px 30px 0 !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 170px 280px 390px minmax(440px, 1fr) !important;
        column-gap: 18px !important;
        color: var(--adm-text-medium) !important;
        background: var(--adm-bg) !important;
    }


    /* ============================================================
   ACTUALIZAR
   ============================================================ */

    .requests-page .refresh-area {
        height: 100% !important;
        padding-top: 24px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }


    .requests-page .refresh-text {
        margin-top: 12px !important;
        color: var(--adm-text-medium) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }


    .requests-page .refresh-button {
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid var(--adm-line) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06) !important;
        cursor: pointer !important;
    }


        .requests-page .refresh-button svg {
            width: 31px !important;
            height: 31px !important;
            fill: none !important;
            stroke: #557395 !important;
            stroke-width: 2.2 !important;
        }


    /* ============================================================
   FECHAS
   ============================================================ */

    .requests-page .dates-area {
        padding-top: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }


    .requests-page .date-row {
        width: 100% !important;
        height: 38px !important;
        display: grid !important;
        grid-template-columns: 54px 220px !important;
        gap: 8px !important;
        align-items: center !important;
    }


        .requests-page .date-row label {
            color: #344054 !important;
            font-size: 14px !important;
            font-weight: 700 !important;
        }


    .requests-page .date-input {
        width: 220px !important;
        height: 36px !important;
        background: transparent !important;
    }


        .requests-page .date-input input {
            width: 100% !important;
            height: 36px !important;
            padding: 0 12px !important;
            box-sizing: border-box !important;
            background: #ffffff !important;
            border: 1px solid var(--adm-line-strong) !important;
            border-radius: 12px !important;
            outline: none !important;
            color: var(--adm-text) !important;
            font-size: 13px !important;
        }


    /* ============================================================
   OPCIONES BÚSQUEDA
   ============================================================ */

    .requests-page .search-area {
        width: 100% !important;
    }


    .requests-page .search-options {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }


    .requests-page .search-option {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #344054 !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
    }


    .requests-page .fake-checkbox {
        width: 18px !important;
        height: 18px !important;
        background: #ffffff !important;
        border: 1px solid #8a9aba !important;
        border-radius: 4px !important;
    }


    .requests-page .search-input {
        display: block !important;
        width: 100% !important;
        max-width: 390px !important;
        height: 40px !important;
        padding: 0 14px !important;
        background: #ffffff !important;
        border: 1px solid var(--adm-line-strong) !important;
        border-radius: 13px !important;
        outline: none !important;
        color: var(--adm-text) !important;
        font-size: 13px !important;
        box-shadow: 0 3px 10px rgba(16, 24, 40, 0.03) !important;
    }


        .requests-page .search-input::placeholder {
            color: #98a2b3 !important;
        }


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

    .requests-page .actions-area {
        width: 100% !important;
    }


    .requests-page .actions-top {
        width: 100% !important;
        height: 42px !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }


    /* ============================================================
   FILTRO ESTADO
   ============================================================ */

    .requests-page .state-filter {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }


    .requests-page .state-select-container {
        position: relative !important;
        width: 230px !important;
        height: 40px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }


    .requests-page .state-select {
        width: 100% !important;
        height: 40px !important;
        padding: 0 50px 0 13px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--adm-line-strong) !important;
        border-radius: 12px !important;
        outline: none !important;
        color: var(--adm-text) !important;
        font-size: 13px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }


    .requests-page .state-select-arrow {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 45px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient( 135deg, var(--adm-cyan), var(--adm-cyan-dark) ) !important;
        border-radius: 0 12px 12px 0 !important;
    }


        .requests-page .state-select-arrow svg {
            width: 20px !important;
            height: 18px !important;
            stroke: #ffffff !important;
            stroke-width: 2.5 !important;
        }


    /* ============================================================
   QUITAR FILTRO
   ============================================================ */

    .requests-page .clear-state-filter {
        position: relative !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }


    .requests-page .clear-state-square {
        position: absolute !important;
        left: 5px !important;
        bottom: 4px !important;
        width: 22px !important;
        height: 25px !important;
        border: 2px solid #8794aa !important;
        border-radius: 3px !important;
    }


    .requests-page .clear-state-x {
        position: absolute !important;
        right: 0 !important;
        top: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }


        .requests-page .clear-state-x span {
            position: absolute !important;
            left: 10px !important;
            width: 2.5px !important;
            height: 24px !important;
            background: #ef2b2d !important;
            border-radius: 2px !important;
        }


            .requests-page .clear-state-x span:first-child {
                transform: rotate(45deg) !important;
            }


            .requests-page .clear-state-x span:last-child {
                transform: rotate(-45deg) !important;
            }


    /* ============================================================
   BOTONES SUPERIORES
   ============================================================ */

    .requests-page .action-buttons {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        margin-top: 8px !important;
    }


    .requests-page .turquoise-button {
        min-width: 185px !important;
        height: 42px !important;
        padding: 0 16px !important;
        background: var(--adm-cyan) !important;
        color: var(--adm-navy) !important;
        border: 1px solid #0f8087 !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        line-height: 14px !important;
        font-weight: 750 !important;
        box-shadow: 0 4px 10px rgba(16, 24, 40, 0.05) !important;
    }


    /* ============================================================
   TOTAL CASOS
   ============================================================ */

    .requests-page .total-cases {
        position: absolute !important;
        left: 30px !important;
        bottom: 4px !important;
        width: auto !important;
        height: 30px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        color: var(--adm-navy) !important;
        border: 1px solid var(--adm-line) !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04) !important;
    }


    /* ============================================================
   GALERÍA
   ============================================================ */

    .requests-page .cases-table {
        position: relative !important;
        width: calc(100% - 36px) !important;
        height: calc(100% - 146px) !important;
        margin: 0 18px 14px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--adm-line) !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: var(--adm-shadow) !important;
    }


    /* ============================================================
   HEADER GALERÍA
   ============================================================ */

    .requests-page .table-header {
        position: relative !important;
        width: 100% !important;
        height: 52px !important;
        display: grid !important;
        grid-template-columns: 7% 10% 20% 8% 9% 13% 10% 7% 9% 7% !important;
        align-items: stretch !important;
        background: #f8fafc !important;
        border-bottom: 1px solid var(--adm-line) !important;
    }


    /* ============================================================
   CABECERAS
   ============================================================ */

    .requests-page .table-header-cell {
        height: 52px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        color: #475467 !important;
        border: 0 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        letter-spacing: 0.035em !important;
        white-space: nowrap !important;
    }


        .requests-page .table-header-cell.two-lines {
            line-height: 13px !important;
        }


    .requests-page .table-header-action {
        height: 52px !important;
        background: #f8fafc !important;
    }


    /* ============================================================
   CONTENEDOR FILAS
   ============================================================ */

    .requests-page .rows-container {
        position: relative !important;
        width: 100% !important;
        height: calc(100% - 52px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #ffffff !important;
    }


    /* ============================================================
   CADA REGISTRO
   ============================================================ */

    .requests-page .case-row {
        width: 100% !important;
        min-height: 150px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 7% 10% 20% 8% 9% 13% 10% 7% 9% 7% !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid var(--adm-line) !important;
        box-sizing: border-box !important;
    }


        .requests-page .case-row:last-child {
            border-bottom: 0 !important;
        }


        .requests-page .case-row:hover {
            background: #fbfdff !important;
        }


    /* ============================================================
   CELDAS
   ============================================================ */

    .requests-page .case-cell {
        min-width: 0 !important;
        min-height: 150px !important;
        height: auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
        color: #475467 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }


    /* ============================================================
   ID
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(1) {
        width: max-content !important;
        max-width: calc(100% - 20px) !important;
        min-height: auto !important;
        margin: 20px 0 0 14px !important;
        padding: 9px 12px !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #eef2ff !important;
        border-radius: 999px !important;
        color: var(--adm-blue) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }


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

    .requests-page .case-row > .case-cell:nth-child(2) {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        color: #344054 !important;
        text-align: left !important;
    }


    /* ============================================================
   VECINO
   ============================================================ */

    .requests-page .person-cell {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }


    .requests-page .person-rut {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        color: #344054 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-align: left !important;
    }


    .requests-page .person-data {
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #667085 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }


    /* ============================================================
   TIPO
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(4) {
        text-align: left !important;
        justify-content: flex-start !important;
        color: #475467 !important;
    }


    /* ============================================================
   ESTADO
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(5) {
        width: max-content !important;
        max-width: calc(100% - 16px) !important;
        min-height: auto !important;
        margin: 20px 8px !important;
        padding: 9px 13px !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--adm-blue-soft) !important;
        border-radius: 999px !important;
        color: var(--adm-blue-text) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }


    /* ============================================================
   FECHA POSIBLE SOLUCIÓN
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(6) {
        width: max-content !important;
        max-width: calc(100% - 16px) !important;
        min-height: auto !important;
        margin: 20px 8px !important;
        padding: 9px 13px !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--adm-green-soft) !important;
        border-radius: 999px !important;
        color: var(--adm-green-text) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }


    .requests-page .possible-date {
        color: var(--adm-green-text) !important;
        font-weight: 800 !important;
    }


    /* ============================================================
   OBSERVACIONES
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(7) {
        color: var(--adm-muted) !important;
        text-align: left !important;
        white-space: pre-line !important;
    }


    /* ============================================================
   SOLUCIÓN
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(8) {
        color: var(--adm-muted) !important;
        text-align: left !important;
        white-space: pre-line !important;
    }


    /* ============================================================
   DEPARTAMENTOS
   ============================================================ */

    .requests-page .case-row > .case-cell:nth-child(9) {
        color: var(--adm-muted) !important;
        text-align: left !important;
        white-space: pre-line !important;
    }


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

    .requests-page .case-action {
        min-height: 150px !important;
        height: auto !important;
        padding: 15px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: transparent !important;
    }


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

    .requests-page .send-button {
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--adm-blue) !important;
        border: 0 !important;
        border-radius: 17px !important;
        box-shadow: 0 7px 16px rgba(49, 67, 170, 0.20) !important;
        cursor: pointer !important;
    }


        .requests-page .send-button:hover {
            background: var(--adm-blue-hover) !important;
            transform: translateY(-1px) !important;
        }


        .requests-page .send-button svg {
            width: 25px !important;
            height: 25px !important;
            fill: none !important;
            stroke: #ffffff !important;
            stroke-width: 2.3 !important;
            stroke-linejoin: round !important;
        }


    /* ============================================================
   MENSAJES
   ============================================================ */

    .requests-page .loading-cases {
        width: 100% !important;
        min-height: 180px !important;
        padding: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        color: #667085 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }


    .requests-page .error-cases {
        width: 100% !important;
        padding: 24px !important;
        background: #fff5f5 !important;
        color: #b42318 !important;
        font-size: 14px !important;
    }


    /* ============================================================
   SCROLL
   ============================================================ */

    .requests-page .rows-container::-webkit-scrollbar {
        width: 12px !important;
    }


    .requests-page .rows-container::-webkit-scrollbar-track {
        background: #ffffff !important;
    }


    .requests-page .rows-container::-webkit-scrollbar-thumb {
        background: #858585 !important;
        border: 3px solid #ffffff !important;
        border-radius: 999px !important;
    }


    /* ============================================================
   ELIMINAR SCROLL FALSO ANTIGUO VISUALMENTE
   ============================================================ */

    .requests-page .fake-scrollbar,
    .requests-page .fake-scroll-thumb {
        display: none !important;
    }


/* ============================================================
   RESOLUCIONES MENORES
   ============================================================ */

@media (max-width: 1450px) {

    .requests-page {
        overflow-x: auto !important;
    }


        .requests-page .requests-shell {
            min-width: 1260px !important;
        }


        .requests-page .controls-area {
            grid-template-columns: 160px 270px 350px minmax(400px, 1fr) !important;
            column-gap: 12px !important;
        }
}