/* Santa Fe Te Expone · Identidad visual aprobada 14/10/2026
   Propuesta 1: azul petróleo, turquesa y dorado (oscuro y claro).
   Hoja aislada y reversible: SOLO presentación. No altera DOM, JS, bases,
   mapas, coordenadas, filtros, carruseles ni colores semánticos de riesgo.
   Siempre cargar DESPUÉS de todas las otras hojas del proyecto. */

/* 1. Variables del sistema existente. El switch #themeToggle y su estado
   body[data-theme] siguen siendo controlados por assets/js/theme.js. */
body.v21-quality[data-theme="dark"],
body.v21-quality:not([data-theme]){
  --page:#061b29;--panel:#092535;--panel-soft:#102f40;
  --ink:#eaf6f9;--sub:#b2cbd2;--heading:#f7fbff;
  --accent:#16c4d4;--edge:#326171;--gold:#e5b94e;
  --hero-wash:#061b2959;--bg:var(--page);--surface:var(--panel);
  --muted:var(--sub);--line:var(--edge);
  --v20-page:var(--page);--v20-panel:var(--panel);
  --v20-ink:var(--ink);--v20-sub:var(--sub);
  --v21-purple:#16c4d4;--v21-pink:#e5b94e;
  --v21-panel:var(--panel);--v21-card:var(--panel);
  --v21-line:var(--edge);--v21-muted:var(--sub);
  --v21-focus:#ffe29a;--v21-nav:var(--panel);
  --v21-heading:linear-gradient(99deg,#f8fcff 3%,#e6f9fb 61%,#a2e7ec 100%);
  --sfte-title-dark:linear-gradient(105deg,#f8fcff 0%,#e3f9fc 53%,#8adddf 100%);
  --sfte-title-light:linear-gradient(105deg,#0e293d 0%,#126581 75%,#13899f 100%);
  --sfte-v221-ink:var(--ink);--sfte-v221-muted:var(--sub);
  --sfte-v221-line:var(--edge);--sfte-v221-accent:var(--accent);
  --sfte-v221-surface:var(--panel);
  background:var(--page)!important;color:var(--ink)!important;
}
body.v21-quality[data-theme="light"]{
  --page:#f8fbfd;--panel:#ffffff;--panel-soft:#eaf5fa;
  --ink:#10283f;--sub:#4c697b;--heading:#0e263d;
  --accent:#008eb0;--edge:#b9d7e4;--gold:#b47b16;
  --hero-wash:#eaf8fb82;--bg:var(--page);--surface:var(--panel);
  --muted:var(--sub);--line:var(--edge);
  --v20-page:var(--page);--v20-panel:var(--panel);
  --v20-ink:var(--ink);--v20-sub:var(--sub);
  --v21-purple:#008eb0;--v21-pink:#b47b16;
  --v21-panel:var(--panel);--v21-card:var(--panel);
  --v21-line:var(--edge);--v21-muted:var(--sub);
  --v21-focus:#b47b16;--v21-nav:var(--panel);
  --v21-heading:linear-gradient(100deg,#09283e 3%,#10556b 74%,#008eb0 100%);
  --sfte-title-dark:linear-gradient(105deg,#0e293d 0%,#126581 70%,#008eb0 100%);
  --sfte-title-light:linear-gradient(105deg,#0e293d 0%,#126581 70%,#008eb0 100%);
  --sfte-v221-ink:var(--ink);--sfte-v221-muted:var(--sub);
  --sfte-v221-line:var(--edge);--sfte-v221-accent:var(--accent);
  --sfte-v221-surface:var(--panel);
  background:var(--page)!important;color:var(--ink)!important;
}

/* 2. Cabecera, marca, interruptor y ticker. No se cambian sus tamaños. */
body.v21-quality .nav{background:var(--panel)!important;border-color:var(--edge)!important}
body.v21-quality .environment-banner{background:var(--page)!important;color:var(--sub)!important}
body.v21-quality .brand-mark{
  background:linear-gradient(140deg,#12bfd0,#006a87)!important;
  color:#fff!important;box-shadow:0 0 14px #078ca733!important;
}
body.v21-quality .brand-name strong{color:var(--accent)!important}
body.v21-quality .brand-name small{color:var(--gold)!important}
body.v21-quality .nav-links a:hover,
body.v21-quality .nav-links a:focus-visible{color:var(--accent)!important}
body.v21-quality :is(.territory-nav-trigger,.nav-btn,.theme-toggle){
  background:var(--panel-soft)!important;border-color:var(--edge)!important;
  color:var(--ink)!important;
}
body.v21-quality .nav-in #themeToggle{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 2px #0ac5cf1a,0 2px 12px #0a718029!important;
}
body.v21-quality[data-theme="dark"] #themeToggle .theme-moon{
  background:#0089a4!important;color:#fff!important;box-shadow:0 0 12px #00b8c955!important;
}
body.v21-quality[data-theme="light"] #themeToggle .theme-sun{
  background:#f4bd46!important;color:#172c3c!important;box-shadow:0 0 12px #e4b0423b!important;
}
body.v21-quality .v18-top-ticker,
body.v21-quality .city-news-bar{background:var(--panel-soft)!important;border-color:var(--edge)!important;color:var(--ink)!important}
body.v21-quality .city-news-bar strong{color:var(--accent)!important}
body.v21-quality .pulse-indicator{background:var(--gold)!important;box-shadow:0 0 0 4px #e5b94e22!important}
body.v21-quality .ticker-controls button{border-color:var(--edge)!important;color:var(--accent)!important;background:var(--panel)!important}

/* 3. Portada fotográfica: misma fotografía, encuadre y dimensiones. */
body.v21-quality[data-theme="dark"] .hero{
  background:linear-gradient(90deg,#061b29cf 0%,#061b2973 48%,#061b292e 100%),url('../images/portada-puente-santa-fe-hd.webp') center 52%/cover no-repeat!important;
}
body.v21-quality[data-theme="light"] .hero{
  background:linear-gradient(90deg,#f5fbffe6 0%,#f5fbff8a 48%,#f5fbff17 100%),url('../images/portada-puente-santa-fe-hd.webp') center 52%/cover no-repeat!important;
}
body.v21-quality[data-theme] .hero h1{
  background:none!important;color:var(--heading)!important;
  -webkit-text-fill-color:var(--heading)!important;text-shadow:0 1px 6px #061b2928!important;filter:none!important;
}
body.v21-quality[data-theme] .hero h1 span{
  background:none!important;color:var(--accent)!important;
  -webkit-text-fill-color:var(--accent)!important;filter:none!important;
}
body.v21-quality .hero p{color:var(--heading)!important}
body.v21-quality .v18-nav-publish,
body.v21-quality .nav .v18-nav-publish{
  background:linear-gradient(135deg,#f9d875,#edb443)!important;
  color:#102338!important;border:1px solid #e7b346!important;
  box-shadow:0 3px 16px #e2b64d27!important;
}
body.v21-quality :is(.btn-primary,.hero .btn-ghost,#trackingHeroBtn),
body.v21-quality #modal .sfte-submit-footer #submitReport,
body.v21-quality .hydric-save{
  background:linear-gradient(120deg,#0094ac,#006f89)!important;
  border:1px solid #24c5d2!important;color:#fff!important;
  box-shadow:0 3px 16px #0086a42c!important;
}
body.v21-quality .v18-nav-publish:hover,
body.v21-quality :is(.btn-primary,.hero .btn-ghost,#trackingHeroBtn):hover{filter:brightness(1.06)}
body.v21-quality .editorial-eyebrow{color:var(--gold)!important}

/* 4. Noticias, reclamos, publicidad y enlaces: sin alterar su estructura. */
body.v21-quality .city-lead-button,
body.v21-quality .city-lead-body,
body.v21-quality #destacados .featured-block,
body.v21-quality :is(.report-slide,.news-slide,.panel,.card,.news){
  border-color:var(--edge)!important;
}
body.v21-quality .city-lead-button,
body.v21-quality .city-lead-body{background:var(--panel)!important}
body.v21-quality .city-lead-body h3,
body.v21-quality[data-theme] main .section-head h2,
body.v21-quality[data-theme] #destacados .featured-block-head h2{
  background:none!important;color:var(--heading)!important;
  -webkit-text-fill-color:var(--heading)!important;
}
body.v21-quality .city-lead-body .city-open,
body.v21-quality .city-lead-body .city-headline-category{color:var(--accent)!important}
body.v21-quality .city-lead-tags .city-headline-category{
  background:#005d76!important;color:#e9fbff!important;border-color:#15b9ca!important;
}
body.v21-quality .city-first-label{background:#075b73!important;border-color:#16c4d4!important;color:#fff!important}
body.v21-quality .city-lead-location>span,
body.v21-quality #destacados #featuredReportsTrack .report-slide .feature-pill:before{color:var(--gold)!important}
body.v21-quality #destacados .v21-see-all,
body.v21-quality :is(.sfte-v221-links a,.sfte-v221-river a,footer a){color:var(--accent)!important}
body.v21-quality .sponsor-aside,
body.v21-quality #sfteV222AdBand{border-color:var(--edge)!important;color:var(--ink)!important}
body.v21-quality .sponsor-aside .ad-slot{border-color:var(--edge)!important}
body.v21-quality #publicidad.v18-ad-zone .v18-ad-placeholder{border-color:var(--edge)!important;background:var(--panel-soft)!important}
body.v21-quality #publicidad .v18-ad-placeholder>span,
body.v21-quality #publicidad .v18-ad-label{color:var(--accent)!important;border-color:var(--edge)!important}
body.v21-quality #sfteV222AdBand{
  background:var(--panel-soft)!important;border-color:var(--edge)!important;
}
body.v21-quality #sfteV222AdBand :is(strong,small){color:var(--ink)!important}
body.v21-quality #sfteV222AdBand .sfte-v222-admark{color:var(--gold)!important;border-color:var(--gold)!important}
body.v21-quality[data-theme="dark"] .sponsor-aside .ad-slot{
  background-image:linear-gradient(180deg,#05192300 0%,#05192324 38%,#051923a8 65%,#051923ee 100%),url('../images/demo-clean/alumbrado.webp')!important;
}
body.v21-quality[data-theme="dark"] .sponsor-right .ad-slot{
  background-image:linear-gradient(180deg,#05192300 0%,#05192324 38%,#051923a8 65%,#051923ee 100%),url('../images/portada-puente-santa-fe-hd.webp')!important;
}
body.v21-quality[data-theme="light"] .sponsor-aside .ad-slot{
  background-image:linear-gradient(180deg,#0b344000 0%,#0b34401c 42%,#0b3440c7 100%),url('../images/demo-clean/alumbrado.webp')!important;
}
body.v21-quality[data-theme="light"] .sponsor-right .ad-slot{
  background-image:linear-gradient(180deg,#0b344000 0%,#0b34401c 42%,#0b3440c7 100%),url('../images/portada-puente-santa-fe-hd.webp')!important;
}

/* 5. Modal, edición, mapa, barrios y ríos. Colores, no funcionalidad. */
body.v21-quality #modal .sheet,
body.v21-quality :is(.territory-menu,.territory-area-card,.territory-choice,.atlas-center,.atlas-filters,.atlas-result,.atlas-river-metric){
  border-color:var(--edge)!important;
}
body.v21-quality[data-theme="light"] #modal .sheet{
  background:var(--panel)!important;color:var(--ink)!important;
}
body.v21-quality #modal .sheet :is(input:not([type="radio"]),textarea,select){
  background:var(--panel-soft)!important;color:var(--ink)!important;border-color:var(--edge)!important;
}
body.v21-quality[data-theme="light"] #modal .sheet .v18-category-buttons button[aria-pressed="true"]{
  background:#008ba6!important;border-color:#008ba6!important;color:#fff!important;
}
body.v21-quality #mapa{
  --map-title:var(--heading);
  --map-gradient:linear-gradient(100deg,var(--heading) 0%,var(--accent) 75%,var(--gold) 100%);
}
body.v21-quality[data-theme="light"] #mapa{
  --map-title:var(--heading);
  --map-gradient:linear-gradient(100deg,#102a43 0%,#008eb0 72%,#b47b16 100%);
}
body.v21-quality #leafletMap .map-zone-cluster{
  border-color:#d4f6f7!important;
  background:linear-gradient(135deg,#13c3d1,#006f91)!important;
  box-shadow:0 0 0 6px #16c4d428,0 4px 14px #062b4055!important;
}
body.v21-quality #leafletMap .map-zone-panel,
body.v21-quality #leafletMap .map-official-risk{
  background:var(--panel)!important;color:var(--ink)!important;border-color:var(--edge)!important;
}
body.v21-quality #leafletMap .map-zone-heading strong,
body.v21-quality #leafletMap .map-official-risk summary{color:var(--accent)!important}
body.v21-quality #leafletMap :is(.map-zone-heading small,.map-zone-copy small,.map-zone-foot,.risk-context){
  color:var(--sub)!important;
}
body.v21-quality #leafletMap .map-zone-label{
  background:var(--panel)!important;color:var(--ink)!important;border-color:var(--edge)!important;
}
body.v21-quality #leafletMap .map-zone-thumb{background:var(--panel-soft)!important;color:var(--accent)!important}
body.v21-quality #leafletMap .map-zone-row:hover{background:#16c4d420!important}
body.v21-quality #leafletMap .map-official-risk a{border-color:var(--edge)!important;color:var(--accent)!important}

/* El panel hídrico mantiene intactas sus mediciones y colores de alerta. */
body.v21-quality .hydric-panel{
  --hydric-text:var(--ink);--hydric-muted:var(--sub);
  --hydric-line:var(--edge);--hydric-card:var(--panel-soft);
}
body.v21-quality #modal:has(.hydric-panel) .sheet{background:var(--panel)!important;border-color:var(--edge)!important}
body.v21-quality .hydric-heading h3{
  background:linear-gradient(108deg,var(--heading),var(--accent))!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
body.v21-quality .hydric-panel h4{color:var(--accent)!important}
body.v21-quality .hydric-official-card,
body.v21-quality .hydric-measure,
body.v21-quality .hydric-data-status{background:var(--panel-soft)!important;border-color:var(--edge)!important;color:var(--ink)!important}
body.v21-quality .hydric-panel :is(#hydricStation,textarea,input,.hydric-toolbar button){
  background:var(--panel)!important;color:var(--ink)!important;border-color:var(--edge)!important;
}
body.v21-quality .hydric-panel .hydric-data-status.unavailable{
  background:#403017!important;color:#ffda92!important;border-color:#c69d4b!important;
}

/* 6. Mantener estado verde/amarillo/rojo como información funcional:
   no se pintan con el color del partido ni se alteran las señales de riesgo.
   Enlaces de redes sociales conservan los colores oficiales de su marca. */

/* Respeto a ajustes de accesibilidad y a la posibilidad de revertirlo. */
@media(prefers-reduced-motion:reduce){
 body.v21-quality :is(#themeToggle,.v18-nav-publish,.btn-primary){transition:none!important}
}

/* Corrección móvil aprobada · el título se lee horizontalmente en ambos temas.
   Controles y carrusel mantienen su orden; no se reduce el área del carrusel. */
@media(max-width:700px){
 body.v21-quality #destacados .featured-block-head{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  width:100%!important;min-width:0!important;gap:10px!important;
 }
 body.v21-quality #destacados .featured-block-head>div:first-child{width:100%!important;min-width:0!important;max-width:none!important}
 body.v21-quality #destacados #reportsHeading{
  display:block!important;width:100%!important;white-space:nowrap!important;
  font-size:clamp(18px,5.4vw,27px)!important;letter-spacing:-.04em!important;line-height:1.24!important;
 }
 body.v21-quality #destacados .carousel-tools{
  width:100%!important;min-width:0!important;justify-self:stretch!important;
  display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
 }
}


/* AJUSTE VISUAL MÓVIL · 14/10/2026
   Solo contraste en tema CLARO y tamaño editorial en la tarjeta de reclamo.
   No se tocan funciones, HTML, datos, colores de estado, mapas ni carruseles. */

/* 01. Menú real: #mobileMenuBtn y #navLinks, no selectores de otro sitio. */
@media (max-width:770px) {
 body.v21-quality[data-theme="light"] .nav #mobileMenuBtn.mobile-menu-btn {
   color:#123448!important;
   -webkit-text-fill-color:#123448!important;
   background:#e6f4f8!important;
   border:1px solid #a7cedb!important;
   box-shadow:0 0 0 1px #badce66b!important;
   opacity:1!important;
 }
 body.v21-quality[data-theme="light"] .nav #mobileMenuBtn.mobile-menu-btn[aria-expanded="true"] {
   background:#ccecf2!important;
   border-color:#008eac!important;
 }
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open {
   background:#ffffff!important;
   border:1px solid #a8d0db!important;
   box-shadow:0 18px 38px #0b30432d!important;
   color:#132f43!important;
 }
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open a,
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open .territory-nav-trigger {
   color:#12364a!important;
   -webkit-text-fill-color:#12364a!important;
   opacity:1!important;
 }
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open .territory-nav-trigger {
   background:#eaf5f9!important;
   border:1px solid #b7d6e1!important;
   border-radius:9px!important;
   padding:10px 12px!important;
 }
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open a:hover,
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open a:focus-visible,
 body.v21-quality[data-theme="light"] .nav #navLinks.nav-links.open .territory-nav-trigger:hover {
   color:#006e87!important;
   -webkit-text-fill-color:#006e87!important;
 }
}

/* 02. Titular de reclamo con foto: un poco menor, misma tipografía, dos líneas.
   El tamaño de la tarjeta, las imágenes y los botones quedan intactos. */
@media (max-width:700px) {
 body.v21-quality[data-theme="light"] #destacados #featuredReportsTrack .report-slide > h3 {
   font-size:clamp(17px,4.8vw,19px)!important;
   line-height:1.18!important;
   letter-spacing:-.022em!important;
   max-height:2.55em!important;
   -webkit-line-clamp:2!important;
   word-break:normal!important;
   overflow-wrap:break-word!important;
 }
}

/* 03. Hilo de comentarios: en tema claro conserva su recuadro oscuro editorial
   pero con tipografía CLARA de suficiente contraste, sin alterar acciones. */
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread.sfte-thread {
  background:#102a3b!important;
  color:#edf8fb!important;
  border:1px solid #376475!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-heading h3,
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-form h4 {
  color:#f5fbff!important;
  -webkit-text-fill-color:#f5fbff!important;
  background:none!important;
  text-shadow:none!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-heading h3 span {
  color:#eed087!important;
  -webkit-text-fill-color:#eed087!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-comment {
  color:#eaf5fb!important;
  background:#19394b!important;
  border-color:#42697b!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-comment-meta strong {
  color:#f5fbff!important;
  -webkit-text-fill-color:#f5fbff!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-comment-meta time {
  color:#bbd5df!important;
  -webkit-text-fill-color:#bbd5df!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-body > p,
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread :is(.sfte-thread-policy,.sfte-no-comments) {
  color:#d5e7ee!important;
  -webkit-text-fill-color:#d5e7ee!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-form {
  background:#1c3545!important;
  border-color:#42697b!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-form label {
  color:#e4f0f5!important;
  -webkit-text-fill-color:#e4f0f5!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-form :is(input,textarea) {
  color:#123247!important;
  -webkit-text-fill-color:#123247!important;
  background:#edf7fb!important;
  border:1px solid #afd2df!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-form :is(input,textarea)::placeholder {
  color:#526e7f!important;
  -webkit-text-fill-color:#526e7f!important;
  opacity:1!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-heading .btn-light {
  color:#12364b!important;
  background:#e7f5fa!important;
  border:1px solid #aad1df!important;
}
body.v21-quality[data-theme="light"] #modal .sheet #sfte-thread .sfte-thread-error {
  color:#ffd0d0!important;
  -webkit-text-fill-color:#ffd0d0!important;
}