/* SHARED ORIGIN: solojuntos/src/static/app/index.html (body background
   gradient) — see teamdocs/knowledge/REGISTRO_CODIGO_COMPARTIDO.md.
   The gradient below is the shared Solo-family background (decided
   2026-08-02, Ramón). --fuego/--oro are SoloInsulto's OWN personality
   accent on top of it, per
   teamdocs/knowledge/DISENO_PERSONALIDAD_FAMILIA_SOLO.md — used
   selectively (buttons, chips, highlights, some titles), not as a
   full-palette swap.

   Merged from two previously-duplicated inline <style> blocks (app
   shell + landing page). Where the two disagreed on the same class
   name, the landing-specific version is scoped under `.wrap` (its own
   existing container, present only on the landing page) so both pages
   keep their original appearance untouched except the shared
   background. */
:root{
  --fondo-familia-1:#1a1040;
  --fondo-familia-2:#0f0a26;
  --fondo-familia-3:#0a0e1a;
  --fondo:#1a1210;
  --fondo-alto:#241a17;
  --tinta:#f2e8e4;
  --tinta-suave:#c9b8b2;
  --tinta-tenue:#8a7570;
  --fuego:#ff5a3c;
  --fuego-hueco:rgba(255,90,60,.12);
  --oro:#f5c542;
  --linea:rgba(255,255,255,.09);
  --vidrio:rgba(255,255,255,.035);
  --error:#ff6b6b;
  --exito:#6bcf8f;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
body{
  background:radial-gradient(120% 120% at 50% 0%,var(--fondo-familia-1) 0%,var(--fondo-familia-2) 45%,var(--fondo-familia-3) 100%);
  background-attachment:fixed;
  color:var(--tinta);
  font-family:var(--sans);
  min-height:100vh;
}
body.app-chrome{padding-bottom:64px}
main h1,main h2,main h3{font-weight:700;letter-spacing:-.01em}
a{color:var(--fuego)}
.wordmark{font-weight:800;color:var(--fuego);text-decoration:none;font-size:1.2rem}
.wrap{max-width:720px;margin:0 auto;padding:0 20px;line-height:1.6}
.wrap .wordmark{font-size:1.6rem}

/* App shell chrome */
header.app-header{
  display:none;
  align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--linea);
  position:sticky;top:0;background:var(--fondo);z-index:10;
}
body.app-chrome header.app-header{display:flex}
.saldo-pill{
  font-family:var(--mono);font-size:.85rem;
  background:var(--vidrio);border:1px solid var(--linea);
  border-radius:999px;padding:4px 12px;color:var(--oro);
}
main{max-width:640px;margin:0 auto;padding:20px 16px}
.view{display:none}
.view.active{display:block}
nav.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--fondo);border-top:1px solid var(--linea);
  justify-content:space-around;padding:8px 0;z-index:10;
}
body.app-chrome nav.bottom-nav{display:flex}
nav.bottom-nav button{
  background:none;border:none;color:var(--tinta-tenue);
  font-size:.72rem;padding:4px 10px;font-weight:600;
}
nav.bottom-nav button.active{color:var(--fuego)}
.pwa-banner{
  position:fixed;left:12px;right:12px;bottom:76px;z-index:20;
  background:var(--fondo-alto);border:1px solid var(--linea);
  border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.pwa-banner p{margin:0;flex:1;font-size:.85rem}

/* Forms + cards, shared everywhere */
.card{
  background:var(--vidrio);border:1px solid var(--linea);
  border-radius:14px;padding:20px;margin-bottom:16px;
}
label{display:block;margin:14px 0 6px;font-size:.9rem;color:var(--tinta-suave)}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%;padding:11px 13px;border-radius:10px;
  border:1px solid var(--linea);background:var(--fondo);
  color:var(--tinta);font-size:1rem;font-family:inherit;
}
textarea{resize:vertical;min-height:80px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--fuego);outline-offset:1px}

/* Password reveal, docked inside the field instead of a separate button
   beside it. SHARED ORIGIN: solojuntos/src/static/app/js/auth.js
   wirePasswordReveal() + its .pw-wrap/.pw-ver CSS — see
   teamdocs/knowledge/REGISTRO_CODIGO_COMPARTIDO.md. */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:4.2rem}
.pw-ver{
  position:absolute;right:.45rem;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--tinta-tenue);font:inherit;
  font-size:.78rem;cursor:pointer;padding:.3rem .45rem;line-height:1;
}
.pw-ver:active{color:var(--fuego)}
button, .btn{
  cursor:pointer;border:none;border-radius:10px;
  padding:12px 18px;font-size:1rem;font-weight:600;
  font-family:inherit;
}
.wrap .btn{display:inline-block;padding:13px 26px;font-weight:700;text-decoration:none}
button.primary, .btn.primary{background:var(--fuego);color:#1a0e08}
button.secondary, .btn.secondary{background:var(--vidrio);color:var(--tinta);border:1px solid var(--linea)}
button.ghost, .btn.ghost{background:transparent;color:var(--tinta-suave);text-decoration:underline;padding:6px 0}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.error-box{
  background:rgba(255,107,107,.12);border:1px solid var(--error);
  color:var(--error);border-radius:10px;padding:10px 14px;margin-top:12px;font-size:.9rem;
}
.wrap .error-box{background:none;border:none;border-radius:0;margin-top:0;padding:16px 0}
.empty-box{color:var(--tinta-tenue);padding:16px 0;text-align:center;font-size:.9rem}
.sugerencias{list-style:none;padding:0;margin:8px 0 0}
.sugerencias li{padding:6px 0;border-bottom:1px solid var(--linea);font-size:.9rem;color:var(--tinta-suave)}
.chip{
  display:inline-block;background:var(--fuego-hueco);color:var(--fuego);
  border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:700;
}
.mono{font-family:var(--mono)}
.uid-box{
  font-family:var(--mono);font-size:.85rem;background:var(--fondo);
  border:1px dashed var(--linea);border-radius:8px;padding:8px 10px;
  word-break:break-all;color:var(--tinta-suave);
}
.cobertura{font-size:.75rem;color:var(--tinta-tenue);margin-top:4px}

/* Rankings, shared between the app view and the landing widget */
.rank-item{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--linea);
}
.rank-item .puesto{
  font-family:var(--mono);color:var(--oro);font-weight:700;width:28px;text-align:right;
}
.rank-item .nombre{flex:1;font-weight:600}
.rank-item .valor{font-family:var(--mono);color:var(--tinta-suave)}

/* Insultos + scoring (app only) */
.insulto-card{border-bottom:1px solid var(--linea);padding:14px 0}
.insulto-texto{font-size:1.05rem;line-height:1.5;margin:0 0 8px}
.insulto-meta{display:flex;gap:14px;font-size:.8rem;color:var(--tinta-tenue);align-items:center}
.score-row{display:flex;gap:6px;margin-top:8px}
.score-btn{
  width:36px;height:36px;border-radius:8px;background:var(--vidrio);
  border:1px solid var(--linea);color:var(--tinta-suave);font-weight:700;
}
.score-btn.selected{background:var(--fuego);color:#1a0e08;border-color:var(--fuego)}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab-btn{background:var(--vidrio);border:1px solid var(--linea);color:var(--tinta-suave);border-radius:999px;padding:8px 14px;font-size:.85rem}
.tab-btn.active{background:var(--fuego);color:#1a0e08;border-color:var(--fuego)}

/* Login/register toggle — a segmented two-way switch (quiet inactive
   text, a tinted-glass active state), not the pill-button .tabs/.tab-btn
   above (kept as-is, shared with the 5-way ranking selector, which is
   a different shape of control). SHARED ORIGIN: solojuntos/src/static/
   app/index.html .auth-tabs/.auth-tab — see REGISTRO_CODIGO_COMPARTIDO.md.
   Color swapped to SoloInsulto's own --fuego accent, not SoloJuntos's gold. */
.auth-tabs{display:flex;gap:8px;margin-bottom:20px}
.auth-tab{
  flex:1;text-align:center;padding:10px;border-radius:10px;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--tinta-tenue);
  border:1px solid transparent;background:none;
}
.auth-tab.active{color:var(--fuego);border-color:rgba(255,90,60,.35);background:var(--fuego-hueco)}
.flag-link{color:var(--tinta-tenue);font-size:.78rem;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}

/* Registration depth: honeypot (visually hidden, still bot-fillable —
   never display:none/hidden, some crawlers skip those), password
   strength + username-availability inline feedback */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fuerza-debil{color:var(--error)}
.fuerza-media{color:var(--oro)}
.fuerza-fuerte{color:var(--exito)}
.disponible{color:var(--exito)}
.no-disponible{color:var(--error)}

/* QR scan modal (scanner.js) + QR display frame (conexiones.js, cont 11).
   SHARED ORIGIN: solojuntos/src/static/app/index.html's .qr-modal/
   .qr-viewport/.qr-quiet-zone inline <style> block — see
   teamdocs/knowledge/REGISTRO_CODIGO_COMPARTIDO.md. Structural rules only;
   card chrome/button/input styling reused from .card/button.secondary/
   input[type=text] above rather than re-declared. */
.qr-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.qr-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.82)}
.qr-modal-card{position:relative;z-index:1;max-width:360px;width:100%}
.qr-viewport{position:relative;width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#000;margin-bottom:14px}
.qr-viewport video{width:100%;height:100%;object-fit:cover}
.qr-quiet-zone{display:inline-block;background:#fff;padding:20px;border-radius:10px;line-height:0}
.qr-quiet-zone canvas{display:block}

/* Landing page only */
header.hero{padding:64px 0 40px;text-align:center}
h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:20px 0 12px}
.pitch{font-size:1.1rem;color:var(--tinta-suave);max-width:560px;margin:0 auto}
.pitch strong{color:var(--tinta)}
.cta-row{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
section{padding:36px 0;border-top:1px solid var(--linea)}
h2{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.definicion{
  font-style:italic;color:var(--tinta-suave);border-left:3px solid var(--fuego);
  padding-left:16px;margin:16px 0;
}
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media (max-width:520px){.contraste{grid-template-columns:1fr}}
.contraste .card{background:var(--vidrio);border:1px solid var(--linea);border-radius:12px;padding:18px;margin-bottom:0}
.contraste .card h3{margin:0 0 8px;font-size:.95rem;color:var(--tinta-tenue);text-transform:uppercase;letter-spacing:.04em}
.contraste .card.malo{border-color:rgba(255,107,107,.25)}
.contraste .card.bueno{border-color:var(--fuego)}
footer{padding:32px 0;text-align:center;color:var(--tinta-tenue);font-size:.85rem}
footer a{color:var(--tinta-suave)}