/* Opinio · ajustes de marca sobre Filament 4 (docs/brand/BRAND.md §5). Los colores vienen de ->colors() en los PanelProvider. */
@import url('/brand/fonts.css');

:root {
    --op-font-display: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
    --op-grafito: #17171C; --op-grafito-800: #24242B; --op-turquesa: #00BFA6;
    --op-logo-ink: #17171C; --op-logo-accent: #00BFA6;
}
.dark { --op-logo-ink: #FFFFFF; }

/* Titulares y botones en Fredoka */
.fi-header-heading, .fi-simple-header-heading, .fi-section-header-heading, .fi-modal-heading,
.fi-wi-stats-overview-stat-value, .fi-btn { font-family: var(--op-font-display); letter-spacing: -.01em; }
.fi-header-heading, .fi-simple-header-heading { font-weight: 600; text-wrap: balance; }
.fi-btn { font-weight: 500; }
.fi-wi-stats-overview-stat-value, .fi-ta-text-item { font-variant-numeric: tabular-nums; }

/* Botón principal: grafito en claro; en oscuro Filament ya lo deja turquesa con texto grafito */
:root:not(.dark) .fi-btn.fi-color-primary:not(.fi-outlined) { background-color: var(--op-grafito); color: #fff; }
:root:not(.dark) .fi-btn.fi-color-primary:not(.fi-outlined):hover { background-color: var(--op-grafito-800); }
:root:not(.dark) .fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon { color: #fff; }

/* Radios: 12 en controles, 20 en tarjetas */
.fi-btn, .fi-input-wrp, .fi-select-input, .fi-dropdown-panel, .fi-sidebar-item-btn { border-radius: 12px; }
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-chart, .fi-simple-main, .fi-modal-window { border-radius: 20px; }
.fi-badge { border-radius: 999px; }

/* Foco visible: anillo turquesa de 3 px */
.fi-body :focus-visible { outline: 3px solid var(--op-turquesa); outline-offset: 2px; }
.fi-logo svg { display: block; }