/* ===================================================== TABCONTROL Estilos del componente TabControl / TabPage. Colocar este archivo en: wwwroot/css/tabcontrol.css Y referenciarlo en el de tu host page: - Blazor WebAssembly -> wwwroot/index.html - Blazor Server (.NET 8, Components/App.razor) - Blazor Server clásico -> Pages/_Host.cshtml Usa las mismas variables (--area, --area-rgb, --ink, --ink-soft, --card) que ya definís en reemplazos.razor dentro de .reemplazos-page. Si el TabControl se usa en otra página que no define esas variables, quedan los valores de respaldo (fallback) del segundo parámetro de var(...). ====================================================== */ .tabcontrol { display: flex; flex-direction: column; } /* ===================================================== TIRA DE PESTAÑAS Estilo "carpeta": la activa queda pegada al panel de contenido, las demás quedan un escalón atrás. ====================================================== */ .tabcontrol-nav { display: flex !important; flex-direction: row !important; align-items: flex-end; flex-wrap: wrap; gap: 3px; padding: 0 2px; border-bottom: 2px solid var(--area, #5b7c99); } .tabcontrol-nav-item { position: relative; top: 2px; display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; padding: 10px 16px; color: var(--ink-soft, #687681); font-size: 0.80rem; font-weight: 750; border: 2px solid transparent; border-bottom: none; border-radius: 12px 12px 0 0; background: #eeece5; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .tabcontrol-nav-item:hover { color: var(--ink, #273746); background: #e4e1d7; } .tabcontrol-nav-item.activa { color: var(--ink, #273746); border-color: var(--area, #5b7c99); border-bottom: 2px solid var(--card, #fffdfa); background: var(--card, #fffdfa); font-weight: 800; } .tabcontrol-nav-icon { font-size: 0.92rem; font-weight: 800; } /* ===================================================== PANEL DE CONTENIDO ====================================================== */ .tabcontrol-body { min-width: 0; padding-top: 18px; } @media (max-width: 600px) { .tabcontrol-nav { gap: 3px; } .tabcontrol-nav-item { flex: 1 1 auto; justify-content: center; padding: 9px 8px; font-size: 0.72rem; } .tabcontrol-nav-icon { display: none; } }