/* Estilo «neuronas» (nov-2026): cerebro con neuronas de colores, letra Outfit, colores Cielo y oro.
   Solo cambia cómo se ve; los datos, el cifrado y los respaldos siguen igual. */
:root{
  --fondo:#F7F9FC; --tarjeta:#ffffff; --suave:#eef3f9; --texto:#183047; --texto2:#5b6f86; --borde:#e1e8f1;
  --tinta:#183047; --sobre-tinta:#ffffff; --rosa:#e07a93; --oro:#F2C14E; --cielo:#3A7BD5; --radio:18px;
}
@media (prefers-color-scheme: dark){
  :root{--fondo:#0f1a26; --tarjeta:#16243a; --suave:#1c2d45; --texto:#e6eef7; --texto2:#9fb2c8; --borde:#25384f;
    --tinta:#e6eef7; --sobre-tinta:#0f1a26; --rosa:#f0a3b4; --cielo:#7fb0ef}
}
html,body{font-family:Outfit,"Public Sans",system-ui,sans-serif;overflow-x:hidden;max-width:100%}
/* Que nada sea más ancho que la pantalla (si algo se sale, el celular encoge todo y luego se ve gigante) */
#vista,#vista *{overflow-wrap:break-word;min-width:0}
#vista img,#vista svg,#vista canvas{max-width:100%}
h1,h2,.saludo,.titulo-grande,.t1{font-weight:300}
h2{font-size:13px;letter-spacing:.3px}
button{border-radius:999px;border-color:var(--borde)}
button.principal{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta);font-weight:400}
input,select,textarea{border-radius:14px;border-color:var(--borde)}
.tarjeta{border-radius:var(--radio);border:0;box-shadow:0 1px 8px rgba(24,48,71,.07)}
.barra{background:var(--fondo)}
.palabra,.palabra-chica{font-weight:300}
.letra-grande #vista{zoom:1.12}
.oculto-n{display:none!important}

/* ---------- Barra de abajo ---------- */
.navbar{background:var(--tarjeta);border-top:1px solid var(--borde)}
.navbar button.on{color:var(--cielo)}
.navbar .fab{background:var(--tinta)!important;color:var(--sobre-tinta)!important;box-shadow:0 0 0 6px var(--fondo)}

/* ---------- Inicio: el cerebro con neuronas ---------- */
.n-red{display:block;width:100%;max-width:380px;margin:0 auto;overflow:visible}
.n-red .neu{cursor:pointer}
/* Sin el cuadro negro que el celular le pone a lo que tocas; con teclado sí se ve un anillo suave */
svg [tabindex],svg [role=button]{outline:none;-webkit-tap-highlight-color:transparent}
svg [tabindex]:focus-visible .nucleo,svg [tabindex]:focus-visible circle:nth-of-type(2){stroke:var(--texto);stroke-width:2}
.n-red .neu .nucleo{transition:opacity .4s}
.n-red.dormida .neu .nucleo,.n-red.dormida .neu .icn{opacity:.18}
.n-red.dormida .neu.brilla .nucleo,.n-red.dormida .neu.brilla .icn{opacity:1}
.n-red.dormida .chispa{opacity:.15}
.n-red.despierta .silueta path{stroke-dasharray:1;stroke-dashoffset:1;animation:n-dibuja 1.5s ease forwards}
.n-red.despierta .neu{opacity:0;animation:n-brota .5s cubic-bezier(.3,1.6,.5,1) forwards;transform-box:fill-box;transform-origin:center}
@keyframes n-dibuja{to{stroke-dashoffset:0}}
@keyframes n-brota{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.portada-inicio{padding-top:2vh}
.portada-inicio .cerebro{width:100%;height:auto;margin:0 0 4px}
.cerebro svg.n-red,#calma-cerebro svg.n-red{width:100%;height:auto;max-width:380px}
.buscando .portada-inicio .cerebro{transform:scale(.72);margin:-34px 0 -40px}
.buscando .n-frase,.buscando .n-susurro,.buscando .n-nombre{display:none}
.portada-inicio .cerebro .chispas,.portada-inicio .estrella{display:none}
.saludo{font-size:27px;margin:2px 0 0;color:var(--texto)}
.n-frase{font-size:14px;color:var(--texto2);margin:0 0 4px}
.n-susurro{font-size:12px;color:var(--texto2);text-align:center;margin:-6px 0 8px}
.buscador{background:var(--tarjeta);border:1px solid var(--borde);border-radius:999px}
.capsula{border-radius:999px;background:var(--tarjeta);border:0;box-shadow:0 1px 5px rgba(24,48,71,.1)}
.n-nombre{background:var(--tarjeta);border-radius:var(--radio);padding:14px 16px;box-shadow:0 1px 8px rgba(24,48,71,.08);margin:6px 0 10px}
.n-nombre p{margin:0 0 8px}

/* ---------- Zona: la neurona con sus ramitas ---------- */
.n-zona{display:block;width:100%;max-width:380px;margin:0 auto}
.n-rama{cursor:pointer}
.n-aparece{opacity:0;animation:n-en .45s forwards}
@keyframes n-en{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.n-dato{text-align:center;font-size:13px;color:var(--texto2);margin:0 0 8px}

/* ---------- Una memoria: sus cosas en un hilo, como un nervio ---------- */
body[data-vista=cajon] #lista{position:relative;padding-left:24px}
body[data-vista=cajon] #lista::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--z,#3A7BD5) 40%,transparent)}
body[data-vista=cajon] #lista .renglon{position:relative;border:0;background:transparent;box-shadow:none;padding-left:4px}
body[data-vista=cajon] #lista .renglon::before{content:"";position:absolute;left:-21px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--z);box-shadow:0 0 0 4px var(--fondo)}
body[data-vista=cajon] #lista .renglon:nth-child(even)::before{background:var(--fondo);border:2px solid var(--z);box-sizing:border-box}
body[data-vista=cajon] #lista .punto-z{display:none}
.renglon .s{color:var(--z)}

/* ---------- Ficha: la nube de lo que pensabas y el hilo de avances ---------- */
.n-nube{position:relative;background:var(--tarjeta);border-radius:30px;padding:14px 18px;margin:8px 0 26px;box-shadow:0 2px 10px rgba(24,48,71,.08);animation:n-flota 3.2s ease-in-out infinite}
.n-nube::before,.n-nube::after{content:"";position:absolute;background:var(--tarjeta);border-radius:50%;box-shadow:0 2px 6px rgba(24,48,71,.08)}
.n-nube::before{width:16px;height:16px;left:34px;bottom:-14px}
.n-nube::after{width:9px;height:9px;left:24px;bottom:-26px}
.n-nube small{display:block;font-size:12px;color:var(--texto2);margin-bottom:2px}
@keyframes n-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.n-hilo{position:relative;padding-left:26px;margin:10px 0}
.n-hilo::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:color-mix(in srgb,var(--cielo) 40%,transparent)}
.n-nudo{position:relative;padding:6px 0}
.n-nudo::before{content:"";position:absolute;left:-23px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--fondo);border:2px solid var(--cielo)}
.n-nudo.ultimo::before{background:var(--cielo);width:14px;height:14px;left:-25px;top:9px;animation:n-late 1.6s ease-in-out infinite}
.n-nudo small{display:block;font-size:12px;color:var(--texto2)}
@keyframes n-late{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.n-estados{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.n-estados button{min-height:34px;padding:4px 12px;font-size:13px}
.n-estados button.on{background:var(--tinta);color:var(--sobre-tinta);border-color:var(--tinta)}
.n-conste{display:block;width:100%;height:auto;margin:4px 0}

/* ---------- Capas: déjà vu, agregar avance, nombre ---------- */
.n-capa{position:fixed;inset:0;z-index:60;background:rgba(15,26,38,.5);display:flex;align-items:flex-end;justify-content:center}
.n-hoja{background:var(--tarjeta);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));animation:n-sube .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes n-sube{from{transform:translateY(100%)}to{transform:none}}
.n-hoja .agarre{width:40px;height:4px;border-radius:2px;background:var(--borde);margin:0 auto 12px}
.n-burbujas{display:flex;justify-content:space-around;margin-top:14px}
.n-burbuja{all:unset;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;cursor:pointer;width:90px;text-align:center}
.n-burbuja i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#fff;font-size:22px}

/* ---------- Me late ---------- */
.n-fotos{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}
.n-fotos img,.n-fotos .mas{flex:none;width:86px;height:86px;border-radius:14px;object-fit:cover;cursor:pointer}
.n-fotos .mas{border:2px dashed var(--borde);display:grid;place-items:center;color:var(--texto2);font-size:26px;background:none}
.n-votos{display:flex;justify-content:space-around;margin:10px 0}
.n-voto{all:unset;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;cursor:pointer;opacity:.55}
.n-voto.on{opacity:1}
.n-voto span{width:52px;height:52px;border-radius:50%;border:2.5px solid currentColor}
.n-voto.on span{background:color-mix(in srgb,currentColor 22%,transparent)}
.n-exp{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--borde)}
.n-exp i{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none}
.n-exp small{display:block;font-size:12px;color:var(--texto2)}

/* ---------- Andan de viaje y llavero ---------- */
.n-viaje{background:var(--tarjeta);border-radius:var(--radio);padding:8px 12px 12px;margin:10px 0;box-shadow:0 1px 8px rgba(24,48,71,.07)}
.n-viaje svg{display:block;width:100%;height:auto}

/* ---------- Ficha de emergencia ---------- */
.n-em{text-align:left}
.n-em .ecg{display:block;width:100%;height:auto}
.n-em .etq{font-size:11px;letter-spacing:2px;color:#FF8A3D}
.n-em .nom{font-size:26px;font-weight:300;margin:2px 0 10px}
.n-em .sangre{display:flex;gap:14px;align-items:center;margin:8px 0 12px}
.n-em .chips span{display:inline-block;font-size:14px;padding:7px 12px;border-radius:20px;margin:3px 4px 3px 0}
.n-em .alergia{background:#FFF1E5;color:#a94f12}
.n-em .med{background:#E5F7FA;color:#11697a}
.n-em .enf{background:#EEF2FB;color:#2c4d8a}
.n-em .llamar{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0}
.n-em .llamar a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:inherit;font-size:13px;text-align:center;max-width:100px}
.n-em .sub{font-size:12px;color:var(--texto2);margin:12px 0 4px}
@media (prefers-color-scheme: dark){.n-em .alergia{background:#3a2412;color:#ffc89c}.n-em .med{background:#0f3239;color:#9fe3ef}.n-em .enf{background:#1b2a46;color:#b3c9f2}}

/* ---------- Lluvia de ideas (diario) y siesta ---------- */
.n-gota{position:fixed;z-index:3;width:6px;height:6px;border-radius:50%;pointer-events:none}
.n-siesta{position:fixed;inset:0;z-index:80;background:var(--fondo);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:n-desva 1.6s ease forwards}
.n-siesta .z{font-size:22px;color:var(--texto2);animation:n-z 1.4s ease-in-out infinite}
@keyframes n-z{0%{transform:translate(0,0);opacity:0}40%{opacity:1}100%{transform:translate(14px,-30px);opacity:0}}
@keyframes n-desva{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){.n-nube,.n-nudo.ultimo::before,.n-aparece{animation:none;opacity:1}}