@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Manrope:wght@400;500;700;800&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --paper: #F6F1E7;
  --paper-raised: #FFFFFF;
  --ink: #2B2620;
  --ink-soft: #6B6255;
  --line: #E3DACB;

  --cat-alimentacion: #6B8E4E;
  --cat-despensa: #C98A3B;
  --cat-bebidas: #3E7C8C;
  --cat-congelados: #5B7A9D;
  --cat-hogar: #8B5E83;
  --cat-higiene: #A85B52;
  --cat-otros: #7A7267;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(43,38,32,0.06), 0 2px 10px rgba(43,38,32,0.05);
  --dot-color: rgba(43,38,32,0.05);
}

/* Modo noche automático: sigue el ajuste de sistema del móvil (que muchos
   ya cambian solos al anochecer), sin necesidad de un botón para activarlo. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E1A15;
    --paper-raised: #2A241D;
    --ink: #F1EAD9;
    --ink-soft: #B0A48F;
    --line: #3D362C;

    --cat-alimentacion: #8FBE68;
    --cat-despensa: #E0A552;
    --cat-bebidas: #62B0C2;
    --cat-congelados: #86A9D1;
    --cat-hogar: #C08DB8;
    --cat-higiene: #D98D80;
    --cat-otros: #A79E8E;

    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 12px rgba(0,0,0,0.3);
    --dot-color: rgba(255,255,255,0.045);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0);
  background-size: 18px 18px;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header (tira de washi tape) ---------- */
header.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 22px 20px 14px;
  background: linear-gradient(var(--paper) 80%, transparent);
}

.tape-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 8px 16px;
  border-radius: 4px;
  transform: rotate(-1.2deg);
}

.tape-title h1 {
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
  color: var(--ink);
}

.sync-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-left: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat-alimentacion);
  flex-shrink: 0;
}

.sync-dot.offline { background: #C98A3B; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Lista ---------- */
main {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 140px;
}

.empty-state {
  text-align: center;
  margin-top: 18vh;
  color: var(--ink-soft);
}
.empty-state .big {
  font-family: 'Kalam', cursive;
  font-size: 1.3rem;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}

.category-section { margin-bottom: 22px; }

.category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px;
  cursor: pointer;
  user-select: none;
}

.cat-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-head h2 {
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
  flex: 1;
}

.count-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 20px;
}

.chevron {
  color: var(--ink-soft);
  transition: transform 0.2s ease;
  font-size: 0.8rem;
}
.category-section.collapsed .chevron { transform: rotate(-90deg); }
.category-section.collapsed .item-list { display: none; }

.item-list { display: flex; flex-direction: column; gap: 6px; }

.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--row-accent, var(--cat-otros));
  border-radius: 10px;
  padding: 11px 12px;
  box-shadow: var(--shadow);
}

.checkbox {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--ink-soft);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.checkbox svg { width: 15px; height: 15px; overflow: visible; }
.checkbox path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.28s ease;
}
.item-row.checked .checkbox { border-color: var(--cat-alimentacion); background: var(--cat-alimentacion); }
.item-row.checked .checkbox path { stroke: #fff; stroke-dashoffset: 0; }

.item-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.98rem;
}
.item-row.checked .item-name { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--ink-soft); }

.item-qty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 2px 7px;
  border-radius: 20px;
}

.item-delete {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
}
.item-delete:hover { opacity: 1; }

.clear-bought {
  display: block;
  margin: 6px auto 0;
  background: none;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
}

/* ---------- Barra de añadir (fija abajo, pulgar) ---------- */
.add-bar {
  position: sticky;
  bottom: 0;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--paper) 20%);
}

.add-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(43,38,32,0.12);
  padding: 10px 10px 12px;
}

.cat-picker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.cat-picker::-webkit-scrollbar { display: none; }

.cat-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}
.cat-chip .cat-dot { width: 8px; height: 8px; }
.cat-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cat-chip.active .cat-dot { background: var(--paper) !important; }

.add-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#item-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  padding: 8px 6px;
  color: var(--ink);
  outline: none;
}
#item-input::placeholder { color: var(--ink-soft); }

#add-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#add-btn:active { transform: scale(0.94); }
#add-btn:disabled { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .checkbox path { transition: none; }
  .sync-dot.offline { animation: none; }
}

/* ---------- Login: "¿Quién eres?" ---------- */
#login-screen {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 22px;
}

#login-screen .tape-title { margin-bottom: 4px; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.pin-pad {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pin-dots {
  display: flex;
  gap: 12px;
}
.pin-dots span {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink-soft);
  background: transparent;
}
.pin-dots span.filled { background: var(--ink); border-color: var(--ink); }

.pin-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.pin-key {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.pin-key:active { transform: scale(0.94); }
.pin-key.wide { font-size: 0.85rem; color: var(--ink-soft); }

.login-error {
  color: var(--cat-higiene);
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', monospace;
  min-height: 1.2em;
}

/* ---------- Quién soy / logout, en la cabecera ---------- */
.whoami {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
}
.whoami .avatar { width: 18px; height: 18px; font-size: 0.65rem; }
.sync-row { justify-content: space-between; }

.notify-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.6;
}
.notify-btn.active { opacity: 1; }

/* ---------- Badges de persona en cada item ---------- */
.item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.item-meta .avatar { width: 20px; height: 20px; font-size: 0.65rem; }
.pending-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--cat-despensa);
}

/* ---------- Campo de nombre en el login ---------- */
#name-input {
  width: 100%;
  max-width: 280px;
  text-align: center;
  font-family: 'Kalam', cursive;
  font-size: 1.3rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  outline: none;
}
#name-input::placeholder { color: var(--ink-soft); font-family: 'Manrope', sans-serif; }
#name-input:focus { border-color: var(--ink-soft); }

/* ---------- Nombre + fecha apilados en cada fila ---------- */
.item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.item-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.item-row.checked .item-date { opacity: 0.6; }