:root {
  /* Tokens del Brand Kit Cartillazo v1 (brand/cartillazo.tokens.json) */
  --ct-navy: #003F70; --ct-deep: #072B4F; --ct-ink: #092D4F; --ct-teal: #00B7BF; --ct-lime: #87C91E; --ct-orange: #FF8A07;
  --ct-mist: #F4F8FA; --ct-ice: #E7F4F5; --ct-gray: #D0DBE2; --ct-slate: #5A7284; --ct-white: #FFFFFF; --ct-line: #DFE9EC;
  --ct-font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ct-radius-card: 20px; --ct-radius-button: 14px; --ct-radius-input: 12px;
  --ct-shadow-card: 0 12px 32px rgba(7,43,79,.10);
  /* alias usados en la app */
  --verde: var(--ct-navy); --verde-claro: var(--ct-ice); --tinta: var(--ct-ink); --gris: var(--ct-slate); --borde: var(--ct-line); --fondo: var(--ct-mist);
  --error: #B42318; --ok: #3E7A0E;
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--ct-font); color: var(--tinta); background: var(--fondo); }
a { color: var(--verde); }

.barra { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--borde); }
.barra .marca { display: flex; align-items: center; text-decoration: none; }
.barra .marca img { height: 36px; }
.barra nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.barra nav a { text-decoration: none; color: var(--tinta); }
.barra nav a.destacado { background: var(--ct-teal); color: var(--ct-deep); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.inline { display: inline; }
.contenido { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }
.pie { text-align: center; color: var(--gris); font-size: .85rem; padding: 24px; }

.tarjeta-panel { background: #fff; border: 1px solid var(--borde); border-radius: var(--ct-radius-card); padding: 24px; box-shadow: var(--ct-shadow-card); }
.tarjeta-panel.estrecha { max-width: 520px; margin: 0 auto; }
.tarjeta-panel h1 { font-size: 1.5rem; margin: 0 0 12px; }
.tarjeta-panel h2 { font-size: 1.1rem; margin: 24px 0 8px; }

/* Formularios HTML sencillos (login, inscripción). Solo dentro de .form-simple: aplicadas globalmente
   también caían sobre los <label> e <input> internos de DevExpress y descuadraban el panel. */
.form-simple label { display: block; margin: 12px 0 4px; font-size: .9rem; color: var(--gris); }
.form-simple input, .form-simple textarea, .form-simple select { width: 100%; padding: 10px 12px; border: 1px solid var(--ct-gray); border-radius: var(--ct-radius-input); font: inherit; margin-top: 4px; background: #fff; }
.form-simple input[type=checkbox] { width: auto; margin-right: 8px; }
.form-simple label.check { display: flex; align-items: center; color: var(--tinta); }

button.enlace { background: none; border: 0; color: var(--verde); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

@media (max-width: 760px) { .barra { flex-direction: column; gap: 8px; } }

code { background: var(--fondo); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
pre { background: var(--fondo); padding: 12px; border-radius: 8px; overflow: auto; font-size: .85rem; }
details { margin-top: 12px; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #FFF4CE; color: var(--tinta); padding: 12px 20px; box-shadow: 0 -2px 8px rgba(0,0,0,.15); z-index: 1000; }
#blazor-error-ui .reload { margin-left: 8px; font-weight: 600; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 10px; cursor: pointer; }

/* ── DevExpress (tema Fluent) alineado al Brand Kit ───────────────────────── */
.dxbl-btn.dxbl-btn-primary { background: var(--ct-navy); border-color: var(--ct-navy); border-radius: var(--ct-radius-button); font-weight: 600; }
.dxbl-btn.dxbl-btn-primary:hover { background: var(--ct-deep); border-color: var(--ct-deep); }
.dxbl-btn.dxbl-btn-secondary { border-radius: var(--ct-radius-button); color: var(--ct-navy); border-color: var(--ct-gray); background: #fff; }
.dxbl-btn.dxbl-btn-warning { background: var(--ct-orange) !important; border-color: var(--ct-orange) !important; color: #fff !important; border-radius: var(--ct-radius-button); font-weight: 700; }
.dxbl-text-box, .dxbl-memo, .dxbl-spin-edit { border-radius: var(--ct-radius-input); }