/* ============================================================
   MMWebADMSol
   ALINEACION DETALLE ADMINISTRADOR

   Ajustes:
   - Alinear tabla de departamentos con Detalle del Caso
   - Igualar ancho de Nombre Departamento y su boton
   - Mantener descripcion en ancho completo
   - Mantener historial y solucion alineados
   - Conservar distribucion responsive
   ============================================================ */


/* ============================================================
   1. DISTRIBUCION PRINCIPAL
   ============================================================ */

@media (min-width: 901px) {

    .admin-detail-page .admin-top-grid {
        display: grid !important;
        grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) !important;
        grid-template-rows: 48px auto auto !important;
        column-gap: 16px !important;
        row-gap: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }
}


/* Permite distribuir los elementos de la izquierda
   dentro del grid principal */

.admin-detail-page .admin-left-column {
    display: contents !important;
}


    /* ============================================================
   2. TITULO DETALLE DEL CASO
   ============================================================ */

    .admin-detail-page
    .admin-left-column > .section-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid #d9e2f0 !important;
        border-bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }


/* ============================================================
   3. INFORMACION DETALLE DEL CASO
   ============================================================ */

.admin-detail-page .case-detail-table {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(135px, 40%) minmax(0, 60%) !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: start !important;
    border-radius: 0 0 16px 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


    /* Mantener filas uniformes */

    .admin-detail-page
    .case-detail-table .detail-label,
    .admin-detail-page
    .case-detail-table .detail-value {
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        border-bottom: 1px solid #d9e2f0 !important;
        box-sizing: border-box !important;
    }


/* ============================================================
   4. COLUMNA DERECHA
   ALINEAR CON DETALLE DEL CASO
   ============================================================ */

@media (min-width: 901px) {

    .admin-detail-page .admin-right-column {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   5. FORMULARIO SUPERIOR
   ============================================================ */

.admin-detail-page .admin-form-grid {
    display: grid !important;
    grid-template-columns: minmax(110px, 22%) minmax(0, 1fr) minmax(125px, 23%) minmax(0, 1fr) !important;
    grid-auto-rows: 44px !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}


    /* Altura uniforme de los controles */

    .admin-detail-page
    .admin-form-grid > .form-label,
    .admin-detail-page
    .admin-form-grid > .admin-readonly-input,
    .admin-detail-page
    .admin-form-grid > .admin-select-box {
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }


    /* Selector Tipo Solicitud */

    .admin-detail-page
    .admin-form-grid .admin-select-box select {
        width: 100% !important;
        height: 100% !important;
    }


/* ============================================================
   6. NOMBRE DEPARTAMENTO / BOTON DEPARTAMENTOS

   Cada elemento ocupa el 22% del ancho de
   la columna derecha.

   Coincide con la etiqueta Fecha Derivacion.
   ============================================================ */

@media (min-width: 901px) {

    .admin-detail-page .department-button-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        width: 44% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin-top: 12px !important;
        padding: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: stretch !important;
        flex: 0 0 44px !important;
        box-sizing: border-box !important;
    }
}


/* Label Nombre Departamento */

.admin-detail-page
.department-button-row .form-label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #d9e2f0 !important;
    border-radius: 12px 0 0 12px !important;
    background: #f8fafc !important;
    color: #101653 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}


/* Boton DEPARTAMENTOS */

.admin-detail-page
.department-button-row .departments-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #13aeb4 !important;
    border-radius: 0 12px 12px 0 !important;
    background: #21c7ca !important;
    color: #101653 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}


    /* Efecto hover */

    .admin-detail-page
    .department-button-row .departments-button:hover {
        background: #16b6bc !important;
    }


/* ============================================================
   7. TABLA DE DEPARTAMENTOS

   Se estira para coincidir con el borde inferior
   de Detalle del Caso.

   Si hay muchos registros, conserva scroll interno.
   ============================================================ */

@media (min-width: 901px) {

    .admin-detail-page .department-detail-table {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* Encabezado de departamentos */

    .admin-detail-page .department-table-header {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
    }


    /* Cuerpo de la tabla */

    .admin-detail-page .department-table-body {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }


    /* Mensaje cuando no existen departamentos */

    .admin-detail-page .no-derivations {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 16px !important;
        color: #667085 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   8. DESCRIPCION A TODO EL ANCHO
   ============================================================ */

.admin-detail-page .description-container {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 0 0 !important;
    border: 1px solid #d9e2f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


    /* Titulo */

    .admin-detail-page
    .description-container .section-title {
        width: 100% !important;
        min-height: 48px !important;
        border-bottom: 1px solid #d9e2f0 !important;
        border-radius: 18px 18px 0 0 !important;
    }


/* Texto de descripcion */

.admin-detail-page .description-box {
    display: block !important;
    width: 100% !important;
    min-height: 145px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    color: #334155 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    line-height: 1.55 !important;
    box-sizing: border-box !important;
}


/* ============================================================
   9. HISTORIAL / SOLUCION OIRS
   ============================================================ */

.admin-detail-page .admin-middle-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: 18px !important;
}


/* Contenedores alineados */

.admin-detail-page .history-column,
.admin-detail-page .solution-column {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 330px !important;
    align-self: stretch !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


    /* Encabezados */

    .admin-detail-page
    .history-column > .section-title,
    .admin-detail-page
    .solution-column > .section-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-bottom: 1px solid #d9e2f0 !important;
        box-sizing: border-box !important;
    }


/* Historial */

.admin-detail-page .history-body {
    flex: 1 1 auto !important;
    min-height: 250px !important;
    margin: 0 !important;
    padding: 14px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}


/* Solucion OIRS */

.admin-detail-page
.solution-column .solution-textarea {
    display: block !important;
    flex: 1 1 210px !important;
    width: calc(100% - 28px) !important;
    min-height: 210px !important;
    margin: 14px !important;
    box-sizing: border-box !important;
}


/* Boton de solucion */

.admin-detail-page
.solution-column .solution-button-container {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 0 14px 14px !important;
}


/* ============================================================
   10. ADAPTACION A PANTALLAS MENORES
   ============================================================ */

@media (min-width: 901px) and (max-width: 1200px) {

    .admin-detail-page .admin-top-grid,
    .admin-detail-page .admin-middle-grid {
        grid-template-columns: minmax(250px, 34%) minmax(0, 1fr) !important;
    }


    .admin-detail-page .department-button-row {
        width: 50% !important;
    }
}


/* ============================================================
   TABLET Y CELULAR
   ============================================================ */

@media (max-width: 900px) {

    .admin-detail-page .admin-top-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        row-gap: 0 !important;
    }


    .admin-detail-page
    .admin-left-column > .section-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    .admin-detail-page .case-detail-table {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    .admin-detail-page .admin-right-column {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: block !important;
        width: 100% !important;
        margin-top: 16px !important;
    }


    .admin-detail-page .admin-form-grid {
        grid-template-columns: minmax(110px, 32%) minmax(0, 1fr) !important;
        grid-auto-rows: 44px !important;
    }


    .admin-detail-page .department-button-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        width: min(560px, 100%) !important;
        height: 44px !important;
        margin-top: 16px !important;
    }


    .admin-detail-page .department-detail-table {
        display: block !important;
        width: 100% !important;
        min-height: 240px !important;
        margin-top: 16px !important;
    }


    .admin-detail-page .department-table-body {
        min-height: 200px !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }


    .admin-detail-page .description-container {
        grid-column: 1 !important;
        grid-row: 4 !important;
        margin-top: 16px !important;
    }


    .admin-detail-page .admin-middle-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ============================================================
   CELULARES
   ============================================================ */

@media (max-width: 600px) {

    .admin-detail-page .admin-detail-scroll {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .admin-detail-page .department-button-row {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }


        .admin-detail-page
        .department-button-row .departments-button {
            padding: 0 8px !important;
            font-size: 12px !important;
        }
}