/* DataTables Responsive Custom Styles */
/* Solución para evitar superposición de elementos before con texto de primera columna */

/* Aumentar el padding-left para dar más espacio al botón de expandir/colapsar */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
    position: relative;
    padding-left: 45px !important; /* Aumentado de 30px a 45px */
    cursor: pointer;
}

/* Ajustar posición del botón de expandir/colapsar */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 50% !important; /* Centrar verticalmente */
    left: 8px !important; /* Más espacio desde el borde */
    height: 18px !important; /* Ligeramente más grande */
    width: 18px !important; /* Ligeramente más grande */
    margin-top: -9px !important; /* Para centrar con el nuevo height */
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 18px; /* Ajustado al nuevo tamaño */
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center; /* Centrar el contenido */
    font-family: 'Courier New', Courier, monospace;
    line-height: 18px; /* Ajustado al nuevo height */
    content: '+';
    background-color: #2196F3; /* Azul en lugar de verde #31b131 */
    font-size: 14px; /* Tamaño de fuente más apropiado */
    font-weight: bold;
    text-indent: 0px !important;
}

/* Estado expandido (parent) - cambiar a azul más oscuro */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    content: '-';
    background-color: #1976D2; /* Azul más oscuro en lugar de rojo #d33333 */
}

/* Versión compacta - ajustar también */
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
    padding-left: 40px !important; /* Aumentado de 27px a 40px */
}

table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
    top: 50% !important;
    left: 8px !important;
    height: 16px !important;
    width: 16px !important;
    margin-top: -8px !important;
    border-radius: 16px;
    line-height: 16px;
    background-color: #2196F3; /* Azul */
    font-size: 12px;
}

/* Para el modo columna (dtr-column) también aplicar los cambios de color */
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
    top: 50%;
    left: 50%;
    height: 18px !important;
    width: 18px !important;
    margin-top: -9px !important;
    margin-left: -9px !important;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 18px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    line-height: 18px;
    content: '+';
    background-color: #2196F3; /* Azul */
    font-size: 14px;
    font-weight: bold;
}

table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
    content: '-';
    background-color: #1976D2; /* Azul más oscuro */
}

/* Mejorar el espaciado en dispositivos móviles */
@media screen and (max-width: 767px) {
    table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
        padding-left: 50px !important; /* Más espacio en móviles */
    }
    
    table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
        left: 10px !important; /* Más espacio desde el borde en móviles */
    }
}

/* Asegurar que el texto no se superponga */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child > *,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Mejorar la apariencia de las filas expandidas */
table.dataTable > tbody > tr.child {
    padding: 0.75em 1em;
    background-color: #f8f9fa !important; /* Fondo ligeramente gris */
}

table.dataTable > tbody > tr.child ul li {
    border-bottom: 1px solid #e9ecef;
    padding: 0.6em 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    display: inline-block;
    min-width: 100px;
    font-weight: bold;
    color: #495057;
}

/* Hover effects para mejor UX */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:hover:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:hover:before {
    background-color: #1976D2 !important; /* Azul más oscuro al hacer hover */
    transform: scale(1.1);
    transition: all 0.2s ease;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:hover:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:hover:before {
    background-color: #0D47A1 !important; /* Azul aún más oscuro para el estado expandido */
}