:root {
  color-scheme: light;
  --plano: #f9f9f7; --superficie: #fcfcfb; --tinta: #0b0b0b; --tinta2: #52514e; --tenue: #898781;
  --rejilla: #e1e0d9; --base: #c3c2b7; --borde: rgba(11,11,11,.10);
  --s1: #2a78d6; --s1-area: rgba(42,120,214,.10); --acento: #2a78d6; --acento-tinta: #fff;
  --bien: #006300; --mal: #d03b3b; --aviso: #fab219;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --plano: #0d0d0d; --superficie: #1a1a19; --tinta: #f0efec; --tinta2: #c3c2b7; --tenue: #898781;
    --rejilla: #2c2c2a; --base: #383835; --borde: rgba(255,255,255,.10); --s1: #3987e5; --s1-area: rgba(57,135,229,.12); --acento: #3987e5; --acento-tinta: #0b0b0b; --bien: #0ca30c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--plano); color: var(--tinta); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 20px; margin: 0; } h2 { font-size: 17px; margin: 0 0 10px; } h3 { font-size: 15px; margin: 16px 0 6px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--superficie); border: 1px solid var(--base); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button:hover { border-color: var(--tinta2); }
button.principal { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); font-weight: 600; }
button.peligro { color: var(--mal); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { background: var(--superficie); border: 1px solid var(--base); border-radius: 8px; padding: 7px 10px; width: 100%; }
textarea { resize: vertical; min-height: 80px; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.espacio { flex: 1; }
.tenue { color: var(--tenue); font-size: 13px; }
.caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.error { color: var(--mal); } .ok { color: var(--bien); }

/* entrada */
#entrada { max-width: 340px; margin: 12vh auto; } #entrada form { display: grid; gap: 10px; }
/* cabecera y pestañas */
header { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--borde); background: var(--superficie); flex-wrap: wrap; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav button { border: 0; background: none; border-radius: 8px; color: var(--tinta2); }
nav button[aria-selected="true"] { background: var(--s1-area); color: var(--tinta); font-weight: 600; }
main { max-width: 1040px; margin: 0 auto; padding: 18px; }
/* biblioteca */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta .miniatura { height: 120px; background: var(--plano); display: grid; place-items: center; cursor: pointer; font-size: 34px; overflow: hidden; }
.tarjeta .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta .info { padding: 8px 10px; display: grid; gap: 2px; font-size: 13px; }
.tarjeta .nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--s1-area); }
dialog { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); max-width: min(860px, 94vw); width: 100%; padding: 16px; }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog img.grande { max-width: 100%; border-radius: 8px; }
pre.informe { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--plano); padding: 10px; border-radius: 8px; max-height: 45vh; overflow: auto; }
/* analizador */
.zona { border: 2px dashed var(--base); border-radius: 12px; padding: 28px; text-align: center; color: var(--tinta2); }
.zona.sobre { border-color: var(--acento); background: var(--s1-area); }
.barra { height: 8px; background: var(--rejilla); border-radius: 99px; overflow: hidden; } .barra > div { height: 100%; background: var(--s1); width: 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--rejilla); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bandas { display: grid; gap: 6px; } .banda { display: grid; grid-template-columns: 150px 1fr 90px; gap: 8px; align-items: center; font-size: 13px; }
.banda .pista { height: 14px; background: var(--rejilla); border-radius: 4px; } .banda .pista div { height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
/* gráfico (una serie: sin leyenda, el título la nombra) */
.grafico-caja { position: relative; } .grafico { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: var(--rejilla); stroke-width: 1; } .g-base { stroke: var(--base); stroke-width: 1; }
.g-eje { fill: var(--tenue); font-size: 11px; } .g-etiqueta { fill: var(--tinta2); font-size: 11px; }
.g-linea { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .g-area { fill: var(--s1-area); stroke: none; }
.g-punto { fill: var(--s1); stroke: var(--superficie); stroke-width: 2; } .g-cruz { stroke: var(--tenue); stroke-width: 1; }
.tooltip { position: absolute; pointer-events: none; background: var(--tinta); color: var(--superficie); font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.rollo { width: 100%; height: auto; background: var(--plano); border-radius: 8px; } .rollo-linea { stroke: var(--rejilla); } .rollo-nota { fill: var(--s1); }
/* chat */
.chat { display: grid; grid-template-columns: 220px 1fr; gap: 14px; } @media (max-width: 720px) { .chat { grid-template-columns: 1fr; } }
.convs { display: grid; gap: 4px; align-content: start; } .convs button { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convs button[aria-current="true"] { border-color: var(--acento); background: var(--s1-area); }
.mensajes { display: grid; gap: 12px; margin-bottom: 12px; }
.msj { max-width: 92%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); overflow-wrap: anywhere; }
.msj.user { justify-self: end; background: var(--s1-area); }
.msj p { margin: 0 0 8px; } .msj p:last-child { margin: 0; } .msj ul, .msj ol { margin: 4px 0 8px; padding-left: 22px; }
.msj code { background: var(--plano); padding: 1px 5px; border-radius: 4px; font-size: 13px; } .msj pre { background: var(--plano); padding: 10px; border-radius: 8px; overflow: auto; } .msj pre code { padding: 0; }
.cita { font-size: 12px; padding: 0 7px; border-radius: 99px; border-color: var(--s1); color: var(--s1); }
.adjuntos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.midi-w { margin: 8px 0; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--plano); display: grid; gap: 8px; }
.pensando::after { content: " ▍"; animation: parpadeo 1s steps(2) infinite; } @keyframes parpadeo { 50% { opacity: 0; } }
.estado-puente { font-size: 13px; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--base); }
.estado-puente.on { color: var(--bien); border-color: var(--bien); }
/* tablón */
.publicacion h3 { margin-top: 0; } .publicacion .texto { white-space: pre-wrap; }
.lista-sel { max-height: 50vh; overflow: auto; display: grid; gap: 4px; margin: 10px 0; } .lista-sel label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; } .lista-sel label:hover { background: var(--plano); } .lista-sel input { width: auto; }
code.codigo { display: block; padding: 10px; background: var(--plano); border-radius: 8px; word-break: break-all; user-select: all; }