/* ============================================================
   ENHANCEMENTS — JobOffers
   Dark mode, toasts, skeleton loaders, progress bar, favorites
   ============================================================ */

/* ──────────────────────────────────────────────
   DARK MODE VARIABLES
   ────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg-base:     #0f1117;
    --color-bg-surface:  #1a1f2e;
    --color-bg-elevated: #222740;
    --color-bg-hover:    #2a3050;
    --color-bg-deep:     #131825;

    --color-text-primary:   #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted:     #94a3b8;
    --color-white: #1a1f2e;
    --color-dark:  #f1f5f9;

    --color-border:        #2d3748;
    --color-border-strong: #4a5568;
    --color-border-focus:  rgba(93, 147, 215, 0.45);

    --shadow-sm:  0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md:  0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg:  0 10px 24px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);

    /* Escala de grises invertida — cubre todo el CSS del área trabajador */
    --color-gray-50:  #1a1f2e;
    --color-gray-100: #222740;
    --color-gray-200: #2d3748;
    --color-gray-300: #3d4a5c;
    --color-gray-400: #94a3b8;
    --color-gray-500: #94a3b8;
    --color-gray-600: #cbd5e1;
    --color-gray-700: #e2e8f0;
    --color-gray-900: #f1f5f9;
    --color-red-50:   rgba(239, 68, 68, 0.12);
    --color-red-200:  rgba(239, 68, 68, 0.3);
    --color-red-600:  #f87171;
}

/* Cards/surfaces in dark mode */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .oferta-card,
[data-theme="dark"] .jd-card,
[data-theme="dark"] .jd-hero,
[data-theme="dark"] .jd-action-card,
[data-theme="dark"] .jd-sim-card,
[data-theme="dark"] .profile-card-compact,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .ranking-item,
[data-theme="dark"] .topbar {
    background: var(--color-bg-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .page-content,
[data-theme="dark"] .admin-main,
[data-theme="dark"] body.app-body {
    background: var(--color-bg-base) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] li {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .stat-change,
[data-theme="dark"] .jd-fact-label,
[data-theme="dark"] .jd-company,
[data-theme="dark"] .jd-puesto {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .data-table thead {
    background: var(--color-bg-elevated) !important;
}

[data-theme="dark"] .data-table tbody tr:hover {
    background: var(--color-bg-hover) !important;
}

[data-theme="dark"] .filter-select-modern,
[data-theme="dark"] .main-search-input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .jd-fact {
    border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] .jd-fact-value {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .jd-text {
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .ranking-fill {
    background: var(--color-primary-light) !important;
}

[data-theme="dark"] .inscripcion-item {
    border-color: var(--color-border) !important;
    background: var(--color-bg-elevated) !important;
}

/* ──────────────────────────────────────────────
   DARK MODE — BADGES
   ────────────────────────────────────────────── */
[data-theme="dark"] .badge-trabajador {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}
[data-theme="dark"] .badge-empresa {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
[data-theme="dark"] .badge-administrador,
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-abierta,
[data-theme="dark"] .badge-activa,
[data-theme="dark"] .badge-aceptada {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-cerrada,
[data-theme="dark"] .badge-inactiva,
[data-theme="dark"] .badge-rechazada {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
[data-theme="dark"] .badge-pendiente {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
[data-theme="dark"] .badge-en_proceso {
    background: rgba(14, 165, 233, 0.18) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
}

/* Badges del área trabajador (clases distintas a las del admin) */
[data-theme="dark"] .badge-warning {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .badge-error {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .badge-info {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .badge-secondary {
    background: rgba(100, 116, 139, 0.25) !important;
    color: #cbd5e1 !important;
}

/* ──────────────────────────────────────────────
   DARK MODE — ALERTS
   ────────────────────────────────────────────── */
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-left-color: #ef4444 !important;
}
[data-theme="dark"] .alert-danger svg,
[data-theme="dark"] .alert-error svg { stroke: #fca5a5 !important; }

[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
    border-left-color: #10b981 !important;
}
[data-theme="dark"] .alert-success svg { stroke: #6ee7b7 !important; }

[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fcd34d !important;
    border-left-color: #f59e0b !important;
}
[data-theme="dark"] .alert-warning svg { stroke: #fcd34d !important; }

[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93c5fd !important;
    border-left-color: #3b82f6 !important;
}
[data-theme="dark"] .alert-info svg { stroke: #93c5fd !important; }

/* ──────────────────────────────────────────────
   DARK MODE — NOTIFICATION ICONS
   ────────────────────────────────────────────── */
[data-theme="dark"] .notification-icon-info    { background: rgba(59, 130, 246, 0.2)  !important; color: #93c5fd !important; }
[data-theme="dark"] .notification-icon-warning { background: rgba(245, 158, 11, 0.2)  !important; color: #fcd34d !important; }
[data-theme="dark"] .notification-icon-success { background: rgba(16, 185, 129, 0.2)  !important; color: #6ee7b7 !important; }
[data-theme="dark"] .notification-icon-error   { background: rgba(239, 68, 68, 0.2)   !important; color: #fca5a5 !important; }

/* ──────────────────────────────────────────────
   DARK MODE — TARJETAS Y CONTENEDORES (fondos blancos hardcoded)
   Cubre tanto el área admin como el área trabajador
   ────────────────────────────────────────────── */
[data-theme="dark"] .search-filter-section,
[data-theme="dark"] .search-filter-container,
[data-theme="dark"] .item-card,
[data-theme="dark"] .stat-mini,
[data-theme="dark"] .dashboard-section,
[data-theme="dark"] .notificacion-item,
[data-theme="dark"] .inscripcion-card,
[data-theme="dark"] .card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-card-compact {
    background: var(--color-bg-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* Cabeceras y pies de tarjeta con fondo gris claro */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header-user,
[data-theme="dark"] .card-header-oferta,
[data-theme="dark"] .card-header-categoria,
[data-theme="dark"] .oferta-card-header,
[data-theme="dark"] .inscripcion-card-header,
[data-theme="dark"] .profile-actions-compact {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

/* Notificaciones no leídas */
[data-theme="dark"] .notificacion-no-leida {
    background: rgba(29, 67, 112, 0.22) !important;
    border-left-color: var(--color-primary) !important;
}

/* Stat-mini activo (filtro seleccionado) */
[data-theme="dark"] .stat-mini.active {
    background: rgba(29, 67, 112, 0.25) !important;
    border-color: var(--color-primary) !important;
}

/* Iconos de stat con fondos de color pastel */
[data-theme="dark"] .stat-primary .stat-icon { background: rgba(59, 130, 246, 0.18) !important; }
[data-theme="dark"] .stat-info    .stat-icon { background: rgba(14, 165, 233, 0.18) !important; }
[data-theme="dark"] .stat-warning .stat-icon { background: rgba(245, 158, 11, 0.18) !important; }
[data-theme="dark"] .stat-success .stat-icon { background: rgba(16, 185, 129, 0.18) !important; }

/* Mensajes de estado de inscripción (hardcoded) */
[data-theme="dark"] .inscripcion-aceptada-msg {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
    border-top-color: var(--color-border) !important;
}
[data-theme="dark"] .inscripcion-rechazada-msg {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-top-color: var(--color-border) !important;
}
[data-theme="dark"] .inscripcion-estado-badge {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}

/* Secciones de formulario */
[data-theme="dark"] .form-section {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

/* ──────────────────────────────────────────────
   DARK MODE — FORMULARIOS
   ────────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-select {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .filter-select:focus {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-focus) !important;
}
[data-theme="dark"] .form-control.error,
[data-theme="dark"] .form-select.error {
    background: rgba(239, 68, 68, 0.1) !important;
}
[data-theme="dark"] .form-control.success,
[data-theme="dark"] .form-select.success {
    background: rgba(16, 185, 129, 0.1) !important;
}
[data-theme="dark"] select option,
[data-theme="dark"] .form-select option,
[data-theme="dark"] .filter-select option {
    background: #222740;
    color: #f1f5f9;
}

/* ──────────────────────────────────────────────
   DARK MODE TOGGLE BUTTON
   ────────────────────────────────────────────── */
.dark-mode-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-elevated);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.dark-mode-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.dark-mode-toggle .icon-sun { display: none; }
.dark-mode-toggle .icon-moon { display: block; }

[data-theme="dark"] .dark-mode-toggle .icon-sun  { display: block; }
[data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; }

/* ──────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: calc(100vw - 48px);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.9rem;
    font-family: var(--font-body);
    animation: toastIn 0.35s cubic-bezier(.34,1.56,.64,1) forwards;
    position: relative;
    overflow: hidden;
    min-height: 54px;
}

.toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.3);
    animation: toastProgress 4s linear forwards;
    width: 100%;
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-body {
    flex: 1;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.toast-close:hover { color: #fff; }

.toast-success { border-left: 4px solid #10b981; }
.toast-success .toast-icon { color: #10b981; }

.toast-error   { border-left: 4px solid #ef4444; }
.toast-error .toast-icon   { color: #ef4444; }

.toast-warning { border-left: 4px solid #f59e0b; }
.toast-warning .toast-icon { color: #f59e0b; }

.toast-info    { border-left: 4px solid #3b82f6; }
.toast-info .toast-icon    { color: #3b82f6; }

.toast.dismissing {
    animation: toastOut 0.25s ease forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(60px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(60px) scale(0.95); }
}

@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

@media (max-width: 480px) {
    #toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ──────────────────────────────────────────────
   SKELETON LOADERS
   ────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 6px;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #222740 25%, #2a3050 50%, #222740 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
}

.skeleton-card {
    background: var(--color-bg-surface);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
}

.skeleton-line-sm  { height: 10px; }
.skeleton-line-lg  { height: 20px; }
.skeleton-line-btn { height: 38px; border-radius: 8px; }

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-badge {
    width: 80px;
    height: 24px;
    border-radius: 20px;
}

/* Skeleton grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* Skeleton hidden by default; shown only during AJAX */
.skeleton-loader-wrap { display: none; }
.skeleton-loader-wrap.show { display: block; }
/* Real content is visible by default */
.real-content { display: grid !important; }

/* ──────────────────────────────────────────────
   PROFILE COMPLETION PROGRESS BAR
   ────────────────────────────────────────────── */
.profile-completion-widget {
    background: var(--color-bg-surface);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
}

.profile-completion-widget h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.progress-bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-bg-deep);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transition: width 1s cubic-bezier(.25,.46,.45,.94);
}

.progress-bar-fill.complete {
    background: linear-gradient(90deg, #059669, #10b981);
}

.progress-percent {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    min-width: 40px;
    text-align: right;
}

.progress-tips {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.progress-tips a {
    color: var(--color-primary-light);
    text-decoration: none;
    font-weight: 600;
}

/* Compact version for dashboard */
.progress-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.progress-compact .progress-bar-track {
    flex: 1;
    height: 5px;
}

.progress-compact .progress-percent {
    font-size: 0.8rem;
    min-width: 32px;
}

/* ──────────────────────────────────────────────
   FAVORITES BUTTON
   ────────────────────────────────────────────── */
.btn-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.btn-fav:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
    transform: scale(1.1);
}

.btn-fav.fav-active {
    border-color: #ef4444;
    background: #ef4444;
    color: #fff;
}

.btn-fav.fav-active:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.btn-fav svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.btn-fav:hover svg {
    transform: scale(1.15);
}

/* Offer card top row with fav button */
.oferta-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.oferta-card-top-row h3 {
    flex: 1;
    margin-bottom: 0 !important;
}

/* ──────────────────────────────────────────────
   WHATSAPP SHARE BUTTON
   ────────────────────────────────────────────── */
.btn-whatsapp-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #25d366;
    color: #fff !important;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    border: none;
    cursor: pointer;
}

.btn-whatsapp-share:hover {
    background: #1da851;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────
   PRINT STYLES (PDF export)
   ────────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .btn, .profile-actions-compact,
    .dark-mode-toggle, #toast-container, .no-print {
        display: none !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .profile-card-compact {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    @page {
        margin: 20mm;
        size: A4;
    }
}

.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-print:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

/* ──────────────────────────────────────────────
   ANIMATED STAT COUNTERS (landing)
   ────────────────────────────────────────────── */
.stat-value[data-target] {
    display: inline-block;
    transition: opacity 0.3s;
}

/* ──────────────────────────────────────────────
   AJAX LOADING STATE
   ────────────────────────────────────────────── */
.ofertas-grid.loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s;
}

.search-filter-form.loading .search-submit-btn {
    opacity: 0.6;
}

.filter-loading-indicator {
    display: none;
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.filter-loading-indicator.show { display: block; }

/* ──────────────────────────────────────────────
   CHART CONTAINERS
   ────────────────────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--color-bg-surface);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.chart-card h3 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.chart-canvas-wrap {
    position: relative;
    height: 220px;
}

.chart-canvas-wrap-sm {
    position: relative;
    height: 160px;
}

/* ──────────────────────────────────────────────
   EMPRESA STATS MINI DONUT
   ────────────────────────────────────────────── */
.empresa-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ──────────────────────────────────────────────
   RESPONSIVE TWEAKS
   ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .chart-canvas-wrap {
        height: 180px;
    }

    .empresa-charts-row {
        grid-template-columns: 1fr;
    }
}