:root {
    --cipavi-primary: #0d6efd;
    --cipavi-primary-dark: #0b3b79;
    --cipavi-surface: #ffffff;
    --cipavi-border: #dbe5f1;
    --cipavi-muted: #70829c;
    --cipavi-shadow: 0 18px 42px rgba(20, 53, 102, 0.14);
}

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #f4f7fb;
}

#main-wrapper .card,
.container .card {
    border-radius: 18px;
}

#main-wrapper .card,
.container .card,
.modal-content,
.dropdown-menu {
    box-shadow: var(--cipavi-shadow);
    border-color: rgba(219, 229, 241, 0.9);
}

.table,
.table th,
.table td {
    vertical-align: middle !important;
}

.table td,
.table th {
    word-break: break-word;
}

.modal-open {
    overflow: hidden !important;
}

.modal {
    overscroll-behavior: contain;
}

.form-control,
.custom-select,
.btn,
.input-group-text,
.vue-dropzone,
.modal-content {
    border-radius: 12px !important;
}

.form-control,
.custom-select,
.input-group-text {
    border-color: var(--cipavi-border);
}

.form-control:focus,
.custom-select:focus,
.btn:focus {
    box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.12) !important;
}

.btn-tertiary,
.btn[variant="tertiary"] {
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.12);
}

.vbt-table-tools,
.vbt-table-tools .form-control,
.vbt-table-tools .custom-select {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    #main-wrapper .container,
    .container {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog {
        margin: 0.75rem;
    }
}


/* CIPAVI visual consistency across Vue modules: cards, forms, tables and responsive spacing. */
#main-wrapper {
    color: #172033;
}

#main-wrapper section {
    padding-bottom: 1.25rem;
}

#main-wrapper .container > .row.justify-content-center > .card,
#main-wrapper .container > .row.justify-content-center > .col > .card {
    width: 100%;
}

#main-wrapper .card {
    background: rgba(255, 255, 255, 0.98);
}

#main-wrapper .card-body {
    color: #1f2937;
}

#main-wrapper .card-body h4,
#main-wrapper .card-body h5,
#main-wrapper .card-body h6 {
    color: #111827;
    font-weight: 800;
    letter-spacing: -0.01em;
}

#main-wrapper label,
#main-wrapper .form-group > label,
#main-wrapper .col-form-label {
    color: #243047;
    font-weight: 700;
}

#main-wrapper .form-control,
#main-wrapper .custom-select,
#main-wrapper .input-group-text {
    min-height: 38px;
    background: #fff;
    color: #1f2937;
}

#main-wrapper .form-control::placeholder {
    color: #94a3b8;
}

#main-wrapper .btn {
    min-height: 34px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#main-wrapper .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

#main-wrapper .btn:disabled {
    cursor: not-allowed;
}

#main-wrapper .badge {
    border-radius: 999px;
    padding: .38em .72em;
    font-weight: 700;
}

#main-wrapper .nav-tabs,
#main-wrapper .nav-pills {
    border-bottom-color: #dbe5f1;
}

#main-wrapper .nav-tabs .nav-link,
#main-wrapper .nav-pills .nav-link {
    color: #263548;
    font-weight: 700;
    border-radius: 10px 10px 0 0;
}

#main-wrapper .nav-tabs .nav-link.active,
#main-wrapper .nav-pills .nav-link.active {
    color: #0b3b79;
    background: #eff6ff;
    border-color: #cfe0fb #cfe0fb #eff6ff;
}

#main-wrapper .table-responsive,
#main-wrapper .vbt-table-wrapper,
#main-wrapper .vbt-table-responsive {
    border-radius: 12px;
}

#main-wrapper table.table {
    margin-bottom: 0;
}

#main-wrapper table.table thead th {
    border-top: 0;
    border-bottom-color: #c8d6e8;
    letter-spacing: .01em;
}

#main-wrapper table.table tbody tr {
    transition: background-color .18s ease;
}

#main-wrapper table.table tbody tr:hover {
    background-color: #f7fbff !important;
}

#main-wrapper .pagination .page-link {
    color: #0b3b79;
    border-color: #dbe5f1;
    font-weight: 700;
}

#main-wrapper .pagination .page-item.active .page-link {
    background: #0d6efd;
    border-color: #0d6efd;
}

#main-wrapper .modal-content {
    overflow: hidden;
    border: 0;
}

#main-wrapper .modal-header {
    background: linear-gradient(180deg, #f9fbff, #f4f8fe);
    border-bottom-color: #dbe5f1;
}

#main-wrapper .modal-title {
    color: #111827;
    font-weight: 800;
}

#main-wrapper .modal-footer {
    border-top-color: #dbe5f1;
}

#main-wrapper .dropdown-menu,
#main-wrapper .multiselect__content-wrapper,
#main-wrapper .v-select .vs__dropdown-menu {
    z-index: 1080;
}

@media (max-width: 991.98px) {
    #main-wrapper section {
        padding-bottom: .75rem;
    }

    #main-wrapper .row > [class*="col-"] {
        margin-bottom: .3rem;
    }

    #main-wrapper .card {
        border-radius: 14px;
    }
}

@media (max-width: 767.98px) {
    #main-wrapper .card-body {
        padding: 1rem !important;
    }

    #main-wrapper .btn {
        min-height: 38px;
    }

    #main-wrapper .form-control,
    #main-wrapper .custom-select {
        font-size: .95rem;
    }

    #main-wrapper .table-responsive,
    #main-wrapper .vbt-table-wrapper,
    #main-wrapper .vbt-table-responsive {
        font-size: .8rem;
    }
}

/* Ajuste de lectura para reportes amplios: evita palabras partidas por letra y permite desplazamiento horizontal natural. */
#main-wrapper .vue-bootstrap4-table .vbt-table-wrapper,
#main-wrapper .vue-bootstrap4-table .vbt-table-responsive,
#main-wrapper .vue-bootstrap4-table .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

#main-wrapper .vue-bootstrap4-table table.table,
#main-wrapper .vue-bootstrap4-table .vbt-table-wrapper > table,
#main-wrapper .vue-bootstrap4-table .vbt-table-responsive > table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

#main-wrapper .vue-bootstrap4-table table.table th,
#main-wrapper .vue-bootstrap4-table table.table td {
    min-width: 118px;
    padding: .78rem .88rem !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
    text-align: center;
}

#main-wrapper .vue-bootstrap4-table table.table th:first-child,
#main-wrapper .vue-bootstrap4-table table.table td:first-child {
    min-width: 52px;
}

#main-wrapper .vue-bootstrap4-table table.table th:nth-child(2),
#main-wrapper .vue-bootstrap4-table table.table td:nth-child(2) {
    min-width: 82px;
}

#main-wrapper .vue-bootstrap4-table .th-contract,
#main-wrapper .vue-bootstrap4-table .th-location,
#main-wrapper .vue-bootstrap4-table .th-observation {
    display: block;
    min-width: 250px;
    max-width: 340px;
    margin: 0 auto;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

#main-wrapper .vue-bootstrap4-table .th-contract p,
#main-wrapper .vue-bootstrap4-table .th-location p,
#main-wrapper .vue-bootstrap4-table .th-observation p {
    margin: 0;
}

/* Cabeceras de m¨®dulos: estilo ejecutivo uniforme sin tocar su l¨®gica Vue. */
#main-wrapper .cipavi-module-title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 74px;
    margin: 0 0 1.1rem !important;
    padding: 17px 22px 17px 24px;
    border-left: 5px solid #1f6feb;
    border-radius: 16px;
    background: linear-gradient(90deg, #ffffff, #fbfdff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    color: #1f2937 !important;
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: left !important;
}

#main-wrapper .cipavi-module-title::before {
    content: "";
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin-right: 12px;
    border: 2px solid #1f6feb;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(31,111,235,.10), rgba(31,111,235,.02));
}

@media (max-width: 767.98px) {
    #main-wrapper .vue-bootstrap4-table table.table th,
    #main-wrapper .vue-bootstrap4-table table.table td {
        min-width: 104px;
        padding: .68rem .72rem !important;
        font-size: .82rem;
    }

    #main-wrapper .cipavi-module-title {
        min-height: 64px;
        padding: 14px 16px;
        font-size: 1.08rem;
        border-radius: 13px;
    }

    #main-wrapper .cipavi-module-title::before {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        margin-right: 10px;
        border-radius: 8px;
    }
}

/* Reportes personalizados: columnas legibles sin convertir textos en letras verticales. */
#main-wrapper .cipavi-report-scroll > table,
#main-wrapper .cipavi-report-scroll .table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

#main-wrapper .cipavi-report-scroll > table th,
#main-wrapper .cipavi-report-scroll > table td,
#main-wrapper .cipavi-report-scroll .table th,
#main-wrapper .cipavi-report-scroll .table td {
    min-width: 96px;
    padding: .68rem .72rem;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.38;
}

#main-wrapper .cipavi-report-scroll .btn,
#main-wrapper .cipavi-report-scroll .badge {
    white-space: nowrap;
}

#main-wrapper .cipavi-report-scroll td.text-left {
    min-width: 190px;
    max-width: 300px;
}

/* Encabezados de reportes visibles al recorrer tablas extensas. */
#main-wrapper .vue-bootstrap4-table,
#main-wrapper .cipavi-report-scroll {
    position: relative;
}

#main-wrapper .vue-bootstrap4-table table thead th,
#main-wrapper .cipavi-report-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #eef4fb !important;
    box-shadow: inset 0 -1px 0 #bcd0e8;
}

/* La primera cabecera se conserva al recorrer horizontalmente la tabla. */
#main-wrapper .vue-bootstrap4-table table thead th:first-child,
#main-wrapper .cipavi-report-scroll table thead th:first-child {
    left: 0;
    z-index: 10;
}

/* Evita botones de PDF y acciones escritos letra por letra. */
#main-wrapper .vue-bootstrap4-table .btn,
#main-wrapper .vue-bootstrap4-table .badge {
    white-space: nowrap;
}

#main-wrapper .vue-bootstrap4-table td,
#main-wrapper .vue-bootstrap4-table th {
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 767.98px) {
    #main-wrapper .vue-bootstrap4-table table thead th,
    #main-wrapper .cipavi-report-scroll table thead th {
        top: 0;
    }
}

/* Centros de costo - resumen ejecutivo de locaciones y veh¨ªculos */
.cost-center-executive-card { border:1px solid #d8e5f4; border-radius:14px; box-shadow:0 8px 20px rgba(22,55,94,.05); background:linear-gradient(135deg,#fbfdff,#f4f9ff); }
.cost-center-executive-card h5 { color:#132d55 !important; }
.cost-center-executive-tabs .btn { font-weight:700; border-radius:8px !important; }
.cost-center-summary-caption { color:#536b88; font-size:.81rem; }
.cost-center-summary-caption .badge { font-size:.72rem; }
.cost-center-summary-loading { color:#536b88; font-size:.85rem; }
.cost-center-kpi { min-height:112px; border:1px solid #e2eaf3; border-radius:12px; padding:.8rem .9rem; background:#fff; box-shadow:0 4px 12px rgba(27,53,90,.05); }
.cost-center-kpi span,.cost-center-kpi small { display:block; color:#61748c !important; font-size:.73rem; }
.cost-center-kpi span { font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.cost-center-kpi strong { display:block; color:#172b4d !important; font-size:1.35rem; line-height:1.25; margin:.35rem 0; word-break:break-word; }
.cost-center-kpi-blue { border-top:4px solid #0d6efd; }.cost-center-kpi-green { border-top:4px solid #198754; }.cost-center-kpi-orange { border-top:4px solid #f59e0b; }.cost-center-kpi-purple { border-top:4px solid #7c3aed; }
.cost-center-ranking-panel { border:1px solid #e0e9f3; border-radius:12px; padding:.8rem .9rem; background:#fff; }
.cost-center-ranking-panel h6 { margin:0; color:#172b4d !important; font-size:.86rem; font-weight:800; }
.cost-center-ranking-panel > .d-flex > span { color:#6b7d94; font-size:.68rem; font-weight:700; text-transform:uppercase; }
.cost-center-ranking-row { padding:.45rem 0; border-bottom:1px solid #edf2f7; }.cost-center-ranking-row:last-child { border-bottom:0; }
.cost-center-ranking-row strong { color:#243852 !important; font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:78%; }
.cost-center-ranking-row .badge { font-size:.66rem; white-space:nowrap; height:fit-content; }
.cost-center-ranking-meta { gap:.5rem; color:#697c94 !important; font-size:.67rem; line-height:1.2; margin:.18rem 0 .35rem; }
.cost-center-ranking-meta span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65%; }
.cost-center-ranking-meta span:last-child { color:#334a67 !important; font-weight:700; white-space:nowrap; }
.cost-center-ranking-row .progress { height:6px; border-radius:999px; background:#eaf0f6; }.cost-center-ranking-row .progress-bar { border-radius:999px; }
@media (max-width:575px) { .cost-center-executive-tabs { width:100%; }.cost-center-executive-tabs .btn { flex:1; }.cost-center-kpi strong { font-size:1.13rem; } }