/* Waku Waku Maker · estilos compartidos
   Dirección: profesional/casual. Superficies neutras, morado de marca como color principal,
   rosa solo como acento (botón principal, estados activos). Sin fondos pastel. */
:root{
  /* superficies */
  --paper:#F6F5F7; --card:#FFFFFF; --pink:#FFFFFF; --pink-soft:#F2EFF4; --line:#E6E2E9;
  /* tinta */
  --ink:#1F1724; --plum:#43165F; --plum-soft:#5E4A6B; --muted:#7A7180;
  /* acento */
  --magenta:#D2408C; --magenta-ink:#A92E6E; --accent-soft:#FBE9F2; --on-accent:#FFFFFF;
  /* estados */
  --ok:#1F8A5B; --warn:#C47A12; --late:#C9343F;
  --shadow:0 1px 2px rgba(31,23,36,.06),0 4px 14px rgba(31,23,36,.05);
  --radius:14px;
  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --logo-light:block; --logo-dark:none;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#131015; --card:#1C1820; --pink:#1C1820; --pink-soft:#26212B; --line:#2F2935;
  --ink:#F2EEF4; --plum:#D9C4EA; --plum-soft:#B9A9C4; --muted:#9A90A2;
  --magenta:#EE5BA6; --magenta-ink:#C2407F; --accent-soft:#3A1C2E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  --logo-light:none; --logo-dark:block; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#131015; --card:#1C1820; --pink:#1C1820; --pink-soft:#26212B; --line:#2F2935;
  --ink:#F2EEF4; --plum:#D9C4EA; --plum-soft:#B9A9C4; --muted:#9A90A2;
  --magenta:#EE5BA6; --magenta-ink:#C2407F; --accent-soft:#3A1C2E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  --logo-light:none; --logo-dark:block; color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* logo (versión clara/oscura) */
.logo-l{display:var(--logo-light)}.logo-d{display:var(--logo-dark)}

/* cabecera */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:15}
.top .wrap{display:flex;align-items:center;gap:18px;padding-block:10px;flex-wrap:wrap}
.top .logo{width:118px;height:auto}
.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tabs a,.tabs button{border:0;background:transparent;text-decoration:none;font-weight:600;padding:8px 14px;border-radius:10px;color:var(--plum-soft);cursor:pointer}
.tabs a:hover,.tabs button:hover{background:var(--pink-soft);color:var(--ink)}
.tabs [aria-current="page"]{background:var(--pink-soft);color:var(--ink)}
.tabs [aria-current="page"]::after{content:"";display:block;height:2px;background:var(--magenta);border-radius:2px;margin-top:3px}

.hero{padding-block:36px 8px}
.hero h1{font-size:clamp(28px,4.2vw,42px);font-weight:700;line-height:1.08;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero p{max-width:60ch;margin:10px 0 0;color:var(--muted);font-size:16px}
.demo{background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;text-align:center;padding:7px 16px}
.demo a{color:inherit}

/* botones */
.btn{border:1px solid transparent;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .1s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-p{background:var(--magenta);color:var(--on-accent)}
.btn-p:hover{background:var(--magenta-ink)}
.btn-d{background:var(--ink);color:var(--paper)}
.btn-g{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-g:hover{background:var(--pink-soft)}
.btn-s{padding:6px 12px;font-size:13px}
.btn-block{width:100%}

/* formularios */
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--plum-soft)}
label small{font-weight:500;color:var(--muted)}
.inp{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;width:100%;min-width:0;color:var(--ink)}
.inp:focus{border-color:var(--magenta);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.err{background:color-mix(in srgb,var(--late) 12%,var(--card));color:var(--late);border:1px solid color-mix(in srgb,var(--late) 30%,transparent);border-radius:10px;padding:9px 12px;font-weight:600;font-size:14px}

/* tarjetas */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0}
.panel h2{font-size:19px;margin-bottom:12px}
.pill{font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;white-space:nowrap;background:var(--pink-soft);color:var(--plum-soft);display:inline-block}
.st-recibido{background:var(--accent-soft);color:var(--magenta-ink)}
.st-aceptado{background:color-mix(in srgb,#6D3FA0 16%,var(--card));color:var(--plum)}
.st-en_proceso{background:color-mix(in srgb,var(--warn) 16%,var(--card));color:var(--warn)}
.st-listo{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.st-entregado{background:var(--pink-soft);color:var(--muted)}
.st-cancelado{background:color-mix(in srgb,var(--late) 14%,var(--card));color:var(--late)}
.money{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.empty{color:var(--muted);text-align:center;padding:26px 10px;font-weight:500}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:10px;font-weight:600;z-index:50;box-shadow:var(--shadow)}

/* línea de estatus */
.timeline{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:28px 1fr;gap:12px;position:relative;padding-bottom:18px}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--line)}
.timeline li.done:not(:last-child)::before{background:var(--magenta)}
.timeline .dot{width:28px;height:28px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--muted)}
.timeline li.done .dot{background:var(--magenta);border-color:var(--magenta);color:#fff}
.timeline li.now .dot{box-shadow:0 0 0 5px var(--accent-soft)}
.timeline b{display:block;font-weight:700;font-size:15px}
.timeline small{color:var(--muted)}

/* pagos */
.pay{margin-top:14px}
.pay-ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.pay-ok h2{color:var(--ok)}
.pay-note{color:var(--muted);margin:0 0 12px}
.pay-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.pay-sum div{background:var(--pink-soft);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.pay-sum span{font-size:12px;color:var(--muted);font-weight:600}
.pay-ops{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pay-op{flex-direction:row;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;font-size:15px;color:var(--ink)}
.pay-op span{flex:1}
.pay-op input{accent-color:var(--magenta);width:18px;height:18px;margin:0}
.pay-op:has(input:checked){border-color:var(--magenta);box-shadow:0 0 0 3px var(--accent-soft)}
.pp-btns{min-height:48px;margin-top:10px;color-scheme:light}
.pay-foot{font-size:12px;color:var(--muted);margin:10px 0 0}
.pay-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0}
.pay-or::before,.pay-or::after{content:"";flex:1;height:1px;background:var(--line)}
.tr-datos{margin-top:12px;border:2px solid var(--magenta);border-radius:12px;padding:14px 16px}
.tr-datos h3{font-size:16px;margin-bottom:8px}
.tr-row{display:grid;grid-template-columns:80px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.tr-row span{color:var(--muted);font-size:13px;font-weight:600}
.tr-row b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pg-transf{background:color-mix(in srgb,#2B6CB0 14%,var(--card));color:#2B6CB0}
.pg-pendiente{background:var(--pink-soft);color:var(--muted)}
.pg-anticipo{background:color-mix(in srgb,var(--warn) 16%,var(--card));color:var(--warn)}
.pg-pagado{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}

@media (max-width:640px){.fgrid{grid-template-columns:1fr}.top .logo{width:84px}
  .top .wrap{gap:8px;padding-block:8px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:0;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a,.tabs button{white-space:nowrap;padding:7px 11px;font-size:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}