/* ============================================================
   SOLICITUD ADMIN DETALLE
   NUEVA ESTÉTICA

   SOLO PRESENTACIÓN.

   NO modifica:
   - lógica C#
   - Microsoft Graph
   - SharePoint
   - Departamentos
   - Derivar
   - Rechazar Caso
   - Subir Documento
   - mapas
   - archivos
   - navegación
   ============================================================ */


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

.admin-detail-page {
    --detail-bg: #f4f7fb;
    --detail-white: #ffffff;
    --detail-brand-950: #09112f;
    --detail-brand-900: #101653;
    --detail-brand-800: #1b2d7a;
    --detail-brand-700: #3143aa;
    --detail-cyan: #21c7ca;
    --detail-cyan-dark: #10aeb4;
    --detail-cyan-soft: #ebfbfc;
    --detail-border: #d8e2ef;
    --detail-border-strong: #c6d3e5;
    --detail-text: #111827;
    --detail-text-secondary: #475467;
    --detail-muted: #98a2b3;
    --detail-danger: #dc0000;
    --detail-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    --detail-shadow-large: 0 16px 40px rgba(16, 24, 40, 0.09);
}


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

.admin-detail-page {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    background: var(--detail-bg) !important;
    color: var(--detail-text) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}


    /* ============================================================
   SHELL
   ============================================================ */

    .admin-detail-page .admin-detail-shell {
        width: 100% !important;
        min-height: calc(100dvh - 24px) !important;
        box-sizing: border-box !important;
        background: var(--detail-bg) !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 26px !important;
        overflow: hidden !important;
        box-shadow: var(--detail-shadow) !important;
    }


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

    .admin-detail-page .admin-detail-header {
        position: relative !important;
        width: 100% !important;
        height: 62px !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(--detail-border) !important;
    }


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

    .admin-detail-page .admin-detail-title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: var(--detail-brand-900) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }


        .admin-detail-page .admin-detail-title span {
            margin-left: 5px !important;
            color: var(--detail-brand-900) !important;
            font-weight: 600 !important;
        }


    /* ============================================================
   BOTÓN VOLVER
   ============================================================ */

    .admin-detail-page .admin-back-button {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        width: 48px !important;
        height: 48px !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(--detail-border) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 14px rgba(16, 24, 40, 0.07) !important;
        cursor: pointer !important;
    }


        .admin-detail-page .admin-back-button svg {
            width: 36px !important;
            height: 36px !important;
            fill: none !important;
            stroke: var(--detail-brand-900) !important;
            stroke-width: 2.5 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }


    /* ============================================================
   RECHAZAR CASO
   ============================================================ */

    .admin-detail-page .reject-case-button {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        min-width: 168px !important;
        height: 44px !important;
        padding: 0 18px !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 750 !important;
    }


        .admin-detail-page .reject-case-button:not(:disabled) {
            background: var(--detail-danger) !important;
            border: 1px solid var(--detail-danger) !important;
            color: #ffffff !important;
            box-shadow: 0 6px 16px rgba(220, 0, 0, 0.17) !important;
        }


        .admin-detail-page .reject-case-button:disabled {
            background: #ffffff !important;
            border: 1px solid #c8cdd4 !important;
            color: #a1a8b3 !important;
            box-shadow: none !important;
        }


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

    .admin-detail-page .admin-detail-scroll {
        width: 100% !important;
        height: calc(100dvh - 86px) !important;
        padding: 26px 18px 36px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--detail-bg) !important;
    }


    /* ============================================================
   GRID SUPERIOR

   Conservamos la distribución izquierda / derecha actual.
   ============================================================ */

    .admin-detail-page .admin-top-grid {
        width: 100% !important;
        gap: 18px !important;
    }


    /* ============================================================
   COLUMNA IZQUIERDA
   ============================================================ */

    .admin-detail-page .admin-left-column {
        background: transparent !important;
    }


    /* ============================================================
   TÍTULOS DE SECCIÓN
   ============================================================ */

    .admin-detail-page .section-title {
        min-height: 48px !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid var(--detail-border) !important;
        color: var(--detail-brand-900) !important;
        font-size: 18px !important;
        font-weight: 750 !important;
    }


    /* ============================================================
   TABLA DETALLE DEL CASO
   ============================================================ */

    .admin-detail-page .case-detail-table {
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


    /* ============================================================
   ETIQUETAS DETALLE
   ============================================================ */

    .admin-detail-page .detail-label {
        padding: 11px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        background: #f8fafc !important;
        color: #344054 !important;
        border-color: var(--detail-border) !important;
        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1.25 !important;
    }


    /* ============================================================
   VALORES DETALLE
   ============================================================ */

    .admin-detail-page .detail-value {
        padding: 11px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        background: #ffffff !important;
        color: var(--detail-text) !important;
        border-color: var(--detail-border) !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }


    .admin-detail-page .multi-value {
        align-items: flex-start !important;
        white-space: normal !important;
    }


    /* ============================================================
   DESCRIPCIÓN
   ============================================================ */

    .admin-detail-page .description-container {
        margin-top: 18px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


        .admin-detail-page .description-container .section-title {
            border-radius: 18px 18px 0 0 !important;
        }


    .admin-detail-page .description-box {
        min-height: 190px !important;
        max-height: none !important;
        padding: 16px 18px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        background: linear-gradient( 180deg, #ffffff, #fcfdff ) !important;
        border: 0 !important;
        color: #283548 !important;
        font-size: 13px !important;
        line-height: 1.58 !important;
        white-space: pre-line !important;
        overflow-wrap: anywhere !important;
    }


    /* ============================================================
   COLUMNA DERECHA
   ============================================================ */

    .admin-detail-page .admin-right-column {
        background: transparent !important;
    }


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

    .admin-detail-page .admin-form-grid {
        gap: 12px !important;
    }


    /* ============================================================
   LABELS FORM
   ============================================================ */

    .admin-detail-page .form-label {
        padding: 0 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        background: #f8fafc !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 12px 0 0 12px !important;
        color: #344054 !important;
        font-size: 13px !important;
        font-weight: 750 !important;
    }


    /* ============================================================
   INPUTS READONLY
   ============================================================ */

    .admin-detail-page .admin-readonly-input {
        height: 44px !important;
        padding: 0 13px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 0 12px 12px 0 !important;
        outline: none !important;
        color: var(--detail-text) !important;
        font-size: 13px !important;
    }


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

    .admin-detail-page .admin-select-box {
        position: relative !important;
        height: 44px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 0 12px 12px 0 !important;
    }


        .admin-detail-page .admin-select-box select {
            width: 100% !important;
            height: 100% !important;
            padding: 0 52px 0 13px !important;
            box-sizing: border-box !important;
            border: 0 !important;
            outline: none !important;
            background: #ffffff !important;
            color: var(--detail-text) !important;
            font-size: 13px !important;
            appearance: none !important;
            -webkit-appearance: none !important;
        }


    .admin-detail-page .admin-select-arrow {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 48px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--detail-cyan) !important;
        color: var(--detail-brand-900) !important;
        border-radius: 0 11px 11px 0 !important;
        pointer-events: none !important;
    }


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

    .admin-detail-page .department-button-row {
        margin-top: 20px !important;
        gap: 0 !important;
    }


        .admin-detail-page .department-button-row .form-label {
            min-height: 44px !important;
        }


    /* ============================================================
   BOTÓN DEPARTAMENTOS
   ============================================================ */

    .admin-detail-page .departments-button {
        min-height: 44px !important;
        padding: 0 24px !important;
        background: linear-gradient( 135deg, #2ac8cb, #21bcc1 ) !important;
        border: 1px solid #13aeb4 !important;
        border-radius: 0 14px 14px 0 !important;
        color: var(--detail-brand-900) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 10px rgba(33, 199, 202, 0.10) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }


        .admin-detail-page .departments-button:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 7px 16px rgba(33, 199, 202, 0.18) !important;
        }


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

    .admin-detail-page .department-detail-table {
        margin-top: 18px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


    /* ============================================================
   HEADER TABLA DEPARTAMENTOS
   ============================================================ */

    .admin-detail-page .department-table-header {
        background: #f8fafc !important;
        border-bottom: 1px solid var(--detail-border) !important;
    }


        .admin-detail-page .department-table-header > div {
            padding: 13px 8px !important;
            box-sizing: border-box !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #f8fafc !important;
            color: #344054 !important;
            border-color: var(--detail-border) !important;
            font-size: 12px !important;
            font-weight: 750 !important;
            line-height: 1.25 !important;
            text-align: center !important;
        }


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

    .admin-detail-page .department-table-body {
        background: #ffffff !important;
    }


    /* ============================================================
   FILAS DERIVACIONES
   ============================================================ */

    .admin-detail-page .department-table-row {
        background: #ffffff !important;
        border-bottom: 1px solid var(--detail-border) !important;
    }


        .admin-detail-page .department-table-row:last-child {
            border-bottom: 0 !important;
        }


        .admin-detail-page .department-table-row:hover {
            background: #fbfdff !important;
        }


        .admin-detail-page .department-table-row > div {
            padding: 10px 8px !important;
            box-sizing: border-box !important;
            color: #344054 !important;
            border-color: var(--detail-border) !important;
            font-size: 12px !important;
            line-height: 1.35 !important;
        }


    /* ============================================================
   SIN DERIVACIONES
   ============================================================ */

    .admin-detail-page .no-derivations {
        min-height: 190px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        color: #667085 !important;
        font-size: 13px !important;
    }


    /* ============================================================
   ACCIÓN DERIVACIÓN
   ============================================================ */

    .admin-detail-page .department-row-action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


        .admin-detail-page .department-row-action button {
            width: 36px !important;
            height: 36px !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: var(--detail-cyan-soft) !important;
            border: 1px solid #b9ebed !important;
            border-radius: 10px !important;
            cursor: pointer !important;
        }


        .admin-detail-page .department-row-action svg {
            width: 23px !important;
            height: 23px !important;
            fill: none !important;
            stroke: var(--detail-brand-800) !important;
            stroke-width: 2px !important;
        }


    /* ============================================================
   ZONA HISTORIAL / SOLUCIÓN
   ============================================================ */

    .admin-detail-page .admin-middle-grid {
        margin-top: 20px !important;
        gap: 18px !important;
    }


    /* ============================================================
   HISTORIAL
   ============================================================ */

    .admin-detail-page .history-column {
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


    .admin-detail-page .history-body {
        background: #ffffff !important;
        min-height: 220px !important;
    }


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

    .admin-detail-page .solution-column {
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


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

    .admin-detail-page .solution-textarea {
        width: calc(100% - 28px) !important;
        min-height: 210px !important;
        margin: 14px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        resize: vertical !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border-strong) !important;
        border-radius: 14px !important;
        outline: none !important;
        color: var(--detail-text) !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


        .admin-detail-page .solution-textarea:focus {
            border-color: var(--detail-cyan) !important;
            box-shadow: 0 0 0 3px rgba(33, 199, 202, 0.12) !important;
        }


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

    .admin-detail-page .solution-button-container,
    .admin-detail-page .upload-button-container {
        padding: 0 14px 14px !important;
        box-sizing: border-box !important;
    }


    .admin-detail-page .solution-button {
        min-width: 150px !important;
        height: 42px !important;
        padding: 0 18px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }


        .admin-detail-page .solution-button:disabled {
            background: #eef1f5 !important;
            border: 1px solid #d4d9e1 !important;
            color: #a1a8b3 !important;
        }


    /* ============================================================
   SUBIR DOCUMENTO
   ============================================================ */

    .admin-detail-page .upload-document-button {
        min-width: 175px !important;
        height: 42px !important;
        padding: 0 20px !important;
        background: var(--detail-cyan) !important;
        border: 1px solid var(--detail-cyan-dark) !important;
        border-radius: 12px !important;
        color: var(--detail-brand-900) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        box-shadow: 0 5px 13px rgba(33, 199, 202, 0.15) !important;
    }


    /* ============================================================
   SECCIÓN ARCHIVOS
   ============================================================ */

    .admin-detail-page .admin-files-section {
        margin-top: 20px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


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

    .admin-detail-page .files-title-bar {
        min-height: 50px !important;
        padding: 0 12px !important;
        display: grid !important;
        grid-template-columns: 50px 1fr 50px !important;
        align-items: center !important;
        background: #f8fafc !important;
        border-bottom: 1px solid var(--detail-border) !important;
        color: var(--detail-brand-900) !important;
        font-size: 17px !important;
        font-weight: 750 !important;
        text-align: center !important;
    }


    /* ============================================================
   REFRESH ARCHIVOS
   ============================================================ */

    .admin-detail-page .files-refresh {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 11px !important;
        color: var(--detail-brand-900) !important;
        font-size: 27px !important;
        cursor: pointer !important;
    }


    /* ============================================================
   CARPETA
   ============================================================ */

    .admin-detail-page .folder-icon {
        color: var(--detail-brand-900) !important;
        font-size: 22px !important;
    }


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

    .admin-detail-page .files-body {
        min-height: 250px !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        gap: 14px !important;
        background: #ffffff !important;
    }


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

    .admin-detail-page .admin-file-card {
        width: 270px !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 15px !important;
        color: var(--detail-text) !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: 0 4px 13px rgba(16, 24, 40, 0.05) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }


        .admin-detail-page .admin-file-card:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 10px 22px rgba(16, 24, 40, 0.10) !important;
        }


    /* ============================================================
   PREVIEW ARCHIVO
   ============================================================ */

    .admin-detail-page .admin-file-preview {
        width: 100% !important;
        height: 170px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #f8fafc !important;
        border-bottom: 1px solid var(--detail-border) !important;
    }


        .admin-detail-page .admin-file-preview img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
        }


    /* ============================================================
   NOMBRE ARCHIVO
   ============================================================ */

    .admin-detail-page .admin-file-name {
        padding: 10px 12px 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        color: var(--detail-text) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }


    /* ============================================================
   TAMAÑO
   ============================================================ */

    .admin-detail-page .admin-file-size {
        padding: 0 12px 10px !important;
        color: var(--detail-muted) !important;
        font-size: 11px !important;
    }


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

    .admin-detail-page .files-status {
        width: 100% !important;
        min-height: 160px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #667085 !important;
        font-size: 13px !important;
    }


    /* ============================================================
   DOCUMENTOS NO IMAGEN
   ============================================================ */

    .admin-detail-page .document-preview-icon {
        width: 90px !important;
        height: 110px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #eef2ff !important;
        border: 1px solid #d7ddf8 !important;
        border-radius: 14px !important;
    }


    .admin-detail-page .document-preview-type {
        color: var(--detail-brand-700) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
    }


    /* ============================================================
   MAPAS
   ============================================================ */

    .admin-detail-page .maps-grid {
        margin-top: 20px !important;
        gap: 18px !important;
    }


    .admin-detail-page .map-panel {
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--detail-shadow) !important;
    }


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

    .admin-detail-page .map-body {
        min-height: 390px !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }


        .admin-detail-page .map-body iframe,
        .admin-detail-page .map-body > div {
            border-radius: 0 0 18px 18px !important;
        }


    .admin-detail-page .map-empty {
        width: 100% !important;
        height: 100% !important;
        min-height: 390px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #667085 !important;
        font-size: 13px !important;
    }


    /* ============================================================
   VISOR GRANDE DE ARCHIVOS
   ============================================================ */

    .admin-detail-page .file-preview-overlay {
        background: rgba(15, 23, 42, 0.72) !important;
        backdrop-filter: blur(5px) !important;
    }


    .admin-detail-page .file-preview-window {
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.40) !important;
        border-radius: 18px !important;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.30) !important;
    }


    .admin-detail-page .file-preview-header {
        background: var(--detail-brand-900) !important;
        border: 0 !important;
        color: #ffffff !important;
    }


    .admin-detail-page .file-preview-title {
        color: #ffffff !important;
        font-weight: 700 !important;
    }


    .admin-detail-page .file-preview-open,
    .admin-detail-page .file-preview-close {
        color: #ffffff !important;
    }


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

   Conservamos completamente los controles y su lógica.
   ============================================================ */

    .admin-detail-page .departments-selector-overlay {
        background: rgba(15, 23, 42, 0.48) !important;
        backdrop-filter: blur(5px) !important;
    }


    .admin-detail-page .departments-selector-window {
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 20px !important;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.20) !important;
    }


    .admin-detail-page .departments-selector-header {
        background: #ffffff !important;
        border-bottom: 1px solid var(--detail-border) !important;
        color: var(--detail-brand-900) !important;
        font-weight: 750 !important;
    }


    .admin-detail-page .departments-selector-body {
        background: #ffffff !important;
    }


    .admin-detail-page .department-option {
        border-radius: 10px !important;
        transition: background-color 0.15s ease !important;
    }


        .admin-detail-page .department-option:hover {
            background: #f8fafc !important;
        }


        .admin-detail-page .department-option.selected {
            background: #f0fbfc !important;
        }


    .admin-detail-page .department-request-type,
    .admin-detail-page .department-comment-input {
        border: 1px solid var(--detail-border-strong) !important;
        border-radius: 9px !important;
        color: var(--detail-text) !important;
    }


    /* ============================================================
   BOTÓN DERIVAR
   ============================================================ */

    .admin-detail-page .departments-derive-button {
        background: linear-gradient( 135deg, var(--detail-brand-700), #4356c2 ) !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        box-shadow: 0 6px 15px rgba(49, 67, 170, 0.20) !important;
    }


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

    .admin-detail-page .reject-modal-overlay {
        background: rgba(244, 247, 251, 0.92) !important;
        backdrop-filter: blur(4px) !important;
    }


    .admin-detail-page .reject-modal-panel {
        overflow: visible !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 20px !important;
        box-shadow: var(--detail-shadow-large) !important;
    }


    .admin-detail-page .reject-modal-title {
        color: var(--detail-brand-900) !important;
        font-weight: 700 !important;
    }


    .admin-detail-page .reject-option {
        color: var(--detail-text) !important;
    }


    /* ============================================================
   MODAL SUBIR DOCUMENTO
   ============================================================ */

    .admin-detail-page .upload-modal-overlay {
        background: rgba(244, 247, 251, 0.92) !important;
        backdrop-filter: blur(5px) !important;
    }


    .admin-detail-page .upload-modal-window {
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 20px !important;
        box-shadow: var(--detail-shadow-large) !important;
    }


    .admin-detail-page .upload-modal-title {
        color: var(--detail-brand-900) !important;
    }


    .admin-detail-page .upload-file-zone {
        background: #f8fbff !important;
        border: 2px dashed #bfd8e9 !important;
        border-radius: 15px !important;
    }


    .admin-detail-page .upload-file-picker {
        border: 1px solid var(--detail-cyan) !important;
        border-radius: 11px !important;
        color: #08676c !important;
    }


    .admin-detail-page .upload-confirm-button {
        background: linear-gradient( 135deg, #2bc8cc, #19afb6 ) !important;
        border: 1px solid #13a5ab !important;
        border-radius: 12px !important;
        color: #ffffff !important;
    }


    /* ============================================================
   LOADING
   ============================================================ */

    .admin-detail-page .admin-loading {
        min-height: 300px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid var(--detail-border) !important;
        border-radius: 18px !important;
        color: #667085 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }


    .admin-detail-page .admin-error {
        color: #b42318 !important;
        background: #fff5f5 !important;
    }


    /* ============================================================
   SCROLLBAR
   ============================================================ */

    .admin-detail-page .admin-detail-scroll::-webkit-scrollbar,
    .admin-detail-page .description-box::-webkit-scrollbar,
    .admin-detail-page .department-table-body::-webkit-scrollbar {
        width: 10px !important;
    }


    .admin-detail-page .admin-detail-scroll::-webkit-scrollbar-track,
    .admin-detail-page .description-box::-webkit-scrollbar-track,
    .admin-detail-page .department-table-body::-webkit-scrollbar-track {
        background: transparent !important;
    }


    .admin-detail-page .admin-detail-scroll::-webkit-scrollbar-thumb,
    .admin-detail-page .description-box::-webkit-scrollbar-thumb,
    .admin-detail-page .department-table-body::-webkit-scrollbar-thumb {
        background: #b4bdca !important;
        border: 2px solid transparent !important;
        background-clip: padding-box !important;
        border-radius: 999px !important;
    }


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

@media (max-width: 1250px) {

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


        .admin-detail-page .admin-detail-shell {
            min-width: 1180px !important;
        }
}


/* Estilos del visor que estaban únicamente en el CSS aislado antiguo.
   Se mantienen para no perder la visualización de fotos/PDF/documentos. */
.admin-detail-page .pdf-icon {
    color: var(--detail-brand-900);
}

.admin-detail-page .file-preview-content {
    position: relative;
    width: 100%;
    height: calc(100% - 58px);
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #111111;
}

.admin-detail-page .file-preview-large-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.admin-detail-page .file-preview-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #ffffff;
}