/* Generated with: Claude Code / Date: 2026-08-19 */
/* ============================================================
   FAMILIA — Almanaque familiar
   Dirección: editorial cálido, papel + tinta. Fraunces (display
   serif itálica) para el mes; Karla para la interfaz. Tinta de
   color por persona. Grano sutil sobre todo.
   ============================================================ */

/* ---------- Tipografías (self-hosted, CSP 'self') ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("/fonts/karla.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("/fonts/karla-italic.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f6f1e6;          /* papel crema */
  --paper-deep: #efe7d5;     /* papel sombreado */
  --card: #fffdf7;           /* tarjetas */
  --ink: #22372f;            /* tinta verde bosque */
  --ink-soft: #64705f;       /* tinta diluida */
  --line: #ddd3bd;           /* filete */
  --terra: #cf5b3c;          /* terracota, el acento */
  --terra-deep: #b34a2e;
  --gold: #b98a2f;

  /* tintas por persona (asignadas por JS con --tinta) */
  --tinta-1: #cf5b3c;  /* terracota */
  --tinta-2: #2e6b58;  /* bosque */
  --tinta-3: #b98a2f;  /* ocre */
  --tinta-4: #7c5f9b;  /* ciruela */
  --tinta-5: #3d6b8e;  /* petróleo */
  --tinta-6: #8a8f3d;  /* musgo */

  --radius: 18px;
  --shadow-soft: 0 2px 6px #22372f14, 0 18px 44px #22372f1c;
  --ease-spring: cubic-bezier(.34, 1.4, .44, 1);

  font-family: "Karla", ui-sans-serif, sans-serif;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100vh;
  background:
    radial-gradient(1100px 500px at 85% -10%, #e7ddc2cc, transparent 60%),
    radial-gradient(900px 600px at -15% 100%, #dfe7d9aa, transparent 55%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* Grano de papel sobre todo */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

::selection { background: #cf5b3c33; }

/* ============================================================
   LOGIN — portada del almanaque
   ============================================================ */
.login {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 1.5rem;
}
.login-stage { text-align: center; max-width: 560px; width: 100%; }
.login-eyebrow {
  margin: 0; color: var(--terra);
  font-weight: 700; font-size: .8rem; letter-spacing: .34em; text-transform: uppercase;
}
.login-word {
  margin: .1em 0 0;
  font-family: "Fraunces", serif; font-style: italic; font-weight: 620;
  font-size: clamp(4rem, 17vw, 8.5rem); line-height: .95; letter-spacing: -.02em;
  color: var(--ink);
}
.login-word .dot { color: var(--terra); font-style: normal; }
.login-tag {
  margin: 1.1rem 0 2.2rem; color: var(--ink-soft);
  font-size: 1.05rem; line-height: 1.5;
}
.login-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.5rem 1.1rem; text-align: left;
}
.login-card label {
  display: block; font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: .55rem;
}
.login-row { display: flex; gap: .6rem; }
.login-row input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; padding: .8rem .95rem; letter-spacing: .12em;
}
.login-row input:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; border-color: transparent; }
.login-row button {
  background: var(--ink); color: var(--paper); font-weight: 700;
  border-radius: 12px; padding: .8rem 1.35rem;
  transition: transform .18s var(--ease-spring), background .18s;
}
.login-row button:hover { background: var(--terra); transform: translateY(-1px); }
.login-foot {
  margin-top: 1.6rem; color: var(--ink-soft); font-size: .78rem;
  font-style: italic; letter-spacing: .06em;
}

/* ============================================================
   CABECERA
   ============================================================ */
#app {
  max-width: 1220px; margin: 0 auto;
  padding: clamp(.8rem, 2.5vw, 2rem) clamp(.7rem, 2.5vw, 1.6rem) 6rem;
}
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding: .4rem .2rem 1.1rem;
}
.eyebrow {
  display: block; color: var(--terra); font-weight: 800;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
}
.month-title {
  margin: 0; font-family: "Fraunces", serif; font-style: italic; font-weight: 560;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem); line-height: 1; letter-spacing: -.02em;
  text-transform: lowercase;
}
#month-year { color: #b6ad97; font-weight: 380; }
.top-actions { display: flex; align-items: center; gap: .8rem; padding-bottom: .35rem; }
.month-nav {
  display: flex; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: .2rem;
  box-shadow: 0 1px 3px #22372f12;
}
.nav-btn {
  min-width: 2.4rem; height: 2.4rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 1.25rem; color: var(--ink);
  transition: background .15s, transform .15s var(--ease-spring);
}
.nav-btn:hover { background: var(--paper-deep); }
.nav-btn:active { transform: scale(.92); }
.nav-today { font-size: .85rem; font-weight: 800; padding: 0 .9rem; color: var(--terra); }
.quiet {
  color: var(--ink-soft); font-weight: 700; font-size: .85rem;
  padding: .5rem .7rem; border-radius: 10px; transition: color .15s, background .15s;
}
.quiet:hover { color: var(--terra); background: #cf5b3c14; }

/* ============================================================
   LAYOUT: calendario + agenda lateral
   ============================================================ */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 296px;
  gap: 1.1rem; align-items: start;
}

/* ---------- Calendario ---------- */
.calendar {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);
  touch-action: pan-y;
}
.weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line); background: var(--paper-deep);
}
.weekdays span {
  text-align: right; padding: .6rem .7rem .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.weekdays .wknd { color: var(--terra); }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.grid.slide-left  { animation: slideL .34s var(--ease-spring); }
.grid.slide-right { animation: slideR .34s var(--ease-spring); }
@keyframes slideL { from { transform: translateX(26px); opacity: 0; } }
@keyframes slideR { from { transform: translateX(-26px); opacity: 0; } }

.day {
  position: relative; min-height: 118px; padding: .4rem .45rem .5rem;
  border-right: 1px solid #e9e1cd; border-top: 1px solid #e9e1cd;
  background: var(--card); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: .22rem; overflow: hidden;
  transition: background .15s;
}
.day:nth-child(7n) { border-right: 0; }
.day:nth-child(-n+7) { border-top: 0; }
.day:nth-child(7n), .day:nth-child(7n-1) { background: #fbf7ec; } /* fin de semana */
.day:hover { background: #f3edde; }
.day.out { background: #f6f2e7; }
.day.out .number, .day.out .pill { opacity: .38; }

.number {
  align-self: flex-end;
  display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem;
  padding: 0 .3rem; border-radius: 999px;
  font-family: "Fraunces", serif; font-weight: 560; font-size: .95rem;
}
.day.today { background: #fdf4ef; box-shadow: inset 0 0 0 2px var(--terra); }
.day.today .number { background: var(--terra); color: #fff; }

.pill {
  display: flex; align-items: baseline; gap: .3rem; width: 100%;
  padding: .2rem .4rem .22rem; border-radius: 7px; text-align: left;
  background: color-mix(in srgb, var(--tinta) 14%, #fff);
  border-left: 3px solid var(--tinta);
  font-size: .74rem; font-weight: 600; line-height: 1.15; color: var(--ink);
  white-space: nowrap; overflow: hidden;
  transition: transform .14s var(--ease-spring), background .14s;
}
.pill:hover { transform: translateX(2px); background: color-mix(in srgb, var(--tinta) 26%, #fff); }
.pill .t { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--tinta); font-size: .68rem; flex: none; }
.pill .s { overflow: hidden; text-overflow: ellipsis; }
.more {
  align-self: flex-start; font-size: .68rem; font-weight: 800; color: var(--terra);
  padding: .1rem .35rem; border-radius: 6px;
}
.more:hover { background: #cf5b3c1a; }

/* ---------- Agenda lateral ---------- */
.agenda { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.agenda-block {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.05rem 1.05rem; box-shadow: 0 1px 4px #22372f10;
}
.agenda-title {
  margin: 0 0 .6rem; font-family: "Fraunces", serif; font-style: italic;
  font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: .5rem;
}
.agenda-sub { font-family: "Karla"; font-style: normal; font-size: .74rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }
.agenda-list { display: flex; flex-direction: column; gap: .4rem; }
.agenda-item {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  width: 100%; text-align: left; padding: .5rem .55rem; border-radius: 12px;
  border-left: 3px solid var(--tinta);
  background: color-mix(in srgb, var(--tinta) 8%, #fff);
  transition: transform .15s var(--ease-spring), background .15s;
}
.agenda-item:hover { transform: translateX(3px); background: color-mix(in srgb, var(--tinta) 18%, #fff); }
.agenda-when {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: .74rem;
  color: var(--tinta); padding-top: .1rem; min-width: 3.2rem;
}
.agenda-what { min-width: 0; }
.agenda-what .title { font-weight: 700; font-size: .88rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-what .meta { font-size: .74rem; color: var(--ink-soft); margin-top: .1rem; }
.agenda-empty { color: var(--ink-soft); font-style: italic; font-size: .85rem; padding: .2rem .1rem; }

.legend { display: flex; flex-wrap: wrap; gap: .45rem; }
.legend-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--tinta) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--tinta) 35%, #fff);
  padding: .28rem .6rem; border-radius: 999px;
}
.legend-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--tinta); }

/* ---------- FAB ---------- */
.fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 30;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: .85rem 1.3rem .85rem 1.05rem;
  font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 14px #22372f33, 0 18px 40px #22372f2e;
  transition: transform .2s var(--ease-spring), background .2s;
}
.fab:hover { background: var(--terra); transform: translateY(-2px) scale(1.03); }
.fab:active { transform: scale(.96); }
.fab-plus { font-size: 1.35rem; line-height: 1; font-weight: 600; }

/* ============================================================
   DIÁLOGOS
   ============================================================ */
dialog {
  border: 1px solid var(--line); border-radius: 22px; padding: 0;
  width: min(600px, calc(100% - 2rem));
  background: var(--card); color: var(--ink);
  box-shadow: 0 30px 90px #17281f66;
}
dialog[open] { animation: pop .32s var(--ease-spring); }
@keyframes pop { from { transform: translateY(14px) scale(.97); opacity: 0; } }
dialog::backdrop { background: #22372fb0; backdrop-filter: blur(3px); }
dialog form, #day-sheet { padding: 0; }
#event-form, #day-sheet { padding: 1.3rem 1.4rem 1.25rem; }

.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.dialog-head h2 {
  margin: 0; font-family: "Fraunces", serif; font-style: italic;
  font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em;
}
.icon-btn {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 10px; color: var(--ink-soft); font-size: .95rem;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--paper-deep); color: var(--ink); }

.field { display: block; margin: .8rem 0 0; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.field .opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: #a29b86; }
.field input, .field textarea {
  display: block; width: 100%; margin-top: .4rem;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: .72rem .85rem; font-size: 1rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px #cf5b3c26;
}
.field input.invalid { border-color: #b02f25; box-shadow: 0 0 0 3px #b02f2522; }
.field textarea { resize: vertical; }
input.time, #date { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ---------- Selector de hora tipo "alarma de celular" ---------- */
.time-wrap { position: relative; }
.time-wrap input { padding-right: 2.6rem; }
.time-btn {
  position: absolute; right: .45rem; bottom: .5rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border-radius: 8px; color: var(--ink-soft);
  transition: color .15s, background .15s;
}
.time-btn:hover { color: var(--terra); background: #cf5b3c14; }
.time-btn.on { color: #fff; background: var(--terra); }

.time-pop {
  display: none;
  position: absolute; z-index: 20; top: calc(100% + .4rem); left: 50%;
  transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 24px #22372f2a, 0 24px 60px #22372f26;
  padding: .5rem .5rem .55rem; width: 172px;
}
.time-pop.open { display: block; animation: pop .28s var(--ease-spring); }

.wheels { position: relative; display: flex; gap: .3rem; }
/* banda central que marca la selección (como la alarma del teléfono) */
.wheels::before {
  content: ""; position: absolute; left: 0; right: 0; top: 72px; height: 36px;
  background: #cf5b3c14; border-top: 1.5px solid #cf5b3c55; border-bottom: 1.5px solid #cf5b3c55;
  border-radius: 8px; pointer-events: none;
}
.wheel {
  flex: 1; height: 180px; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  padding: 72px 0; /* deja centrar el primer y último valor */
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel-item {
  display: grid; place-items: center; width: 100%; height: 36px;
  scroll-snap-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem;
  color: var(--ink-soft); border-radius: 8px;
  transition: color .12s, transform .12s;
}
.wheel-item:hover { color: var(--ink); }
.wheel-item.sel { color: var(--terra); font-weight: 800; transform: scale(1.12); }
.pop-done {
  display: block; width: 100%; margin-top: .45rem;
  background: var(--ink); color: var(--paper); font-weight: 800; font-size: .82rem;
  border-radius: 10px; padding: .5rem 0;
  transition: background .15s;
}
.pop-done:hover { background: var(--terra); }

.row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .7rem; }
.hint { margin: .5rem 0 0; font-size: .76rem; color: var(--ink-soft); font-style: italic; }
.hint b { color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.chip {
  font-size: .8rem; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--tinta) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--tinta) 40%, #fff);
  padding: .3rem .7rem; border-radius: 999px;
  transition: transform .15s var(--ease-spring), background .15s;
}
.chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--tinta) 24%, #fff); }
.chip.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; margin-top: 1.2rem; }
.primary {
  background: var(--ink); color: var(--paper); font-weight: 800;
  border-radius: 12px; padding: .78rem 1.5rem;
  transition: background .18s, transform .18s var(--ease-spring);
}
.primary:hover { background: var(--terra); transform: translateY(-1px); }
.danger {
  margin-right: auto; color: #b02f25; font-weight: 800;
  padding: .78rem 1rem; border-radius: 12px; border: 1px dashed #b02f2555;
  transition: background .15s, color .15s, border-color .15s;
}
.danger:hover { background: #b02f2514; }
.danger.confirm { background: #b02f25; border-color: #b02f25; color: #fff; border-style: solid; }
.error { color: #b02f25; font-weight: 600; font-size: .85rem; min-height: 1.2em; margin: .6rem 0 0; }

#day-sheet .actions { margin-top: 1rem; }
#day-sheet-title { text-transform: capitalize; }

/* ============================================================
   ANIMACIÓN DE ENTRADA (escalonada)
   ============================================================ */
.reveal { animation: rise .6s var(--ease-spring) backwards; }
.login .reveal:nth-child(1) { animation-delay: .05s; }
.login .reveal:nth-child(2) { animation-delay: .14s; }
.login .reveal:nth-child(3) { animation-delay: .26s; }
.login .reveal:nth-child(4) { animation-delay: .38s; }
.login .reveal:nth-child(5) { animation-delay: .52s; }
#app .topbar.reveal   { animation-delay: .04s; }
#app .calendar.reveal { animation-delay: .14s; }
#app .agenda.reveal   { animation-delay: .26s; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .agenda { position: static; flex-direction: row; flex-wrap: wrap; }
  .agenda-block { flex: 1 1 260px; }
}
@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .top-actions { width: 100%; justify-content: space-between; padding-bottom: 0; }
  .day { min-height: 86px; padding: .25rem .3rem .35rem; }
  .pill { font-size: .62rem; padding: .16rem .3rem; border-left-width: 2px; }
  .pill .t { display: none; }
  .number { min-width: 1.45rem; height: 1.45rem; font-size: .8rem; }
  .weekdays span { padding: .45rem .4rem .4rem; font-size: .6rem; letter-spacing: .1em; }
  .row { grid-template-columns: 1fr 1fr; }
  .row .field:first-child { grid-column: 1 / -1; }
  .fab .fab-label { display: none; }
  .fab { padding: .95rem 1.05rem; }
  dialog { max-height: 92dvh; overflow: auto; }
}