/* ================================
   Tema general y variables
================================== */
:root{
  --green:#169c5e;
  --green-700:#0f6f44;
  --bg:#f6fff9;
  --text:#1f2d2a;
  --card:#ffffff;
  --muted:#6a7a75;
  --border:#d7efe3;
  --focus:#7dd3fc;
  --link:#0f6f44;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:900px; margin:0 auto; padding:1rem}

/* ================================
   Cabecera (texto en blanco)
================================== */
.site-header{background:var(--green); color:#fff}
.site-header .header-hero{padding-top:1rem; padding-bottom:1rem}
.site-header h1,
.site-header p,
.site-header .lede,
.site-header .breadcrumbs,
.site-header .breadcrumbs a,
.site-header .breadcrumbs span{color:#fff}
.site-header .breadcrumbs{font-size:.95rem; opacity:.95; margin-bottom:.35rem}
.site-header .breadcrumbs a{text-decoration:underline}
.site-header .breadcrumbs a:hover{text-decoration:none; opacity:.9}

/* ================================
   Tarjetas y tipografía
================================== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  margin:1rem 0;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
h1,h2{letter-spacing:.2px; margin:.2rem 0 .6rem}
.lede{font-size:1.05rem; color:#eefaf3}

/* ================================
   Botones
================================== */
.btn-primary,.btn-secondary{
  appearance:none; border:0; border-radius:12px;
  padding:.75rem 1rem; cursor:pointer; text-decoration:none;
  display:inline-block; margin-top:.5rem;
  transition:transform .04s ease, background-color .15s ease, opacity .15s ease;
}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-700)}
.btn-secondary{background:#eaf7f0; color:var(--green-700)}
.btn-primary:active,.btn-secondary:active{transform:translateY(1px)}
a.btn-primary:focus-visible, button.btn-primary:focus-visible,
a.btn-secondary:focus-visible, button.btn-secondary:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
}

/* Botones contrastados para header (opcional) */
.btn-contrast{background:#ffffff; color:var(--green-700)}
.btn-contrast:hover{background:#f4fff9}
.btn-contrast-outline{background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,.8)}
.btn-contrast-outline:hover{background:rgba(255,255,255,.1)}

/* Acciones en cabecera (responsivo) */
.hero-actions{display:flex; gap:.5rem; flex-wrap:wrap}

/* ================================
   Formularios
================================== */
label{display:block; margin:.25rem 0 .5rem}
select{
  border:1px solid var(--border);
  background:#fff; border-radius:10px; padding:.5rem .65rem;
}
select:focus-visible{outline:3px solid var(--focus)}
input[type="radio"]{accent-color:var(--green)}

/* ================================
   Bloques de preguntas (game.php)
================================== */
.qset{
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  margin:1rem 0;
  background:#ffffff;
}
.qset legend{
  font-weight:600;
  padding:0 .25rem;
  margin-bottom:.25rem;
}
.qset .ayuda{
  margin:.25rem 0 .5rem;
  color:var(--muted);
  font-size:.95rem;
  font-style:italic;
}
.qset hr.separador{
  border:0;
  border-top:1px solid var(--border);
  margin:.5rem 0 .75rem;
}

/* Opciones en una sola línea con intercalado pastel */
.option-inline{
  display:flex;
  align-items:center;
  gap:.25rem;
  margin:.25rem 0;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.5rem .75rem;
  background:#fff; /* base even */
}
.option-inline input[type="radio"]{margin-right:.25rem}
.qset .option-inline.option-alt:nth-of-type(odd){background:#eefaf3} /* verde pastel para odd */

/* Acciones al final del formulario */
.actions{display:flex; gap:.5rem; flex-wrap:wrap}

/* ================================
   Resultados (results.php)
================================== */
.chart-wrap{margin:1rem 0}
.axis-labels{
  display:flex; justify-content:space-between;
  font-size:.9rem; color:var(--muted);
}
.segmento-pill{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background:#eef6f1; color:#0f5132; font-size:.9rem; margin-left:.25rem;
}
.metrics{
  display:flex; gap:1rem; flex-wrap:wrap; margin:.5rem 0 1rem;
}
.metrics .badge{
  background:#eef2ff; color:#1f2937;
  border-radius:8px; padding:.35rem .5rem; font-size:.9rem;
}
.legend-mini{
  display:flex; gap:.5rem; align-items:center; font-size:.9rem;
  color:var(--muted); margin-top:.5rem; flex-wrap:wrap;
}
.legend-mini .sw{width:12px; height:12px; border-radius:3px; display:inline-block}

/* ================================
   Botones de compartir (index.php)
================================== */
.share-card p{margin-top:.25rem}
.share-bar{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.btn-share{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; padding:.6rem .9rem; color:#fff;
  text-decoration:none; font-weight:600; transition:transform .15s ease, opacity .15s ease;
}
.btn-share:hover{opacity:.9; transform:translateY(-1px)}
.btn-share i{font-size:1rem}
.btn-share.fb{background:#1877F2}     /* Facebook */
.btn-share.x{background:#000000}      /* X (Twitter) */
.btn-share.tg{background:#229ED9}     /* Telegram */
.btn-share.ig{background:#E1306C}     /* Instagram */
.share-note{margin-top:.5rem; color:var(--muted); font-size:.95rem}

/* ================================
   Pie de página
================================== */
.site-footer{
  border-top:1px solid var(--border);
  background:#f9fffb;
  color:var(--muted);
}

/* ================================
   Utilidades
================================== */
.hidden{display:none !important}
.text-muted{color:var(--muted)}
.center{text-align:center}

/* ================================
   Responsive
================================== */
@media (max-width:640px){
  .container{padding:.85rem}
  .card{padding:.85rem}
  .metrics{gap:.5rem}
}

/* ================================
   Impresión
================================== */
@media print{
  .site-header, .site-footer, .btn-primary, .btn-secondary, .share-card {display:none !important}
  .card{box-shadow:none; border-color:#ccc}
}