/* ===== Modal General ===== */
.modal-content {
    background: #1e293b; /* gris azulado oscuro */
    color: #e2e8f0;      /* gris claro */
    border-radius: 16px;
    border: 1px solid #334155;
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.25);
}

/* ===== Modal Header ===== */
.modal-header {
    border-bottom: 1px solid #334155;
    background: #0f172a;
    border-radius: 16px 16px 0 0;
}

.modal-title {
    font-weight: 600;
    color: #38bdf8; /* celeste cyan que venimos usando */
}

.btn-close {
    filter: invert(80%);
}

/* ===== Modal Footer ===== */
.modal-footer {
    border-top: 1px solid #334155;
    background: #0f172a;
    border-radius: 0 0 16px 16px;
}

/* ===== Tabla interna ===== */
.table {
    color: #e5e7eb;
}

.table th {
    color: #7dd3fc;
    font-weight: 600;
    background-color: #0f172a;
    border-color: #334155 !important;
}

.table td {
    border-color: #334155 !important;
}

/* Hover en filas */
.table tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.1);
}

/* ===== Scroll del modal ===== */
.modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* Scroll estilizado */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 25px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #38bdf8;
    border-radius: 25px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9;
}