/* ==========================================================
   Fresoft Fit - Tipografía estilo Gmail sin romper iconos
   Ruta: assets/css/gmail_font_overrides.css
   Incluir después de admin_catalogos.css
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --ff-font-google: 'Roboto', Arial, Helvetica, sans-serif;
    --ff-text-primary: #202124;
    --ff-text-secondary: #5f6368;
    --ff-text-muted: #80868b;
}

/* Aplicar Roboto solamente a texto y controles reales.
   No usar selectores globales como *, div, span o .sidebar * porque rompen Font Awesome. */
html,
body,
button,
input,
select,
textarea,
table,
label,
a,
p,
small,
strong,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.module-title,
.catalog-title,
.content-title,
.page-subtitle,
.module-subtitle,
.card-title,
.card-subtitle,
.form-title,
.section-title,
.sidebar-link,
.sidebar-link span,
.brand-name,
.brand-subtitle,
.sidebar-section,
.sidebar-card-title,
.sidebar-card-text,
.topbar-search input,
.topbar-search span,
.admin-profile-text,
.btn,
.btn-primary,
.btn-soft,
.btn-outline,
.form-control,
.form-select {
    font-family: var(--ff-font-google) !important;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--ff-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

h1,
.page-title,
.module-title,
.catalog-title,
.content-title {
    color: var(--ff-text-primary);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.25;
}

h2,
h3,
.card-title,
.form-title,
.section-title {
    color: var(--ff-text-primary);
    font-weight: 500;
    letter-spacing: .1px;
}

.subtitle,
.page-subtitle,
.module-subtitle,
.card-subtitle,
.helper-text,
small,
.text-muted {
    color: var(--ff-text-secondary);
    font-size: 13px;
    font-weight: 400;
}

.sidebar .brand-name,
.sidebar-logo-title,
.app-name {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
}

.sidebar .brand-subtitle,
.sidebar-logo-subtitle {
    color: var(--ff-text-secondary);
    font-size: 12px;
    font-weight: 400;
}

.sidebar a,
.sidebar .nav-link,
.sidebar-menu a,
.menu-link {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1px;
}

.topbar input,
.search-input,
.input-search {
    font-size: 14px;
    font-weight: 400;
}

.user-name,
.profile-name,
.admin-name,
.admin-profile strong {
    color: var(--ff-text-primary);
    font-size: 14px;
    font-weight: 500;
}

.user-email,
.profile-email,
.admin-email,
.admin-profile span {
    color: var(--ff-text-secondary);
    font-size: 12px;
    font-weight: 400;
}

.form-label,
label {
    color: var(--ff-text-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1px;
}

.form-control,
.form-select,
input,
select,
textarea {
    color: var(--ff-text-primary);
    font-size: 14px;
    font-weight: 400;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ff-text-muted);
    font-weight: 400;
}

.btn,
button,
.button,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-soft {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
}

table,
.table,
.data-table {
    color: var(--ff-text-primary);
    font-size: 13px;
    font-weight: 400;
}

.table thead th,
table thead th,
th {
    color: var(--ff-text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
}

.table tbody td,
table tbody td,
td {
    color: var(--ff-text-primary);
    font-size: 13px;
    font-weight: 400;
}

.badge,
.status-badge,
.estado-badge {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1px;
}

.metric-title,
.stat-title,
.summary-title {
    color: var(--ff-text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2px;
}

/* ==========================================================
   Protección de iconos
   Esto corrige los cuadros/rectángulos cuando una fuente global
   pisa las familias de Font Awesome.
   ========================================================== */
i[class^="fa-"],
i[class*=" fa-"],
span[class^="fa-"],
span[class*=" fa-"],
.fa,
.fas,
.fa-solid,
.far,
.fa-regular,
.fab,
.fa-brands {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing: 0 !important;
}

.fa,
.fas,
.fa-solid,
i.fa-solid,
span.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far,
.fa-regular,
i.fa-regular,
span.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab,
.fa-brands,
i.fa-brands,
span.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.sidebar-link i,
.catalog-tabs .tab i,
.topbar i,
.icon-btn i,
.btn i,
.btn-primary i,
.btn-soft i,
.input-icon i,
.sidebar-card-icon i {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    font-size: 14px;
}