/* ================================================================
 * VITALIZA — vitaliza-theme.css
 * Capa de tema que reapunta TODA la app al Design System v1.1
 * (solar #FF8A00 · General Sans · crema · tarjetas suaves).
 *
 * Se carga DESPUÉS de global.css/components.css y sobrescribe la
 * paleta verde/serif anterior sin tocar la estructura ni la lógica.
 * ================================================================ */

:root {
  /* ── Marca ── */
  --color-bg: #F7F3EE;
  --color-bg-subtle: rgba(255,253,251,.60);
  --color-surface: rgba(255,253,251,.82);
  --color-surface-hover: rgba(255,253,251,.95);
  --color-text-primary: #2B2E34;
  --color-text-secondary: rgba(43,46,52,.74);
  --color-text-muted: rgba(43,46,52,.55);
  --color-text-on-accent: #2B2E34;           /* ink sobre naranja (accesible) */

  /* Acento = solar (antes era verde) */
  --color-accent: #FF8A00;
  --color-accent-hover: #E67A00;
  --color-accent-subtle: rgba(255,138,0,.14);

  --color-border: rgba(43,46,52,.12);
  --color-border-subtle: rgba(43,46,52,.07);
  --color-border-strong: rgba(43,46,52,.22);

  --color-success: #5E7A50; --color-success-subtle: rgba(94,122,80,.14);
  --color-error:   #C6402F; --color-error-subtle:   rgba(198,64,47,.12);

  /* Tipografía del Design System */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "General Sans", "Inter", system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 1px 2px rgba(43,46,52,.04), 0 8px 24px rgba(43,46,52,.06);
  --shadow-md: 0 2px 8px rgba(43,46,52,.06), 0 18px 48px rgba(43,46,52,.10);
  --shadow-lg: 0 8px 24px rgba(43,46,52,.10), 0 34px 90px rgba(43,46,52,.14);
  --shadow-accent: 0 0 0 4px rgba(255,138,0,.18);

  --vt-grad: linear-gradient(135deg,#FF8A00,#FFB84D);
}

/* Fondo cálido de marca (reemplaza los orbes verde/azul) */
html { background: #F7F3EE; color: var(--color-text-primary); }
body {
  background:
    radial-gradient(circle at 0% 0%,   rgba(255,184,77,.34),  transparent 32rem),
    radial-gradient(circle at 100% 12%, rgba(255,231,213,.60), transparent 34rem),
    radial-gradient(circle at 50% 100%, rgba(155,177,138,.22), transparent 34rem),
    #F7F3EE;
}
.vxp, .vxd { background: radial-gradient(circle at 50% 0%, #FFF3E2 0%, #F7F3EE 42%, #FBEFE1 100%); }

/* Auroras de fondo → cálidas (antes rosa/azul/verde) */
.vxp-a1 { background: #FFB84D; }
.vxp-a2 { background: #FFE7D5; }
.vxp-a3 { background: #9BB18A; }

/* Botones primarios → gradiente solar + texto ink (accesible) */
.vxp-primary, .vxd-pro, .authx-form button, .osb-primary,
button.primary, .btn-primary, .vui-button.primary {
  background: var(--vt-grad) !important;
  color: #2B2E34 !important;
  box-shadow: 0 14px 34px rgba(230,122,0,.24) !important;
}
/* Envío de chat / acciones chicas verdes → naranja */
.vxp-form button, .vxp-starters button {
  background: #FF8A00 !important; color: #2B2E34 !important;
}
.vxp-starters button { background: rgba(255,138,0,.13) !important; color: #B85C00 !important; }

/* Badges / píldoras verdes → cálidas */
.vxd-badge, .vxd-tile em, .section-eyebrow, .authx-kicker,
.vxp-share-card small, .vxd-share small {
  color: #C56A00 !important;
}
.vxd-badge, .vxd-tile em { background: rgba(255,138,0,.14) !important; }

/* Avatares/orbes de Vita → SOL de marca (reemplaza la hojita/emoji) */
.vxp-orb, .vxd-orb, .authx-orb {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23fff'%3E%3Cpath d='M52 116 a76 76 0 0 1 152 0 Z'/%3E%3Crect x='58' y='125' width='140' height='20' rx='10'/%3E%3Crect x='69' y='153' width='118' height='20' rx='10'/%3E%3Crect x='86' y='181' width='84' height='20' rx='10'/%3E%3C/g%3E%3C/svg%3E") center / 52% no-repeat,
    linear-gradient(145deg, #FF8A00, #FFB84D) !important;
  color: transparent !important;
  font-size: 0 !important;
}
.vxp-orb span, .vxd-orb span, .authx-orb span { font-size: 0 !important; color: transparent !important; }
.vxp-vita-avatar { background: #2B2E34 !important; color: #fff !important; }

/* Foco de inputs → naranja */
.authx-form input:focus { box-shadow: var(--shadow-accent) !important; border-color: rgba(255,138,0,.45) !important; }

/* ================================================================
 * PERFIL · ONBOARDING · AJUSTES · SUSCRIPCIÓN (osp/osb/oss)
 * Estas pantallas traían verde #6f8058 + gradiente #231f20→#596846.
 * Se reapuntan al Design System (solar + ink) sin tocar su estructura.
 * ================================================================ */

/* Orbes → SOL de marca (reemplaza el gradiente verde/azul) */
.osp-orb, .osb-orb, .oss-orb {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23fff'%3E%3Cpath d='M52 116 a76 76 0 0 1 152 0 Z'/%3E%3Crect x='58' y='125' width='140' height='20' rx='10'/%3E%3Crect x='69' y='153' width='118' height='20' rx='10'/%3E%3Crect x='86' y='181' width='84' height='20' rx='10'/%3E%3C/g%3E%3C/svg%3E") center / 54% no-repeat,
    linear-gradient(145deg, #FF8A00, #FFB84D) !important;
  color: transparent !important; font-size: 0 !important;
  box-shadow: 0 20px 60px rgba(230,122,0,.22) !important;
}
.osp-orb span, .osb-orb span, .oss-orb span { font-size: 0 !important; color: transparent !important; }

/* Kickers verdes → solar */
.osp-kicker, .osb-kicker, .oss-kicker { color: #C56A00 !important; }

/* Botones primarios → gradiente solar + texto ink (accesible WCAG AA) */
.osp-primary, .osb-primary, .osp-form button, .oss button {
  background: linear-gradient(135deg,#FF8A00,#FFB84D) !important;
  color: #2B2E34 !important;
  box-shadow: 0 14px 34px rgba(230,122,0,.24) !important;
}

/* Barra de progreso del onboarding → solar */
.osb-progress i { background: linear-gradient(90deg,#FF8A00,#FFB84D) !important; }

/* Checks y objetivos → solar */
.osb-check input { accent-color: #FF8A00 !important; }
.osb-goals button.active {
  background: linear-gradient(135deg,#FF8A00,#FFB84D) !important;
  color: #2B2E34 !important;
}

/* Foco de inputs en estas pantallas → naranja */
.osp-form input:focus, .osp-form select:focus,
.osb-card input:focus, .osb-card select:focus {
  border-color: rgba(255,138,0,.5) !important;
  box-shadow: 0 0 0 4px rgba(255,138,0,.14) !important;
}

/* Suscripción — plan destacado en cálido ink (antes verde) */
.oss-plans article.featured {
  background: linear-gradient(145deg, #2B2E34, #6B4A1E) !important; color: #fff !important;
}
.oss-plans span { color: #C56A00 !important; }

/* Mensajes de éxito mantienen sage (coherente con --color-success) */

/* ================================================================
 * ENERGÍA DEL DÍA — tarjeta de cielo aplicado en el Dashboard.
 * El cielo se ve (bello, simple, útil), pero no abruma.
 * ================================================================ */
.vxd-sky{display:flex;gap:16px;align-items:center;padding:18px;border-radius:24px;
  background:linear-gradient(135deg, rgba(255,231,213,.7), rgba(255,253,251,.9));
  border:1px solid rgba(255,138,0,.18);box-shadow:0 16px 44px rgba(230,122,0,.12)}
.vxd-sky-moon{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:20px;
  background:radial-gradient(circle at 30% 25%, #FFF3E2, #FFE7D5);font-size:30px;box-shadow:0 8px 22px rgba(230,122,0,.16)}
.vxd-sky-body{display:grid;gap:3px;min-width:0}
.vxd-sky-body small{color:#C56A00;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.vxd-sky-body strong{font-family:var(--font-heading,General Sans),Inter,sans-serif;font-weight:600;font-size:16px;color:#2B2E34;line-height:1.2}
.vxd-sky-body p{margin:2px 0 4px;color:var(--color-text-secondary,rgba(43,46,52,.72));font-size:14px;line-height:1.45}
.vxd-sky-body a{color:#C56A00;text-decoration:none;font-weight:700;font-size:13px}

/* ================================================================
 * "Lo que Vita preparó para hoy" — el Dashboard como centro real de
 * Vita: no tiles genéricas, sino el trabajo que agenda/freezer/journal
 * ya hicieron, resumido y accionable en una sola mirada.
 * ================================================================ */
.vxd-prepared{display:grid;gap:10px;padding:4px 2px}
.vxd-prepared>small{display:block;padding:0 4px;color:#6f8058;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.vxd-prepared-items,.vxd-prepared #vxd-prepared-items{display:grid;gap:10px}
.vxd-prepared-item{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:14px 16px;
  border-radius:22px;background:rgba(255,253,251,.72);border:1px solid rgba(255,138,0,.16);
  box-shadow:0 10px 28px rgba(230,122,0,.08)}
.vxd-prepared-item span{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;
  background:rgba(255,231,213,.6);font-size:19px}
.vxd-prepared-item p{margin:0 0 6px;color:#2B2E34;font-size:14px;line-height:1.45}
.vxd-prepared-item a{color:#C56A00;text-decoration:none;font-weight:700;font-size:12.5px}
html[data-theme="dark"] .vxd-prepared-item{background:rgba(35,31,32,.55);border-color:rgba(255,184,77,.18)}
html[data-theme="dark"] .vxd-prepared-item p{color:#F3EFE9}

/* Notas dentro de las tiles: lo que Vita ya sabe, no un ícono decorativo */
.vxd-tile-note{display:inline-flex;margin-top:8px;padding:4px 9px;border-radius:999px;
  background:rgba(255,138,0,.14);color:#A85A22;font-size:11px;font-weight:800}

/* Memoria proactiva — Vita abre el día sabiendo lo de ayer.
   Es el corazón emocional del Dashboard: más grande, más aire, respira al aparecer. */
.vxd-greeting{margin:14px auto 10px;max-width:30ch;font-family:var(--font-heading,General Sans),Inter,sans-serif;
  font-weight:500;font-size:clamp(19px,5.2vw,25px);line-height:1.36;color:#A85A22;letter-spacing:-.015em;
  animation:vxdGreet .7s cubic-bezier(.2,.8,.2,1) both}
html[data-theme="dark"] .vxd-greeting{color:#FFB84D}
@keyframes vxdGreet{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Un poco más de aire alrededor del héroe del día */
.vxd-hero h1{margin-bottom:2px}

/* ================================================================
 * MODO NOCHE — refugio cálido. Aditivo: solo actúa con data-theme="dark",
 * así el modo claro (probado y estable) queda intacto. El sol naranja se
 * mantiene: brilla aún más sobre el fondo oscuro.
 * ================================================================ */
html[data-theme="dark"] {
  --color-bg: #17140F;
  --color-bg-subtle: rgba(34,29,24,.6);
  --color-surface: rgba(40,34,28,.82);
  --color-surface-hover: rgba(52,44,36,.95);
  --color-text-primary: #F3ECE3;
  --color-text-secondary: rgba(243,236,227,.74);
  --color-text-muted: rgba(243,236,227,.52);
  --color-border: rgba(243,236,227,.14);
  --color-border-subtle: rgba(243,236,227,.08);
  --color-border-strong: rgba(243,236,227,.24);
  --color-text-on-accent: #2B2E34;   /* ink sobre naranja sigue legible */
}
html[data-theme="dark"] { background: #17140F; }
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 0% 0%,   rgba(255,138,0,.12),  transparent 32rem),
    radial-gradient(circle at 100% 12%, rgba(255,184,77,.08), transparent 34rem),
    #17140F !important;
  color: var(--color-text-primary);
}

/* Fondos de página → noche */
html[data-theme="dark"] .vxp, html[data-theme="dark"] .vxd,
html[data-theme="dark"] .vcy, html[data-theme="dark"] .vnt,
html[data-theme="dark"] .vsoul, html[data-theme="dark"] .brz,
html[data-theme="dark"] .ob, html[data-theme="dark"] .osp,
html[data-theme="dark"] .osb, html[data-theme="dark"] .oss,
html[data-theme="dark"] .authx, html[data-theme="dark"] .screen,
html[data-theme="dark"] .lib-page, html[data-theme="dark"] .recipes-screen,
html[data-theme="dark"] .planner-page, html[data-theme="dark"] .brz-entry, html[data-theme="dark"] .brz-libview {
  background: radial-gradient(circle at 8% 0%, rgba(255,138,0,.10), transparent 30rem), #17140F !important;
}

/* Tarjetas, héroes, tiles, secciones → superficie noche */
html[data-theme="dark"] [class*="-card"],
html[data-theme="dark"] [class*="-hero"],
html[data-theme="dark"] [class*="-tile"],
html[data-theme="dark"] .pv-sec, html[data-theme="dark"] .pv-card,
html[data-theme="dark"] .ob-card, html[data-theme="dark"] .osp-card,
html[data-theme="dark"] .vcy-hero, html[data-theme="dark"] .vcy-card,
html[data-theme="dark"] .vnt-hero, html[data-theme="dark"] .vnt-card,
html[data-theme="dark"] .vsoul-hero, html[data-theme="dark"] .vsoul-block, html[data-theme="dark"] .vsoul-natal,
html[data-theme="dark"] .brz-hero, html[data-theme="dark"] .brz-end-card,
html[data-theme="dark"] .vxd-sky, html[data-theme="dark"] .pln-today {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
}

/* Superficies blancas (inputs, chips, píldoras) → noche */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] [class*="-chip"],
html[data-theme="dark"] [class*="-mood"],
html[data-theme="dark"] [class*="-goal"],
html[data-theme="dark"] [class*="-need"],
html[data-theme="dark"] [class*="-tech"],
html[data-theme="dark"] [class*="-sym"],
html[data-theme="dark"] .ob-toggle, html[data-theme="dark"] .pv-chip, html[data-theme="dark"] .brz-item {
  background: rgba(40,34,28,.9) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: rgba(243,236,227,.4); }

/* El acento solar y sus botones se mantienen (ink sobre naranja es legible). */
html[data-theme="dark"] .ob-error { background: rgba(198,64,47,.18) !important; color: #F3B4A8 !important; }

/* Success mantiene sage; error cálido ya redefinido arriba */