/* ============================================================
   SOLICITUDES ENLACE
   ESTILO HOMOLOGADO CON ADMINISTRADOR

   SOLO ESTÉTICA.
   NO MODIFICA FUNCIONALIDAD.
   ============================================================ */


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

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


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

html body .enlace-page {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: var(--enlace-bg) !important;
    color: var(--enlace-text) !important;
    font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif !important;
    overflow: hidden !important;
}


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

    html body .enlace-page .enlace-shell {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        background: var(--enlace-bg) !important;
        border: 1px solid var(--enlace-border) !important;
        border-radius: 28px !important;
        box-shadow: var(--enlace-shadow) !important;
        overflow: hidden !important;
    }


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

        html body .enlace-page .enlace-shell .enlace-header {
            position: relative !important;
            width: 100% !important;
            height: 60px !important;
            flex: 0 0 60px !important;
            background: #ffffff !important;
            border: 0 !important;
            border-bottom: 1px solid var(--enlace-border) !important;
            box-shadow: none !important;
        }


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

            html body .enlace-page .enlace-shell .enlace-header .enlace-title {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 5px !important;
                margin: 0 !important;
                color: var(--enlace-navy) !important;
                font-size: 18px !important;
                font-weight: 700 !important;
                line-height: 1 !important;
                white-space: nowrap !important;
            }


    html body .enlace-page .enlace-title span {
        color: var(--enlace-navy) !important;
        font-weight: 600 !important;
    }


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

    html body .enlace-page .enlace-header .enlace-header-icon {
        position: absolute !important;
        top: 50% !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !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(--enlace-border) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 14px rgba(16, 24, 40, 0.07) !important;
        text-decoration: none !important;
    }


    html body .enlace-page .enlace-header .enlace-back {
        left: 12px !important;
    }


    html body .enlace-page .enlace-header .enlace-home {
        right: 12px !important;
    }


    html body .enlace-page .enlace-header-icon svg {
        width: 34px !important;
        height: 34px !important;
        fill: none !important;
        stroke: var(--enlace-navy) !important;
        stroke-width: 2.5 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


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

    html body .enlace-page .enlace-shell .enlace-controls {
        position: relative !important;
        width: 100% !important;
        height: 140px !important;
        flex: 0 0 140px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: var(--enlace-bg) !important;
        border: 0 !important;
    }


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

    html body .enlace-page .enlace-controls .enlace-refresh {
        position: absolute !important;
        left: 55px !important;
        top: 30px !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid var(--enlace-border) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06) !important;
        cursor: pointer !important;
    }


    html body .enlace-page .enlace-refresh svg {
        width: 39px !important;
        height: 39px !important;
        fill: none !important;
        stroke: #557395 !important;
        stroke-width: 2.2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


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

    html body .enlace-page .enlace-controls .enlace-dates {
        position: absolute !important;
        left: 160px !important;
        top: 24px !important;
        width: 330px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        margin: 0 !important;
    }


    html body .enlace-page .enlace-dates .enlace-date-row {
        width: 100% !important;
        height: 38px !important;
        display: grid !important;
        grid-template-columns: 62px 220px !important;
        gap: 10px !important;
        align-items: center !important;
        margin: 0 !important;
    }


    html body .enlace-page .enlace-date-row label {
        margin: 0 !important;
        padding: 0 !important;
        color: #344054 !important;
        background: transparent !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }


    html body .enlace-page .enlace-date-row input {
        width: 220px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--enlace-border-strong) !important;
        border-radius: 12px !important;
        outline: none !important;
        color: var(--enlace-text) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }


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

    html body .enlace-page .enlace-controls .enlace-id-search {
        position: absolute !important;
        left: 500px !important;
        top: 39px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 13px !important;
        margin: 0 !important;
    }


    html body .enlace-page .enlace-id-search > input[type="text"] {
        width: 270px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--enlace-border-strong) !important;
        border-radius: 12px !important;
        outline: none !important;
        color: var(--enlace-text) !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }


        html body .enlace-page .enlace-id-search > input[type="text"]::placeholder {
            color: #98a2b3 !important;
        }


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

    html body .enlace-page .enlace-id-search .enlace-checkbox {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: #344054 !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
    }


    html body .enlace-page .enlace-checkbox input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #8a9aba !important;
        border-radius: 4px !important;
        background: #ffffff !important;
        accent-color: var(--enlace-blue) !important;
    }


    html body .enlace-page .enlace-checkbox span {
        color: #344054 !important;
    }


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

    html body .enlace-page .enlace-controls .enlace-state-area {
        position: absolute !important;
        right: 54px !important;
        top: 38px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 0 !important;
    }


    html body .enlace-page .enlace-state-area .enlace-state-wrapper {
        position: relative !important;
        width: 275px !important;
        height: 40px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }


    html body .enlace-page .enlace-state-wrapper select {
        width: 100% !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 52px 0 13px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--enlace-border-strong) !important;
        border-radius: 12px !important;
        outline: none !important;
        color: var(--enlace-text) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }


    html body .enlace-page .enlace-state-wrapper .enlace-state-arrow {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 46px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient( 135deg, var(--enlace-cyan), var(--enlace-cyan-dark) ) !important;
        border: 0 !important;
        border-radius: 0 12px 12px 0 !important;
        pointer-events: none !important;
    }


    html body .enlace-page .enlace-state-arrow svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: #ffffff !important;
        stroke-width: 2.6 !important;
    }


    /* ============================================================
   LIMPIAR
   ============================================================ */

    html body .enlace-page .enlace-state-area .enlace-clear {
        position: relative !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }


    html body .enlace-page .enlace-clear svg {
        width: 42px !important;
        height: 42px !important;
    }


    html body .enlace-page .enlace-clear .clear-box {
        fill: none !important;
        stroke: #8794aa !important;
        stroke-width: 2 !important;
    }


    html body .enlace-page .enlace-clear .clear-x {
        fill: none !important;
        stroke: #ef2b2d !important;
        stroke-width: 3 !important;
        stroke-linecap: round !important;
    }


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

    html body .enlace-page .enlace-shell .enlace-table {
        position: relative !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: calc(100% - 36px) !important;
        height: auto !important;
        margin: 0 18px 14px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid var(--enlace-border) !important;
        border-radius: 24px !important;
        box-shadow: var(--enlace-shadow) !important;
        overflow: hidden !important;
    }


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

    html body .enlace-page .enlace-table .enlace-table-header {
        position: relative !important;
        width: 100% !important;
        height: 52px !important;
        flex: 0 0 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 7% 11% 10% 10% 34% 11% 12% 5% !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        border: 0 !important;
        border-bottom: 1px solid var(--enlace-border) !important;
        box-shadow: none !important;
    }


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

    html body .enlace-page .enlace-table-header > div {
        min-width: 0 !important;
        width: auto !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: #f8fafc !important;
        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        color: #475467 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        letter-spacing: 0.025em !important;
        white-space: normal !important;
        box-shadow: none !important;
    }


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

    html body .enlace-page .enlace-table .enlace-table-body {
        position: relative !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: #a7b4ca #eef2f7 !important;
    }


    html body .enlace-page .enlace-table-body::-webkit-scrollbar {
        width: 10px !important;
    }


    html body .enlace-page .enlace-table-body::-webkit-scrollbar-track {
        background: #eef2f7 !important;
    }


    html body .enlace-page .enlace-table-body::-webkit-scrollbar-thumb {
        background: #a7b4ca !important;
        border-radius: 999px !important;
        border: 2px solid #eef2f7 !important;
    }


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

    html body .enlace-page .enlace-table-body .enlace-row {
        position: relative !important;
        width: 100% !important;
        min-height: 156px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 7% 11% 10% 10% 34% 11% 12% 5% !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 0 !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--enlace-border) !important;
        box-shadow: none !important;
    }


        html body .enlace-page .enlace-table-body .enlace-row:last-child {
            border-bottom: 0 !important;
        }


        html body .enlace-page .enlace-table-body .enlace-row:hover {
            background: #fbfdff !important;
        }


        /* ============================================================
   TODAS LAS CELDAS
   ============================================================ */

        html body .enlace-page .enlace-table-body .enlace-row > div {
            position: relative !important;
            min-width: 0 !important;
            width: auto !important;
            min-height: 156px !important;
            height: auto !important;
            margin: 0 !important;
            padding: 18px 10px !important;
            box-sizing: border-box !important;
            background: transparent !important;
            border: 0 !important;
            border-top: 0 !important;
            border-right: 0 !important;
            border-bottom: 0 !important;
            border-left: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
            color: var(--enlace-text-medium) !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            line-height: 1.45 !important;
            text-align: left !important;
            overflow-wrap: anywhere !important;
            word-break: normal !important;
        }


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

            html body
            .enlace-page
            .enlace-table-body
            .enlace-row > div:nth-child(1) {
                min-width: 0 !important;
                min-height: 156px !important;
                margin: 0 !important;
                padding: 18px 8px !important;
                display: flex !important;
                align-items: flex-start !important;
                justify-content: flex-start !important;
                background: transparent !important;
                border: 0 !important;
                color: var(--enlace-blue) !important;
                font-size: 14px !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
                overflow: visible !important;
            }


            /* cápsula usando el propio contenido disponible */

            html body
            .enlace-page
            .enlace-table-body
            .enlace-row > div:nth-child(1) {
                padding-top: 20px !important;
            }


                /*
   Quitamos específicamente cualquier borde negro antiguo
   aplicado al primer campo.
*/

                html body
                .enlace-page
                .enlace-table-body
                .enlace-row > div:nth-child(1)::before,
                html body
                .enlace-page
                .enlace-table-body
                .enlace-row > div:nth-child(1)::after {
                    display: none !important;
                }


            /* ============================================================
   FECHA DERIVACIÓN
   ============================================================ */

            html body
            .enlace-page
            .enlace-table-body
            .enlace-row > div:nth-child(2) {
                color: #344054 !important;
                font-weight: 500 !important;
                white-space: nowrap !important;
            }


            /* ============================================================
   DEPARTAMENTO
   ============================================================ */

            html body
            .enlace-page
            .enlace-table-body
            .enlace-row > div:nth-child(3) {
                color: #344054 !important;
                font-weight: 600 !important;
                white-space: nowrap !important;
            }


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

            html body
            .enlace-page
            .enlace-table-body
            .enlace-row > div:nth-child(4) {
                min-width: 0 !important;
                min-height: 156px !important;
                margin: 0 !important;
                padding: 18px 8px !important;
                display: flex !important;
                align-items: flex-start !important;
                justify-content: flex-start !important;
                background: transparent !important;
                border: 0 !important;
                color: var(--enlace-blue-text) !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }


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

            html body
            .enlace-page
            .enlace-table-body
            .enlace-row > div:nth-child(5) {
                padding: 18px 14px !important;
                color: #475467 !important;
                font-size: 14px !important;
                line-height: 1.45 !important;
                white-space: pre-line !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                scrollbar-width: thin !important;
                scrollbar-color: #d1d8e3 transparent !important;
            }


    html body
    .enlace-page
    .enlace-row > div:nth-child(5)::-webkit-scrollbar {
        width: 5px !important;
    }


    html body
    .enlace-page
    .enlace-row > div:nth-child(5)::-webkit-scrollbar-thumb {
        background: #d1d8e3 !important;
        border-radius: 999px !important;
    }


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

    html body
    .enlace-page
    .enlace-table-body
    .enlace-row > div:nth-child(6) {
        min-height: 156px !important;
        margin: 0 !important;
        padding: 18px 8px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--enlace-green-text) !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }


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

    html body
    .enlace-page
    .enlace-table-body
    .enlace-row > div:nth-child(7) {
        padding: 18px 10px !important;
        background: transparent !important;
        color: #667085 !important;
        line-height: 1.45 !important;
        white-space: pre-line !important;
        overflow-y: auto !important;
        border: 0 !important;
    }


    /* ============================================================
   COLUMNA ACCIÓN
   ============================================================ */

    html body
    .enlace-page
    .enlace-table-body
    .enlace-row > div:nth-child(8) {
        min-height: 156px !important;
        margin: 0 !important;
        padding: 10px 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    /* ============================================================
   BOTÓN DETALLE
   ============================================================ */

    html body
    .enlace-page
    .enlace-table-body
    .enlace-row
    button {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--enlace-blue) !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 17px !important;
        box-shadow: 0 7px 16px rgba(49, 67, 170, 0.20) !important;
        cursor: pointer !important;
        transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
    }


        html body
        .enlace-page
        .enlace-table-body
        .enlace-row
        button:hover {
            background: var(--enlace-blue-hover) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 10px 20px rgba(49, 67, 170, 0.26) !important;
        }


        /* ============================================================
   ICONO BOTÓN
   ============================================================ */

        html body
        .enlace-page
        .enlace-table-body
        .enlace-row
        button svg {
            width: 29px !important;
            height: 29px !important;
            fill: none !important;
            stroke: #ffffff !important;
            stroke-width: 2.6 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }


            html body
            .enlace-page
            .enlace-table-body
            .enlace-row
            button svg path {
                fill: none !important;
                stroke: #ffffff !important;
            }


        html body
        .enlace-page
        .enlace-table-body
        .enlace-row
        button img {
            width: 29px !important;
            height: 29px !important;
            object-fit: contain !important;
            filter: brightness(0) invert(1) !important;
        }


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

    html body .enlace-page .enlace-message {
        width: 100% !important;
        min-height: 180px !important;
        padding: 30px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        color: #667085 !important;
        border: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }


    html body .enlace-page .enlace-error {
        background: #fff5f5 !important;
        color: #b42318 !important;
    }


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

    html body .enlace-page input:focus,
    html body .enlace-page select:focus {
        border-color: #91a5d1 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(49, 67, 170, 0.07) !important;
    }


    /* ============================================================
   DESHABILITADOS
   ============================================================ */

    html body .enlace-page button:disabled,
    html body .enlace-page input:disabled,
    html body .enlace-page select:disabled {
        opacity: .55 !important;
        cursor: not-allowed !important;
    }


    /* ============================================================
   ELIMINAR DECORACIONES ANTIGUAS
   ============================================================ */

    html body .enlace-page .enlace-row,
    html body .enlace-page .enlace-row > div,
    html body .enlace-page .enlace-table-header,
    html body .enlace-page .enlace-table-header > div {
        outline: none !important;
        box-shadow: none !important;
    }


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

@media (max-width: 1450px) {

    html body .enlace-page {
        min-width: 1180px !important;
    }


        html body .enlace-page .enlace-dates {
            left: 130px !important;
        }


        html body .enlace-page .enlace-id-search {
            left: 440px !important;
        }


            html body
            .enlace-page
            .enlace-id-search > input[type="text"] {
                width: 225px !important;
            }


        html body .enlace-page .enlace-state-area {
            right: 30px !important;
        }


            html body
            .enlace-page
            .enlace-state-area
            .enlace-state-wrapper {
                width: 225px !important;
            }
}