@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --pink: #f5b4e4;
  --pink-soft: #ffd8f2;
  --lavender: #c9a5f2;
  --purple: #9a5bdd;
  --purple-dark: #7040a9;
  --deep: #3d2a59;
  --white: #fffaff;
  --glass: rgba(255, 250, 255, .80);
  --line: rgba(112, 64, 169, .15);
  --shadow: 0 14px 40px rgba(92, 47, 133, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--deep);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  background:
    linear-gradient(180deg, rgba(255, 188, 231, .35), rgba(147, 83, 216, .20)),
    url("clouds.png") center top / cover fixed no-repeat;
  transition: filter .3s ease;
}

body.dream-mode {
  filter: saturate(.85) brightness(.92);
}

body.night-mode {
  background:
    linear-gradient(180deg, rgba(35, 35, 95, .12), rgba(38, 32, 92, .18)),
    url("night.png") center top / cover fixed no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.55), transparent 24%),
    radial-gradient(circle at 82% 35%, rgba(255,255,255,.35), transparent 25%);
  mix-blend-mode: screen;
}

.sky-overlay { position: fixed; inset: 0; pointer-events: none; background: rgba(214,151,239,.10); }

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  position: relative;
  width: min(1080px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 115px;
}

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.top-actions { display: flex; gap: 8px; }

.eyebrow, .small-label {
  margin: 0 0 3px;
  font-size: .72rem;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--purple-dark);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .9;
  color: var(--white);
  letter-spacing: .02em;
  text-shadow: 0 3px 0 #b87be9, 0 6px 0 rgba(111,62,167,.20);
}
h1 span { font-size: .65em; }

.icon-button, .mini-button, .close-button {
  border: 0; cursor: pointer; font: inherit;
}
.icon-button {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--glass); box-shadow: var(--shadow); font-size: 1.15rem;
}

.welcome-card, .quick-add, .panel, .stat-card, .focus-card, .ideas-card {
  border: 1px solid rgba(255,255,255,.7);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.welcome-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 25px 28px; border-radius: 30px;
}
.welcome-card h2 { margin-bottom: 5px; font-size: clamp(1.45rem,4vw,2rem); }
.muted { margin-bottom: 0; color: #755b8f; }

.cloud-badge {
  display: grid; place-items: center; width: 76px; height: 76px; flex: 0 0 auto;
  border-radius: 28px; background: linear-gradient(145deg,#fff,#e5c8ff);
  font-size: 2.2rem; box-shadow: inset 0 -8px 18px rgba(154,91,221,.10);
}

.focus-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 22px; margin-top: 16px;
}
.focus-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; background: #f4dcff; font-size: 1.3rem;
}
.focus-card h3 { margin: 0 0 2px; }
.focus-card small { color: #806994; }

.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 16px 0; }
.stat-card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  padding: 15px 17px; border-radius: 22px;
}
.stat-card span { grid-row: span 2; font-size: 1.5rem; }
.stat-card strong { font-size: 1.4rem; }
.stat-card small { color: #806994; }

.quick-add { padding: 20px; border-radius: 26px; margin-bottom: 14px; }
.quick-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.quick-add h3 { margin-bottom: 2px; }
.quick-add p { margin-bottom: 12px; color: #806994; font-size: .88rem; }
.sparkle { color: #a45de1; font-size: 1.4rem; }

.input-row { display: flex; gap: 10px; }
input, select {
  width: 100%; border: 2px solid var(--line); border-radius: 17px; padding: 13px 15px;
  outline: none; background: rgba(255,255,255,.72); color: var(--deep);
}
input:focus, select:focus { border-color: rgba(154,91,221,.55); box-shadow: 0 0 0 4px rgba(154,91,221,.10); }

.primary-button {
  border: 0; border-radius: 17px; padding: 12px 18px; white-space: nowrap; cursor: pointer;
  background: linear-gradient(135deg,#a85ce0,#8050c7); color: white; font-weight: 700;
  box-shadow: 0 8px 18px rgba(112,64,169,.22); transition: transform .15s ease;
}
.primary-button:hover { transform: translateY(-2px); }
.primary-button:active { transform: translateY(0); }

.quick-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.quick-options button, .filter {
  border: 1px solid rgba(112,64,169,.13); background: rgba(255,255,255,.55);
  color: var(--purple-dark); border-radius: 999px; padding: 7px 11px; cursor: pointer;
}
.quick-options button:hover, .filter:hover { background: #f5e6ff; }

.filter-bar {
  display: flex; gap: 7px; overflow-x: auto; padding: 3px 1px 12px;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter.active { background: var(--purple-dark); color: white; }

.content-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.panel { border-radius: 26px; padding: 20px; min-height: 280px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-title > div { display: flex; align-items: center; gap: 9px; }
.panel-title h3 { margin: 0; }
.section-icon { font-size: 1.25rem; }
.pill {
  display: grid; place-items: center; min-width: 29px; height: 29px; padding: 0 8px;
  border-radius: 999px; background: var(--pink-soft); color: var(--purple-dark); font-weight: 700;
}
.mini-button {
  width: 34px; height: 34px; border-radius: 12px; background: #ead9fb;
  color: var(--purple-dark); font-size: 1.25rem;
}

.task-list, .place-list { display: grid; gap: 10px; }
.task, .place {
  display: flex; align-items: center; gap: 11px; padding: 12px;
  border-radius: 17px; background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.8);
}
.task.important { border-left: 5px solid #f09bcf; }
.task-check {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid #bd91e9;
  background: #fff; cursor: pointer; flex: 0 0 auto; position: relative;
}
.task.done .task-check { background: #9b63d8; }
.task.done .task-check::after { content:"✓"; color:white; position:absolute; inset:-2px 0 0; text-align:center; font-weight:800; }
.task.done .task-text { text-decoration: line-through; opacity: .55; }
.task-text { flex: 1; }
.task-main { flex: 1; min-width: 0; }
.task-text { overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.meta {
  display: inline-flex; align-items: center; gap: 3px; border-radius: 999px;
  background: #f3e5fc; color: #765091; padding: 3px 7px; font-size: .68rem;
}
.delete { border:0; background:transparent; color:#a68bb9; cursor:pointer; font-size:1rem; }

.place { align-items: flex-start; }
.place-icon {
  width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:#f2ddff;
}
.place-info { flex:1; }
.place-info strong { display:block; }
.place-info small { color:#806994; }

.empty { padding:35px 15px; text-align:center; color:#846d96; }

.ideas-card {
  display:flex; align-items:center; gap:15px; margin-top:16px; padding:18px 20px; border-radius:24px;
}
.ideas-card h3 { margin-bottom:4px; }
.ideas-cloud {
  display:grid; place-items:center; width:48px; height:48px; border-radius:16px;
  background:#f1ddff; font-size:1.35rem; flex:0 0 auto;
}

.bottom-nav {
  position: fixed; z-index:10; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:6px; width:min(520px,calc(100% - 28px));
  padding:9px; border-radius:25px; background:rgba(72,38,103,.82);
  backdrop-filter:blur(16px); box-shadow:0 14px 35px rgba(61,42,89,.28);
}
.nav-item {
  border:0; background:transparent; color:#f9efff; cursor:pointer; border-radius:17px;
  padding:7px 12px; font:inherit; display:grid; place-items:center; gap:1px; font-size:1rem;
}
.nav-item span { font-size:.66rem; }
.nav-item.active { background:rgba(255,255,255,.16); }
.add-nav {
  width:54px; height:54px; margin:-22px 6px 0; border-radius:50%;
  background:linear-gradient(135deg,#ffb7e7,#bb7bf1); color:white; font-size:1.7rem;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.modal {
  position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px;
  background:rgba(49,27,70,.45); backdrop-filter:blur(6px);
}
.modal.hidden { display:none; }
.modal-card {
  position:relative; width:min(430px,100%); max-height:90vh; overflow:auto; padding:28px;
  border-radius:30px; background:#fff8ff; box-shadow:0 25px 70px rgba(55,25,80,.3);
}
.modal-card h2 { margin-bottom:18px; }
.modal-card input, .modal-card select { margin-bottom:10px; }
.close-button {
  position:absolute; top:14px; right:17px; width:34px; height:34px; border-radius:50%;
  background:#f0ddfa; color:var(--purple-dark); font-size:1.4rem;
}
.full { width:100%; margin-top:5px; }
.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.date-label { display:block; margin:3px 0 5px; font-size:.82rem; color:#765b8c; }
.date-label small { opacity:.7; }

@media (max-width:760px) {
  .app-shell { padding-top:20px; }
  .content-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .stats { gap:8px; }
  .stat-card { padding:12px 10px; }
  .stat-card small { font-size:.72rem; }
  .input-row { flex-direction:column; }
  .primary-button { width:100%; }
  .welcome-card { padding:20px; }
  .cloud-badge { width:58px; height:58px; font-size:1.7rem; }
  .bottom-nav { gap:0; }
  .nav-item { padding-inline:8px; }
  .two-cols { grid-template-columns:1fr; }
}


.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 2px 8px;
}
.section-heading h2 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.8rem;
  color: var(--white);
  text-shadow: 0 2px 0 rgba(112,64,169,.35);
}
.section-hint {
  color: #f8edff;
  font-size: .78rem;
  opacity: .92;
  text-align: right;
}
.filter-bar {
  padding-bottom: 14px;
}
.filter {
  flex: 0 0 auto;
}
.more-card {
  max-width: 500px;
}
.more-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  margin: 9px 0;
  border-radius: 17px;
  background: #f7eaff;
}
.more-option > span {
  font-size: 1.35rem;
}
.more-option > div {
  flex: 1;
}
.more-option strong, .more-option small {
  display: block;
}
.more-option small {
  color: #806994;
  margin-top: 2px;
}
.toggle-button {
  border: 0;
  border-radius: 12px;
  padding: 8px 10px;
  background: #e2c9f7;
  color: var(--purple-dark);
  cursor: pointer;
  font-weight: 700;
}
@media (max-width: 600px) {
  .section-heading { align-items: start; flex-direction: column; gap: 2px; }
  .section-hint { text-align: left; }
}


/* ---------- LOGIN ---------- */
body {
  overflow-x: hidden;
}

#appShell {
  display: none;
}

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 20;
  background-image: linear-gradient(rgba(31, 20, 65, .18), rgba(31, 20, 65, .24)), url("login-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.login-card {
  width: min(460px, 100%);
  padding: 34px 28px 26px;
  text-align: center;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,250,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 25px 70px rgba(75,38,110,.25);
}

.app-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  padding: 7px;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff, #ead4ff);
  box-shadow: 0 12px 28px rgba(112,64,169,.18);
}

.app-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.login-card h1 {
  color: var(--purple-dark);
  text-shadow: none;
  font-size: 3.1rem;
  margin-bottom: 12px;
}

.login-card h2 {
  margin: 5px 0;
  font-size: 1.65rem;
}

.login-subtitle {
  color: #806994;
  margin-bottom: 20px;
}

.user-buttons {
  display: grid;
  gap: 10px;
}

.user-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid rgba(112,64,169,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  color: var(--deep);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.user-button:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 10px 24px rgba(112,64,169,.13);
}

.user-button > span:nth-child(2) {
  flex: 1;
}

.user-button strong,
.user-button small {
  display: block;
}

.user-button small {
  margin-top: 2px;
  color: #8a709d;
}

.user-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
}

.user-avatar.rafa { background: linear-gradient(135deg,#8064cf,#aa77e9); }
.user-avatar.marina { background: linear-gradient(135deg,#ee8fc8,#bd79e9); }

.arrow {
  color: #9c78b7;
  font-size: 1.8rem;
}

.login-note {
  margin: 18px 0 0;
  font-size: .75rem;
  color: #8a709d;
}

.current-user {
  display: inline-grid;
  place-items: center;
  height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--purple-dark);
  font-size: .76rem;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(92,47,133,.10);
}

.logout-button {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(112,64,169,.15);
  border-radius: 15px;
  background: #f2ddfb;
  color: var(--purple-dark);
  cursor: pointer;
  font-weight: 700;
}

/* ---------- MOBILE APP ---------- */
@media (max-width: 600px) {
  .app-shell {
    width: min(100%, 520px);
    padding: 15px 12px 105px;
  }

  .topbar {
    margin-bottom: 12px;
  }

  .top-actions {
    gap: 5px;
  }

  .icon-button {
    width: 40px;
    height: 40px;
  }

  .current-user {
    height: 36px;
    padding-inline: 9px;
    font-size: .68rem;
  }

  h1 {
    font-size: 2.8rem;
  }

  .welcome-card {
    padding: 18px;
    border-radius: 25px;
  }

  .welcome-card h2 {
    font-size: 1.25rem;
  }

  .focus-card {
    padding: 13px;
    border-radius: 19px;
  }

  .stats {
    gap: 7px;
  }

  .stat-card {
    border-radius: 17px;
    padding: 10px 8px;
    column-gap: 7px;
  }

  .stat-card span {
    font-size: 1.15rem;
  }

  .stat-card strong {
    font-size: 1.15rem;
  }

  .stat-card small {
    font-size: .66rem;
  }

  .quick-add,
  .panel,
  .ideas-card {
    border-radius: 22px;
    padding: 16px;
  }

  .quick-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .quick-options::-webkit-scrollbar {
    display: none;
  }

  .quick-options button {
    flex: 0 0 auto;
  }

  .filter-bar {
    margin-inline: -1px;
  }

  .content-grid {
    gap: 12px;
  }

  .task,
  .place {
    padding: 10px;
  }

  .bottom-nav {
    bottom: 9px;
    width: calc(100% - 20px);
    padding: 7px;
    border-radius: 21px;
  }

  .nav-item {
    min-width: 54px;
    padding: 6px 7px;
  }

  .nav-item span {
    font-size: .59rem;
  }

  .add-nav {
    width: 50px;
    height: 50px;
  }

  .login-screen {
    padding: 16px;
  }

  .login-card {
    padding: 28px 18px 22px;
    border-radius: 28px;
  }

  .app-icon {
    width: 78px;
    height: 78px;
    border-radius: 23px;
  }

  .login-card h1 {
    font-size: 2.7rem;
  }

  .user-button {
    min-height: 72px;
  }
}

@media (max-height: 700px) and (max-width: 600px) {
  .login-card {
    padding-top: 18px;
    padding-bottom: 17px;
  }

  .app-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
  }

  .login-card h1 {
    font-size: 2.3rem;
    margin-bottom: 6px;
  }

  .login-card h2 {
    font-size: 1.35rem;
  }

  .login-subtitle {
    margin-bottom: 12px;
  }

  .login-note {
    margin-top: 11px;
  }
}


/* ---------- ORGANIZACIÓN DE HOY ---------- */
.today-section {
  margin: 16px 0;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.7);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.today-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.today-heading h2 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.75rem;
  color: var(--purple-dark);
}

.today-date {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0dcfb;
  color: #765091;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.today-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.progress-track {
  height: 9px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: #eadcf3;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f1a6db, #9a5bdd);
  transition: width .3s ease;
}

.today-progress > span {
  min-width: 72px;
  text-align: right;
  color: #806994;
  font-size: .72rem;
}

.today-task-list {
  display: grid;
  gap: 8px;
}

.today-task {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(255,255,255,.62);
}

.today-task.done {
  opacity: .55;
}

.today-task.done .today-task-text {
  text-decoration: line-through;
}

.today-task-check {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border: 2px solid #bd91e9;
  border-radius: 7px;
  background: white;
  cursor: pointer;
  position: relative;
}

.today-task.done .today-task-check {
  background: #9b63d8;
}

.today-task.done .today-task-check::after {
  content: "✓";
  position: absolute;
  color: white;
  font-size: .8rem;
  font-weight: 800;
  left: 3px;
  top: -1px;
}

.today-task-text {
  flex: 1;
  overflow-wrap: anywhere;
  font-size: .9rem;
}

.today-empty {
  padding: 18px 8px 5px;
  text-align: center;
  color: #806994;
  font-size: .86rem;
}

.logout-top {
  font-size: 1rem;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.logout-top:active, .logout-button:active {
  transform: scale(.96);
}

@media (max-width: 600px) {
  .today-section {
    padding: 16px;
    border-radius: 22px;
  }

  .today-heading h2 {
    font-size: 1.5rem;
  }

  .today-date {
    font-size: .65rem;
  }

  .logout-top {
    display: inline-grid;
  }
}


.today-add-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
}

.today-add-row input {
  padding: 11px 13px;
  border-radius: 15px;
  background: rgba(255,255,255,.8);
}

.today-add-button {
  width: 45px;
  flex: 0 0 45px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg,#a85ce0,#8050c7);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(112,64,169,.18);
}

.today-task {
  min-height: 45px;
}

@media (max-width: 600px) {
  .today-add-button {
    width: 43px;
    flex-basis: 43px;
  }
}

/* Login privado con Supabase */
.login-password-box { margin-top: 18px; text-align: left; }
.login-password-box label { display:block; font-weight:700; margin-bottom:8px; color:var(--purple-dark); }
.login-password-row { display:flex; gap:8px; }
.login-password-row input { flex:1; min-width:0; }
.login-password-row .primary-button { width:auto; white-space:nowrap; padding:12px 18px; }
.login-back { border:0; background:none; color:var(--purple-dark); font-weight:700; margin-top:10px; cursor:pointer; padding:4px 0; }
.login-error { color:#b23a67; font-size:.9rem; min-height:1.2em; margin:8px 0 0; }
.hidden { display:none !important; }
@media (max-width:600px) {
  .login-password-row { flex-direction:column; }
  .login-password-row .primary-button { width:100%; }
}