/* ==========================================================================
   Calculadora de regalías · Livriz Sell
   Design System Livriz v1.1 — MD3 recoloreado · #0047bb · Poppins
   ========================================================================== */

:root{
  /* Marca */
  --brand-accent:#0047bb;
  --brand-accent-hover:#1638CC;
  --brand-accent-pressed:#102BA3;
  --brand-accent-soft:#E8EDFE;
  --brand-accent-on:#FFFFFF;

  /* Neutrales */
  --neutral-0:#FFFFFF;  --neutral-50:#FAFAFA; --neutral-100:#F4F4F4;
  --neutral-200:#E8E8E8;--neutral-300:#D6D6D6;--neutral-400:#B8B8B8;
  --neutral-500:#909090;--neutral-600:#6B6B6B;--neutral-700:#4A4A4A;
  --neutral-800:#2A2A2A;--neutral-900:#141414;--neutral-1000:#000000;

  /* Semánticos */
  --fg-1:#000000; --fg-2:#4A4A4A; --fg-3:#909090; --fg-disabled:#B8B8B8;
  --fg-accent:#0047bb; --fg-inverse:#FFFFFF;
  --bg-1:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F4F4F4; --bg-4:#E8E8E8;
  --border-1:#E8E8E8; --border-2:#D6D6D6; --border-strong:#000000;

  /* Estados */
  --status-danger:#C8200C;  --status-danger-soft:#FBE9E6;
  --status-warning:#B7791F; --status-warning-soft:#FBF1DE;
  --status-success:#1F8A5B; --status-success-soft:#E4F4EB;
  --status-info:#0047bb;    --status-info-soft:#E8EDFE;

  /* Tipografía */
  --font-sans:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Espaciado */
  --space-1:4px; --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px;--space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;

  /* Radios */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px;
  --radius-lg:16px; --radius-xl:28px; --radius-full:9999px;

  /* Elevación */
  --elev-1:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --elev-2:0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elev-3:0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);

  /* Motion */
  --ease:cubic-bezier(.2,0,0,1);
  --dur-s:150ms; --dur-m:250ms;

  --focus-ring:0 0 0 2px var(--bg-1), 0 0 0 4px var(--brand-accent);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) .dark-probe{}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-accent:#6E95F5; --brand-accent-hover:#86A8F7; --brand-accent-pressed:#5B84EE;
    --brand-accent-soft:rgba(110,149,245,.20); --brand-accent-on:#0A1330;
    --fg-1:#F4F4F4; --fg-2:#C4C4C4; --fg-3:#8A8A8A; --fg-disabled:#5A5A5A;
    --fg-accent:#6E95F5; --fg-inverse:#121212;
    --bg-1:#121212; --bg-2:#181818; --bg-3:#202020; --bg-4:#282828;
    --border-1:#2A2A2A; --border-2:#3A3A3A; --border-strong:#FFFFFF;
    --status-danger:#F08A7A; --status-danger-soft:rgba(200,32,12,.18);
    --status-warning:#E0AE5E;--status-warning-soft:rgba(183,121,31,.18);
    --status-success:#5FC694;--status-success-soft:rgba(31,138,91,.18);
    --status-info:#6E95F5;   --status-info-soft:rgba(110,149,245,.18);
    --elev-1:0 1px 2px rgba(0,0,0,.5); --elev-2:0 2px 6px rgba(0,0,0,.55);
    --elev-3:0 6px 16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --brand-accent:#6E95F5; --brand-accent-hover:#86A8F7; --brand-accent-pressed:#5B84EE;
  --brand-accent-soft:rgba(110,149,245,.20); --brand-accent-on:#0A1330;
  --fg-1:#F4F4F4; --fg-2:#C4C4C4; --fg-3:#8A8A8A; --fg-disabled:#5A5A5A;
  --fg-accent:#6E95F5; --fg-inverse:#121212;
  --bg-1:#121212; --bg-2:#181818; --bg-3:#202020; --bg-4:#282828;
  --border-1:#2A2A2A; --border-2:#3A3A3A; --border-strong:#FFFFFF;
  --status-danger:#F08A7A; --status-danger-soft:rgba(200,32,12,.18);
  --status-warning:#E0AE5E;--status-warning-soft:rgba(183,121,31,.18);
  --status-success:#5FC694;--status-success-soft:rgba(31,138,91,.18);
  --status-info:#6E95F5;   --status-info-soft:rgba(110,149,245,.18);
  --elev-1:0 1px 2px rgba(0,0,0,.5); --elev-2:0 2px 6px rgba(0,0,0,.55);
  --elev-3:0 6px 16px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-2); color:var(--fg-1);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,p,figure,fieldset,legend{margin:0}
fieldset{border:0;padding:0;min-width:0}
button,input,select{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}

.wrap{width:100%;max-width:720px;margin-inline:auto;padding-inline:var(--space-4)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-1);
  padding-top:env(safe-area-inset-top);
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;gap:var(--space-2);color:var(--brand-accent)}
.brand__mark{width:28px;height:28px;flex:none;color:var(--brand-accent)}
.brand__name{font-size:16px;font-weight:500;letter-spacing:.1px;color:var(--fg-1)}
.brand__name b{font-weight:700;color:var(--brand-accent)}
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--border-1);border-radius:var(--radius-full);
  background:var(--bg-1);cursor:pointer;transition:background var(--dur-s) var(--ease);
}
.icon-btn:hover{background:var(--bg-3)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Hero ---------- */
.hero{padding:var(--space-8) 0 var(--space-6)}
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;
  color:var(--brand-accent);margin-bottom:var(--space-2)
}
h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.2px}
.lede{margin-top:var(--space-3);color:var(--fg-2);font-size:15px;line-height:23px}
@media (min-width:600px){ h1{font-size:36px;line-height:44px} .lede{font-size:16px;line-height:24px} }

/* ---------- Tabs ---------- */
.tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);
  background:var(--bg-3);border-radius:var(--radius-full);
  padding:var(--space-1);margin-bottom:var(--space-5);
}
.tab{
  border:0;background:transparent;border-radius:var(--radius-full);
  padding:10px 12px;font-size:14px;font-weight:500;letter-spacing:.1px;
  color:var(--fg-2);cursor:pointer;transition:all var(--dur-s) var(--ease);
}
.tab.is-active{background:var(--bg-1);color:var(--brand-accent);box-shadow:var(--elev-1)}
.tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Card ---------- */
.card{
  background:var(--bg-1);border:1px solid var(--border-1);
  border-radius:var(--radius-md);padding:var(--space-5);
  margin-bottom:var(--space-4);box-shadow:var(--elev-1);
}
.card__title{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.15px;margin-bottom:var(--space-4)}
.card__text{font-size:14px;line-height:20px;color:var(--fg-2);margin-bottom:var(--space-4)}

/* ---------- Form ---------- */
.field{margin-bottom:var(--space-4)}
.field:last-child{margin-bottom:0}
.field label,.field legend{
  display:block;font-size:12px;font-weight:500;letter-spacing:.5px;
  color:var(--fg-2);margin-bottom:var(--space-2)
}
.opt{font-weight:400;color:var(--fg-3);letter-spacing:.2px}
.unit{color:var(--fg-3);font-weight:400}
input[type=text],input[type=number],select{
  width:100%;height:48px;padding:0 14px;
  background:var(--bg-1);color:var(--fg-1);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
select{
  appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
input:focus,select:focus{outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--brand-accent-soft)}
input::placeholder{color:var(--fg-disabled)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.input-money{position:relative}
.input-money__sym{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
.input-money input{padding-left:28px}
.hint{font-size:12px;line-height:16px;color:var(--fg-3);margin-top:var(--space-2)}
.hint.is-warn{color:var(--status-warning)}
.hint.is-err{color:var(--status-danger)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:8px 14px;border-radius:var(--radius-full);
  border:1px solid var(--border-2);font-size:13px;font-weight:500;
  color:var(--fg-2);cursor:pointer;transition:all var(--dur-s) var(--ease);
  user-select:none;
}
.chip input:checked + span{
  background:var(--brand-accent-soft);border-color:var(--brand-accent);color:var(--fg-accent)
}
.chip input:focus-visible + span{outline:none;box-shadow:var(--focus-ring)}

/* Accordion */
.acc{border-top:1px solid var(--border-1);margin-top:var(--space-5);padding-top:var(--space-4)}
.acc summary{
  list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--brand-accent);
  display:flex;align-items:center;gap:var(--space-2);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur-s) var(--ease);margin-left:auto;
}
.acc[open] summary::after{transform:rotate(-135deg)}
.acc__body{padding-top:var(--space-4)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;padding:0 22px;border-radius:var(--radius-full);
  font-size:14px;font-weight:500;letter-spacing:.1px;cursor:pointer;
  border:1px solid transparent;transition:all var(--dur-s) var(--ease);
}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn--primary{background:var(--brand-accent);color:var(--brand-accent-on)}
.btn--primary:hover{background:var(--brand-accent-hover)}
.btn--primary:active{background:var(--brand-accent-pressed)}
.btn--outline{background:transparent;color:var(--fg-accent);border-color:var(--border-2)}
.btn--outline:hover{background:var(--brand-accent-soft)}
.btn--text{background:transparent;color:var(--fg-accent);padding:0;min-height:36px}
.btn--text:hover{text-decoration:underline}
.row-btns{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.row-btns .btn{flex:1 1 auto}

/* ---------- Resultado ---------- */
.result{margin-bottom:var(--space-6)}
.verdict{
  display:flex;align-items:flex-start;gap:var(--space-3);
  border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4);
  font-size:14px;line-height:20px;
}
.verdict b{display:block;font-size:15px;margin-bottom:2px}
.verdict--ok{background:var(--status-success-soft);color:var(--status-success)}
.verdict--no{background:var(--status-danger-soft);color:var(--status-danger)}
.verdict--info{background:var(--status-info-soft);color:var(--status-info)}
.verdict__ico{flex:none;width:22px;height:22px;margin-top:1px}

.headline-card{
  background:var(--brand-accent);color:var(--brand-accent-on);
  border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-4);
  box-shadow:var(--elev-2);
}
.headline-card__label{font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.85}
.headline-card__val{font-size:36px;line-height:44px;font-weight:600;letter-spacing:-.5px;margin-top:var(--space-1)}
.headline-card__sub{font-size:13px;line-height:18px;opacity:.9;margin-top:var(--space-2)}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}
.kpi{
  background:var(--bg-1);border:1px solid var(--border-1);border-radius:var(--radius-md);
  padding:var(--space-4);
}
.kpi__label{font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-3)}
.kpi__val{font-size:22px;line-height:28px;font-weight:600;margin-top:var(--space-1)}
.kpi__sub{font-size:12px;line-height:16px;color:var(--fg-3);margin-top:var(--space-1)}
.kpi--wide{grid-column:1 / -1}

.dl{margin:0;font-size:14px}
.dl__row{
  display:flex;justify-content:space-between;gap:var(--space-4);
  padding:10px 0;border-bottom:1px solid var(--border-1);
}
.dl__row:last-child{border-bottom:0}
.dl__row dt{color:var(--fg-2)}
.dl__row dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500;text-align:right}
.dl__row--total{font-weight:600;border-top:1px solid var(--border-2);margin-top:var(--space-1)}
.dl__row--total dt{color:var(--fg-1);font-weight:600}

/* Barra de reparto */
.split{display:flex;height:12px;border-radius:var(--radius-full);overflow:hidden;margin:var(--space-3) 0 var(--space-3)}
.split span{display:block;height:100%}
.split-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:12px;color:var(--fg-2)}
.split-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---------- Lote ---------- */
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:150px;padding:var(--space-6);text-align:center;cursor:pointer;
  border:1.5px dashed var(--border-2);border-radius:var(--radius-md);
  background:var(--bg-2);color:var(--fg-3);
  transition:all var(--dur-s) var(--ease);
}
.drop:hover,.drop.is-over{border-color:var(--brand-accent);background:var(--brand-accent-soft);color:var(--fg-accent)}
.drop:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.drop__title{font-size:14px;font-weight:500;color:var(--fg-1)}
.drop__hint{font-size:12px}

.sum{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}
.sum > div{background:var(--bg-3);border-radius:var(--radius-sm);padding:var(--space-3)}
.sum dt{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-3)}
.sum dd{margin:2px 0 0;font-size:20px;font-weight:600}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-1);border-radius:var(--radius-md);background:var(--bg-1);margin-bottom:var(--space-6)}
.tbl{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border-1)}
.tbl th{background:var(--bg-3);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-2);font-weight:500;position:sticky;top:0}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500}
.pill--ok{background:var(--status-success-soft);color:var(--status-success)}
.pill--no{background:var(--status-danger-soft);color:var(--status-danger)}
.pill--warn{background:var(--status-warning-soft);color:var(--status-warning)}

/* ---------- Footer ---------- */
.foot{
  border-top:1px solid var(--border-1);padding:var(--space-6) 0 var(--space-12);
  font-size:13px;line-height:20px;color:var(--fg-2);
}
.foot p + p{margin-top:var(--space-3)}
.foot__mini{font-size:11px;color:var(--fg-3)}

@media (min-width:600px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi--wide{grid-column:auto}
  .row-btns .btn{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}