/* Sazón V80 Organic — reusable components.
   Shared by the portal (login, account, reparto), admin and content pages. The storefront reuses the
   decoration and motion blocks. Class contracts rendered by the existing JS (.btn, .btn.secondary,
   .btn.small, .card, .field, .notice, .badge, .lang, .brand…) are kept; the Organic names from the design
   system (.btn-primary, .btn-secondary, .btn-ghost, .tag-*, .input, .elev-*) are aliases of the same rules. */

/* ── base ─────────────────────────────────────────────────────────────── */
body.o-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.o-page h1, .o-page h2, .o-page h3, .o-page h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.o-page a { color: var(--color-accent-700); text-underline-offset: 3px; }
.o-page a:hover { color: var(--color-accent-800); }
.o-page button, .o-page input, .o-page select, .o-page textarea { font: inherit; }
.o-page :focus { outline: none; }
.o-page :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.o-page ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── brand wordmark ───────────────────────────────────────────────────── */
.o-page .brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  font: 400 30px/1 var(--font-heading);
  color: var(--color-text); text-decoration: none;
}
.o-page .brand:hover { color: var(--color-text); }
.o-page .brand .brand-mark { display: none; }
.o-page .brand .brand-dot, .o-page .brand i { color: var(--color-accent); font-style: normal; }
.o-page .brand-caption {
  font: 700 11px/1 var(--font-body); letter-spacing: .14em; color: var(--color-accent-2-700);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.o-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--color-action-primary); color: var(--color-cta-fg);
  font: 700 16px/1.2 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease-bounce), box-shadow .2s;
}
.o-page .btn:hover { background: var(--color-action-primary-hover); color: var(--color-cta-fg); }
.o-page .btn:active { background: var(--color-accent-700); transform: scale(.97); }
.o-page .btn:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }
.o-page .btn:disabled, .o-page .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.o-page .btn-primary { background: var(--color-action-primary); color: var(--color-cta-fg); }
.o-page .btn.secondary, .o-page .btn-secondary {
  background: transparent; color: var(--color-text); border-color: var(--color-neutral-600);
}
.o-page .btn.secondary:hover, .o-page .btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text);
}
.o-page .btn.secondary:active, .o-page .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.o-page .btn.ghost, .o-page .btn-ghost { background: transparent; color: var(--color-accent-700); border-color: transparent; }
.o-page .btn.ghost:hover, .o-page .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); }
.o-page .btn.olive, .o-page .btn-olive { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.o-page .btn.olive:hover, .o-page .btn-olive:hover { background: var(--color-accent-2-700); color: var(--color-accent-2-100); }
.o-page .btn.danger { background: var(--color-danger); color: var(--color-neutral-100); }
.o-page .btn.danger:hover { background: var(--color-danger-ink); }
.o-page .btn.small, .o-page .btn.mini {
  min-height: 34px; padding: 6px 14px; font: 700 13px/1.2 var(--font-body);
}
.o-page .btn.mini { min-height: 28px; padding: 4px 11px; font-size: 12px; }
.o-page .btn-block, .o-page .btn.full { width: 100%; }
.o-page .btn svg { flex: none; }

/* Round icon button (refresh, panel toggle). */
.o-page .o-icon-btn, .o-page .btn.icon-btn {
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer; transition: background-color .2s, transform .25s var(--ease-bounce);
}
.o-page .o-icon-btn:hover, .o-page .btn.icon-btn:hover { background: var(--color-accent-2-200); color: var(--color-text); }
.o-page .btn.icon-btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.o-page .btn.icon-btn .icon-only { font: 700 18px/1 var(--font-body); }
.o-page .o-icon-btn.is-spinning svg, .o-page .btn.icon-btn.is-spinning .icon-only { animation: o-spin .8s var(--ease-soft); }

/* Text links in top bars. */
.o-page .top-text-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-accent-700);
  font: 700 14px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
}
.o-page .top-text-link:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); }
.o-page .top-logout { color: var(--color-text); background: var(--color-surface); }
.o-page .top-logout:hover { background: var(--color-accent-2-200); color: var(--color-text); }

/* ── language switch (pill segmented) ─────────────────────────────────── */
.o-page .lang {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 0; border-radius: var(--radius-pill); background: var(--color-surface);
}
.o-page .lang button {
  border: 0; cursor: pointer; padding: 6px 13px; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text);
  font: 800 12px/1.2 var(--font-body); letter-spacing: .04em;
  transition: background-color .25s, box-shadow .25s;
}
.o-page .lang button.active, .o-page .lang button[aria-pressed="true"] {
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm);
}

/* ── tags & badges ────────────────────────────────────────────────────── */
.o-page .tag, .o-page .badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font: 700 12px/1.3 var(--font-body); letter-spacing: .02em;
  background: var(--color-neutral-200); color: var(--color-neutral-800);
}
.o-page .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.o-page .tag-accent-2, .o-page .badge.ok { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.o-page .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.o-page .tag-outline { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.o-page .badge.warn { background: var(--color-accent-100); color: var(--color-accent-800); }
.o-page .badge.bad { background: var(--color-danger-bg); color: var(--color-danger-ink); }

/* ── forms ────────────────────────────────────────────────────────────── */
.o-page .field { display: grid; gap: 6px; }
.o-page .field > label, .o-page .field label {
  font: 700 12px/1.3 var(--font-body); letter-spacing: .02em;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.o-page .input,
.o-page .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.o-page .field select, .o-page .field textarea,
.o-page .toolbar input, .o-page .toolbar select {
  width: 100%; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
  background: var(--color-neutral-100); color: var(--color-text);
  font: 400 15px/1.3 var(--font-body); caret-color: var(--color-accent);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.o-page .field textarea, .o-page textarea.input { min-height: 96px; border-radius: var(--radius-md); resize: vertical; }
.o-page .input:hover, .o-page .field input:hover, .o-page .field select:hover, .o-page .field textarea:hover {
  border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.o-page .input:focus-visible, .o-page .field input:focus-visible, .o-page .field select:focus-visible,
.o-page .field textarea:focus-visible, .o-page .toolbar input:focus-visible, .o-page .toolbar select:focus-visible {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: var(--color-bg);
}
.o-page input[type="checkbox"], .o-page input[type="radio"] { accent-color: var(--color-accent); }
.o-page .form-note, .o-page .hint { font-size: 14px; line-height: 1.5; color: var(--color-accent-2-800); }

/* ── cards & surfaces ─────────────────────────────────────────────────── */
.o-page .card {
  background: var(--color-surface); border: 0;
  border-radius: var(--radius-lg); padding: clamp(18px, 2.4vw, 26px);
}
.o-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: clamp(18px, 2.4vw, 26px); }
.o-card--olive { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.o-card--terra { background: var(--color-accent); color: var(--color-bg); }
.o-card--paper { background: var(--color-neutral-100); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.o-kicker {
  font: 800 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-700);
}

/* ── notices ──────────────────────────────────────────────────────────── */
.o-page .notice { display: none; margin: 12px 0; padding: 12px 18px; border-radius: var(--radius-md); font-weight: 600; }
.o-page .notice.show { display: block; animation: o-rise .45s var(--ease-soft) both; }
.o-page .notice.ok { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.o-page .notice.bad { background: var(--color-danger-bg); color: var(--color-danger-ink); }
.o-page .notice.warn { background: var(--color-accent-100); color: var(--color-accent-900); }

/* ── tables ───────────────────────────────────────────────────────────── */
.o-page .table-wrap {
  background: var(--color-neutral-100); border: 0; border-radius: var(--radius-lg);
  overflow: auto; box-shadow: var(--shadow-sm);
  /* V80.5 — horizontal-scroll hint: a soft shadow fades in at whichever edge
     still has hidden columns, and disappears on its own once you've
     scrolled all the way there. Classic "scroll shadows" CSS trick — no JS,
     works for any table width. Found via design audit: wide tables
     (Clientes, etc.) were cutting off trailing columns with zero visual
     cue that more content was scrollable. */
  background-image:
    linear-gradient(to right, var(--color-neutral-100) 30%, transparent),
    linear-gradient(to left, var(--color-neutral-100) 30%, transparent),
    linear-gradient(to right, color-mix(in srgb, var(--color-text) 18%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--color-text) 18%, transparent), transparent);
  background-repeat: no-repeat;
  background-position: left center, right center, left center, right center;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.o-page .table-wrap th {
  background: var(--color-neutral-200); color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font: 800 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--color-divider);
}
.o-page .table-wrap td { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.o-page .table-wrap tbody tr { transition: background-color .15s; }
.o-page .table-wrap tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
/* Keep the first (identifying) column in view while scrolling horizontally
   through the rest — otherwise "which row is this?" gets lost off-screen. */
.o-page .table-wrap th:first-child, .o-page .table-wrap td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-neutral-100);
  box-shadow: 2px 0 4px -2px color-mix(in srgb, var(--color-text) 20%, transparent);
}
.o-page .table-wrap th:first-child { background: var(--color-neutral-200); z-index: 2; }
.o-page .table-wrap tbody tr:hover td:first-child {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-neutral-100));
}

/* ── dialog ───────────────────────────────────────────────────────────── */
.o-page .dialog-backdrop, .o-page .backdrop.show {
  background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  backdrop-filter: blur(2px);
}

/* ── decoration: organic blobs ────────────────────────────────────────── */
.o-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.o-blob {
  position: absolute; pointer-events: none;
  border-radius: var(--radius-blob);
  animation: o-float var(--o-dur, 13s) ease-in-out infinite;
  animation-delay: var(--o-delay, 0s);
}
.o-blob--sand { background: var(--color-accent-200); opacity: .7; }
.o-blob--peach { background: var(--color-accent-100); }
.o-blob--sage { background: var(--color-accent-2-200); opacity: .8; }
.o-blob--mint { background: var(--color-accent-2-100); }
.o-blob--olive { background: var(--color-accent-2-700); }
.o-blob--terra { background: var(--color-accent); opacity: .9; }
.o-blob--round { border-radius: 50%; }

/* Rotating circular photo with orbiting pills (hero + login scene). */
.o-plate { position: relative; aspect-ratio: 1; }
.o-plate__photo {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-surface);
}
.o-plate__photo > .o-plate__spin {
  position: absolute; inset: -22%;
  background: var(--o-plate-img, none) 52% 50% / cover no-repeat;
  animation: o-spin 80s linear infinite;
}
.o-plate__halo { position: absolute; inset: -6%; background: var(--color-accent-2-300); border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; animation: o-float 14s ease-in-out infinite; }
.o-orbit { position: absolute; inset: 0; animation: o-spin var(--o-orbit, 36s) linear infinite; }
.o-orbit__slot { position: absolute; transform: translate(-50%, -50%); }
.o-orbit__pill {
  display: block; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font: 700 14px/1.2 var(--font-body); box-shadow: var(--shadow-md);
  animation: o-spin var(--o-orbit, 36s) linear infinite reverse;
}
.o-pill--cream { background: var(--color-bg); color: var(--color-text); }
.o-pill--olive { background: var(--color-accent-2-700); color: var(--color-accent-2-100); }
.o-pill--terra { background: var(--color-accent); color: var(--color-bg); }
.o-pill--peach { background: var(--color-accent-300); color: var(--color-accent-900); }
.o-pill--sage { background: var(--color-accent-2-300); color: var(--color-accent-2-900); }

/* Circular text stamp. */
.o-stamp { position: absolute; width: 124px; height: 124px; }
.o-stamp__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--color-accent); box-shadow: var(--shadow-md); }
.o-stamp__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: o-spin 18s linear infinite; }
.o-stamp__ring text { font: 800 12.5px var(--font-body); letter-spacing: 3px; fill: var(--color-bg); }
.o-stamp__heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Tilted scrolling band. */
.o-marquee {
  position: relative; overflow: hidden; padding: 18px 0;
  background: var(--color-accent-2-700); color: var(--color-accent-2-100);
  transform: rotate(-1.2deg); margin: 0 -20px;
}
.o-marquee__track {
  display: flex; gap: 48px; width: max-content; white-space: nowrap;
  font: 400 26px/1.2 var(--font-heading);
  animation: o-marquee 30s linear infinite;
}
.o-marquee__track span { display: inline-flex; gap: 48px; align-items: center; }
.o-marquee__track span::after { content: "✦"; color: var(--color-accent-300); }

/* Scroll reveal (armed by organic-motion.js; content stays visible without JS). */
.o-reveal-armed [data-o-reveal] { opacity: 0; transform: translateY(36px) scale(.985); }
.o-reveal-armed [data-o-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: var(--o-reveal-delay, 0s);
}

/* ── keyframes ────────────────────────────────────────────────────────── */
@keyframes o-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: var(--radius-blob); }
  33% { transform: translate(18px, -24px) rotate(10deg) scale(1.04); border-radius: 44% 56% 60% 40% / 56% 42% 58% 44%; }
  66% { transform: translate(-14px, 12px) rotate(-8deg) scale(.97); border-radius: 60% 40% 45% 55% / 42% 58% 42% 58%; }
}
@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes o-marquee { to { transform: translateX(-50%); } }
@keyframes o-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes o-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes o-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-bg) 70%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

.o-bob { animation: o-bob 2.8s ease-in-out infinite; animation-delay: var(--o-delay, 0s); }
.o-rise { animation: o-rise .55s var(--ease-soft) both; animation-delay: var(--o-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  .o-blob, .o-plate__spin, .o-plate__halo, .o-orbit, .o-orbit__pill, .o-stamp__ring, .o-marquee__track, .o-bob, .o-rise { animation: none !important; }
  .o-reveal-armed [data-o-reveal] { opacity: 1; transform: none; }
  .o-page .btn, .o-page .o-icon-btn { transition: none; }
}

/* V80.2 — never let a wide child (drawer off-canvas, long top bar) widen the page on phones. */
html:has(body.o-page), body.o-page { overflow-x: clip; }