/* =====================================================================
   Arte Aurora · Cotizador de resina
   Estética "resina epóxica": vidrio, iridiscencia tipo mica, madera con
   veta y manchas de color que fluyen. Claro / oscuro / automático.
   ===================================================================== */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Tipografía de la marca Arte Aurora (Matcha Style · Khurasan, uso comercial permitido) */
@font-face { font-family: "Matcha Style"; src: url("fonts/matcha-style.woff") format("woff"); font-display: swap; }

/* ---------- Tokens: claro ---------- */
:root {
  --bg: #f8f1fb;
  --bg-2: #efe1f6;
  --surface: rgba(255, 255, 255, .68);
  --surface-solid: #ffffff;
  --surface-2: rgba(255, 255, 255, .5);
  --field: rgba(255, 255, 255, .78);
  --line: rgba(70, 30, 100, .11);
  --line-2: rgba(70, 30, 100, .2);
  --text: #1d0f2a;
  --text-2: #4a3560;
  --muted: #7a6890;
  --accent: #8b3fd9;
  --accent-2: #b07ce8;
  --accent-3: #ff7a6b;
  --gold: #c9963c;
  --danger: #d1352b;
  --ok: #0f9f6e;
  --resin-a: #22d3ee;
  --resin-b: #3b82f6;
  --resin-c: #a78bfa;
  --blob-1: #c4a1ff;
  --blob-2: #ffb3a7;
  --blob-3: #e3c8ff;
  --blob-4: #ff9d8c;
  --blob-op: .55;
  --shadow-sm: 0 1px 2px rgba(10, 40, 50, .06);
  --shadow: 0 1px 1px rgba(40, 10, 60, .04), 0 12px 32px -14px rgba(70, 20, 110, .28);
  --shadow-lg: 0 30px 70px -28px rgba(70, 20, 110, .45);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .7);
  --radius: 22px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --brand: "Matcha Style", "Plus Jakarta Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --head-h: 68px;
  color-scheme: light;
}

/* ---------- Tokens: oscuro (sistema o elegido) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #120a1c;
    --bg-2: #22113a;
    --surface: rgba(34, 18, 52, .58);
    --surface-solid: #1d0f2e;
    --surface-2: rgba(34, 18, 52, .4);
    --field: rgba(14, 6, 24, .55);
    --line: rgba(220, 190, 255, .11);
    --line-2: rgba(220, 190, 255, .2);
    --text: #f6eefc;
    --text-2: #dccbe9;
    --muted: #a893bd;
    --accent: #c08bff;
    --accent-2: #e2c3ff;
    --accent-3: #ff8e7f;
    --gold: #e8c37a;
    --danger: #ff6b5e;
    --ok: #34d399;
    --blob-1: #7c3aed;
    --blob-2: #c2410c;
    --blob-3: #a855f7;
    --blob-4: #f0726a;
    --blob-op: .5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 22px 44px -22px rgba(0, 0, 0, .75);
    --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #120a1c;
  --bg-2: #22113a;
  --surface: rgba(34, 18, 52, .58);
  --surface-solid: #1d0f2e;
  --surface-2: rgba(34, 18, 52, .4);
  --field: rgba(14, 6, 24, .55);
  --line: rgba(220, 190, 255, .11);
  --line-2: rgba(220, 190, 255, .2);
  --text: #f6eefc;
  --text-2: #dccbe9;
  --muted: #a893bd;
  --accent: #c08bff;
  --accent-2: #e2c3ff;
  --accent-3: #ff8e7f;
  --gold: #e8c37a;
  --danger: #ff6b5e;
  --ok: #34d399;
  --blob-1: #7c3aed;
  --blob-2: #c2410c;
  --blob-3: #a855f7;
  --blob-4: #f0726a;
  --blob-op: .5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 22px 44px -22px rgba(0, 0, 0, .75);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------- Bienvenida ---------- */
.splash-screen { display: none; }
html.splash .splash-screen {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #2a1342, #0c0614 70%);
  animation: splashOut .7s var(--ease) 1.65s forwards;
}
.splash-in { position: relative; display: grid; justify-items: center; }
.splash-drop { width: 62px; height: auto; animation: dropFall 1s cubic-bezier(.5, 0, .75, 0) both, dropSquash .5s var(--spring) 1s both; filter: drop-shadow(0 12px 24px rgba(45, 226, 200, .45)); }
.splash-ring {
  position: absolute; top: 58px; left: 50%; width: 30px; height: 10px; margin-left: -15px; border-radius: 50%;
  border: 2px solid rgba(45, 226, 200, .7); opacity: 0; animation: ring 1s var(--ease) 1s forwards;
}
.splash-ring.r2 { animation-delay: 1.12s; border-color: rgba(107, 147, 255, .6); }
.splash-ring.r3 { animation-delay: 1.24s; border-color: rgba(185, 139, 255, .5); }
.splash-title {
  margin: 22px 0 0; font-family: var(--brand); font-weight: 400; font-size: 2.4rem; letter-spacing: .5px;
  background: linear-gradient(100deg, #e2c3ff, #c08bff 40%, #ff8e7f 75%, #e8c37a); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: fadeUp .7s var(--ease) .9s forwards;
}
.splash-sub { margin: 4px 0 0; color: #8aa4af; letter-spacing: 3px; text-transform: uppercase; font-size: .72rem; opacity: 0; animation: fadeUp .7s var(--ease) 1.05s forwards; }

/* ---------- Fondo ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(130% 90% at 50% -10%, var(--bg-2), var(--bg) 65%); transition: background .5s; }
.blob {
  position: absolute; width: 48vmax; height: 48vmax; border-radius: 50%;
  filter: blur(80px); opacity: var(--blob-op);
  animation: drift 28s var(--ease) infinite alternate;
  will-change: transform;
}
.b1 { background: var(--blob-1); top: -20vmax; left: -14vmax; }
.b2 { background: var(--blob-2); top: 6vmax; right: -18vmax; animation-duration: 34s; animation-delay: -7s; }
.b3 { background: var(--blob-3); bottom: -24vmax; left: 18vw; animation-duration: 40s; animation-delay: -13s; }
.b4 { background: var(--blob-4); bottom: 8vmax; left: -22vmax; width: 32vmax; height: 32vmax; opacity: calc(var(--blob-op) * .6); animation-duration: 31s; }
.grain {
  position: absolute; inset: -50%; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(18px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid var(--line);
}
html:not(.splash) .topbar { animation: slideDown .7s var(--ease) both; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.logo { position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.logo img { border-radius: 12px; animation: float 6s ease-in-out infinite; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.logo::after {
  content: ""; position: absolute; inset: -4px; border-radius: 15px; z-index: -1;
  background: conic-gradient(from var(--ang), var(--accent), var(--accent-2), var(--accent-3), var(--gold), var(--accent));
  filter: blur(9px); opacity: .55; animation: spin 6s linear infinite;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: var(--brand); font-weight: 400; font-size: 1.5rem; letter-spacing: .4px; line-height: 1.05;
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 40%, var(--accent-3) 70%, var(--accent));
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
.brand-sub { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar .tabs {
  position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 15px; margin-left: auto;
  background: color-mix(in srgb, var(--surface-solid) 50%, transparent); border: 1px solid var(--line);
}
.tab-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 11px;
  background: var(--surface-solid); box-shadow: var(--shadow-sm), 0 6px 16px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: left .5s var(--spring), width .5s var(--spring);
}
.topbar .tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--muted);
  padding: 9px 15px; border-radius: 11px; font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: color .3s; overflow: hidden; isolation: isolate;
}
.topbar .tab:hover { color: var(--text); }
.topbar .tab.active { color: var(--text); }
.topbar .tab.active .i { color: var(--accent); }
.badge {
  display: inline-block; min-width: 20px; text-align: center; border-radius: 99px; padding: 1px 6px; font-size: .7rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; line-height: 1.4;
}
.badge.pop { animation: pop .55s var(--spring); }

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-solid) 55%, transparent); color: var(--text);
  transition: transform .35s var(--spring), border-color .3s, background .3s, color .3s;
  position: relative; overflow: hidden; isolation: isolate;
}
.icon-btn:hover { transform: translateY(-2px) rotate(-6deg); border-color: var(--accent); color: var(--accent); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .i { width: 20px; height: 20px; }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 10px; }
.icon-btn.sm .i { width: 17px; height: 17px; }
.icon-btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- Estructura ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 6px 18px 60px; }
.view { display: none; }
.view.active { display: block; animation: viewIn .5s var(--ease); }

/* ---------- Hero ---------- */
.hero { display: grid; gap: 18px; padding: 26px 4px 22px; align-items: end; }
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .hero.compact { grid-template-columns: 1fr; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent); padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: beacon 2.2s infinite; }
.hero h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.3rem);
  letter-spacing: -1.2px; line-height: 1.02; margin: 14px 0 0;
}
.hero.compact h2 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
.hero h2 em {
  font-style: italic; padding-right: .06em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2), var(--accent-3), var(--gold), var(--accent));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}
.hero p { margin: 10px 0 0; color: var(--muted); font-size: 1rem; max-width: 56ch; }
.view.active .hero-text > * { animation: fadeUp .8s var(--ease) both; }
.view.active .hero-text > :nth-child(2) { animation-delay: .08s; }
.view.active .hero-text > :nth-child(3) { animation-delay: .16s; }
/* Con la bienvenida en pantalla, la entrada empieza cuando ella se va */
html.splash .view.active .hero-text > * { animation-delay: 1.75s; }
html.splash .view.active .hero-text > :nth-child(2) { animation-delay: 1.83s; }
html.splash .view.active .hero-text > :nth-child(3) { animation-delay: 1.91s; }
html.splash .tpl { animation-delay: calc(var(--i, 0) * 45ms + 1.9s); }
html.splash.js .reveal.in { transition-delay: calc(var(--rd, 0ms) + 1.7s); }

.templates { min-width: 0; }
.tpl-label { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.tpl-label .i { color: var(--gold); }
.tpl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 9px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--spring), border-color .3s, box-shadow .3s;
  animation: fadeUp .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms);
  position: relative; overflow: hidden; isolation: isolate;
}
.tpl:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.tpl:active { transform: scale(.97); }
.tpl.used { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.tpl svg { width: 34px; height: 24px; flex: none; }
.tpl svg * { fill: color-mix(in srgb, var(--resin-a) 30%, transparent); stroke: var(--accent); stroke-width: 1.8; }
.tpl svg .water { fill: var(--resin-a); stroke: none; }
.tpl svg .wd { fill: color-mix(in srgb, #b07a4a 50%, transparent); }
.tpl b { display: block; font-size: .8rem; line-height: 1.15; }
.tpl small { display: block; font-size: .7rem; color: var(--muted); }

.grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 980px) { .grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); } }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- Pasos ---------- */
.stepper {
  position: sticky; top: calc(var(--head-h) + 8px); z-index: 20;
  display: flex; gap: 4px; padding: 5px; border-radius: 16px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow);
}
.stepper::-webkit-scrollbar { display: none; }
.stepper a {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none;
  padding: 8px 11px; border-radius: 11px; font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: background .35s, color .35s;
}
.stepper a i {
  display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; font-style: normal; font-size: .7rem;
  border: 1.5px solid var(--line-2); transition: all .35s var(--spring);
}
.stepper a.done i { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.stepper a:hover { color: var(--text); }
.stepper a.active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent)); color: var(--text); }
.stepper a.active i { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; transform: scale(1.12); }

/* ---------- Tarjetas ---------- */
.card {
  position: relative; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow), var(--glass-hi);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: border-color .4s, box-shadow .4s;
  scroll-margin-top: calc(var(--head-h) + 76px);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -100%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%);
  opacity: 0; transition: opacity .45s;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--line-2); }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-head h3 { margin: 0; font-size: 1.04rem; letter-spacing: -.15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-sub { margin: 1px 0 0; font-size: .78rem; color: var(--muted); }
.step {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: .9rem; font-weight: 800;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.step .i { width: 18px; height: 18px; }
.opt { font-weight: 600; color: var(--muted); font-size: .68rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-2); }

/* Aparición al desplazar */
html.js .reveal { opacity: 0; transform: translateY(26px) scale(.985); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--rd, 0ms); }

/* ---------- Formas ---------- */
.shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.shape {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 4px 11px; border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--field); color: var(--text); font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: transform .4s var(--spring), border-color .3s, box-shadow .3s, background .3s;
}
.shape:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.shape:active { transform: translateY(0) scale(.96); }
.shape svg { width: 48px; height: 33px; overflow: visible; transition: transform .55s var(--spring); }
.shape svg * { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--muted); stroke-width: 1.6; transition: fill .4s, stroke .4s; }
.shape svg .water { fill: var(--resin-a); stroke: none; opacity: .8; }
.shape svg .wd { fill: color-mix(in srgb, #b07a4a 45%, transparent); }
.shape:hover svg { transform: scale(1.12) rotate(-4deg); }
.shape.active {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface-solid) 90%, var(--accent)), color-mix(in srgb, var(--surface-solid) 90%, var(--accent))) padding-box,
    conic-gradient(from var(--ang), var(--accent), var(--accent-2), var(--accent-3), var(--gold), var(--accent)) border-box;
  animation: spin 4s linear infinite;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent) 95%, transparent);
}
.shape.active svg { transform: scale(1.14); }
.shape.active svg * { fill: color-mix(in srgb, var(--resin-a) 42%, transparent); stroke: var(--accent); }
.shape.active svg .wd { fill: color-mix(in srgb, #b07a4a 70%, transparent); }

/* ---------- Campos ---------- */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 12px; }
@media (min-width: 560px) { .fields { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } }
.fields.two { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 16px; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: .79rem; color: var(--text-2); font-weight: 600; }
.f.hidden { display: none; }
.f:not(.hidden) { animation: fadeUp .35s var(--ease); }
.inp {
  position: relative; display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 13px;
  background: var(--field); overflow: hidden; min-height: 46px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease), background .25s;
}
.inp:hover { border-color: var(--line-2); }
.inp:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 17%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--accent) 65%, transparent);
  transform: translateY(-1px);
}
.inp input, .inp select, .inp textarea {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: 1rem; font-weight: 700; padding: 10px 12px; outline: none;
  font-variant-numeric: tabular-nums;
}
.inp textarea { font-weight: 500; font-size: .92rem; resize: vertical; min-height: 70px; }
.inp input[type=text], .inp input[type=tel], .inp input[type=search] { font-weight: 600; }
.inp input::placeholder, .inp textarea::placeholder { color: var(--muted); font-weight: 500; opacity: .8; }
.inp select { flex: 0 0 auto; border-left: 1px solid var(--line); cursor: pointer; font-weight: 600; }
.inp select option { background: var(--surface-solid); color: var(--text); }
.inp em { font-style: normal; color: var(--muted); padding: 0 12px; font-size: .82rem; font-weight: 600; }
.inp em.pre { padding-right: 0; }
.inp > .i { margin-left: 12px; color: var(--muted); }
input[type=number]::-webkit-inner-spin-button { opacity: .35; }

.f.check { flex-direction: row; align-items: center; gap: 11px; font-size: .9rem; color: var(--text); font-weight: 600; align-self: end; padding-bottom: 11px; cursor: pointer; }
input.switch {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 46px; height: 27px; border-radius: 99px; position: relative;
  background: var(--line-2); transition: background .35s;
}
input.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .28); transition: transform .4s var(--spring), width .2s;
}
input.switch:active::after { width: 26px; }
input.switch:checked { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
input.switch:checked::after { transform: translateX(19px); }
input.switch:checked:active::after { transform: translateX(14px); }

.slider-row { margin-top: 18px; }
.slider-row label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .84rem; color: var(--text-2); font-weight: 600; }
.slider-row strong {
  font-size: 1.1rem; font-weight: 800; white-space: nowrap;
  background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ticks { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); padding: 0 4px; margin-top: -2px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 4px 0 0; }
input[type=range]::-webkit-slider-runnable-track {
  height: 9px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)) 0 / var(--p, 50%) 100% no-repeat, var(--line-2);
}
input[type=range]::-moz-range-track { height: 9px; border-radius: 99px; background: var(--line-2); }
input[type=range]::-moz-range-progress { height: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -7.5px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform .35s var(--spring);
}
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.3); }
input[type=range]:disabled { opacity: .5; cursor: not-allowed; }

.hint { font-size: .77rem; color: var(--muted); margin: 9px 0 0; }
.hint b { color: var(--text-2); }

/* ---------- Fotos ---------- */
.photos { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-list { display: contents; }
.photo {
  position: relative; width: 104px; height: 104px; border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--field);
  animation: popIn .55s var(--spring) both;
  transition: transform .4s var(--spring), box-shadow .3s;
}
.photo:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; transition: transform .6s var(--ease); }
.photo:hover img { transform: scale(1.1); }
.photo .del {
  position: absolute; top: 6px; right: 6px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;
  backdrop-filter: blur(4px); transition: transform .35s var(--spring), background .3s;
}
.photo .del .i { width: 14px; height: 14px; stroke-width: 2.4; pointer-events: none; }
.photo .del:hover { transform: scale(1.15) rotate(90deg); background: var(--danger); }
.photo .tag {
  position: absolute; left: 6px; bottom: 6px; font-size: .62rem; font-weight: 800; padding: 2px 8px; border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; pointer-events: none;
}
.photo.add {
  display: grid; place-items: center; text-align: center; cursor: pointer; border-style: dashed; border-color: var(--line-2);
  color: var(--muted); font-size: .76rem; font-weight: 700; animation: none;
}
.photo.add .add-in { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo.add .i { width: 26px; height: 26px; }
.photo.add:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--field)); }
.photo.add:hover .i { animation: wiggle .6s var(--ease); }
.photo.add.hidden { display: none; }
#photoBgRow { margin-top: 14px; padding: 0; font-size: .84rem; align-self: auto; }
#photoBgRow.hidden { display: none; }

/* ---------- Resultados ---------- */
.result-card { padding: 16px; }
@media (min-width: 980px) {
  .results { position: sticky; top: calc(var(--head-h) + 12px); }
  .result-card { max-height: calc(100vh - var(--head-h) - 26px); overflow-y: auto; overscroll-behavior: contain; }
}
.results { position: relative; isolation: isolate; }
.results::after { /* borde iridiscente que gira alrededor del panel de resultados */
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1.3px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 52%, var(--accent) 68%, var(--accent-3) 79%, var(--gold) 88%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 7s linear infinite;
}
.pv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pv-tools { display: flex; gap: 6px; margin-left: auto; }
.editing {
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  animation: popIn .4s var(--spring);
}

.seg { display: inline-flex; flex-wrap: wrap; background: var(--field); border: 1px solid var(--line); border-radius: 13px; padding: 3px; gap: 2px; }
.seg button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); font-size: .8rem; font-weight: 700;
  padding: 7px 12px; border-radius: 10px; cursor: pointer; transition: background .35s, color .35s, transform .35s var(--spring), box-shadow .35s;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 16px -10px var(--accent); }
.seg-sm button { padding: 6px 11px; font-size: .78rem; }
.seg-sm button .i { width: 15px; height: 15px; }

.preview {
  position: relative; border-radius: 18px; padding: 10px; margin-bottom: 12px; overflow: hidden;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--muted) 26%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--bg-2) 85%, transparent), var(--field));
  border: 1px solid var(--line);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow .4s, border-color .4s, transform .5s var(--ease);
  display: grid; place-items: center;
}
.preview.tilting { transition: box-shadow .4s, border-color .4s, transform .12s linear; }
.pv { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 20px rgba(0, 40, 60, .3)); }
.pv text { fill: var(--text); font-size: 12px; font-family: var(--font); font-weight: 700; pointer-events: none; }
.pv .dim { stroke: var(--muted); stroke-width: 1; fill: none; }
.pv .live { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 5 4; animation: ants .6s linear infinite; }
.pv .shine { pointer-events: none; }
.pv .pour { transform-box: fill-box; transform-origin: 50% 100%; animation: pour .95s var(--spring) both; }
.preview.drawing { border-color: var(--accent); animation: pulseRing 2s ease-in-out infinite; }
.preview.drawing .pv { touch-action: none; cursor: crosshair; }
.preview.is3d { padding: 0; }
.view3d { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.view3d:active { cursor: grabbing; }
.view3d canvas { display: block; width: 100% !important; height: 100% !important; animation: fadeIn .6s var(--ease); }
.v3-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); border-right-color: var(--accent-2); animation: spin2 .8s linear infinite; }
.pv-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: .7rem; font-weight: 700; color: var(--muted); padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); pointer-events: none; white-space: nowrap; animation: fadeIn .6s var(--ease) .4s both; }
.pv-close { display: none; }
.preview:fullscreen { aspect-ratio: auto; border-radius: 0; padding: 24px; background: radial-gradient(120% 100% at 50% 0%, var(--bg-2), var(--bg)); transform: none; }
.preview:fullscreen.is3d { padding: 0; }
.preview:fullscreen .pv-close {
  display: grid; place-items: center; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-solid); color: var(--text); z-index: 2;
}

.draw-bar { margin: 0 0 14px; }
.btn.block { width: 100%; }
.draw-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 13px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); animation: fadeUp .45s var(--ease); }
.draw-tools.hidden, .draw-row.hidden { display: none; }
.draw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.draw-row .lbl { font-size: .76rem; color: var(--muted); min-width: 110px; font-weight: 700; }
.draw-row input[type=range] { flex: 1; width: auto; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  position: relative; overflow: hidden; border-radius: 16px; padding: 12px 12px 12px 56px; min-height: 66px;
  background: var(--field); border: 1px solid var(--line);
  transition: transform .4s var(--spring), border-color .3s;
}
.stat:hover { transform: translateY(-3px); border-color: var(--line-2); }
.stat .ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 20%, transparent));
}
.stat span { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; }
.stat strong { font-size: 1.14rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.stat.flash { animation: flash .7s var(--ease); }

.kits { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); }
.bottles { display: flex; gap: 5px; align-items: flex-end; flex: none; min-height: 38px; }
.bottle {
  position: relative; display: block; width: 15px; height: 30px; border-radius: 4px 4px 5px 5px; overflow: hidden;
  border: 1.6px solid color-mix(in srgb, var(--accent) 55%, var(--line-2)); background: color-mix(in srgb, var(--surface-solid) 40%, transparent);
  animation: popIn .5s var(--spring) both; animation-delay: var(--d, 0ms);
}
.bottle::before { content: ""; position: absolute; top: -1px; left: 3px; right: 3px; height: 4px; border-radius: 0 0 2px 2px; background: color-mix(in srgb, var(--accent) 55%, var(--line-2)); z-index: 1; }
.bottle b { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, var(--resin-a), var(--resin-b)); transition: height .9s var(--ease); }
.bottle b::after { content: ""; position: absolute; left: -50%; top: -3px; width: 200%; height: 6px; background: radial-gradient(4px 3px at 25% 50%, rgba(255, 255, 255, .55), transparent), radial-gradient(4px 3px at 75% 50%, rgba(255, 255, 255, .45), transparent); animation: slosh 2.4s ease-in-out infinite; }
.bottles .more { font-size: .76rem; font-weight: 800; color: var(--accent); align-self: center; }
.kits-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
@media (max-width: 560px) {
  .kits { flex-direction: column; align-items: stretch; gap: 10px; }
  .bottles { justify-content: flex-start; }
}
.kits-text b { font-size: .86rem; }
.kits-text span { font-size: .72rem; color: var(--muted); }

.breakdown { margin-top: 14px; display: grid; gap: 1px; }
.brow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 10px; padding: 7px 2px; font-size: .88rem; }
.brow span { color: var(--text-2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.brow b { font-variant-numeric: tabular-nums; font-weight: 800; }
.brow .bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--line-2) 55%, transparent); overflow: hidden; }
.brow .bar u { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .9s var(--ease); }
.brow.sub { border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); margin: 4px 0; padding: 10px 2px; }
.brow.sub span, .brow.sub b { color: var(--text); font-weight: 800; }
.brow.hidden { display: none; }
.dotc { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.c1 { background: linear-gradient(90deg, var(--resin-a), var(--resin-b)); }
.c2 { background: linear-gradient(90deg, var(--accent-3), #f472b6); }
.c3 { background: linear-gradient(90deg, var(--gold), #fb923c); }
.c4 { background: linear-gradient(90deg, #94a3b8, #64748b); }
.c5 { background: linear-gradient(90deg, var(--accent), #34d399); }
.c6 { background: linear-gradient(90deg, #f87171, #fb7185); }

.total {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 14px; padding: 20px 14px 26px; border-radius: 20px; text-align: center; color: #fff;
  background: linear-gradient(115deg, #7c3aed, #b07ce8 38%, #ff7a6b 72%, #7c3aed);
  background-size: 300% 100%;
  animation: flow 10s linear infinite;
  box-shadow: 0 24px 44px -22px rgba(124, 58, 237, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.total::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-120%); animation: sweep 5s ease-in-out infinite;
}
.total::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background:
    radial-gradient(circle at 12% 70%, rgba(255,255,255,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 26%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.25) 0 4px, transparent 5px),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.25) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 40%, rgba(255,255,255,.2) 0 1.5px, transparent 2.5px);
  animation: bubbles 6s ease-in-out infinite alternate;
}
.waves { position: absolute; left: 0; bottom: 0; width: 200%; height: 34px; z-index: -1; }
.waves path { fill: rgba(255, 255, 255, .13); }
.waves .w1 { animation: wave 7s linear infinite; }
.waves .w2 { fill: rgba(255, 255, 255, .09); animation: wave 11s linear infinite reverse; }
.total-lbl { display: block; font-size: .74rem; opacity: .92; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.total strong { display: block; font-size: clamp(2.1rem, 6vw, 2.8rem); font-weight: 800; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; text-shadow: 0 4px 20px rgba(0, 0, 0, .25); line-height: 1.15; }
.total small { opacity: .92; font-weight: 600; font-size: .8rem; }
.total.bump strong { animation: bump .6s var(--spring); }

.client { display: grid; gap: 8px; margin-top: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 auto; border: 1.5px solid var(--line-2); background: var(--field); color: var(--text);
  padding: 11px 14px; border-radius: 13px; font-size: .86rem; cursor: pointer; font-weight: 800; text-decoration: none;
  transition: transform .35s var(--spring), box-shadow .3s, border-color .3s, background .3s, color .3s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.wide { flex-basis: 100%; padding: 13px 14px; font-size: .92rem; }
.btn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)) 0 0 / 300% 100%;
  animation: flow 8s linear infinite;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--accent-2) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn.whats { color: #fff; border-color: transparent; background: linear-gradient(135deg, #25d366, #128c7e); }
.btn.ghost { background: transparent; }
.btn.small { flex: 0 0 auto; padding: 8px 12px; font-size: .79rem; border-radius: 11px; }
.btn.small.block { flex: 1 1 100%; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); box-shadow: 0 12px 22px -14px var(--danger); }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .22; transform: scale(0); animation: ripple .7s var(--ease) forwards;
}

/* ---------- Historial ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile {
  padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow), var(--glass-hi);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.tile span { display: block; font-size: .74rem; color: var(--muted); font-weight: 700; }
.tile strong { display: block; margin-top: 4px; font-size: clamp(1.15rem, 3.4vw, 1.7rem); font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.tile.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent-2) 18%, var(--surface))); }
.tile.accent strong { color: var(--accent); }
.hist-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hist-tools .search { flex: 1 1 220px; }
.hist-tools .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.hist-tools .seg::-webkit-scrollbar { display: none; }
.hist-tools .seg button { white-space: nowrap; }
.hist { display: grid; gap: 10px; margin-top: 16px; }
.hist-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--field);
  animation: fadeUp .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform .4s var(--spring), border-color .3s, box-shadow .3s;
}
.hist.static .hist-item { animation: none; }
.hist-item:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow); }
.hist-item .thumb { width: 62px; height: 62px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-sm); }
.hist-item .thumb.ph { display: grid; place-items: center; color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-3) 18%, transparent)); }
.hist-item .thumb.ph .i { width: 26px; height: 26px; }
.hist-item h4 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-item .num { font-size: .7rem; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.hist-item p { margin: 2px 0 0; font-size: .77rem; color: var(--muted); }
.hist-item .price {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.4px;
  background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hist-item .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.hist-item .btns { display: flex; gap: 5px; }
.hist-item .btns .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
.hist-item .btns .icon-btn .i { width: 16px; height: 16px; pointer-events: none; }
.hist-item .btns .icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.hist-item.out { animation: out .38s var(--ease) forwards; }
.status {
  border: 0; cursor: pointer; font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; letter-spacing: .2px;
  transition: transform .3s var(--spring); display: inline-flex; align-items: center; gap: 5px;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status:hover { transform: scale(1.08); }
.status.pendiente { color: var(--gold); background: color-mix(in srgb, var(--gold) 15%, transparent); }
.status.aprobada { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.status.entregada { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 15%, transparent); }
.status.rechazada { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.status.pop { animation: pop .5s var(--spring); }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: .92rem; }
.empty .drop-ico { width: 70px; height: 70px; margin: 0 auto 12px; display: block; animation: float 4s ease-in-out infinite; }
@media (max-width: 560px) {
  .hist-item { grid-template-columns: auto minmax(0, 1fr); }
  .hist-item .right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Ajustes ---------- */
.settings-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .settings-grid { grid-template-columns: 1.2fr 1fr; } .settings-grid > .card:first-child { grid-row: span 2; } }
.ico-step { background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); }
.saved { display: inline-block; margin-left: 6px; color: var(--ok); font-weight: 800; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.saved.show { opacity: 1; transform: none; }
.theme-seg { width: 100%; }
.theme-seg button { flex: 1; justify-content: center; padding: 10px; }
.howto { padding-left: 18px; margin: 0; font-size: .9rem; color: var(--text-2); }
.howto li { margin-bottom: 9px; }
.howto li::marker { color: var(--accent); }

/* ---------- Barra de precio + navegación inferior (celular) ---------- */
.pricebar, .bottomnav { display: none; }
@media (max-width: 979px) {
  :root { --head-h: 60px; }
  .topbar .tabs { display: none; }
  .topbar { justify-content: space-between; }
  main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .bottomnav {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45;
    display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; border-radius: 22px;
    background: color-mix(in srgb, var(--surface-solid) 78%, transparent); border: 1px solid var(--line-2);
    backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--shadow-lg);
  }
  .bottomnav .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 16px;
    background: transparent; color: var(--muted); font-size: .7rem; font-weight: 800; cursor: pointer; overflow: hidden; isolation: isolate;
    transition: color .3s, background .4s var(--ease);
  }
  .bottomnav .tab .i { width: 22px; height: 22px; transition: transform .45s var(--spring); }
  .bottomnav .tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .bottomnav .tab.active .i { transform: translateY(-2px) scale(1.12); }
  .bottomnav .badge { position: absolute; top: 4px; left: calc(50% + 6px); font-size: .62rem; min-width: 18px; padding: 0 5px; }
  .pricebar {
    position: fixed; left: 18px; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 44;
    display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 18px; color: #fff;
    background: linear-gradient(115deg, #7c3aed, #b07ce8 50%, #ff7a6b); background-size: 200% 100%; animation: flow 10s linear infinite;
    box-shadow: 0 18px 36px -16px rgba(124, 58, 237, .85);
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform .55s var(--spring), opacity .3s;
  }
  .pricebar.show { transform: none; opacity: 1; pointer-events: auto; }
  .pb-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
  .pb-text span { font-size: .64rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: .85; font-weight: 700; }
  .pb-text strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
  .pb-text small { font-size: .7rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pricebar .btn { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); animation: none; box-shadow: none; }
  .toast { bottom: calc(160px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 560px) {
  main { padding-left: 14px; padding-right: 14px; }
  .brand-sub { display: none; }
  .hero { padding-top: 18px; }
  .tpl-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 2px 14px 8px; scrollbar-width: none; }
  .tpl-row::-webkit-scrollbar { display: none; }
  .tpl { scroll-snap-align: start; flex: none; }
  .card { padding: 16px; }
  .tiles { gap: 8px; }
  .tile { padding: 12px; }
  .stepper a { padding: 7px 9px; }
}

/* ---------- Avisos, gotas, visor ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 80; pointer-events: none;
  transform: translate(-50%, 140px) scale(.9); opacity: 0; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent); color: var(--text);
  border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 11px 18px 11px 12px; border-radius: 99px; font-size: .88rem; font-weight: 700; box-shadow: var(--shadow-lg);
  transition: transform .55s var(--spring), opacity .3s;
}
.toast::before {
  content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .78rem; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
}
.toast[data-type="warn"]::before { content: "!"; background: linear-gradient(135deg, var(--gold), #fb923c); }
.toast[data-type="err"]::before { content: "×"; background: linear-gradient(135deg, var(--danger), #fb7185); }
.toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.drop {
  position: fixed; z-index: 90; width: 11px; height: 11px; pointer-events: none;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  animation: splash 1s cubic-bezier(.15, .7, .3, 1) forwards;
}
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(2, 8, 12, .86); backdrop-filter: blur(10px); padding: 18px; cursor: zoom-out;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.lightbox.show { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 16px; transform: scale(.85) rotate(-2deg); transition: transform .5s var(--spring); box-shadow: var(--shadow-lg); }
.lightbox.show img { transform: none; }

/* ---------- Transición de tema (revelado circular) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Animaciones ---------- */
@keyframes spin { to { --ang: 360deg; } }
@keyframes spin2 { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -250% 0; } }
@keyframes flow { to { background-position: -300% 0; } }
@keyframes sweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes bubbles { from { transform: translateY(8px); } to { transform: translateY(-10px); } }
@keyframes wave { to { transform: translateX(-50%); } }
@keyframes slosh { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(25%); } }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 50% 45% 55% 50%; }
  50%  { transform: translate(6vmax, 4vmax) scale(1.12) rotate(40deg); border-radius: 40% 60% 45% 55%; }
  100% { transform: translate(-4vmax, 8vmax) scale(.92) rotate(80deg); border-radius: 55% 45% 60% 40%; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes popIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes ants { to { stroke-dashoffset: -18; } }
@keyframes pour { from { transform: scaleY(0); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 0 0 7px transparent; }
}
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
@keyframes out { to { opacity: 0; transform: translateX(50px) scale(.95); } }
@keyframes splash {
  0% { opacity: 1; transform: translate(0, 0) rotate(-45deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-45deg) scale(.3); }
}
@keyframes dropFall { from { transform: translateY(-60vh) scale(.7, 1.2); } to { transform: translateY(0) scale(1); } }
@keyframes dropSquash { 0% { transform: scale(1); } 40% { transform: scale(1.18, .82); } 100% { transform: scale(1); } }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(6, 4); } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html.splash .splash-screen { display: none; }
}

/* ---------- Documento de cotización (impresión / PDF) ---------- */
.print-sheet { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; color: #0b1a20; }
  .bg, .topbar, main, .toast, .lightbox, .pricebar, .bottomnav, .splash-screen { display: none !important; }
  .print-sheet { display: block; }
  .doc { font-family: var(--font); font-size: 11.5px; color: #0b1a20; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #7c3aed, #b07ce8, #ff7a6b) 1; }
  .doc-brand { display: flex; gap: 12px; align-items: center; }
  .doc-brand img { width: 52px; height: 52px; border-radius: 12px; }
  .doc-brand img.doc-logo { width: auto; height: 96px; border-radius: 0; display: block; margin-bottom: 4px; }
  .doc-brand h1 { margin: 0; font-family: var(--display); font-style: italic; font-size: 26px; color: #7c3aed; }
  .doc-brand p { margin: 2px 0 0; color: #4a6670; font-size: 11px; }
  .doc-meta { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #4a6670; }
  .doc-kind { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #8b3fd9; font-weight: 800; }
  .doc-meta b { font-size: 20px; color: #0b1a20; }
  .doc-client { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 16px; }
  .doc-client div { padding: 10px 12px; border-radius: 10px; background: #f1f7f8; }
  .doc-client small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: #5d7983; font-weight: 700; }
  .doc-client b { font-size: 12.5px; }
  .doc-visual { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: flex-start; }
  .doc-shape { width: 280px; border: 1px solid #dbe7ea; border-radius: 10px; padding: 6px; background: #fbfdfd; }
  .doc-shape .pv { filter: none; height: auto; }
  .doc-shape .pv text { fill: #0b1a20; }
  .doc-shape .pv .dim { stroke: #5d7983; }
  .doc-shape .pv .shine { display: none; }
  .doc-visual .doc-3d { width: 240px; height: auto; max-width: none; object-fit: contain; background: #f4f8f9; }
  .doc-visual img { height: 150px; max-width: 220px; object-fit: cover; border-radius: 10px; border: 1px solid #dbe7ea; }
  .doc-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
  .doc-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #3b1a5c; padding: 8px 10px; }
  .doc-table th:last-child, .doc-table td:last-child { text-align: right; }
  .doc-table td { padding: 9px 10px; border-bottom: 1px solid #e3edef; vertical-align: top; }
  .doc-table td small { color: #5d7983; }
  .doc-table tfoot td { border-bottom: 0; padding: 6px 10px; }
  .doc-table .doc-total td { font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #7c3aed, #b07ce8, #ff7a6b); padding: 12px 10px; }
  .doc-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
  .doc-terms div { padding: 10px 12px; border: 1px solid #e3edef; border-radius: 10px; }
  .doc-terms h3 { margin: 0 0 4px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8b3fd9; }
  .doc-terms p { margin: 0; line-height: 1.5; }
  .doc-cond { margin-top: 14px; font-size: 10px; color: #5d7983; line-height: 1.5; }
  .doc-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid #e3edef; text-align: center; color: #5d7983; font-size: 10.5px; }
  .doc-foot b { font-family: var(--display); font-style: italic; color: #7c3aed; font-size: 13px; }
}