: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; }

.hero { text-align: center; padding: 48px 16px 24px; background: var(--ct-navy); color: #fff; border-radius: var(--ct-radius-card); margin-bottom: 24px; }
.hero h1 { font-size: 2.2rem; margin: 0 0 12px; }
.hero p { color: var(--ct-ice); max-width: 560px; margin: 0 auto 16px; }
.hero .boton { background: #fff; color: var(--ct-navy); }
.hero .boton.secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tres > div { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 20px; }
.tres h3 { margin: 0 0 8px; }

.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); }
.colores { display: flex; gap: 12px; }
.colores label { flex: 1; }
.buscar { margin-bottom: 12px; }
.nota { color: var(--gris); font-size: .85rem; }
.error { color: var(--error); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }

.boton { display: inline-block; background: var(--ct-navy); color: #fff; border: 0; border-radius: var(--ct-radius-button); padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 12px; }
.boton.secundario { background: #fff; color: var(--ct-navy); border: 1px solid var(--ct-gray); }
.boton.grande { font-size: 1.25rem; padding: 16px 28px; }
.boton.premio { background: var(--ct-orange); }
.boton:disabled { opacity: .5; cursor: wait; }
button.enlace { background: none; border: 0; color: var(--verde); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

.pase-preview { border-radius: var(--ct-radius-card); padding: 20px; margin: 0 0 20px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pase-preview small { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.pase-preview h2 { margin: 4px 0 12px; font-size: 1.4rem; }
.pase-preview .stickers { font-size: 1.8rem; letter-spacing: .12em; line-height: 1; }
.pase-preview .stickers .lleno { color: var(--ct-lime); }
.pase-preview .stickers .vacio { color: var(--ct-gray); }
.pase-preview .premio { font-weight: 700; }
.pase-preview .qr { background: #fff; border-radius: 12px; padding: 12px; text-align: center; margin-top: 16px; color: var(--tinta); }
.pase-preview .qr img { display: block; margin: 0 auto 6px; width: 180px; height: 180px; }

.botones-wallet { display: flex; flex-direction: column; gap: 10px; }
.wallet { display: block; text-align: center; padding: 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.wallet.apple { background: #000; color: #fff; }
.wallet.google { background: #fff; color: #1F1F1F; border: 1px solid #747775; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.kpis > div { background: var(--fondo); border-radius: 10px; padding: 14px; color: var(--gris); font-size: .85rem; }
.kpis span { display: block; font-size: 1.8rem; font-weight: 800; color: var(--ct-navy); }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .95rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); }
th { color: var(--gris); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .dos-columnas { grid-template-columns: 1fr; } .barra { flex-direction: column; gap: 8px; } }

.clave { display: flex; gap: 12px; align-items: center; background: var(--fondo); padding: 10px 14px; border-radius: 8px; flex-wrap: wrap; }
.clave code { font-size: 1rem; letter-spacing: .04em; }
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; }

.escaner .lector { width: 100%; min-height: 260px; background: #111; border-radius: 12px; overflow: hidden; }
.escaner .acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.escaner .compartir { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ct-line); }
.escaner .compartir h2 { font-size: 1.05rem; margin: 0 0 4px; }
.escaner .compartir .acciones .boton { margin-top: 0; }
.escaner .compartir .qr-enlace { display: block; width: 200px; height: 200px; margin: 12px 0 0; }
.escaner .compartir .enlace { word-break: break-all; }

/* ── DevExpress (tema Fluent) alineado al Brand Kit ───────────────────────── */
.grid-cartillazo { border-radius: var(--ct-radius-card); overflow: hidden; border: 1px solid var(--ct-line); }
.form-cartillazo .dxbl-fl-cpt { color: var(--ct-slate); font-size: .9rem; }
.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, .boton-premio { 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); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ct-ice); color: var(--ct-navy); font-size: .85rem; font-weight: 600; }
.chip-premio { background: var(--ct-orange); color: #fff; }
.color-input { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--ct-gray); border-radius: var(--ct-radius-input); background: #fff; }
.ms-2 { margin-left: 8px; } .mt-2 { margin-top: 8px; }