@font-face {
  font-family: "Comfortaa";
  src: url("/fonts/comfortaa.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory: #f4f2fb;
  --ivory-deep: #e9e6f5;
  --paper: #fdfcff;
  --night: #1c1a3d;
  --graphite: #43505f;
  --muted: #7b837f;
  --electric: #3d3a8c;
  --electric-dark: #2c2a6b;
  --electric-soft: #ecebfa;
  --mint: #87dbc5;
  --mint-dark: #287d69;
  --mint-soft: #e4f7f0;
  /* Paleta Sukkiri. Marca: índigo y lavanda. Apoyo: cada color tiene un trabajo. */
  --lavender: #a99cf0;
  --lavender-soft: #f0edfd;
  --sun: #f5c451;        /* rachas, celebración, logros */
  --sun-soft: #fdf3d6;
  --sun-deep: #8a5d00;
  --sky: #6fb8e8;        /* Calendar, horarios, información */
  --sky-soft: #e3f2fc;
  --sky-deep: #1f6a99;
  --rose: #e27aa6;       /* bienestar, lo personal */
  --rose-soft: #fbe6f0;
  --rose-deep: #a63d6b;
  --coral: #ec8c7d;       /* grabando, urgente */
  --coral-soft: #fde9e4;
  --line: rgba(28, 26, 61, 0.1);
  --shadow: 0 18px 50px rgba(28, 26, 61, 0.11);
  --shadow-soft: 0 8px 24px rgba(28, 26, 61, 0.07);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --font-brand: "Comfortaa", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  color-scheme: light;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--ivory); overscroll-behavior-y: none; }

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  color: var(--night);
  background: var(--ivory);
  overscroll-behavior-y: none;
}

.welcome-legal,
.legal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.82rem;
}

.welcome-legal a,
.legal-nav a,
.legal-card a {
  color: var(--night, #1c1a3d);
  text-underline-offset: 0.18em;
}

.legal-body {
  min-height: 100vh;
  background: #f4f2fb;
  color: #1c1a3d;
}

.legal-shell {
  width: min(100% - 2rem, 760px);
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.legal-brand {
  display: inline-flex;
  margin-bottom: 1.4rem;
  text-decoration: none;
}

.legal-card {
  padding: clamp(1.35rem, 4vw, 2.6rem);
  border: 1px solid rgba(23, 35, 61, 0.11);
  border-radius: 1.6rem;
  background: rgba(253, 252, 255, 0.9);
  box-shadow: 0 18px 50px rgba(23, 35, 61, 0.08);
}

.legal-card h1 {
  margin: 0.35rem 0 0.35rem;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.02;
}

.legal-card h2 {
  margin: 1.8rem 0 0.45rem;
  font-size: 1.08rem;
}

.legal-card p {
  margin: 0;
  color: #44506a;
  line-height: 1.7;
}

.legal-card .legal-updated {
  color: #6d7586;
  font-size: 0.88rem;
}

.legal-nav {
  margin-top: 1.2rem;
}

button, textarea, input, select { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(61, 58, 140, 0.38);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ivory);
  box-shadow: 0 0 80px rgba(28, 26, 61, 0.12);
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px;
  align-items: center;
  min-height: 72px;
  padding: max(14px, env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(to bottom, rgba(247, 241, 231, 0.98) 72%, rgba(247, 241, 231, 0));
}

.brand { display: inline-flex; align-items: center; color: var(--night); text-decoration: none; }
.brand--small { grid-column: 2; justify-self: center; gap: 9px; }
.brand--hero { flex-direction: column; gap: 16px; }
.wordmark { display: block; width: auto; height: 22px; }
.brand--hero .wordmark { height: clamp(32px, 9vw, 40px); }

.brand-logo { display: block; flex: 0 0 auto; object-fit: cover; border-radius: 23%; }
.brand-logo--small { width: 28px; height: 28px; }
.brand-logo--hero { width: 82px; height: 82px; box-shadow: 0 10px 24px rgba(28, 26, 61, 0.09); }

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(253, 252, 255, 0.72);
  font-size: 24px;
  cursor: pointer;
}
.quick-plan-button {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid rgba(61, 58, 140, .22);
  border-radius: 14px;
  color: var(--electric-dark);
  background: var(--electric-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.quick-plan-button:hover { background: #e2dff7; }
.quick-plan-button[hidden] { display: none; }
.calendar-plan-button[hidden], .calendar-profile-card[hidden] { display: none !important; }
.topbar-back-button {
  grid-column: 1;
  justify-self: start;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(21, 44, 78, .1);
  border-radius: 50%;
  color: var(--night);
  background: rgba(253, 252, 255, .8);
  box-shadow: 0 6px 14px rgba(21,44,78,.05);
  font: inherit;
  cursor: pointer;
}
.topbar-back-button span { font-size: 25px; line-height: 1; transform: translateY(-1px); }
.topbar-back-button:hover { border-color: rgba(61, 58, 140,.3); color: var(--electric-dark); }
.topbar-back-button[hidden] { display: none; }
.quick-plan-sheet .sheet__surface { max-width: 520px; }
.quick-plan-intro { margin: 0 0 16px; color: var(--slate); line-height: 1.5; }
.quick-plan-steps { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: quick-plan; }
.quick-plan-steps li { position: relative; display: grid; gap: 3px; padding: 12px 13px 12px 45px; border: 1px solid rgba(28, 26, 61, .09); border-radius: 15px; background: rgba(253, 252, 255, .66); counter-increment: quick-plan; }
.quick-plan-steps li::before { content: counter(quick-plan); position: absolute; left: 13px; top: 13px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--electric); font-size: 12px; font-weight: 900; }
.quick-plan-steps strong { color: var(--night); font-size: 14px; }
.quick-plan-steps span { color: var(--slate); font-size: 13px; line-height: 1.35; }
.quick-plan-example { margin: 0 0 18px; padding: 14px; border-radius: 15px; color: var(--night); background: rgba(117, 215, 190, .17); }
.quick-plan-example strong { display: block; margin-bottom: 5px; font-size: 13px; }
.quick-plan-example p { margin: 0; color: var(--slate); font-size: 13px; line-height: 1.45; }
.quick-plan-example small { display: block; margin-top: 9px; color: var(--electric-dark); font-size: 12px; font-weight: 700; line-height: 1.35; }
.profile-button {
  grid-column: 3;
  display: inline-flex;
  width: auto;
  min-width: 70px;
  height: 42px;
  padding: 0 10px;
  justify-self: end;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(61, 58, 140, .2);
  border-radius: 14px;
  color: var(--electric-dark);
  background: var(--electric-soft);
  box-shadow: 0 6px 16px rgba(61, 58, 140, .12);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.profile-button:hover { background: #e2dff7; box-shadow: 0 8px 18px rgba(61, 58, 140, .17); transform: translateY(-1px); }
.profile-button:active { transform: translateY(1px) scale(.98); }
.profile-button__icon { font-size: 18px; line-height: 1; }
.profile-button__label { font-size: 10px; font-weight: 850; letter-spacing: -.01em; }

.view { min-height: calc(100svh - 72px); padding: 30px 24px calc(34px + var(--safe-bottom)); }
.view[hidden], .topbar[hidden], .action-dock[hidden] { display: none !important; }
.view.is-entering { animation: viewIn 420ms cubic-bezier(0.22, 0.8, 0.24, 1) both; }

.welcome-view { position: relative; height: 100dvh; min-height: 100svh; padding: 0; overflow: hidden; }
.welcome-content {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 100%;
  padding: max(70px, calc(env(safe-area-inset-top) + 42px)) 30px calc(26px + var(--safe-bottom));
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.welcome-content .brand { margin-top: 0; }
.welcome-copy { margin: clamp(32px, 5vh, 48px) 0 28px; }
.welcome-copy h1 { margin-bottom: 20px; }
.welcome-copy h1 span { color: var(--electric); }
.welcome-copy .lead { max-width: 350px; margin: 0 auto; }
.welcome-content .primary-button { margin-top: 0; }
.welcome-login { margin-top: 13px; }
.welcome-glow { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.65; }
.welcome-glow--one { width: 300px; height: 300px; top: -130px; right: -130px; background: rgba(169, 156, 240, 0.28); }
.welcome-glow--two { width: 260px; height: 260px; bottom: -120px; left: -120px; background: rgba(245, 196, 81, 0.2); }

.onboarding-view { display: flex; min-height: 100svh; padding-top: max(30px, calc(env(safe-area-inset-top) + 18px)); flex-direction: column; }
.onboarding-topline { display: flex; min-height: 32px; align-items: center; justify-content: space-between; }
.onboarding-progress { display: flex; align-items: center; gap: 7px; }
.onboarding-progress span { width: 8px; height: 8px; border-radius: 999px; background: rgba(28, 26, 61,.14); transition: width 220ms ease, background 220ms ease; }
.onboarding-progress span.is-active { width: 28px; background: var(--electric); }
.onboarding-step { display: flex; flex: 1; padding-top: clamp(30px, 7vh, 58px); flex-direction: column; }
.onboarding-step[hidden] { display: none; }
.onboarding-step h1 { margin-bottom: 16px; }
.onboarding-copy { max-width: 420px; color: var(--graphite); font-size: 16px; line-height: 1.55; }
.onboarding-step blockquote { margin: 18px 0 0; padding: 17px 18px; border: 1px solid rgba(61, 58, 140,.14); border-radius: 18px; color: var(--electric-dark); background: var(--electric-soft); font-size: 14px; font-weight: 720; line-height: 1.55; }
.onboarding-visual { display: flex; width: 104px; height: 104px; margin-bottom: 35px; align-items: center; justify-content: center; gap: 6px; border-radius: 34px; background: linear-gradient(145deg, var(--electric), var(--electric-dark)); box-shadow: 0 18px 38px rgba(61, 58, 140,.24); }
.onboarding-visual span { width: 7px; border-radius: 8px; background: white; animation: equalize 1.15s ease-in-out infinite; }
.onboarding-visual span:nth-child(1), .onboarding-visual span:nth-child(5) { height: 22px; }
.onboarding-visual span:nth-child(2), .onboarding-visual span:nth-child(4) { height: 39px; animation-delay: 120ms; }
.onboarding-visual span:nth-child(3) { height: 56px; background: var(--mint); animation-delay: 240ms; }
.onboarding-mini-map { display: grid; margin-bottom: 30px; gap: 9px; }
.onboarding-mini-map > div { display: grid; min-height: 61px; padding: 12px 14px; grid-template-columns: 10px 1fr; align-items: center; column-gap: 11px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow-soft); }
.onboarding-mini-map .time-indicator { grid-row: 1 / 3; }
.onboarding-mini-map small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-mini-map strong { font-size: 14px; }
.onboarding-check-card { display: grid; margin-bottom: 30px; padding: 20px; gap: 10px; border: 1px solid rgba(40,125,105,.14); border-radius: 22px; background: linear-gradient(145deg, var(--paper), var(--mint-soft)); box-shadow: var(--shadow-soft); }
.onboarding-check-card > small { color: var(--mint-dark); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.onboarding-check-card > strong { margin-bottom: 5px; font-size: 15px; }
.onboarding-check-card label { display: flex; min-height: 40px; padding: 8px 10px; align-items: center; gap: 10px; border-radius: 12px; background: rgba(255,255,255,.65); cursor: pointer; }
.onboarding-check-card input { width: 19px; height: 19px; accent-color: var(--mint-dark); }
.onboarding-check-card input:checked + span { color: var(--muted); text-decoration: line-through; }
.onboarding-actions { display: grid; margin-top: 20px; grid-template-columns: auto 1fr; gap: 10px; }
.onboarding-actions .secondary-button[hidden] { display: none; }

.reminders-view { padding-top: 26px; }
.reminders-view .page-heading h1 { font-size: clamp(33px, 8vw, 44px); }
.reminder-form { display: grid; gap: 16px; }
.reminder-toggle-row { display: flex; min-height: 72px; padding: 15px 16px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(61, 58, 140,.15); border-radius: 19px; background: var(--paper); box-shadow: var(--shadow-soft); cursor: pointer; }
.reminder-toggle-row strong, .reminder-toggle-row small { display: block; }
.reminder-toggle-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.reminder-toggle-row input { width: 48px; height: 28px; flex: 0 0 auto; appearance: none; border-radius: 999px; background: #c9cfd4; box-shadow: inset 0 0 0 1px rgba(28, 26, 61,.06); cursor: pointer; transition: background 180ms ease; }
.reminder-toggle-row input::after { display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; background: white; box-shadow: 0 3px 8px rgba(28, 26, 61,.18); content: ""; transition: transform 180ms ease; }
.reminder-toggle-row input:checked { background: var(--electric); }
.reminder-toggle-row input:checked::after { transform: translateX(20px); }
.reminder-details { display: grid; padding: 17px; gap: 16px; border: 1px solid var(--line); border-radius: 19px; background: rgba(253, 252, 255,.7); transition: opacity 180ms ease; }
.reminder-details.is-disabled { opacity: .46; }
.reminder-days { display: grid; margin: 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
.reminder-days legend { margin-bottom: 8px; font-size: 13px; font-weight: 820; }
.reminder-days label { display: flex; min-height: 43px; padding: 9px 10px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 11px; font-weight: 750; cursor: pointer; }
.reminder-days input { accent-color: var(--electric); }
.reminder-preview { display: flex; padding: 14px; align-items: flex-start; gap: 11px; border-radius: 15px; color: var(--night); background: var(--electric-soft); }
.reminder-preview > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: white; background: var(--electric); }
.reminder-preview small { color: var(--electric-dark); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.reminder-preview p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }
.reminder-honesty { margin: 0; padding: 13px 14px; border-radius: 15px; color: var(--graphite); background: rgba(135,219,197,.14); font-size: 11px; line-height: 1.5; }
.reminder-honesty strong { color: var(--night); }
.reminder-skip { justify-self: center; }
.install-callout { display: grid; margin-top: 23px; padding: 16px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; border: 1px solid rgba(61, 58, 140,.15); border-radius: 20px; background: linear-gradient(145deg, var(--paper), rgba(226,234,255,.7)); box-shadow: var(--shadow-soft); }
.install-callout__mark, .install-instructions__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--electric), var(--mint)); font-size: 18px; font-weight: 900; }
.install-callout strong, .install-callout p { display: block; }
.install-callout strong { font-size: 13px; }
.install-callout p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.install-callout .secondary-button { min-height: 42px; grid-column: 1 / -1; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 14px; font-family: var(--font-brand); font-size: clamp(34px, 9vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-family: var(--font-brand); font-weight: 700; letter-spacing: -0.015em; }
.lead, .page-heading > p:last-child { color: var(--graphite); font-size: 17px; line-height: 1.55; }
.eyebrow { margin-bottom: 11px; color: var(--electric-dark); font-size: 12px; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.privacy-note { margin: 17px 0 0; color: var(--muted); font-size: 12px; }
.privacy-note span { margin-right: 4px; color: var(--mint-dark); font-size: 8px; }

.primary-button {
  display: flex;
  width: 100%;
  min-height: 58px;
  padding: 16px 20px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 19px;
  color: white;
  background: var(--electric);
  box-shadow: 0 12px 26px rgba(61, 58, 140, 0.24);
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.primary-button--large { min-height: 64px; border-radius: 21px; }
.primary-button:hover:not(:disabled) { background: var(--electric-dark); box-shadow: 0 15px 34px rgba(61, 58, 140, 0.3); transform: translateY(-2px); }
.primary-button:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.primary-button:disabled { color: rgba(255,255,255,.72); background: #abb7c8; box-shadow: none; cursor: not-allowed; }
.text-button { padding: 4px; border: 0; color: var(--electric-dark); background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.secondary-button, .danger-button { display: flex; min-height: 50px; padding: 13px 16px; align-items: center; justify-content: center; border-radius: 16px; font-weight: 800; cursor: pointer; }
.secondary-button { border: 1px solid var(--line); color: var(--night); background: var(--paper); }
.danger-button { border: 1px solid rgba(184,73,60,.2); color: #a7483d; background: var(--coral-soft); }
.danger-button--solid { border-color: #b85549; color: white; background: #b85549; }
.social-auth { margin: 20px 0 14px; }
.google-auth-button { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; gap: 11px; border: 1px solid rgba(20, 31, 45, .16); border-radius: 18px; color: var(--night); background: #fff; box-shadow: 0 6px 18px rgba(20,31,45,.06); font-size: 15px; font-weight: 800; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.google-auth-button:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(20,31,45,.1); transform: translateY(-1px); }
.google-auth-button:disabled { opacity: .62; cursor: wait; }
.google-auth-mark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: conic-gradient(from -30deg, #4285f4 0 25%, #34a853 0 49%, #fbbc05 0 74%, #ea4335 0); font-size: 13px; font-weight: 900; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.social-auth p { margin: 8px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.session-loading-view { display: block; min-height: calc(100svh - 72px); padding-top: clamp(76px, 16vh, 142px); }
.session-loading-center { width: min(100%, 340px); margin: 0 auto; padding: 16px 24px; text-align: center; }
.session-loading-center h1 { margin: 15px 0 10px; font-size: clamp(33px, 9.5vw, 46px); letter-spacing: -.03em; }
.session-loading-center > p:not(.eyebrow) { margin: 0; color: var(--graphite); font-size: 16px; line-height: 1.5; }
.session-loading-mark, .thinking-mark { position: relative; display: grid; width: 96px; height: 96px; margin: 0 auto 26px; place-items: center; border-radius: 30px; background: var(--paper); box-shadow: 0 18px 40px rgba(21,44,78,.13), inset 0 0 0 1px rgba(21,44,78,.07); }
.session-loading-mark img, .thinking-mark img { position: relative; z-index: 2; width: 66px; height: 66px; border-radius: 22%; animation: sukkiriLogoFloat 1.8s ease-in-out infinite; }
.logo-loader__ring { position: absolute; border: 2px solid rgba(61, 58, 140,.24); border-radius: 50%; animation: sukkiriPulse 1.8s ease-out infinite; }
.logo-loader__ring--one { width: 86px; height: 86px; }.logo-loader__ring--two { width: 64px; height: 64px; border-color: rgba(169,156,240,.5); animation-delay: .45s; }
.session-loading-dots { display: flex; justify-content: center; gap: 7px; margin-top: 27px; }
.session-loading-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--electric); animation: sessionDot 1.2s ease-in-out infinite; }
.session-loading-dots span:nth-child(2) { animation-delay: .14s; }.session-loading-dots span:nth-child(3) { animation-delay: .28s; }
@keyframes sukkiriLogoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes sukkiriPulse { 0% { transform: scale(.74); opacity: .8; } 70%,100% { transform: scale(1.18); opacity: 0; } }
@keyframes sessionDot { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-6px); opacity: 1; } }

.page-heading { margin-bottom: 22px; }
.page-heading h1 { margin-bottom: 10px; }
.capture-view { display: flex; flex-direction: column; }
.capture-options { margin-top: 18px; }
.capture-options > summary { padding: 12px 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.capture-options[open] > summary { margin-bottom: 10px; }
.capture-view .map-portal-button { margin: 6px 0 0; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.capture-view .map-portal-button__copy { display: flex; align-items: baseline; gap: 10px; }
.capture-view .map-portal-button__copy strong { color: var(--electric-dark); font-size: 13px; }
.capture-view .recorder { min-height: 172px; margin: 8px 0; }
.capture-view .recorder-status { max-width: calc(100% - 76px); text-align: center; font-size: 12px; font-weight: 600; }
.capture-view .sound-ring--outer { display: none; }
.capture-view .sound-ring--inner { border: 0; background: transparent; }
.capture-view .recorder.is-recording .sound-ring--inner { background: rgba(61, 58, 140,.08); }
.capture-view .clear-dump-button:disabled { visibility: hidden; }
.capture-view .fallback-heading label { font-size: 13px; color: var(--muted); font-weight: 500; }
.capture-view .page-heading { margin-bottom: 12px; }
.capture-view .page-heading > p:last-child { margin-bottom: 0; font-size: 15px; line-height: 1.48; }
.daily-checkin { display:flex; margin:8px 0 10px; padding:11px 13px; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(61, 58, 140,.14); border-radius:16px; background:rgba(255,255,255,.45); }.daily-checkin[hidden]{display:none}.daily-checkin strong{display:block;font-size:13px}.daily-checkin small{display:block;margin-top:2px;color:var(--muted);font-size:10px}.daily-checkin__options{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.daily-checkin__options button{padding:7px 8px;border:1px solid var(--line);border-radius:999px;color:var(--graphite);background:var(--paper);font-size:10px;font-weight:800;cursor:pointer}.daily-checkin__options button.is-selected{border-color:rgba(61, 58, 140,.4);color:var(--electric-dark);background:var(--electric-soft)}
.recorder { position: relative; display: flex; min-height: 164px; flex-direction: column; align-items: center; justify-content: center; }
.mic-button {
  position: relative;
  z-index: 3;
  display: grid;
  width: 92px;
  height: 92px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #6c66d6, var(--electric-dark));
  box-shadow: 0 20px 38px rgba(61, 58, 140, 0.28), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer;
  transition: transform 200ms ease;
}
.mic-button:hover { transform: scale(1.035); }
.mic-button.is-recording { background: linear-gradient(145deg, #7a74e0, var(--electric-dark)); animation: micPulse 1.8s ease-in-out infinite; cursor: default; }
.mic-icon { position: relative; width: 29px; height: 39px; border: 4px solid currentColor; border-radius: 16px; }
.mic-icon::before { content: ""; position: absolute; width: 43px; height: 28px; left: -11px; bottom: -12px; border: 4px solid currentColor; border-top: 0; border-radius: 0 0 24px 24px; }
.mic-icon::after { content: ""; position: absolute; width: 4px; height: 13px; left: 9px; bottom: -23px; border-radius: 4px; background: currentColor; }
.sound-ring { position: absolute; z-index: 1; border: 1px solid rgba(61, 58, 140, 0.18); border-radius: 50%; }
.sound-ring--inner { width: 124px; height: 124px; background: rgba(61, 58, 140, 0.055); }
.sound-ring--outer { width: 162px; height: 162px; }
.recorder.is-recording .sound-ring { border-color: rgba(61, 58, 140, 0.28); animation: ringPulse 1.8s ease-out infinite; }
.recorder-status { position: absolute; bottom: 4px; margin: 0; color: var(--graphite); font-size: 14px; font-weight: 780; }
.recorder.is-recording .recorder-status { color: var(--electric-dark); }
.recording-time { position: absolute; bottom: -17px; color: var(--graphite); font-size: 12px; font-variant-numeric: tabular-nums; }
.pause-listening-button { position: absolute; z-index: 4; right: 0; bottom: 0; display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid rgba(61, 58, 140,.22); border-radius: 50%; color: var(--electric-dark); background: var(--paper); box-shadow: var(--shadow-soft); font-size: 16px; font-weight: 900; cursor: pointer; }
.pause-listening-button:hover { background: var(--electric-soft); }
.pause-listening-button[data-state="resume"] { color: #28725f; border-color: rgba(70, 171, 144, .28); }
.pause-listening-button[hidden] { display: none; }

.text-fallback { margin: 14px 0 14px; }
.map-portal-button { display: flex; width: 100%; min-height: 54px; margin: 18px 0 12px; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid rgba(61, 58, 140, .2); border-radius: 17px; color: var(--ink); background: rgba(255, 255, 255, .52); box-shadow: 0 10px 26px rgba(21, 44, 78, .05); cursor: pointer; text-align: left; }
.map-portal-button:hover { border-color: rgba(61, 58, 140, .42); background: var(--electric-soft); }
.map-portal-button[hidden] { display: none; }
.map-portal-button__mark { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; background: var(--electric-soft); }
.map-portal-button__mark i { width: 4px; border-radius: 99px; background: var(--electric); }.map-portal-button__mark i:nth-child(1) { height: 8px; }.map-portal-button__mark i:nth-child(2) { height: 15px; }.map-portal-button__mark i:nth-child(3) { height: 11px; }
.map-portal-button__copy { display: grid; gap: 1px; flex: 1; }.map-portal-button__copy strong { font-size: 14px; }.map-portal-button__copy small { color: var(--muted); font-size: 11px; }.map-portal-button__arrow { color: var(--electric-dark); font-size: 20px; font-weight: 800; }
.fallback-heading { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; }
.fallback-heading label, .sheet-label { font-size: 14px; font-weight: 820; }
.fallback-actions { display: flex; align-items: center; gap: 9px; }
.clear-dump-button { color: #a7483d; }
.clear-dump-button:disabled { opacity: .45; cursor: default; }
.live-pill { display: inline-flex; padding: 5px 8px; align-items: center; gap: 6px; border-radius: 999px; color: var(--electric-dark); background: var(--electric-soft); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.live-pill[hidden] { display: none; }
.live-pill > span { width: 7px; height: 7px; border-radius: 50%; background: var(--electric); animation: liveBlink 1.3s ease-in-out infinite; }
textarea {
  display: block;
  width: 100%;
  padding: 16px 17px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--night);
  background: rgba(253, 252, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  font-size: 16px;
  line-height: 1.5;
}
.capture-view textarea { min-height: 124px; background: var(--paper); }
.capture-view textarea.is-live { border-color: rgba(61, 58, 140, .38); box-shadow: 0 0 0 4px rgba(61, 58, 140, .07); }
.voice-input { position: relative; }
.voice-input textarea[hidden], .voice-visual[hidden] { display: none; }
.voice-visual { min-height: 130px; padding: 18px; border: 1px solid #dcd8f2; border-radius: 20px; background: linear-gradient(135deg,#fdfdff,#eef3ff); box-shadow: inset 0 1px 0 #fff; }
.voice-visual__heading { display: flex; align-items: center; gap: 8px; color: #4b47a8; font-size: 12px; }
.voice-visual__heading strong { flex: 1; font-weight: 750; }
.voice-visual__heading > span:last-child { font-variant-numeric: tabular-nums; color: #75829a; font-size: 11px; }
.voice-visual__dot { width: 6px; height: 6px; border-radius: 50%; background: #9baabd; }
[data-state="recording"] .voice-visual__dot { background: #5a55c4; box-shadow: 0 0 0 4px #5a55c410; }
.voice-wave { display: flex; height: 54px; gap: 3px; align-items: center; justify-content: center; margin: 8px 0; }
.voice-wave span { flex: 1; max-width: 5px; height: var(--wave-height,3px); border-radius: 9px; background: linear-gradient(#8f86ea,#4b47a8); transition: height 65ms linear; }
.voice-visual p { margin: 0; font-size: 10px; line-height: 1.5; text-align: center; color: #728098; }
.voice-transcribing { display: none; height: 54px; align-items: center; justify-content: center; gap: 7px; margin: 8px 0; }
.voice-transcribing span { width: 7px; height: 7px; border-radius: 50%; background: #5a55c4; animation: transcribingDot 1100ms ease-in-out infinite; }
.voice-transcribing span:nth-child(2) { animation-delay: 130ms; }
.voice-transcribing span:nth-child(3) { animation-delay: 260ms; }
[data-state="transcribing"] .voice-wave, [data-state="transcribing"] #voiceVisualTime { display: none; }
[data-state="transcribing"] .voice-transcribing { display: flex; }
@keyframes transcribingDot { 0%,70%,100% { opacity: .35; transform: translateY(0); } 35% { opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .voice-wave span { transition: none; }
  .voice-transcribing span { animation: none; opacity: .7; }
}
textarea::placeholder { color: #9b9f9c; }
.field-hint { margin: 9px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.ai-disclosure { margin: 8px 3px 0; color: var(--blue-deep, #3d3a8c); font-size: 11px; line-height: 1.4; }
.primary-button.is-listening { background: var(--night); box-shadow: 0 12px 26px rgba(28, 26, 61, .2); }

.auth-view, .profile-view { padding-top: 24px; }
.connection-status { display: flex; margin: -4px 0 14px; padding: 13px 14px; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: 15px; font-size: 12px; }
.connection-status--demo { background: rgba(253, 252, 255,.7); }
.connection-status--real { border-color: rgba(40,125,105,.18); background: var(--mint-soft); }
.connection-status--missing { border-color: rgba(184,73,60,.18); background: var(--coral-soft); }
.connection-status__dot { width: 9px; height: 9px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; background: #a5a29b; }
.connection-status--real .connection-status__dot { background: var(--mint-dark); }
.connection-status--missing .connection-status__dot { background: var(--coral); }
.connection-status strong { display: block; margin-bottom: 2px; }
.connection-status p { margin: 0; color: var(--muted); line-height: 1.4; }
.use-demo-button { width: 100%; margin: -3px 0 14px; }
.use-demo-button[hidden] { display: none; }
.auth-tabs { display: grid; margin-bottom: 14px; padding: 4px; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 15px; background: var(--ivory-deep); }
.auth-tab { min-height: 42px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.auth-tab.is-active { color: var(--night); background: var(--paper); box-shadow: 0 4px 13px rgba(28, 26, 61,.08); }
.account-card { display: grid; padding: 20px; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-soft); }
.account-field { display: grid; gap: 8px; }
.account-field[hidden] { display: none; }
.account-field > span { font-size: 13px; font-weight: 820; }
.account-field input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--night); background: var(--ivory); font: inherit; font-size: 16px; }
.account-field input::placeholder { color: #9b9f9c; }
.form-error { margin: -4px 0 0; color: #a7483d; font-size: 12px; line-height: 1.45; }
.form-error[hidden] { display: none; }
.form-error.is-success { color: var(--mint-dark); }
.auth-help-link { justify-self: center; }
.auth-special-panel[hidden], .auth-tabs[hidden], .account-card[hidden] { display: none; }
.auth-special-panel h2 { margin: -8px 0 -5px; font-size: 27px; }
.auth-panel-copy { margin: 0; color: var(--graphite); font-size: 13px; line-height: 1.5; }
.local-privacy-note { margin-top: 16px; padding: 16px 17px; border-radius: 17px; color: var(--graphite); background: rgba(135,219,197,.13); font-size: 12px; line-height: 1.5; }
.local-privacy-note strong { display: block; margin-bottom: 5px; color: var(--night); }
.local-privacy-note p { margin: 0 0 5px; }
.local-privacy-note p:last-child { margin-bottom: 0; }
.profile-intro { display: flex; margin-bottom: 24px; align-items: center; gap: 15px; }
.profile-intro h1 { margin: 0; }
.profile-intro .eyebrow { margin-bottom: 5px; }
.profile-avatar { display: grid; width: 64px; height: 64px; flex: 0 0 auto; place-items: center; border-radius: 22px; color: white; background: linear-gradient(145deg, var(--electric), var(--electric-dark)); box-shadow: 0 12px 25px rgba(61, 58, 140,.2); font-size: 24px; font-weight: 900; }
.profile-card { margin-bottom: 16px; }
.experience-profile-card { display: grid; margin-top: 16px; padding: 18px; gap: 14px; border: 1px solid rgba(40,125,105,.16); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--paper), rgba(228,247,240,.7)); box-shadow: var(--shadow-soft); }
.experience-profile-card__heading { display: flex; align-items: center; gap: 12px; }
.experience-profile-card__heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.experience-profile-card__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--mint-dark); background: var(--mint-soft); font-size: 18px; font-weight: 900; }
.experience-profile-actions { display: grid; gap: 8px; }
.experience-profile-actions .secondary-button { min-height: 44px; font-size: 12px; }
.calendar-profile-card { display: grid; margin-top: 16px; padding: 18px; gap: 14px; border: 1px solid rgba(61, 58, 140,.17); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--paper), var(--sky-soft)); box-shadow: var(--shadow-soft); }
.calendar-profile-card__heading { display: flex; align-items: center; gap: 12px; }
.calendar-profile-card__heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.calendar-profile-card__icon, .calendar-plan-button__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: white; background: var(--sky-deep); font-size: 19px; font-weight: 900; }
.calendar-privacy-copy { margin: -3px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.feedback-profile-card { display: grid; margin-top: 16px; padding: 18px; gap: 14px; border: 1px solid rgba(40,125,105,.17); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--paper), rgba(228,247,240,.7)); box-shadow: var(--shadow-soft); }
.feedback-profile-card__heading { display: flex; align-items: center; gap: 12px; }
.feedback-profile-card__heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.feedback-profile-card__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--mint-dark); background: var(--mint-soft); font-size: 18px; font-weight: 900; }
.admin-profile-card { display: grid; margin-top: 16px; padding: 18px; gap: 14px; border: 1px solid rgba(21,44,78,.16); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--paper), rgba(238,239,246,.72)); box-shadow: var(--shadow-soft); }
.admin-profile-card__heading { display: flex; align-items: center; gap: 12px; }
.admin-profile-card__heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.admin-profile-card__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--ink); background: rgba(21,44,78,.08); font-size: 18px; font-weight: 900; }
.admin-metrics-intro { margin: 0; color: var(--muted); line-height: 1.55; }
.admin-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.admin-metrics-grid article { display: grid; min-height: 108px; align-content: space-between; padding: 15px; border: 1px solid rgba(21,44,78,.1); border-radius: 16px; background: var(--paper); }
.admin-metrics-grid strong { color: var(--ink); font-size: 32px; line-height: 1; }
.admin-metrics-grid span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.history-card { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-soft); }
.history-card__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.history-card__heading span { color: var(--muted); font-size: 11px; }
.history-day { padding: 13px 0; border-bottom: 1px solid var(--line); }
.history-day:last-child { border-bottom: 0; padding-bottom: 0; }
.history-day strong { display: block; text-transform: capitalize; font-size: 13px; }
.history-day p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.profile-actions { display: grid; margin-top: 18px; gap: 10px; }
.dialog-actions { display: grid; margin-top: 22px; grid-template-columns: 1fr 1fr; gap: 10px; }
.danger-sheet > p { color: var(--graphite); font-size: 14px; line-height: 1.55; }

.thinking-view { display: grid; place-items: center; }
.thinking-center { max-width: 330px; text-align: center; }
.thinking-center h1 { font-size: 40px; }
.thinking-center > p:last-child { color: var(--muted); }
.thinking-mark { margin-bottom: 30px; box-shadow: var(--shadow); }

.review-list { display: grid; margin: 24px 0 18px; gap: 10px; }
.review-task { display: grid; min-height: 66px; padding: 12px 13px 12px 15px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow-soft); }
.review-task strong { display: block; font-size: 14px; line-height: 1.3; }
.review-task small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.review-actions { display: flex; align-items: center; gap: 4px; }
.review-icon-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--graphite); background: var(--ivory); cursor: pointer; }
.review-icon-button--delete { color: #a7483d; background: var(--coral-soft); border-color: rgba(184,73,60,.12); }
.review-back-button { display: block; margin: 17px auto 0; }

.daily-review-view { padding-top: 28px; }
.daily-summary, .carryover-note { margin: 20px 0 14px; padding: 13px 15px; border: 1px solid rgba(61, 58, 140,.16); border-radius: 16px; color: var(--electric-dark); background: var(--electric-soft); font-size: 13px; font-weight: 750; line-height: 1.4; }
.daily-carry-list { display: grid; gap: 10px; margin: 18px 0 22px; }
.daily-carry-task { display: grid; grid-template-columns: minmax(0, 1fr) 145px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-soft); }
.daily-carry-task strong { display: block; font-size: 14px; line-height: 1.3; }
.daily-carry-task small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.daily-carry-task select { width: 100%; padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--night); background: var(--ivory); font: inherit; font-size: 11px; font-weight: 750; }
.carryover-note { margin-top: -3px; color: var(--mint-dark); border-color: rgba(40,125,105,.16); background: var(--mint-soft); }
.plan-return-note { display: block; margin: 14px 0 10px; padding: 13px 15px; border: 1px solid rgba(61, 58, 140,.16); border-radius: 16px; color: var(--electric-dark); background: var(--electric-soft); }
.plan-return-note[hidden] { display: none; }
.plan-return-note strong { display: block; font-size: 13px; }
.plan-return-note p { margin: 3px 0 0; font-size: 12px; line-height: 1.35; }
.plan-return-note .text-button { display: inline-flex; margin: 8px -4px -4px; white-space: nowrap; }


.plan-view { padding-top: 22px; }
.day-actions { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 15px; }
.day-actions .text-button { padding: 5px 0; color: var(--electric-dark); font-size: 12px; font-weight: 800; }
.plan-header { display: flex; margin-bottom: 24px; align-items: flex-start; justify-content: space-between; gap: 16px; }
.plan-header h1 { margin: 0; font-size: clamp(33px, 8vw, 42px); }
.progress-orb { --progress: 0deg; display: grid; width: 68px; height: 68px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint-dark) var(--progress), rgba(28, 26, 61,.08) 0); position: relative; }
.progress-orb::after { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; background: var(--ivory); }
.progress-orb span { position: relative; z-index: 1; font-size: 12px; font-weight: 900; }
.plan-summary { display: flex; margin-bottom: 28px; padding: 13px 15px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 15px; background: rgba(253, 252, 255,.58); font-size: 12px; }
.plan-summary span { color: var(--muted); }
.daily-pulse { display: grid; margin: -14px 0 25px; padding: 13px 14px; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid rgba(40,125,105,.14); border-radius: 16px; color: var(--mint-dark); background: linear-gradient(135deg, rgba(228,247,240,.88), rgba(253, 252, 255,.86)); }
.daily-pulse[hidden] { display: none; }
.daily-pulse__mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--mint-dark); background: rgba(255,255,255,.7); font-size: 16px; }
.daily-pulse__eyebrow { margin: 0 0 2px; color: var(--mint-dark); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.daily-pulse strong { display: block; color: var(--night); font-size: 13px; line-height: 1.28; }
.daily-pulse p:last-child { margin: 3px 0 0; color: var(--graphite); font-size: 11px; line-height: 1.4; }
.plan-guidance { margin: -16px 4px 26px; color: var(--muted); font-size: 12px; line-height: 1.5; transition: color 220ms ease, transform 220ms ease; }
.plan-guidance.is-adapted { color: var(--mint-dark); font-weight: 750; animation: guidanceIn 420ms cubic-bezier(.2,.8,.2,1) both; }
/* HOY: la siguiente acción y el Top 3. El resto del día va plegado a propósito. */
.focus-now { margin: 0 0 18px; padding: 20px 18px 18px; border: 1px solid rgba(61, 58, 140,.18); border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--lavender-soft), var(--paper) 62%); box-shadow: 0 12px 30px rgba(61, 58, 140,.13); }
.focus-now[hidden] { display: none; }
.focus-now__eyebrow { margin: 0 0 6px; color: var(--electric-dark); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.focus-now__title { margin: 0 0 6px; color: var(--night); font-size: 23px; line-height: 1.16; }
.focus-now__meta { margin: 0 0 16px; color: var(--graphite); font-size: 12px; }
.focus-now__actions { display: flex; align-items: center; gap: 14px; }
.focus-now__done { min-height: 48px; flex: 1; }
.focus-now__skip { flex: 0 0 auto; color: var(--graphite); font-size: 12px; }
.top-three { margin: 0 0 22px; padding: 16px 15px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-soft); }
.top-three[hidden] { display: none; }
.top-three__header { display: flex; margin-bottom: 4px; align-items: baseline; justify-content: space-between; gap: 12px; }
.top-three__header h2 { margin: 0; font-size: 17px; }
.top-three__progress { color: var(--electric-dark); font-size: 12px; font-weight: 900; }
.top-three__hint { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.top-three__hint[hidden] { display: none; }
.top-three__list { display: grid; gap: 8px; }
.top-three__item { display: flex; width: 100%; min-height: 54px; padding: 10px 12px; align-items: center; gap: 11px; border: 1px solid rgba(28, 26, 61,.08); border-radius: var(--radius-md); background: var(--ivory); font: inherit; text-align: left; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, opacity 220ms ease; }
.top-three__item:hover { border-color: rgba(61, 58, 140,.28); background: var(--electric-soft); }
.top-three__item:focus-visible { outline: 3px solid rgba(61, 58, 140,.28); outline-offset: 3px; }
.top-three__item.is-done { opacity: .55; background: rgba(228,247,240,.7); }
.top-three__item.is-done strong { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.top-three__check { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 1.5px solid #bcc3c5; border-radius: 50%; color: white; font-size: 13px; font-weight: 900; }
.top-three__item:nth-child(1) .top-three__check { border-color: var(--electric); }
.top-three__item:nth-child(2) .top-three__check { border-color: var(--rose); }
.top-three__item:nth-child(3) .top-three__check { border-color: var(--sun); }
.top-three__item:nth-child(2):hover { border-color: rgba(226,122,166,.4); background: var(--rose-soft); }
.top-three__item:nth-child(3):hover { border-color: rgba(245,196,81,.5); background: var(--sun-soft); }
.top-three__item.is-done .top-three__check { border-color: var(--mint-dark); background: var(--mint-dark); }
.top-three__copy { min-width: 0; }
.top-three__copy strong { display: block; color: var(--night); font-size: 14px; line-height: 1.25; }
.top-three__copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.top-three__confirm { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.top-three__confirm[hidden] { display: none; }
.top-three__confirm p { margin: 0 0 10px; color: var(--night); font-size: 13px; font-weight: 750; }
.top-three__confirm-actions { display: flex; align-items: center; gap: 14px; }
.top-three__confirm-actions .primary-button { min-height: 46px; flex: 1; }
.top-three__done { margin-top: 14px; padding: 13px 14px; border: 1px solid rgba(40,125,105,.16); border-radius: 16px; background: var(--mint-soft); }
.top-three__done[hidden] { display: none; }
.top-three__done strong { display: block; color: var(--mint-dark); font-size: 15px; }
.top-three__done p { margin: 4px 0 0; color: var(--graphite); font-size: 12px; line-height: 1.45; }
.focus-change { min-height: 44px; margin-top: 10px; }
.focus-picker { max-height: 85dvh; overflow-y: auto; }
.illustration-defs { position: absolute; pointer-events: none; }
.usage-streak { position: relative; width: 100%; min-height: 74px; display: flex; align-items: center; gap: 11px; margin: 0 0 22px; padding: 11px 14px; border: 1px solid #efcea0; border-radius: 20px; color: #72340e; background: linear-gradient(115deg,#fff9ed,#ffedcf); box-shadow: 0 3px 0 #efd7b1, inset 0 1px 0 #fff; text-align: left; cursor: pointer; transition: transform 180ms, box-shadow 180ms; }
.usage-streak:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #efd7b1,0 8px 20px #c7891910; }
.usage-streak:active { transform: translateY(2px); box-shadow: 0 1px 0 #efd7b1; }
.usage-streak .streak-flame { width: 38px; height: 46px; flex-shrink: 0; filter: drop-shadow(0 3px 2px #bd672622); }
.usage-streak__copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.usage-streak__copy strong { font-size: 17px; line-height: 1.15; letter-spacing: -.5px; font-weight: 900; }
.usage-streak__copy small { font-size: 10px; color: #815325; }
.usage-streak__trail { display: grid; gap: 7px; justify-items: end; flex-shrink: 0; }
.usage-streak__trail small { font-size: 10px; color: #865629; font-weight: 700; }
[data-streak-mini] { display: flex; gap: 3px; }
[data-streak-mini] i { width: 7px; height: 11px; background: #e6d4b8; border-radius: 4px; }
[data-streak-mini] i.is-active { background: linear-gradient(#ffa546,#ee692b); box-shadow: inset 0 1px 0 #ffce70; }
.usage-streak.is-earned .streak-flame { animation: flameEarn 1100ms cubic-bezier(.16,1,.3,1) both; }
.usage-streak.is-earned [data-streak-count] { animation: countEarn 700ms 220ms both; }
.streak-sheet .sheet__surface { background: radial-gradient(ellipse at 50% 12%,#fff0d1,transparent 58%),var(--ivory); }
.streak-sheet .sheet__header { align-items: center; margin-bottom: 0; }
.streak-sheet .eyebrow { color: #9a5725; font-size: 10px; }
.streak-hero { position: relative; display: grid; justify-items: center; padding-top: 2px; }
.streak-hero__halo { position: absolute; width: 170px; height: 170px; top: -20px; border-radius: 50%; background: radial-gradient(#ffc86844,transparent 70%); }
.streak-hero > .streak-flame { width: 78px; height: 94px; filter: drop-shadow(0 8px 12px #df8a2922); }
.streak-sheet[open] .streak-hero > .streak-flame { animation: flameEarn 1000ms cubic-bezier(.16,1,.3,1) both; }
.streak-hero > strong { font-size: 68px; line-height: 1; letter-spacing: -4px; font-weight: 950; color: #cf591f; margin: 3px 0; }
.streak-hero h2 { font-size: 18px; margin: 0; color: #8a431f; }
.streak-today { margin-top: 12px; padding: 5px 10px; color: #39785a; background: #e4f1e7; border-radius: 99px; font-size: 11px; font-weight: 750; }
#streakMessage { text-align: center; font-size: 12px; color: #7c674f; margin: 14px 0 0; }
.streak-week { list-style: none; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; padding: 0; margin: 20px 0; }
.streak-day { display: grid; justify-items: center; gap: 8px; }
.streak-day small { font-size: 11px; color: #776855; }
.streak-day span { display: grid; place-items: center; width: 32px; height: 36px; border-radius: 12px; background: #eee8dd; border: 1px solid #e4daca; color: #8f8474; }
.streak-day.is-active span { background: linear-gradient(#ffb74b,#f78c32); border-color: #e78428; color: #63300d; font-weight: 900; box-shadow: 0 3px 0 #dc7927; }
.streak-goal { padding: 14px 16px; border: 1px solid #eadcc5; border-radius: 16px; background: #fffcf6; }
.streak-goal > div { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#775030; }
.streak-goal progress { appearance:none; width:100%; height:9px; display:block; margin:11px 0 8px; border:0; border-radius:99px; overflow:hidden; background:#e8e5f3; accent-color:#f29a36; }
.streak-goal progress::-webkit-progress-bar { background:#e8e5f3; }
.streak-goal progress::-webkit-progress-value { background:linear-gradient(90deg,#ffbd54,#f3872c); border-radius:99px; }
.streak-goal progress::-moz-progress-bar { background:#f29a36; border-radius:99px; }
.streak-goal p { font-size:11px; color:#87694b; margin:0; }
.streak-record { display: flex; justify-content: space-between; padding: 14px 0 8px; margin-bottom: 8px; font-size:12px; color:#7c674f; }
.day-drawer { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); width: min(328px,calc(100% - 40px)); padding: 12px 16px 24px; border: 1px solid #dbe3f2; border-radius: 30px; background: linear-gradient(155deg,#fefdff,#f1f5ff); box-shadow: 0 25px 70px #283e6430,0 5px 16px #283e6410,inset 0 1px 0 white; text-align: center; pointer-events: none; }
.day-drawer[hidden] { display: none; }
.day-drawer__scene { display:block; width:100%; height:184px; overflow:visible; }
.day-drawer__paper, .day-drawer__front, .drawer-seal, .drawer-sparks { transform-box:fill-box; transform-origin:center; }
.day-drawer__copy > span { display:block; font-size:9px; font-weight:850; letter-spacing:1.8px; color:#6b8baf; margin:2px 0 9px; }
.day-drawer__copy > strong { display:block; font-size:23px; letter-spacing:-.7px; color:#2c2a6b; }
.day-drawer__copy > p { font-size:12px; margin:7px 0 0; color:#6c7a8a; }
.day-drawer.is-closing { animation: drawerCard 3000ms both; }
.day-drawer.is-closing .drawer-paper-back { animation: archivePaper 1300ms 80ms cubic-bezier(.65,0,.25,1) both; }
.day-drawer.is-closing .drawer-paper-main { animation: archivePaper 1300ms 200ms cubic-bezier(.65,0,.25,1) both; }
.day-drawer.is-closing .day-drawer__front { animation: archiveClose 1700ms cubic-bezier(.3,.75,.25,1) both; }
.day-drawer.is-closing .drawer-lid { animation: archiveLid 250ms 1250ms both; }
.day-drawer.is-closing .drawer-seal { animation: archiveSeal 700ms 1450ms cubic-bezier(.16,1,.3,1) both; }
.day-drawer.is-closing .drawer-sparks { animation: archiveSpark 950ms 1480ms ease-out both; }
.day-drawer.is-closing .day-drawer__copy { animation: archiveCopy 450ms 1000ms both; }
@keyframes flameEarn { 0% { transform:translateY(7px) scale(.55,.75) rotate(-9deg); opacity:.35; } 45% { transform:translateY(-3px) scale(1.1,1.05) rotate(4deg); opacity:1; } 72% { transform:scale(.98,1.02) rotate(-2deg); } 100% { transform:none; opacity:1; } }
@keyframes countEarn { from { transform:translateY(5px); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes drawerCard { 0% { opacity:0; transform:translate(-50%,18px) scale(.95); } 12%,86% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,6px) scale(.98); } }
@keyframes archivePaper { 0% { transform:translateY(-13px) rotate(-8deg); } 25% { transform:translateY(-21px) rotate(-3deg); } 75%,100% { transform:translateY(70px) scale(.88) rotate(0); } }
@keyframes archiveClose { 0%,16% { transform:translateY(0); } 35%,58% { transform:translateY(20px); } 83% { transform:translateY(-3px); } 100% { transform:none; } }
@keyframes archiveSeal { 0% { transform:scale(0) rotate(-22deg); opacity:0; } 60% { transform:scale(1.14) rotate(4deg); opacity:1; } 100% { transform:none; opacity:1; } }
@keyframes archiveLid { from { opacity:0; } to { opacity:1; } }
@keyframes archiveSpark { 0% { transform:scale(.6); opacity:0; } 35% { opacity:1; } 100% { transform:scale(1.15); opacity:0; } }
@keyframes archiveCopy { from { transform:translateY(5px); opacity:0; } to { transform:none; opacity:1; } }
@media (max-width:374px) { .usage-streak { padding:10px; gap:8px; } .usage-streak__copy strong { font-size:16px; } .usage-streak__copy small { font-size:9px; } .usage-streak__trail small { font-size:9px; } }
@media (prefers-reduced-motion: reduce) {
  .usage-streak, .usage-streak *, .streak-sheet[open] .streak-flame, .day-drawer.is-closing, .day-drawer.is-closing * { animation:none !important; transition:none !important; }
  .day-drawer.is-closing .day-drawer__paper { transform:translateY(70px) scale(.88); }
}
.focus-picker__selected { padding: 0; list-style: none; display: grid; gap: 8px; }
.focus-picker__selected li { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--electric-soft); border-radius: 12px; }
.focus-picker__selected span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.focus-picker__selected button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--night); }
.focus-picker__options { display: grid; gap: 8px; }
.focus-picker__option { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.focus-picker__option input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--electric-dark); }
.focus-picker__option span { min-width: 0; overflow-wrap: anywhere; }
.focus-picker__option strong, .focus-picker__option small { display: block; }
.focus-picker__option small { color: var(--muted); font-size: 12px; margin-top: 4px; }
.audio-recovery { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ivory); }
.audio-recovery[hidden] { display: none; }
.audio-recovery p { font-size: 13px; line-height: 1.5; }
.audio-recovery button { min-height: 44px; margin: 4px 0; }
.rest-of-day { margin-bottom: 8px; }
.rest-of-day__summary { display: flex; min-height: 48px; padding: 12px 15px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--graphite); background: var(--paper); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.rest-of-day__summary::-webkit-details-marker { display: none; }
.rest-of-day__summary::after { content: "\25BE"; color: var(--electric-dark); font-size: 14px; transition: transform 200ms ease; }
.rest-of-day[open] .rest-of-day__summary { margin-bottom: 22px; }
.rest-of-day[open] .rest-of-day__summary::after { transform: rotate(180deg); }
.timeline { position: relative; display: grid; gap: 31px; }
.timeline.is-reordering { user-select: none; }
.timeline::before { content: ""; position: absolute; top: 15px; bottom: 16px; left: 7px; width: 1px; background: linear-gradient(var(--electric), var(--mint), rgba(28, 26, 61,.1)); }
.time-group { position: relative; }
.time-group[hidden] { display: none; }
.time-group__heading { display: flex; margin-bottom: 12px; align-items: center; gap: 14px; }
.time-group__heading h2 { margin: 0 0 2px; font-size: 19px; }
.time-group__heading p { margin: 0; color: var(--muted); font-size: 11px; }
.time-indicator { position: relative; z-index: 1; width: 15px; height: 15px; flex: 0 0 auto; border: 4px solid var(--ivory); border-radius: 50%; box-shadow: 0 0 0 1px rgba(28, 26, 61,.06); }
.time-indicator--now { background: var(--electric); }
.time-indicator--next { background: var(--mint); }
.time-indicator--later { background: #b8b5ad; }
.time-indicator--completed { display: grid; place-items: center; color: white; background: var(--mint-dark); font-size: 8px; font-weight: 900; }
.time-group--completed { margin-top: 8px; opacity: .78; }
.task-list { display: grid; min-height: 32px; margin-left: 28px; gap: 10px; border-radius: var(--radius-md); transition: min-height 180ms ease, background 180ms ease; }
.task-list--completed { padding-bottom: 4px; }
.timeline.is-reordering .task-list { min-height: 64px; padding: 5px; background: rgba(61, 58, 140,.045); outline: 1px dashed rgba(61, 58, 140,.2); outline-offset: -1px; }
.timeline.is-reordering .task-list:empty::after { content: "Suelta aquí"; display: grid; min-height: 54px; place-items: center; color: var(--electric-dark); font-size: 11px; font-weight: 750; }
.task-card { position: relative; display: grid; min-height: 86px; padding: 15px 14px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; overflow: visible; border: 1px solid rgba(28, 26, 61,.08); border-radius: var(--radius-md); background: var(--paper); box-shadow: 0 6px 19px rgba(28, 26, 61,.055); transition: opacity 300ms ease, transform 300ms ease, background 300ms ease, box-shadow 180ms ease; }
.task-card.just-added { animation: taskIn 430ms cubic-bezier(.2,.8,.2,1) both; }
.task-card.is-dragging { opacity: .4; transform: scale(.98); }
.task-card.is-lifted { z-index: 10; box-shadow: 0 18px 34px rgba(28, 26, 61,.18); transform: scale(1.02) rotate(.4deg); }
.task-card.is-completing { background: var(--mint-soft); transform: scale(.985); }
.task-card.is-complete { opacity: .58; background: rgba(228,247,240,.7); }
.task-card.is-complete h3 { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.check-button { display: grid; width: 31px; height: 31px; flex: 0 0 auto; padding: 0; place-items: center; border: 1.5px solid #bcc3c5; border-radius: 50%; color: transparent; background: transparent; cursor: pointer; transition: background 220ms ease, border 220ms ease, color 220ms ease, transform 220ms ease; }
.check-button:hover { border-color: var(--mint-dark); transform: scale(1.08); }
.task-card.is-complete .check-button, .task-card.is-completing .check-button { border-color: var(--mint-dark); color: white; background: var(--mint-dark); }
.task-card__body { min-width: 0; flex: 1; cursor: pointer; border-radius: 10px; }
.task-card__body > h3 { padding-right: 42px; }
.task-card__body:focus-visible { outline: 3px solid rgba(61, 58, 140,.28); outline-offset: 4px; }
.task-card h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.25; }
.task-card p { margin: 0; color: var(--muted); font-size: 11px; }
.task-subtasks { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(28, 26, 61,.08); cursor: default; }
.task-subtasks[hidden] { display: none; }
.task-subtasks__progress { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.task-subtasks ul { display: grid; margin: 0; padding: 0; gap: 6px; list-style: none; }
.subtask-item { display: flex; min-height: 30px; padding: 4px 2px; align-items: center; gap: 9px; color: var(--graphite); font-size: 12px; line-height: 1.3; cursor: pointer; }
.subtask-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subtask-check { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border: 1.5px solid #aeb8ba; border-radius: 6px; color: transparent; background: var(--ivory); transition: all 180ms ease; }
.subtask-item input:checked + .subtask-check { color: white; border-color: var(--mint-dark); background: var(--mint-dark); transform: scale(.96); }
.subtask-item input:focus-visible + .subtask-check { outline: 3px solid rgba(61, 58, 140,.25); outline-offset: 2px; }
.subtask-item input:checked ~ .subtask-title { color: var(--muted); text-decoration: line-through; }
.urgency-badge { padding: 5px 7px; border-radius: 7px; color: #a7483d; background: var(--coral-soft); font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.task-more-button { position: absolute; top: 11px; right: 11px; display: grid; width: 31px; height: 31px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 10px; color: var(--graphite); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.task-more-button:hover, .task-more-button:focus-visible { border-color: rgba(61, 58, 140,.2); color: var(--electric-dark); background: var(--electric-soft); }
.task-delete-button { position: absolute; top: 11px; right: 46px; display: grid; width: 31px; height: 31px; padding: 0; place-items: center; border: 1px solid rgba(184,73,60,.14); border-radius: 10px; color: #a7483d; background: var(--coral-soft); cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.task-delete-button:hover, .task-delete-button:focus-visible { border-color: rgba(184,73,60,.32); background: #fde1dc; transform: scale(1.04); }
.urgency-badge, .task-delete-button { display: none !important; }
.task-card__controls { position: absolute; right: 10px; bottom: 5px; display: flex; gap: 4px; }
.task-card__controls[hidden] { display: none; }
.task-card:not(.is-complete) { padding-bottom: 52px; }
.task-reminder-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #89918f; cursor: pointer; }
.task-reminder-button[data-reminder-state="on"] { color: #21836b; }
.task-reminder-button[data-reminder-state="off"] { color: #b44d44; }
.task-reminder-button:not([data-reminder-state="off"]) .bell-off-stroke { display: none; }
.task-reminder-button:hover { background: rgba(28, 26, 61,.04); }
.task-reminder-button:focus-visible, .drag-handle:focus-visible { outline: 3px solid var(--electric); outline-offset: 2px; }
.task-notify-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin-top: 12px; color: var(--night); font-weight: 750; cursor: pointer; }
.task-notify-switch small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.task-notify-switch input { appearance: none; flex: 0 0 44px; width: 44px; height: 26px; border: 0; border-radius: 20px; background: #bcc3c5; cursor: pointer; }
.task-notify-switch input::before { content: ""; display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: white; transition: transform 160ms ease; }
.task-notify-switch input:checked { background: #21836b; }
.task-notify-switch input:checked::before { transform: translateX(18px); }
.task-notify-switch input:disabled { opacity: .45; cursor: wait; }
.task-notify-switch input:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
#editTaskForm .sheet__header { margin-bottom: 18px; }
.task-editor-schedule { padding: 14px; margin-bottom: 22px; border: 1px solid rgba(61, 58, 140,.12); border-radius: 20px; background: rgba(253, 252, 255,.8); }
.task-editor-schedule .task-notify-switch { margin: 0 0 14px; }
.task-editor-schedule .field-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
.task-editor-schedule input[type="datetime-local"] { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; font: inherit; font-size: 14px; }
#editTaskForm > .sheet-input, #editTaskForm > .sheet-label { margin-bottom: 12px; }
#editTaskForm .subtask-textarea { min-height: 96px; }
#editTaskForm > .primary-button { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .task-notify-switch input::before { transition: none; } }
.task-card__controls .move-up,
.task-card__controls .move-down,
.task-card__controls .group-picker { display: none; }
.reorder-button { display: grid; width: 32px; height: 30px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--graphite); background: var(--ivory); font-weight: 850; cursor: pointer; }
.reorder-button:hover:not(:disabled) { color: var(--electric-dark); border-color: rgba(61, 58, 140,.28); background: var(--electric-soft); }
.reorder-button:disabled { opacity: .3; cursor: not-allowed; }
.drag-handle { width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--electric-dark); background: transparent; touch-action: none; cursor: grab; }
.drag-handle:active { cursor: grabbing; transform: scale(.96); }
.task-card__body > h3 { padding-right: 48px; }
@media (hover: hover) and (pointer: fine) { .drag-handle { opacity: .66; } .task-card:hover .drag-handle, .drag-handle:focus-visible { opacity: 1; } }
.group-picker { min-width: 0; }
.move-group { width: 100%; height: 32px; padding: 0 25px 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--night); background: var(--ivory); font-size: 11px; font-weight: 750; cursor: pointer; }
.drop-marker { height: 5px; margin: -2px 5px; border-radius: 999px; background: var(--electric); box-shadow: 0 0 0 4px rgba(61, 58, 140,.12); pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.empty-day { padding: 55px 20px; text-align: center; }
.empty-day__check { display: grid; width: 76px; height: 76px; margin: 0 auto 20px; place-items: center; border-radius: 50%; color: white; background: var(--mint-dark); box-shadow: 0 14px 30px rgba(40,125,105,.22); font-size: 34px; animation: completePop 520ms cubic-bezier(.2,.9,.25,1.2) both; }
.empty-day h2 { margin-bottom: 7px; font-size: 26px; }
.empty-day p { color: var(--muted); }
.bottom-spacer { height: 92px; }

.action-dock { position: fixed; z-index: 30; bottom: 0; left: 50%; display: grid; width: min(100%, 520px); padding: 12px 20px var(--safe-bottom); grid-template-columns: 1fr 1.18fr; gap: 10px; background: linear-gradient(to top, var(--ivory) 76%, rgba(247,241,231,0)); transform: translateX(-50%); }
.dock-button { display: flex; min-height: 52px; padding: 12px 14px; align-items: center; justify-content: center; gap: 7px; border-radius: 17px; font-size: 13px; font-weight: 850; cursor: pointer; }
.dock-button span { font-size: 18px; }
.dock-button--secondary { border: 1px solid var(--line); background: var(--paper); }
.dock-button--primary { border: 0; color: white; background: var(--electric); box-shadow: 0 10px 23px rgba(61, 58, 140,.24); }

.sheet { width: min(calc(100% - 24px), 496px); max-width: none; max-height: min(78svh, 660px); margin: auto auto 12px; padding: 0; overflow: visible; border: 0; border-radius: 29px; color: var(--night); background: transparent; }
.sheet::backdrop { background: rgba(28, 26, 61,.36); backdrop-filter: blur(5px); }
.sheet[open] { animation: sheetIn 330ms cubic-bezier(.2,.8,.2,1) both; }
.sheet__surface { max-height: min(78svh, 660px); padding: 10px 20px calc(22px + var(--safe-bottom)); overflow-y: auto; border-radius: 29px; background: var(--ivory); box-shadow: var(--shadow); }
.sheet__handle { width: 38px; height: 4px; margin: 1px auto 18px; border-radius: 4px; background: rgba(28, 26, 61,.18); }
.sheet__header { display: flex; margin-bottom: 22px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet__header h2 { margin: 0; font-size: 27px; }
.sheet__header .eyebrow { margin-bottom: 5px; }
.sheet-label { display: block; margin-bottom: 9px; }
.task-delete-sheet-button { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid rgba(184,73,60,.18); border-radius: 14px; color: #a7483d; background: var(--coral-soft); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
.delete-task-copy { margin: 0 0 13px; color: var(--graphite); font-size: 14px; line-height: 1.5; }
.delete-task-name { display: block; padding: 13px 15px; border: 1px solid rgba(184,73,60,.15); border-radius: 14px; color: var(--night); background: var(--paper); font-size: 14px; line-height: 1.4; }
.delete-task-calendar-note { margin: 13px 1px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sheet-label-row { display: flex; margin-bottom: 9px; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-label-row .sheet-label { margin: 0; }
.voice-input-button {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 11px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(40, 125, 105, .18);
  border-radius: 999px;
  color: var(--mint-dark);
  background: var(--mint-soft);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.voice-input-button span { color: var(--coral); font-size: 10px; }
.voice-input-button.is-listening { color: white; border-color: var(--night); background: var(--night); }
.voice-input-button.is-listening span { color: var(--mint); animation: liveBlink 1.1s ease-in-out infinite; }
.sheet-input, .sheet-select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--night); background: var(--paper); font: inherit; font-size: 15px; }
.task-schedule-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.task-schedule-fields > label, .task-schedule-fields input { min-width: 0; max-width: 100%; }
@media (max-width: 400px) { .task-schedule-fields { grid-template-columns: 1fr; gap: 0; } }
.task-schedule-fields .sheet-label { margin-bottom: 13px; }
.task-schedule-fields .sheet-input { margin-top: 7px; }
.calendar-plan-button { display: grid; width: 100%; min-height: 64px; margin: -13px 0 27px; padding: 11px 13px; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; border: 1px solid rgba(61, 58, 140,.18); border-radius: 17px; color: var(--night); text-align: left; background: var(--paper); box-shadow: 0 7px 18px rgba(28, 26, 61,.05); cursor: pointer; }
.calendar-plan-button strong, .calendar-plan-button small { display: block; }
.calendar-plan-button strong { margin-bottom: 3px; font-size: 13px; }
.calendar-plan-button small { color: var(--muted); font-size: 10px; }
.calendar-plan-button__icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.calendar-plan-button:hover { border-color: rgba(61, 58, 140,.38); transform: translateY(-1px); }
.feedback-link-button { display: flex; min-height: 40px; margin: -14px auto 26px; padding: 8px 13px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 999px; color: var(--mint-dark); background: rgba(135,219,197,.18); font-size: 12px; font-weight: 850; cursor: pointer; }
.feedback-link-button:hover { background: var(--mint-soft); }
.feedback-intro { margin: 0 0 16px; color: var(--graphite); font-size: 13px; line-height: 1.5; }
.feedback-options { display: grid; margin: 0 0 17px; padding: 0; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
.feedback-options[hidden] { display: none; }
.feedback-options legend { width: 100%; margin-bottom: 9px; color: var(--night); font-size: 12px; font-weight: 850; }
.feedback-options label { position: relative; cursor: pointer; }
.feedback-options input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-options span { display: flex; min-height: 48px; padding: 10px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 13px; color: var(--graphite); text-align: center; background: var(--paper); font-size: 12px; font-weight: 780; line-height: 1.25; }
.feedback-options input:checked + span { color: var(--electric-dark); border-color: rgba(61, 58, 140,.45); background: var(--electric-soft); box-shadow: 0 5px 14px rgba(61, 58, 140,.08); }
.feedback-options input:focus-visible + span { outline: 3px solid rgba(61, 58, 140,.22); outline-offset: 2px; }
.feedback-options--rating { grid-template-columns: repeat(3, 1fr); }
.feedback-textarea { width: 100%; min-height: 105px; padding: 13px 14px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; color: var(--night); background: var(--paper); font: inherit; font-size: 15px; line-height: 1.45; }
.feedback-privacy { margin: 10px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sheet .primary-button { margin-top: 15px; }
.subtask-field-label { margin-top: 17px; }
.subtask-field-label span { color: var(--muted); font-size: 11px; font-weight: 600; }
.subtask-textarea { width: 100%; min-height: 92px; padding: 13px 14px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; color: var(--night); background: var(--paper); font: inherit; font-size: 15px; line-height: 1.45; }
.calendar-sheet .sheet__surface { min-height: 330px; }
.calendar-state { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 12px; color: var(--muted); text-align: center; }
.calendar-state[hidden] { display: none; }
.calendar-state__loader { width: 30px; height: 30px; border: 3px solid rgba(31, 106, 153,.18); border-top-color: var(--sky-deep); border-radius: 50%; animation: spin 800ms linear infinite; }
.calendar-explainer { padding: 16px; border: 1px solid rgba(61, 58, 140,.15); border-radius: 16px; background: var(--electric-soft); }
.calendar-explainer p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.calendar-refresh-button { width: 100%; margin-top: 10px; }
.calendar-notice { margin: 14px 1px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.calendar-blocks { display: grid; gap: 9px; }
.calendar-block { display: grid; padding: 13px; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.calendar-block.is-selected { border-color: rgba(61, 58, 140,.42); background: var(--electric-soft); box-shadow: 0 8px 22px rgba(61, 58, 140,.08); }
.calendar-block.is-unscheduled { border-color: rgba(223,112,98,.25); background: var(--coral-soft); }
.calendar-block input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--electric); }
.calendar-block__copy strong, .calendar-block__copy small { display: block; }
.calendar-block__copy strong { font-size: 13px; line-height: 1.35; }
.calendar-block__copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.calendar-block__time { width: 100%; min-height: 40px; margin-top: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--night); background: var(--ivory); font: inherit; font-size: 13px; }
.calendar-selection-summary { margin: 13px 1px 8px; color: var(--night); font-size: 12px; font-weight: 800; text-align: center; }
.calendar-success { padding: 18px 0 4px; text-align: center; }
.calendar-success[hidden] { display: none; }
.calendar-success > span { display: grid; width: 65px; height: 65px; margin: 0 auto 15px; place-items: center; border-radius: 50%; color: white; background: var(--mint-dark); font-size: 28px; }
.calendar-success h3 { margin: 0 0 7px; font-size: 23px; }
.calendar-success p { margin: 0 0 18px; color: var(--muted); }
.install-instructions { display: flex; padding: 15px; align-items: flex-start; gap: 13px; border: 1px solid rgba(61, 58, 140,.14); border-radius: 17px; background: var(--electric-soft); }
.install-instructions p { margin: 0; color: var(--graphite); font-size: 13px; line-height: 1.55; }
.done-options { display: grid; gap: 9px; }
.done-option { display: flex; width: 100%; padding: 15px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 16px; text-align: left; background: var(--paper); cursor: pointer; }
.done-option span:first-child { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--mint-dark); background: var(--mint-soft); }
.done-option span:last-child { font-weight: 750; }
.done-options__empty { padding: 25px; color: var(--muted); text-align: center; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 102px; width: max-content; max-width: calc(100% - 40px); padding: 12px 16px; border-radius: 14px; color: white; background: var(--night); box-shadow: var(--shadow); font-size: 13px; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 220ms ease, transform 220ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.task-celebration { position:fixed; inset:0; z-index:90; overflow:hidden; pointer-events:none; }
.completion-reward { position:absolute; z-index:2; top:calc(78px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid #b9e2d3; border-radius:22px; background:linear-gradient(120deg,#fefdff,#e9f8ef); box-shadow:0 12px 36px #205d4224,inset 0 1px 0 white; }
.completion-reward__check { flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:white; font-size:24px; font-weight:900; background:linear-gradient(#71cba7,#369a79); box-shadow:0 3px 0 #2c8064,inset 0 1px 0 #a4e2c7; }
.completion-reward > div { min-width:0; }
.completion-reward strong { display:block; font-size:15px; letter-spacing:-.35px; color:#235941; }
.completion-reward small { display:block; max-width:240px; margin-top:4px; font-size:11px; color:#567564; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.completion-reward.is-streak { border-color:#f4c98a; background:linear-gradient(120deg,#fffaf0,#ffe9c7); box-shadow:0 14px 40px #b8741f2e,inset 0 1px 0 white; }
.completion-reward.is-streak strong { color:#9a4f12; font-size:16px; }
.completion-reward.is-streak small { color:#8a6a45; }
.completion-reward.is-streak .completion-reward__check { background:linear-gradient(#ffb46b,#f07a3a); box-shadow:0 3px 0 #c45a22,inset 0 1px 0 #ffd3a6; }
.completion-confetti { position:absolute; will-change:transform,opacity; }
.completion-energy { position:absolute; width:54px; height:54px; border:2px solid #6dbda2; border-radius:50%; box-shadow:0 0 28px #8ae3bd55; }

@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes micPulse { 50% { box-shadow: 0 20px 45px rgba(236,140,125,.42), inset 0 1px 0 rgba(255,255,255,.25); } }
@keyframes ringPulse { 0% { transform: scale(.9); opacity: .2; } 60% { opacity: .75; } 100% { transform: scale(1.16); opacity: 0; } }
@keyframes equalize { 0%,100% { transform: scaleY(.65); } 50% { transform: scaleY(1.12); } }
@keyframes liveBlink { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes taskIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes guidanceIn { from { opacity: .55; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes completePop { from { opacity: 0; transform: scale(.55) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 521px) {
  body { padding: 22px 0; }
  .app-shell { min-height: calc(100svh - 44px); border-radius: 36px; }
  .welcome-content, .welcome-view { height: calc(100dvh - 44px); min-height: calc(100svh - 44px); }
  .action-dock { bottom: 22px; border-radius: 0 0 36px 36px; }
}

@media (max-height: 720px) {
  .welcome-content { padding-top: 38px; }
  .welcome-copy { margin: 28px 0; }
  .brand-logo--hero { transform: scale(.82); }
  .recorder { min-height: 180px; }
  .mic-button { width: 90px; height: 90px; }
  .sound-ring--inner { width: 120px; height: 120px; }
  .sound-ring--outer { width: 150px; height: 150px; }
}

/* En pantallas Android angostas los botones nunca deben reducir el texto a
   una columna de palabras. Las acciones pasan debajo del contenido. */
@media (max-width: 480px) {
  .task-card {
    grid-template-columns: 31px minmax(0, 1fr);
    min-height: 86px;
    align-items: center;
  }
  .task-card__body { grid-column: 2; }
  .task-card__body > h3 { padding-right: 42px; font-size: 16px; line-height: 1.3; }
  .task-card__body > p { font-size: 12px; line-height: 1.35; }
  .check-button { align-self: center; }
  .task-more-button { top: 13px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
/* Saving is a persistent status, not a toast that disappears on slow networks. */
.workspace-sync-status {
  margin: 12px 20px;
  padding: 12px 16px;
  border: 1px solid #e5b7a8;
  border-radius: 18px;
  background: #fff5ec;
  color: #1c1a3d;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 15px;
}
.workspace-sync-status[hidden] { display: none; }
.workspace-sync-status span { flex: 1 1 220px; }
.welcome-install { margin: 12px auto 0; max-width: 420px; text-align: center; }
.welcome-install p { margin: 8px 0; font-size: 14px; line-height: 1.5; color: #536071; }
.welcome-install button { min-height: 46px; }
.workspace-conflict-item { margin-top: 16px; padding: 16px; border: 1px solid #dedbd4; border-radius: 16px; }
.workspace-conflict-item p { margin: 6px 0 12px; overflow-wrap: anywhere; }

/* Cajón: tareas guardadas para después, fuera del día hasta que se traen. */
.drawer-button { display: flex; width: 100%; min-height: 56px; margin: 4px 0 18px; padding: 12px 15px; align-items: center; gap: 12px; border: 1px dashed rgba(28, 26, 61,.18); border-radius: var(--radius-md); color: var(--graphite); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.drawer-button[hidden] { display: none; }
.drawer-button > span:nth-child(2) { flex: 1; min-width: 0; }
.drawer-button strong { display: block; color: var(--night); font-size: 14px; }
.drawer-button small { display: block; color: var(--muted); font-size: 11px; }
.drawer-list { display: grid; margin-top: 12px; gap: 10px; }
.drawer-item { display: grid; padding: 13px 14px; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.drawer-item strong { display: block; color: var(--night); font-size: 14px; }
.drawer-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.drawer-item__actions { display: flex; gap: 8px; }
.drawer-item__actions button { flex: 1; min-height: 40px; border-radius: 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.drawer-item__bring { border: 0; color: white; background: var(--electric); }
.drawer-item__close { border: 1px solid var(--line); color: var(--graphite); background: transparent; }

/* Identidad Sukkiri en movimiento: el sello se estampa y los puntos de las i aparecen. */
.brand-logo--hero { animation: sealStamp .75s cubic-bezier(.2,.9,.3,1.25) .08s both; }
.wordmark--hero { overflow: visible; }
.wordmark--hero .wm-dot { transform-box: fill-box; transform-origin: center; animation: dotPop .5s cubic-bezier(.3,1.7,.5,1) .62s both; }
.wordmark--hero .wm-dot--2 { animation-delay: .76s; }
.welcome-copy { animation: viewIn .6s ease .35s both; }
@keyframes sealStamp {
  0% { opacity: 0; transform: translateY(-18px) scale(1.35) rotate(-10deg); }
  55% { opacity: 1; transform: translateY(0) scale(.92) rotate(2deg); }
  78% { transform: scale(1.04) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes dotPop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .brand-logo--hero, .wordmark--hero .wm-dot, .welcome-copy { animation: none; }
}

/* Aviso de cambio de dominio (numahoy.com → sukkiri.app). */
.domain-move { position: sticky; top: 0; z-index: 30; display: grid; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid rgba(61, 58, 140, .18); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--lavender-soft); box-shadow: var(--shadow-soft); }
.domain-move[hidden] { display: none; }
.domain-move p { margin: 0; color: var(--night); font-size: 13px; line-height: 1.4; }
.domain-move p strong { display: block; margin-bottom: 2px; font-size: 14px; }
.domain-move p span { color: var(--graphite); }
.domain-move__actions { display: flex; align-items: center; gap: 14px; }
.domain-move__go { min-height: 40px; padding: 0 16px; font-size: 13px; }