:root{
  --noche:#16213A; --noche-2:#1C2947; --luz:#22305A; --borde-noche:#2C3A63;
  --papel:#F3EBDD; --papel-2:#EAE0CC; --borde-papel:#D9CDB6; --luz-papel:#EAD9B8;
  --lacre:#B8432F; --lacre-osc:#8E3222; --ambar:#E8A33D; --alerta:#E5484D;
  --t-noche:#F3EBDD; --c-noche:#C9CFDD; --e-noche:#8E98B3;
  --t-papel:#16213A; --c-papel:#3A3F4B; --e-papel:#7A6F5C;
  --serif:'Fraunces',Georgia,serif; --sans:'Source Sans 3',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--noche);color:var(--c-noche);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--t-noche)}
button,input,select,textarea{font:inherit}
.saltar{position:absolute;left:-999px}.saltar:focus{left:12px;top:12px;background:var(--papel);color:var(--noche);padding:6px 10px;z-index:10}
#app{max-width:640px;margin:0 auto;padding:20px 16px 72px;outline:none}
.cargando{text-align:center;color:var(--e-noche);margin-top:30vh}

h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--t-noche);line-height:1.15;margin:0 0 .4em}
h1{font-size:34px} h2{font-size:26px} h3{font-size:20px}
p{margin:0 0 .8em}
.etq{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--e-noche)}
.papel .etq{color:var(--e-papel)}
.mut{color:var(--e-noche)} .papel .mut{color:var(--e-papel)}

/* el círculo de luz */
/* el círculo queda encerrado en su encabezado: nunca tapa lo que viene abajo */
.luz{--d:min(300px,84vw);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--d);text-align:center;padding:36px 12px 24px;margin-bottom:12px}
.luz.chica{--d:180px}
.luz::before{content:"";position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%;background:var(--luz);z-index:-1}
.luz p{margin-bottom:.5em}
.luz::after{content:"";position:absolute;left:50%;top:16px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ambar)}
.luz h1{margin-top:10px}

.papel{background:var(--papel);color:var(--c-papel);border:1px solid var(--borde-papel);border-radius:4px;padding:16px}
.papel h2,.papel h3{color:var(--t-papel)}
.papel a{color:var(--lacre)}
.bloque{margin:18px 0}
.sep{height:1px;background:var(--borde-noche);margin:26px 0;position:relative}
.sep::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--borde-noche)}

.btn{display:inline-block;background:var(--lacre);color:var(--papel);border:0;border-bottom:3px solid var(--lacre-osc);border-radius:6px;padding:11px 18px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--lacre-osc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ancho{display:block;width:100%}
.btn-sec{background:transparent;color:var(--t-noche);border:1px solid var(--borde-noche);border-radius:6px;padding:10px 16px;cursor:pointer}
.papel .btn-sec{color:var(--t-papel);border-color:var(--borde-papel)}
.link{background:none;border:0;color:var(--c-noche);text-decoration:underline;cursor:pointer;padding:0}

/* índice */
.frag{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.frag span{border:1px dashed var(--borde-papel);border-radius:4px;padding:6px 4px;text-align:center;font-family:var(--serif);color:var(--t-papel);min-height:36px;font-size:15px}
.frag span.vacia{color:var(--e-papel)}
.grado{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.grado .num{font-family:var(--serif);font-size:44px;color:var(--t-noche);line-height:1}
.barra{height:6px;background:var(--borde-noche);border-radius:3px;margin:10px 0 6px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--t-noche)}
.caso{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;padding:14px;border:1px solid var(--borde-noche);border-radius:4px;margin-bottom:10px;background:var(--noche-2)}
.caso:hover{border-color:var(--e-noche)}
.caso .n{flex:0 0 40px;height:40px;border-radius:50%;border:2px solid var(--lacre);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--t-noche);font-size:18px}
.caso h3{margin:0 0 2px;font-size:19px}
.caso .meta{font-size:14px;color:var(--e-noche)}
.caso .estado{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;color:var(--c-noche)}
.caso.cerrado{opacity:.75}
.caso.sellado{opacity:.55;pointer-events:none}
.puntos{letter-spacing:2px;color:var(--c-noche)}

/* caso */
.volver{display:inline-block;margin-bottom:12px;color:var(--c-noche);text-decoration:none;font-size:15px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:sticky;top:0;background:var(--noche);padding:8px 0;z-index:2;margin:10px 0 16px}
.tabs a{text-align:center;text-decoration:none;color:var(--e-noche);font-size:13px;padding:8px 2px;border-bottom:2px solid transparent}
.tabs a.on{color:var(--t-noche);border-color:var(--lacre)}
.modo{display:grid;gap:10px}
.modo button{text-align:left;padding:14px;border-radius:4px;border:1px solid var(--borde-papel);background:var(--papel);color:var(--c-papel);cursor:pointer}
.modo button strong{display:block;font-family:var(--serif);font-weight:500;color:var(--t-papel);font-size:19px}

.audio{display:flex;gap:12px;align-items:flex-start}
.audio .av{flex:0 0 44px;height:44px;border-radius:50%;background:var(--luz);color:var(--t-noche);display:flex;align-items:center;justify-content:center;font-family:var(--serif)}
.audio audio{width:100%;margin:6px 0}
details summary{cursor:pointer;color:var(--e-noche);font-size:14px}
.papel details summary{color:var(--e-papel)}

.sobre{border:1px solid var(--borde-noche);border-radius:4px;margin:14px 0;overflow:hidden}
.sobre .cab{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--noche-2)}
.sello{flex:0 0 34px;height:34px;border-radius:50%;background:var(--lacre);color:var(--papel);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px}
.sobre.cerrado .cab{opacity:.7}
.doc{display:flex;width:100%;gap:10px;align-items:center;text-align:left;background:var(--papel);color:var(--c-papel);border:0;border-top:1px solid var(--borde-papel);padding:12px 14px;cursor:pointer}
.doc .tipo{flex:0 0 92px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--e-papel)}
.doc .tit{flex:1;color:var(--t-papel)}
.doc .nuevo{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--lacre)}
.sobre .accion{padding:14px;background:var(--noche-2);border-top:1px solid var(--borde-noche)}

/* documento abierto */
#capa{position:fixed;inset:0;background:var(--noche);z-index:20;overflow:auto;padding:16px}
#capa .hoja{max-width:640px;margin:0 auto 40px}
#capa .barra-sup{display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:0 auto 10px;color:var(--c-noche)}
.hoja{background:var(--papel);color:var(--c-papel);border-radius:4px;padding:20px 18px}
.hoja h2{color:var(--t-papel);font-size:22px}
.hoja table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0}
.hoja th,.hoja td{border-bottom:1px solid var(--borde-papel);padding:7px 6px;text-align:left;vertical-align:top}
.hoja th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--e-papel);font-weight:600}
.hoja blockquote{margin:10px 0;padding:0 0 0 12px;border-left:3px solid var(--borde-papel)}
.hoja ul,.hoja ol{padding-left:20px}
.hoja.acta,.hoja.registro,.hoja.informe{font-family:'Courier New',Courier,monospace;font-size:15px}
.chat{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.burbuja{max-width:86%;padding:8px 11px;border-radius:10px;background:#fff;border:1px solid var(--borde-papel);font-size:15px}
.burbuja .quien{font-size:12px;font-weight:600;color:var(--lacre)}
.burbuja .hora{font-size:11px;color:var(--e-papel);text-align:right}
.burbuja.sis{align-self:center;background:transparent;border:0;font-style:italic;color:var(--e-papel)}

/* interrogatorios */
.sosp{margin-bottom:14px}
.sosp .quedan{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--e-papel);margin:4px 0 10px}
.preg{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--borde-papel);border-radius:4px;padding:10px 12px;margin-bottom:6px;color:var(--t-papel);cursor:pointer}
.preg:disabled{cursor:not-allowed;color:var(--e-papel)}
.preg.resp{cursor:default;border-color:var(--t-papel)}
.preg .r{display:block;margin-top:6px;color:var(--c-papel);font-style:italic}
.preg.bloq{border-style:dashed}

textarea{width:100%;min-height:220px;border:1px solid var(--borde-papel);border-radius:4px;padding:10px;background:#fff;color:var(--c-papel)}
select,input[type=text]{width:100%;border:1px solid var(--borde-papel);border-radius:4px;padding:10px;background:#fff;color:var(--c-papel);margin:4px 0 12px}
label.campo{display:block;font-weight:600;color:var(--t-papel);margin-top:6px}
.veredicto{margin-top:14px;padding:12px;border-radius:4px;border:1px solid var(--borde-papel)}
.veredicto.mal{border-color:var(--alerta);color:#8f1f22}
.palabra{font-family:var(--serif);font-size:40px;color:var(--ambar);text-align:center;margin:8px 0}
.marca{display:flex;gap:8px;align-items:center;margin:6px 0}
.pie{text-align:center;margin-top:36px;font-size:14px}
.pie a{color:var(--e-noche)}
@media (min-width:700px){h1{font-size:44px}}