/* hogar — estética iOS/Apple sencilla, móvil primero */
:root {
  --fondo: #f5f5f7; --tinta: #1d1d1f; --suave: #6e6e73; --tarjeta: #ffffff;
  --verde: #34c759; --ambar: #ff9500; --rojo: #ff3b30; --azul: #007aff;
  --radio: 20px; --sombra: 0 2px 14px rgba(0,0,0,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* el display:flex de #login no debe ganar al atributo hidden */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo); color: var(--tinta); min-height: 100dvh;
}
.suave { color: var(--suave); font-size: .9rem; }
.centrado { text-align: center; }
.error { color: var(--rojo); margin-top: .8rem; font-size: .92rem; }

/* ── Login ── */
#login { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px; }
.login-caja { width: min(400px, 100%); background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 34px 28px; text-align: center; animation: aparecer .5s ease; }
.login-emoji { font-size: 56px; margin-bottom: 8px; }
.login-caja h1 { font-size: 1.5rem; letter-spacing: -.02em; }
.login-caja p { margin: 6px 0 22px; }
.login-caja input {
  width: 100%; padding: 14px 16px; margin-bottom: 12px; font-size: 1.05rem;
  border: 1px solid #d2d2d7; border-radius: 14px; background: #fafafa; outline: none;
}
.login-caja input:focus { border-color: var(--azul); background: #fff; }

/* ── App ── */
#app { max-width: 560px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 4px 16px; }
header h1 { font-size: 1.35rem; letter-spacing: -.02em; }
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px 20px; margin-bottom: 16px; animation: aparecer .45s ease both; }
.tarjeta h2 { font-size: 1.1rem; margin-bottom: 14px; letter-spacing: -.01em; }

/* Botones */
button { font: inherit; cursor: pointer; border: none; }
.btn-primario { width: 100%; padding: 14px; border-radius: 14px; background: var(--tinta); color: #fff; font-size: 1.02rem; font-weight: 600; transition: transform .1s ease, opacity .2s; }
.btn-primario:active { transform: scale(.97); }
.btn-primario[disabled] { opacity: .5; }
.btn-peq { width: auto; padding: 12px 18px; }
.btn-secundario { padding: 10px 16px; border-radius: 12px; background: #eef6ff; color: var(--azul); font-weight: 600; }
.btn-secundario.hecho { background: #e8f9ee; color: var(--verde); }
.btn-fantasma { background: none; color: var(--suave); padding: 8px 10px; border-radius: 10px; }
.btn-fantasma:active { background: #e8e8ed; }

/* Donut de la semana */
.donut-zona { position: relative; width: 210px; margin: 0 auto; }
.donut { width: 210px; height: 210px; transform: rotate(-90deg); }
.donut-fondo, .donut-valor { fill: none; stroke-width: 18; stroke-linecap: round; }
.donut-fondo { stroke: #ececf0; }
.donut-valor { stroke: var(--verde); stroke-dasharray: 527.8; stroke-dashoffset: 527.8; transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1), stroke .4s; }
.donut-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-resto { font-size: 2.35rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.semaforo-msg { text-align: center; margin: 10px 0 16px; font-weight: 600; }

/* Chips de apunte rápido */
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.chip { padding: 12px 16px; border-radius: 999px; background: #eef6ff; color: var(--azul); font-weight: 700; font-size: 1rem; transition: transform .1s; }
.chip:active { transform: scale(.93); }
.chip-otro { background: #f2f2f6; color: var(--tinta); }
.fila-otro { display: flex; gap: 8px; margin: 6px 0 10px; }
.fila-otro input { border: 1px solid #d2d2d7; border-radius: 12px; padding: 12px; font-size: 1rem; min-width: 0; }
#otro-importe { width: 84px; flex: 0 0 auto; }
#otro-concepto { flex: 1; }

/* Lista de gastos */
.lista { list-style: none; margin-top: 8px; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid #f0f0f3; animation: aparecer .3s ease; }
.lista .quien { width: 34px; height: 34px; border-radius: 50%; background: #e8e8ed; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--suave); flex: 0 0 auto; }
.lista .que { flex: 1; min-width: 0; }
.lista .que .c { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .imp { font-weight: 700; font-variant-numeric: tabular-nums; }
.lista .borrar { background: none; color: #c7c7cc; font-size: 1.2rem; padding: 6px; border-radius: 8px; }
.lista .borrar:active { color: var(--rojo); }

/* Mes */
.barra-etq { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 6px; }
.barra { height: 12px; border-radius: 999px; background: #ececf0; overflow: hidden; }
.barra-relleno { height: 100%; border-radius: 999px; background: var(--azul); width: 0; transition: width .9s cubic-bezier(.22,1,.36,1), background .4s; }
.ahorro-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }

/* Hucha */
.hucha-zona { display: flex; align-items: center; gap: 18px; }
.hucha { width: 110px; flex: 0 0 auto; }
.tarro { fill: #f2f7ff; }
.tarro-borde { fill: none; stroke: #c9d6ea; stroke-width: 3; }
.tarro-tapa { fill: #c9d6ea; }
.tarro-monedas { fill: #ffd60a; transition: y .9s cubic-bezier(.22,1,.36,1), height .9s cubic-bezier(.22,1,.36,1); }
.hucha-grande { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.estrellas { margin-top: 8px; font-size: 1.1rem; letter-spacing: 2px; }
.historial { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.historial .sem { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; }
.historial .sem.v { background: var(--verde); }
.historial .sem.r { background: var(--rojo); }

/* Plan */
.reglas { margin: 0 0 12px 20px; display: grid; gap: 8px; }
footer { padding: 8px 0 20px; }

/* Confeti */
#confeti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  #app { max-width: 620px; }
}