/* CSS/page-head.css — Icono de encabezado unificado para todas las vistas.
   Mismo tamaño (44px), misma forma y el mismo tinte suave del color principal, sin brillo ni sombra.
   Se carga al final para ganar a los estilos propios de cada módulo. */

.pg-ico,
.nm-title-icon,
.bal-head-icon,
#balance-view .bal-head-icon,
.cfx-title-icon,
.settings-page-icon,
.inv-header-icon,
.tax-hero-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    /* Efecto 3D suave: brillo arriba, sombra interior abajo y degradado azul→violeta apagado (más sobrio que el original de Nómina) */
    background:
        radial-gradient(120% 90% at 28% 0%, rgba(255, 255, 255, 0.20), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #0d6efd 78%, #0b1020), color-mix(in srgb, #7c4dff 74%, #0b1020)) !important;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -3px 6px rgba(0, 0, 0, 0.22),
        0 8px 16px -8px rgba(60, 80, 200, 0.45) !important;
}

.pg-ico i, .pg-ico svg, .pg-ico .lucide,
.nm-title-icon i, .nm-title-icon svg, .nm-title-icon .lucide,
.bal-head-icon i, .bal-head-icon svg,
.cfx-title-icon i, .cfx-title-icon svg, .cfx-title-icon .lucide,
.settings-page-icon i, .settings-page-icon svg,
.inv-header-icon i, .inv-header-icon svg,
.tax-hero-icon i, .tax-hero-icon svg, .tax-hero-icon .lucide {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    color: inherit !important;
    stroke: currentColor;
}

@media (max-width: 768px) {
    .pg-ico,
    .nm-title-icon,
    .bal-head-icon,
    #balance-view .bal-head-icon,
    .cfx-title-icon,
    .settings-page-icon,
    .inv-header-icon,
    .tax-hero-icon {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
    }
}