/* Diagnostico de compras publicas. Lo genera build_diagnostico.py. */
.dg{max-width:820px;margin:0 auto;padding:0 20px;}
.dg-hero{text-align:center;padding:52px 0 8px;}
/* el titular es la promesa de la herramienta: manda en la pantalla.
   Con mayusculas acentuadas y peso 800 el acento de "Cuánto" se sale de la
   caja de linea y se ve recortado. 1.2 + padding arriba le dan sitio.
   Los activos van con version derivada del contenido (ver sello()): sin eso
   el navegador seguia sirviendo la hoja vieja y el arreglo "no se veia". */
.dg-hero h1{font-size:clamp(36px,7.6vw,68px);line-height:1.2;margin:0 0 18px;
  padding-top:.14em;letter-spacing:-.03em;font-weight:800;}
.dg-hero h1 em{color:var(--oro);font-style:normal;}
.dg-hero p{color:var(--suave);font-size:17.5px;margin:0 auto;max-width:580px;}
.dg-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--oro);margin:0 0 16px;}
.dg-pill i{width:7px;height:7px;border-radius:50%;background:var(--oro);display:block;}

.dg-roles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:30px 0 8px;}
.dg-rol{background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:24px 22px;text-align:left;color:inherit;font:inherit;cursor:pointer;
  transition:border-color .16s,transform .16s;display:flex;flex-direction:column;gap:8px;}
.dg-rol:hover{border-color:var(--oro);transform:translateY(-3px);}
.dg-rol b{font-size:19px;line-height:1.25;}
.dg-rol span{color:var(--suave);font-size:14.5px;line-height:1.55;}
.dg-rol u{color:var(--oro);text-decoration:none;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-top:6px;}
.dg-nota{text-align:center;color:var(--tenue);font-size:13.5px;margin:18px 0 0;}

/* -------- cuestionario */
.dg-barra{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:10px 0 26px;}
.dg-barra i{display:block;height:100%;background:var(--oro);border-radius:99px;
  transition:width .3s ease;}
.dg-meta{display:flex;justify-content:space-between;color:var(--tenue);font-size:13px;
  margin-top:26px;}
.dg-cat{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--oro);margin:0 0 10px;}
.dg-preg{font-size:clamp(19px,3.2vw,25px);line-height:1.32;margin:0 0 22px;
  letter-spacing:-.01em;}
.dg-ops{display:grid;gap:10px;}
.dg-op{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--borde);border-radius:11px;
  padding:15px 17px;color:var(--texto);font:inherit;font-size:15.5px;line-height:1.5;
  cursor:pointer;transition:border-color .14s,background .14s;}
.dg-op:hover:not(:disabled){border-color:var(--borde2);background:var(--panel2);}
.dg-op:disabled{cursor:default;}
.dg-op i{flex:none;width:25px;height:25px;border-radius:7px;background:var(--panel2);
  border:1px solid var(--borde2);display:grid;place-items:center;font-style:normal;
  font-size:12.5px;font-weight:700;color:var(--suave);}
.dg-op.bien{border-color:#4f9d5a;background:rgba(79,157,90,.10);}
.dg-op.bien i{background:#4f9d5a;border-color:#4f9d5a;color:#08210c;}
.dg-op.mal{border-color:#b8503f;background:rgba(184,80,63,.10);}
.dg-op.mal i{background:#b8503f;border-color:#b8503f;color:#2a0d08;}
.dg-fb{margin:18px 0 0;padding:15px 17px;border-radius:11px;border:1px solid var(--borde);
  background:var(--panel);font-size:15px;line-height:1.6;}
.dg-fb b{display:block;margin-bottom:5px;}
.dg-fb.bien b{color:#7fc389;}
.dg-fb.mal b{color:#e0836f;}
.dg-fb p{margin:0;color:var(--suave);}
.dg-sig{display:flex;justify-content:flex-end;margin-top:22px;}

/* -------- muro de correo */
.dg-gate{background:var(--panel);border:1px solid var(--borde);border-radius:16px;
  padding:28px 26px;margin-top:8px;}
.dg-gate h2{margin:0 0 8px;font-size:clamp(21px,3.6vw,27px);line-height:1.25;}
.dg-gate>p{margin:0 0 20px;color:var(--suave);font-size:15.5px;}
.dg-incluye{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;}
.dg-incluye li{display:flex;gap:10px;align-items:flex-start;color:var(--suave);
  font-size:14.5px;line-height:1.5;}
.dg-incluye li s{color:var(--oro);text-decoration:none;font-weight:800;flex:none;}
.dg-campo{display:block;margin:0 0 15px;}
.dg-campo span{display:block;font-size:13.5px;color:var(--suave);margin-bottom:6px;}
.dg-campo span em{font-style:normal;color:var(--tenue);}
.dg-campo input{width:100%;background:var(--fondo);border:1px solid var(--borde2);
  border-radius:9px;padding:12px 14px;color:var(--texto);font:inherit;font-size:16px;}
.dg-campo input:focus{outline:none;border-color:var(--oro);}
.dg-consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px;
  color:var(--suave);font-size:13.5px;line-height:1.5;cursor:pointer;}
.dg-consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--oro);}
.dg-error{margin:0 0 14px;color:#e0836f;font-size:14px;}
.dg-priv{margin:14px 0 0;color:var(--tenue);font-size:12.5px;text-align:center;}
.dg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* -------- informe */
.dg-res{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.dg-res>div:first-child{flex:1 1 280px;}
.dg-res h2{margin:0 0 8px;font-size:clamp(23px,4.2vw,32px);line-height:1.2;}
.dg-res h2 em{color:var(--oro);font-style:normal;}
.dg-res p{margin:0;color:var(--suave);font-size:15.5px;}
.dg-aro{flex:none;width:142px;height:142px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--oro) var(--a,0deg),var(--panel2) 0);margin:0 auto;}
.dg-aro>div{width:112px;height:112px;border-radius:50%;background:var(--fondo);
  display:grid;place-items:center;align-content:center;text-align:center;}
.dg-aro b{font-size:33px;line-height:1;font-weight:800;}
.dg-aro small{color:var(--tenue);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;}
.dg-dims{margin:26px 0 0;display:grid;gap:14px;}
.dg-dim{display:flex;align-items:center;gap:14px;}
.dg-dim>span:first-child{flex:1 1 auto;min-width:0;}
.dg-dim strong{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px;}
/* es un <span>: sin display:block no toma la altura y la barra no se ve */
.dg-track{display:block;height:7px;background:var(--panel2);border-radius:99px;
  overflow:hidden;}
.dg-track i{display:block;height:100%;background:var(--oro);border-radius:99px;}
.dg-dim b{flex:none;width:42px;text-align:right;font-size:15px;}
.dg-prio{margin:26px 0 0;background:var(--panel);border:1px solid var(--borde);
  border-left:3px solid var(--oro);border-radius:12px;padding:20px 22px;}
.dg-prio .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--oro);margin:0 0 8px;}
.dg-prio h3{margin:0 0 8px;font-size:18px;line-height:1.3;}
.dg-prio p{margin:0;color:var(--suave);font-size:15px;line-height:1.6;}
.dg-prio .luego{margin-top:16px;padding-top:14px;border-top:1px solid var(--borde);}
.dg-prio .luego strong{display:block;font-size:14.5px;margin-bottom:5px;}
.dg-envio{margin:20px 0 0;padding:13px 16px;border-radius:10px;font-size:14px;
  background:var(--panel2);border:1px solid var(--borde);color:var(--suave);}
.dg-envio b{color:var(--texto);}
/* curso recomendado segun el nivel: el paso siguiente del embudo */
.dg-curso{margin:18px 0 0;background:var(--panel);border:1px solid rgba(240,180,41,.45);
  border-left:3px solid var(--oro);border-radius:12px;padding:20px 22px;}
.dg-curso .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--oro);margin:0 0 8px;}
.dg-curso h3{margin:0 0 6px;font-size:18px;line-height:1.3;}
.dg-curso p{margin:0;color:var(--suave);font-size:15px;line-height:1.6;}
.dg-curso .dg-curso-oferta{margin:10px 0 0;color:var(--texto);}
.dg-curso .dg-curso-oferta b{color:var(--oro);}
.dg-curso .btn{margin:16px 0 0;}
.dg-curso .dg-curso-otro{margin:12px 0 0;font-size:13.5px;color:var(--tenue);}
.dg-curso .dg-curso-otro a{color:var(--suave);}
.dg-acc{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0;}

.dg-oculto{display:none;}
@media(max-width:560px){
  .dg{padding:0 15px;}
  .dg-hero{padding:34px 0 4px;}
  .dg-gate{padding:22px 18px;}
  .dg-op{font-size:15px;padding:13px 14px;gap:11px;}
  .dg-acc .btn{width:100%;}
}
@media print{
  .barra,.pie,.dg-acc,.dg-envio{display:none !important;}
  body{background:#fff;color:#111;}
  .dg-prio,.dg-track,.dg-curso{border-color:#ccc;}
}