/*
 * Sena UI · componentes de Bootstrap usados por FacturaScripts
 *
 * Bootstrap compila algunos colores (#0d6efd) dentro de las variables de cada
 * componente; aquí se redefinen esas variables para que sigan a --sena-primary.
 */

/* ---------- botones ---------- */
html.sena-ui .btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--sena-radius-sm);
    transition: background-color var(--sena-transition), border-color var(--sena-transition),
    color var(--sena-transition), box-shadow var(--sena-transition);
}

html.sena-ui .btn-primary {
    --bs-btn-bg: var(--sena-primary);
    --bs-btn-border-color: var(--sena-primary);
    --bs-btn-hover-bg: var(--sena-primary-hover);
    --bs-btn-hover-border-color: var(--sena-primary-hover);
    --bs-btn-active-bg: var(--sena-primary-active);
    --bs-btn-active-border-color: var(--sena-primary-active);
    --bs-btn-disabled-bg: var(--sena-primary);
    --bs-btn-disabled-border-color: var(--sena-primary);
    --bs-btn-focus-shadow-rgb: var(--sena-brand-rgb);
    box-shadow: 0 1px 2px rgba(var(--sena-brand-rgb), .25);
}

html.sena-ui .btn-outline-primary {
    --bs-btn-color: var(--sena-primary);
    --bs-btn-border-color: var(--sena-primary-border);
    --bs-btn-hover-bg: var(--sena-primary);
    --bs-btn-hover-border-color: var(--sena-primary);
    --bs-btn-active-bg: var(--sena-primary-active);
    --bs-btn-active-border-color: var(--sena-primary-active);
    --bs-btn-disabled-color: var(--sena-primary);
    --bs-btn-disabled-border-color: var(--sena-primary-border);
    --bs-btn-focus-shadow-rgb: var(--sena-brand-rgb);
}

/* btn-light y btn-secondary se usan mucho en barras de herramientas: tono neutro y adaptable */
html.sena-ui .btn-light {
    --bs-btn-color: var(--sena-text);
    --bs-btn-bg: var(--sena-surface);
    --bs-btn-border-color: var(--sena-border);
    --bs-btn-hover-color: var(--sena-text);
    --bs-btn-hover-bg: var(--sena-surface-2);
    --bs-btn-hover-border-color: var(--sena-border);
    --bs-btn-active-color: var(--sena-text);
    --bs-btn-active-bg: var(--sena-surface-2);
    --bs-btn-active-border-color: var(--sena-primary-border);
}

html.sena-ui .btn-secondary {
    --bs-btn-color: var(--sena-text);
    --bs-btn-bg: var(--sena-surface-2);
    --bs-btn-border-color: var(--sena-border);
    --bs-btn-hover-color: var(--sena-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sena-surface-2) 85%, var(--sena-text));
    --bs-btn-hover-border-color: var(--sena-border);
    --bs-btn-active-color: var(--sena-primary);
    --bs-btn-active-bg: var(--sena-primary-subtle);
    --bs-btn-active-border-color: var(--sena-primary-border);
}

html.sena-ui .btn-link {
    text-decoration: none;
    font-weight: 500;
}

/* ---------- formularios ---------- */
html.sena-ui .form-control,
html.sena-ui .form-select {
    border-color: var(--sena-border);
    background-color: var(--sena-surface);
    transition: border-color var(--sena-transition), box-shadow var(--sena-transition);
}

html.sena-ui .form-control:focus,
html.sena-ui .form-select:focus {
    border-color: var(--sena-primary);
    box-shadow: var(--sena-focus-ring);
}

html.sena-ui .form-label,
html.sena-ui .col-form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--sena-text);
    margin-bottom: .3rem;
}

html.sena-ui .input-group-text {
    background-color: var(--sena-surface-2);
    border-color: var(--sena-border);
    color: var(--sena-muted);
}

html.sena-ui .form-check-input:checked {
    background-color: var(--sena-primary);
    border-color: var(--sena-primary);
}

html.sena-ui .form-check-input:focus {
    border-color: var(--sena-primary);
    box-shadow: var(--sena-focus-ring);
}

/* ---------- tarjetas ---------- */
html.sena-ui .card {
    --bs-card-border-color: var(--sena-border);
    --bs-card-border-radius: var(--sena-radius-md);
    --bs-card-inner-border-radius: calc(var(--sena-radius-md) - 1px);
    --bs-card-cap-bg: var(--sena-surface);
    --bs-card-bg: var(--sena-surface);
    box-shadow: var(--sena-shadow-sm);
}

html.sena-ui .card.shadow-sm {
    box-shadow: var(--sena-shadow-sm) !important; /* .shadow-sm de Bootstrap lleva !important */
}

html.sena-ui .card-header {
    font-weight: 600;
}

/* ---------- tablas ---------- */
html.sena-ui .table {
    --bs-table-border-color: var(--sena-border);
    --bs-table-hover-bg: rgba(var(--sena-brand-rgb), .045);
    --bs-table-striped-bg: rgba(var(--sena-text-rgb), .025);
    font-size: .925rem;
}

html.sena-ui .table > thead th,
html.sena-ui .table > thead td {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sena-muted);
    background-color: var(--sena-surface-2);
    border-bottom-width: 1px;
    white-space: nowrap;
}

html.sena-ui .table > :not(caption) > * > * {
    padding: .65rem .75rem;
}

html.sena-ui .table-light {
    --bs-table-bg: var(--sena-surface-2);
    --bs-table-color: var(--sena-text);
    --bs-table-border-color: var(--sena-border);
}

/* ---------- pestañas, píldoras y grupos ---------- */
html.sena-ui .nav-pills {
    --bs-nav-pills-border-radius: var(--sena-radius-sm);
    --bs-nav-pills-link-active-bg: var(--sena-primary);
}

html.sena-ui .nav-tabs {
    --bs-nav-tabs-border-color: var(--sena-border);
    --bs-nav-tabs-link-active-color: var(--sena-primary);
    --bs-nav-tabs-link-active-border-color: var(--sena-border) var(--sena-border) var(--sena-surface);
}

html.sena-ui .nav-tabs .nav-link {
    font-weight: 500;
}

html.sena-ui .list-group {
    --bs-list-group-border-color: var(--sena-border);
    --bs-list-group-active-bg: var(--sena-primary);
    --bs-list-group-active-border-color: var(--sena-primary);
    --bs-list-group-action-hover-bg: var(--sena-surface-2);
}

/* ---------- paginación ---------- */
html.sena-ui .pagination {
    --bs-pagination-border-color: var(--sena-border);
    --bs-pagination-hover-bg: var(--sena-surface-2);
    --bs-pagination-hover-border-color: var(--sena-border);
    --bs-pagination-focus-box-shadow: var(--sena-focus-ring);
    --bs-pagination-active-bg: var(--sena-primary);
    --bs-pagination-active-border-color: var(--sena-primary);
    gap: .25rem;
}

html.sena-ui .pagination .page-link {
    border-radius: var(--sena-radius-sm);
}

/* ---------- alertas, insignias y progreso ---------- */
html.sena-ui .alert {
    --bs-alert-border-radius: var(--sena-radius-md);
    border-left-width: 4px;
}

html.sena-ui .badge {
    font-weight: 600;
    border-radius: calc(var(--sena-radius-sm) - 1px);
}

html.sena-ui .progress {
    --bs-progress-bar-bg: var(--sena-primary);
    --bs-progress-border-radius: 999px;
}

/* ---------- modales y toasts ---------- */
html.sena-ui .modal {
    --bs-modal-border-radius: var(--sena-radius-lg);
    --bs-modal-border-color: transparent;
    --bs-modal-box-shadow: var(--sena-shadow-lg);
}

html.sena-ui .modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

html.sena-ui .toast {
    --bs-toast-border-radius: var(--sena-radius-md);
    --bs-toast-box-shadow: var(--sena-shadow-md);
}

/* ---------- densidad compacta ---------- */
html.sena-ui.sena-density-compact .table > :not(caption) > * > * {
    padding: .35rem .55rem;
}

html.sena-ui.sena-density-compact .form-control,
html.sena-ui.sena-density-compact .form-select {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

html.sena-ui.sena-density-compact .btn {
    --bs-btn-padding-y: .25rem;
}