/*
 * Estilos de los componentes reutilizables Pw* (ver Views/Shared/_Pw*.cshtml).
 * Aditivo: no reemplaza Style.css/Estilo.css, convive con Bootstrap 5.
 */

/* ---------- Botón (_PwButton.cshtml) ---------- */
.pw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--pw-radius-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--pw-shadow-xs);
    border: 2px solid transparent;
    transition: background-color .1s ease, color .1s ease, border-color .1s ease;
}

.pw-btn-sm {
    height: 32px;
    padding: 0 12px;
}

.pw-btn-lg {
    height: 40px;
    padding: 0 24px;
}

.pw-btn-icon {
    height: 44px;
    width: 44px;
    padding: 0;
}

.pw-btn .pw-btn-icon-el {
    width: 20px;
    height: 20px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pw-btn:disabled,
.pw-btn.disabled {
    opacity: .5;
    pointer-events: none;
}

/* Variantes: relleno sólido en reposo; en hover se invierte a fondo blanco +
   texto del color + anillo del color (firma visual descrita en DESIGN.md §3.1) */
.pw-btn--primary {
    background-color: var(--pw-primary);
    color: var(--pw-primary-fg);
}
.pw-btn--primary:hover {
    background-color: var(--pw-surface);
    color: var(--pw-primary);
    border-color: var(--pw-primary);
}

.pw-btn--secondary {
    background-color: var(--pw-secondary);
    color: var(--pw-secondary-fg);
}
.pw-btn--secondary:hover {
    background-color: var(--pw-surface);
    color: var(--pw-secondary);
    border-color: var(--pw-secondary);
}

.pw-btn--base {
    background-color: var(--pw-base);
    color: var(--pw-base-fg);
}
.pw-btn--base:hover {
    background-color: var(--pw-surface);
    color: var(--pw-base);
    border-color: var(--pw-base);
}

.pw-btn--error {
    background-color: var(--pw-error);
    color: var(--pw-error-fg);
}
.pw-btn--error:hover {
    background-color: var(--pw-surface);
    color: var(--pw-error);
    border-color: var(--pw-error);
}

.pw-btn--success {
    background-color: var(--pw-success);
    color: var(--pw-success-fg);
}
.pw-btn--success:hover {
    background-color: var(--pw-surface);
    color: var(--pw-success);
    border-color: var(--pw-success);
}

.pw-btn--warning {
    background-color: var(--pw-warning);
    color: var(--pw-warning-fg);
}
.pw-btn--warning:hover {
    background-color: var(--pw-surface);
    color: var(--pw-warning);
    border-color: var(--pw-warning);
}

/* Modificador puntual (ExtraCssClass) para botones warning "sueltos" fuera de una fila
   de filtros -- el relleno sólido de .pw-btn--warning se ve muy fuerte cuando aparece solo
   (ej. "Contratos Expirados sin Atender" en Contratos/Index.cshtml). No se cambia la base
   porque .pw-btn--warning también se usa en los 3 botones de filtro de estado del módulo
   Aprobar, donde el relleno sólido sí funciona bien. */
.pw-btn--warning-soft {
    background-color: var(--pw-warning-fg);
    color: var(--pw-warning);
    border: 1px solid var(--pw-warning);
}
.pw-btn--warning-soft:hover {
    background-color: var(--pw-warning);
    color: var(--pw-warning-fg);
    border-color: var(--pw-warning);
}

.pw-btn--tertiary {
    background-color: var(--pw-tertiary);
    color: var(--pw-tertiary-fg);
}
.pw-btn--tertiary:hover {
    background-color: var(--pw-surface);
    color: var(--pw-tertiary);
    border-color: var(--pw-tertiary);
}

/* ---------- Badge (_PwBadge.cshtml) ---------- */
.pw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--pw-radius-sm);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 16px;
    white-space: nowrap;
}
.pw-badge .pw-badge-icon {
    width: 14px;
    height: 14px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pw-badge--success { background-color: var(--pw-success); color: var(--pw-success-fg); }
.pw-badge--error    { background-color: var(--pw-error);   color: var(--pw-error-fg); }
.pw-badge--warning  { background-color: var(--pw-warning); color: var(--pw-warning-fg); }
.pw-badge--info     { background-color: var(--pw-muted-bg); color: var(--pw-muted); }
.pw-badge--primary  { background-color: var(--pw-primary); color: var(--pw-primary-fg); }
.pw-badge--secondary{ background-color: var(--pw-secondary); color: var(--pw-secondary-fg); }

/* ---------- Acciones de tabla (_PwTableActions.cshtml) ---------- */
.pw-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.pw-table-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    color: var(--pw-base);
    text-decoration: none;
    transition: color .1s ease;
}
.pw-table-actions a.pw-action--primary:hover   { color: var(--pw-primary); }
.pw-table-actions a.pw-action--secondary:hover { color: var(--pw-secondary); }
.pw-table-actions a.pw-action--error:hover     { color: var(--pw-error); }

/* ---------- Ícono de línea (_PwIcon.cshtml) ---------- */
.pw-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Tarjeta de acceso rápido del Home ----------
   Refresco visual 2026-08-25 (pedido de Jose, "otro estilo de card"): se
   mantiene el layout horizontal ícono+título+CTA (probado en ~180 vistas,
   necesario para que quepan muchas tarjetas por fila en dashboards densos
   como Tablas/Index con 16) -- lo que cambia es la terminación: más
   profundidad de sombra, el ícono pasa de tinte plano a chip sólido tipo
   "app icon", y el CTA gana un anillo visible en reposo en vez de aparecer
   solo al pasar el mouse. Cero cambios de markup en _PwHomeCard.cshtml. */
.pw-home-card {
    display: flex;
    /* nowrap a propósito: el CTA "Acceder" nunca debe caer a una segunda
       línea (se veía "roto" con títulos largos como "Libro Remuneraciones
       SII"). Si el título no entra, es .pw-home-card-left/h3 quien se
       angosta o el texto quien hace wrap interno -- el CTA queda siempre
       fijo a la derecha, ver .pw-home-card-cta más abajo. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    height: 100%;
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-xl);
    padding: 20px 22px;
    box-shadow: var(--pw-shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.pw-home-card:hover {
    box-shadow: var(--pw-shadow-lg);
    border-color: var(--pw-secondary);
    transform: translateY(-3px);
}
.pw-home-card .pw-home-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.pw-home-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--pw-radius-lg);
    background: linear-gradient(155deg, var(--pw-secondary) 0%, #2E46BD 100%);
    color: var(--pw-secondary-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    box-shadow: 0 3px 8px rgba(68, 110, 238, .28);
    transition: transform .2s ease;
}
.pw-home-card:hover .pw-home-icon {
    transform: scale(1.05);
}
.pw-home-icon img,
.pw-home-icon svg {
    width: 100%;
    height: 100%;
}
.pw-home-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    min-width: 0;
    /* normal (no break-word): si una palabra no entra, que se salga un
       poco de la tarjeta -- se ve raro en un caso extremo, pero es mil
       veces mejor que el bug real que tuvimos: con break-word + nowrap
       en .pw-home-card, en resoluciones intermedias el texto se cortaba
       letra por letra formando una columna vertical ilegible. */
    overflow-wrap: normal;
    word-break: normal;
    color: var(--pw-text);
}
/* CTA solo-ícono (antes decía "Acceder" en texto): al ser un texto de
   ancho variable competía por espacio con el título y en pantallas
   angostas + flex-wrap:nowrap terminaba aplastando el h3 hasta partirlo
   letra por letra (ver comentario arriba). Un ícono de tamaño fijo no
   compite por espacio y sigue siendo un affordance claro de "clickeable".
   El texto "Acceder" se preserva oculto visualmente (.visually-hidden,
   ver _PwHomeCard.cshtml) para lectores de pantalla. Anillo visible en
   reposo (antes solo aparecía tinte al hover) para que se lea como botón
   incluso sin interactuar. */
.pw-home-card .pw-home-card-cta {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--pw-border);
    color: var(--pw-secondary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.pw-home-card:hover .pw-home-card-cta {
    background: var(--pw-secondary);
    border-color: var(--pw-secondary);
    color: var(--pw-secondary-fg) !important;
    transform: translateX(3px);
}

/* Espacio vertical entre tarjetas cuando el grid envuelve a una 2da/3ra línea
   dentro de un mismo .row (ej. Tablas/Index.cshtml con 15 tarjetas en un solo
   row, o cualquier dashboard con más tarjetas de las que entran en una fila):
   Bootstrap no agrega separación vertical entre columnas que wrappean, solo
   gutter horizontal -- sin esto las tarjetas quedan "pegadas" entre sí verticalmente.
   Al vivir en .pw-home-card-col (la columna que genera _PwHomeCard.cshtml en
   TODAS las vistas) esto se corrige de una sola vez en toda la app. */
.pw-home-card-col {
    margin-bottom: 20px;
}

/* Tarjetas con logo de institución externa (SII, Previred, Mi DT, GeoVictoria,
   Codelco): en vez de forzar el logo dentro del cuadrado de ícono (se ve mal,
   cada logo tiene proporción y color propios), el logo se usa como marca de
   agua de fondo, sangrando por el borde derecho de la tarjeta. */
.pw-home-card--logo {
    position: relative;
    overflow: hidden;
}
.pw-home-card--logo::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 65%;
    background-image: var(--pw-home-card-logo);
    background-repeat: no-repeat;
    background-position: right -14px center;
    background-size: contain;
    opacity: .07;
    pointer-events: none;
}
.pw-home-card--logo .pw-home-card-left,
.pw-home-card--logo .pw-home-card-cta {
    position: relative;
    z-index: 1;
}

/* Tarjeta de alerta (ej. "Contratos Sin Configurar"): mismo layout de
   _PwHomeCard pero resaltada en tono warning, con conteos a la derecha
   en vez del CTA "Acceder". */
.pw-home-card--warning {
    background: var(--pw-warning-fg);
    border-color: var(--pw-warning);
}
.pw-home-card--warning:hover {
    border-color: var(--pw-warning);
}
.pw-home-card--warning .pw-home-icon {
    /* Mismo tratamiento (gradiente + sombra tintada) que .pw-home-icon default,
       en tono warning -- antes era solo un tinte al 12% y quedaba "descolorido"
       al lado de las tarjetas vecinas con ícono en gradiente sólido. */
    background: linear-gradient(155deg, var(--pw-warning) 0%, #5C4503 100%);
    color: var(--pw-warning-fg);
    box-shadow: 0 3px 8px rgba(133, 100, 4, .35);
}
.pw-home-card-warning-items {
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--pw-warning);
    text-align: right;
}

/* ---------- Logo de marca arriba del sidebar (reemplaza bg-light fijo) ----------
   El logo en sí (PAYWILLLOGO.png) sigue siendo el mismo asset -- esto solo evita
   que el bloque que lo contiene quede blanco "quemado" en modo noche. */
.pw-sidebar-brand {
    background-color: var(--pw-surface);
}

/* ---------- Íconos del menú lateral ---------- */
.pw-sidebar-icon {
    width: 17px;
    height: 17px;
    flex: none;
    display: inline-flex;
}

/* ---------- Ítems del menú lateral (sobrescribe .activeMenu de simple-sidebar.css) ---------- */
.pw-sidebar-item {
    margin: 2px 10px;
    border-radius: var(--pw-radius-md);
    transition: background-color .15s ease;
}
.pw-sidebar-item .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px !important;
    color: #47536B;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--pw-radius-md);
}
.pw-sidebar-item:hover {
    background-color: var(--pw-muted-bg);
}
.pw-sidebar-item:hover .nav-link {
    color: var(--pw-secondary);
}
.pw-sidebar-item.activeMenu {
    background: rgba(255, 93, 54, .1);
    box-shadow: inset 3px 0 0 var(--pw-primary);
}
.pw-sidebar-item.activeMenu .nav-link {
    color: var(--pw-primary) !important;
    font-weight: 700;
}
.pw-sidebar-item.activeMenu:hover {
    background: rgba(255, 93, 54, .16);
}

/* ---------- Toggle modo día/noche (ver docs/rediseno-ui-dark-mode-plan.md) ---------- */
/* Menor a 768px: el navbar-collapse solo se muestra vía JS (hamburguesa), así
   que el toggle queda fijo al viewport para seguir visible con el menú cerrado. */
.pw-theme-toggle {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 1060;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 16px;
    flex: none;
    transition: background-color .15s ease;
}
.pw-theme-toggle:hover {
    background: rgba(255, 255, 255, .28);
}

/* >=768px: el navbar-collapse ya se muestra siempre (ver .navbar-collapse.collapse
   en bootstrap.min.css), así que el toggle se integra al flujo normal junto al
   resto de los íconos en vez de flotar fijo sobre el viewport (se veía cortado
   contra el borde derecho y podía superponerse con el dropdown de usuario). */
@media (min-width: 768px) {
    .pw-topbar-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
    .pw-topbar-actions-row {
        flex: 1 1 auto;
        min-width: 0;
    }
    .pw-theme-toggle {
        position: static;
    }
}

/* ---------- Toggle modo día/noche standalone (Login/Index.cshtml, SeleccionarEmpresa.cshtml) ----------
   Estas páginas no tienen el navbar/.pw-topbar-actions del resto de la app,
   así que el botón queda flotando fijo en la esquina siempre (no solo en
   mobile como en _LayoutV4.cshtml) -- se pisa el position:static de
   >=768px de arriba. */
.pw-theme-toggle--standalone {
    position: fixed !important;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, .18);
    color: #fff;
}
.pw-theme-toggle--standalone:hover {
    background: rgba(0, 0, 0, .3);
}

/* ---------- Ocultar/mostrar menú lateral (botón #pwSidebarToggle, ver pw-sidebar.js) ----------
   Solo aplica en escritorio (>=lg): abajo de ese ancho el sidebar ya está
   oculto por Bootstrap (.d-none.d-lg-block) y se navega por la hamburguesa
   del navbar, así que la clase no tiene nada que ocultar ahí. */
html.pw-sidebar-collapsed .pw-sidebar-col {
    display: none !important;
}
html.pw-sidebar-collapsed .pw-main-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* #wrapper-content trae un left:21% fijo desde Style.css (@media min-width:1000px),
   heredado de cuando el sidebar era position:fixed y el contenido necesitaba ese
   hueco reservado a la izquierda por fuera del grid. Con el grid actual
   (.pw-sidebar-col + .pw-main-col como columnas Bootstrap) ese espacio ya lo
   reserva col-lg-10 solo -- el left:21% queda sumado de más SIEMPRE (colapsado
   o no), corriendo el contenido hacia la derecha. Se anula sin condicionarlo
   al colapso. */
#wrapper-content {
    left: 0 !important;
}
/* Salvavidas: al pasar de 10/12 a 100% de ancho, cualquier grilla interna de una
   vista (ej. Home/Index.cshtml, con su propio row de dashboard + panel de empresa)
   puede desbordar por un pixel de redondeo y generar scroll horizontal -- eso se ve
   como contenido "corrido"/cortado en el borde derecho. Se corta acá en vez de
   perseguir cada vista una por una. */
html.pw-sidebar-collapsed body {
    overflow-x: hidden;
}

/* ---------- Botón "edge" para colapsar/expandir el sidebar ----------
   Antes vivía en la topbar (icono sueltas junto al tema/usuario); se movió acá
   pegado al borde del propio menú, patrón común en dashboards modernos.
   Son DOS botones porque .pw-sidebar-col se oculta con display:none al
   colapsar y se lleva puesto cualquier botón que esté adentro:
   - #pwSidebarToggle vive DENTRO de .pw-sidebar-col (se esconde con él).
   - #pwSidebarToggleExpand vive fijo al viewport, oculto por defecto y
     visible solo cuando está colapsado, para poder volver a abrirlo. */
/* position:relative (sin sticky) + las utilidades Bootstrap vh-100/overflow-auto
   (puestas en el HTML) hacían que el sidebar midiera 100vh SIEMPRE, sin pegarse
   al viewport: cuando la tabla del contenido central era más alta que la pantalla
   y la página scrolleaba, el sidebar (en flujo normal) se iba para arriba con
   todo lo demás pero sin achicarse, dejando un hueco debajo y asomando su propio
   scroll interno a mitad de página. Con sticky, el sidebar siempre ocupa
   exactamente el alto visible bajo el navbar (fixed-top), sin importar cuánto
   scrollee el contenido central. El top:3em replica el margin-top que
   #content-side ya usa (Style.css) para no quedar tapado por el navbar. */
.pw-sidebar-col {
    position: sticky;
    top: 3em;
    height: calc(100vh - 3em);
    overflow-y: auto;
    /* overflow-x: hidden (no solo ocultar el scrollbar) porque el botón de abajo
       sobresale a propósito del borde derecho (right:-16px) -- si el eje horizontal
       queda en "auto"/"scroll", ese sobresaliente genera scroll horizontal real,
       y en motores que no soportan ::-webkit-scrollbar termina mostrando el
       scrollbar nativo del sistema en vez de quedar oculto. */
    overflow-x: hidden;
}
.pw-sidebar-edge-toggle {
    position: absolute;
    top: 28px;
    right: -16px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pw-surface, #fff);
    border: 1px solid var(--pw-border, #e2e5f1);
    color: var(--pw-text, #4b5563);
    box-shadow: 0 2px 6px rgba(20, 23, 43, .15);
    cursor: pointer;
    z-index: 20;
    transition: background-color .15s ease, color .15s ease, width .18s ease, border-radius .18s ease;
}
.pw-sidebar-edge-toggle i {
    font-size: 13px;
}
.pw-sidebar-edge-toggle:hover {
    background: var(--pw-primary, #446ef0);
    border-color: var(--pw-primary, #446ef0);
    color: #fff;
    width: 46px;
    border-radius: 16px;
}
.pw-sidebar-edge-toggle--expand {
    display: none !important;
    position: fixed;
    top: 80px;
    left: 10px;
}
html.pw-sidebar-collapsed .pw-sidebar-edge-toggle--expand {
    display: inline-flex !important;
}

/* El sidebar tiene su propio scroll vertical (overflow-y:auto arriba) cuando el
   menú no entra completo en su alto -- sin esto, al llegar al tope o al fondo
   de SU scroll, el navegador seguía "encadenando" el scroll hacia el contenido
   central, haciéndolo bajar solo. Se mantiene oculto visualmente (aunque ya no
   hace falta para el eje horizontal, que ahora es overflow-x:hidden real). */
.pw-sidebar-col {
    overscroll-behavior: contain;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge legacy */
}
.pw-sidebar-col::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge Chromium */
}

/* ---------- Botón de cerrar modal legacy (Bootstrap 4 `.close` + `×`) ----------
   El proyecto corre Bootstrap 5.0.2, que reemplazó `.close` por `.btn-close` (SVG) y no
   trae ningún estilo para la clase vieja: ~70 vistas con `<button class="close">` quedan
   sin estilo, mostrando el botón nativo del navegador. Se restaura el look de Bootstrap 4
   con `var(--pw-text)`, que ya es theme-aware, así que un solo bloque cubre ambos temas
   sin tocar el markup de cada modal. */
.modal-header .close {
    /* `order` (no `margin-left: auto`) porque el orden del botón vs. el <h4> en el
       markup varía entre modales (algunos lo ponen antes del título, otros después) --
       con margin-left:auto el botón terminaba pegado al título cuando iba primero en
       el DOM. `order: 2` lo manda siempre al extremo derecho del header sin importar
       dónde esté en el HTML. */
    order: 2;
    padding: 0.25rem;
    margin: -0.25rem -0.25rem -0.25rem 1rem;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pw-text);
    opacity: .6;
}
.modal-header .close:hover,
.modal-header .close:focus {
    color: var(--pw-text);
    opacity: 1;
    outline: none;
}

/* ---------- Modal de confirmación global (_PwConfirmModal.cshtml) ---------- */
#PwConfirmModal .modal-content {
    border-radius: var(--pw-radius-lg);
    box-shadow: var(--pw-shadow-lg);
    border: none;
}
#PwConfirmModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}
#PwConfirmModal .pw-confirm-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
#PwConfirmModal .pw-confirm-description {
    font-size: 14px;
    color: var(--pw-muted);
    margin-top: 8px;
}
#PwConfirmModal .modal-footer {
    border-top: none;
    justify-content: flex-end;
    gap: 12px;
}

/* ---------- Marco de logo (_PwHomeCard n/a: usado directo en Home/_LayoutV4)
   Logos de empresa/marca que llegan como imagen externa (subidos por el
   cliente, o el isotipo de Bicom) suelen traer su propio fondo blanco
   "quemado" en el PNG -- no se puede sacar por CSS. En vez de dejarlo
   flotando como un rectángulo blanco crudo sobre el fondo oscuro, se lo
   enmarca en una tarjeta liviana con borde/sombra/radio para que se lea
   como una placa de marca a propósito, no como un resto del modo día. */
.pw-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-lg);
    box-shadow: var(--pw-shadow-xs);
    padding: 14px;
}
[data-theme="dark"] .pw-logo-chip {
    background-color: #EDEFF3;
}
.pw-logo-chip img {
    display: block;
    max-width: 100%;
}

/* ---------- Título de sección de dashboards (ej. "Informes Generales",
   "Contabilización a Bicom") -- reemplaza el <h3><i class="fa-solid..."></i></h3>
   suelto que quedaba de Bootstrap puro. Usa el mismo lenguaje visual que
   .pw-home-icon (chip redondeado con tinte del color secundario). */
.pw-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 16px;
}
.pw-section-title:first-child {
    margin-top: 4px;
}
.pw-section-title-icon {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: var(--pw-radius-md);
    background: rgba(68, 110, 238, .1);
    color: var(--pw-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw-section-title-icon .pw-icon {
    width: 100%;
    height: 100%;
}
.pw-section-title h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pw-text);
}

/* ---------- Respiro al final del área de contenido ----------
   #wrapper-content solo traía pt-2 (ver _LayoutV4.cshtml): la última fila
   de tarjetas quedaba pegada al borde inferior del contenedor, sensación
   de "apretado" reportada en varios dashboards (Informes, Contabilización). */
#wrapper-content {
    padding-bottom: 40px;
}