:root {
   /* ====== Tokens ====== */
   /* Color: 1 papel + 3 acentos + neutrales */
   --paper: #0e1320;
   --paper-soft: #161b2e;
   --paper-raised: #1c2238;
   --paper-elevated: #232a44;

   --ink: #f4f3ff;
   --ink-soft: #b6b3d4;
   --ink-dim: #7a7895;
   --ink-faint: #5a5874;

   /* Bordes neutros — el tinte morado quedaba ruidoso */
   --line: rgba(255, 255, 255, 0.06);
   --line-strong: rgba(255, 255, 255, 0.12);
   --line-focus: rgba(124, 92, 255, 0.5);

   --primary: #7c5cff;
   --primary-strong: #9c83ff;
   --primary-soft: rgba(124, 92, 255, 0.14);

   --warm: #ff9b8a;
   --warm-strong: #ffb3a4;
   --warm-soft: rgba(255, 155, 138, 0.12);

   --cool: #6fc5d6;
   --cool-strong: #92dae8;
   --cool-soft: rgba(111, 197, 214, 0.12);

   --danger: #ff6b85;
   --danger-soft: rgba(255, 107, 133, 0.1);

   /* Radii: 8 / 12 / 16 / 20. Nada de 10, 13, 14, 18. */
   --r-sm: 8px;
   --r-md: 12px;
   --r-lg: 16px;
   --r-xl: 20px;

   /* Sombras: una sola capa por nivel. Sin acumular glow. */
   --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18);
   --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.16);
   --shadow-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.28);

   /* Easing: la curva de sonner — empuje suave y aterrizaje calmo */
   --ease: cubic-bezier(0.32, 0.72, 0, 1);
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

   /* Focus: outline con offset, no box-shadow */
   --focus-offset: 2px;

   font-family: "Outfit", "Zen Kaku Gothic New", "Segoe UI", Arial, sans-serif;
   color: var(--ink);
}

* {
   box-sizing: border-box;
}

[hidden] {
   display: none !important;
}

/* ====== Base ====== */

body {
   min-height: 100vh;
   margin: 0;
   overflow-x: hidden;
   background:
      radial-gradient(ellipse at 78% -10%, rgba(124, 92, 255, 0.18), transparent 42%),
      radial-gradient(ellipse at 8% 110%, rgba(255, 155, 138, 0.08), transparent 38%),
      var(--paper);
   color: var(--ink);
   font-weight: 500;
   font-size: 14px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

body::before {
   position: fixed;
   inset: 0;
   z-index: -1;
   content: "";
   pointer-events: none;
   background-image:
      repeating-radial-gradient(circle at 50% 100%,
         rgba(255, 255, 255, 0.014) 0,
         rgba(255, 255, 255, 0.014) 1px,
         transparent 1.5px,
         transparent 28px);
   opacity: 0.5;
}

button,
input,
select,
textarea {
   font: inherit;
}

button {
   cursor: pointer;
}

/* ====== Focus: outline con offset, no box-shadow ====== */

:focus {
   outline: none;
}

:focus-visible {
   outline: 2px solid var(--line-focus);
   outline-offset: var(--focus-offset);
   border-radius: var(--r-sm);
}

/* Lucide iconos: trazo ligeramente más fino para sentirse editorial */
[data-lucide],
svg.lucide {
   stroke-width: 1.5;
}

/* ====== Topbar / Hero ====== */

.topbar {
   position: relative;
   isolation: isolate;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 32px;
   margin: 24px;
   padding: 40px;
   overflow: hidden;
   border: 1px solid var(--line);
   border-radius: var(--r-xl);
   background:
      linear-gradient(135deg, rgba(124, 92, 255, 0.05), transparent 55%),
      var(--paper-soft);
   box-shadow: var(--shadow-2);
}

.hero-glow {
   position: absolute;
   z-index: 0;
   inset: -40% -10% auto auto;
   width: 70%;
   height: 220%;
   pointer-events: none;
   background:
      radial-gradient(ellipse at 70% 50%, rgba(124, 92, 255, 0.2), transparent 55%),
      radial-gradient(ellipse at 30% 60%, rgba(255, 155, 138, 0.12), transparent 60%);
   filter: blur(12px);
   animation: hero-drift 22s ease-in-out infinite alternate;
}

@keyframes hero-drift {
   from { transform: translate(0, 0); }
   to   { transform: translate(-32px, 14px); }
}

/* ---- Escena celestial (sol naciente japonés + planeta cósmico) ---- */

.hero-scene {
   position: absolute;
   z-index: 0;
   inset: 0 0 0 auto;
   width: min(62%, 560px);
   pointer-events: none;
   overflow: hidden;
}

/* Disco: sol naciente (coral cálido arriba) que funde a noche cósmica (índigo).
   Lee simultáneamente como Hinomaru japonés y como luna/planeta. */
.celestial-disc {
   position: absolute;
   right: 4%;
   top: 50%;
   width: 240px;
   height: 240px;
   transform: translateY(-50%);
   border-radius: 50%;
   background:
      radial-gradient(circle at 50% 22%, rgba(255, 179, 164, 0.95), rgba(255, 155, 138, 0.5) 30%, transparent 52%),
      linear-gradient(165deg, #ff9b8a 0%, #b07ad6 42%, #2a2350 78%);
   box-shadow:
      0 0 60px rgba(255, 155, 138, 0.28),
      0 0 120px rgba(124, 92, 255, 0.22),
      inset -18px -24px 60px rgba(10, 12, 24, 0.55);
   opacity: 0.92;
   animation: disc-breathe 9s ease-in-out infinite;
}

/* Cráter/terminador sutil para lectura lunar */
.celestial-disc::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(circle at 72% 76%, rgba(10, 12, 24, 0.35), transparent 45%);
}

@keyframes disc-breathe {
   0%, 100% { transform: translateY(-50%) scale(1); }
   50%      { transform: translateY(-50%) scale(1.015); }
}

/* Kanji 弁 (bento) como caligrafía grabada sobre el disco */
.disc-kanji {
   position: absolute;
   inset: 0;
   z-index: 1;
   display: grid;
   place-items: center;
   font-family: "Zen Kaku Gothic New", "Outfit", serif;
   font-size: 150px;
   font-weight: 900;
   line-height: 1;
   color: rgba(255, 255, 255, 0.16);
   text-shadow: 0 2px 12px rgba(10, 12, 24, 0.4);
   user-select: none;
}

/* Ondas seigaiha en la base del disco: firma japonesa que también lee
   como anillos/órbitas cósmicas. Tres arcos concéntricos. */
.disc-seigaiha {
   position: absolute;
   left: 50%;
   bottom: -6px;
   z-index: 2;
   width: 150px;
   height: 64px;
   transform: translateX(-50%);
   border-radius: 0 0 999px 999px;
   background:
      repeating-radial-gradient(circle at 50% 100%,
         transparent 0 14px,
         rgba(255, 255, 255, 0.22) 14px 15.5px,
         transparent 15.5px 26px);
   -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
           mask-image: linear-gradient(180deg, transparent, #000 60%);
   opacity: 0.5;
}

/* Anillo orbital tipo Saturno, inclinado, cruzando el disco */
.celestial-orbit {
   position: absolute;
   right: -6%;
   top: 50%;
   width: 420px;
   height: 150px;
   transform: translateY(-50%) rotate(-18deg);
   border: 1.5px solid rgba(146, 218, 232, 0.35);
   border-radius: 50%;
   box-shadow: 0 0 18px rgba(146, 218, 232, 0.12);
   animation: orbit-tilt 18s ease-in-out infinite;
}

.celestial-orbit::before {
   content: "";
   position: absolute;
   inset: 18px 40px;
   border: 1px solid rgba(255, 179, 164, 0.2);
   border-radius: 50%;
}

@keyframes orbit-tilt {
   0%, 100% { transform: translateY(-50%) rotate(-18deg); }
   50%      { transform: translateY(-50%) rotate(-15deg); }
}

.hero-constellation {
   position: absolute;
   z-index: 1;
   right: 0;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: visible;
}

.constellation-lines line {
   stroke: rgba(180, 165, 255, 0.14);
   stroke-width: 0.6;
   stroke-linecap: round;
   stroke-dasharray: 1 3;
   animation: line-fade 9s ease-in-out infinite;
}

.constellation-lines line:nth-child(2) { animation-delay: 1.4s; }
.constellation-lines line:nth-child(3) { animation-delay: 2.6s; }
.constellation-lines line:nth-child(4) { animation-delay: 3.8s; }
.constellation-lines line:nth-child(5) { animation-delay: 5s; }

@keyframes line-fade {
   0%, 100% { opacity: 0.3; }
   50%      { opacity: 0.7; }
}

.constellation-stars circle {
   fill: #f4f3ff;
   opacity: 0.55;
   filter: drop-shadow(0 0 4px rgba(244, 243, 255, 0.6));
   animation: twinkle 4.6s ease-in-out infinite;
   animation-delay: var(--twinkle-delay, 0s);
   transform-origin: center;
   transform-box: fill-box;
}

.constellation-stars circle:nth-child(2),
.constellation-stars circle:nth-child(5) {
   fill: #ffb3a4;
   filter: drop-shadow(0 0 6px rgba(255, 179, 164, 0.7));
}

.constellation-stars circle:nth-child(4) {
   fill: #92dae8;
   filter: drop-shadow(0 0 5px rgba(146, 218, 232, 0.6));
}

@keyframes twinkle {
   0%, 100% { opacity: 0.3; transform: scale(0.9); }
   50%      { opacity: 0.9; transform: scale(1.12); }
}

/* Pétalos de sakura: flor japonesa que deriva como partícula estelar */
.sakura {
   position: absolute;
   z-index: 2;
   width: 12px;
   height: 12px;
   background: radial-gradient(circle at 50% 0%, #ffc2d6, #ff9bbd 70%);
   /* forma de pétalo: redondeado arriba, puntiagudo abajo */
   border-radius: 100% 0 100% 0;
   opacity: 0;
   filter: drop-shadow(0 0 4px rgba(255, 155, 189, 0.5));
   animation: sakura-drift 14s linear infinite;
}

.sakura-1 { left: 58%; animation-delay: 0s; }
.sakura-2 { left: 74%; width: 9px; height: 9px; animation-delay: 5s; animation-duration: 17s; }
.sakura-3 { left: 88%; width: 14px; height: 14px; animation-delay: 9s; animation-duration: 12s; }

@keyframes sakura-drift {
   0%   { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; }
   12%  { opacity: 0.85; }
   88%  { opacity: 0.85; }
   100% { transform: translateY(280px) translateX(-60px) rotate(280deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
   .hero-glow,
   .celestial-disc,
   .celestial-orbit,
   .constellation-stars circle,
   .constellation-lines line,
   .sakura {
      animation: none;
   }
   .sakura { opacity: 0.6; }
}

.topbar > .brand-copy,
.topbar > .week-controls {
   position: relative;
   z-index: 1;
}

.brand-copy {
   max-width: 640px;
   min-width: 0;
}

.eyebrow {
   margin: 0 0 12px;
   color: var(--ink-dim);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.topbar h1 {
   margin: 0;
   font-family: "Zen Kaku Gothic New", "Outfit", "Segoe UI", Arial, sans-serif;
   font-size: clamp(40px, 5vw, 56px);
   font-weight: 900;
   line-height: 1;
   letter-spacing: -0.02em;
}

.star-dot {
   position: relative;
   display: inline-block;
   color: var(--warm);
   font-size: 0.42em;
   margin-left: -0.05em;
   vertical-align: 0.85em;
   transform: rotate(8deg);
}

/* ツ (katakana tsu) elevado exactamente a la misma altura que la estrella:
   mismo font-size y mismo vertical-align (en em) garantizan igual elevación. */
.tsu-mark {
   display: inline-block;
   font-family: "Zen Kaku Gothic New", "Outfit", sans-serif;
   font-size: 0.42em;
   font-weight: 700;
   color: var(--primary-strong);
   vertical-align: 0.85em;
   margin: 0 0.04em 0 0.02em;
}

.brand-line {
   max-width: 520px;
   margin: 16px 0 0;
   color: var(--ink-soft);
   font-size: 15px;
   font-weight: 500;
   line-height: 1.55;
}

/* ====== Week controls ====== */

.week-controls {
   display: grid;
   grid-template-columns: 36px minmax(160px, 220px) 36px auto;
   align-items: center;
   gap: 8px;
   padding: 6px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: rgba(14, 19, 32, 0.5);
   backdrop-filter: blur(8px);
}

/* ====== Shell ====== */

.shell {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 400px;
   gap: 20px;
   padding: 0 24px 32px;
}

.planner-section,
.side-panel {
   min-width: 0;
   border: 1px solid var(--line);
   border-radius: var(--r-xl);
   background: var(--paper-soft);
}

.planner-section {
   padding: 28px;
}

.side-panel {
   padding: 20px;
}

.section-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 24px;
}

.section-head h2 {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -0.01em;
}

.section-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 8px;
}

/* ====== Planner grid ====== */

.planner-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(150px, 1fr));
   gap: 12px;
}

.day-column {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
}

.day-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper-raised);
}

.day-head .day-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   color: var(--ink-dim);
}

.day-head .day-icon svg,
.day-head .day-icon i[data-lucide] {
   width: 18px;
   height: 18px;
}

.day-head strong {
   display: block;
   font-size: 14px;
   font-weight: 700;
}

.day-head span {
   display: block;
   margin-top: 1px;
   color: var(--ink-dim);
   font-size: 12px;
}

.day-column.is-today .day-head {
   border-color: var(--line-strong);
   background: var(--paper-elevated);
}

.day-column.is-today .day-head .day-icon {
   color: var(--warm);
}

.day-column.is-today .day-head strong {
   color: var(--ink);
}

/* ====== Meal cards ====== */

.meal-card {
   position: relative;
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: 10px;
   min-height: 152px;
   padding: 14px 16px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper-raised);
   transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.meal-card::before {
   position: absolute;
   left: -1px;
   top: 14px;
   bottom: 14px;
   width: 2px;
   border-radius: 2px;
   background: var(--warm);
   content: "";
}

.meal-card.dinner::before {
   background: var(--primary);
}

.meal-card:hover {
   border-color: var(--line-strong);
   background: var(--paper-elevated);
}

.meal-card h3 {
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 0;
   color: var(--ink-dim);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.meal-card h3 svg,
.meal-card h3 i[data-lucide] {
   width: 13px;
   height: 13px;
   color: var(--warm);
}

.meal-card.dinner h3 svg,
.meal-card.dinner h3 i[data-lucide] {
   color: var(--primary-strong);
}

.meal-body {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.meal-title {
   margin: 0;
   color: var(--ink);
   font-size: 15px;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: -0.005em;
}

.meal-empty {
   margin: 0;
   color: var(--ink-faint);
   font-size: 13px;
}

.meal-meta,
.meal-notes,
.card-meta,
.shopping-use {
   margin: 0;
   color: var(--ink-soft);
   font-size: 12px;
   line-height: 1.45;
}

.meal-notes {
   color: var(--ink-dim);
}

.meal-actions {
   display: flex;
   gap: 8px;
}

.meal-actions .ghost-button {
   width: 100%;
}

/* ====== Side panel tabs ====== */

.tabs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 4px;
   margin-bottom: 16px;
   padding: 4px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper-raised);
}

.tab-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: 36px;
   padding: 0 10px;
   border: 0;
   border-radius: var(--r-sm);
   background: transparent;
   color: var(--ink-dim);
   font-size: 13px;
   font-weight: 600;
   transition: background 200ms var(--ease), color 200ms var(--ease);
}

.tab-button span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tab-button svg,
.tab-button i[data-lucide] {
   width: 14px;
   height: 14px;
}

.tab-button:hover {
   color: var(--ink-soft);
}

.tab-button.active {
   background: var(--paper-elevated);
   color: var(--ink);
   box-shadow: var(--shadow-1);
}

/* ====== Buttons ====== */

.primary-button,
.ghost-button,
.icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 36px;
   padding: 0 14px;
   border: 1px solid transparent;
   border-radius: var(--r-sm);
   font-weight: 600;
   font-size: 13px;
   transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 100ms var(--ease);
}

.primary-button {
   background: var(--primary);
   color: white;
   box-shadow: var(--shadow-1);
}

.primary-button:hover {
   background: var(--primary-strong);
}

.primary-button:active {
   transform: scale(0.98);
}

.ghost-button {
   border-color: var(--line);
   background: transparent;
   color: var(--ink-soft);
}

.ghost-button:hover {
   border-color: var(--line-strong);
   background: rgba(255, 255, 255, 0.03);
   color: var(--ink);
}

.icon-button {
   width: 36px;
   padding: 0;
   border-color: var(--line);
   background: transparent;
   color: var(--ink-soft);
}

.icon-button:hover {
   border-color: var(--line-strong);
   background: rgba(255, 255, 255, 0.03);
   color: var(--ink);
}

.primary-button svg,
.primary-button i[data-lucide],
.ghost-button svg,
.ghost-button i[data-lucide] {
   width: 14px;
   height: 14px;
   flex: 0 0 auto;
}

.icon-button svg,
.icon-button i[data-lucide] {
   width: 16px;
   height: 16px;
}

.danger-button {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 32px;
   padding: 0 10px;
   border: 0;
   border-radius: var(--r-sm);
   background: transparent;
   color: var(--danger);
   font-weight: 600;
   font-size: 12px;
   transition: background 200ms var(--ease);
}

.danger-button svg,
.danger-button i[data-lucide] {
   width: 13px;
   height: 13px;
}

.danger-button:hover {
   background: var(--danger-soft);
}

/* ====== Inputs ====== */

input,
select,
textarea {
   width: 100%;
   min-width: 0;
   padding: 9px 12px;
   border: 1px solid var(--line);
   border-radius: var(--r-sm);
   background: var(--paper);
   color: var(--ink);
   font-weight: 500;
   font-size: 14px;
   color-scheme: dark;
   outline: none;
   transition: border-color 200ms var(--ease);
}

input[type="date"] {
   min-height: 36px;
}

select option {
   background: var(--paper-soft);
   color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
   border-color: var(--primary);
}

input::placeholder,
textarea::placeholder {
   color: var(--ink-faint);
}

textarea {
   resize: vertical;
}

label {
   display: grid;
   gap: 6px;
   color: var(--ink-soft);
   font-size: 12px;
   font-weight: 600;
}

/* ====== Panel actions / search ====== */

.tab-panel {
   display: none;
}

.tab-panel.active {
   display: block;
   animation: panel-in 240ms var(--ease-out);
}

@keyframes panel-in {
   from { opacity: 0; transform: translateY(4px); }
   to   { opacity: 1; transform: translateY(0); }
}

.panel-actions {
   display: flex;
   gap: 8px;
   align-items: center;
   margin-bottom: 12px;
}

.search-wrap {
   position: relative;
   flex: 1 1 auto;
   min-width: 0;
}

.search-wrap svg,
.search-wrap i[data-lucide] {
   position: absolute;
   top: 50%;
   left: 12px;
   z-index: 1;
   width: 15px;
   height: 15px;
   transform: translateY(-50%);
   color: var(--ink-faint);
   pointer-events: none;
}

.search-wrap input {
   padding-left: 36px;
}

/* ====== Lists / mini-cards ====== */

.list {
   display: grid;
   gap: 4px;
}

.mini-card {
   display: grid;
   gap: 6px;
   padding: 12px 14px;
   border: 1px solid transparent;
   border-bottom: 1px solid var(--line);
   border-radius: 0;
   background: transparent;
   transition: background 200ms var(--ease);
}

.mini-card:last-child {
   border-bottom: 0;
}

.mini-card:hover {
   background: rgba(255, 255, 255, 0.02);
}

.mini-card h3 {
   margin: 0;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.005em;
}

.mini-card p {
   margin: 0;
}

.tag-row {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 4px;
}

.ingredient-chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 2px;
}

.ingredient-chip {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 2px 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
   color: var(--ink-soft);
   font-size: 11px;
   font-weight: 600;
}

.ingredient-chip.ok {
   background: var(--cool-soft);
   color: var(--cool-strong);
}

.ingredient-chip.missing {
   background: var(--warm-soft);
   color: var(--warm-strong);
}

.ingredient-chip .status-dot {
   width: 4px;
   height: 4px;
}

.inventory-use {
   margin: 0;
   color: var(--cool-strong);
   font-size: 12px;
   line-height: 1.45;
}

.inventory-use.muted {
   color: var(--ink-faint);
}

/* ====== Shopping persistido ====== */

.shopping-actions {
   gap: 6px;
   flex-wrap: wrap;
}

.shopping-actions .primary-button,
.shopping-actions .ghost-button {
   min-height: 32px;
   padding: 0 10px;
   font-size: 12px;
}

.shopping-totals {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 16px;
   padding: 12px 16px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper-raised);
}

.shopping-totals .totals-item {
   display: grid;
   gap: 2px;
   min-width: 0;
}

.shopping-totals .totals-label {
   color: var(--ink-faint);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.shopping-totals .totals-value {
   color: var(--ink);
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.01em;
}

.shopping-totals .totals-value.warm {
   color: var(--warm-strong);
}

.shopping-totals .totals-value.cool {
   color: var(--cool-strong);
}

.shopping-block {
   margin-bottom: 20px;
}

.shopping-block:last-child {
   margin-bottom: 0;
}

.shopping-block-head {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 8px;
   padding: 0 2px;
}

.shopping-block-head h4 {
   margin: 0;
   color: var(--ink-dim);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.muted-count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   height: 16px;
   padding: 0 5px;
   border-radius: 999px;
   background: var(--primary-soft);
   color: var(--primary-strong);
   font-size: 10px;
   font-weight: 700;
}

.shopping-item {
   display: grid;
   grid-template-columns: 24px 1fr auto;
   gap: 12px;
   align-items: center;
   padding: 10px 12px;
   border-radius: var(--r-sm);
   transition: background 200ms var(--ease);
}

.shopping-item + .shopping-item {
   border-top: 1px solid var(--line);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.shopping-item:hover {
   background: rgba(255, 255, 255, 0.02);
}

.shopping-item.is-purchased {
   opacity: 0.45;
}

.shopping-check {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border: 1.5px solid var(--line-strong);
   border-radius: 6px;
   background: transparent;
   color: var(--ink);
   transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

.shopping-check svg,
.shopping-check i[data-lucide] {
   width: 12px;
   height: 12px;
   opacity: 0;
   transition: opacity 160ms var(--ease);
   stroke-width: 2.5;
}

.shopping-check:hover {
   border-color: var(--cool);
}

.shopping-check.is-checked {
   background: var(--cool);
   border-color: var(--cool);
   color: var(--paper);
}

.shopping-check.is-checked svg,
.shopping-check.is-checked i[data-lucide] {
   opacity: 1;
}

.shopping-item-info {
   min-width: 0;
   display: grid;
   gap: 3px;
}

.shopping-item-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   line-height: 1.3;
   letter-spacing: -0.005em;
}

.is-purchased .shopping-item-name {
   text-decoration: line-through;
   text-decoration-color: var(--ink-faint);
   color: var(--ink-dim);
}

.shopping-item-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   color: var(--ink-dim);
   font-size: 11.5px;
}

.shopping-item-meta .meta-tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.shopping-item-meta .meta-tag svg,
.shopping-item-meta .meta-tag i[data-lucide] {
   width: 11px;
   height: 11px;
   color: var(--ink-faint);
}

.shopping-item-actions {
   display: flex;
   align-items: center;
   gap: 2px;
}

.shopping-item-actions button {
   width: 28px;
   height: 28px;
   padding: 0;
   border: 0;
   border-radius: 6px;
   background: transparent;
   color: var(--ink-faint);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background 200ms var(--ease), color 200ms var(--ease);
}

.shopping-item-actions button:hover {
   background: rgba(255, 255, 255, 0.04);
   color: var(--ink);
}

.shopping-item-actions button svg,
.shopping-item-actions button i[data-lucide] {
   width: 13px;
   height: 13px;
}

.shopping-suggestion {
   cursor: pointer;
   transition: background 200ms var(--ease);
}

.shopping-suggestion:hover {
   background: rgba(124, 92, 255, 0.04);
}

.shopping-suggestion-hint {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   margin-top: 6px;
   color: var(--primary-strong);
   font-size: 11px;
   font-weight: 600;
}

.shopping-suggestion-hint svg,
.shopping-suggestion-hint i[data-lucide] {
   width: 12px;
   height: 12px;
}

.shopping-fields {
   grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
   .shopping-fields {
      grid-template-columns: 1fr;
   }
}

/* Segmented control para tipo (Ingrediente / Otros) */

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.type-toggle {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
   margin: 0;
   padding: 4px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper);
}

.type-toggle label {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 36px;
   padding: 0 12px;
   margin: 0;
   border-radius: var(--r-sm);
   color: var(--ink-dim);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: background 200ms var(--ease), color 200ms var(--ease);
}

.type-toggle input[type="radio"] {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
}

.type-toggle label span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.type-toggle label span svg,
.type-toggle label span i[data-lucide] {
   width: 14px;
   height: 14px;
}

.type-toggle label:hover {
   color: var(--ink-soft);
}

.type-toggle input[type="radio"]:checked + span {
   color: var(--ink);
}

.type-toggle label:has(input[type="radio"]:checked) {
   background: var(--paper-elevated);
   color: var(--ink);
   box-shadow: var(--shadow-1);
}

.type-toggle input[type="radio"]:focus-visible + span {
   outline: 2px solid var(--line-focus);
   outline-offset: 2px;
   border-radius: var(--r-sm);
}

.empty-state.compact {
   min-height: 140px;
   padding: 18px;
   gap: 8px;
}

.empty-state.compact .empty-bowl {
   width: 40px;
   height: 40px;
}

.group-empty {
   margin: 0;
   padding: 12px;
   color: var(--ink-faint);
   font-size: 12px;
   font-style: italic;
   text-align: center;
}

/* ====== Inventory card v2 ====== */

.inventory-card {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 12px;
   align-items: center;
   padding: 12px 14px;
   border-bottom: 1px solid var(--line);
   transition: background 200ms var(--ease);
}

.inventory-card:last-child {
   border-bottom: 0;
}

.inventory-card:hover {
   background: rgba(255, 255, 255, 0.02);
}

.inventory-card-main {
   display: grid;
   gap: 4px;
   min-width: 0;
}

.inventory-card h3 {
   margin: 0;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.005em;
}

.inventory-card-stock {
   color: var(--ink);
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.01em;
}

.inventory-card-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   color: var(--ink-dim);
   font-size: 11.5px;
}

.inventory-card-meta .meta-tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.inventory-card-meta .meta-tag svg,
.inventory-card-meta .meta-tag i[data-lucide] {
   width: 11px;
   height: 11px;
   color: var(--ink-faint);
}

.inventory-card-actions {
   display: flex;
   gap: 4px;
}

.inventory-card-actions .icon-button {
   width: 32px;
   min-height: 32px;
}

.inventory-card-actions .icon-button svg,
.inventory-card-actions .icon-button i[data-lucide] {
   width: 14px;
   height: 14px;
}

.shortage-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   margin-top: 2px;
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--warm-soft);
   color: var(--warm-strong);
   font-size: 11px;
   font-weight: 700;
   width: max-content;
}

.shortage-badge svg,
.shortage-badge i[data-lucide] {
   width: 11px;
   height: 11px;
}

/* ====== Label con botón inline (Sugerir) ====== */

.label-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}

.link-button {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 2px 6px;
   border: 0;
   border-radius: var(--r-sm);
   background: transparent;
   color: var(--primary-strong);
   font-size: 11px;
   font-weight: 700;
   transition: background 200ms var(--ease);
}

.link-button:hover {
   background: var(--primary-soft);
}

.link-button svg,
.link-button i[data-lucide] {
   width: 11px;
   height: 11px;
}

/* ====== Import receipt dialog ====== */

.import-help {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 12px 14px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper-raised);
}

.import-help .card-meta {
   flex: 1;
   margin: 0;
   font-size: 12px;
   color: var(--ink-soft);
   line-height: 1.5;
}

.import-help .ghost-button {
   flex: 0 0 auto;
}

.import-status {
   margin-left: auto;
   color: var(--ink-dim);
   font-size: 12px;
   font-style: italic;
}

/* Prompt desplegable y seleccionable */

.prompt-details {
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: var(--paper-raised);
   overflow: hidden;
}

.prompt-details summary {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 10px 14px;
   color: var(--ink-soft);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   list-style: none;
   user-select: none;
}

.prompt-details summary::-webkit-details-marker {
   display: none;
}

.prompt-details summary svg,
.prompt-details summary i[data-lucide] {
   width: 14px;
   height: 14px;
   transition: transform 200ms var(--ease);
}

.prompt-details[open] summary svg,
.prompt-details[open] summary i[data-lucide] {
   transform: rotate(90deg);
}

.prompt-details summary:hover {
   color: var(--ink);
}

.prompt-text {
   margin: 0;
   padding: 14px;
   border-top: 1px solid var(--line);
   max-height: 280px;
   overflow: auto;
   background: var(--paper);
   color: var(--ink-soft);
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 11.5px;
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-word;
   user-select: text;
}

.import-preview {
   display: grid;
   gap: 10px;
}

.import-summary {
   display: flex;
   gap: 16px;
   padding: 10px 12px;
   border-radius: var(--r-sm);
   background: var(--paper-raised);
}

.import-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 12px;
}

.import-table th,
.import-table td {
   padding: 8px 6px;
   border-bottom: 1px solid var(--line);
   text-align: left;
   color: var(--ink-soft);
}

.import-table th {
   color: var(--ink-faint);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.import-table input[type="checkbox"] {
   width: 14px;
   height: 14px;
   accent-color: var(--primary);
}

.match-pill {
   display: inline-block;
   padding: 1px 6px;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.match-pill.existing {
   background: var(--cool-soft);
   color: var(--cool-strong);
}

.match-pill.new {
   background: var(--primary-soft);
   color: var(--primary-strong);
}

.match-pill.fuzzy {
   background: var(--warm-soft);
   color: var(--warm-strong);
}

.label-hint {
   color: var(--ink-faint);
   font-size: 11px;
   font-weight: 500;
}

.import-name {
   font-weight: 700;
   color: var(--ink);
}

.import-sub {
   margin-top: 2px;
   color: var(--ink-dim);
   font-size: 11px;
}

.import-qty {
   white-space: nowrap;
   color: var(--ink-soft);
}

.import-target-select {
   min-width: 140px;
   padding: 6px 8px;
   font-size: 12px;
}

@media (max-width: 640px) {
   .import-qty {
      display: none;
   }
}

.shopping-summary {
   margin-bottom: 12px;
   padding: 10px 14px;
   border: 1px solid var(--line);
   border-radius: var(--r-sm);
   color: var(--ink-soft);
   font-size: 12px;
}

.status-dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--warm);
}

.status-dot.ok {
   background: var(--cool);
}

.stock-projection {
   display: grid;
   gap: 4px;
   padding: 8px 10px;
   border-radius: var(--r-sm);
   background: rgba(255, 255, 255, 0.02);
   color: var(--ink-soft);
   font-size: 12px;
}

.stock-projection strong {
   color: var(--cool-strong);
   font-size: 13px;
   font-weight: 700;
}

.stock-projection strong.shortage {
   color: var(--warm-strong);
}

/* ====== Modal (estilo vaul: scale + opacity) ====== */

.modal {
   width: min(560px, calc(100vw - 24px));
   max-height: calc(100dvh - 24px);
   padding: 0;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   background: transparent;
   overflow: hidden;
   box-shadow: var(--shadow-3);
}

.modal.wide-modal {
   width: min(800px, calc(100vw - 24px));
}

.modal[open] {
   animation: modal-in 280ms var(--ease-out);
}

@keyframes modal-in {
   from {
      opacity: 0;
      transform: scale(0.96) translateY(8px);
   }
   to {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

.modal::backdrop {
   background: rgba(8, 12, 22, 0.6);
   backdrop-filter: blur(8px);
   animation: backdrop-in 280ms var(--ease-out);
}

@keyframes backdrop-in {
   from { opacity: 0; backdrop-filter: blur(0); }
   to   { opacity: 1; backdrop-filter: blur(8px); }
}

.modal-content {
   display: grid;
   gap: 16px;
   max-height: calc(100dvh - 24px);
   padding: 24px;
   overflow: auto;
   background: var(--paper-soft);
   color: var(--ink);
}

.modal-content h2,
.modal-content h3,
.modal-content h4 {
   margin: 0;
   color: var(--ink);
   font-weight: 700;
   letter-spacing: -0.005em;
}

.modal-content h3 {
   font-size: 18px;
}

.modal-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   padding-bottom: 4px;
}

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

.form-grid {
   display: grid;
   grid-template-columns: 1fr 110px 1fr;
   gap: 12px;
}

.recipe-fields {
   grid-template-columns: minmax(170px, 1fr) minmax(96px, 0.5fr) minmax(150px, 0.8fr) minmax(150px, 1fr);
}

.meal-combo-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
}

.history-list {
   display: grid;
   gap: 4px;
   max-height: min(520px, 62vh);
   overflow: auto;
}

.history-card h3 {
   line-height: 1.35;
}

.ingredient-editor {
   display: grid;
   gap: 8px;
}

.measure-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 120px;
   gap: 8px;
}

.ingredient-row {
   display: grid;
   grid-template-columns: minmax(170px, 1fr) 100px 110px 36px;
   gap: 8px;
}

.ingredient-row .icon-button {
   width: 36px;
   min-height: 36px;
}

/* ====== Toast (estilo sonner: top-center, stack, spring) ====== */

.toast-stack {
   position: fixed;
   top: 20px;
   left: 50%;
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: 8px;
   transform: translateX(-50%);
   pointer-events: none;
}

.toast {
   max-width: min(420px, calc(100vw - 32px));
   padding: 12px 16px;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   background: rgba(28, 34, 56, 0.92);
   backdrop-filter: blur(16px);
   color: var(--ink);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
   box-shadow: var(--shadow-3);
   pointer-events: auto;
   animation: toast-in 380ms var(--ease-out);
}

.toast.is-leaving {
   animation: toast-out 220ms var(--ease) forwards;
}

@keyframes toast-in {
   from {
      opacity: 0;
      transform: translateY(-12px) scale(0.96);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@keyframes toast-out {
   from { opacity: 1; transform: translateY(0) scale(1); }
   to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ====== Empty state ====== */

.empty-state {
   display: grid;
   place-items: center;
   gap: 14px;
   min-height: 220px;
   padding: 32px 24px;
   color: var(--ink-soft);
   text-align: center;
}

.empty-state strong {
   color: var(--ink);
   font-size: 14px;
   font-weight: 700;
}

.empty-state p {
   max-width: 280px;
   margin: 0;
   color: var(--ink-dim);
   font-size: 12.5px;
   line-height: 1.5;
}

.empty-bowl {
   width: 56px;
   height: 56px;
   color: var(--primary-strong);
   opacity: 0.6;
}

/* ====== Responsive ====== */

@media (max-width: 1280px) {
   .shell {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 980px) {
   .topbar {
      grid-template-columns: 1fr;
      padding: 28px 24px;
   }

   .hero-scene {
      width: 56%;
      opacity: 0.7;
   }

   .week-controls {
      justify-self: start;
      width: 100%;
      max-width: 460px;
   }

   .planner-grid {
      grid-template-columns: repeat(2, minmax(220px, 1fr));
   }
}

@media (max-width: 820px) {
   .recipe-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 640px) {
   .topbar {
      margin: 12px;
      padding: 24px 20px;
      border-radius: var(--r-lg);
   }

   .hero-scene {
      width: 70%;
      opacity: 0.4;
   }

   .celestial-disc {
      width: 170px;
      height: 170px;
   }

   .disc-kanji {
      font-size: 104px;
   }

   .topbar h1 {
      font-size: clamp(30px, 8vw, 38px);
   }

   .brand-line {
      font-size: 13px;
   }

   .week-controls {
      grid-template-columns: 34px minmax(0, 1fr) 34px 34px;
      gap: 6px;
      max-width: 100%;
   }

   #todayWeek {
      width: 34px;
      padding: 0;
   }

   #todayWeek span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
   }

   .icon-button,
   #todayWeek {
      min-height: 34px;
   }

   .shell {
      gap: 14px;
      padding: 0 12px 16px;
   }

   .planner-section,
   .side-panel {
      padding: 18px;
      border-radius: var(--r-lg);
   }

   .section-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .section-actions {
      width: 100%;
      justify-content: flex-start;
   }

   .planner-grid {
      grid-template-columns: 1fr;
   }

   .meal-card {
      min-height: 130px;
   }

   .panel-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
   }

   .form-grid,
   .meal-combo-grid,
   .measure-grid,
   .ingredient-row {
      grid-template-columns: 1fr;
   }

   .modal-content {
      padding: 20px;
   }
}

.user-badge {
   font-size: 0.82rem;
   color: var(--ink-soft);
   max-width: 12ch;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.user-badge:empty {
   display: none;
}

/* ====== Nutricion ====== */
.nutri-summary {
   background: var(--paper-soft);
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   padding: 14px 16px;
   margin-bottom: 14px;
}
.nutri-head {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 12px;
}
.badge-estimated {
   font-size: 0.72rem;
   font-weight: 700;
   color: var(--warm-strong);
   background: var(--warm-soft);
   border: 1px solid var(--warm);
   border-radius: 999px;
   padding: 3px 10px;
}
.nutri-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
   gap: 10px;
}
.nutri-cell {
   display: flex;
   flex-direction: column;
   gap: 2px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   padding: 8px 10px;
}
.nutri-value {
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--ink);
}
.nutri-value small {
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--ink-dim);
   margin-left: 2px;
}
.nutri-label {
   font-size: 0.72rem;
   color: var(--ink-soft);
}
.nutrition-manual {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin: 10px 0;
}
.nutri-manual-row {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   gap: 8px;
   align-items: center;
}
.nutri-manual-row.head {
   font-size: 0.74rem;
   color: var(--ink-dim);
}
.nutri-manual-row span {
   font-size: 0.82rem;
   color: var(--ink-soft);
}
.nutrition-charts {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 16px;
}
.chart-box {
   background: var(--paper-soft);
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   padding: 14px;
   min-width: 0;
}
.chart-box h4 {
   margin: 0 0 10px;
}
.chart-box select {
   margin-bottom: 10px;
}
.chart-box canvas {
   max-height: 260px;
}