/* Página /diagnostico: diagnóstico rápido (pantalla) y su hoja de impresión (PDF).
   Usa los tokens de site.css. Poppins en lo grande; Space Grotesk solo en etiquetas pequeñas. */

/* ---------- Opciones de entrada ---------- */
.dg-caminos{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; max-width:860px;}
.dg-camino{display:flex; flex-direction:column; gap:6px; padding:20px 22px; border:1px solid var(--borde); background:var(--fondo); color:var(--texto); transition:border-color .15s ease;}
.dg-camino:hover{border-color:var(--acento);}
.dg-camino b{font-weight:700; font-size:19px; line-height:1.25;}
.dg-camino span{color:var(--texto-suave); font-size:15px;}
.dg-camino .dg-duracion{font-family:var(--f-secundaria); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--acento);}
@media (max-width:640px){ .dg-caminos{grid-template-columns:1fr;} }

/* ---------- Tarjeta del cuestionario ---------- */
.dr{max-width:760px; scroll-margin-top:90px;}
.dr-tarjeta{background:var(--fondo); border:1px solid var(--borde); padding:clamp(22px, 4vw, 40px);}
.dr-tarjeta:focus{outline:none;}
.dr-titulo{font-size:clamp(24px, 3.2vw, 34px); line-height:1.15; letter-spacing:-.01em;}
.dr-titulo:focus{outline:none;}
.dr-texto{color:var(--texto-suave); margin-top:14px; font-size:17px;}
.dr-borrador{display:inline-block; font-family:var(--f-secundaria); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border:1px dashed var(--texto-suave); color:var(--texto-suave); padding:2px 8px; margin-bottom:14px;}
.dr-chip{font-family:var(--f-secundaria); font-weight:600; font-size:13px; color:var(--acento);}
.dr-bloques-lista{list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin:22px 0 26px;}
.dr-bloques-lista li{display:flex; flex-direction:column; border-top:2px solid var(--acento); padding-top:8px; min-width:120px;}
.dr-bloques-lista b{font-weight:700; font-size:18px;}
.dr-bloques-lista span{font-size:14px; color:var(--texto-suave);}
.dr-aviso{margin-top:22px; font-size:14px; color:var(--texto-suave); border-left:3px solid var(--acento); padding:2px 0 2px 14px; max-width:60ch;}
.dr-aviso b{color:var(--texto);}

/* Avance */
.dr-avance{margin-bottom:22px;}
.dr-avance-texto{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; color:var(--texto-suave); margin-bottom:8px;}
.dr-barra{height:6px; background:var(--fondo-alt); border:1px solid var(--borde); overflow:hidden;}
.dr-barra span{display:block; height:100%; background:var(--acento); transition:width .35s ease;}
@media (prefers-reduced-motion: reduce){ .dr-barra span{transition:none;} }

/* Opciones de respuesta */
.dr-opciones{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
.dr-opcion{display:flex; align-items:center; min-height:56px; padding:12px 18px; width:100%; text-align:left; cursor:pointer;
  font:500 17px/1.35 var(--f-principal); color:var(--marino); background:var(--crema-claro); border:1px solid #BDB29A;
  transition:border-color .12s ease, background-color .12s ease;}
.dr-opcion:hover{border-color:var(--marino);}
.dr-opcion[aria-pressed="true"]{border-color:var(--verde); box-shadow:inset 0 0 0 1px var(--verde); background:#E4EEE5;}
.dr-opcion:focus-visible{outline:3px solid var(--verde); outline-offset:2px;}
.dr-nav{margin-top:20px;}
.dr-atras, .dr-reiniciar{background:none; border:0; padding:8px 0; cursor:pointer; font:500 15px var(--f-principal); color:var(--texto-suave); text-decoration:underline; text-underline-offset:3px;}
.dr-atras:hover, .dr-reiniciar:hover{color:var(--texto);}

/* Datos */
.dr-datos{display:flex; flex-direction:column; gap:16px;}
.dr-datos .dr-texto{margin-top:-4px;}
.dr-datos .field label{color:var(--texto);}
.dr-casilla{display:flex; align-items:center; gap:12px; cursor:pointer; font-size:16px; font-weight:500; min-height:44px;}
.dr-casilla input{width:22px; height:22px; accent-color:var(--verde); flex:none;}
.dr-error{color:var(--texto); font-weight:600; font-size:15px; min-height:1px;}
.dr-error:empty{display:none;}
.dr-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.dr-legal{font-size:13px; color:var(--texto-suave);}
.dr-legal a{color:var(--acento); border-bottom:1px solid currentColor;}
.dr-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;}

/* Resultado */
.dr-negocio{font-family:var(--f-secundaria); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:8px;}
.dr-notas{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:24px;}
.dr-nota{display:grid; grid-template-columns:1fr auto; gap:6px 8px; padding:16px; background:var(--fondo-alt); border-top:3px solid var(--acento);}
.dr-nota-nombre{font-weight:600; font-size:15px;}
.dr-nota-cifra{font-family:var(--f-principal); font-weight:700; font-size:34px; line-height:1; grid-row:span 2; align-self:center;}
.dr-nota-cifra small{font-size:15px; font-weight:500; color:var(--texto-suave);}
.dr-nota-nivel{font-size:14px; color:var(--texto-suave); grid-column:1;}
.dr-nota-barra{grid-column:1 / -1; height:5px; background:var(--borde); order:4;}
.dr-nota-barra span{display:block; height:100%; background:var(--acento);}
.dr-nota.nivel-urgente{border-top-color:var(--texto);}
.dr-nota.nivel-urgente .dr-nota-barra span{background:var(--texto);}
.dr-sub{font-size:21px; margin-top:34px;}
.dr-problemas{list-style:none; counter-reset:prob; margin-top:12px;}
.dr-problemas li{counter-increment:prob; position:relative; padding:18px 0 18px 54px; border-top:1px solid var(--borde);}
.dr-problemas li::before{content:counter(prob); position:absolute; left:0; top:14px; font-family:var(--f-principal); font-weight:700; font-size:34px; line-height:1; color:var(--acento);}
.dr-problemas h4{font-size:19px; line-height:1.25; margin:2px 0 4px;}
.dr-problemas p{color:var(--texto-suave); font-size:16px;}
.dr-problemas .dr-accion{color:var(--texto); font-weight:600; margin-top:6px;}
.dr-cierre{margin-top:28px; padding:clamp(20px, 3.5vw, 32px);}
.dr-cierre > p{font-family:var(--f-principal); font-weight:700; font-size:clamp(20px, 2.4vw, 26px); line-height:1.25; margin-bottom:20px; max-width:30ch;}
.dr-secundarias{margin-top:20px;}
.dr-pdf{background:none; border:0; border-bottom:2px solid var(--acento); cursor:pointer; font:600 16px var(--f-principal); color:var(--texto); padding:4px 0;}
@media (max-width:640px){
  .dr-notas{grid-template-columns:1fr;}
  .dr-nota-cifra{font-size:30px;}
  .dr-cierre .btn{width:100%;}
  .dr-problemas li{padding-left:44px;}
}

/* La hoja del PDF no se ve en pantalla. */
.dr-hoja{display:none;}

/* ---------- Impresión: solo la hoja del diagnóstico ---------- */
@media print{
  @page{size:auto; margin:14mm 14mm 12mm;}
  html.dr-listo body > *:not(.dr-hoja){display:none !important;}
  html.dr-listo .dr-hoja{display:block !important;}
  html, body{background:#fff !important; color:#16213A !important;}
  .dr-hoja{font-family:var(--f-principal); font-size:10.5pt; line-height:1.45; color:#16213A;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .dr-h-cabeza{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid #2E6F40; padding-bottom:8px;}
  .dr-h-marca{font-weight:700; font-size:15pt; line-height:1.1;}
  .dr-h-sub, .dr-h-fecha{font-size:9pt; color:#4B5468;}
  .dr-h-ante{font-family:var(--f-secundaria); font-weight:600; font-size:8.5pt; letter-spacing:.14em; text-transform:uppercase; color:#2E6F40; margin-top:16px;}
  .dr-h-titulo{font-weight:700; font-size:22pt; line-height:1.1; margin-top:2px;}
  .dr-h-aviso{font-size:9pt; color:#4B5468; border-left:3px solid #2E6F40; padding-left:10px; margin-top:10px;}
  .dr-h-aviso b{color:#16213A;}
  .dr-h-notas{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px;}
  .dr-h-notas > div{border-top:3px solid #2E6F40; background:#F1EDE3; padding:8px 10px;}
  .dr-h-nombre{font-weight:600; font-size:10pt;}
  .dr-h-cifra{font-weight:700; font-size:20pt; line-height:1.1;}
  .dr-h-cifra small{font-size:10pt; font-weight:500; color:#4B5468;}
  .dr-h-nivel{font-size:9pt; color:#4B5468;}
  .dr-h-sub2{font-weight:700; font-size:13pt; margin-top:16px; margin-bottom:4px;}
  .dr-h-problemas{padding-left:20px;}
  .dr-h-problemas li{padding:6px 0; border-bottom:1px solid #D6CDB8; break-inside:avoid;}
  .dr-h-problemas li::marker{font-weight:700; color:#2E6F40;}
  .dr-h-ptitulo{font-weight:700; font-size:11.5pt;}
  .dr-h-ptitulo span{font-weight:500; font-size:9pt; color:#4B5468;}
  .dr-h-accion{font-weight:600;}
  .dr-h-tabla{width:100%; border-collapse:collapse; font-size:9pt;}
  .dr-h-tabla th, .dr-h-tabla td{text-align:left; vertical-align:top; padding:3px 6px 3px 0; border-bottom:1px solid #E8E2D4;}
  .dr-h-tabla th{font-weight:400; color:#4B5468; width:62%;}
  .dr-h-tabla td{font-weight:600;}
  .dr-h-tabla tr{break-inside:avoid;}
  .dr-h-pie{margin-top:16px; padding-top:10px; border-top:2px solid #2E6F40; font-size:9.5pt; break-inside:avoid;}
  .dr-h-cierre{font-weight:700; font-size:12pt; margin-bottom:2px;}
}