/* Color corporativo principal */
:root {
    --civika-blue: #1d4992;
    --civika-blue-hover: #153770;
}

.bg-civika-primary {
    background-color: var(--civika-blue) !important;
    color: #ffffff !important;
}

.btn-civika-primary {
    background-color: var(--civika-blue);
    border-color: var(--civika-blue);
    color: #ffffff;
}

.btn-civika-primary:hover {
    background-color: var(--civika-blue-hover);
    border-color: var(--civika-blue-hover);
    color: #ffffff;
}

.text-civika {
    color: var(--civika-blue) !important;
}

/* Indicadores de Estado (Badges) */
.badge-status-vencido {
    background-color: #f8d7da;
    color: #d63939;
    border: 1px solid #f5c2c7;
}

.badge-status-vigente {
    background-color: #d1e7dd;
    color: #2fb344;
    border: 1px solid #badbcc;
}

.avatar-course-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--civika-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Esfera del semáforo al lado del curso */
.status-dot-course {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.4), 1px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Esferas generales del semáforo */
.status-dot-lg {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .03);
}

/* Colores de estados */
.dot-realizada { background: radial-gradient(circle at 30% 30%, #ff7e7e, #e60000); }
.dot-enviada   { background: radial-gradient(circle at 30% 30%, #e6e6e6, #808080); }
.dot-recibida  { background: radial-gradient(circle at 30% 30%, #fff176, #fbc02d); }
.dot-aceptada  { background: radial-gradient(circle at 30% 30%, #d1c4e9, #7e57c2); }
.dot-registro  { background: radial-gradient(circle at 30% 30%, #81d4fa, #0288d1); }
.dot-espera    { background: radial-gradient(circle at 30% 30%, #29b6f6, #0277bd); }
.dot-finalizada{ background: radial-gradient(circle at 30% 30%, #81c784, #2e7d32); }
.dot-cerrada   { background: radial-gradient(circle at 30% 30%, #a1887f, #4e342e); }

/* Badges para Vencido (Rojo) y Vigente (Verde) */
.badge-vencido {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.badge-vigente {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ===== Semáforo de estatus — Rediseñado a Grid Horizontal (2 filas x 4 columnas) ===== */
.status-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea exactamente 4 columnas */
    gap: 1rem; /* Espaciado entre tarjetas */
}

.status-legend li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    background-color: #fafbfc;
    font-size: .875rem;
    color: #344054;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.status-legend li:hover {
    background-color: #f1f3f5;
    border-color: #d0d5dd;
}

.status-legend li:last-child {
    border-bottom: 1px solid #eef0f2; /* Conserva el borde estándar de la tarjeta */
}

/* Responsive: 2 columnas en celulares */
@media (max-width: 768px) {
    .status-legend {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Modal formal / ejecutivo ===== */
.modal-header-formal {
    background-color: #ffffff;
    border-bottom: 1px solid #e6e8eb;
    padding: 1.1rem 1.5rem;
}

.modal-header-formal .modal-title {
    color: #1d2939;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.modal-body-formal .form-label {
    color: #475467;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .35rem;
}

.modal-body-formal .form-control,
.modal-body-formal .form-select {
    border-color: #d0d5dd;
    font-size: .9rem;
}

.modal-body-formal .form-control:focus,
.modal-body-formal .form-select:focus {
    border-color: var(--civika-blue);
    box-shadow: 0 0 0 3px rgba(29, 73, 146, 0.1);
}

.modal-body-formal .form-hint {
    font-size: .75rem;
    color: #98a2b3;
}

.modal-footer-formal {
    background-color: #ffffff;
    border-top: 1px solid #e6e8eb;
}

/* ===== Catálogo de ocupaciones específicas ===== */
.tabla-ocupaciones thead th {
    font-size: .625rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--tblr-border-color);
}

.tabla-ocupaciones td {
    vertical-align: middle;
}

.clave-badge {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    font-weight: 600;
    font-size: .8125rem;
}

.accordion-button.area-toggle {
    color: var(--tblr-body-color) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.subarea-link {
    color: var(--tblr-secondary) !important;
}

.subarea-link:hover {
    color: var(--tblr-body-color) !important;
}

/* ===== Tabla ejecutiva (reutilizable en catálogos) ===== */
.tabla-ejecutiva thead th {
    font-size: .6875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--tblr-border-color);
}

.tabla-ejecutiva td {
    vertical-align: middle;
}