/* Tema "La Calle" para las vistas operativas (activar, billetera, negocios,
   validador, admin). Se activa con la clase de body `tema-calle`.

   Estrategia: las vistas ya usan variables (tokens). Redefiniendo esos tokens bajo
   `.tema-calle` la paleta se voltea sola a La Calle; encima se cambia la tipografía
   (Inter cuerpo / Archivo Black títulos) y se reestilizan nav, footer, botones e
   inputs. NO se toca el markup ni ninguna clase/id (solo presentación).

   La landing tiene su propio sistema en landing.css (.pagina-landing); este tema es
   para las demás vistas. */

.tema-calle {
  /* Paleta La Calle sobre los tokens existentes */
  --paper:            #e8e1d2;
  --surface:          #f2eadb;
  --ink:              #151515;
  --accent:           #e8472e;   /* rojo: acción/énfasis */
  --accent-soft:      #27a9a2;   /* teal: acentos secundarios (cifras de fondo, enlaces) */
  --text-body:        #3a3a37;
  --text-muted:       #7a7368;
  --text-inverse-soft:#b8b2a3;
  --line:             #d4ccb8;
  --line-mid:         #c7bfa9;

  /* Colores La Calle disponibles por nombre propio */
  --calle-red:    #e8472e;
  --calle-yellow: #f4c83d;
  --calle-teal:   #27a9a2;
  --calle-asphalt:#292929;

  /* Cuerpo en Inter */
  --font: 'Inter', system-ui, sans-serif;

  background: var(--paper);
}
.tema-calle ::selection { background: var(--calle-red); color: #fff; }
.tema-calle :focus-visible { outline: 2px solid var(--calle-red); outline-offset: 2px; }

/* ---------- Títulos y cifras en Archivo Black ----------
   Se capturan por patrón de clase para cubrir todas las vistas sin enumerar una a una. */
.tema-calle [class*="titulo"],
.tema-calle [class*="cifra"],
.tema-calle .display-hero,
.tema-calle .display-section,
.tema-calle .h1-vista,
.tema-calle .h2-seccion,
.tema-calle .paquete-precio,
.tema-calle .kpi-cifra,
.tema-calle .fondo-cifra,
.tema-calle .detalle-codigo,
.tema-calle .cupon-oferta,
.tema-calle .cupon-codigo-valor,
.tema-calle .negocios-hero-titulo,
.tema-calle .rank-pos,
.tema-calle .rank-canjes {
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-weight: 400;
}

/* ---------- Nav (paper, como en la landing) ---------- */
.tema-calle .site-nav {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.tema-calle .site-nav-brand {
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}
.tema-calle .site-nav-links a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 0;
}
.tema-calle .site-nav-links a:hover { color: var(--ink); opacity: .6; }
.tema-calle .site-nav-links a.activa { color: var(--calle-red); border-bottom: 0; }
.tema-calle .nav-fondo-label { color: var(--ink); }
.tema-calle .nav-fondo-cifra { color: var(--calle-red); }
.tema-calle .nav-fondo-dot { background: var(--calle-red); }
.tema-calle .btn-nav {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  font-weight: 800;
}
.tema-calle .btn-nav:hover { background: var(--calle-red); }

/* Panel desplegable móvil con la paleta La Calle */
@media (max-width: 900px) {
  .tema-calle .site-nav-links { background: var(--ink); border-top-color: var(--calle-asphalt); }
  .tema-calle .site-nav-links a { color: #fff; }
  .tema-calle .site-nav-links a:hover { color: #fff; opacity: 1; }
  .tema-calle .site-nav-links a.activa { color: var(--calle-yellow); }
  .tema-calle .site-nav-links a.site-nav-links-cta { color: var(--calle-yellow); }
}

/* ---------- Footer ---------- */
.tema-calle .site-footer { background: var(--ink); border-top: 0; }
.tema-calle .site-footer-marca { color: #fff; font-family: 'Archivo Black', system-ui, sans-serif; font-weight: 400; letter-spacing: .02em; }
.tema-calle .site-footer-hashtag { color: var(--calle-yellow); }

/* ---------- Botones: rectangulares, borde marcado ---------- */
.tema-calle .btn { border-radius: 0; }
.tema-calle .btn-accent { background: var(--calle-red); }
.tema-calle .btn-accent:hover { background: #cf3d26; }
.tema-calle .badge { border-radius: 0; }

/* ---------- Inputs: borde ink marcado (recuadro) ---------- */
.tema-calle .input-box,
.tema-calle .cupon-input,
.tema-calle .cupon-textarea,
.tema-calle .campo-input,
.tema-calle .acceso-input,
.tema-calle .solicitud-venta {
  border-color: var(--ink);
  border-radius: 0;
}
.tema-calle .input-box:focus,
.tema-calle .cupon-input:focus,
.tema-calle .cupon-textarea:focus,
.tema-calle .campo-input:focus,
.tema-calle .acceso-input:focus,
.tema-calle .solicitud-venta:focus { border-color: var(--calle-red); }
/* Campo subrayado grande (código, canje) */
.tema-calle .input-line,
.tema-calle .input-grande,
.tema-calle .input-codigo,
.tema-calle .input-canje { border-bottom-color: var(--ink); }

/* ---------- Acentos de marca puntuales ---------- */
.tema-calle .eyebrow { color: var(--calle-red); }
.tema-calle .paquete-nivel,
.tema-calle .paquete-cupos,
.tema-calle .seleccion-head,
.tema-calle .resultado-head { color: var(--calle-red); }
.tema-calle .resultado-cifra-aporte,
.tema-calle .billetera-cifra-ahorro { color: var(--calle-red); }
/* Franja superior del paquete Gold: pasa a rojo La Calle */
.tema-calle .paquete--gold { box-shadow: inset 0 4px 0 0 var(--calle-red); }

/* ---------- Admin (vista oscura): mantener legibilidad, aplicar acentos ----------
   Admin usa --ink como fondo (#151515 asfalto La Calle). Solo cambian acentos y
   tipografía; los tokens oscuros propios (field-dark, line-dark) se conservan. */
.tema-calle.pagina-admin .kpi-cifra-fondo,
.tema-calle.pagina-admin .rank-fila.top-1 .rank-pos,
.tema-calle.pagina-admin .detalle-eyebrow,
.tema-calle.pagina-admin .admin-login .eyebrow { color: var(--calle-teal); }
.tema-calle.pagina-admin .fondo-bloque { background: var(--calle-red); }
.tema-calle.pagina-admin .rank-fila.top-3 .rank-barra-fill { background: var(--calle-yellow); }
.tema-calle.pagina-admin .tab-pill.activa { background: var(--calle-yellow); color: var(--ink); border-color: var(--calle-yellow); }