/* lab.ia — tema oscuro inspirado en el lenguaje visual de Nothing:
   negro puro, matriz de puntos, monoespaciada y un único acento rojo. */
:root {
  --negro: #000;
  --fondo: #050505;
  --sup: #0e0e0e;
  --sup2: #161616;
  --linea: #232323;
  --linea2: #333;
  --texto: #f2f2f2;
  --tenue: #8d8d8d;
  --apagado: #5c5c5c;
  --rojo: #ff2d2d;
  --rojo-suave: rgba(255, 45, 45, .14);
  --verde: #5ee08a;
  --radio: 18px;
  --dot: 'Doto', 'Space Mono', monospace;
  --mono: 'Space Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sup-seg: env(safe-area-inset-top, 0px);
  --inf-seg: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--negro); color: var(--texto); font: 16px/1.55 var(--sans); }
body { overflow: hidden; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--texto); text-decoration-color: var(--rojo); text-underline-offset: 3px; }
code, pre { font-family: var(--mono); }
[hidden] { display: none !important; }
.tenue { color: var(--tenue); }
.error { color: var(--rojo); min-height: 1.4em; font-size: 14px; }
.dot { font-family: var(--dot); font-weight: 800; letter-spacing: .02em; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Logo: «LAB» en matriz de puntos con el punto rojo */
.logo { font-family: var(--dot); font-weight: 800; font-size: 22px; letter-spacing: .08em; line-height: 1; display: inline-flex; align-items: flex-end; gap: 3px; }
.logo i { width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); display: inline-block; margin-bottom: 2px; box-shadow: 0 0 12px var(--rojo); }
.logo.grande { font-size: 56px; }
.logo.grande i { width: 16px; height: 16px; margin-bottom: 6px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linea2); background: var(--sup); font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--tenue); }
.btn.primario { background: var(--texto); color: var(--negro); border-color: var(--texto); }
.btn.rojo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.chico { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; }
.icono-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--texto); fill: currentColor; }
.icono-btn:hover { background: var(--sup2); }

/* ── Acceso ─────────────────────────────────────────────── */
.acceso { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle, #1a1a1a 1px, transparent 1.2px) 0 0/18px 18px, var(--negro); }
.acceso-caja { width: min(380px, 100%); text-align: center; display: grid; gap: 14px; justify-items: center; }
.acceso h1 { margin: 0; font-size: 34px; }
#form-pin { display: grid; gap: 12px; width: 100%; }
#form-cuenta { display: grid; gap: 10px; width: 100%; }
#form-cuenta input { padding: 14px 16px; border-radius: var(--radio); border: 1px solid var(--linea2); background: var(--sup); font-size: 16px; }
.enlace-acceso { color: var(--tenue); font-size: 14px; padding: 6px; text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.clave-api { display: flex; gap: 8px; align-items: center; }
.clave-api code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 12px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea); font-size: 12.5px; }
.codigo-uso { white-space: pre-wrap; font: 12px/1.5 var(--mono); background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; color: #cfcfcf; overflow-x: auto; }
.donar { text-align: center; }
.donar .dir { font: 12px var(--mono); word-break: break-all; background: var(--sup); border: 1px dashed var(--linea2); border-radius: 12px; padding: 10px; margin: 8px 0; }
.firma { font: 12px var(--mono); color: var(--tenue); margin-top: 6px; }
#pin { text-align: center; font: 700 32px var(--mono); letter-spacing: .5em; padding: 14px 0 14px .5em; border-radius: var(--radio); border: 1px solid var(--linea2); background: var(--sup); }

/* ── Estructura ─────────────────────────────────────────── */
.app { display: flex; height: 100dvh; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; position: relative; }

.lateral { width: 300px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: calc(12px + var(--sup-seg)) 12px calc(12px + var(--inf-seg)); background: var(--fondo); border-right: 1px solid var(--linea); }
.lateral-cab { display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px; }
.marca { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); flex: 1; }
.nuevo { justify-content: flex-start; width: 100%; border-radius: 14px; }
.buscar { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--negro); font-size: 14px; }
.lista-conv { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.grupo-conv { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); padding: 14px 10px 6px; }
.item-conv { display: flex; align-items: center; gap: 6px; border-radius: 12px; }
.item-conv > button:first-child { flex: 1; min-width: 0; text-align: left; padding: 10px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfcfcf; border-radius: 12px; }
.item-conv:hover, .item-conv.activa { background: var(--sup2); }
.item-conv.activa > button:first-child { color: var(--texto); }
.item-conv .mas { opacity: 0; width: 34px; height: 34px; color: var(--tenue); }
.item-conv:hover .mas, .item-conv.activa .mas { opacity: 1; }
.lateral-pie { display: flex; gap: 6px; border-top: 1px solid var(--linea); padding-top: 10px; }
.enlace-pie { flex: 1; padding: 10px; border-radius: 12px; font-size: 14px; color: var(--tenue); text-align: left; }
.enlace-pie:hover { background: var(--sup2); color: var(--texto); }
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 20; backdrop-filter: blur(2px); }

.barra { display: flex; align-items: center; gap: 4px; padding: calc(6px + var(--sup-seg)) 8px 6px; border-bottom: 1px solid var(--linea); background: rgba(0,0,0,.86); backdrop-filter: blur(12px); z-index: 5; }
.titulo-skill { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; font-weight: 500; }
.titulo-skill:hover { background: var(--sup); }
#skill-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-icono { font-size: 18px; width: 22px; text-align: center; }
.flecha { color: var(--tenue); font-size: 12px; }
.estado-gw { width: 44px; height: 44px; display: grid; place-items: center; }
.estado-gw::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--apagado); }
.estado-gw.ok::after { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.estado-gw.mal::after { background: var(--rojo); box-shadow: 0 0 10px var(--rojo); animation: latir 1.4s infinite; }

/* ── Mensajes ───────────────────────────────────────────── */
.banner-demo { padding: 8px 14px; font-size: 13px; text-align: center; background: var(--rojo-suave); border-bottom: 1px solid rgba(255,45,45,.35); color: #ffd6d6; }
.banner-demo a { color: #fff; }
.mensajes { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 24px; scroll-behavior: smooth; }
.mensajes > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.msg { margin-bottom: 22px; animation: entrar .25s ease-out; }
.msg.user { display: flex; justify-content: flex-end; }
.burbuja { background: var(--sup2); border: 1px solid var(--linea); border-radius: 20px 20px 6px 20px; padding: 10px 15px; max-width: 86%; white-space: pre-wrap; word-wrap: break-word; }
.msg.assistant .cuerpo { word-wrap: break-word; }
.etiqueta-msg { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); margin-bottom: 8px; }
.etiqueta-msg .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); }
.acciones-msg { display: flex; gap: 2px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.acciones-msg button { font: 12px var(--mono); color: var(--tenue); padding: 6px 10px; border-radius: 999px; }
.acciones-msg button:hover { background: var(--sup2); color: var(--texto); }
.acciones-msg .modelo-usado { font: 11px var(--mono); color: var(--apagado); margin-left: auto; padding: 0 6px; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.error-msg { border: 1px solid rgba(255,45,45,.4); background: var(--rojo-suave); border-radius: 14px; padding: 12px 14px; font-size: 14px; }

/* Markdown */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { line-height: 1.25; margin: 1.3em 0 .5em; font-weight: 600; }
.md h1 { font-size: 1.35em; } .md h2 { font-size: 1.2em; } .md h3 { font-size: 1.05em; } .md h4 { font-size: 1em; color: var(--tenue); }
.md p { margin: .7em 0; }
.md ul, .md ol { padding-left: 1.4em; margin: .6em 0; }
.md li { margin: .25em 0; }
.md li::marker { color: var(--rojo); }
.md blockquote { margin: .8em 0; padding: .2em 1em; border-left: 3px solid var(--rojo); color: #cfcfcf; background: var(--sup); border-radius: 0 10px 10px 0; }
.md hr { border: 0; height: 1px; background: radial-gradient(circle, var(--linea2) 1px, transparent 1.2px) 0 0/8px 1px; margin: 1.4em 0; }
.md code { background: var(--sup2); border: 1px solid var(--linea); padding: .08em .35em; border-radius: 6px; font-size: .88em; }
.md pre { position: relative; background: #0a0a0a; border: 1px solid var(--linea); border-radius: 14px; padding: 36px 14px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.md pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.md pre .lenguaje { position: absolute; top: 8px; left: 14px; font: 11px var(--mono); color: var(--apagado); text-transform: uppercase; letter-spacing: .1em; }
.md pre .copiar { position: absolute; top: 4px; right: 6px; font: 11px var(--mono); color: var(--tenue); padding: 4px 8px; border-radius: 8px; }
.md pre .copiar:hover { background: var(--sup2); }
.tabla { overflow-x: auto; margin: .8em 0; border: 1px solid var(--linea); border-radius: 12px; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { padding: 8px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.md th { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); background: var(--sup); }
.md tr:last-child td { border-bottom: 0; }
.cita { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .3em; margin: 0 1px; border-radius: 6px; background: var(--rojo-suave); color: var(--rojo); font: 700 .7em var(--mono); text-decoration: none; vertical-align: .25em; }
.cursor::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-left: 4px; animation: latir 1s infinite; vertical-align: middle; }

/* Estado (buscando / pensando) con matriz de puntos animada */
.estado { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 14px; margin: 4px 0 12px; }
.matriz { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; flex: none; }
.matriz i { width: 5px; height: 5px; border-radius: 50%; background: var(--texto); opacity: .15; animation: matriz 1.2s infinite; }
.matriz i:nth-child(1) { animation-delay: 0s } .matriz i:nth-child(2) { animation-delay: .1s } .matriz i:nth-child(3) { animation-delay: .2s }
.matriz i:nth-child(4) { animation-delay: .7s } .matriz i:nth-child(5) { animation-delay: .4s; background: var(--rojo) } .matriz i:nth-child(6) { animation-delay: .3s }
.matriz i:nth-child(7) { animation-delay: .6s } .matriz i:nth-child(8) { animation-delay: .5s } .matriz i:nth-child(9) { animation-delay: .4s }

/* Razonamiento y fuentes */
details.razon, details.fuentes { border: 1px solid var(--linea); border-radius: 14px; margin: 0 0 12px; background: var(--fondo); }
details > summary { list-style: none; cursor: pointer; padding: 10px 14px; font: 12px var(--mono); letter-spacing: .06em; color: var(--tenue); display: flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; margin-left: auto; font-size: 16px; }
details[open] > summary::after { content: '−'; }
.razon-texto { padding: 0 14px 12px; color: var(--tenue); font-size: 13px; white-space: pre-wrap; max-height: 260px; overflow-y: auto; }
.lista-fuentes { display: grid; gap: 8px; padding: 0 10px 10px; }
.fuente { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--sup); text-decoration: none; border: 1px solid transparent; }
.fuente:hover, .fuente.resaltada { border-color: var(--rojo); }
.fuente .n { grid-row: span 4; font: 700 12px var(--mono); color: var(--rojo); padding-top: 2px; }
.fuente .t { font-size: 14px; font-weight: 500; line-height: 1.35; }
.fuente .d { font: 11px var(--mono); color: var(--tenue); }
.fuente .r { font-size: 12.5px; color: #9d9d9d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fallos { font: 11px var(--mono); color: var(--apagado); padding: 0 14px 10px; }
.fuente .t { color: var(--texto); text-decoration: none; }
.fuente .t:hover { text-decoration: underline; text-decoration-color: var(--rojo); }
.fuente .d b { color: var(--verde); font-weight: 400; }
.rev { grid-column: 2; display: flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--tenue); margin-top: 2px; cursor: pointer; }
.rev input { width: 16px; height: 16px; accent-color: var(--verde); }
.ins { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: 700 10px var(--mono); vertical-align: 1px; margin-left: 4px; }
.ins.ok { background: rgba(94,224,138,.16); color: var(--verde); }
.ins.medio { background: rgba(255,200,0,.14); color: #ffc800; }
.ins.mal { background: var(--rojo-suave); color: var(--rojo); }
.consultas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.consultas-tit { width: 100%; font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.chip-consulta { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--linea2); font: 12px var(--mono); color: var(--texto); text-decoration: none; }
.chip-consulta:hover { border-color: var(--rojo); }
details.verif { border: 1px solid var(--linea); border-radius: 14px; margin: 0 0 12px; background: var(--fondo); }
.verif-cuerpo { padding: 0 14px 12px; font-size: 13.5px; }
.verif-tit { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); margin: 10px 0 4px; }
.verif-lista { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.verif-lista li::marker { color: var(--apagado); }
.ok { color: var(--verde); } .mal { color: var(--rojo); } .medio { color: #ffc800; }
.v-verificada { color: var(--verde); } .v-parcial { color: #ffc800; } .v-revisar { color: var(--rojo); }

/* Imágenes */
.imagen-gen { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); background: radial-gradient(circle, #1c1c1c 1px, transparent 1.2px) 0 0/12px 12px, var(--sup); max-width: 520px; }
.imagen-gen img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.imagen-gen.cargando { aspect-ratio: 1; display: grid; place-items: center; }
.prompt-usado { font: 12px var(--mono); color: var(--apagado); margin-top: 8px; }

/* Pantalla de inicio */
.inicio { padding-top: 6vh; }
.saludo { font-family: var(--dot); font-weight: 800; font-size: clamp(40px, 12vw, 68px); line-height: .95; margin: 0 0 10px; }
.saludo span { color: var(--rojo); }
.sub-inicio { color: var(--tenue); margin: 0 0 26px; }
.titulo-seccion { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin: 22px 0 10px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tarjeta { text-align: left; padding: 14px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--fondo); display: grid; gap: 6px; align-content: start; min-height: 112px; transition: border-color .15s, transform .15s; }
.tarjeta:hover { border-color: var(--linea2); }
.tarjeta:active { transform: scale(.98); }
.tarjeta .ic { font-size: 22px; }
.tarjeta .nm { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.tarjeta .ds { font-size: 12px; color: var(--tenue); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta .tag { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); }
.sugerencias { display: flex; flex-direction: column; gap: 8px; }
.sugerencia { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--linea2); color: #cfcfcf; font-size: 14px; }
.sugerencia:hover { border-style: solid; color: var(--texto); }

/* ── Redactor ───────────────────────────────────────────── */
.redactor { padding: 8px 12px calc(10px + var(--inf-seg)); background: linear-gradient(to top, var(--negro) 70%, transparent); }
.redactor > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.modos { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linea); width: fit-content; margin-bottom: 8px; }
.modo { padding: 7px 14px; border-radius: 999px; font: 12px var(--mono); letter-spacing: .06em; color: var(--tenue); }
.modo.activo { background: var(--texto); color: var(--negro); font-weight: 700; }
.modo[data-modo="investigar"].activo { background: var(--rojo); color: #fff; }
.caja-msg { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 26px; border: 1px solid var(--linea2); background: var(--sup); transition: border-color .15s; }
.caja-msg:focus-within { border-color: var(--tenue); }
#texto { flex: 1; resize: none; border: 0; outline: 0; background: transparent; padding: 10px 0; max-height: 40vh; line-height: 1.45; }
#texto::placeholder { color: var(--apagado); }
.enviar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--texto); color: var(--negro); display: grid; place-items: center; transition: transform .1s; }
.enviar:active { transform: scale(.92); }
.enviar.detener { background: var(--rojo); color: #fff; }
.chips { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); font: 12px var(--mono); color: var(--tenue); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.chip:hover { color: var(--texto); border-color: var(--linea2); }
.chip.activo { color: var(--texto); border-color: var(--rojo); background: var(--rojo-suave); }
.recomendacion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--linea2); border-radius: 16px; font-size: 12.5px; animation: entrar .2s; }
.rec-tema { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rojo); }
.rec-motivo { color: var(--tenue); flex-basis: 100%; order: 1; font-size: 12px; }
.recomendacion .chip { order: 2; }
.rec-combinar { color: var(--texto); border-color: var(--rojo); }
.rec-cerrar { margin-left: auto; padding: 6px 10px; }
details.combinacion { border: 1px solid var(--linea); border-radius: 14px; margin: 0 0 12px; background: var(--fondo); }
.pestanas { display: flex; gap: 4px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); font: 12px var(--mono); color: var(--tenue); }
.pestana.activa { color: var(--texto); border-color: var(--linea2); background: var(--sup2); }
.pestana .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); }
.pestana .pt.ok { background: var(--verde); } .pestana .pt.mal { background: var(--rojo); } .pestana .pt.esc { background: var(--texto); animation: latir 1s infinite; }
.panel-modelo { padding: 4px 14px 14px; max-height: 50dvh; overflow-y: auto; font-size: 14.5px; border-top: 1px dashed var(--linea); }

/* ── Hoja inferior ──────────────────────────────────────── */
.hoja-velo { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 40; backdrop-filter: blur(3px); animation: aparecer .2s; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88dvh; display: flex; flex-direction: column; background: var(--fondo); border: 1px solid var(--linea2); border-bottom: 0; border-radius: 26px 26px 0 0; padding-bottom: var(--inf-seg); animation: subir .26s cubic-bezier(.2,.9,.3,1); max-width: 720px; margin: 0 auto; }
.hoja.completa { height: 92dvh; }
.hoja-asa { width: 40px; height: 4px; border-radius: 4px; background: var(--linea2); margin: 10px auto 0; }
.hoja-cab { display: flex; align-items: center; padding: 6px 8px 6px 20px; }
.hoja-cab h2 { flex: 1; margin: 0; font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hoja-cuerpo { overflow-y: auto; padding: 4px 16px 20px; }
.opcion { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 14px; }
.opcion:hover { background: var(--sup2); }
.opcion.activa { background: var(--sup2); outline: 1px solid var(--linea2); }
.opcion .ic { width: 28px; font-size: 20px; text-align: center; flex: none; }
.opcion .txt { flex: 1; min-width: 0; }
.opcion .nm { display: block; font-weight: 500; }
.opcion .ds { display: block; font-size: 12.5px; color: var(--tenue); line-height: 1.35; }
.opcion .marca-ok { color: var(--rojo); font-weight: 700; }
.casilla { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.casilla:hover { background: var(--sup2); }
.casilla input { width: 20px; height: 20px; accent-color: var(--rojo); }
.casilla small { display: block; color: var(--tenue); font-size: 12px; }
.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.campo { display: grid; gap: 6px; margin: 12px 0; }
.campo > span { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.campo input, .campo textarea, .campo select { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea2); background: var(--negro); }
.campo textarea { min-height: 220px; resize: vertical; font: 13px/1.5 var(--mono); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel { border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; margin: 12px 0; background: var(--negro); }
.panel h3 { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.direccion { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--linea); font-size: 14px; }
.direccion:last-child { border-bottom: 0; }
.direccion code { flex: 1; font-size: 13px; word-break: break-all; }
.direccion small { font: 10px var(--mono); color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; }
.pin-grande { font: 700 34px var(--mono); letter-spacing: .3em; color: var(--rojo); }
.qr { background: #fff; padding: 12px; border-radius: 16px; width: fit-content; margin: 10px auto; }
.qr img, .qr svg { display: block; width: 180px; height: 180px; image-rendering: pixelated; }
.instrucciones-skill { white-space: pre-wrap; font: 12.5px/1.5 var(--mono); color: #bdbdbd; background: var(--negro); border: 1px solid var(--linea); border-radius: 14px; padding: 12px; max-height: 40dvh; overflow-y: auto; }
.cat-skill { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin: 18px 4px 4px; }
.tag-modo { font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); border: 1px solid var(--linea2); border-radius: 999px; padding: 2px 8px; flex: none; }
.tag-modo.investigar { color: var(--rojo); border-color: rgba(255,45,45,.4); }

/* Visor de imagen y avisos */
.visor { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.94); display: grid; place-items: center; padding: 16px; animation: aparecer .2s; }
.visor img { max-width: 100%; max-height: 80dvh; border-radius: 12px; }
.visor-acciones { display: flex; gap: 10px; margin-top: 14px; justify-content: center; }
.aviso { position: fixed; left: 50%; bottom: calc(120px + var(--inf-seg)); transform: translateX(-50%); z-index: 70; background: var(--texto); color: var(--negro); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; animation: aparecer .2s; max-width: 90vw; text-align: center; }

@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(100%); } }
@keyframes latir { 50% { opacity: .35; } }
@keyframes matriz { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }

/* ── Móvil ──────────────────────────────────────────────── */
@media (max-width: 899px) {
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(320px, 86vw); transform: translateX(-102%); transition: transform .25s cubic-bezier(.2,.9,.3,1); }
  .lateral.abierta { transform: none; }
}
@media (min-width: 900px) {
  .solo-movil { display: none !important; }
  .velo { display: none !important; }
  .mensajes { padding: 28px 32px; }
  .hoja { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 26px; border-bottom: 1px solid var(--linea2); animation: aparecer .2s; }
  .hoja.completa { height: 86dvh; }
  .hoja-asa { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }