/* Nia App — marca: crema, caramelo y chocolate (los colores de Nia), salvia de acento.
   El color de la persona (azul Rolo, frambuesa Cami) pinta todo lo que es «tuyo». */
:root{
  --crema:#FBF4EA; --papel:#FFFDF9; --caramelo:#C8733A; --caramelo-osc:#9E5626;
  --choco:#2A211D; --choco-suave:#6E5A4E; --mante:#F6D9A8; --mante-suave:#FBEBD0;
  --salvia:#5E9A70; --salvia-suave:#E3F0E6; --rojo:#C8412F; --rojo-suave:#FBE3E0; --borde:#EFE3D3;
  --rolo:#3A78D6; --rolo-suave:#E6F0FC; --rolo-osc:#1F4F96;
  --cami:#D9577F; --cami-suave:#FCE7EE; --cami-osc:#9C2F52;
  --yo:var(--caramelo); --yo-suave:var(--mante-suave); --yo-osc:var(--caramelo-osc);
  --sombra:0 4px 18px rgba(42,33,29,.07);
  --radio:22px;
}
body.yo-rolo{--yo:var(--rolo);--yo-suave:var(--rolo-suave);--yo-osc:var(--rolo-osc)}
body.yo-cami{--yo:var(--cami);--yo-suave:var(--cami-suave);--yo-osc:var(--cami-osc)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--choco);font:16px/1.45 Nunito,system-ui,sans-serif;padding-bottom:96px}
a{color:var(--yo-osc)}
h1,h2,h3,.fredoka{font-family:Fredoka,Nunito,sans-serif;font-weight:600;letter-spacing:-.2px;margin:0}
h1{font-size:26px} h2{font-size:20px;margin:26px 0 10px} h3{font-size:17px}
.envoltura{max-width:560px;margin:0 auto;padding:0 16px}
.suave{color:var(--choco-suave)} .chico{font-size:13px} .centro{text-align:center}
.oculto{display:none!important}

/* barra superior */
.cabeza{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--choco)}
.marca img{width:40px;height:40px}
.marca b{font-family:Fredoka;font-weight:700;font-size:28px;letter-spacing:-1px;position:relative}
.yo{display:flex;align-items:center;gap:8px;text-decoration:none;background:var(--yo);color:#fff;border-radius:99px;padding:6px 14px 6px 6px;font-weight:800;font-size:14px}
.yo .ini{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-family:Fredoka}

/* tarjetas */
.tarjeta{background:var(--papel);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);margin:12px 0;border:1px solid var(--borde)}
.tarjeta.yo-fondo{background:var(--yo-suave);border-color:transparent}
.nia-dice{display:flex;gap:12px;align-items:flex-end;margin:10px 0 4px}
.nia-dice img{width:78px;height:78px;flex:none;filter:drop-shadow(0 4px 8px rgba(42,33,29,.15))}
.burbuja{position:relative;background:var(--papel);border-radius:20px 20px 20px 6px;padding:12px 14px;box-shadow:var(--sombra);border:1px solid var(--borde);font-size:15.5px}
.burbuja b{color:var(--yo-osc)}
.aviso{border-radius:18px;padding:12px 14px;margin:12px 0;display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--yo-suave);border:1.5px dashed var(--yo)}
.aviso.rojo{background:var(--rojo-suave);border-color:var(--rojo)}
.aviso.ok{background:var(--salvia-suave);border-color:var(--salvia);border-style:solid}
.flash{border-radius:14px;padding:10px 14px;margin:10px 0;font-weight:700}
.flash.ok{background:var(--salvia-suave);color:#2F5E3C}
.flash.error{background:var(--rojo-suave);color:#8A2A1E}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:99px;padding:10px 16px;font:800 15px Nunito,sans-serif;cursor:pointer;text-decoration:none;background:var(--yo);color:#fff;min-height:42px}
.boton:active{transform:scale(.97)}
.boton.claro{background:var(--papel);color:var(--choco);border:1.5px solid var(--borde)}
.boton.mini{padding:6px 12px;min-height:34px;font-size:13.5px}
.boton.salvia{background:var(--salvia)}
.boton.bloque{display:flex;width:100%}
.boton[disabled]{opacity:.5}
form.en-linea{display:inline}

/* chips de dueño */
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 10px;font-weight:800;font-size:12.5px;white-space:nowrap}
.chip-rolo{background:var(--rolo-suave);color:var(--rolo-osc)}
.chip-cami{background:var(--cami-suave);color:var(--cami-osc)}
.chip-casa{background:var(--mante);color:var(--choco)}
.chip-nadie{background:var(--rojo-suave);color:#8A2A1E}
.chip-hecha{background:var(--salvia-suave);color:#2F5E3C}
.chip-mia{outline:2px solid var(--yo)}

/* tareas */
.tareas{list-style:none;margin:0;padding:0}
.tarea{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--borde)}
.tarea:last-child{border-bottom:0}
.tarea .hora{font-family:Fredoka;font-weight:600;font-size:16px;color:var(--choco-suave)}
.tarea .que{min-width:0}
.tarea .que b{display:block;font-size:15.5px}
.tarea .que .chip{margin-top:3px}
.tarea.hecha .que b{text-decoration:line-through;text-decoration-color:rgba(42,33,29,.35);color:var(--choco-suave)}
.tarea.mia{background:linear-gradient(90deg,var(--yo-suave),transparent 70%);border-radius:14px;padding-left:8px;margin-left:-8px}
.tarea.ahora .hora{color:var(--yo)}
.tarea.nadie .hora{color:var(--rojo)}
.check{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--yo);background:var(--papel);color:var(--yo);font-size:20px;cursor:pointer;display:grid;place-items:center}
.check.lista{background:var(--salvia);border-color:var(--salvia);color:#fff}

/* registro rápido */
.rapidos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rapido{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--papel);border:1.5px solid var(--borde);border-radius:18px;padding:10px 4px;font:700 12.5px Nunito,sans-serif;cursor:pointer;color:var(--choco);width:100%}
.rapido span{font-size:24px}
.rapido:active{background:var(--yo-suave)}
.lista-simple{list-style:none;padding:0;margin:8px 0 0}
.lista-simple li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--borde);font-size:14.5px}

/* campos */
label{display:block;font-weight:700;font-size:14px;margin:10px 0 4px}
input,select,textarea{width:100%;font:16px Nunito,sans-serif;border:1.5px solid var(--borde);border-radius:14px;padding:10px 12px;background:#fff;color:var(--choco)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--yo);border-color:transparent}
.fila{display:flex;gap:8px;align-items:flex-end}
.fila>*{flex:1}
.fila .angosto{flex:0 0 auto}

/* semana */
.dias{display:grid;gap:10px}
.dia{background:var(--papel);border:1px solid var(--borde);border-radius:18px;padding:12px 14px}
.dia.hoy{border:2px solid var(--yo)}
.dia h3{display:flex;justify-content:space-between;align-items:center}
.mini-tareas{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.mini{font-size:12.5px;border-radius:10px;padding:3px 8px;font-weight:700}
.mini.hecha{opacity:.55;text-decoration:line-through}
.navsem{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}
.navsem .fredoka{font-size:17px}
.leyenda{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}

/* fotos */
.grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.grilla a{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;background:var(--mante-suave)}
.grilla img{width:100%;height:100%;object-fit:cover;display:block}
.grilla .quien{position:absolute;left:5px;bottom:5px;width:10px;height:10px;border-radius:50%;border:2px solid #fff}
.q-rolo{background:var(--rolo)} .q-cami{background:var(--cami)}
.pulgares{display:flex;gap:5px;margin-top:8px}
.pulgares img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.del-mes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.del-mes .marco{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--mante-suave);display:grid;place-items:center;text-align:center;padding:8px;border:2px dashed var(--caramelo);position:relative}
.del-mes .marco img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.del-mes .marco.lleno{border:0}
.del-mes .etiqueta{position:absolute;left:8px;top:8px;background:rgba(255,253,249,.92);border-radius:99px;padding:3px 10px;font-weight:800;font-size:12.5px;z-index:1}
.subir{position:relative;overflow:hidden}
.subir input{position:absolute;inset:0;opacity:0;cursor:pointer}
.progreso{font-weight:700;color:var(--yo-osc);margin-top:6px}
.foto-grande{width:100%;border-radius:18px;display:block}

/* plan */
details.bloque{background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);margin:10px 0;box-shadow:var(--sombra)}
details.bloque>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;gap:12px;align-items:center}
details.bloque>summary::-webkit-details-marker{display:none}
details.bloque>summary .emo{font-size:28px}
details.bloque>summary .t{flex:1}
details.bloque[open]>summary{border-bottom:1px solid var(--borde)}
details.bloque .cuerpo{padding:4px 16px 16px}
.pasos{padding-left:22px;margin:6px 0}
.pasos li{margin:5px 0}
.ojo{background:var(--mante-suave);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:14.5px}
.alarma{background:var(--rojo-suave);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:14.5px}
.compra{border:1px solid var(--borde);border-radius:16px;padding:10px 12px;margin:8px 0}
.compra .dos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.compra .op{background:#fff;border-radius:12px;padding:8px;font-size:13.5px;border:1px solid var(--borde)}
.compra .op.alt{background:var(--salvia-suave);border-color:transparent}
.video{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--choco);margin:8px 0}
.video img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.borrador{display:inline-block;background:var(--mante);border-radius:99px;padding:2px 10px;font-weight:800;font-size:12px}
.ia{background:linear-gradient(135deg,var(--yo-suave),var(--salvia-suave));border-radius:16px;padding:10px 12px;margin:10px 0;font-size:14px}
table.simple{width:100%;border-collapse:collapse;font-size:14px}
table.simple td,table.simple th{padding:7px 6px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}

/* barra inferior */
.barra{position:fixed;left:0;right:0;bottom:0;background:rgba(255,253,249,.96);backdrop-filter:blur(8px);border-top:1px solid var(--borde);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:10}
.barra nav{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}
.barra a{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:var(--choco-suave);font-weight:700;font-size:11px;padding:4px 0;border-radius:14px}
.barra a svg{width:24px;height:24px}
.barra a.activa{color:var(--yo-osc);background:var(--yo-suave)}

/* entrar */
.entrar{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center}
.entrar .carita{width:150px;height:150px}
.logo-grande{font-family:Fredoka;font-weight:700;font-size:56px;letter-spacing:-2px;line-height:1}
.personas{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px;margin:22px 0}
.persona{border:0;border-radius:24px;padding:18px 10px;font:700 20px Fredoka,sans-serif;color:#fff;cursor:pointer;text-decoration:none;display:block}
.persona.rolo{background:var(--rolo)} .persona.cami{background:var(--cami)}
.caja-entrar{width:100%;max-width:360px;text-align:left}

/* vista previa de WhatsApp */
.whatsapp{background:#EFE7DC;border-radius:var(--radio);padding:12px 10px;margin:8px 0}
.wa-msj{background:#fff;border-radius:4px 16px 16px 16px;padding:8px 11px 9px;margin:0 28px 10px 0;box-shadow:0 1px 1.5px rgba(0,0,0,.12);font-size:14.5px;max-width:92%}
.wa-plantilla{border-left:4px solid var(--salvia)}
.wa-condicional{opacity:.8;border:1.5px dashed var(--borde)}
.wa-etiqueta{font-size:11.5px;font-weight:800;color:var(--choco-suave);margin-bottom:3px}
.wa-boton{margin-top:8px;border-top:1px solid var(--borde);padding-top:7px;text-align:center;color:#1a8cd8;font-weight:700}

@media (min-width:600px){ .grilla{grid-template-columns:repeat(4,1fr)} }