/* Tokens come from themes.css via [data-theme] on . Do not redefine :root here. */ html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans, "Segoe UI Variable Text", "Trebuchet MS", "Gill Sans", sans-serif); } * { box-sizing: border-box; } a { color: inherit; } button, input { font: inherit; } h1, h2, h3 { margin-top: 0; font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.01em; } p { color: var(--text-muted); } h1:focus { outline: none; } .hero-panel, .split-panel, .dashboard-grid, .module-grid, .kpi-grid { display: grid; gap: 1.25rem; } .hero-panel { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr); align-items: stretch; margin-bottom: 1.5rem; } .dashboard-grid, .split-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; } .module-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .page-card, .highlight-card, .module-card, .kpi-card, .table-card { border-radius: 1.6rem; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-highlight-strong), var(--surface-highlight)); box-shadow: var(--shadow); } .page-card, .highlight-card, .table-card { padding: 1.5rem; } .highlight-card, .kpi-card { position: relative; overflow: hidden; } .highlight-card::after, .kpi-card::after { content: ""; position: absolute; inset: auto -2rem -2rem auto; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, var(--hero-orb-info), transparent 65%); } .accent-card { background: linear-gradient(160deg, var(--g-warn-bg), var(--g-info-bg)); } .eyebrow, .section-title, .metric-label { margin: 0 0 0.6rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.76rem; } .page-lead { max-width: 70ch; font-size: 1.05rem; } .action-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; } .primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.15rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; } .primary-action { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color: var(--accent-contrast); font-weight: 700; } .secondary-action { border-color: var(--border); background: var(--surface-highlight); color: var(--text); } .bullet-list { margin: 0; padding-left: 1.1rem; color: var(--text); } .bullet-list li { margin-bottom: 0.6rem; } .module-card, .kpi-card { padding: 1.2rem; text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; } .module-card:hover, .kpi-card:hover { transform: translateY(-4px); border-color: var(--g-warn-border); } .module-card h2, .kpi-card strong { margin-bottom: 0.65rem; } .module-status, .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--g-info-border); color: var(--accent); font-size: 0.78rem; } .form-grid { display: grid; gap: 1rem; } .form-grid label { display: grid; gap: 0.45rem; color: var(--text); } .form-grid input { width: 100%; padding: 0.9rem 1rem; border-radius: 1rem; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); } .form-grid input:focus { outline: 2px solid var(--field-focus-ring); border-color: var(--field-focus-border); } .inline-note { padding: 1rem; border-radius: 1rem; background: var(--surface-highlight); border: 1px solid var(--border); } .inline-note p { margin: 0.7rem 0 0; } .table-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .table-like { display: grid; gap: 0.65rem; } .table-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0.95rem 1rem; border-radius: 1rem; background: var(--surface-highlight); color: var(--text); } .table-head { background: var(--surface-sunken); color: var(--text); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; } .kpi-card span { display: block; color: var(--text-muted); margin-bottom: 0.6rem; } .kpi-card strong { display: block; font-size: 2rem; color: var(--text); } .boot-screen { min-height: 100vh; display: grid; place-items: center; gap: 1rem; background: var(--bg); color: var(--text); } .boot-mark { width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 1.5rem; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color: var(--accent-contrast); font-weight: 800; font-size: 2rem; } #blazor-error-ui { display: none; position: fixed; bottom: 1rem; right: 1rem; left: 1rem; padding: 1rem 1.25rem; border-radius: 1rem; border: 1px solid var(--g-err-border); background: var(--g-err-bg); color: var(--text); box-shadow: var(--shadow); z-index: 1000; } #blazor-error-ui .reload { margin-left: 0.75rem; } #blazor-error-ui .dismiss { float: right; cursor: pointer; } @media (max-width: 960px) { .hero-panel, .split-panel, .dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .table-card-header, .action-row { flex-direction: column; align-items: stretch; } .table-row { grid-template-columns: 1fr; } } /* ============================================================ Estado de carga compartido (GouraSpinner / GouraLoadingState) Patrón UX: spinner + "Cargando..." en transacciones de búsqueda. Tokens only (themes.css). Ver docs/dev/ux_loading_pattern_rollout_2026_05_30.md ============================================================ */ .g-spinner { display: inline-block; border-radius: 50%; border: 3px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-top-color: var(--accent, currentColor); animation: g-spin 0.8s linear infinite; vertical-align: middle; } .g-spinner--sm { width: 16px; height: 16px; border-width: 2px; } .g-spinner--md { width: 28px; height: 28px; } .g-spinner--lg { width: 40px; height: 40px; } .g-load-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 16px; color: var(--text-muted, inherit); } .g-load-text { font-size: 14px; } .g-load-host { position: relative; } .g-load-host.is-busy > :not(.g-load-overlay) { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; } .g-load-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted, inherit); } @keyframes g-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .g-spinner { animation-duration: 2.4s; } }