/* Estudios de Opinión · Sistema de diseño minimalista
   © 2026 — Inspirado en HIG Apple. Sobriedad, tipografía limpia, una sola tonalidad.
*/

:root {
  --bg:           #fafafa;
  --bg-elevated:  #ffffff;
  --bg-subtle:    #f5f5f7;
  --bg-hover:     #ebebed;

  --border:        rgba(0,0,0,0.06);
  --border-strong: rgba(0,0,0,0.12);
  --divider:       rgba(0,0,0,0.05);

  --text:    #1d1d1f;
  --text-2:  #6e6e73;
  --text-3:  #a1a1a6;

  --accent:        #0071e3;
  --accent-hover:  #0058ad;
  --accent-soft:   rgba(0,113,227,0.08);

  --success: #1d8649;
  --warning: #b25e00;
  --danger:  #c53030;

  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.04);
  --shadow:     0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.08);
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  letter-spacing: -0.011em;
}

h1,h2,h3,h4,h5 {
  letter-spacing: -0.022em;
  font-weight: 600;
}

h1 { font-weight: 700; letter-spacing: -0.03em; }

/* Cards limpios, casi sin sombra */
:where(.card) {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
body .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }

.card-lg { border-radius: var(--radius-lg); }
.surface-2 { background: var(--bg-subtle); }

/* Botón primario en negro sutil — usa selector con :where() para que NO compita con utilities Tailwind  */
:where(.gradient),
:where(.btn-primary) {
  background: var(--text);
  color: white;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  box-shadow: none;
}
:where(.gradient):hover,
:where(.btn-primary):hover { background: #000; opacity: 0.95; }
:where(.gradient):active,
:where(.btn-primary):active { transform: scale(0.98); }

/* Pero queremos que el border-radius del diseño gane → reaplicamos con mayor especificidad */
body .gradient, body .btn-primary { border-radius: var(--radius-pill); background: var(--text); color: white; }

/* Botón secundario / ghost */
.btn-ghost {
  background: var(--bg-subtle);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-weight: 500;
  border: 1px solid var(--border);
  transition: background .15s ease;
}
.btn-ghost:hover { background: var(--bg-hover); }

/* Botón de acento usado con moderación */
.btn-accent {
  background: var(--accent);
  color: white;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: background .15s ease;
}
.btn-accent:hover { background: var(--accent-hover); }

/* Frosted glass (estilo nav iOS) */
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Brand mark sustituye al cuadrado gradiente */
.brand-mark {
  background: var(--text);
  color: white;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Inputs sobrios */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
textarea, select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--text-2);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

/* Pills / chips minimalistas */
.chip {
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-2);
  font-weight: 500;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--border);
}
.chip-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip-success { background: rgba(29,134,73,0.08); color: var(--success); border-color: transparent; }
.chip-warning { background: rgba(178,94,0,0.08); color: var(--warning); border-color: transparent; }
.chip-danger { background: rgba(197,48,48,0.08); color: var(--danger); border-color: transparent; }

/* Scroll suave */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Mapas embebidos */
.leaflet-container { z-index: 1; border-radius: var(--radius-sm); font-family: inherit; }

/* Animaciones discretas */
@media (prefers-reduced-motion: no-preference) {
  .card, .btn-primary, .btn-ghost, .btn-accent { transition: all .15s ease; }
}

/* Modo enfoque para botones */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}