:root{--bg:#0f172a;--card:#111827;--muted:#1f2937;--text:#e5e7eb;--soft:#cbd5e1;--accent:#3b82f6;--ok:#16a34a;--warn:#f59e0b;--bad:#ef4444}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;background:linear-gradient(180deg,#0b1226,#0f172a 30%);color:var(--text);font-size:16px}
@media(max-width:820px){
  body{font-size:15px}
  .row{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
.wrap{max-width:1100px;margin:32px auto;padding:16px}
.card{background:linear-gradient(180deg,var(--card),#0e1628);border:1px solid #1f2a44;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
h1{margin-top:0;font-size:clamp(22px,3.6vw,32px)} h2{margin:22px 0 8px;font-size:clamp(18px,2.4vw,22px)} p.lead{color:var(--soft);line-height:1.6}
.grid{display:grid;gap:16px}@media(min-width:980px){.grid{grid-template-columns:1fr 1fr;gap:12px}}
fieldset{border:1px solid #203154;border-radius:12px;padding:16px;background:#0b1323} legend{padding:0 8px;color:#9fb4ff}
label{display:block;margin:.35rem 0}.req::after{content:" *";color:var(--bad)}
input[type="text"],input[type="email"],input[type="tel"]{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #263553;background:#0b1323;color:#e5e7eb;font-size:1rem}
.hint{font-size:13px;color:#9aa8c7;line-height:1.5}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q{padding:16px;border:1px solid #223150;border-radius:10px;background:#0c162d;margin-bottom:12px}
.q > label{font-weight:600;font-size:1.15rem;line-height:1.5;margin-bottom:12px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #38507f;color:#b8c7ff}
.btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--accent);
  border: 0;
  color: #fff !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 5px;
  text-decoration: none !important;
}
.btn.secondary{background:#1f2e52;color:#d6def4}
.summary{border:1px dashed #38507f;border-radius:12px;padding:14px;background:#0a1222}
.kpi{font-size:28px;font-weight:800}.kpi small{font-weight:500;color:#9fb0d8}
.bar{height:10px;background:#1d2845;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%}
.bar.ok span{background:var(--ok)}.bar.warn span{background:var(--warn)}.bar.bad span{background:var(--bad)}
ul{margin:0;padding-left:18px} footer{margin-top:24px;font-size:12px;color:#9aa8c7;text-align:center}
details.phase{border:1px solid #203154;border-radius:12px;background:#0b1323;margin:.6rem 0}
details.phase>summary{cursor:pointer;padding:12px 14px;font-weight:700;color:#b8c7ff;list-style:none;font-size:1.2rem}
details.phase[open]>summary{border-bottom:1px solid #203154} noscript{display:block;margin:16px 0;color:#ffb4b4}
.badge-weight,.badge-level,.hint-risk{display:none}
.error-message{color:var(--bad);background:rgba(239,68,68,.1);border:1px solid var(--bad);padding:12px;border-radius:10px;margin-bottom:16px;text-align:center;font-weight:600}

/* Touch-friendly radio buttons */
.opt{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.opt input[type="radio"]{opacity:0;position:fixed;width:0}
.opt label{display:block;padding:14px 20px;background:#1f2937;border:2px solid #2c3a4f;border-radius:10px;text-align:center;cursor:pointer;transition:all .2s ease-in-out;font-weight:600;font-size:1.1rem;margin:0}
.opt label:hover{background:#2c3a4f;border-color:var(--accent)}
.opt input[type="radio"]:checked + label{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 15px rgba(59,130,246,.4)}

/* Progress Bar */
.progress-container{width:100%;background-color:#1f2937;border-radius:10px;margin:20px 0;position:relative;height:28px;border:1px solid #2c3a4f}
.progress-bar{width:0%;height:100%;background-color:var(--accent);border-radius:8px;transition:width .3s ease-in-out}
.progress-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}

/* Footer Logo */
.footer-logo { max-width: 150px; height: auto; margin-bottom: 15px; }

/* Footer Link */
footer a {
    color: var(--soft); /* Lighter grey for contrast */
    text-decoration: underline;
    margin: 0 5px; /* Add some horizontal spacing */
    transition: color 0.2s ease-in-out;
}

footer a:hover {
    color: var(--accent); /* Accent color on hover */
}

/* Links within main content */
.card a {
    color: var(--accent); /* Use the accent color for prominence */
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}

.card a:hover {
    color: var(--soft); /* Change color on hover for feedback */
}

.results-actions{margin-bottom:20px;}

/* Print Styles - Estilos de Impresión */
.print-header {
  display: none; /* Oculto por defecto */
}

@media print {
  body {
    font-family: Garamond, Georgia, 'Times New Roman', serif;
    color: #000;
    background-color: #fff;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .wrap {
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 1cm; /* Márgenes de la página */
    width: auto;
  }

  .card {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .print-header {
    display: block;
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }

  .print-header img {
    max-width: 220px;
    margin-bottom: 1rem;
  }
  
  .print-header h1 {
    font-size: 22pt;
    margin: 0;
    color: #000;
  }

  /* Ocultar elementos no necesarios en la impresión */
  .results-actions,
  footer,
  body > .wrap > .card > div > h1, /* Ocultar el "Gracias" */
  body > .wrap > .card > div > p.lead /* Ocultar el párrafo de lead */
  {
    display: none;
  }
  script, .noprint {
    display: none !important;
  }

  /* Ajustes de layout */
  .card.grid {
    display: block; /* Apilar resumen y recomendaciones */
  }

  aside {
    margin-top: 2rem;
    page-break-before: always; /* El resumen empieza en una nueva página */
  }
  
  h2 {
    font-size: 18pt;
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    margin-top: 1.5rem;
  }

  .summary {
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 0;
  }

  #recsList li {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    page-break-inside: avoid; /* Evitar que una recomendación se corte entre páginas */
  }

  .rec-details {
    background-color: #f4f4f4;
    border-left: 4px solid #ccc;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
  }

  /* Forzar que los links no se muestren azules o morados */
  a, a:visited {
    text-decoration: none;
    color: #000;
  }
}