/* ════════════════════════════════════════════════════════════════════════
   sip.css — el sistema visual de la app SIP, para la web publica.

   TODO lo de aqui sale de la app, no de un zip de marca ni de mi cabeza.
   Fuente de cada bloque, anotada. Si un valor no existe en la app, no esta.

     paleta      lib/constants/app_colors.dart
     tipografia  lib/constants/app_fonts.dart
     radios      lib/constants/app_styling.dart, filters/property_filters_screen.dart,
                 view/widget/glass.dart, view/widget/home_quick_nav.dart
     sombras     view/widget/glass.dart, view/widget/home_quick_nav.dart
     tarjetas    view/widget/glass.dart  (glassDecoration)
     pildoras    view/widget/home_quick_nav.dart  (HomeNavChip)
     espaciado   lib/constants/app_sizes.dart

   Se carga DESPUES del <style> de cada pagina, asi que redefine los mismos
   tokens que ya usaban las 4 paginas (--bg, --gold, --text…) y con eso el
   grueso se repinta solo. Los pocos colores que estaban escritos a mano en el
   HTML se han pasado a var() en las paginas.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PALETA · app_colors.dart ─────────────────────────────────────────── */
  /* acento de marca = kTertiaryColor / kAccentColor / kInfoColor */
  --accent:        #009DD2;
  --accent-rgb:    0,157,210;
  /* cian brillante = priceProminent (dark) — el numero que la app quiere que mires */
  --accent-2:      #38BDF8;
  --accent-2-rgb:  56,189,248;
  /* azul profundo = kSecondaryColor / kDarkBlueColor */
  --accent-deep:   #11478D;
  --accent-dark:   #13549D;
  /* azul de detalle/mensajes = detailAccent / msgAccent (dark) */
  --accent-blue:   #3b82f6;
  /* azul palido = kLightBlueColor */
  --accent-pale:   #E8F3FF;

  /* superficies = kDarkBg / kDarkSurface / kDarkBorder + relleno denso de glass */
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface2:  #172033;
  --surface3:  #334155;
  --card:      #1e293b;
  --card-h:    #334155;
  --input-bg:  #1e293b;
  --nav-bg:    rgba(15,23,42,.92);

  /* bordes: el rim de cristal de la app (blanco .22) y su divider (blanco .15) */
  --border:   rgba(255,255,255,.22);
  --border2:  rgba(255,255,255,.15);
  --border-solid: #334155;

  /* texto = detailTextPrimary/Secondary (dark), mutedText (dark), detailTextMuted */
  --text:       #f1f5f9;
  --text2:      #cbd5e1;
  --muted:      #98969A;
  --text-faint: #64748b;

  /* semanticos = calmSuccess/calmWarning/calmDanger (dark), kPurpleColor,
     kStrPinkColor, kManagerBadgeColor, kOwnerBadgeColor */
  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #F87171;
  --purple:  #AC7CEB;
  --indigo:  #6366F1;
  --pink:    #E91E63;
  --teal:    #00897B;

  /* los nombres viejos siguen vivos para no tocar 900 reglas: ahora son cian */
  --gold:   var(--accent);
  --gold-l: var(--accent-2);
  --blue:   var(--accent-deep);
  --blue-b: var(--accent-blue);
  --green:  var(--success);
  --orange: var(--warning);
  --red:    var(--danger);
  --yellow: var(--warning);

  /* ── TIPOGRAFIA · app_fonts.dart ──────────────────────────────────────── */
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  /* la app no tiene cara monoespaciada; se conserva la que ya usaba la web
     para las cifras. Es lo unico de aqui que NO sale de la app. */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── RADIOS · app_styling.dart + glass.dart + filtros ─────────────────── */
  --r-chip:  20px;  /* HomeNavChip: BorderRadius.circular(20) */
  --r-card:  20px;  /* glassDecoration: Radius.circular(20) */
  --r-btn:   12px;  /* property_filters_screen: BorderRadius.circular(12) */
  --r-input: 12px;
  --r-sm:    10px;  /* AppStyling.myDecoration: radius = 10 */
  --r-sheet: 30px;  /* AppStyling.bottomSheetStyle: top Radius.circular(30) */

  /* ── SOMBRAS · glass.dart + home_quick_nav.dart ───────────────────────── */
  /* en oscuro la app NO pone sombra a las tarjetas: se separan por el relleno
     translucido + el rim. Una sombra negra sobre navy se ve como un borron. */
  --shadow-card: none;
  --shadow-chip: 0 2px 8px rgba(54,54,54,.22);   /* kBlackColor .22, blur 8, y+2 */
  --shadow-soft: 0 0 5px rgba(0,0,0,.1);         /* myShadowDecoration */
  --shadow: none;

  /* ── DEGRADADOS · glass.dart ──────────────────────────────────────────── */
  /* relleno de tarjeta: VERTICAL, nunca diagonal, y con un salto minimo */
  --grad-card:  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  --grad-dense: linear-gradient(180deg, rgba(30,41,59,.95), rgba(23,32,51,.95));
  --grad-accent: linear-gradient(135deg, var(--accent-2), var(--accent));

  /* ── ESPACIADO · app_sizes.dart (AppSizes.DEFAULT) ────────────────────── */
  --pad-x: 20px;
  --pad-y: 16px;
}

/* ── TEMA CLARO ─────────────────────────────────────────────────────────
   La app tambien tiene claro, y sus valores estan en el mismo fichero:
   scaffoldBg/cardBg/kDetailSurface/kDetailBorder para las superficies, y el
   ramp de texto ya corregido para WCAG-AA (#1A1A1A/#555555/#6B6B6B/#4B5563).
   El cian de marca falla AA sobre fondo claro (2.8:1), asi que en claro la app
   usa un cian mas profundo — accentText light = #0369A1. Se respeta. */
[data-theme="light"] {
  --accent:     #0369A1;   /* accentText (light) */
  --accent-rgb: 3,105,161;
  --accent-2:   #0369A1;   /* priceProminent (light) */
  --accent-blue:#2563eb;   /* detailAccent (light) */

  --bg:       #FFFFFF;     /* scaffoldBg (light) */
  --surface:  #F5F6F8;     /* kDetailSurface */
  --surface2: #F0F0F0;     /* cardBg (light) */
  --surface3: #E5E7EB;
  --card:     #F0F0F0;
  --card-h:   #E5E7EB;
  --input-bg: #F5F5F5;     /* inputFill (light) */
  --nav-bg:   rgba(255,255,255,.94);

  --border:       #E5E7EB; /* kDetailBorder */
  --border2:      rgba(54,54,54,.10);  /* divider (light) = kBlackColor .1 */
  --border-solid: #E5E7EB;

  --text:       #1A1A1A;   /* textPrimary (light) */
  --text2:      #555555;   /* textSecondary (light) */
  --muted:      #4B5563;   /* mutedText (light) */
  --text-faint: #6B6B6B;   /* textMuted / inputHint (light) */

  --success: #047857;      /* calmSuccess (light) */
  --warning: #B45309;
  --danger:  #B91C1C;

  /* en claro la app SI pone sombra: las tarjetas flotan sobre el fondo palido */
  --shadow-card: 0 10px 24px rgba(26,74,94,.16), 0 3px 8px rgba(0,0,0,.10);
  --shadow: var(--shadow-card);
  --grad-card:  linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.90));
  --grad-dense: linear-gradient(180deg, #FFFFFF, #F5F6F8);
}
[data-theme="light"] .btn-dl,
[data-theme="light"] .plan-btn.pb-solid,
[data-theme="light"] .forum-btn-create,
[data-theme="light"] .btn-register,
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .sec-tag,
[data-theme="light"] .hero-tag,
[data-theme="light"] .mu-pill,
[data-theme="light"] .forum-cat-link { background: rgba(255,255,255,.82); color: var(--text); }

/* ── TIPOGRAFIA APLICADA ────────────────────────────────────────────────── */
body { font-family: var(--font-body); background: var(--bg); color: var(--text); }
h1, h2, h3, h4,
.hero-title, .sec-title, .cta-title, .plan-name, .footer-logo, .nav-logo,
.modal-title, .forum-post-title, .forum-replies-h {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
/* Playfair iba en cursiva para los <em> de los titulares; Space Grotesk no
   tiene italica de verdad, asi que el enfasis pasa a ser el cian de la app. */
h1 em, h2 em, h3 em,
.hero-title em, .sec-title em, .cta-title em,
.subpage-hero h1 em, .hero h1 em {
  font-style: normal;
  color: var(--accent-2);
}

/* ── TARJETAS · glassDecoration ─────────────────────────────────────────── */
.role-card, .plan, .guide-card, .zone-card, .mu-card, .test-card,
.eco-card, .step, .forum-post, .forum-sidebar, .c-card, .calc-card,
.kpi, .card, .modal, .forum-cat-box, .zone-item {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.plan.featured, .mu-card.featured {
  border-color: rgba(var(--accent-rgb), .55);
}
.role-card:hover, .guide-card:hover, .zone-card:hover, .mu-card:hover,
.forum-post:hover, .eco-card:hover {
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--grad-dense);
}

/* ── PILDORAS / CHIPS · HomeNavChip ─────────────────────────────────────── */
/* radio 20, relleno de superficie al 72%, rim teñido de acento, 11px/700,
   y al seleccionar, relleno de acento al 42%. */
.sec-tag, .hero-tag, .mu-pill, .mu-cat, .forum-cat-link, .plan-badge,
.forum-mobile-cats > *, .chip, .pill, .zone-cta, .guide-cta, .mu-trend {
  border-radius: var(--r-chip);
  box-shadow: var(--shadow-chip);
}
.sec-tag, .hero-tag, .mu-pill, .forum-cat-link {
  background: rgba(30,41,59,.72);
  border: 1px solid rgba(var(--accent-rgb), .38);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
}
.mu-pill.on, .forum-cat-link.active, .mu-pill:hover, .forum-cat-link:hover {
  background: rgba(var(--accent-rgb), .42);
  border-color: rgba(var(--accent-rgb), .75);
  color: #fff;
}

/* ── BOTONES E INPUTS ───────────────────────────────────────────────────── */
.btn-dl, .plan-btn, .btn-register, .btn-login, .forum-btn-create,
.btn, .chat-send, .store-btn, button.btn-ghost {
  border-radius: var(--r-btn);
  font-family: var(--font-body);
}
.btn-dl, .plan-btn.pb-solid, .forum-btn-create, .btn-register, .btn-primary {
  background: var(--grad-accent);
  color: #04121c;
  border: none;
  font-weight: 700;
}
.plan-btn.pb-out, .btn-ghost, .btn-login {
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), .55);
  color: var(--accent-2);
}
.form-input, .chat-input, .forum-search-box, input, select, textarea {
  border-radius: var(--r-input);
  background: var(--input-bg);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-body);
}
.form-input::placeholder, .chat-input::placeholder, input::placeholder {
  color: var(--text-faint);
}

/* ── NAV Y PIE ──────────────────────────────────────────────────────────── */
nav, #nav, .site-nav { background: var(--nav-bg); border-bottom: 1px solid var(--border2); }
.nav-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.nav-logo img, .footer-logo img { display: block; }
.nav-logo span, .footer-logo span { color: var(--accent-2); }
footer { background: var(--surface2); border-top: 1px solid var(--border2); }

/* ── DETALLES QUE ERAN DE ORO ───────────────────────────────────────────── */
a { color: inherit; }
.fs-ic:hover, .footer-col li a:hover, .nav-links a:hover { color: var(--accent-2); }
.feat-icon.check { color: var(--success); }
.feat-icon.cross { color: var(--text-faint); }
.hs-num span, .zc-price { color: var(--accent-2); }
.plan-price { color: var(--text); }
.plan-price sup, .plan-price sub { color: var(--muted); }

/* ── EL TELEFONO PRIMERO ────────────────────────────────────────────────── */
/* nada puede empujar la pagina a lo ancho en un movil de 360 px */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, table { max-width: 100%; overflow-x: auto; }

@media (max-width: 420px) {
  :root { --pad-x: 14px; }
  .container { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  /* los titulares de la portada eran de 44-52px: a 360 px se salian */
  .hero-title { font-size: clamp(26px, 8.2vw, 38px); line-height: 1.12; }
  .sec-title, .cta-title { font-size: clamp(21px, 6.2vw, 28px); line-height: 1.18; }
  h1 { font-size: clamp(24px, 7.4vw, 34px); }
  /* rejillas de tarjetas: una columna, sin minimos que desborden */
  .plans, .test-grid, .footer-top { grid-template-columns: 1fr !important; }
  [style*="repeat(auto-fit"] { grid-template-columns: 1fr !important; }
  /* filas de pildoras: que se deslicen en vez de romper la pagina */
  .mu-filters, .forum-mobile-cats, .store-btns, .social-row, .hero-stats {
    flex-wrap: wrap;
  }
  /* cifras largas (precios, m2) no pueden ensanchar su celda */
  .hs-num, .zc-price, .plan-price, .mu-trend { word-break: break-word; }
  .zone-item, .zc-stat { min-width: 0; }
}

/* palabras largas del espanol ("Financiamiento", "Recomendaciones") en cajas
   estrechas: que partan en vez de estirar la caja */
h1, h2, h3, .rc-title, .plan-name, .zone-item-name, .mu-card h3, .guide-card h3 {
  overflow-wrap: anywhere;
}