/* Puente · app de la comunidad (mobile primero). */
.boot{min-height:100vh;display:grid;place-items:center;color:var(--ink-300)}
.wrap{max-width:560px;margin:0 auto;min-height:100vh;position:relative}
main.view{padding:var(--s5) var(--s4) calc(112px + env(safe-area-inset-bottom))}

/* Encabezado: banda azul con el borde inferior en arco, como un puente */
.top{background:var(--ink-800);color:#fff;padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s8);position:relative}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:28px;background:var(--bg);border-radius:50% 50% 0 0 / 100% 100% 0 0}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.hello{font-size:var(--fs-sm);color:var(--ink-100)}
.who{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:750;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
.sos{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-pill);background:var(--red);color:#fff;border:2px solid rgba(255,255,255,.25);font:inherit;font-weight:700;cursor:pointer;flex:none}
.sos:hover{background:var(--red-600)}
.top-sub{margin-top:var(--s3);color:var(--ink-100);font-size:var(--fs-sm);max-width:40ch}

/* Navegación inferior */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:20}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:64px;justify-content:center;border:0;background:none;color:var(--mut);font:inherit;font-size:13px;font-weight:700;cursor:pointer;position:relative}
.nav button .ic{width:24px;height:24px}
.nav button[aria-current="page"]{color:var(--pri)}
.nav button[aria-current="page"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--pri)}

/* Secciones */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin:var(--s2) 0 var(--s4)}
.sec-head p{margin:var(--s1) 0 0}
.sec-head h1{font-size:var(--fs-2xl)}
.stack>*+*{margin-top:var(--s3)}

/* Noticias: lista editorial con filete de color, no tarjetas idénticas */
.news{list-style:none;margin:0;padding:0}
.news li{padding:var(--s4) 0 var(--s4) var(--s4);border-bottom:1px solid var(--line);border-left:4px solid var(--sun);margin-bottom:var(--s3);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;padding-right:var(--s4)}
.news .meta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2);font-size:var(--fs-sm);color:var(--mut)}
.news h2{font-size:var(--fs-xl);margin-bottom:var(--s2)}
.news p{color:var(--text)}
.news a{display:inline-flex;gap:var(--s1);align-items:center;font-weight:700;min-height:40px}

/* Consultas */
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.q .meta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.q .body{white-space:pre-wrap}
.answer{margin-top:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--sun-soft);border-left:4px solid var(--sun)}
.answer b{display:flex;gap:var(--s2);align-items:center;font-size:var(--fs-sm);margin-bottom:var(--s1)}

/* Conversaciones */
.convs{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.convs li+li{border-top:1px solid var(--line)}
.conv{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:68px;padding:var(--s3) var(--s4);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.conv:hover{background:var(--surface-2)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--font-display);font-weight:750;background:var(--pri-soft);color:var(--pri)}
.avatar.grp{background:var(--sun-soft);color:var(--sun-800)}
.conv .txt{flex:1;min-width:0}.conv .txt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .txt span{font-size:var(--fs-sm);color:var(--mut)}

/* Sala de chat */
.room-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s2);padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s2) var(--s2);background:var(--surface);border-bottom:1px solid var(--line)}
.room-head h1{font-size:var(--fs-lg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-note{display:flex;gap:var(--s2);align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--mut);padding:var(--s3) var(--s4);text-align:center}
.msgs{padding:var(--s2) var(--s3) calc(96px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--s2)}
.bub{max-width:82%;padding:var(--s2) var(--s3);border-radius:18px;background:var(--surface);border:1px solid var(--line);align-self:flex-start;word-wrap:break-word}
.bub .by{font-size:13px;font-weight:700;color:var(--pri);margin-bottom:2px}
.bub .tm{font-size:12px;color:var(--mut);text-align:right;margin-top:2px}
.bub.me{align-self:flex-end;background:var(--pri);color:var(--on-pri);border-color:transparent;border-bottom-right-radius:6px}
.bub.me .tm{color:inherit;opacity:.8}
.bub.other{border-bottom-left-radius:6px}
.bub.off{background:var(--sun-soft);border-color:var(--sun-300)}
.composer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;display:flex;gap:var(--s2);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:20}
.composer .input{border-radius:var(--r-pill)}
.composer .btn{border-radius:var(--r-pill);padding:0 var(--s4)}

/* Onboarding */
.onb{min-height:100vh;display:flex;flex-direction:column;padding:calc(var(--s8) + env(safe-area-inset-top)) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom))}
.onb .mark{color:var(--sun);margin-bottom:var(--s4)}
.onb h1{margin-bottom:var(--s3)}
.onb .grow{flex:1}
.steps{display:flex;gap:6px;margin-bottom:var(--s6)}.steps span{height:4px;flex:1;border-radius:4px;background:var(--line)}.steps span.on{background:var(--pri)}
.langs{display:grid;gap:var(--s2);margin-top:var(--s5)}
.lang{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 var(--s4);border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);font:inherit;font-size:var(--fs-lg);font-weight:700;color:var(--text);cursor:pointer;text-align:left}
.lang[aria-pressed="true"]{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.lang small{font-weight:400;color:var(--mut);font-size:var(--fs-sm)}
.who-sees{list-style:none;margin:var(--s5) 0;padding:0;display:grid;gap:var(--s3)}
.who-sees li{display:flex;gap:var(--s3);padding:var(--s4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.who-sees .ic{width:28px;height:28px;color:var(--pri);margin-top:2px}
.who-sees b{display:block;font-family:var(--font-display);font-size:var(--fs-lg)}
.who-sees p{margin:2px 0 0;color:var(--mut)}

/* Ajustes */
.rows{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rows li+li{border-top:1px solid var(--line)}
.row-btn{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:60px;padding:0 var(--s4);border:0;background:none;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;text-decoration:none}
.row-btn:hover{background:var(--surface-2)}
.row-btn .ic:first-child{color:var(--pri)}
.row-btn .val{margin-left:auto;font-weight:400;color:var(--mut);font-size:var(--fs-sm)}
.row-btn.danger,.row-btn.danger .ic:first-child{color:var(--red)}
dl.data{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0}
dl.data dt{color:var(--mut)}dl.data dd{margin:0;font-weight:700}

/* Ayuda urgente */
.call{display:flex;align-items:center;gap:var(--s4);min-height:68px;padding:0 var(--s4);border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--line-strong);color:var(--text);text-decoration:none;margin-bottom:var(--s2)}
.call .n{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:800;color:var(--red);min-width:64px}
.call .ic{margin-left:auto;color:var(--red)}

h2.sub{font-size:var(--fs-lg);margin-bottom:var(--s3)}