:root { --bg:#0b1020; --panel:#121a30; --borde:#243052; --txt:#e8eefc; --mut:#8f9bb8;
        --acc:#5ec8ff; --sol:#ffd166; --warn:#e5694f; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--txt); }
button { font:inherit; color:inherit; cursor:pointer; }
header { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:10px 18px; min-height:60px; }
header > img { max-width:min(36vw,220px); height:auto; }
#aviso { font-size:12px; color:var(--sol); border:1px solid var(--sol); border-radius:999px; padding:2px 10px; cursor:help; }
.mut { color:var(--mut); } .peq { font-size:12px; margin:8px 0; }

main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; gap:12px; padding:0 18px 18px; min-height:calc(100vh - 60px); align-items:stretch; }
.ventana { display:flex; flex-direction:column; gap:8px; background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:12px; min-height:500px; min-width:0; }
.cab { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
h2 { margin:0; font-size:15px; display:flex; align-items:center; gap:8px; }
h2 b { width:22px; height:22px; border-radius:50%; background:var(--acc); color:#04121f; display:grid; place-items:center; font-size:12px; }

.fichas { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; min-width:0; max-width:100%; }
.ficha { display:flex; align-items:center; flex:0 1 auto; gap:6px; padding:4px 10px 4px 5px; background:var(--bg); border:2px solid var(--borde); border-radius:999px; font-size:13px; max-width:100%; white-space:nowrap; }
.ficha[aria-pressed=true] { border-color:var(--acc); }
.orbe { width:18px; height:18px; min-width:18px; flex:none; border-radius:50%; }
.orbe.luna { background:radial-gradient(circle at 35% 35%,#e5e5e5,#8a8f99); }
.orbe.marte { background:radial-gradient(circle at 35% 35%,#ff9a6a,#a8452a); }
.orbe.tierra { background:radial-gradient(circle at 35% 35%,#7fd0ff,#1d5fa8); }

.tabs { display:flex; gap:4px; background:var(--bg); padding:3px; border-radius:10px; }
.tabs button { flex:1; padding:6px 4px; border:0; border-radius:8px; background:none; font-size:13px; color:var(--mut); }
.tabs button[aria-pressed=true] { background:var(--borde); color:var(--txt); }
.migas { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:30px; }
.migas button { padding:4px 10px; border-radius:999px; background:none; border:1px solid var(--borde); font-size:13px; }
.migas button[aria-current=true] { background:var(--acc); border-color:var(--acc); color:#04121f; font-weight:600; }
.migas .sep { color:var(--mut); }

.buscador { position:relative; }
.buscador input { width:100%; padding:8px 10px; background:var(--bg); color:var(--txt); border:1px solid var(--borde); border-radius:8px; font:inherit; }
.lista { position:absolute; left:0; right:0; top:100%; z-index:1050; margin:4px 0 0; padding:4px; list-style:none; max-height:220px; overflow:auto; background:var(--panel); border:1px solid var(--borde); border-radius:8px; box-shadow:0 8px 24px #000a; }
.lista[hidden] { display:none; }
.lista li { padding:7px 10px; border-radius:6px; font-size:14px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; }
.lista li:hover, .lista li[aria-selected=true] { background:var(--borde); }
.lista small { color:var(--mut); }

.mapa-caja { position:relative; flex:1 0 300px; min-height:300px; min-width:0; border-radius:10px; overflow:hidden; border:1px solid var(--borde); isolation:isolate; }
.mapa { position:absolute; inset:0; background:#05080f; }
.sobre { position:absolute; inset:0; z-index:900; background:#0b1020ee; padding:18px; overflow:auto; font-size:14px; line-height:1.5; }
.sobre ul { padding-left:18px; }
.etiqueta { background:var(--sol); color:#2a2000; border-radius:4px; font-size:11px; padding:1px 6px; }

#tira { grid-column:1 / -1; display:flex; gap:10px; overflow-x:auto; min-width:0; max-width:100%; min-height:132px; padding-bottom:8px; }
.tarj { flex:none; width:210px; padding:12px; background:var(--panel); border:1px solid var(--borde); border-radius:12px; font-size:13px; text-align:left; }
.tarj.ref { border-color:var(--acc); }
.tarj[aria-pressed=true] { border-color:var(--sol); }
.tarj h4 { margin:0 0 2px; font-size:14px; }
.tarj .par { color:var(--sol); font-weight:700; font-size:18px; }
.tarj .tag { color:var(--acc); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.tarj dl { margin:6px 0 0; display:grid; grid-template-columns:auto auto; gap:2px 8px; color:var(--mut); }
.tarj dd { margin:0; color:var(--txt); text-align:right; }
.vacio { color:var(--mut); font-size:14px; align-self:center; }

#abrir-chat { position:fixed; right:18px; bottom:18px; z-index:1100; padding:10px 18px; border:0; border-radius:999px; background:var(--acc); color:#04121f; font-weight:600; box-shadow:0 4px 18px #0008; }
#asistente { position:fixed; right:18px; bottom:70px; z-index:1100; width:min(340px,calc(100vw - 36px)); max-height:70vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:14px; box-shadow:0 8px 30px #000a; }
#asistente[hidden] { display:none; }
.cab-chat { display:flex; justify-content:space-between; align-items:center; }
#cerrar-chat { background:none; border:0; font-size:22px; line-height:1; color:var(--mut); }
#chat { flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; margin:8px 0; min-height:90px; }
.msg { padding:8px 10px; border-radius:10px; font-size:13px; line-height:1.45; white-space:pre-wrap; }
.msg.bot { background:var(--bg); border:1px solid var(--borde); }
.msg.yo { background:#1b2b52; align-self:flex-end; }
#rapidas { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
#rapidas button { background:none; border:1px solid var(--borde); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--acc); }
#form-chat { display:flex; gap:6px; }
#pregunta { flex:1; padding:8px; background:var(--bg); color:var(--txt); border:1px solid var(--borde); border-radius:8px; font:inherit; }
#form-chat button { padding:8px 12px; border:0; border-radius:8px; background:var(--acc); color:#04121f; font-weight:600; }

#carga { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .5s; }
#carga.fuera { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s, visibility 0s .5s; }
.barra { width:min(260px,70vw); height:4px; background:var(--borde); border-radius:2px; overflow:hidden; }
#progreso { height:100%; width:0; background:var(--acc); transition:width .3s; }
#carga-texto { color:var(--mut); font-size:13px; margin:0; }

@media (max-width:900px) {
  main { grid-template-columns:minmax(0,1fr); grid-template-rows:none; height:auto; }
  .ventana { min-height:0; }
  .mapa-caja { height:320px; min-height:320px; flex:none; }
  .cab { gap:10px; }
}
@media (prefers-reduced-motion:reduce) { #carga,#progreso { transition:none; } }

#abrir-chat { display:flex; align-items:center; gap:8px; padding:6px 16px 6px 8px; }
.quien { display:flex; align-items:center; gap:8px; }
.msg.bot { display:block; }
.nota { color:var(--mut); font-size:12px; margin:6px 0 0; }

.idioma { margin-left:auto; display:flex; background:var(--panel); border:1px solid var(--borde); border-radius:999px; padding:2px; }
.idioma button { border:0; background:none; color:var(--mut); padding:4px 12px; border-radius:999px; font-size:13px; font-weight:600; }
.idioma button[aria-pressed=true] { background:var(--acc); color:#04121f; }

.sug { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.sug button { text-align:left; background:none; border:1px solid var(--borde); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--acc); }
.sug button:hover { border-color:var(--acc); }

.rev { display:inline-block; margin-top:6px; padding:1px 8px; border-radius:999px; background:var(--warn); color:#fff; font-size:11px; }
.ver { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.ver a { color:var(--acc); font-size:12px; cursor:pointer; text-decoration:underline; background:none; border:0; padding:0; }
.cat { color:var(--mut); font-size:11px; margin:0 0 4px; }
.tarj .rk { color:var(--sol); font-weight:700; font-size:18px; }
.tarj .rk small { color:var(--mut); font-weight:400; font-size:11px; margin-left:4px; }
#visor { border:1px solid var(--borde); border-radius:12px; background:var(--panel); padding:10px; max-width:min(92vw,1100px); }
#visor::backdrop { background:#000a; }
#visor img { display:block; max-width:100%; max-height:84vh; border-radius:8px; background:#fff; }
#cerrar-visor { position:absolute; top:6px; right:10px; z-index:2; background:#000a; color:#fff; border:0; border-radius:999px; width:30px; height:30px; font-size:20px; line-height:1; }

.tarj .rk small { display:block; margin:0; }
.nota.dif { color:var(--sol); }

.clima-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.clima-ctl label { margin:0; font-size:12px; color:var(--mut); }
.clima-ctl select { flex:1; min-width:160px; padding:6px 8px; background:var(--bg); color:var(--txt); border:1px solid var(--borde); border-radius:8px; font:inherit; font-size:13px; }
.clima-ctl .chk { display:flex; align-items:center; gap:6px; cursor:pointer; }
.leyenda { position:absolute; left:10px; bottom:28px; z-index:800; background:#0b1020e6; border:1px solid var(--borde); border-radius:8px; padding:6px 10px; font-size:12px; max-width:220px; }
.leyenda .barra-g { height:8px; border-radius:4px; margin:4px 0; background:linear-gradient(90deg, rgb(59,130,196), rgb(255,209,102), rgb(229,105,79)); }
.leyenda .extremos { display:flex; justify-content:space-between; color:var(--mut); }
.leyenda .sw { display:flex; align-items:center; gap:6px; margin:2px 0; }
.punto { display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; }
.punto.ok, .punto.verde { background:#4cc38a; } .punto.atencion, .punto.ambar { background:#ffd166; } .punto.dificil, .punto.rojo { background:#e5694f; } .punto.sin { background:#8f9bb8; }
.tarjw { flex:none; display:flex; flex-direction:column; gap:4px; }
.tarjw .tarj { width:210px; flex:1; }
.clima-btn { background:none; border:1px solid var(--borde); border-radius:8px; padding:4px 8px; font-size:12px; color:var(--acc); }
.clima-btn:hover { border-color:var(--acc); }
.tarj .cl { color:var(--mut); font-size:12px; margin:4px 0 0; display:flex; align-items:center; gap:6px; }
#clima-panel { border:1px solid var(--borde); border-radius:12px; background:var(--panel); color:var(--txt); padding:16px; width:min(94vw,760px); max-height:90vh; overflow:auto; }
#clima-panel::backdrop { background:#000a; }
#cerrar-clima { position:absolute; top:8px; right:12px; background:none; border:0; color:var(--mut); font-size:24px; line-height:1; }
#clima-cuerpo h3 { margin:0 0 2px; font-size:18px; }
#clima-cuerpo h4 { margin:16px 0 6px; font-size:13px; color:var(--acc); }
.chip-sem { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--borde); border-radius:999px; font-size:13px; margin:6px 0; }
.fact { width:100%; border-collapse:collapse; font-size:13px; }
.fact td { padding:5px 6px; border-bottom:1px solid var(--borde); vertical-align:middle; }
.fact td:nth-child(2) { text-align:right; white-space:nowrap; }
.fact td:last-child { white-space:nowrap; color:var(--mut); }
.graf { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.graf svg { width:100%; height:auto; background:var(--bg); border-radius:8px; }
.pie { color:var(--mut); font-size:12px; line-height:1.45; margin-top:12px; }
@media (max-width:600px) { .graf { grid-template-columns:1fr; } }

/* Chat: nada puede ensanchar el panel (palabras largas, URLs, respuestas largas) */
#asistente { overflow:hidden; max-height:min(70vh,560px); }
#chat { min-height:0; min-width:0; }
.msg { max-width:100%; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.msg.yo { max-width:88%; }
.sug button, #rapidas button { max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
#pregunta { min-width:0; }

/* Ficha de analogía */
.sello { display:inline-block; padding:1px 7px; border-radius:999px; font-size:10.5px; border:1px solid var(--borde); color:var(--mut); }
.sello.nuevo { border-color:var(--acc); color:var(--acc); }
.nota.uso { color:var(--txt); }
.fact.ana th { text-align:left; font-weight:600; font-size:12px; color:var(--mut); padding:5px 6px; border-bottom:1px solid var(--borde); }
.fact.ana td:last-child { white-space:normal; color:var(--txt); }
.fact.ana td:nth-child(2), .fact.ana td:nth-child(3) { text-align:right; white-space:nowrap; }
#clima-cuerpo > p:not([class]) { font-size:14px; margin:4px 0; line-height:1.45; }
#clima-cuerpo a { color:var(--acc); }
/* Hallazgos y lista corta */
#abrir-hallazgos { background:none; border:1px solid var(--acc); color:var(--acc); border-radius:999px; padding:3px 12px; font-size:12px; font-weight:600; }
#abrir-hallazgos:hover { background:var(--acc); color:#04121f; }
.fact.hall th { text-align:left; font-weight:600; font-size:12px; color:var(--mut); padding:5px 6px; border-bottom:1px solid var(--borde); }
.fact.hall td:nth-child(2) { text-align:left; } .fact.hall td:last-child { text-align:right; }
.tarjw { position:relative; }
.tarjw.eq .tarj { border-color:var(--sol); }
.corta { position:absolute; top:8px; right:8px; z-index:1; background:var(--sol); color:#2a2000; border-radius:4px; font-size:10.5px; font-weight:600; padding:1px 6px; pointer-events:none; }
/* Barrido automático */
.relieves { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.relieves figure { margin:0; text-align:center; font-size:13px; color:var(--mut); }
.relieves figcaption b { color:var(--txt); }
canvas.relieve { width:min(36vw,220px); height:min(36vw,220px); image-rendering:pixelated; border:1px solid var(--borde); border-radius:8px; display:block; margin-bottom:6px; }

/* Correcciones: aviso accesible y controles climáticos */
#aviso { background:transparent; font:inherit; font-size:12px; color:var(--sol); border:1px solid var(--sol); border-radius:999px; padding:2px 10px; cursor:pointer; }
#aviso-panel { background:var(--panel); border:1px solid var(--borde); color:var(--txt); border-radius:14px; padding:24px; width:min(92vw,620px); line-height:1.55; }
#aviso-panel::backdrop { background:#000a; }
#cerrar-aviso { position:absolute; right:12px; top:8px; border:0; background:none; font-size:24px; }
.clima-barrido-pendiente { color:var(--sol); font-size:12px; }
@media (max-width:600px) { .fichas { justify-content:flex-start; } .tarj { width:190px; } .tarjw .tarj { width:190px; } }
.ficha.fija { cursor:default; border-color:var(--acc); }
.fact.hall td:nth-child(3), .fact.hall td:nth-child(4) { white-space:nowrap; }

/* Ficha de analogía: botón de PDF y vista de impresión (solo la ficha, en claro) */
.pdf-btn { float:right; margin:0 34px 0 8px; }
.solo-imp { display:none; }
@media print {
  body.imp-ficha > *:not(#clima-panel) { display:none !important; }
  body.imp-ficha { background:#fff; color:#000; }
  body.imp-ficha #clima-panel { position:static; display:block; width:auto; max-width:none; max-height:none; overflow:visible; margin:0; padding:0; border:0; background:#fff; color:#000; }
  body.imp-ficha #cerrar-clima, body.imp-ficha .pdf-btn { display:none !important; }
  body.imp-ficha .solo-imp { display:block; color:#555; font-size:11px; margin:0 0 8px; }
  body.imp-ficha #clima-cuerpo h4 { color:#124; }
  body.imp-ficha .mut, body.imp-ficha .fact td:last-child { color:#444; }
  body.imp-ficha .fact td { border-bottom-color:#bbb; }
  body.imp-ficha a { color:#124; }
  body.imp-ficha .punto, body.imp-ficha .sello { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body.imp-ficha .fact { page-break-inside:avoid; }
}