/* ============================================================
   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,
[data-theme="clasico"] .interno-menu-logout { color: rgba(51, 51, 51, 0.78); }

[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,
[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); }

/* ============================================================
   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); }