:root{
  --azul:#1e3a5f; --azul-claro:#2f5d8a; --gris:#f4f6f8; --gris-borde:#d9dee3;
  --texto:#22292f; --verde:#2e7d4f; --amarillo:#c58a00; --rojo:#b3261e; --blanco:#fff;
}
*{box-sizing:border-box;}
body{
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris); color:var(--texto); margin:0; padding:0;
}
#app{max-width:880px;margin:0 auto;padding:24px 20px 60px;}
header{padding:18px 0 10px;}
header h1{font-size:1.4rem;margin:0 0 4px;color:var(--azul);}
header p{margin:0;color:#555;font-size:.92rem;}
#progress-bar{height:8px;background:var(--gris-borde);border-radius:4px;overflow:hidden;margin:14px 0 22px;}
#progress-fill{height:100%;background:var(--azul-claro);width:0%;transition:width .3s;}
.card{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:10px;padding:22px 24px;margin-bottom:16px;}
.card h2{margin-top:0;font-size:1.15rem;color:var(--azul);}
.card h3{font-size:.95rem;color:var(--azul-claro);margin:0 0 14px;text-transform:uppercase;letter-spacing:.03em;}
label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px;}
input[type=text],input[type=date],input[type=password],input[type=email],select{
  width:100%;padding:9px 10px;border:1px solid var(--gris-borde);border-radius:6px;font-size:.95rem;background:#fff;
}
.question{padding:14px 0;border-bottom:1px solid #eef1f3;}
.question:last-child{border-bottom:none;}
.qtext{font-size:.95rem;margin-bottom:10px;line-height:1.4;}
.qnum{color:#8a94a0;font-weight:600;margin-right:6px;}
.likert-row{display:flex;gap:6px;flex-wrap:wrap;}
.likert-opt{flex:1;min-width:90px;}
.likert-opt input{display:none;}
.likert-opt label{
  display:block;text-align:center;font-weight:500;font-size:.78rem;padding:9px 4px;
  border:1px solid var(--gris-borde);border-radius:6px;cursor:pointer;margin:0;color:#555;
  transition:all .15s;
}
.likert-opt input:checked + label{background:var(--azul-claro);border-color:var(--azul-claro);color:#fff;}
.mc-opt{margin:6px 0;}
.mc-opt label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:.9rem;cursor:pointer;padding:8px 10px;border:1px solid var(--gris-borde);border-radius:6px;line-height:1.35;}
.mc-opt input:checked + span{font-weight:600;}
.mc-opt input{margin:0;flex-shrink:0;}
.scenario-box{background:#eef3f8;border-left:4px solid var(--azul-claro);border-radius:6px;padding:10px 12px;font-size:.9rem;margin-bottom:10px;font-style:italic;color:#33475b;}
.fc-section{margin-top:24px;padding-top:16px;border-top:2px solid var(--gris-borde);}
.fc-instructions{font-size:.85rem;color:#555;margin-bottom:12px;}
.missing{outline:2px solid var(--rojo);border-radius:8px;}
.btn-row{display:flex;justify-content:space-between;margin-top:8px;gap:10px;}
button{
  background:var(--azul-claro);color:#fff;border:none;padding:11px 20px;border-radius:7px;
  font-size:.92rem;font-weight:600;cursor:pointer;
}
button.secondary{background:#fff;color:var(--azul-claro);border:1px solid var(--azul-claro);}
button:hover{opacity:.9;}
button:disabled{opacity:.6;cursor:not-allowed;}
.error-msg{color:var(--rojo);font-size:.85rem;margin-top:8px;display:none;}
.warn-box{background:#fff7e6;border:1px solid #f0c869;border-radius:8px;padding:12px 14px;font-size:.82rem;color:#6b5100;margin-bottom:16px;line-height:1.45;}
.risk-banner{border-radius:8px;padding:16px 18px;margin-bottom:18px;color:#fff;}
.risk-ninguno{background:#1d6b45;}
.risk-bajo{background:#4caf7d;}
.risk-medio{background:var(--amarillo);}
.risk-alto{background:var(--rojo);}
.risk-note{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.35);font-size:.8rem;opacity:.95;}
.risk-banner h3{margin:0 0 4px;color:#fff;font-size:1rem;}
.risk-banner p{margin:0;font-size:.85rem;opacity:.95;}
.bar-row{margin:14px 0;}
.bar-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:4px;}
.bar-bg{background:var(--gris-borde);border-radius:5px;height:14px;overflow:hidden;}
.bar-fill{height:100%;background:var(--azul-claro);border-radius:5px;}
.bar-desc{font-size:.8rem;color:#666;margin-top:3px;line-height:1.4;}
.sub-bar .bar-fill{background:#8aa9c4;}
.quality-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:10px;}
@media (max-width:600px){.quality-grid{grid-template-columns:1fr 1fr;}}
.quality-item{border:1px solid var(--gris-borde);border-radius:8px;padding:12px;text-align:center;}
.quality-item .qlabel{font-size:.75rem;color:#666;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.quality-item .qval{font-size:1rem;font-weight:700;}
.qval.ok{color:var(--verde);}
.qval.warn{color:var(--amarillo);}
.qval.bad{color:var(--rojo);}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
footer{font-size:.75rem;color:#888;text-align:center;margin-top:30px;line-height:1.5;}
table{width:100%;border-collapse:collapse;font-size:.88rem;}
table th, table td{text-align:left;padding:10px 8px;border-bottom:1px solid #eef1f3;}
table th{color:#666;font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.03em;}
tr.clickable{cursor:pointer;}
tr.clickable:hover{background:#f7f9fb;}
.badge{display:inline-block;padding:3px 9px;border-radius:12px;font-size:.75rem;font-weight:600;color:#fff;}
.badge-ninguno{background:#1d6b45;}
.badge-bajo{background:#4caf7d;}
.badge-medio{background:var(--amarillo);}
.badge-alto{background:var(--rojo);}
@media print{
  button,.actions,#progress-bar,.warn-box{display:none !important;}
  body{background:#fff;}
  .card{border:none;box-shadow:none;padding:0;margin-bottom:20px;}
}