/*
 * Sistema visual sobrio compartido por todas las vistas de SGO Plus.
 * Se carga después de los estilos de cada módulo para mantener una
 * presentación consistente sin alterar su comportamiento.
 */

:root {
    --bs-primary: #52657a;
    --bs-primary-rgb: 82, 101, 122;
    --bs-link-color: #46596d;
    --bs-link-hover-color: #334454;
    --bs-border-color: #dce3ea;
    --bs-focus-ring-color: rgba(82, 101, 122, 0.16);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
}

body {
    color: var(--sgo-color-texto);
    background: var(--sgo-color-superficie);
}

html,
body {
    max-width: 100%;
}

.app-main,
.app-main > *,
.card,
.card-body,
.modal-content,
.modal-body,
.row > * {
    min-width: 0;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.card,
.dropdown-menu,
.offcanvas,
.swal2-popup {
    border-color: var(--sgo-color-borde) !important;
    box-shadow: var(--sgo-sombra-suave);
}

.card {
    background: var(--sgo-color-tarjeta);
}

.card-header,
.card-footer {
    background: #fbfcfd !important;
    border-color: var(--sgo-color-borde) !important;
}

.btn {
    min-height: 2.375rem;
    font-weight: 500;
    border-radius: 0.5rem;
    box-shadow: none !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #52657a;
    --bs-btn-border-color: #52657a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3e4e5d;
    --bs-btn-hover-border-color: #3e4e5d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #344250;
    --bs-btn-active-border-color: #344250;
    --bs-btn-focus-shadow-rgb: 82, 101, 122;
}

.btn-outline-primary {
    --bs-btn-color: #46596d;
    --bs-btn-border-color: #b8c4d0;
    --bs-btn-hover-color: #253247;
    --bs-btn-hover-bg: #eef2f5;
    --bs-btn-hover-border-color: #a9b7c5;
    --bs-btn-active-color: #253247;
    --bs-btn-active-bg: #e6ecf0;
    --bs-btn-active-border-color: #a9b7c5;
    --bs-btn-focus-shadow-rgb: 82, 101, 122;
}

.btn-light,
.btn-outline-secondary {
    --bs-btn-color: #46596d;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cbd5de;
    --bs-btn-hover-color: #253247;
    --bs-btn-hover-bg: #f4f7f9;
    --bs-btn-hover-border-color: #b8c4d0;
}

.btn-limpiar {
    display: inline-flex;
    min-width: 6.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-limpiar > i {
    font-size: 1rem;
    line-height: 1;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 2.375rem;
    color: #253247;
    background-color: #fff;
    border-color: #cbd5de;
    border-radius: 0.5rem;
    box-shadow: none !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-control:focus,
.form-select:focus {
    color: #253247;
    border-color: #9eafbe;
    box-shadow: 0 0 0 0.2rem rgba(82, 101, 122, 0.12) !important;
}

.form-control::placeholder {
    color: #9aa7b4;
    opacity: 1;
}

.form-label {
    color: #46596d;
    font-weight: 600;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    color: #253247;
    background: #fff;
    border-color: #cbd5de !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #9eafbe !important;
    box-shadow: 0 0 0 0.2rem rgba(82, 101, 122, 0.12) !important;
}

.select2-dropdown {
    border-color: #cbd5de;
    border-radius: 0.5rem;
    box-shadow: var(--sgo-sombra-suave);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: #253247;
    background: #eef2f5;
}

.table {
    --bs-table-color: #334155;
    --bs-table-bg: #fff;
    --bs-table-border-color: #e5ebf0;
    font-size: 0.75rem;
}

.table > :not(caption) > * > * {
    border-bottom-color: #e5ebf0;
}

.table > thead > tr > * {
    color: #52657a;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: normal;
    background: #f7f9fb;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #f7f9fb;
    color: #253247;
}

/*
 * Acciones de filas: todas las tablas usan los mismos controles de edición
 * y eliminación, sin depender del padding o la línea base de cada icono.
 */
.table .btn.btn-sm:has(> i.bx-edit),
.table .btn.btn-sm:has(> i.bx-trash),
.table a.btn.btn-sm:has(> i.bx-edit),
.table a.btn.btn-sm:has(> i.bx-trash) {
    display: inline-flex;
    width: 2.375rem;
    min-width: 2.375rem;
    height: 2.375rem;
    min-height: 2.375rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
}

.table .btn.btn-sm:has(> i.bx-edit) > i,
.table .btn.btn-sm:has(> i.bx-trash) > i,
.table a.btn.btn-sm:has(> i.bx-edit) > i,
.table a.btn.btn-sm:has(> i.bx-trash) > i {
    display: block;
    font-size: 1rem;
    line-height: 1;
}

.pagination {
    --bs-pagination-color: #46596d;
    --bs-pagination-border-color: #dce3ea;
    --bs-pagination-hover-color: #253247;
    --bs-pagination-hover-bg: #f1f4f7;
    --bs-pagination-hover-border-color: #cbd5de;
    --bs-pagination-focus-color: #253247;
    --bs-pagination-focus-bg: #f1f4f7;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(82, 101, 122, 0.12);
    --bs-pagination-active-bg: #52657a;
    --bs-pagination-active-border-color: #52657a;
}

.modal-content {
    color: #253247;
    background: #fff;
    border: 1px solid #dce3ea;
    box-shadow: 0 1rem 2.5rem rgba(23, 32, 51, 0.14);
}

.modal-header,
.modal-footer {
    background: #fbfcfd;
    border-color: #dce3ea;
}

.modal-title {
    color: #253247;
    font-weight: 650;
}

.modal .btn-close {
    opacity: 0.55;
}

.modal .btn-close:hover,
.modal .btn-close:focus-visible {
    opacity: 0.85;
}

.module-icon,
.configuration-card-icon,
.app-user-icon,
.auth-brand-icon {
    color: #52657a;
    background: #eef2f5;
}

.auth-brand-icon {
    border: 1px solid #dce3ea;
}

.app-topbar,
.app-footer {
    border-color: #dce3ea;
}

.sidebar-brand-icon,
.sidebar-link.active {
    background: #52657a;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.app-user-icon,
.module-icon {
    border: 1px solid #dce3ea;
}

.badge.text-bg-primary {
    color: #fff !important;
    background-color: #52657a !important;
}

.alert-primary {
    color: #3e4e5d;
    background: #eef2f5;
    border-color: #d5dfe7;
}

.swal2-popup {
    color: #253247 !important;
    border-radius: 0.75rem !important;
}

@media (max-width: 575.98px) {
    .app-topbar {
        min-height: 4.25rem;
        padding: 0.625rem 0.75rem;
    }

    .app-topbar-main {
        gap: 0.5rem !important;
    }

    .app-page-title {
        font-size: 0.8125rem;
    }

    .app-main {
        padding: 0.75rem;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    .table-responsive {
        margin-right: -0.125rem;
        margin-left: -0.125rem;
    }

    .table > :not(caption) > * > * {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .btn {
        min-height: 2.5rem;
    }
}