/* WebTablas — Estilos */

body {
    font-size: 0.9rem;
    background-color: #f5f6fa;
}

.card {
    border-radius: 8px;
}

.card-header {
    border-radius: 8px 8px 0 0 !important;
}

/* Badges de políticas de migración */
.policy-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.policy-badge.remapeo {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.policy-badge.sync {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.policy-badge.literal {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #ce93d8;
}

.policy-badge.fk {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.policy-badge.excluded {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* Tabla principal */
.table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #e8eaf6 !important;
}

/* Sticky header */
thead.sticky-top th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Column badges */
.badge.bg-light {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

/* Progress bar */
.progress {
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .table {
        font-size: 0.75rem;
    }
    .policy-badge {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
}

/* Navbar */
.navbar-brand {
    font-weight: 700;
}

/* Login card */
.card.shadow {
    border: none;
}

/* ============================================
   RELACIONES — Estilos para el explorador
   ============================================ */

/* Header con fondo indigo para secciones de relaciones */
.bg-indigo {
    background-color: #3f51b5 !important;
}

/* Badges de nivel jerárquico */
.level-badge {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.level-badge.level-0 { background-color: #78909c; color: white; }
.level-badge.level-1 { background-color: #e53935; color: white; }
.level-badge.level-2 { background-color: #fb8c00; color: white; }
.level-badge.level-3 { background-color: #43a047; color: white; }
.level-badge.level-4 { background-color: #1e88e5; color: white; }
.level-badge.level-5 { background-color: #8e24aa; color: white; }
.level-badge.level-6 { background-color: #d81b60; color: white; }
.level-badge.level-7 { background-color: #5d4037; color: white; }

/* Cadena de ancestros */
.ancestor-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 12px;
    border-left: 3px solid #3f51b5;
}

.ancestor-node {
    padding: 4px 0 4px 12px;
}

.ancestor-node.current {
    background-color: #e8eaf6;
    border-radius: 4px;
    padding: 8px 12px;
    border-left: 3px solid #3f51b5;
    margin-left: -15px;
}

.ancestor-table a {
    text-decoration: none;
    font-weight: 600;
}

.ancestor-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 2px 8px;
    color: #3f51b5;
}

.ancestor-arrow small {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

/* Árbol interactivo */
.tree-node {
    user-select: none;
}

.tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: default;
    flex-wrap: wrap;
}

.tree-row:hover {
    background-color: #f5f5f5;
}

.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tree-toggle.has-children {
    cursor: pointer;
    color: #1565c0;
}

.tree-toggle.has-children:hover {
    color: #0d47a1;
    background-color: #e3f2fd;
    border-radius: 50%;
}

.tree-toggle.no-children {
    color: #bdbdbd;
}

.tree-label {
    flex-shrink: 0;
}

.tree-label a {
    color: #212121;
}

.tree-label a:hover {
    color: #1565c0;
}

.tree-children {
    border-left: 1px dashed #ccc;
    margin-left: 10px;
}

/* Badge small */
.badge-sm {
    font-size: 0.6rem;
    padding: 1px 4px;
}

/* Dots para leyenda del grafo */
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.dot.dot-center  { background-color: #1565c0; }
.dot.dot-parent  { background-color: #c62828; }
.dot.dot-child   { background-color: #2e7d32; }
.dot.dot-cluster { background-color: #6a1b9a; }

/* Tabla de descripciones de columnas */
.col-desc-table td {
    vertical-align: middle;
}
.col-desc-cell {
    cursor: pointer;
    min-height: 28px;
}
.col-desc-cell:hover {
    background-color: #e3f2fd !important;
}
.col-desc-empty {
    font-style: italic;
    font-size: 0.78rem;
}
.col-desc-text {
    font-size: 0.82rem;
}

/* Responsive ajustes relaciones */
@media (max-width: 768px) {
    .ancestor-chain {
        padding-left: 8px;
    }
    .tree-row {
        font-size: 0.8rem;
    }
    .level-badge {
        font-size: 0.6rem;
    }
}