/* Estilos personalizados para averías */

/* Grupos de fecha en DataTable */
tr.group,
tr.dtrg-group {
    background-color: #f0f0f0 !important; /* Gris suave */
    font-weight: bold !important;
    cursor: pointer;
}

tr.group:hover,
tr.dtrg-group:hover {
    background-color: #e5e5e5 !important; /* Gris un poco más oscuro al hover */
}

tr.group td,
tr.dtrg-group td {
    background-color: transparent !important;
    padding: 12px 10px !important; /* Reducir padding izquierdo */
    font-size: 1.05rem !important;
    color: #2c3e50 !important;
    text-align: left !important;
    font-weight: 700 !important;
    border: none !important;
    letter-spacing: 0.5px !important;
}

/* Asegurar que el texto del grupo esté pegado a la izquierda */
tr.group td.group-header,
tr.dtrg-group td {
    padding-left: 10px !important; /* Mínimo padding izquierdo */
}

/* Badges dentro de los grupos */
tr.group .badge,
tr.dtrg-group .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    margin-left: 0.5rem;
}

/* Timeline styles */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline-item {
    position: relative;
    padding-bottom: 30px;
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: -25px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item:last-child:before {
    display: none;
}

.timeline-item-last {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -32px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3498db;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 3px solid #3498db;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s;
}

.timeline-content:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.timeline-content h6 {
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 600;
}

.timeline-content p {
    margin-bottom: 8px;
    color: #555;
}

.timeline-content small {
    display: block;
    color: #999;
}

/* Estados de averías */
.badge-estado {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Bandas de color en filas */
#averiasTable tbody tr td:first-child {
    padding: 0 !important;
    width: 5px !important;
}

/* Celdas más compactas */
#averiasTable tbody tr {
    height: 35px !important;
    line-height: 1.2;
}

#averiasTable tbody td {
    padding: 4px 10px !important;
    font-size: 0.875rem;
    vertical-align: middle;
}

#averiasTable thead th {
    padding: 8px 10px !important;
    font-size: 0.9rem;
}

/* Estilos para averías anidadas */
#averiasTable tr.child-row {
    background-color: rgba(0, 123, 255, 0.05);
}

#averiasTable tr.child-row:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

#averiasTable tr.parent-row {
    font-weight: 500;
}

/* Botón expandir/colapsar - cruz roja */
#averiasTable .expand-toggle {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    vertical-align: middle;
    margin-left: 3px;
}

#averiasTable .expand-toggle:hover {
    transform: scale(1.2);
}

#averiasTable .expand-toggle:focus {
    outline: none;
    box-shadow: none;
}

#averiasTable .expand-toggle i {
    color: #dc3545 !important;
}

/* Indentación visual para filas hijas */
#averiasTable tr.child-row td:nth-child(2) {
    padding-left: 35px !important;
}

/* Línea conectora para hijos */
#averiasTable tr.child-row td:first-child {
    position: relative;
}

#averiasTable tr.child-row td:first-child::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 1px;
    background-color: #dee2e6;
}

/* Badge contador de hijos */
#averiasTable .badge.bg-info {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

/* Primera columna más ancha para acomodar botón */
#averiasTable td:first-child,
#averiasTable th:first-child {
    width: 30px !important;
    min-width: 30px !important;
}

/* Select2 en modal */
.modal .select2-container {
    width: 100% !important;
}

.modal .select2-dropdown {
    z-index: 9999;
}

/* Corregir color de texto en Select2 dentro de modales */
.modal .select2-container--bootstrap-5 .select2-selection__rendered {
    color: #212529 !important; /* Color de texto oscuro */
}

.modal .select2-container--bootstrap-5 .select2-selection {
    background-color: white !important;
    border: 1px solid #ced4da !important;
}

.modal .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #6c757d !important; /* Color gris para placeholder */
}

.modal .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: #495057 transparent transparent transparent !important;
}

/* Asegurar que el dropdown también tenga colores correctos */
.select2-dropdown {
    background-color: white !important;
}

.select2-results__option {
    color: #212529 !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd !important;
    color: white !important;
}

.select2-results__option--selected {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Botones pequeños en la tabla */
#averiasTable .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Iconos de estado */
#averiasTable td i {
    font-size: 0.9rem;
}

/* Badges de conteo */
.badge.position-absolute {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.3rem !important;
    min-width: 15px;
    height: 15px;
    line-height: 1;
}

/* Ajustar altura del contenedor de la tabla */
.dataTables_scrollBody {
    max-height: calc((var(--app-vh, 1vh) * 100) - 320px) !important;
    overflow-y: auto !important;
}

/* Límite máximo para el selector */
.navbar .select2-container {
    max-width: 400px !important;
}

/* Responsive */
@media (max-width: 768px) {
    tr.group td,
    tr.dtrg-group td {
        font-size: 0.95rem !important;
        padding: 10px 8px !important;
    }
    
    tr.group .badge,
    tr.dtrg-group .badge {
        font-size: 0.7rem;
        padding: 0.2em 0.4em;
    }
    
    #averiasTable tbody td {
        padding: 3px 5px !important;
        font-size: 0.8rem;
    }
}

/* Fix para el selector de base de datos en el navbar */
#databaseSelectorContainer {
    min-width: auto !important;
}

#databaseSelectorContainer .select2-container {
    min-width: 200px !important;
    width: auto !important;
}

#databaseSelector {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    width: auto !important;
    min-width: 200px !important;
}

.navbar .select2-container--bootstrap-5 {
    width: auto !important;
}

.navbar .select2-container--bootstrap-5 .select2-selection {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    min-height: 36px;
    min-width: 200px;
    width: auto !important;
}

.navbar .select2-container--bootstrap-5 .select2-selection__rendered {
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    white-space: nowrap;
}

.navbar .select2-container--bootstrap-5 .select2-selection__arrow {
    height: 34px;
    right: 0.5rem;
}

.navbar .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: white transparent transparent transparent;
}

.navbar .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Badge en el selector */
.navbar .select2-selection__rendered .badge {
    font-size: 0.7rem;
    padding: 0.15em 0.4em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* Dropdown del select2 - SOLO para navbar y elementos fuera de modales */
.navbar .select2-dropdown,
body > .select2-dropdown {
    background-color: #34495e;
    border-color: #2c3e50;
}

.navbar .select2-container--bootstrap-5 .select2-results__option,
body > .select2-container--bootstrap-5 .select2-results__option {
    color: white;
    background-color: #34495e;
}

.navbar .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
body > .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: #3498db !important;
    color: white !important;
}

.navbar .select2-container--bootstrap-5 .select2-results__option--selected,
body > .select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: #2c3e50;
}

.navbar .select2-search--dropdown .select2-search__field,
body > .select2-search--dropdown .select2-search__field {
    background-color: #2c3e50;
    border-color: #34495e;
    color: white;
}

.navbar .select2-search--dropdown .select2-search__field::placeholder,
body > .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================ */
/* AG-Grid Bootstrap Theme Styles */
/* ============================================ */

/* Contenedor principal del AG-Grid */
#averiasAGGridContainer {
    display: flex;
    flex-direction: column;
    height: calc((var(--app-vh, 1vh) * 100) - 200px);
    width: 100%;
    padding: 0;
    margin: 0;
}

/* El grid mismo debe ocupar todo el espacio restante */
#averiasAGGrid {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 1px solid #dee2e6;
}

/* Ajustar altura cuando está en vista de averías */
#averiasPage #averiasAGGridContainer {
    height: calc((var(--app-vh, 1vh) * 100) - 240px);
}

/* ============================================ */
/* Tema Bootstrap personalizado */
/* ============================================ */

/* Mejorar la visualización de las celdas */
.ag-theme-bootstrap .ag-cell {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
}

/* Headers con estilo Bootstrap */
.ag-theme-bootstrap .ag-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.ag-theme-bootstrap .ag-header-cell {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
}

/* Filas con hover mejorado */
.ag-theme-bootstrap .ag-row:hover {
    background-color: #e9ecef !important;
}

/* Filas seleccionadas */
.ag-theme-bootstrap .ag-row-selected {
    background-color: #cfe2ff !important;
}

/* Filas alternadas */
.ag-theme-bootstrap .ag-row-even {
    background-color: #f8f9fa;
}

.ag-theme-bootstrap .ag-row-odd {
    background-color: #ffffff;
}

/* Botones de acción más compactos */
#averiasAGGrid .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    margin: 0 0.1rem;
    border-radius: 0.2rem;
}

/* Badges en el grid con estilos Bootstrap */
#averiasAGGrid .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    font-weight: 600;
}

/* Panel de agrupación */
.ag-theme-bootstrap .ag-row-group-panel {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem;
    min-height: 50px;
}

.ag-theme-bootstrap .ag-row-group-panel-label {
    color: #6c757d;
    font-size: 0.875rem;
    margin-right: 1rem;
}

/* Pills de agrupación */
.ag-theme-bootstrap .ag-column-drop-cell {
    background-color: #0d6efd;
    color: white;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    font-size: 0.875rem;
}

.ag-theme-bootstrap .ag-column-drop-cell-button {
    color: white;
    opacity: 0.8;
}

.ag-theme-bootstrap .ag-column-drop-cell-button:hover {
    opacity: 1;
}

/* Filas de grupo */
.ag-theme-bootstrap .ag-group-expanded,
.ag-theme-bootstrap .ag-group-contracted {
    background-color: #e7f3ff;
    font-weight: 600;
    border-left: 3px solid #0d6efd;
}

/* Panel lateral */
.ag-theme-bootstrap .ag-side-bar {
    background-color: #f8f9fa;
    border-left: 1px solid #dee2e6;
}

.ag-theme-bootstrap .ag-tool-panel-wrapper {
    background-color: #ffffff;
}

/* Tabs del panel lateral */
.ag-theme-bootstrap .ag-side-button {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #495057;
}

.ag-theme-bootstrap .ag-side-button-button {
    padding: 0.5rem;
}

.ag-theme-bootstrap .ag-selected .ag-side-button {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Columnas fijas */
.ag-theme-bootstrap .ag-pinned-left-cols-container {
    border-right: 2px solid #dee2e6;
}

.ag-theme-bootstrap .ag-pinned-right-cols-container {
    border-left: 2px solid #dee2e6;
}

/* Paginación */
.ag-theme-bootstrap .ag-paging-panel {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.5rem;
    font-size: 0.875rem;
}

.ag-theme-bootstrap .ag-paging-button {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #ffffff;
    margin: 0 0.25rem;
}

.ag-theme-bootstrap .ag-paging-button:hover:not(.ag-disabled) {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Barra de estado */
.ag-theme-bootstrap .ag-status-bar {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 0.875rem;
    padding: 0.5rem;
}

/* Filtros flotantes */
.ag-theme-bootstrap .ag-floating-filter {
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
}

.ag-theme-bootstrap .ag-floating-filter-input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.ag-theme-bootstrap .ag-floating-filter-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Checkbox */
.ag-theme-bootstrap .ag-checkbox-input-wrapper {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.ag-theme-bootstrap .ag-checkbox-input-wrapper.ag-checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Tooltips */
.ag-tooltip {
    background-color: #212529;
    color: white;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}