/* ============================================================
   TEMA CLÁSICO (claro institucional) — DEFAULT de Central Pinamar.
   Estética alineada a pinamar.gob.ar: blanco, verde #007242, Fira Sans.
   El TEMA FUTURISTA (oscuro, original) es el CSS base (sin data-theme).
   Se activa con  html[data-theme="clasico"]  (ver theme.js + primer pintado).
   Este archivo se carga DESPUÉS de styles.css.
   ============================================================ */

/* ---- Botón de cambio de tema (nav) — visible en ambos temas ---- */
.theme-toggle-btn {
  position: relative; width: 38px; height: 38px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, 0.1); border: 1px solid var(--border-green);
  color: var(--green-bright); cursor: pointer; flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.theme-toggle-btn:hover { border-color: var(--border-green-hover); transform: scale(1.06); }
.theme-ic {
  position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.34,1.56,.64,1);
}
/* Base = Futurista (oscuro): se ve la luna. Clásico (claro): se ve el sol. */
.theme-ic-sun  { opacity: 0; transform: rotate(90deg) scale(.5); }
.theme-ic-moon { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="clasico"] .theme-ic-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="clasico"] .theme-ic-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
@media (prefers-reduced-motion: reduce) { .theme-ic { transition: none; } }

/* ---- Paleta del Tema Clásico ---- */
[data-theme="clasico"] {
  --green-bright: #007242;                 /* verde institucional exacto de pinamar.gob.ar */
  --green-mid:    #00925a;
  --green-dark:   #eaf4ee;                 /* se usaba como fondo oscuro de botones/acentos → verde claro */
  --green-deeper: #dfeee6;
  --amber:        #b45309;
  --bg-main:      #ffffff;
  --text-primary: #333333;                 /* mismo gris de texto del sitio oficial */
  --text-muted:   rgba(51, 51, 51, 0.6);
  --text-faint:   rgba(51, 51, 51, 0.42);
  --border-green: rgba(0, 114, 66, 0.16);
  --border-green-hover: rgba(0, 114, 66, 0.45);
  /* Fondo de TODAS las tarjetas (herramientas + comercios) con el verde
     institucional, no con el verde lima del tema oscuro. */
  --card-bg:       rgba(0, 114, 66, 0.12);
  --card-bg-hover: rgba(0, 114, 66, 0.18);
  /* Botón "Mapa": verde institucional fuerte de arranque y en hover un blanco
     SEMITRANSPARENTE — deja ver apenas el verde de la tarjeta por debajo.
     El contorno se refuerza a #007242, así el botón se define en vez de apagarse. */
  --btn-map-bg:       rgba(0, 114, 66, 0.20);
  --btn-map-bg-hover: rgba(255, 255, 255, 0.65);
  /* La tipografía ya NO se redefine por tema: los dos usan Fira Sans, que sale de
     pinamar-ui.css vía --font-main en styles.css. Antes acá se pisaba para el tema
     Clásico, y eso hacía que la letra del sitio cambiara al conmutar de tema. */
}

/* ---- Fondo ---- */
[data-theme="clasico"] body { background: var(--bg-main); color: var(--text-primary); }
/* El fondo animado (cielo + ciudad) no se muestra en Clásico */
[data-theme="clasico"] .home-fx-canvas,
[data-theme="clasico"] .p50-fx-canvas { display: none !important; }
[data-theme="clasico"] .grid-bg {
  background-image:
    linear-gradient(rgba(0, 114, 66, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 66, 0.05) 1px, transparent 1px);
}
[data-theme="clasico"] .glow {
  background: radial-gradient(circle, rgba(0, 114, 66, 0.05) 0%, transparent 70%);
}
/* Hilo verde institucional en el tope (guiño a la barra verde de pinamar.gob.ar) */
[data-theme="clasico"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #007242, #00a05c 50%, #007242);
  z-index: 2000; pointer-events: none;
}

/* ---- Nav ---- */
[data-theme="clasico"] nav {
  background: rgba(255, 255, 255, 0.86) !important;   /* !important: gana a bg oscuro del nav base aunque use id */
  border-bottom-color: var(--border-green);
}
/* La barra de la raíz: transparente arriba de todo, con fondo al scrollear.
   🔴 Va con !important porque la regla de arriba (`[data-theme="clasico"] nav`)
   ya lo usa, y `!important` le gana a la especificidad del id. */
[data-theme="clasico"] #homeNav { background: transparent !important; }
[data-theme="clasico"] #homeNav.pegado { background: rgba(255, 255, 255, 0.86) !important; }

[data-theme="clasico"] .nav-links a { color: rgba(51, 51, 51, 0.7); }
[data-theme="clasico"] .nav-links a:hover { color: var(--green-bright); }
/* Logo del nav: en el tema oscuro se blanquea por filtro (ver styles.css).
   Acá se lo devuelve a su verde institucional. */
[data-theme="clasico"] .nav-logo-icon { filter: none; opacity: 1; }

[data-theme="clasico"] .nav-logo-sub,
[data-theme="clasico"] .nav-logo-text { color: var(--text-primary); }
[data-theme="clasico"] .nav-logo-sub { color: rgba(0, 114, 66, 0.78); }

/* ---- Hero: título en verde institucional legible (no blanco) ---- */
[data-theme="clasico"] .hero h1 {
  background: linear-gradient(to right, #00623a 35%, #00b86b 50%, #00623a 65%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="clasico"] .hero-badge {
  background: rgba(0, 114, 66, 0.07);
  border-color: rgba(0, 114, 66, 0.22);
  color: rgba(0, 114, 66, 0.85);
}

/* ---- Botón primario ---- */
[data-theme="clasico"] .btn-primary {
  background: var(--green-bright); border-color: var(--green-bright); color: #ffffff;
}
[data-theme="clasico"] .btn-primary:hover { background: #00623a; border-color: #00623a; }

/* ============================================================
   TEMA CLÁSICO · overrides por componente (según inventario del CSS)
   ============================================================ */

/* ---- Textos que estaban en blanco/claro → grises legibles ---- */
[data-theme="clasico"] .cred-name,
[data-theme="clasico"] .gmap-popup strong,
[data-theme="clasico"] .login-title,
[data-theme="clasico"] .verify-name,
[data-theme="clasico"] .verify-done b,
[data-theme="clasico"] .mystats-title,
[data-theme="clasico"] .desc-c,
[data-theme="clasico"] .desc-grab-row,
[data-theme="clasico"] .cred-mobile-title { color: var(--text-primary) !important; }

[data-theme="clasico"] .btn-ghost,
[data-theme="clasico"] .access-banner,
[data-theme="clasico"] .about-card,
[data-theme="clasico"] .news-text,
[data-theme="clasico"] .nav-mobile-menu a,
/* 🔴 Va con `!important` porque la regla base también lo lleva: sin él gana el
   color CLARO del tema oscuro y en el menú blanco queda texto casi invisible.
   Un `!important` sólo lo vence otro `!important` — la especificidad no alcanza.
   Verde institucional oscuro, para que se lea y sea de la familia del menú. */
[data-theme="clasico"] .interno-menu-logout { color: #00563a !important; }
[data-theme="clasico"] .interno-menu-logout:hover {
  color: #007242 !important; background: rgba(0, 114, 66, .09) !important;
}
/* Cerrar sesión SÍ puede virar a rojo al pasar por encima: es la acción
   destructiva del menú. El conmutador de tema no, que no rompe nada. */
[data-theme="clasico"] #logoutBtnMobile:hover {
  color: #c0392b !important; background: rgba(192, 57, 43, .08) !important;
}

[data-theme="clasico"] .stat-label,
[data-theme="clasico"] .section-desc,
[data-theme="clasico"] .tool-desc,
[data-theme="clasico"] .benef-detail,
[data-theme="clasico"] .stats-diag,
[data-theme="clasico"] .interno-menu-user,
[data-theme="clasico"] .cred-qr-timer,
[data-theme="clasico"] .desc-s { color: var(--text-muted); }

[data-theme="clasico"] .vinc-hint,
/* 🔴 El logo del pie es un SVG con `fill:#fff` HARDCODEADO en un <style>
   interno. Al usarse como <img>, el CSS de afuera no puede alcanzar ese trazo:
   en el tema claro quedaba blanco sobre blanco, invisible — en las 7 páginas que
   traen este pie. Se cambia la IMAGEN, que es lo único que se puede tocar desde
   afuera, por la variante verde (mismo trazo, `fill:#007242`). */
[data-theme="clasico"] .footer-logo { content: url("../img/logo-muni-respira-verde.svg"); }

[data-theme="clasico"] .footer-location,
[data-theme="clasico"] .footer-right,
[data-theme="clasico"] .tool-tag.soon { color: var(--text-faint); }

/* ---- Acentos que estaban en verde brillante → verde institucional ---- */
[data-theme="clasico"] .hero-badge,
[data-theme="clasico"] .cred-kind,
[data-theme="clasico"] .vinc-hint a,
[data-theme="clasico"] .section-num,
[data-theme="clasico"] .tool-arrow,
[data-theme="clasico"] .version-badge,
[data-theme="clasico"] .desc-ic { color: var(--green-bright); }

/* ---- Pasteles de acción secundaria → tonos legibles sobre blanco ---- */
[data-theme="clasico"] .loc-btn { color: #1d4ed8; }
[data-theme="clasico"] .benef-popup-actions a.sv,
[data-theme="clasico"] .benef-btn.sv { color: #4338ca; }
[data-theme="clasico"] .login-ok { color: var(--green-bright); }
[data-theme="clasico"] .login-error,
[data-theme="clasico"] .field-error,
[data-theme="clasico"] .verify-card.is-error .verify-status { color: #dc2626; }

/* ---- Fondos oscuros sólidos/gradientes → claros ---- */
[data-theme="clasico"] .cred-card,
[data-theme="clasico"] .login-box,
[data-theme="clasico"] .verify-card {
  background: linear-gradient(155deg, #f2f9f5 0%, #ffffff 60%, #eef7f1 100%);
  border-color: var(--border-green);
  box-shadow: 0 1px 2px rgba(18, 53, 36, 0.05), 0 18px 44px rgba(18, 53, 36, 0.12);
}
[data-theme="clasico"] .gm-style .gm-style-iw-c,
[data-theme="clasico"] .gm-style .gm-style-iw-t::after { background: #ffffff !important; }
[data-theme="clasico"] .gm-style .gm-style-iw-c { box-shadow: 0 8px 32px rgba(18, 53, 36, 0.18) !important; }
[data-theme="clasico"] .qr-modal-box,
[data-theme="clasico"] .nav-stats-menu,
[data-theme="clasico"] .nav-mobile-menu,
[data-theme="clasico"] .desc-sheet {
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(18, 53, 36, 0.16);
}
[data-theme="clasico"] .stats-diag { background: rgba(0, 114, 66, 0.04); }
/* Scrims de modales: se dejan oscuros (estándar) pero un poco más suaves */
[data-theme="clasico"] .qr-modal,
[data-theme="clasico"] .login-modal { background: rgba(18, 53, 36, 0.45); }

/* ---- Films claros que desaparecían sobre blanco → tinte / borde ---- */
[data-theme="clasico"] .about-card,
[data-theme="clasico"] .ver-card { background: var(--green-dark); }
[data-theme="clasico"] .benef-search,
[data-theme="clasico"] .login-input,
[data-theme="clasico"] .login-social,
[data-theme="clasico"] .verify-select { background: #ffffff; border-color: var(--border-green); }
[data-theme="clasico"] .login-social:hover { background: #f4faf7; }
[data-theme="clasico"] .verify-close-btn { background: var(--green-dark); border-color: var(--border-green); }
[data-theme="clasico"] .verify-close-btn:hover { background: var(--green-deeper); }

/* ---- Cajas blancas (QR / logos de comercios): borde para que no se fundan ---- */
[data-theme="clasico"] .cred-qr,
[data-theme="clasico"] .gmap-popup-logo-wrap,
[data-theme="clasico"] .benef-popup-logo,
[data-theme="clasico"] .benef-logo-wrap,
[data-theme="clasico"] .verify-sel-logo,
[data-theme="clasico"] .stats-bar-logo { border: 1px solid var(--border-green); }

/* ---- Bordes claros que desaparecían → verde institucional ---- */
[data-theme="clasico"] .btn-ghost,
[data-theme="clasico"] .login-social,
[data-theme="clasico"] .verify-close-btn { border-color: var(--border-green); }
[data-theme="clasico"] .btn-ghost:hover,
[data-theme="clasico"] .login-social:hover { border-color: var(--border-green-hover); }
[data-theme="clasico"] .login-divider::before,
[data-theme="clasico"] .login-divider::after { background: var(--border-green); }

/* ---- Beneficios · vista móvil (app-view): panel inferior + credencial ---- */
/* 🔴 La barra de navegación inferior faltaba acá: el panel de descuentos y el
   título sí se habían tematizado, pero `.app-nav` quedó con su `#06160d` a mano,
   así que en tema Clásico aparecía una franja negra al pie del celular. Los
   colores de la vista app están escritos a mano en el <style> de beneficios.html
   (nacieron para el tema oscuro), así que cada pieza necesita su override acá. */
/* 🔴 El `body.app-view` NO es decorativo: la regla base es
   `body.app-view .app-nav` (0,2,1) y un `[data-theme="clasico"] .app-nav` es
   (0,2,0), o sea MENOS específico — perdía y la barra seguía negra. Un @media no
   suma especificidad, así que el override tiene que igualar el alcance del
   selector base, no sólo estar declarado después. */
[data-theme="clasico"] body.app-view .app-nav {
  background: #ffffff;
  border-top-color: var(--border-green);
  box-shadow: 0 -6px 24px rgba(18, 53, 36, 0.07);
}
[data-theme="clasico"] .app-tab { color: var(--text-muted); }
[data-theme="clasico"] .app-tab.active { color: var(--green-bright); }
[data-theme="clasico"] .app-tab.active .app-tab-ic { background: rgba(0, 114, 66, 0.12); }
/* Mismo problema en el panel de descuentos: la base es
   `body.app-view[data-tab="cred"] .desc-sheet` (0,3,1) y el override general de
   más arriba es (0,2,0). Acá se le gana con el alcance completo. */
[data-theme="clasico"] body.app-view[data-tab="cred"] .desc-sheet {
  background: #ffffff;
  border-color: var(--border-green);
  box-shadow: 0 -18px 50px rgba(18, 53, 36, 0.16);
}
[data-theme="clasico"] .desc-grab-bar { background: rgba(0, 114, 66, 0.25); }
[data-theme="clasico"] .desc-pct { background: var(--green-dark); color: var(--green-bright); }
[data-theme="clasico"] .desc-row { border-bottom-color: rgba(0, 0, 0, 0.06); }
/* 🔴 Contenido de la lista de descuentos. `.desc-c` es `color:#fff` en el tema
   oscuro y el panel pasa a BLANCO en Clásico: sin esto, el nombre del comercio
   quedaba blanco sobre blanco — invisible, no sólo mal contrastado. Se notaba
   poco porque el panel arranca plegado. */
[data-theme="clasico"] .desc-c { color: var(--text-primary); }
[data-theme="clasico"] .desc-s { color: var(--text-muted); }
[data-theme="clasico"] .desc-ic { background: rgba(0, 114, 66, 0.10); color: var(--green-bright); }
[data-theme="clasico"] .desc-grab-row .chev { color: var(--green-bright); }

/* ---- Beneficios · pantalla de Inicio de la vista app ----
   Mismo caso que la barra: los colores nacieron para el tema oscuro y están
   escritos a mano en el <style> de beneficios.html, así que cada pieza
   necesita su override. Sin esto, en Clásico quedaban tarjetas casi negras
   sobre fondo blanco y texto blanco sobre blanco en los nombres. */
[data-theme="clasico"] .ini-hola { color: var(--text-muted); }
[data-theme="clasico"] .ini-tit  { color: var(--text-primary); }
[data-theme="clasico"] .ini-sub  { color: var(--text-muted); }
/* La placa del banner es blanca en los DOS temas a propósito: va encima de la
   ilustración del rubro, que también es clara. Una placa oscura en Futurista
   se vería como un parche pegado sobre el dibujo. Por eso acá no hay override
   de `.ini-slide-chip`. */
[data-theme="clasico"] .ini-punto { background: rgba(0, 114, 66, 0.25); }
[data-theme="clasico"] .ini-punto.activo { background: var(--green-bright); }
/* 🔴 Verde tenue, no blanco: el MISMO `--card-bg` de las tarjetas de comercio.
   El usuario las comparó lado a lado —«donde se ve que tiene blanco lo quiero
   con un verde, como tiene la parte de abajo en las tarjetas en Comercios y
   categorías»— y tenía razón: dos familias de tarjetas en la misma portada con
   fondos distintos se leen como dos sistemas. El borde entra por lo mismo: sin
   él, sobre un fondo claro el verde al 12 % casi no se despega. */
[data-theme="clasico"] .ini-rubro {
  background: var(--card-bg); border: 1px solid var(--border-green);
  box-shadow: 0 4px 16px rgba(18, 53, 36, 0.05);
}
/* En claro la tarjeta es blanca, así que va la variante oscurecida: el color
   crudo daba 2,1:1 en Gastronomía y 2,3:1 en Servicios, ilegibles. */
[data-theme="clasico"] .ini-rubro-nom { color: var(--rubro-claro, var(--text-primary)); }

/* Las métricas de la portada (variante «Acento»): sin borde, la tarjeta necesita
   separarse del fondo de otra forma. En Futurista la separa el verde tenue que ya
   trae; en Clásico va blanca con una sombra baja, igual que las filas de «Más». */
[data-theme="clasico"] .ini-top .benef-stat {
  background: var(--card-bg); border: 1px solid var(--border-green);
  box-shadow: 0 3px 14px rgba(18, 53, 36, .04);
}

/* La nota de ubicación del mapa: sus colores son claros sobre oscuro, así que en
   tema Clásico necesita su contraparte o queda texto casi blanco sobre blanco.
   Es la regla del proyecto: toda regla nueva del tema oscuro necesita la de acá. */
[data-theme="clasico"] .map-nota-pc {
  background: rgba(0, 114, 66, .07);
  border-color: rgba(0, 114, 66, .20);
  color: #4a5c53;
}
[data-theme="clasico"] .map-nota-pc b { color: #123524; }
[data-theme="clasico"] .ini-rubro-n { color: var(--text-muted); }
[data-theme="clasico"] .ini-pie { color: var(--text-muted); }
[data-theme="clasico"] .mas-tit { color: var(--text-primary); }
[data-theme="clasico"] .app-volver {
  background: rgba(0, 114, 66, 0.10); border-color: rgba(0, 114, 66, 0.22);
  color: var(--green-bright);
}
/* El panel movido a la vista «Más»: sus filas son `#0a1d12` a mano, así que
   en Clásico quedaban tarjetas negras sobre fondo blanco. */
[data-theme="clasico"] #masContenido .interno-menu-logout {
  background: #ffffff; color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(18, 53, 36, 0.07);
}
/* Y la tarjeta de la cuenta, por lo mismo: se le puso el mismo `#0a1d12` a mano,
   así que sin esta regla queda una caja negra con el correo ilegible encima.
   Es la regla del proyecto y vuelve a aparecer cada vez: toda regla nueva del
   tema oscuro necesita su contraparte acá. */
[data-theme="clasico"] #masContenido .interno-menu-info {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(18, 53, 36, 0.07);
}
[data-theme="clasico"] #masContenido .interno-menu-user { color: var(--text-muted); }
/* El botón del QR: el aro de 4px que lo separa de la barra es del color de la
   barra, así que en Clásico tiene que ser blanco o queda un anillo negro. */
[data-theme="clasico"] .app-qr { color: var(--text-muted); }
[data-theme="clasico"] .app-qr.active { color: var(--green-bright); }
[data-theme="clasico"] .app-qr-ic { border-color: #ffffff; color: #ffffff;
  background: linear-gradient(160deg, #007242, #005934); }
[data-theme="clasico"] .app-qr-anillo { border-color: #007242; }

/* ============================================================
   TEMA CLÁSICO · Pinamar 2050 + Plan (capa pinamar2050.css)
   Acento cyan #22d3ee remapeado a verde institucional.
   ============================================================ */
html[data-theme="clasico"] { --cyan: #007242; --cyan-soft: rgba(0, 114, 66, 0.10); }
[data-theme="clasico"] body.p50 { background: #ffffff; }
/* Grilla en perspectiva + halo del hero: futuristas → ocultos en Clásico (como el canvas) */
[data-theme="clasico"] .p50-fx-canvas { display: none !important; }
[data-theme="clasico"] .p50-grid3d,
[data-theme="clasico"] .p50-hero::before,
[data-theme="clasico"] .p50-hero::after { display: none; }
/* Título degradado en verde institucional. Re-declarar el clip: el shorthand 'background' lo resetea. */
[data-theme="clasico"] .p50-title {
  background: linear-gradient(100deg, #00623a 0%, #007242 45%, #00a05c 70%, #00623a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Textos blancos → gris legible */
[data-theme="clasico"] .p50-h2,
[data-theme="clasico"] .p50-card h3,
[data-theme="clasico"] .p50-fase h3,
[data-theme="clasico"] .p50-plan h3,
[data-theme="clasico"] .p50-doc-name,
[data-theme="clasico"] .p50-cta h2,
[data-theme="clasico"] .plan-block h3,
[data-theme="clasico"] .plan-pdf-cta .info strong { color: var(--text-primary); }
/* Textos claros → muted */
[data-theme="clasico"] .p50-tagline,
[data-theme="clasico"] .p50-lead,
[data-theme="clasico"] .p50-card p,
[data-theme="clasico"] .p50-fase p,
[data-theme="clasico"] .p50-plan p,
[data-theme="clasico"] .p50-hist-txt,
[data-theme="clasico"] .plan-block p { color: var(--text-muted); }
/* Films blancos → tarjeta verde claro */
[data-theme="clasico"] .p50-card,
[data-theme="clasico"] .p50-plan,
[data-theme="clasico"] .p50-doc { background: var(--green-dark); border-color: var(--border-green); }
[data-theme="clasico"] .p50-stat { background: var(--green-dark); border: 1px solid var(--border-green); }
[data-theme="clasico"] .p50-card:hover,
[data-theme="clasico"] .p50-plan:hover,
[data-theme="clasico"] .p50-doc:hover { box-shadow: 0 14px 40px rgba(18, 53, 36, 0.12); }
/* CTAs con tinte cyan literal → verde institucional */
[data-theme="clasico"] .p50-cta,
[data-theme="clasico"] .plan-pdf-cta {
  background: linear-gradient(135deg, rgba(0, 114, 66, 0.06), #ffffff);
  border-color: var(--border-green);
}
/* Timeline / historia: puntos y líneas (cyan literal) → verde */
[data-theme="clasico"] .p50-fase::before { background: #ffffff; }
[data-theme="clasico"] .p50-hist-item::before { background: rgba(0, 114, 66, 0.25); }
[data-theme="clasico"] .p50-hist-item.future::after { background: var(--green-bright); box-shadow: 0 0 12px rgba(0, 114, 66, 0.5); }
[data-theme="clasico"] .p50-hist-item.future .p50-hist-year { color: var(--text-primary); }