:root{
  /* Superficies: de la más al fondo a la más cercana */
  --tinta:#F7F4EF;
  --superficie:#FFFDFA;
  --superficie-alta:#EFEAE1;
  --linea:#E0D8CC;
  /* Texto */
  --hueso:#332F3A;
  --hueso-tenue:#665F6C;
  /* Acentos en pastel: para rellenos (perla, botón, barra, malla) */
  --ambar:#F0C674;
  --salvia:#A8C9BF;
  --terracota:#E6A79E;
  /* El mismo tono, con cuerpo suficiente para leerse como texto sobre
     fondo claro. Un pastel no contrasta lo bastante en 12px. */
  --ambar-hondo:#8A6420;
  --salvia-hondo:#3F6F63;
  --terracota-hondo:#9E4438;
  --display:'Fraunces', Georgia, serif;
  --texto:'Karla', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--tinta);color:var(--hueso);font-family:var(--texto);
  font-size:16px;line-height:1.5;overscroll-behavior-y:none;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

/* ---------- Encabezado ---------- */
.cabecera{padding:calc(env(safe-area-inset-top) + 22px) 20px 12px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-tenue)}
.titulo{font-family:var(--display);font-size:34px;font-weight:600;line-height:1.05;margin-top:4px;font-variation-settings:'SOFT' 40,'WONK' 1}
.sub{color:var(--hueso-tenue);font-size:14px;margin-top:6px}

/* ---------- El hilo (elemento firma) ---------- */
.hilo{position:relative;padding:8px 20px 20px 20px}
.hilo::before{
  content:'';position:absolute;left:34px;top:0;bottom:24px;width:2px;
  background:var(--linea);border-radius:2px;
}
.hilo.lleno::before{background:linear-gradient(var(--ambar),var(--salvia))}
.nodo{position:relative;display:flex;gap:16px;align-items:flex-start;padding:10px 0}
.perla{
  flex:0 0 30px;height:30px;width:30px;border-radius:50%;
  border:2px solid var(--linea);background:var(--tinta);
  display:grid;place-items:center;position:relative;z-index:2;
  transition:all .25s cubic-bezier(.2,.8,.3,1);
}
.perla svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:all .25s}
.nodo.hecho .perla{background:var(--ambar);border-color:var(--ambar)}
.nodo.hecho .perla svg{opacity:1;transform:scale(1)}
.nodo.hecho .cuerpo .n{color:var(--hueso-tenue);text-decoration:line-through;text-decoration-thickness:1px}
.cuerpo{flex:1;min-width:0;padding-top:3px}
.cuerpo .n{font-weight:500;transition:color .2s}
.cuerpo .d{font-size:13px;color:var(--hueso-tenue);font-family:var(--mono)}
.racha{font-family:var(--mono);font-size:12px;color:var(--ambar-hondo);white-space:nowrap;padding-top:5px}

/* ---------- Tarjetas ---------- */
.seccion{padding:6px 20px 20px}
.rotulo{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-tenue);margin:22px 0 12px;display:flex;justify-content:space-between;align-items:center}
/* Los iconos de acción (+ y engranaje) llevan viewBox pero no medidas propias:
   dentro de un flex colapsan a 0x0. Aquí se les da tamaño. */
.rotulo button svg{width:18px;height:18px;display:block}
.cabecera button svg{width:22px;height:22px;display:block}
/* Área táctil de 44px para el pulgar, superpuesta y centrada sobre el icono:
   no ocupa espacio, así que no mueve nada de sitio. */
.rotulo button,.cabecera button{position:relative}
.rotulo button::after,.cabecera button::after{
  content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);padding:16px;margin-bottom:10px}
.fila{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nombre{font-weight:500}
.meta-txt{font-size:13px;color:var(--hueso-tenue)}

/* ---------- Barra de progreso ---------- */
.barra{height:6px;background:var(--superficie-alta);border-radius:6px;overflow:hidden;margin-top:12px}
.barra i{display:block;height:100%;background:var(--ambar);border-radius:6px;transition:width .4s cubic-bezier(.2,.8,.3,1)}
.barra.salvia i{background:var(--salvia)}

/* ---------- Etiquetas de área ---------- */
.area{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:20px;border:1px solid var(--linea);color:var(--hueso-tenue);white-space:nowrap}

/* ---------- Números grandes ---------- */
.cifra{font-family:var(--display);font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.cifra.pos{color:var(--salvia-hondo)}
.cifra.neg{color:var(--terracota-hondo)}
.cifra small{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--hueso-tenue);display:block;margin-top:6px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Cuadrícula de constancia ---------- */
.malla{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;margin-top:12px}
.malla span{aspect-ratio:1;border-radius:3px;background:var(--superficie-alta)}
.malla span.on{background:var(--ambar)}
.malla span.hoy{outline:1.5px solid var(--hueso);outline-offset:1px}

/* ---------- Navegación ---------- */
nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:rgba(247,244,239,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
nav button{padding:11px 0 9px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--hueso-tenue);transition:color .2s}
nav button.activo{color:var(--ambar-hondo)}
nav svg{width:21px;height:21px}
nav span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}

/* Aviso de respaldo atrasado, sobre el engranaje de Ajustes */
.punto{position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:var(--ambar-hondo);z-index:1}

/* ---------- Botones ---------- */
.btn{
  background:var(--ambar);color:var(--hueso);font-weight:700;font-size:15px;
  padding:13px 20px;border-radius:11px;width:100%;text-align:center;
  transition:transform .12s,opacity .2s;
}
.btn:active{transform:scale(.975)}
.btn.fantasma{background:none;border:1px solid var(--linea);color:var(--hueso);font-weight:500}
.btn.peligro{background:none;border:1px solid var(--terracota);color:var(--terracota-hondo);font-weight:500}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Formularios ---------- */
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hueso-tenue);margin:16px 0 7px}
input,select,textarea{
  width:100%;background:var(--superficie-alta);border:1px solid var(--linea);
  border-radius:10px;padding:12px 13px;outline:none;transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--ambar-hondo)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23665F6C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
textarea{resize:vertical;min-height:70px}

/* ---------- Hoja modal ---------- */
.velo{position:fixed;inset:0;background:rgba(51,47,58,.34);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s}
.velo.abierto{opacity:1;pointer-events:auto}
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:101;max-height:90vh;overflow-y:auto;
  background:var(--superficie);border-radius:22px 22px 0 0;border-top:1px solid var(--linea);
  padding:10px 20px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.hoja.abierta{transform:translateY(0)}
.asa{width:38px;height:4px;background:var(--linea);border-radius:4px;margin:0 auto 18px}
.hoja h2{font-family:var(--display);font-size:23px;font-weight:600;margin-bottom:4px}

/* ---------- Aviso flotante ---------- */
.aviso{
  position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(14px);
  background:var(--hueso);color:var(--tinta);padding:11px 20px;border-radius:30px;
  font-size:14px;font-weight:500;z-index:200;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;
}
.aviso.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Vacío ---------- */
.vacio{text-align:center;padding:44px 24px;color:var(--hueso-tenue)}
.vacio p{font-family:var(--display);font-size:19px;color:var(--hueso);margin-bottom:6px}
.vacio small{font-size:13.5px;line-height:1.5;display:block}

.oculto{display:none !important}
.acciones-item{display:flex;gap:8px;margin-top:14px}
.acciones-item button{flex:1;font-size:13px;padding:9px;border:1px solid var(--linea);border-radius:9px;color:var(--hueso-tenue)}
.pill-fila{display:flex;gap:7px;overflow-x:auto;padding:2px 20px 4px;scrollbar-width:none}
.pill-fila::-webkit-scrollbar{display:none}
.pill{padding:7px 14px;border-radius:20px;border:1px solid var(--linea);font-size:13px;white-space:nowrap;color:var(--hueso-tenue)}
.pill.on{background:var(--hueso);color:var(--tinta);border-color:var(--hueso);font-weight:500}

@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}