/* analisis-convergencia.css
   =========================
   Estilos específicos de la herramienta "Análisis de Convergencia".
   Reutiliza las variables definidas en /css/index.css (--navy, --bg,
   --bg-soft, --border, --t1/--t2/--t3, --gold, --green, --blue, --max-w,
   --px) y componentes existentes (.res-card, .pr-card, .faq-item,
   .legal-hero, .btn-risk, .cta-bar) — no redefine nada de eso.

   Paleta por dominio (coherente con la marca, no un acento nuevo):
     - Telecomunicaciones -> var(--blue)
     - Energía             -> var(--green)
     - Inmobiliario/valor  -> var(--gold)
*/

/* Header de respaldo (solo si este archivo se abre sin pasar por el
   assembler que inyecta el partial real de navegación) */
.ac-fallback-header {
  background: var(--navy);
  padding: 14px var(--px);
}
.ac-fallback-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.ac-fallback-header-inner a {
  color: rgba(255, 255, 255, 0.85);
}
.ac-fallback-header-inner a:first-child {
  font-weight: 700;
  font-family: "Playfair Display", serif;
}
.ac-fallback-header-inner a:hover {
  color: #fff;
}

/* Layout principal: panel de parámetros + resultados */
.ac-tool {
  padding: 64px var(--px);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .ac-tool {
    grid-template-columns: 1fr;
  }
}

/* Ajustes míos */
body{
  background: var(--t0);
  color: var(--blanco);
}

.legal-hero {
  background: var(--navy);
  color: #fff;
  padding: 64px var(--px);
}

.pr-card {
  background: var(--navy);
  color: var(--blanco);
  font-weight: bolder;
}

.pr-card p {
  color: var(--blanco);
}

.res-card {
  background: var(--navy);
  color: var(--blanco);
  font-weight: bolder;
}

.res-card p {
  color: var(--blanco);
}

.s-desc {
  color: var(--blanco);
  font-weight: bolder;
}

.faq-hd h2{
  color: var(--blanco);
}

.faq-item {
  color: var(--blanco);
}

.faq-item h4 {
  color: var(--blanco);
}

/* Fin de ajustes míos */

.ac-panel {
  background: var(--t1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 1px 3px rgba(26, 43, 60, 0.04);
  position: sticky;
  top: 88px;
}
.ac-panel-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 20px;
  font-family: "DM Sans", sans-serif;
}

.ac-field {
  margin-bottom: 18px;
}
.ac-field label {
  display: block;
  font-size: 13px;
  color: var(--blanco);
  margin-bottom: 6px;
}
.ac-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--t1);
  color: var(--blanco);
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
}
.ac-field select:focus {
  outline: none;
  border-color: var(--gold);
}

.ac-field-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--blanco);
  margin-bottom: 6px;
}
.ac-field-value {
  font-weight: 600;
  color: var(--blanco);
}

.ac-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0 16px;
}

.ac-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ac-section-label--blue { color: var(--blue); }
.ac-section-label--green { color: var(--green); }
.ac-section-label--gold { color: var(--gold); }

/* Sliders: look nativo del sitio (thumb sólido con el color del dominio) */
.ac-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}
.ac-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(26, 43, 60, 0.3);
}
.ac-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(26, 43, 60, 0.3);
}
.ac-slider--blue::-webkit-slider-thumb { background: var(--blue); }
.ac-slider--blue::-moz-range-thumb { background: var(--blue); }
.ac-slider--green::-webkit-slider-thumb { background: var(--green); }
.ac-slider--green::-moz-range-thumb { background: var(--green); }
.ac-slider--gold::-webkit-slider-thumb { background: var(--gold); }
.ac-slider--gold::-moz-range-thumb { background: var(--gold); }

/* Resultados */
.ac-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ac-score-card {
  margin-bottom: 0;
  align-items: stretch;
  gap: 32px;
  flex-wrap: wrap;
}
.ac-score-main {
  flex: 1;
  min-width: 260px;
}
.ac-eyebrow-mini {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}
.ac-score-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ac-score-number {
  font-family: "Playfair Display", serif;
  font-size: 56px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.ac-tier-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(184, 151, 106, 0.15);
  color: var(--gold);
}
.ac-score-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ac-score-sub p {
  font-size: 14px;
  color: var(--t2);
}
.ac-source-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.ac-source-badge--real {
  background: rgba(45, 122, 95, 0.12);
  color: var(--green);
}
.ac-source-badge--estimado {
  background: rgba(138, 155, 172, 0.15);
  color: var(--t2);
}

.ac-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
.ac-metric-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 2px;
}
.ac-metric-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
}
.ac-metric-value--sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
}

.ac-radar {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  margin: 0 auto;
}

/* Subíndices */
.ac-subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
  .ac-subgrid {
    grid-template-columns: 1fr;
  }
}
.ac-subcard {
  background: var(--t1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(26, 43, 60, 0.04);
}
.ac-gauge {
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
}
.ac-subscore {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 8px;
}
.ac-subexplain {
  font-size: 13px;
  color: var(--blanco);
  line-height: 1.6;
}
.ac-subsource {
  font-size: 11px;
  color: var(--t3);
  margin-top: 8px;
}

/* Desglose técnico colapsable */
.ac-json-details {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
}
.ac-json-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
}
.ac-json-details pre {
  margin-top: 14px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: var(--t2);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 400px;
}

.nav-links a:hover {
    color: var(--gold);
}

/* =========================================================
   RESPONSIVE FIX — Análisis de Convergencia
   ========================================================= */

/* ---------- Header de respaldo ---------- */
.ac-fallback-header-inner {
  flex-wrap: wrap;
  gap: 10px 16px;
}
@media (max-width: 480px) {
  .ac-fallback-header-inner {
    justify-content: center;
    text-align: center;
  }
  .ac-fallback-header-inner a:first-child span { font-size: 15px; }
  .ac-fallback-header-inner .nav-links a { font-size: 13px; }
}

/* ---------- Hero ---------- */
@media (max-width: 640px) {
  .legal-hero { padding: 40px var(--px) 32px; }
  .legal-hero h1 { font-size: 28px; }
  .legal-hero .s-desc { font-size: 15px; }
  .legal-top { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Layout principal de la herramienta ---------- */
@media (max-width: 1024px) {
  .ac-tool {
    grid-template-columns: 280px 1fr;
    gap: 24px;
    padding: 48px var(--px);
  }
}
@media (max-width: 900px) {
  .ac-tool {
    grid-template-columns: 1fr;
    padding: 32px var(--px);
  }
  /* El panel ya no tiene sentido sticky cuando está apilado */
  .ac-panel {
    position: static;
    top: auto;
    padding: 22px 18px;
  }
}
@media (max-width: 480px) {
  .ac-tool { padding: 20px var(--px); gap: 18px; }
  .ac-panel { padding: 18px 14px; border-radius: 12px; }
  .ac-panel-title { font-size: 12px; margin-bottom: 14px; }
  .ac-field { margin-bottom: 14px; }
  .ac-field label,
  .ac-field-head { font-size: 12px; }
  .ac-field-value { font-size: 12px; }
  .ac-field select { font-size: 13px; padding: 9px 10px; }
}

/* ---------- Tarjeta de score ---------- */
@media (max-width: 640px) {
  .ac-score-card {
    padding: 18px 16px;
    gap: 20px;
  }
  .ac-score-row {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .ac-score-number {
    font-size: 42px;
  }
  .ac-tier-badge { font-size: 11px; padding: 3px 8px; }
  .ac-score-sub { margin-top: 6px; }
  .ac-score-sub p { font-size: 13px; }
  .ac-radar {
    width: 180px;
    height: 180px;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 380px) {
  .ac-score-number { font-size: 36px; }
  .ac-radar { width: 150px; height: 150px; }
}

/* ---------- Grid de métricas ---------- */
.ac-metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 420px) {
  .ac-metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  .ac-metric-value { font-size: 16px; }
  .ac-metric-value--sm { font-size: 12px; }
}

/* ---------- Subíndices (gauges) ---------- */
@media (max-width: 900px) {
  .ac-subgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .ac-subgrid { grid-template-columns: 1fr; }
  .ac-subcard { padding: 18px 16px; }
}
.ac-gauge {
  aspect-ratio: 1 / 1;
  max-width: 120px;
}

/* ---------- Desglose técnico ---------- */
@media (max-width: 480px) {
  .ac-json-details { padding: 12px 14px; border-radius: 10px; }
  .ac-json-details pre { font-size: 11px; max-height: 260px; }
}

/* ---------- Seguridad general en móvil ---------- */
@media (max-width: 480px) {
  body { overflow-x: hidden; }
  img, canvas, svg { max-width: 100%; height: auto; }
  .wrap { padding-left: var(--px); padding-right: var(--px); }
}

/* ---------- Safe areas (iPhone notch / Android gestos) ---------- */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  footer, .ac-fallback-header {
    padding-left: max(var(--px), env(safe-area-inset-left));
    padding-right: max(var(--px), env(safe-area-inset-right));
  }
}