/* ========================================================================
   Cobanks by Callpos — Rebrand Stylesheet
   Paleta extraída del callpos-frontend (src/scss/abstracts/_bs-custom.scss)
   Este archivo se carga DESPUÉS de default.css y sobrescribe los colores.
   ======================================================================== */

/* ── Tipografía Callpos ─────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap");

:root {
    /* Paleta principal */
    --cbc-primary:      #1b2232;
    --cbc-primary-rgb:  27, 34, 50;
    --cbc-primary-hover:#13192a;
    --cbc-secondary:    #F8B940;
    --cbc-secondary-rgb:248, 185, 64;
    --cbc-success:      #3A9B94;
    --cbc-info:         #58bad7;
    --cbc-warning:      #FF9F00;
    --cbc-danger:       #FF5E5E;

    /* Fondos y bordes */
    --cbc-bg:           #F3F0EC;
    --cbc-bg-dark:      #222B40;
    --cbc-border:       #E6E6E6;

    /* Tipografía */
    --cbc-text:         #888888;
    --cbc-headings:     #374557;
    --cbc-text-dark:    #23252F;

    /* Sombras */
    --cbc-shadow-sm:    0 4px 12px rgba(27, 34, 50, .06);
    --cbc-shadow:       0 10px 30px rgba(27, 34, 50, .08);
}

/* ── Tipografía global ──────────────────────────────────────────────────── */
body,
.main-body {
    font-family: 'Poppins', sans-serif !important;
    background: var(--cbc-bg) !important;
    color: var(--cbc-text);
}

h1, h2, h3, h4, h5, h6,
.main-content-title,
.card-title {
    font-family: 'Poppins', sans-serif !important;
    color: var(--cbc-headings) !important;
    font-weight: 600;
}

/* ── Sobrescribir el rojo #eb0f0c por el azul Callpos ───────────────────── */
.bg-primary,
.btn-primary,
.badge-primary {
    background-color: var(--cbc-primary) !important;
    border-color: var(--cbc-primary) !important;
}

.bg-primary::hover, .bg-primary::focus,
.btn-primary:hover, .btn-primary:focus,
.btn-primary:active {
    background-color: var(--cbc-primary-hover) !important;
    border-color: var(--cbc-primary-hover) !important;
}

.text-primary,
a.text-primary,
.main-content-title-hidden {
    color: var(--cbc-primary) !important;
}

a {
    color: var(--cbc-primary);
}
a:hover {
    color: var(--cbc-secondary);
}

.bg-primary-transparent {
    background-color: rgba(var(--cbc-primary-rgb), .1) !important;
}

.border-primary {
    border-color: var(--cbc-primary) !important;
}

/* ── Sidebar / Menú lateral ─────────────────────────────────────────────── */
.main-sidebar,
.app-sidebar,
.main-sidebar-sticky {
    background: var(--cbc-bg-dark) !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
}

.sidemenu-logo {
    background: var(--cbc-bg-dark) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-bottom: 12px;
}

/* Lockup "by Callpos" debajo del logo */
.cbc-lockup {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 4px;
    font-weight: 500;
}
.cbc-lockup strong {
    color: var(--cbc-secondary);
    font-weight: 600;
}

.main-sidebar .nav-link {
    color: rgba(255,255,255,.78) !important;
    transition: all .2s ease;
}

.main-sidebar .nav-item.active > .nav-link,
.main-sidebar .nav-link:hover {
    color: #fff !important;
    background: rgba(248, 185, 64, .12) !important;
    border-left: 3px solid var(--cbc-secondary);
}

.main-sidebar .nav-label {
    color: rgba(248, 185, 64, .85) !important;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 11px;
}

.sidemenu-icon {
    color: rgba(255,255,255,.6);
}

.main-sidebar .nav-item.active .sidemenu-icon {
    color: var(--cbc-secondary) !important;
}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border-radius: 8px;
    padding: .55rem 1.1rem;
    transition: all .2s ease;
}

.btn-secondary {
    background-color: var(--cbc-secondary) !important;
    border-color: var(--cbc-secondary) !important;
    color: var(--cbc-text-dark) !important;
}

.btn-success {
    background-color: var(--cbc-success) !important;
    border-color: var(--cbc-success) !important;
}

.btn-info {
    background-color: var(--cbc-info) !important;
    border-color: var(--cbc-info) !important;
}

.btn-warning {
    background-color: var(--cbc-warning) !important;
    border-color: var(--cbc-warning) !important;
}

.btn-danger {
    background-color: var(--cbc-danger) !important;
    border-color: var(--cbc-danger) !important;
}

.btn-outline-primary {
    color: var(--cbc-primary) !important;
    border-color: var(--cbc-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--cbc-primary) !important;
    color: #fff !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card,
.custom-card {
    border-radius: 12px !important;
    border: 1px solid var(--cbc-border) !important;
    box-shadow: var(--cbc-shadow-sm) !important;
    background: #fff;
}

.card-header {
    background: #fafbfc !important;
    border-bottom: 1px solid var(--cbc-border) !important;
    font-weight: 600;
    color: var(--cbc-headings);
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.table thead th {
    background: rgba(var(--cbc-primary-rgb), .04);
    color: var(--cbc-headings);
    font-weight: 600;
    border-bottom: 2px solid var(--cbc-primary) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
}

.table tbody tr:hover {
    background: rgba(var(--cbc-secondary-rgb), .04);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    padding: .35em .7em;
    border-radius: 6px;
}

.badge-warning, .badge.bg-warning {
    background-color: var(--cbc-warning) !important;
    color: #fff;
}

.badge-success, .badge.bg-success {
    background-color: var(--cbc-success) !important;
    color: #fff;
}

/* ── Header (top navbar) ────────────────────────────────────────────────── */
.main-header {
    background: #fff !important;
    border-bottom: 1px solid var(--cbc-border) !important;
    box-shadow: var(--cbc-shadow-sm);
}

/* ── Loader splash ──────────────────────────────────────────────────────── */
#global-loader {
    background: var(--cbc-primary) !important;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: 8px;
    border: 1px solid var(--cbc-border);
    font-family: 'Poppins', sans-serif;
    transition: all .2s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--cbc-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--cbc-primary-rgb), .15);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--cbc-border);
    color: var(--cbc-text);
}

.main-footer .cbc-credit {
    color: var(--cbc-text);
    font-size: 12px;
}
.main-footer .cbc-credit strong {
    color: var(--cbc-secondary);
    font-weight: 600;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    border-radius: 8px;
    border: none;
    font-family: 'Poppins', sans-serif;
}
.alert-primary {
    background: rgba(var(--cbc-primary-rgb), .1);
    color: var(--cbc-primary);
}

/* ── Links del breadcrumb ───────────────────────────────────────────────── */
.breadcrumb-item a {
    color: var(--cbc-primary);
}
.breadcrumb-item.active {
    color: var(--cbc-headings);
}

/* ========================================================================
   FASE 2 — Mejoras UX automáticas
   ======================================================================== */

/* ── Page header (títulos de sección consistentes) ──────────────────────── */
.page-header {
    background: transparent;
    padding: 1.25rem 0 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--cbc-border);
}

.main-content-title,
.page-header h2,
.page-header h1 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--cbc-headings) !important;
    margin-bottom: .25rem;
    letter-spacing: -.01em;
}

.page-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .82rem;
}

/* ── Cards mejoradas (más airy, transitions) ────────────────────────────── */
.card,
.custom-card {
    transition: box-shadow .25s ease, transform .25s ease;
}

.card:hover,
.custom-card:hover {
    box-shadow: var(--cbc-shadow) !important;
}

.card-header {
    padding: 1rem 1.25rem !important;
    font-size: .95rem;
    letter-spacing: .01em;
}

.card-body {
    padding: 1.25rem 1.5rem !important;
}

/* KPI / Stat cards (números grandes) */
.stat-card,
.dashboard-kpi {
    border-radius: 12px;
    border: 1px solid var(--cbc-border);
    background: #fff;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--cbc-shadow-sm);
    transition: transform .2s ease, box-shadow .25s ease;
}
.stat-card:hover,
.dashboard-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--cbc-shadow);
}

.stat-card .stat-number,
.dashboard-kpi h2,
.dashboard-kpi h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--cbc-headings) !important;
    line-height: 1.1;
    margin: .5rem 0;
}

.stat-card .stat-label {
    color: var(--cbc-text);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* ── Tablas más legibles ────────────────────────────────────────────────── */
.table {
    font-size: .87rem;
}

.table thead th {
    background: rgba(var(--cbc-primary-rgb), .04) !important;
    color: var(--cbc-headings) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid rgba(var(--cbc-primary-rgb), .15) !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .5px;
    padding: .85rem .75rem !important;
    vertical-align: middle;
}

.table tbody td {
    padding: .85rem .75rem !important;
    vertical-align: middle;
    border-top: 1px solid var(--cbc-border);
}

.table tbody tr {
    transition: background .15s ease;
}

.table tbody tr:hover {
    background: rgba(var(--cbc-secondary-rgb), .045) !important;
}

.table-responsive {
    border-radius: 10px;
    border: 1px solid var(--cbc-border);
    background: #fff;
}

/* DataTables específicos */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    border: 1px solid var(--cbc-border);
    padding: .4rem .8rem;
    font-family: 'Poppins', sans-serif;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cbc-primary) !important;
    border-color: var(--cbc-primary) !important;
    color: #fff !important;
    border-radius: 6px;
}

/* ── Modales mejor estilizados ──────────────────────────────────────────── */
.modal-content,
.modal-content-demo {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--cbc-primary) !important;
    color: #fff !important;
    padding: 1rem 1.5rem !important;
    border: none !important;
}

.modal-header .modal-title,
.modal-header h6,
.modal-header h5 {
    color: #fff !important;
    font-weight: 600;
    font-size: 1.05rem;
}

.modal-header .close,
.modal-header .btn-close {
    color: #fff !important;
    opacity: .9;
    text-shadow: none;
}
.modal-header .close span {
    color: #fff !important;
    font-size: 1.6rem;
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    padding: 1rem 1.5rem !important;
    background: #fafbfc;
    border-top: 1px solid var(--cbc-border) !important;
}

/* ── Formularios con mejor jerarquía ────────────────────────────────────── */
.form-group label,
.form-label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--cbc-headings);
    margin-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
}

.form-control,
.form-select {
    padding: .55rem .85rem !important;
    font-size: .9rem;
    height: auto !important;
}

.form-control::placeholder {
    color: #b8b8b8;
    font-size: .85rem;
}

/* Select2 alineado al estilo */
.select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    border-color: var(--cbc-border) !important;
    height: auto !important;
    padding: .35rem .5rem !important;
    min-height: 38px;
}

/* ── Buttons mejor jerarquía ────────────────────────────────────────────── */
.btn {
    font-size: .85rem;
    letter-spacing: .01em;
}
.btn-lg {
    padding: .75rem 1.5rem;
    font-size: .95rem;
}
.btn-sm {
    padding: .35rem .8rem;
    font-size: .78rem;
}

/* CTA principales */
.btn-primary {
    box-shadow: 0 4px 12px rgba(var(--cbc-primary-rgb), .25);
}
.btn-primary:hover {
    box-shadow: 0 6px 16px rgba(var(--cbc-primary-rgb), .35);
    transform: translateY(-1px);
}

.btn-secondary {
    box-shadow: 0 4px 12px rgba(var(--cbc-secondary-rgb), .25);
}
.btn-secondary:hover {
    box-shadow: 0 6px 16px rgba(var(--cbc-secondary-rgb), .35);
    transform: translateY(-1px);
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--cbc-text);
}
.empty-state i {
    font-size: 3.5rem;
    color: var(--cbc-border);
    display: block;
    margin-bottom: 1rem;
}
.empty-state h5 {
    color: var(--cbc-headings);
    font-weight: 600;
    margin-bottom: .5rem;
}
.empty-state p {
    font-size: .9rem;
    margin: 0;
}

/* ── Nav tabs (pestañas tipo underline) ─────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--cbc-border);
}
.nav-tabs .nav-link {
    border: none !important;
    color: var(--cbc-text);
    font-weight: 500;
    padding: .75rem 1.25rem;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    transition: all .2s ease;
}
.nav-tabs .nav-link:hover {
    color: var(--cbc-primary);
    background: transparent;
}
.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--cbc-primary) !important;
    border-bottom: 2px solid var(--cbc-primary) !important;
    font-weight: 600;
}

/* ── Avatares y badges en cards ─────────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    background: rgba(var(--cbc-primary-rgb), .08);
    color: var(--cbc-primary);
    font-weight: 600;
}

/* ── Login / Auth pages ─────────────────────────────────────────────────── */
.auth-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--cbc-primary) 0%, #2a3450 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
    padding: 2.5rem;
    overflow: hidden;
}

.auth-card .auth-brand {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-card .auth-brand img {
    max-width: 140px;
    margin-bottom: 1rem;
}
.auth-card .auth-brand .auth-tagline {
    color: var(--cbc-text);
    font-size: .8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.auth-card .auth-brand .auth-tagline strong {
    color: var(--cbc-secondary);
    font-weight: 600;
}

.auth-card h4,
.auth-card h3 {
    color: var(--cbc-headings);
    font-weight: 600;
    margin-bottom: .25rem;
    font-size: 1.4rem;
}

.auth-card .auth-subtitle {
    color: var(--cbc-text);
    font-size: .9rem;
    margin-bottom: 2rem;
}

/* ── Sidebar hover/active estados mejorados ─────────────────────────────── */
.main-sidebar .nav-item {
    margin: 2px 8px;
    border-radius: 8px;
}

.main-sidebar .nav-item.active {
    border-radius: 8px;
    overflow: hidden;
}

.main-sidebar .nav-item.active > .nav-link {
    background: rgba(248, 185, 64, .12) !important;
}

/* ── Notificaciones header ──────────────────────────────────────────────── */
.dropdown-menu.notifications {
    border: none;
    border-radius: 12px;
    box-shadow: var(--cbc-shadow);
    padding: 0;
    overflow: hidden;
}

.notification-header {
    background: var(--cbc-primary);
    color: #fff;
    padding: .85rem 1rem;
    font-weight: 600;
}

/* ── Stat hover ─────────────────────────────────────────────────────────── */
.dash-stat-card {
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--cbc-border);
    padding: 1.5rem;
    transition: all .25s ease;
    box-shadow: var(--cbc-shadow-sm);
    position: relative;
    overflow: hidden;
}

.dash-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cbc-secondary);
    transform: translateY(-3px);
    transition: transform .25s ease;
}

.dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cbc-shadow);
}
.dash-stat-card:hover::before {
    transform: translateY(0);
}

/* ── Helpers responsivos ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .main-content-title { font-size: 1.25rem !important; }
    .card-body { padding: 1rem !important; }
    .stat-card .stat-number,
    .dashboard-kpi h2 { font-size: 1.6rem !important; }
}

/* ── Sweet Alert con look Callpos ───────────────────────────────────────── */
.sa-confirm-button-container .confirm,
.swal-button--confirm {
    background-color: var(--cbc-primary) !important;
    box-shadow: 0 4px 12px rgba(var(--cbc-primary-rgb), .3);
}

/* ── Inicio sección landing ─────────────────────────────────────────────── */
.cbc-hero {
    background: linear-gradient(135deg, var(--cbc-primary) 0%, #2a3450 100%);
    color: #fff;
    padding: 4rem 0;
    border-radius: 0 0 24px 24px;
}

.cbc-hero h1 {
    color: #fff !important;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.cbc-hero .cbc-tag {
    color: var(--cbc-secondary);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: .75rem;
    margin-bottom: .75rem;
    display: block;
}

.cbc-hero p {
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    max-width: 540px;
    margin-bottom: 1.75rem;
}

.cbc-hero .btn-secondary {
    color: var(--cbc-primary) !important;
    font-weight: 600;
}

/* ========================================================================
   FASE 3 — Refinamientos cosméticos puntuales
   ======================================================================== */

/* ── Dashboard inicio: cards con fondo (superadmin) ─────────────────────── */
.back-card-1,
.back-card-2 {
    border-radius: 14px !important;
    border: none !important;
    overflow: hidden;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}

.back-card-1 {
    background: linear-gradient(135deg, var(--cbc-primary) 0%, #2a3450 100%) !important;
    box-shadow: 0 8px 24px rgba(var(--cbc-primary-rgb), .25);
}

.back-card-2 {
    background: linear-gradient(135deg, var(--cbc-secondary) 0%, #f4a020 100%) !important;
    box-shadow: 0 8px 24px rgba(var(--cbc-secondary-rgb), .3);
}

.back-card-1:hover,
.back-card-2:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(var(--cbc-primary-rgb), .3);
}

.back-card-1-1,
.back-card-2-1 {
    padding: 1.5rem 1.75rem !important;
    position: relative;
    z-index: 2;
}

.back-card-1::after,
.back-card-2::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    z-index: 1;
}

.back-card-1 .text-white,
.back-card-2 .text-white {
    color: #fff !important;
}

.back-card-1 p,
.back-card-2 p {
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    opacity: .85;
    margin-bottom: .5rem !important;
}

.back-card-1 h2,
.back-card-2 h2 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.back-card-2 h2,
.back-card-2 p {
    color: var(--cbc-primary) !important;
    opacity: 1;
}

/* ── Tarjeta "Saldo Actual" (distribuidor/puntoVenta) ───────────────────── */
.main-content-label {
    color: var(--cbc-headings) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .75rem !important;
}

.tx-24 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
}

.tx-13 {
    font-size: .82rem !important;
}

/* ── Transacciones recientes table ──────────────────────────────────────── */
.card-dashboard-calendar {
    padding: 1.5rem !important;
}

.card-dashboard-calendar .table {
    margin-top: .5rem !important;
}

.transcations tbody tr {
    border-bottom: 1px solid var(--cbc-border);
}
.transcations tbody tr:last-child {
    border-bottom: none;
}

.transcations h6 {
    font-weight: 600 !important;
    color: var(--cbc-headings) !important;
}

.main-img-user.avatar-md img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border: 2px solid var(--cbc-border);
}

/* ── Carousel indicators (más visibles) ─────────────────────────────────── */
.carousel-indicators li,
.dots-carousel {
    background: rgba(var(--cbc-primary-rgb), .3) !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
    border: none !important;
    transition: all .25s ease;
}
.carousel-indicators .active {
    background: var(--cbc-secondary) !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* ── Transacciones (vista principal) ────────────────────────────────────── */
/* "tipoTransaccion" badges */
.fa-level-up-alt.text-success,
.fa-level-down-alt.text-success {
    color: var(--cbc-success) !important;
}
.fa-level-up-alt.text-danger,
.fa-level-down-alt.text-danger {
    color: var(--cbc-danger) !important;
}
.fa-level-up-alt.text-warning,
.fa-level-down-alt.text-warning {
    color: var(--cbc-warning) !important;
}

/* ── Owl carousel (publicidad) ──────────────────────────────────────────── */
.owl-carousel .item img {
    border-radius: 14px !important;
    transition: transform .3s ease;
}
.owl-carousel .item:hover img {
    transform: scale(1.01);
}

/* ── Page title responsivo en dashboard ─────────────────────────────────── */
.main-content-title.tx-24 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--cbc-headings) !important;
    margin-bottom: .35rem !important;
    letter-spacing: -.01em;
}

/* ── Botones download de publicidad ─────────────────────────────────────── */
.btn-info {
    background-color: var(--cbc-info) !important;
    border-color: var(--cbc-info) !important;
    box-shadow: 0 4px 12px rgba(88, 186, 215, .3);
}

/* ── Subrayados sutiles entre secciones ────────────────────────────────── */
.row.row-sm + h2.main-content-title {
    margin-top: 2.5rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cbc-border);
}