/* ==========================================================
   Encuesta de Calidad · Área de Sistemas
   Estilos compartidos (encuesta + panel)
   ========================================================== */
:root{
  --ink:#13202B; --ink-soft:#516477; --canvas:#E7ECF2; --surface:#FFFFFF;
  --line:#D3DBE4; --line-soft:#E6EBF1;
  --brand:#0E5C8A; --brand-deep:#0B3E5E; --accent:#F2A20C;
  --ok:#1F9D6B; --mid:#E0A21A; --low:#D6453E;
  --shadow:0 1px 2px rgba(19,32,43,.06), 0 6px 22px rgba(19,32,43,.07);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,sans-serif; color:var(--ink);
  background:var(--canvas);
  background-image:radial-gradient(circle at 1px 1px, rgba(19,32,43,.05) 1px, transparent 0);
  background-size:22px 22px;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",monospace}
.wrap{max-width:960px; margin:0 auto; padding:0 18px}

/* Header */
header{
  background:linear-gradient(135deg,var(--brand-deep),var(--brand));
  color:#EAF3F9; position:sticky; top:0; z-index:20;
  box-shadow:0 4px 18px rgba(11,62,94,.25);
}
.head-in{display:flex; align-items:center; gap:14px; padding:16px 18px; max-width:960px; margin:0 auto; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand-mark{width:42px;height:42px;flex:0 0 auto}
.brand h1{font-family:Archivo; font-weight:800; font-size:1.12rem; letter-spacing:-.01em; margin:0; line-height:1.1}
.brand p{margin:0; font-size:.74rem; color:#A9CCE0; letter-spacing:.04em; text-transform:uppercase}
.head-link{color:#CFE4F1; text-decoration:none; font-size:.84rem; font-weight:600; border:1.5px solid rgba(255,255,255,.25); padding:8px 14px; border-radius:9px; transition:.15s}
.head-link:hover{background:rgba(255,255,255,.12); color:#fff}

/* Views */
main{padding:30px 0 70px}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* Card */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.intro{padding:26px 26px 22px; margin-bottom:18px}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0 0 8px}
.intro h2{font-family:Archivo; font-weight:800; font-size:1.5rem; letter-spacing:-.02em; margin:0 0 8px}
.intro p{margin:0; color:var(--ink-soft); max-width:60ch}

/* Form */
form{padding:8px 0}
.q{padding:22px 26px; border-top:1px solid var(--line-soft)}
.q:first-child{border-top:0}
.q-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
.q-num{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.78rem; color:#fff; background:var(--brand); min-width:30px; height:30px; display:grid; place-items:center; border-radius:8px; margin-top:1px}
.q-label{font-weight:600; font-size:1.02rem}
.q-sub{font-size:.85rem; color:var(--ink-soft); margin-top:2px}

select, input[type=text], input[type=password], textarea{
  width:100%; font-family:Inter; font-size:1rem; color:var(--ink);
  border:1.5px solid var(--line); border-radius:10px; background:#FBFCFE; padding:12px 14px;
}
select:focus, input:focus, textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,92,138,.14)}
textarea{resize:vertical; min-height:92px}

/* Likert */
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.scale label{
  cursor:pointer; border:1.5px solid var(--line); border-radius:10px; background:#FBFCFE;
  padding:12px 6px 10px; text-align:center; transition:.15s; user-select:none; position:relative;
}
.scale label:hover{border-color:var(--brand); background:#F2F8FC}
.scale input{position:absolute; opacity:0; pointer-events:none}
.scale .n{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.2rem; display:block}
.scale .c{font-size:.7rem; color:var(--ink-soft); margin-top:3px; display:block; line-height:1.2}
.scale input:checked + .n{color:var(--brand)}
.scale label:has(input:checked){border-color:var(--brand); background:#E8F2F9; box-shadow:0 0 0 3px rgba(14,92,138,.12)}
.scale label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}

/* Yes/No */
.yn{display:flex; gap:10px; flex-wrap:wrap}
.yn label{cursor:pointer; border:1.5px solid var(--line); border-radius:10px; background:#FBFCFE; padding:11px 22px; font-weight:600; transition:.15s; position:relative}
.yn input{position:absolute; opacity:0; pointer-events:none}
.yn label:has(input:checked){border-color:var(--brand); background:#E8F2F9; color:var(--brand-deep)}
.yn label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}

.submit-row{padding:24px 26px 28px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.btn{appearance:none; border:0; cursor:pointer; font-family:Inter; font-weight:600; font-size:.95rem; border-radius:10px; padding:13px 26px; transition:.18s}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 3px 10px rgba(14,92,138,.28)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent; color:var(--brand); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand); background:#F2F8FC}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.6; cursor:default}
.err{color:var(--low); font-size:.86rem; font-weight:500}

/* Thank you */
.thanks{padding:50px 26px; text-align:center}
.thanks .check{width:64px;height:64px;margin:0 auto 16px}
.thanks h2{font-family:Archivo; font-weight:800; font-size:1.5rem; margin:0 0 8px}
.thanks p{color:var(--ink-soft); margin:0 0 22px}

/* PIN gate */
.gate{max-width:380px; margin:40px auto; padding:34px 30px; text-align:center}
.gate .lock{width:46px;height:46px;margin:0 auto 14px}
.gate h2{font-family:Archivo; font-weight:800; font-size:1.25rem; margin:0 0 6px}
.gate p{color:var(--ink-soft); font-size:.9rem; margin:0 0 20px}
.gate input{text-align:center; letter-spacing:.4em; font-family:"JetBrains Mono",monospace; font-size:1.2rem; margin-bottom:12px}

/* Dashboard */
.dash-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.dash-head h2{font-family:Archivo; font-weight:800; font-size:1.45rem; letter-spacing:-.02em; margin:0; margin-right:auto}
.filter{display:flex; align-items:center; gap:8px}
.filter label{font-size:.82rem; color:var(--ink-soft); font-weight:500}
.filter select{width:auto; padding:8px 12px; font-size:.88rem}
.tool-btn{appearance:none; cursor:pointer; border:1.5px solid var(--line); background:var(--surface); border-radius:9px; padding:9px 13px; font-size:.84rem; font-weight:600; color:var(--ink); transition:.15s; display:inline-flex; align-items:center; gap:6px}
.tool-btn:hover{border-color:var(--brand); color:var(--brand)}
.tool-btn.danger:hover{border-color:var(--low); color:var(--low)}
.tool-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.kpi{padding:18px 14px 14px; text-align:center}
.gauge-svg{width:100%; max-width:170px; height:auto; display:block; margin:0 auto}
.gauge-bg{fill:none; stroke:var(--line); stroke-width:14; stroke-linecap:round}
.gauge-fg{fill:none; stroke-width:14; stroke-linecap:round; transition:stroke-dasharray .8s cubic-bezier(.3,1,.4,1)}
.gauge-num{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:34px; fill:var(--ink); text-anchor:middle}
.gauge-cap{font-family:Inter; font-size:11px; fill:var(--ink-soft); text-anchor:middle}
.kpi-title{font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-top:2px}
.kpi-count{padding:22px 14px}
.kpi-count .big{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:3rem; color:var(--brand-deep); line-height:1}
.kpi-count .lbl{font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-top:8px}
.kpi-count .sub{font-size:.74rem; color:var(--ink-soft); margin-top:4px}

.panel{padding:22px 24px; margin-bottom:18px}
.panel h3{font-family:Archivo; font-weight:700; font-size:1.06rem; margin:0 0 4px}
.panel .hint{font-size:.82rem; color:var(--ink-soft); margin:0 0 18px}

/* Bars */
.bar-row{display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:14px}
.bar-row:last-child{margin-bottom:0}
.bar-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.bar-label{font-size:.9rem; font-weight:500}
.bar-val{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.92rem}
.bar-track{height:13px; background:var(--line-soft); border-radius:7px; overflow:hidden}
.bar-fill{height:100%; border-radius:7px; transition:width .8s cubic-bezier(.3,1,.4,1)}

/* Distribution */
.dist{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:end; height:170px; padding-top:8px}
.dist-col{display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:6px}
.dist-bar{width:100%; max-width:60px; border-radius:8px 8px 0 0; min-height:4px; transition:height .8s cubic-bezier(.3,1,.4,1)}
.dist-cnt{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.86rem}
.dist-lab{font-size:.72rem; color:var(--ink-soft); text-align:center; line-height:1.15; margin-top:2px}

/* Comments */
.comments{display:flex; flex-direction:column; gap:10px; max-height:420px; overflow:auto}
.cmt{border:1px solid var(--line-soft); border-radius:11px; padding:12px 14px; background:#FBFCFE}
.cmt-meta{display:flex; gap:8px; align-items:center; margin-bottom:5px; flex-wrap:wrap}
.chip{font-size:.72rem; font-weight:600; color:var(--brand-deep); background:#E8F2F9; padding:3px 9px; border-radius:20px}
.chip-score{font-family:"JetBrains Mono",monospace; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:700; color:#fff}
.cmt-date{font-size:.72rem; color:var(--ink-soft); margin-left:auto; font-family:"JetBrains Mono",monospace}
.cmt-text{font-size:.92rem; color:var(--ink)}

.empty{padding:46px 20px; text-align:center; color:var(--ink-soft)}
.empty svg{width:46px;height:46px;margin-bottom:12px;opacity:.5}
.store-tag{font-size:.72rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}

.notice{padding:14px 16px; border-radius:11px; font-size:.9rem; margin:0 0 18px}
.notice-err{background:#FBEAE9; border:1px solid #F0C8C6; color:#9A2C28}

footer{text-align:center; color:var(--ink-soft); font-size:.78rem; padding:0 0 30px}

@media(max-width:720px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .scale{grid-template-columns:repeat(5,1fr); gap:5px}
  .scale .c{display:none}
  .scale label{padding:14px 4px}
  .head-in{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}