html, body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.salta-al-contingut { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: .75rem 1rem; background: #1f1f1f; color: #fff; border-radius: 0 0 .5rem 0; }
.salta-al-contingut:focus { left: 0; }
:focus-visible { outline: 3px solid #0b5cad; outline-offset: 2px; }
main:focus, h1:focus { outline: none; }

.logo-barra { height: 36px; width: auto; }
.nom-marca { font-weight: 600; }
.pwa-nav { border-bottom: 1px solid #ddd; background: #fafafa; }
.pagina-entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #f4f4f6; }
.targeta-entrada { width: 100%; max-width: 440px; }
.logo-entrada { max-width: 96px; height: auto; }

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: #03173d; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregant"); }

#blazor-error-ui { background: #fff3cd; color: #3b2f00; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.taula-resp { overflow-x: auto; }