/**
 * tickets.bte.ar — identidad visual
 * Dark mode · gradiente violeta → azul → cyan
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Tokens compartidos */
:root {
  --brote-purple: #8b5cf6;
  --brote-purple-deep: #6d28d9;
  --brote-blue: #3b82f6;
  --brote-cyan: #22d3ee;
  --brote-cyan-bright: #06b6d4;
  --brote-gradient: linear-gradient(135deg, var(--brote-purple-deep) 0%, var(--brote-blue) 45%, var(--brote-cyan) 100%);
  --brote-gradient-h: linear-gradient(90deg, var(--brote-purple) 0%, var(--brote-blue) 50%, var(--brote-cyan) 100%);
  --brote-radius: 0.75rem;
  --brote-radius-lg: 1rem;
  --brote-radius-xl: 1.25rem;
  --brote-font: 'Inter', system-ui, -apple-system, sans-serif;
  --brote-red: #ef4444;
  --brote-red-hover: #dc2626;
}

/* —— Dark —— */
html[data-theme="dark"] {
  --brote-bg: #06060e;
  --brote-bg-elevated: #0c0c18;
  --brote-bg-card: rgba(18, 18, 32, 0.72);
  --brote-bg-card-solid: #12121f;
  --brote-glow: 0 0 40px rgba(139, 92, 246, 0.35), 0 0 80px rgba(34, 211, 238, 0.15);
  --brote-text: #f4f4f8;
  --brote-text-muted: #9ca3b8;
  --brote-text-dim: #6b7289;
  --brote-border: rgba(255, 255, 255, 0.08);
  --brote-border-glow: rgba(139, 92, 246, 0.35);
  --brote-input-bg: rgba(255, 255, 255, 0.05);
  --brote-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --brote-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
  --brote-page-glow-1: rgba(109, 40, 217, 0.35);
  --brote-page-glow-2: rgba(59, 130, 246, 0.2);
  --brote-page-glow-3: rgba(34, 211, 238, 0.12);
  --brote-logo-shadow: drop-shadow(0 0 20px rgba(139, 92, 246, 0.35));
  --brote-modal-backdrop: rgba(0, 0, 0, 0.75);
  --brote-desglose-bg: rgba(0, 0, 0, 0.25);
  --brote-pill-off-bg: rgba(255, 255, 255, 0.08);
  --brote-option-checked-bg: rgba(139, 92, 246, 0.1);
  --brote-success-bg: rgba(34, 197, 94, 0.12);
  --brote-success-border: #22c55e;
  --brote-success-text: #86efac;
  --brote-warn-bg: rgba(245, 158, 11, 0.12);
  --brote-warn-border: #f59e0b;
  --brote-warn-text: #fcd34d;
  --brote-error-bg: rgba(239, 68, 68, 0.12);
  --brote-error-border: #ef4444;
  --brote-error-text: #fca5a5;
  --brote-link: var(--brote-cyan);
  --brote-link-hover: #67e8f9;
  --brote-footer: #040408;
  --brote-footer-text: var(--brote-text-muted);
  --brote-btn-secondary-bg: rgba(34, 211, 238, 0.15);
  --brote-btn-secondary-border: rgba(34, 211, 238, 0.35);
  --brote-btn-primary-shadow: 0 4px 24px rgba(59, 130, 246, 0.4);
  --brote-teal: var(--brote-cyan);
  --brote-teal-dark: var(--brote-cyan-bright);
  --brote-teal-darker: var(--brote-cyan);
  --brote-teal-light: rgba(34, 211, 238, 0.12);
  --brote-teal-muted: var(--brote-text-muted);
  --brote-card: var(--brote-bg-card-solid);
}

/* —— Light —— */
html[data-theme="light"] {
  --brote-bg: #f0f2f8;
  --brote-bg-elevated: #ffffff;
  --brote-bg-card: rgba(255, 255, 255, 0.92);
  --brote-bg-card-solid: #ffffff;
  --brote-glow: 0 8px 32px rgba(109, 40, 217, 0.12), 0 4px 16px rgba(59, 130, 246, 0.08);
  --brote-text: #12121f;
  --brote-text-muted: #5c6478;
  --brote-text-dim: #8b93a7;
  --brote-border: rgba(15, 23, 42, 0.1);
  --brote-border-glow: rgba(109, 40, 217, 0.25);
  --brote-input-bg: #f8f9fc;
  --brote-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
  --brote-shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.06);
  --brote-page-glow-1: rgba(139, 92, 246, 0.12);
  --brote-page-glow-2: rgba(59, 130, 246, 0.08);
  --brote-page-glow-3: rgba(34, 211, 238, 0.06);
  --brote-logo-shadow: drop-shadow(0 4px 12px rgba(109, 40, 217, 0.15));
  --brote-modal-backdrop: rgba(15, 23, 42, 0.45);
  --brote-desglose-bg: rgba(15, 23, 42, 0.04);
  --brote-pill-off-bg: rgba(15, 23, 42, 0.06);
  --brote-option-checked-bg: rgba(139, 92, 246, 0.08);
  --brote-success-bg: rgba(34, 197, 94, 0.1);
  --brote-success-border: #16a34a;
  --brote-success-text: #15803d;
  --brote-warn-bg: rgba(245, 158, 11, 0.12);
  --brote-warn-border: #d97706;
  --brote-warn-text: #b45309;
  --brote-error-bg: rgba(239, 68, 68, 0.1);
  --brote-error-border: #dc2626;
  --brote-error-text: #b91c1c;
  --brote-link: #6d28d9;
  --brote-link-hover: #0891b2;
  --brote-footer: #e4e7ef;
  --brote-footer-text: var(--brote-text-muted);
  --brote-btn-secondary-bg: rgba(109, 40, 217, 0.08);
  --brote-btn-secondary-border: rgba(109, 40, 217, 0.2);
  --brote-btn-primary-shadow: 0 4px 20px rgba(109, 40, 217, 0.25);
  --brote-teal: #0891b2;
  --brote-teal-dark: #0e7490;
  --brote-teal-darker: #155e75;
  --brote-teal-light: rgba(8, 145, 178, 0.1);
  --brote-teal-muted: var(--brote-text-muted);
  --brote-card: var(--brote-bg-card-solid);
}

html:not([data-theme]) {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Layout base */
.brote-page {
  font-family: var(--brote-font);
  color: var(--brote-text);
  background: var(--brote-bg);
  min-height: 100dvh;
  position: relative;
}

.brote-page::before,
.brote-admin-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, var(--brote-page-glow-1), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%, var(--brote-page-glow-2), transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 100%, var(--brote-page-glow-3), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.brote-page > * { position: relative; z-index: 1; }

.brote-shell {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  padding-top: max(1.5rem, env(safe-area-inset-top));
}

.brote-header {
  text-align: center;
  padding: 1rem 1rem 1.5rem;
}

.brote-hero-logo {
  display: block;
  margin: 0 auto 1rem;
  width: min(100%, 20rem);
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
  object-position: center;
  filter: var(--brote-logo-shadow);
}

.brote-logo-wordmark {
  display: block;
  margin: 0 auto 0.35rem;
  width: min(100%, 14rem);
  height: auto;
  max-height: 2.25rem;
  object-fit: contain;
}

.brote-logo-iso {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.brote-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.brote-tagline {
  font-size: 1rem;
  color: var(--brote-text-muted);
  font-weight: 400;
  margin: 0;
}

/* Home: cómo funciona + confianza */
.brote-how {
  margin: 1.25rem 0 1.5rem;
}

.brote-how__lead {
  margin: 0 0 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brote-text-muted);
}

.brote-how__steps {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.brote-how__step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--brote-radius);
  background: var(--brote-bg-card);
  border: 1px solid var(--brote-border);
  font-size: 0.875rem;
  color: var(--brote-text);
}

.brote-how__num {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--brote-gradient-h);
  color: #fff;
}

.brote-how__text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.brote-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.brote-trust__item {
  text-align: center;
}

.brote-trust__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 100%;
  padding: 0.55rem 0.35rem;
  border-radius: var(--brote-radius);
  background: var(--brote-bg-card);
  border: 1px solid var(--brote-border);
  font-size: 0.65rem;
  color: var(--brote-text-muted);
  line-height: 1.25;
  text-align: center;
}

.brote-trust__pill--link {
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.brote-trust__pill--link:hover {
  border-color: var(--brote-border-glow);
  color: var(--brote-link);
}

.brote-trust__icon {
  width: 1.35rem;
  height: 1.35rem;
  stroke: url(#broteGradIcon);
  fill: none;
}

@media (min-width: 640px) {
  .brote-how__steps {
    flex-direction: row;
    gap: 0.5rem;
  }

  .brote-how__step {
    flex: 1 1 0;
    flex-direction: column;
    text-align: center;
    padding: 0.75rem 0.5rem;
    gap: 0.4rem;
  }

  .brote-trust__pill {
    font-size: 0.7rem;
    padding: 0.65rem 0.5rem;
  }
}

.brote-card {
  background: var(--brote-bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--brote-radius-xl);
  border: 1px solid var(--brote-border);
  box-shadow: var(--brote-shadow);
}

.brote-card--flat {
  background: var(--brote-bg-card-solid);
  box-shadow: var(--brote-shadow-sm);
}

.brote-card--glass {
  border-color: var(--brote-border-glow);
  box-shadow: var(--brote-glow), var(--brote-shadow-sm);
}

.brote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: var(--brote-radius);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.brote-btn:active { transform: scale(0.98); }
.brote-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.brote-btn-primary {
  background: var(--brote-gradient-h);
  color: #fff;
  box-shadow: var(--brote-btn-primary-shadow);
}

.brote-btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 32px rgba(139, 92, 246, 0.5);
}

.brote-btn-secondary {
  background: var(--brote-btn-secondary-bg);
  color: var(--brote-link);
  border: 1px solid var(--brote-btn-secondary-border);
}

.brote-btn-secondary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.brote-btn-mp {
  background: #009ee3;
  color: #fff;
  border: none;
}

.brote-btn-mp:hover:not(:disabled) {
  background: #0082c3;
}

.brote-btn-ghost {
  background: transparent;
  color: var(--brote-text-muted);
  border: 1px solid var(--brote-border);
}

.brote-btn-ghost:hover:not(:disabled) {
  border-color: var(--brote-text-muted);
  color: var(--brote-text);
}

.brote-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  background: var(--brote-input-bg);
  color: var(--brote-text);
  font-size: 0.875rem;
  font-family: inherit;
}

.brote-input::placeholder { color: var(--brote-text-dim); }

.brote-input:focus {
  outline: none;
  border-color: var(--brote-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.brote-footer {
  background: var(--brote-footer);
  color: var(--brote-footer-text);
  font-size: 0.7rem;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--brote-border);
}

.brote-footer a {
  color: var(--brote-link);
  text-decoration: none;
}

.brote-footer a:hover { text-decoration: underline; }

.brote-link {
  color: var(--brote-link);
  text-decoration: underline;
}

.brote-link:hover { color: var(--brote-link-hover); }

.brote-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(139, 92, 246, 0.25);
  color: var(--brote-cyan);
  border: 1px solid var(--brote-border-glow);
}

.brote-logo {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.brote-logo-sub {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brote-text-muted);
  margin-top: 0.2rem;
}

.brote-view-event-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--brote-link);
  text-decoration: none;
}

.brote-view-event-back:hover {
  color: var(--brote-link-hover);
}

.brote-slug-hint {
  font-size: 0.7rem;
  color: var(--brote-text-muted);
  margin-top: 0.25rem;
}

.brote-slug-hint code {
  font-size: 0.68rem;
  color: var(--brote-cyan);
}

.brote-slug-history {
  font-size: 0.65rem;
  color: var(--brote-text-dim);
  margin-top: 0.35rem;
}

/* QR link corto (admin) */
.brote-short-qr {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-elevated, #fff);
}
.brote-short-qr__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brote-text);
  margin: 0 0 0.5rem;
}
.brote-short-qr__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 5.5rem;
}
.brote-short-qr__preview .brote-short-qr__canvas {
  max-width: 11rem;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: var(--brote-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.12));
}
.brote-short-qr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.brote-short-qr__btn {
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-card-solid, #fff);
  color: var(--brote-text);
  cursor: pointer;
}
.brote-short-qr__btn:hover {
  border-color: var(--brote-purple);
  color: var(--brote-purple-deep, #6d28d9);
}
.brote-short-qr__hint {
  font-size: 0.65rem;
  color: var(--brote-text-dim);
  margin: 0.35rem 0 0;
}
.brote-short-qr__section {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--brote-text-muted);
  margin: 0.65rem 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Editor de evento (admin) — tabs + portada */
.brote-event-editor {
  border-radius: var(--brote-radius-lg);
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-card-solid);
  overflow: hidden;
}
.brote-event-editor__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--brote-border);
}
.brote-event-editor__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brote-text);
  line-height: 1.3;
}
.brote-event-editor__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.7rem;
}
.brote-event-editor__links a {
  color: var(--brote-link);
  text-decoration: underline;
}
.brote-event-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--brote-border);
}
.brote-event-tabs::-webkit-scrollbar { display: none; }
.brote-event-tab {
  flex: 0 0 auto;
  padding: 0.5rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--brote-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.brote-event-tab:hover {
  color: var(--brote-text);
  background: var(--brote-input-bg);
}
.brote-event-tab.is-active {
  color: var(--brote-text);
  border-bottom-color: var(--brote-purple);
  background: var(--brote-input-bg);
}
.brote-event-panels {
  padding: 1rem;
}
.brote-event-panel {
  display: block;
}
.brote-event-panel.is-hidden {
  display: none !important;
}
.brote-event-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .brote-event-fields--2 { grid-template-columns: 1fr 1fr; }
}
.brote-event-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brote-text);
  margin-bottom: 0.35rem;
}
.brote-event-field .brote-field-hint {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--brote-text-muted);
  margin-top: 0.35rem;
  line-height: 1.4;
}
.brote-event-field--full { grid-column: 1 / -1; }
.brote-event-editor__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--brote-border);
  background: var(--brote-bg-elevated);
}
@media (max-width: 639px) {
  .brote-event-editor__footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  }
}
.brote-event-editor__footer .brote-btn-save {
  flex: 1 1 auto;
  min-width: 10rem;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #15803d, #16a34a);
  border: none;
  border-radius: var(--brote-radius);
  cursor: pointer;
}
.brote-event-editor__footer .brote-btn-save:hover { filter: brightness(1.08); }
.brote-event-editor__footer .brote-btn-secondary {
  padding: 0.5rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-card-solid);
  color: var(--brote-text);
  cursor: pointer;
}
.brote-flyer-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.brote-flyer-preview__img-wrap {
  border-radius: var(--brote-radius);
  overflow: hidden;
  border: 1px solid var(--brote-border);
  background: var(--brote-input-bg);
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brote-flyer-preview__img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
}
.brote-flyer-preview__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--brote-text-dim);
}
.brote-flyer-upload {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.brote-flyer-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.brote-flyer-upload__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--brote-gradient-h);
  border: none;
  border-radius: var(--brote-radius);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(109, 40, 217, 0.35);
}
.brote-flyer-upload__btn:hover { filter: brightness(1.06); }
.brote-flyer-upload__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.brote-flyer-upload__name {
  font-size: 0.72rem;
  color: var(--brote-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brote-opcion-card {
  border: 1px solid var(--brote-border);
  border-radius: var(--brote-radius);
  padding: 0.85rem;
  background: var(--brote-input-bg);
}
.brote-opcion-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}
.brote-opcion-card__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brote-cyan);
}
.brote-opcion-card__remove {
  border: none;
  background: transparent;
  color: var(--brote-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
}
.brote-opcion-card__remove:hover {
  color: var(--brote-error-text);
  background: rgba(239, 68, 68, 0.12);
}

.brote-operador-card {
  border: 1px solid var(--brote-border);
  border-radius: var(--brote-radius);
  padding: 0.75rem;
  margin-bottom: 0.65rem;
  background: var(--brote-bg-card-solid);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.brote-operador-card__main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.brote-operador-card__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--brote-text-muted);
}
.brote-operador-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Eventos (index) */
.brote-event {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--brote-border);
}

@media (min-width: 768px) {
  .brote-event { flex-direction: row; align-items: flex-start; }
}

.brote-event:last-child { border-bottom: none; }

.brote-event-flyer-wrap {
  width: 100%;
  line-height: 0;
}

.brote-event-flyer {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  background: var(--brote-desglose-bg);
  border-radius: var(--brote-radius-lg);
  border: 1px solid var(--brote-border);
  box-shadow: var(--brote-shadow-sm);
}

@media (max-width: 767px) {
  .brote-event-flyer-wrap {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    width: calc(100% + 2.5rem);
    overflow: hidden;
    background: var(--brote-desglose-bg);
    border-bottom: 1px solid var(--brote-border);
  }

  .brote-event-flyer {
    width: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  #eventos > .brote-event:first-child .brote-event-flyer {
    border-top-left-radius: calc(var(--brote-radius-xl) - 2px);
    border-top-right-radius: calc(var(--brote-radius-xl) - 2px);
  }

  .brote-how {
    margin-bottom: 1.1rem;
  }
}

@media (min-width: 768px) {
  .brote-event-flyer-wrap {
    width: 14rem;
    flex-shrink: 0;
    margin: 0;
  }

  .brote-event-flyer {
    width: 14rem;
    max-width: 14rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--brote-radius-lg);
    border: 1px solid var(--brote-border);
    box-shadow: var(--brote-shadow-sm);
  }
}

.brote-event-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brote-text);
  margin: 0 0 0.25rem;
}

.brote-event-date {
  font-size: 0.875rem;
  color: var(--brote-text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.brote-event-form {
  background: var(--brote-bg-card);
  border: 1px solid var(--brote-border);
  border-radius: var(--brote-radius-lg);
  padding: 1rem;
}

.brote-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  margin-top: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.brote-option:first-of-type { margin-top: 0; }

.brote-option:has(input:checked:not(:disabled)) {
  border-color: var(--brote-purple);
  background: var(--brote-option-checked-bg);
}

.brote-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.brote-option input[type="radio"] {
  accent-color: var(--brote-purple);
}

.brote-pill {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}

.brote-pill--ok {
  background: rgba(34, 197, 94, 0.2);
  color: var(--brote-success-text);
}

.brote-pill--warn {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

.brote-pill--off {
  background: var(--brote-pill-off-bg);
  color: var(--brote-text-dim);
}

.brote-desglose {
  font-size: 0.875rem;
  color: var(--brote-text-muted);
  background: var(--brote-desglose-bg);
  border-radius: var(--brote-radius);
  padding: 0.75rem;
  border: 1px solid var(--brote-border);
}

.brote-desglose .total {
  font-weight: 700;
  color: var(--brote-text);
  margin-top: 0.35rem;
}

.brote-btn-info {
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border-glow);
  background: transparent;
  color: var(--brote-cyan);
  cursor: pointer;
  font-family: inherit;
}

.brote-btn-info:hover {
  background: rgba(139, 92, 246, 0.15);
}

.brote-empty {
  text-align: center;
  color: var(--brote-text-muted);
  padding: 3rem 1rem;
}

.brote-legal {
  font-size: 0.7rem;
  color: var(--brote-text-dim);
  line-height: 1.5;
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--brote-border);
}

.brote-legal strong { color: var(--brote-text-muted); }

.brote-legal .mb-2 { margin-bottom: 0.5rem; }
.brote-legal .mb-3 { margin-bottom: 0.75rem; }

.brote-site-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--brote-border);
}
.brote-site-footer__line {
  margin: 0.4rem 0;
  font-size: 0.7rem;
  color: var(--brote-text-dim);
  line-height: 1.5;
}
.brote-footer .brote-site-footer__line {
  font-size: inherit;
}

.brote-organizer-cta {
  text-align: center;
  margin: 0 0 2rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border-glow);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.08)),
    var(--brote-card-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}
.brote-organizer-cta__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brote-cyan);
}
.brote-organizer-cta__lead {
  margin: 0 auto 1rem;
  max-width: 28rem;
  font-size: 0.9rem;
  color: var(--brote-text-muted);
  line-height: 1.5;
}
.brote-organizer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}
.brote-organizer-cta__actions .brote-btn {
  text-decoration: none;
  min-width: 11rem;
}
.brote-organizer-cta__actions .brote-btn-primary {
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.45);
}

.brote-admin-logs__table {
  border-collapse: collapse;
  font-size: 0.72rem;
}
.brote-admin-logs__table th,
.brote-admin-logs__table td {
  border: 1px solid #e5e7eb;
  padding: 0.35rem 0.5rem;
  vertical-align: top;
  text-align: left;
}
.brote-admin-logs__table th {
  background: #f3f4f6;
  font-weight: 600;
  white-space: nowrap;
}
.brote-admin-logs__table tr:nth-child(even) td {
  background: #fafafa;
}
.brote-admin-logs__table code {
  font-size: 0.68rem;
  background: #eef2ff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.hidden { display: none !important; }

/* Modal */
.brote-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--brote-modal-backdrop);
  backdrop-filter: blur(4px);
  z-index: 50;
}

.brote-modal {
  position: fixed;
  inset: 0;
  z-index: 51;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

.brote-modal-panel {
  pointer-events: auto;
  max-width: 28rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}

.brote-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brote-text);
  margin: 0 0 1rem;
}

.brote-modal-close {
  background: none;
  border: none;
  color: var(--brote-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.brote-modal-close:hover { color: var(--brote-text); }

.brote-alert-warn {
  background: var(--brote-warn-bg);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--brote-radius);
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--brote-warn-text);
}

/* Operador / estados */
.brote-status-valid {
  background: var(--brote-success-bg);
  border-color: var(--brote-success-border);
  color: var(--brote-success-text);
}

.brote-status-used {
  background: var(--brote-warn-bg);
  border-color: var(--brote-warn-border);
  color: var(--brote-warn-text);
}

.brote-status-invalid {
  background: var(--brote-error-bg);
  border-color: var(--brote-error-border);
  color: var(--brote-error-text);
}

/* Admin shell (opcional) */
.brote-admin-page {
  font-family: var(--brote-font);
  background: var(--brote-bg);
  color: var(--brote-text);
  min-height: 100vh;
}

.brote-admin-inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem;
  overflow-x: hidden;
}

.brote-admin-card {
  background: var(--brote-bg-card-solid);
  border: 1px solid var(--brote-border);
  border-radius: var(--brote-radius-lg);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.brote-admin-card h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brote-nav-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  background: rgba(139, 92, 246, 0.15);
  color: var(--brote-cyan);
  border: 1px solid var(--brote-border);
}

.brote-nav-pill:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: var(--brote-border-glow);
}
.brote-nav-pill--primary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.2));
  border-color: var(--brote-border-glow);
  font-weight: 700;
  color: var(--brote-text);
}

.brote-site-footer__arrepentimiento {
  margin-bottom: 0.5rem !important;
}
.brote-link--arrepentimiento {
  font-weight: 700;
  text-decoration: underline;
}
.brote-trust__pill--arrepentimiento {
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.12);
  font-weight: 600;
}

/* Theme toggle */
.brote-page-tools {
  position: fixed;
  top: max(0.65rem, env(safe-area-inset-top));
  right: max(0.65rem, env(safe-area-inset-right));
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.brote-theme-toggle,
.brote-guide-fab,
.brote-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-card);
  backdrop-filter: blur(12px);
  color: var(--brote-text);
  font-family: var(--brote-font);
  box-shadow: var(--brote-shadow-sm);
  text-decoration: none;
}

.brote-theme-toggle {
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.brote-guide-fab,
.brote-logout-btn {
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.brote-logout-btn {
  color: var(--brote-text-muted);
}

.brote-theme-toggle:hover,
.brote-guide-fab:hover {
  border-color: var(--brote-border-glow);
}

.brote-guide-fab:hover {
  transform: scale(1.04);
}

.brote-logout-btn:hover {
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--brote-error-text);
  transform: scale(1.04);
}

.brote-logout-btn__icon {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.brote-theme-toggle__icon,
.brote-guide-fab__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.brote-theme-toggle__label {
  display: none;
}

/* Admin: barra evento + cargar pagos */
.brote-evento-bar {
  max-width: 100%;
}

.brote-evento-bar__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.brote-evento-bar__label {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brote-text-muted);
}

.brote-evento-bar__select {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.brote-evento-bar__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.brote-evento-bar__aviso {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--brote-warning, #d97706);
}

.brote-evento-bar__aviso[hidden] {
  display: none !important;
}

@media (max-width: 639px) {
  .brote-evento-bar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .brote-evento-bar__btn {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    font-size: 0.8125rem;
  }
}

@media (min-width: 640px) {
  .brote-evento-bar__btn::after {
    content: ' pagos';
  }
}

/* Admin: sección Pagos */
.brote-pagos-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.brote-pagos-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.brote-pagos-filter {
  padding: 0.5rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-card);
  color: var(--brote-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.brote-pagos-filter--active {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.22);
  color: var(--brote-text);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
}

.brote-pagos-export {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--brote-font);
  cursor: pointer;
  box-shadow: var(--brote-shadow-sm);
}

.brote-pagos-export:active {
  transform: scale(0.98);
}

.brote-pagos-export__long {
  display: none;
}

.brote-pagos-export__short {
  display: inline;
}

.brote-pagos-empty {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--brote-text-muted);
  text-align: center;
}

.brote-pagos-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.brote-pagos-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--brote-bg-card);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--brote-shadow-sm);
}

.brote-pagos-table thead {
  background: rgba(34, 197, 94, 0.18);
}

.brote-pagos-table th,
.brote-pagos-table td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--brote-border);
  text-align: left;
  vertical-align: top;
}

.brote-pagos-table th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brote-text-muted);
  white-space: nowrap;
}

.brote-pagos-table .brote-pago-row__monto,
.brote-pagos-table td[data-label="Serv. BTE"] {
  text-align: right;
  white-space: nowrap;
}

.brote-pagos-table .brote-pago-row__ticket a,
.brote-pagos-table .brote-pago-row__ticket button {
  font-size: 0.8125rem;
}

@media (min-width: 640px) {
  .brote-pagos-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }

  .brote-pagos-filters {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .brote-pagos-filter {
    padding: 0.4rem 0.85rem;
  }

  .brote-pagos-export {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .brote-pagos-export__long {
    display: inline;
  }

  .brote-pagos-export__short {
    display: none;
  }
}

@media (max-width: 767px) {
  .brote-pagos-table-wrap {
    overflow-x: visible;
  }

  .brote-pagos-table {
    display: block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .brote-pagos-table thead {
    display: none;
  }

  .brote-pagos-table tbody {
    display: block;
  }

  .brote-pagos-table tbody tr.brote-pago-row {
    display: block;
    margin-bottom: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--brote-border);
    border-radius: 0.75rem;
    background: var(--brote-bg-card);
    box-shadow: var(--brote-shadow-sm);
  }

  .brote-pagos-table tbody tr.brote-pago-row:last-child {
    margin-bottom: 0;
  }

  .brote-pagos-table tbody td {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    gap: 0.15rem 0.65rem;
    padding: 0.3rem 0;
    border-bottom: none;
    font-size: 0.875rem;
    align-items: start;
  }

  .brote-pagos-table tbody td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brote-text-muted);
    line-height: 1.35;
  }

  .brote-pagos-table tbody td.brote-pago-row__nombre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.5rem;
    grid-template-columns: unset;
    padding-bottom: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--brote-border);
  }

  .brote-pagos-table tbody td.brote-pago-row__nombre::before {
    display: none;
  }

  .brote-pago-card-title {
    font-size: 1rem;
    font-weight: 700;
    min-width: 0;
    flex: 1 1 auto;
  }

  .brote-pago-estado-mobile {
    flex: 0 0 auto;
  }

  .brote-pagos-table tbody td.brote-pago-row__estado-col {
    display: none;
  }

  .brote-pagos-table tbody td[data-label="Evento"] {
    display: none;
  }

  .brote-pagos-table tbody td.brote-pago-row__monto {
    font-size: 1.05rem;
    font-weight: 700;
  }

  .brote-pagos-table tbody td.brote-pago-row__ticket {
    grid-template-columns: 6.25rem minmax(0, 1fr);
  }

}

@media (min-width: 768px) {
  .brote-pago-estado-mobile {
    display: none;
  }
}

/* Formularios (solicitar evento, ayuda, etc.) */
.brote-shell--narrow {
  max-width: 36rem;
}

.brote-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brote-lead {
  color: var(--brote-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.brote-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.brote-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.brote-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brote-text-muted);
}

.brote-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .brote-grid-2 { grid-template-columns: 1fr 1fr; }
}

.brote-hr {
  border: none;
  border-top: 1px solid var(--brote-border);
  margin: 0.5rem 0;
}

.brote-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brote-text);
  margin: 0;
}

.brote-callout {
  font-size: 0.75rem;
  color: var(--brote-text-muted);
  line-height: 1.5;
  padding: 0.85rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  background: var(--brote-desglose-bg);
}

.brote-callout strong {
  color: var(--brote-text);
}

.brote-box-accent {
  padding: 1rem;
  border-radius: var(--brote-radius-lg);
  border: 1px solid var(--brote-border-glow);
  background: var(--brote-option-checked-bg);
}

.brote-nav-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.brote-banner {
  padding: 0.85rem 1rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.brote-banner--ok {
  background: var(--brote-success-bg);
  border-color: var(--brote-success-border);
  color: var(--brote-success-text);
}

.brote-banner--err {
  background: var(--brote-error-bg);
  border-color: var(--brote-error-border);
  color: var(--brote-error-text);
}

.brote-success-panel {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--brote-radius-xl);
  border: 2px solid var(--brote-success-border);
  background: var(--brote-success-bg);
  color: var(--brote-success-text);
  margin-bottom: 1.25rem;
}

.brote-success-panel h2 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

.brote-success-panel p {
  font-size: 0.875rem;
  margin: 0.25rem 0;
}

.brote-msg {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.brote-msg--ok { color: var(--brote-success-text); }
.brote-msg--err { color: var(--brote-error-text); }
.brote-msg--muted { color: var(--brote-text-muted); }

.brote-textarea,
.brote-select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  background: var(--brote-input-bg);
  color: var(--brote-text);
  font-size: 0.875rem;
  font-family: inherit;
}

.brote-textarea:focus,
.brote-select:focus {
  outline: none;
  border-color: var(--brote-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.brote-textarea {
  resize: vertical;
  min-height: 5rem;
}

.brote-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--brote-text-muted);
  cursor: pointer;
  line-height: 1.45;
}

.brote-checkbox input {
  margin-top: 0.15rem;
  accent-color: var(--brote-purple);
}

.brote-details,
details.brote-details {
  font-size: 0.75rem;
  color: var(--brote-text-dim);
}

.brote-details summary,
details.brote-details summary {
  cursor: pointer;
  color: var(--brote-text-dim);
  font-size: 0.75rem;
}

.brote-details[open] summary {
  margin-bottom: 0.5rem;
}

/* Prosa legal */
.brote-prose {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--brote-text-muted);
}

.brote-prose h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brote-prose h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brote-text);
  margin: 1.5rem 0 0.5rem;
}

.brote-prose p,
.brote-prose li {
  margin: 0.5rem 0;
}

.brote-prose ul {
  padding-left: 1.25rem;
}

.brote-prose .meta {
  font-size: 0.7rem;
  color: var(--brote-text-dim);
  margin-bottom: 1.5rem;
}

.brote-center-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1.5rem;
}

/* Admin: armonizar Tailwind con tema */
.brote-admin-page select,
.brote-admin-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.brote-admin-page textarea {
  background: var(--brote-input-bg) !important;
  color: var(--brote-text) !important;
  border-color: var(--brote-border) !important;
}

/* Select nativo: el desplegable usa UI del sistema; color-scheme + option evita texto blanco sobre blanco */
html[data-theme="dark"] .brote-admin-page select {
  color-scheme: dark;
}

html[data-theme="light"] .brote-admin-page select {
  color-scheme: light;
}

html[data-theme="dark"] .brote-admin-page select option {
  background-color: var(--brote-bg-card-solid, #12121f);
  color: var(--brote-text, #f4f4f8);
}

html[data-theme="dark"] .brote-admin-page select option:checked,
html[data-theme="dark"] .brote-admin-page select option:hover {
  background-color: var(--brote-purple-deep, #6d28d9);
  color: #fff;
}

.brote-admin-page .bg-white,
.brote-admin-page .bg-gray-50,
.brote-admin-page .bg-gray-100,
.brote-admin-page .bg-green-50,
.brote-admin-page .bg-purple-50,
.brote-admin-page .bg-amber-50,
.brote-admin-page .bg-blue-50,
.brote-admin-page .bg-yellow-50,
.brote-admin-page .bg-emerald-100,
.brote-admin-page .bg-green-100,
.brote-admin-page .bg-purple-100,
.brote-admin-page .bg-amber-100 {
  background: var(--brote-bg-card-solid) !important;
  color: var(--brote-text);
}

.brote-admin-page .text-gray-500,
.brote-admin-page .text-gray-600,
.brote-admin-page .text-gray-700,
.brote-admin-page .text-gray-800,
.brote-admin-page .text-gray-400 {
  color: var(--brote-text-muted) !important;
}

.brote-admin-page .border,
.brote-admin-page .border-gray-100,
.brote-admin-page .border-green-100,
.brote-admin-page .border-purple-100,
.brote-admin-page .border-amber-100 {
  border-color: var(--brote-border) !important;
}

.brote-admin-page .text-green-800,
.brote-admin-page .text-green-700,
.brote-admin-page .text-green-900,
.brote-admin-page .text-purple-800,
.brote-admin-page .text-amber-900,
.brote-admin-page .text-blue-800 {
  color: var(--brote-link) !important;
}

.brote-admin-page code {
  background: var(--brote-input-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

.brote-admin-page .bg-green-700,
.brote-admin-page .bg-green-600,
.brote-admin-page .bg-purple-700,
.brote-admin-page .bg-purple-600,
.brote-admin-page .bg-blue-600,
.brote-admin-page .bg-blue-700,
.brote-admin-page .bg-indigo-600,
.brote-admin-page .bg-amber-600 {
  background: var(--brote-gradient-h) !important;
  color: #fff !important;
  border: none;
}

.brote-admin-page .bg-red-600,
.brote-admin-page .bg-yellow-500,
.brote-admin-page .bg-gray-600 {
  border: none;
}

/* —— Admin dark: badges, links, cards —— */
html[data-theme="dark"] .brote-admin-page {
  color-scheme: dark;
}

html[data-theme="dark"] .brote-admin-page input::placeholder,
html[data-theme="dark"] .brote-admin-page textarea::placeholder {
  color: var(--brote-text-dim);
  opacity: 1;
}

html[data-theme="dark"] .brote-admin-page a:not([class*="bg-"]):not(.brote-pagos-filter) {
  color: var(--brote-link);
}

html[data-theme="dark"] .brote-admin-page a:not([class*="bg-"]):hover {
  color: var(--brote-link-hover);
}

html[data-theme="dark"] .brote-admin-page .text-blue-700,
html[data-theme="dark"] .brote-admin-page .text-blue-800,
html[data-theme="dark"] .brote-admin-page .text-blue-900,
html[data-theme="dark"] .brote-admin-page .text-indigo-700,
html[data-theme="dark"] .brote-admin-page a.text-blue-700,
html[data-theme="dark"] .brote-admin-page button.text-blue-700 {
  color: var(--brote-link) !important;
}

html[data-theme="dark"] .brote-admin-page .text-blue-700:hover,
html[data-theme="dark"] .brote-admin-page a.text-blue-700:hover {
  color: var(--brote-link-hover) !important;
}

html[data-theme="dark"] .brote-admin-page .text-green-700,
html[data-theme="dark"] .brote-admin-page .text-green-800,
html[data-theme="dark"] .brote-admin-page .text-green-900 {
  color: var(--brote-success-text) !important;
}

html[data-theme="dark"] .brote-admin-page .text-orange-600 {
  color: var(--brote-warn-text) !important;
}

html[data-theme="dark"] .brote-admin-page .text-red-600,
html[data-theme="dark"] .brote-admin-page .text-red-800 {
  color: var(--brote-error-text) !important;
}

/* Badges de estado (pagos, solicitudes, denuncias) */
html[data-theme="dark"] .brote-admin-page .bg-green-100,
html[data-theme="dark"] .brote-admin-page .bg-green-200 {
  background: rgba(34, 197, 94, 0.22) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .brote-admin-page .bg-yellow-100,
html[data-theme="dark"] .brote-admin-page .bg-yellow-200 {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] .brote-admin-page .bg-amber-100,
html[data-theme="dark"] .brote-admin-page .bg-amber-50 {
  background: rgba(245, 158, 11, 0.12) !important;
}

html[data-theme="dark"] .brote-admin-page .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

html[data-theme="dark"] .brote-admin-page .bg-blue-100,
html[data-theme="dark"] .brote-admin-page .bg-blue-200 {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .brote-admin-page .bg-red-100,
html[data-theme="dark"] .brote-admin-page .bg-red-200 {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .brote-admin-page .bg-gray-200,
html[data-theme="dark"] .brote-admin-page .bg-gray-300 {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--brote-text-muted) !important;
}

html[data-theme="dark"] .brote-admin-page .brote-pago-estado {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

/* Tarjetas de estadísticas */
html[data-theme="dark"] .brote-admin-page .bg-green-50 {
  background: rgba(34, 197, 94, 0.1) !important;
  box-shadow: inset 3px 0 0 #22c55e;
}

html[data-theme="dark"] .brote-admin-page .bg-blue-50 {
  background: rgba(59, 130, 246, 0.1) !important;
  box-shadow: inset 3px 0 0 #3b82f6;
}

html[data-theme="dark"] .brote-admin-page .bg-emerald-100 {
  background: rgba(16, 185, 129, 0.12) !important;
  box-shadow: inset 3px 0 0 #10b981;
}

html[data-theme="dark"] .brote-admin-page .bg-yellow-50 {
  background: rgba(234, 179, 8, 0.1) !important;
  box-shadow: inset 3px 0 0 #eab308;
}

html[data-theme="dark"] .brote-admin-page .text-emerald-800,
html[data-theme="dark"] .brote-admin-page .text-emerald-900 {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .brote-admin-page .text-yellow-700,
html[data-theme="dark"] .brote-admin-page .text-yellow-800 {
  color: #fde047 !important;
}

/* Formularios internos (admins, operadores) */
html[data-theme="dark"] .brote-admin-page [class*="bg-green-50"],
html[data-theme="dark"] .brote-admin-page [class*="bg-purple-50"] {
  background: var(--brote-desglose-bg) !important;
  border-color: var(--brote-border-glow) !important;
}

html[data-theme="dark"] .brote-admin-page .bg-gray-50,
html[data-theme="dark"] .brote-admin-page [class*="bg-gray-50"] {
  background: var(--brote-bg-card-solid) !important;
  border-color: var(--brote-border) !important;
}

html[data-theme="dark"] .brote-admin-page .bg-white.shadow,
html[data-theme="dark"] .brote-admin-page section.bg-white {
  box-shadow: var(--brote-shadow-sm) !important;
}

html[data-theme="dark"] .brote-admin-page pre.bg-white,
html[data-theme="dark"] .brote-admin-page select.bg-white,
html[data-theme="dark"] .brote-admin-page textarea.bg-white {
  background: var(--brote-input-bg) !important;
  color: var(--brote-text-muted) !important;
  border-color: var(--brote-border) !important;
}

html[data-theme="dark"] .brote-admin-page code.bg-gray-200 {
  background: var(--brote-input-bg) !important;
  color: var(--brote-cyan) !important;
  border: 1px solid var(--brote-border);
}

/* Tablas admin */
html[data-theme="dark"] .brote-admin-page table {
  border-color: var(--brote-border);
}

html[data-theme="dark"] .brote-admin-page table th {
  background: rgba(139, 92, 246, 0.14) !important;
  color: var(--brote-text-muted) !important;
  font-weight: 600;
}

html[data-theme="dark"] .brote-admin-page table td {
  border-color: var(--brote-border) !important;
  color: var(--brote-text);
}
html[data-theme="dark"] .brote-admin-page table tr:nth-child(even) td {
  background: rgba(139, 92, 246, 0.14) !important;
}

html[data-theme="dark"] .brote-admin-page .brote-pagos-table thead {
  background: rgba(34, 197, 94, 0.14) !important;
}

html[data-theme="dark"] .brote-admin-page .brote-pagos-table th {
  color: var(--brote-text-muted) !important;
}

/* Nav pills */
html[data-theme="dark"] .brote-admin-page nav a.rounded-full {
  border: 1px solid var(--brote-border);
  background: var(--brote-pill-off-bg) !important;
  color: var(--brote-text) !important;
}

html[data-theme="dark"] .brote-admin-page nav a.rounded-full:hover {
  border-color: var(--brote-border-glow);
  background: var(--brote-option-checked-bg) !important;
}

html[data-theme="dark"] .brote-admin-page #adminNav a[href="#solicitudes"],
html[data-theme="dark"] .brote-admin-page #navOrganizador a[href="#mi-evento"] {
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

html[data-theme="dark"] .brote-admin-page h2.text-green-800 {
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom-color: var(--brote-border) !important;
}

html[data-theme="dark"] .brote-admin-page .hover\:bg-green-200:hover,
html[data-theme="dark"] .brote-admin-page .hover\:bg-purple-200:hover,
html[data-theme="dark"] .brote-admin-page .hover\:bg-amber-200:hover,
html[data-theme="dark"] .brote-admin-page .hover\:bg-blue-200:hover,
html[data-theme="dark"] .brote-admin-page .hover\:bg-gray-300:hover {
  filter: brightness(1.15);
}

/* ——— Guías e instructivos (solo admin general) ——— */
.brote-page--guide {
  overflow-x: clip;
}
.brote-guide-parallax {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.brote-guide-parallax__mesh {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 55% 45% at 15% 20%, rgba(139, 92, 246, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(34, 211, 238, 0.22), transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(236, 72, 153, 0.12), transparent 55%);
  will-change: transform;
}
.brote-guide-parallax__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  will-change: transform;
}
.brote-guide-parallax__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.brote-guide-parallax__orb--1 {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  top: 8%;
  right: -8%;
  background: rgba(139, 92, 246, 0.45);
}
.brote-guide-parallax__orb--2 {
  width: min(320px, 45vw);
  height: min(320px, 45vw);
  bottom: 25%;
  left: -6%;
  background: rgba(34, 211, 238, 0.28);
}
.brote-guide-parallax__orb--3 {
  width: min(200px, 30vw);
  height: min(200px, 30vw);
  top: 42%;
  left: 38%;
  background: rgba(236, 72, 153, 0.2);
}
.brote-guide-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 120;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.brote-guide-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brote-cyan), #a78bfa);
  transition: width 0.12s ease-out;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}
.brote-guide-top {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 115;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--brote-border);
  background: var(--brote-bg-card);
  backdrop-filter: blur(10px);
  color: var(--brote-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--brote-shadow-sm);
  transition: transform 0.15s, opacity 0.15s;
}
.brote-guide-top:hover {
  transform: translateY(-2px);
  border-color: var(--brote-border-glow);
}
.brote-page--guide .brote-page-tools {
  z-index: 130;
}
.brote-guide-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.brote-guide-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .brote-guide-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .brote-guide-hero {
    transform: none !important;
  }
}
.brote-guide-wrap {
  position: relative;
  z-index: 1;
}
.brote-guide-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}
@media (min-width: 960px) {
  .brote-guide-topbar {
    padding: 1.25rem 2rem;
  }
}
.brote-guide-topbar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8rem;
}
.brote-guide-topbar__nav a {
  color: var(--brote-text-muted);
  text-decoration: none;
}
.brote-guide-topbar__nav a:hover {
  color: var(--brote-cyan);
}
.brote-guide-layout {
  display: grid;
  gap: 2rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}
@media (min-width: 960px) {
  .brote-guide-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
    padding: 0 2rem 5rem;
  }
  .brote-guide-toc {
    position: sticky;
    top: 1.5rem;
  }
}
.brote-guide-toc {
  padding: 1.15rem 1.2rem;
  border-radius: var(--brote-radius);
  background: var(--brote-card-bg);
  border: 1px solid var(--brote-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
@media (max-width: 959px) {
  .brote-guide-toc {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 -0.25rem;
    border-radius: 0 0 var(--brote-radius) var(--brote-radius);
    max-height: none;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .brote-guide-toc__title {
    display: none;
  }
  .brote-guide-toc a {
    white-space: nowrap;
    flex-shrink: 0;
    border-left: none !important;
    padding: 0.4rem 0.75rem !important;
    margin-left: 0 !important;
    border-radius: 999px;
    background: var(--brote-pill-off-bg);
    font-size: 0.75rem;
  }
  .brote-guide-toc a.is-active {
    background: rgba(139, 92, 246, 0.25);
    color: var(--brote-cyan);
  }
}
.brote-guide-toc__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brote-text-dim);
  margin: 0 0 0.75rem;
}
.brote-guide-toc a {
  display: block;
  font-size: 0.8rem;
  color: var(--brote-text-muted);
  text-decoration: none;
  padding: 0.35rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}
.brote-guide-toc a:hover,
.brote-guide-toc a.is-active {
  color: var(--brote-cyan);
  border-left-color: var(--brote-cyan);
}
.brote-guide-hero {
  text-align: center;
  padding: 2.5rem 1.25rem 2rem;
  max-width: 48rem;
  margin: 0 auto 2rem;
  will-change: transform;
  transition: transform 0.1s linear;
}
@media (min-width: 960px) {
  .brote-guide-hero {
    padding: 4rem 2rem 3rem;
    max-width: 56rem;
  }
  .brote-guide-hero .brote-page-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
  }
}
.brote-guide-hero__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: var(--brote-cyan);
  margin-bottom: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brote-guide-hero__lock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--brote-text-dim);
  margin-top: 1rem;
}
.brote-guide-cards {
  display: grid;
  gap: 1.25rem;
  max-width: 56rem;
  margin: 0 auto 3rem;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .brote-guide-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .brote-guide-cards {
    max-width: 64rem;
    padding: 0 2rem;
    gap: 1.5rem;
  }
}
.brote-guide-card-link {
  display: block;
  padding: 1.5rem 1.65rem;
  border-radius: var(--brote-radius);
  background: var(--brote-card-bg);
  border: 1px solid var(--brote-border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.brote-guide-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.25s;
}
.brote-guide-card-link:hover {
  border-color: var(--brote-border-glow);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.18);
  transform: translateY(-3px);
}
.brote-guide-card-link:hover::before {
  opacity: 1;
}
.brote-guide-card-link__icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  display: block;
}
.brote-guide-card-link h2 {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brote-guide-card-link p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--brote-text-muted);
  line-height: 1.5;
}
.brote-guide-main {
  min-width: 0;
}
.brote-guide-main > .brote-card {
  backdrop-filter: blur(10px);
}
@media (min-width: 960px) {
  .brote-guide-section h2 {
    font-size: 1.5rem;
  }
  .brote-guide-shot__frame.has-image {
    max-width: min(320px, 42vw);
  }
  .brote-guide-table {
    font-size: 0.875rem;
  }
}
.brote-guide-section {
  scroll-margin-top: 5rem;
  margin-bottom: 2.75rem;
}
@media (min-width: 960px) {
  .brote-guide-section {
    scroll-margin-top: 6rem;
  }
}
.brote-guide-section h2 {
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--brote-border);
}
.brote-guide-section h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--brote-text);
}
.brote-guide-steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  counter-reset: guide-step;
}
.brote-guide-steps > li {
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.5rem;
  counter-increment: guide-step;
}
.brote-guide-steps > li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--brote-gradient-h);
  color: #fff;
}
.brote-guide-shot {
  margin: 1rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brote-guide-shot__frame {
  position: relative;
  width: 100%;
  max-width: min(280px, 72vw);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--brote-border);
  background: #0a0a12;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.brote-guide-shot__frame:not(.has-image)::before {
  content: "";
  display: block;
  padding-bottom: 177.78%;
}
.brote-guide-shot__frame.has-image {
  height: 370px;
}
.brote-guide-shot__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}
.brote-guide-shot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--brote-text-dim);
  font-size: 0.8rem;
  line-height: 1.45;
}
.brote-guide-shot__placeholder svg {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.45;
  stroke: currentColor;
  fill: none;
}
.brote-guide-shot__placeholder code {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: var(--brote-pill-off-bg);
  color: var(--brote-text-muted);
  word-break: break-all;
}
.brote-guide-shot figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--brote-text-dim);
}
.brote-guide-shot__frame.has-image .brote-guide-shot__placeholder {
  display: none;
}
.brote-guide-callout {
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border-left: 4px solid var(--brote-cyan);
  background: rgba(34, 211, 238, 0.08);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 1rem 0;
}
.brote-guide-callout--warn {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}
.brote-guide-callout--ok {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
}
.brote-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 1rem 0;
}
.brote-guide-table th,
.brote-guide-table td {
  border: 1px solid var(--brote-border);
  padding: 0.5rem 0.65rem;
  text-align: left;
}
.brote-guide-table th {
  background: var(--brote-desglose-bg);
  font-weight: 600;
}
.brote-guide-faq details {
  border: 1px solid var(--brote-border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  background: var(--brote-card-bg);
}
.brote-guide-faq summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
}
.brote-guide-faq summary::-webkit-details-marker { display: none; }
.brote-guide-faq details[open] summary {
  border-bottom: 1px solid var(--brote-border);
}
.brote-guide-faq__body {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.875rem;
  color: var(--brote-text-muted);
  line-height: 1.55;
}
.brote-guide-kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.78em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--brote-border);
  background: var(--brote-pill-off-bg);
}
@media (prefers-reduced-motion: reduce) {
  .brote-guide-parallax__mesh,
  .brote-guide-parallax__grid,
  .brote-guide-parallax__orb {
    transform: none !important;
  }
  .brote-guide-card-link:hover {
    transform: none;
  }
}

/* Post-checkout message (/gracias) */
.brote-gracias-evento {
  color: var(--brote-cyan);
  font-weight: 600;
  font-size: 1.05rem;
  margin: -0.25rem 0 1rem;
  line-height: 1.35;
}
.brote-gracias-lead {
  color: var(--brote-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.brote-gracias-msg-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brote-text-dim);
  margin: 0 0 0.5rem;
}
.brote-gracias-message {
  padding: 1rem 1.15rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--brote-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.brote-gracias-message a.brote-link {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.brote-mensaje-gracias-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.brote-mensaje-gracias-head label {
  margin: 0;
}
.brote-mensaje-gracias-preview-btn {
  font-size: 0.75rem !important;
  padding: 0.35rem 0.85rem !important;
}
.brote-gracias-preview-modal {
  max-width: 22rem;
}
.brote-gracias-preview-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  text-align: left;
}
.brote-gracias-preview-modal__meta {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brote-text-dim);
  margin: 0;
}
.brote-gracias-preview-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--brote-text);
}

/* ——— Landing venta /eleginos ——— */
.brote-page--sales .brote-sales-hero__badge {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.brote-sales-topnav {
  align-items: center;
}
.brote-sales-topnav__cta {
  padding: 0.45rem 1rem !important;
  font-size: 0.8rem !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.brote-sales-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem auto 0;
  padding: 0;
  list-style: none;
  max-width: 36rem;
}
.brote-sales-pills li {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--brote-pill-off-bg);
  border: 1px solid var(--brote-border);
  color: var(--brote-text-muted);
}
.brote-sales-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.brote-sales-hero-cta .brote-btn {
  text-decoration: none;
  min-width: 10rem;
}
.brote-sales-why {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (min-width: 640px) {
  .brote-sales-why {
    grid-template-columns: 1fr 1fr;
  }
}
.brote-sales-why__card {
  padding: 1.15rem 1.25rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border);
  background: var(--brote-card-bg);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, transform 0.2s;
}
.brote-sales-why__card:hover {
  border-color: var(--brote-border-glow);
  transform: translateY(-2px);
}
.brote-sales-why__icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.35rem;
}
.brote-sales-why__card h3 {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  color: var(--brote-text);
}
.brote-sales-why__card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--brote-text-muted);
  line-height: 1.5;
}
.brote-sales-features {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .brote-sales-features {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .brote-sales-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
.brote-sales-feature {
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--brote-border);
  background: rgba(0, 0, 0, 0.15);
  border-left: 3px solid var(--brote-cyan);
}
html[data-theme="light"] .brote-sales-feature {
  background: rgba(255, 255, 255, 0.5);
}
.brote-sales-feature h3 {
  font-size: 0.9rem;
  margin: 0 0 0.3rem;
  color: var(--brote-cyan);
}
.brote-sales-feature p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--brote-text-muted);
  line-height: 1.45;
}
.brote-sales-shots {
  display: grid;
  gap: 2rem;
  justify-items: center;
}
@media (min-width: 960px) {
  .brote-sales-shots {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .brote-sales-shots .brote-guide-shot {
    margin: 0;
  }
  .brote-sales-shots .brote-guide-shot__frame.has-image {
    max-width: 100%;
    height: 320px;
  }
}
.brote-sales-cta-section {
  margin-bottom: 0;
}
.brote-sales-cta-band {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--brote-radius);
  border: 1px solid var(--brote-border-glow);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(34, 211, 238, 0.08)),
    var(--brote-card-bg);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 48px rgba(139, 92, 246, 0.12);
}
.brote-sales-cta-band h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  background: var(--brote-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brote-sales-cta-band > p {
  margin: 0 auto;
  max-width: 28rem;
  font-size: 0.95rem;
  color: var(--brote-text-muted);
  line-height: 1.55;
}

/* —— Página de acceso (login) —— */
.brote-acceso-page {
  min-height: 100dvh;
  margin: 0;
  font-family: var(--brote-font);
  color: var(--brote-text);
  background: var(--brote-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.brote-acceso-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, var(--brote-page-glow-1), transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 75%, var(--brote-page-glow-2), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, var(--brote-page-glow-3), transparent 45%),
    var(--brote-bg);
}
.brote-acceso-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}
.brote-acceso-card {
  padding: 2rem 1.75rem 1.5rem;
  border-radius: var(--brote-radius-xl);
  border: 1px solid var(--brote-border-glow);
  background: var(--brote-bg-card);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--brote-glow), var(--brote-shadow);
}
.brote-acceso-logo {
  text-align: center;
  margin-bottom: 0.5rem;
}
.brote-acceso-logo img {
  max-height: 3.25rem;
  width: auto;
  filter: var(--brote-logo-shadow);
}
.brote-acceso-sub {
  text-align: center;
  font-size: 0.95rem;
  color: var(--brote-text-muted);
  margin: 0 0 1.25rem;
}
.brote-acceso-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: var(--brote-input-bg);
  border: 1px solid var(--brote-border);
}
.brote-acceso-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--brote-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.5rem 0.35rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.brote-acceso-tab.is-active {
  background: var(--brote-gradient);
  color: #fff;
  box-shadow: var(--brote-btn-primary-shadow);
}
.brote-acceso-field {
  margin-bottom: 1rem;
}
.brote-acceso-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--brote-text-muted);
}
.brote-acceso-field.hidden {
  display: none;
}
.brote-acceso-error {
  font-size: 0.85rem;
  color: var(--brote-error-text);
  background: var(--brote-error-bg);
  border: 1px solid var(--brote-error-border);
  border-radius: var(--brote-radius);
  padding: 0.6rem 0.75rem;
  margin: 0 0 1rem;
}
.brote-acceso-submit {
  width: 100%;
  margin-top: 0.25rem;
}
.brote-acceso-hint {
  font-size: 0.78rem;
  color: var(--brote-text-dim);
  line-height: 1.45;
  margin: 1.25rem 0 0;
  text-align: center;
}
.brote-acceso-foot {
  text-align: center;
  margin: 1rem 0 0;
  font-size: 0.85rem;
}