/* La Plataforma con la identidad de SKL — móvil primero, letra grande, botones grandes.
   Concepto: el mismo diseño de las apps SKL. El panel de cada negocio es «SKL Cliente» y se viste como SU negocio
   (la piel de su página demo: Filo brutalista, Doña Rosa editorial crema, Aurora lujo de noche, Arcoíris mosaico, Lavanda calma líquida).
   La vista de la agencia es «SKL Mando»: la torre de control de noche (negro violeta, violeta eléctrico con destello cian).
   La entrada es la noche SKL con sus órbitas. La piel la pone app.js en <html data-piel="…">. Letras propias en /fuentes (sin pedir nada a otros sitios). */
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fuentes/unbounded-700-latin.woff2) format("woff2") }
@font-face { font-family: "Oswald"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fuentes/oswald-700.woff2) format("woff2") }
@font-face { font-family: "Fraunces"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fuentes/fraunces-700.woff2) format("woff2") }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fuentes/cormorant-garamond-500.woff2) format("woff2") }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(/fuentes/jakarta-800.woff2) format("woff2") }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fuentes/dmserif-400.woff2) format("woff2") }

:root {
  /* base (SKL claro); cada piel la reemplaza abajo */
  --paper: #efebf7; --surface: #FFFFFF; --ink: #130d22; --ink-soft: #564d6e; --line: #dcd3ec;
  --paramo: #5a2fc2; --paramo-ink: #FFFFFF;
  --paramo-tint: color-mix(in srgb, var(--paramo) 13%, var(--surface));
  /* colores con significado: atención (maíz), peligro (achiote), información (añil), listo (ok) */
  --maiz: #C8900A; --maiz-tint: #FBF0D2; --anil: #2B4C8C; --anil-tint: #E2E8F4;
  --achiote: #B3322B; --achiote-tint: #F7E1DF; --wa: #1F7A4D; --ok: #1F8A52; --apagado: #8C9A92;
  --sombra: 0 18px 40px -24px rgba(19, 13, 34, .35);
  --display: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --caps: none; --ls: -.01em; --fw: 800;
  --r: 18px; --r-btn: 14px; --r-in: 12px; --r-av: 50%; --r-sw: 20px;
  --bw: 1px; --borde: var(--line); --borde-btn: var(--line); --sombra-tarjeta: none; --sombra-btn: none;
  --nav-bg: var(--ink); --nav-ink: var(--paper);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #07050d; --surface: #110b20; --ink: #efeaf8; --ink-soft: #a99fc2; --line: #2a2142;
    --paramo: #b996ff; --paramo-ink: #130d22;
    --maiz: #E3A91B; --maiz-tint: #3A2F12; --anil: #8FA9E0; --anil-tint: #1E2840; --achiote: #E4766E; --achiote-tint: #3A1D1B;
    --wa: #4FB386; --ok: #4ADE9B; --apagado: #5E6E64; --sombra: 0 18px 40px -24px rgba(0, 0, 0, .75);
    --nav-bg: var(--surface); --nav-ink: var(--ink);
    color-scheme: dark;
  }
}

/* ---------- pieles de SKL Cliente (mismos colores que la demo y la página de cada negocio) ---------- */
/* Filo · barbería: brutalista urbano */
:root[data-piel="barberia"] { --paper: #ece8e1; --surface: #f6f3ee; --ink: #121212; --ink-soft: #5b5650; --line: #c9c2b6; --paramo: #b02e1c; --paramo-ink: #FFFFFF;
  --display: "Oswald", "Arial Narrow", "Arial Black", Impact, sans-serif; --caps: uppercase; --ls: .01em; --fw: 700;
  --r: 0px; --r-btn: 0px; --r-in: 0px; --r-av: 0; --r-sw: 0; --bw: 2px; --borde: var(--ink); --borde-btn: var(--ink);
  --sombra-tarjeta: 5px 5px 0 var(--ink); --sombra-btn: 3px 3px 0 var(--ink) }
/* Doña Rosa · restaurante: editorial crema */
:root[data-piel="restaurante"] { --paper: #fbf4e9; --surface: #fffcf6; --ink: #2b1a12; --ink-soft: #6a5547; --line: #dccdb8; --paramo: #a3401c; --paramo-ink: #FFFFFF;
  --display: "Fraunces", Georgia, "Times New Roman", serif; --fw: 700; --ls: -.01em;
  --r: 16px; --r-btn: 999px; --r-in: 12px; --sombra-tarjeta: 0 1px 0 rgba(43,26,18,.04), 0 14px 30px -20px rgba(43,26,18,.45) }
/* Aurora · joyería: lujo, siempre de noche, filos dorados */
:root[data-piel="joyeria"] { --paper: #100f0d; --surface: #1a1815; --ink: #f4efe6; --ink-soft: #b9b0a0; --line: #3b362e; --paramo: #d9b66a; --paramo-ink: #1a1306;
  --maiz: #E3A91B; --maiz-tint: #3A2F12; --anil: #8FA9E0; --anil-tint: #1E2840; --achiote: #E4766E; --achiote-tint: #3A1D1B; --wa: #4FB386; --ok: #4ADE9B;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --caps: uppercase; --ls: .08em; --fw: 500;
  --r: 0px; --r-btn: 0px; --r-in: 0px; --r-av: 0; --r-sw: 0; --borde: #4a4232; --borde-btn: #6b5f47;
  --nav-bg: #0a0908; --nav-ink: #f4efe6; --sombra: 0 18px 40px -24px rgba(0,0,0,.8); color-scheme: dark }
/* Arcoíris · negocio general y papelería: mosaico lúdico */
:root[data-piel="papeleria"] { --paper: #f6f7f9; --surface: #FFFFFF; --ink: #14213d; --ink-soft: #505b70; --line: #d3d8e2; --paramo: #0e7490; --paramo-ink: #FFFFFF;
  --display: "Plus Jakarta Sans", "Trebuchet MS", "Segoe UI", Arial, sans-serif; --fw: 800; --ls: -.02em;
  --r: 20px; --r-btn: 14px; --r-in: 12px; --sombra-tarjeta: 0 14px 30px -22px rgba(20,33,61,.45) }
/* Lavanda · peluquería: calma líquida */
:root[data-piel="peluqueria"] { --paper: #fcf7f5; --surface: #FFFFFF; --ink: #3a2430; --ink-soft: #6a5560; --line: #e6d7d9; --paramo: #6d4c9f; --paramo-ink: #FFFFFF;
  --display: "DM Serif Display", Georgia, "Times New Roman", serif; --fw: 400; --ls: 0;
  --r: 28px; --r-btn: 999px; --r-in: 14px; --sombra-tarjeta: 0 20px 44px -26px rgba(109,76,159,.5) }
/* SKL Mando · la agencia: torre de control de noche */
:root[data-piel="mando"] { --paper: #efebf7; --surface: #FFFFFF; --ink: #130d22; --ink-soft: #564d6e; --line: #dcd3ec; --paramo: #5a2fc2; --paramo-ink: #FFFFFF;
  --display: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif; --fw: 700; --ls: -.01em;
  --r: 18px; --r-btn: 12px; --r-in: 12px; --sombra-tarjeta: 0 1px 2px rgba(19,13,34,.05), 0 16px 36px -18px rgba(52,24,120,.28);
  --nav-bg: #0d0819; --nav-ink: #f1ecfa }
@media (prefers-color-scheme: dark) {
  :root[data-piel="barberia"] { --paper: #121110; --surface: #1d1b19; --ink: #f1ede6; --ink-soft: #b4aca0; --line: #3a3735; --paramo: #ff7a66; --paramo-ink: #190b08; --sombra-tarjeta: 5px 5px 0 var(--paramo); --sombra-btn: 3px 3px 0 var(--paramo) }
  :root[data-piel="restaurante"] { --paper: #17110d; --surface: #231a14; --ink: #f6ebdc; --ink-soft: #c3b19e; --line: #46372b; --paramo: #f0a070; --paramo-ink: #25110a; --sombra-tarjeta: 0 18px 40px -24px rgba(0,0,0,.75) }
  :root[data-piel="papeleria"] { --paper: #0d1220; --surface: #161d31; --ink: #eaf0ff; --ink-soft: #aab5cf; --line: #2f3a57; --paramo: #5cc8e4; --paramo-ink: #06222b; --sombra-tarjeta: 0 18px 40px -24px rgba(0,0,0,.75) }
  :root[data-piel="peluqueria"] { --paper: #150f16; --surface: #211822; --ink: #f6ecf2; --ink-soft: #c4b0bd; --line: #443244; --paramo: #b79cf0; --paramo-ink: #1c0f33; --sombra-tarjeta: 0 18px 40px -24px rgba(0,0,0,.75) }
  :root[data-piel="mando"] { --paper: #07050d; --surface: #110b20; --ink: #efeaf8; --ink-soft: #a99fc2; --line: #2a2142; --paramo: #b996ff; --paramo-ink: #130d22; --sombra-tarjeta: 0 0 0 1px rgba(167,121,255,.05), 0 22px 48px -22px rgba(0,0,0,.85); --nav-bg: #0a0616 }
  :root[data-piel="barberia"], :root[data-piel="restaurante"], :root[data-piel="papeleria"], :root[data-piel="peluqueria"] { --nav-bg: var(--surface); --nav-ink: var(--ink) }
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; height: 100% }
body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--body); -webkit-tap-highlight-color: transparent }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
a { color: var(--paramo) }
h1, h2, h3 { font-family: var(--display); font-weight: var(--fw); text-transform: var(--caps); letter-spacing: var(--ls); line-height: 1.12; margin: 0; text-wrap: balance }
p { margin: 0 0 .6rem }
:focus-visible { outline: 3px solid var(--paramo); outline-offset: 2px }
.muted { color: var(--ink-soft) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
[hidden] { display: none !important }
.num { font-variant-numeric: tabular-nums }

/* ---------- fondo de cada piel (decoración, no estorba) ---------- */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1 }
:root[data-piel="barberia"] body::before { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 36px 36px; opacity: .5 }
:root[data-piel="restaurante"] body::before { background-image: radial-gradient(var(--line) 1.2px, transparent 1.6px); background-size: 22px 22px; opacity: .8 }
:root[data-piel="joyeria"] body::before { background: radial-gradient(520px circle at 88% 4%, rgba(217,182,106,.16), transparent 60%), radial-gradient(420px circle at 6% 96%, rgba(217,182,106,.10), transparent 60%) }
:root[data-piel="papeleria"] body::before { background: radial-gradient(340px circle at 100% 0, rgba(14,116,144,.09), transparent 70%), radial-gradient(260px circle at 0 100%, rgba(234,179,8,.12), transparent 70%) }
:root[data-piel="peluqueria"] body::before { background: radial-gradient(420px circle at 92% 6%, rgba(183,156,240,.30), transparent 65%), radial-gradient(360px circle at 4% 96%, rgba(77,106,91,.16), transparent 65%) }
:root[data-piel="mando"] body::before { background: radial-gradient(60vmax circle at 100% 0, rgba(167,121,255,.20), transparent 60%), radial-gradient(50vmax circle at 0 100%, rgba(69,211,220,.12), transparent 60%), radial-gradient(rgba(90,47,194,.12) 1px, transparent 1.4px) 0 0 / 28px 28px }

/* ---------- estructura ---------- */
.demo-flag { background: #130d22; color: #e9defd; font: 700 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 7px 16px; text-align: center }
.demo-flag b { color: #d6c2ff }
.soporte-flag { background: var(--anil); color: #fff; font-size: 15px; padding: 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap }
:root[data-piel] .soporte-flag { background: #1f3b8a }
.soporte-flag button { border: 1px solid rgba(255,255,255,.6); background: none; color: #fff; border-radius: 10px; padding: 6px 12px; min-height: 44px; font-weight: 700 }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column }
.cabeza { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: var(--bw) solid var(--borde) }
.cabeza::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none }
:root[data-piel="barberia"] .cabeza::after { bottom: -10px; height: 8px; background: repeating-linear-gradient(-45deg, var(--paramo) 0 9px, var(--surface) 9px 18px, #1f3b8a 18px 27px, var(--surface) 27px 36px); border-bottom: 2px solid var(--ink) }
:root[data-piel="restaurante"] .cabeza::after { bottom: -7px; height: 7px; background: repeating-linear-gradient(90deg, var(--paramo) 0 12px, #56642a 12px 24px, #e3a83c 24px 36px, var(--surface) 36px 42px) }
:root[data-piel="joyeria"] .cabeza::after { bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #e0c27f, transparent) }
:root[data-piel="papeleria"] .cabeza::after { bottom: -6px; height: 6px; background: linear-gradient(90deg, #0e7490 0 17%, #16a34a 17% 34%, #eab308 34% 51%, #f97316 51% 68%, #c2410c 68% 84%, #7c3aed 84%) }
:root[data-piel="peluqueria"] .cabeza { border-bottom: 0 }
:root[data-piel="peluqueria"] .cabeza::after { bottom: -12px; height: 12px; background: radial-gradient(circle at 12px 0, var(--surface) 11.5px, transparent 12.5px) 0 0 / 24px 12px repeat-x }
:root[data-piel="mando"] .cabeza { background: #0d0819; color: #f1ecfa; border-bottom: 1px solid #2c2347 }
:root[data-piel="mando"] .cabeza .sub { color: #aba1c4 }
:root[data-piel="mando"] .cabeza::after { bottom: -1px; height: 2px; background: linear-gradient(90deg, #7c4dff, #a779ff, #45d3dc); box-shadow: 0 0 12px rgba(167,121,255,.8) }
.cabeza-in { max-width: 820px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px }
.cab-t { flex: 1; min-width: 0 }
.cabeza h1 { font-size: 20px; overflow-wrap: anywhere }
:root[data-piel="barberia"] .cabeza h1 { font-size: 22px }
:root[data-piel="joyeria"] .cabeza h1, :root[data-piel="peluqueria"] .cabeza h1 { font-size: 24px }
:root[data-piel="mando"] .cabeza h1 { font-size: 17px; letter-spacing: .04em }
.cabeza .sub { font-size: 14px; color: var(--ink-soft) }
.av { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-av); background: var(--paramo); color: var(--paramo-ink); font: var(--fw) 17px/1 var(--display); text-transform: uppercase; letter-spacing: .02em }
.av.skl { background: none; width: 46px; height: 46px }
.av.skl svg { width: 46px; height: 46px }
.vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap }
.vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none }
.vivo.on { color: var(--ok) }
:root[data-piel="mando"] .vivo.on { color: #4ade9b }
:root[data-piel="mando"] .vivo { color: #aba1c4 }
.vivo.on::before { box-shadow: 0 0 0 0 currentColor; animation: anillo 2s ease-out infinite }
@keyframes anillo { from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent) } to { box-shadow: 0 0 0 9px transparent } }

main.pantalla { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 22px 16px 112px; position: relative }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 2px; background: var(--nav-bg); color: var(--nav-ink); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) }
.nav-marca { display: none }
.nav button { border: 0; background: none; color: inherit; padding: 6px 2px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; position: relative; border-radius: var(--r-btn); transition: background-color .2s }
:root[data-piel="restaurante"] .nav button, :root[data-piel="peluqueria"] .nav button { border-radius: 16px }
.nav button svg { width: 23px; height: 23px }
.nav button[aria-current="page"] { background: var(--paramo); color: var(--paramo-ink) }
/* SKL Mando: la barra de abajo y el riel lateral, como en la app */
:root[data-piel="mando"] .nav { color: #aba1c4 }
:root[data-piel="mando"] .nav::before { content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #a779ff, #45d3dc, transparent) }
:root[data-piel="mando"] .nav button { border-radius: 14px }
:root[data-piel="mando"] .nav button:hover { color: #f1ecfa; background: #160f2b }
:root[data-piel="mando"] .nav button[aria-current="page"] { background: rgba(167,121,255,.16); color: #ffffff }
:root[data-piel="mando"] .nav button[aria-current="page"] svg { color: #a779ff; filter: drop-shadow(0 0 6px rgba(167,121,255,.7)) }
:root[data-piel="mando"] .nav .punto { background: #a779ff; color: #130d22 }
.nav-marca.mando svg { width: 52px; height: 39px; overflow: visible }
.nav-marca .sep { width: 1px; height: 34px; flex: none; background: linear-gradient(transparent, rgba(255,255,255,.35), transparent) }
.nav-marca .trazo path { stroke-dasharray: 400; animation: trazo 1.1s .2s cubic-bezier(.6,.1,.2,1) both }
.nav-marca .trazo path + path { animation-delay: .55s }
.nav-marca .kk { transform-box: fill-box; transform-origin: center; animation: kk .5s .45s cubic-bezier(.2,.8,.2,1) both }
.nav-marca .raya { transform-box: fill-box; transform-origin: left; animation: raya .8s .95s cubic-bezier(.2,.8,.2,1) both }
@media (min-width: 900px) {
  :root[data-piel="mando"] .nav::before { display: none }
  :root[data-piel="mando"] .nav button { color: #aba1c4; font-weight: 650 }
  :root[data-piel="mando"] .nav button[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(167,121,255,.26), rgba(167,121,255,.05)); box-shadow: inset 0 0 0 1px rgba(167,121,255,.28) }
  :root[data-piel="mando"] .nav button[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #a779ff; box-shadow: 0 0 14px #a779ff }
  :root[data-piel="mando"] .nav .punto { background: rgba(167,121,255,.2); color: #e2d4ff }
  .nav-marca.mando { padding-bottom: 24px }
}
.punto { position: absolute; top: 3px; left: calc(50% + 6px); background: var(--achiote); color: #fff; font: 800 12px/20px var(--mono); min-width: 20px; height: 20px; border-radius: 10px; text-align: center; padding: 0 5px }
.nav button[aria-current="page"] .punto { background: var(--paramo-ink); color: var(--paramo) }
@media (prefers-color-scheme: dark) { .nav { border-top: 1px solid var(--line) } :root[data-piel="mando"] .nav, :root[data-piel="joyeria"] .nav { border-top-color: #2c2347 } }
@media (min-width: 900px) {
  .app.con-nav { padding-left: 232px }
  .nav { top: 0; right: auto; width: 232px; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-top: 0 !important; border-right: 1px solid var(--line) }
  :root[data-piel="mando"] .nav { border-right-color: #2c2347 }
  .nav-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; color: inherit }
  .nav-marca svg { width: 40px; height: 40px; flex: none }
  .nav-marca b { display: block; font: 700 13px/1.15 "Unbounded", var(--display); letter-spacing: .14em; text-transform: uppercase }
  .nav-marca span { font-size: 12px; opacity: .75 }
  .nav button { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; font-size: 16px; min-height: 50px }
  .punto { position: static; margin-left: auto }
  main.pantalla { padding: 34px 32px 48px }
}

/* ---------- componentes ---------- */
.titulo { font-family: var(--display); font-weight: var(--fw); text-transform: var(--caps); letter-spacing: var(--ls); font-size: 19px; margin: 26px 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
:root[data-piel="mando"] .titulo { font-size: 16px; letter-spacing: .02em }
.titulo small { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--ink-soft); text-transform: none; letter-spacing: 0 }
.tarjeta { background: var(--surface); border: var(--bw) solid var(--borde); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra-tarjeta); position: relative }
.pila { display: grid; gap: 10px }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: var(--bw) solid var(--borde-btn); background: var(--surface); border-radius: var(--r-btn); padding: 10px 18px; font-weight: 700; min-height: 48px; text-decoration: none; color: var(--ink); line-height: 1.2; transition: transform .15s, box-shadow .15s }
.btn:active { transform: translateY(1px) }
.btn svg { width: 20px; height: 20px; flex: none }
.btn.primario { background: var(--paramo); color: var(--paramo-ink); border-color: var(--paramo); box-shadow: var(--sombra-btn) }
:root[data-piel="mando"] .btn.primario { background: linear-gradient(135deg, #6a3ce0, #5a2fc2); border-color: transparent }
@media (prefers-color-scheme: dark) { :root[data-piel="mando"] .btn.primario { background: linear-gradient(135deg, #bb98ff, #9466ff) } }
:root[data-piel="barberia"] .btn.primario:hover { transform: translate(-1px, -1px) }
.btn.peligro { background: var(--achiote); color: #fff; border-color: var(--achiote) }
@media (prefers-color-scheme: dark) { .btn.peligro { color: #1a0605 } }
:root[data-piel="joyeria"] .btn.peligro { color: #1a0605 }
.btn.suave { background: var(--paramo-tint); border-color: transparent; color: var(--ink) }
.btn.bloque { width: 100% }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn.chico { min-height: 44px; padding: 7px 14px; font-size: 15px }
.fila-btns { display: flex; gap: 8px; flex-wrap: wrap }
.fila-btns .btn { flex: 1 1 auto }

.interruptor { appearance: none; -webkit-appearance: none; width: 64px; height: 40px; border-radius: var(--r-sw); background: var(--apagado); position: relative; cursor: pointer; flex: none; border: 0; margin: 0; transition: background .2s }
.interruptor::after { content: ""; position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: max(0px, calc(var(--r-sw) - 4px)); background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3) }
.interruptor:checked { background: var(--paramo) }
.interruptor:checked::after { transform: translateX(24px) }
.interruptor.chico { width: 56px; height: 34px }
.interruptor.chico::after { width: 26px; height: 26px }
.interruptor.chico:checked::after { transform: translateX(22px) }
.interruptor:disabled { opacity: .45; cursor: not-allowed }
.interruptor.rojo:checked { background: var(--achiote) }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 4px 11px; border-radius: min(var(--r-btn), 999px); background: var(--line); white-space: nowrap }
.chip.ok { background: var(--paramo-tint); color: var(--ink) }
.chip.alerta { background: var(--achiote-tint); color: var(--ink) }
.chip.aviso { background: var(--maiz-tint); color: var(--ink) }
.chip.azul { background: var(--anil-tint); color: var(--ink) }

.filtros { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 6px; scrollbar-width: none }
.filtros::-webkit-scrollbar { display: none }
.filtros button { border: var(--bw) solid var(--borde-btn); background: var(--surface); border-radius: min(var(--r-btn), 999px); padding: 8px 16px; font-size: 15px; font-weight: 700; white-space: nowrap; min-height: 44px }
:root[data-piel="restaurante"] .filtros button, :root[data-piel="peluqueria"] .filtros button, :root[data-piel="papeleria"] .filtros button, :root[data-piel="mando"] .filtros button { border-radius: 999px }
.filtros button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }

.vacio { text-align: center; padding: 34px 18px; color: var(--ink-soft); border: 2px dashed var(--line); border-radius: var(--r) }
.vacio b { display: block; color: var(--ink); font-family: var(--display); font-weight: var(--fw); text-transform: var(--caps); letter-spacing: var(--ls); font-size: 18px; margin-bottom: 6px }

/* ---------- Hoy: «Tu asistente está atendiendo» con su orbe (la firma de SKL Cliente) ---------- */
.asistente-fila { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--surface); border: var(--bw) solid var(--borde); box-shadow: var(--sombra-tarjeta) }
.asistente-fila > div { flex: 1; min-width: 0 }
.asistente-fila b { font-family: var(--display); font-weight: var(--fw); text-transform: var(--caps); letter-spacing: var(--ls); font-size: 19px; line-height: 1.15; display: block; margin-bottom: 2px }
.asistente-fila > div > span { font-size: 15px; color: var(--ink-soft) }
:root[data-piel="joyeria"] .asistente-fila b { letter-spacing: .03em; font-size: 21px }
.orbe { position: relative; flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--paramo); color: var(--paramo-ink) }
.orbe svg { width: 24px; height: 24px }
.orbe::before, .orbe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--paramo); animation: onda 2.6s ease-out infinite }
.orbe::after { animation-delay: 1.3s }
@keyframes onda { from { transform: scale(1); opacity: .75 } to { transform: scale(1.65); opacity: 0 } }
.asistente-fila.pausa, .vivo-f.pausa { background: var(--achiote-tint) }
.asistente-fila.pausa .orbe, .vivo-f.pausa .orbe { background: var(--apagado); color: #fff }
.asistente-fila.pausa .orbe::before, .asistente-fila.pausa .orbe::after, .vivo-f.pausa .orbe::before, .vivo-f.pausa .orbe::after { display: none }

/* ---------- SKL Cliente · Hoy: el saludo, «Ahora mismo», las cifras numeradas y lo que te toca (como la app SKL Cliente) ---------- */
.saludo { margin: 0 0 20px }
.saludo p { margin: 0; font-size: 16px }
.saludo h1 { font-size: clamp(32px, 9vw, 54px); line-height: 1.02; margin: 2px 0 8px; overflow-wrap: anywhere }
:root[data-piel="barberia"] .saludo h1 { font-size: clamp(40px, 12vw, 68px); line-height: .96 }
:root[data-piel="joyeria"] .saludo h1 { font-size: clamp(34px, 9.5vw, 58px) }
.ficha { background: var(--surface); border: var(--bw) solid var(--borde); border-radius: var(--r); padding: 16px; margin: 0 0 16px; position: relative; box-shadow: var(--sombra-tarjeta) }
.rot { display: inline-block; font: 800 12px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px }
:root[data-piel="barberia"] main.pantalla { counter-reset: f }
:root[data-piel="barberia"] .ficha > .rot::before { counter-increment: f; content: "[" counter(f, decimal-leading-zero) "] "; color: var(--paramo) }
/* orbe | título | interruptor; la explicación debajo del título (en el celular, a lo ancho) */
.vivo-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "o t s" "o d d"; gap: 4px 16px; align-items: center }
.vivo-cab .orbe { grid-area: o } .vivo-t { grid-area: t; min-width: 0 } .vivo-cab .interruptor { grid-area: s } .vivo-det { grid-area: d }
@media (max-width: 520px) { .vivo-cab { grid-template-areas: "o t s" "d d d"; gap: 10px 12px } }
.vivo-t .rot { margin-bottom: 2px }
.vivo-t h2 { font-size: clamp(19px, 5.4vw, 25px); margin: 0 }
.vivo-det { margin: 0; font-size: 15px }
.vivo-det .estado-hoy { margin: 0; font-size: inherit }
.vivo-f .feed { margin-top: 14px; display: grid; gap: 8px }
.vivo-f .feed li { padding: 10px 12px; border: 1px solid var(--line); border-radius: min(var(--r), 14px); background: var(--paper); align-items: baseline; flex-wrap: wrap }
.vivo-f .feed li > div { flex: 1 1 160px }
.feed .tipo { flex: none; font: 800 11px/1.75 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; color: var(--paramo) }
:root[data-piel="barberia"] .feed .tipo, :root[data-piel="joyeria"] .feed .tipo { border-radius: 0 }
.pie-f { font-size: 14px; margin: 10px 0 0 }
.vivo-f .vacio { margin-top: 14px }
.tres { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px }
.tres .ficha { margin: 0; padding: 14px; min-width: 0 }
.ficha .grande { display: block; font: var(--fw) clamp(30px, 8vw, 42px)/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-bottom: 6px }
.tres .ficha.alerta .grande { color: var(--achiote) }
@media (max-width: 440px) { .tres { grid-template-columns: minmax(0, 1fr) } .tres .ficha { display: flex; align-items: baseline; gap: 12px } .tres .grande { margin: 0 } .tres .rot { margin: 0 } }
.tocas { display: grid; gap: 10px }
.toca { position: relative; border: var(--bw) solid var(--line); border-radius: min(var(--r), 14px); background: var(--paper); padding: 14px }
.toca.urge { border-color: var(--achiote); background: var(--achiote-tint) }
.toca b { display: block; font-size: 17px; margin: 0 40px 4px 0 }
.toca p { font-size: 15px; margin: 0 0 12px }
.toca .btn { width: 100% }
.toca .cerrar { position: absolute; top: 4px; right: 4px; border: 0; background: none; font-size: 22px; width: 44px; height: 44px; color: var(--ink-soft) }
.ficha.valor { margin: 0 0 16px }
.ficha.valor .grande { font-size: clamp(38px, 11vw, 56px); letter-spacing: -.02em; margin: 2px 0 6px }

/* ---------- SKL Mando en la Plataforma: la torre de control con tus clientes reales ---------- */
:root[data-piel="mando"] main.pantalla { max-width: 1160px }
.pulso { position: sticky; top: 0; z-index: 25; background: #0d0819; color: #b996ff; font: 700 11.5px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 9px; display: flex; gap: 4px 18px; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid #2c2347 }
.pulso b { color: #f1ecfa; font-weight: 700 }
.pulso .barra { position: absolute; left: 0; bottom: -1px; height: 2px; width: 4%; background: linear-gradient(90deg, #7c4dff, #a779ff, #45d3dc); box-shadow: 0 0 12px rgba(167,121,255,.9); transition: width .8s cubic-bezier(.2,.7,.2,1) }
.cab-mando { margin: 2px 0 20px }
.rotulo { display: block; font: 800 11.5px/1.25 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paramo); margin: 0 0 8px }
.tit { font: 700 clamp(26px, 6.8vw, 46px)/1.06 "Unbounded", var(--display); letter-spacing: -.025em; margin: 0; text-wrap: balance; text-transform: none }
.cab-mando .sub { color: var(--ink-soft); max-width: 62ch; margin: 10px 0 0; font-size: 17px }
.panel { background: var(--surface); border: 1px solid color-mix(in srgb, var(--paramo) 20%, var(--line)); border-radius: 18px; padding: 18px; min-width: 0; position: relative; box-shadow: var(--sombra-tarjeta); isolation: isolate; --halo: rgba(167,121,255,.14) }
.panel.neg { background: #0d0819; color: #f1ecfa; border-color: #2c2347; box-shadow: inset 0 0 0 1px rgba(167,121,255,.08), 0 26px 60px -32px rgba(91,47,194,.6) }
.panel.neg .rotulo { color: #b996ff }
.panel.neg .muted { color: #aba1c4 }
.panel.am { background: #a779ff linear-gradient(135deg, #c4a6ff 0%, #a779ff 50%, #9b6cff 100%); color: #130d22; border-color: transparent; --halo: rgba(255,255,255,.35) }
.panel.am .rotulo, .panel.am .muted { color: #1e0f45 }
.panel.riesgo .gran { color: var(--achiote) }
@media (hover: hover) and (pointer: fine) {
  .panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), var(--halo), transparent 62%); opacity: 0; transition: opacity .35s }
  .panel:hover::before { opacity: 1 }
}
.rej { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin: 18px 0 }
.rej.d4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
@media (min-width: 900px) { .rej.d21 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start } .rej.d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px } }
.gran { display: block; font: 800 clamp(26px, 7vw, 40px)/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.panel .pendiente { display: block; margin-top: 2px }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.fila.sp { justify-content: space-between; gap: 10px }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .04em }
.planes-l { margin: -6px 0 18px; font-size: 12.5px }
.btn.pri { background: #a779ff linear-gradient(135deg, #bb98ff, #9466ff); color: #130d22; border-color: transparent; box-shadow: 0 10px 26px -12px rgba(140,90,255,.85) }
.panel.neg .btn:not(.pri) { background: #170f2c; color: #f1ecfa; border-color: #3a2f5c }
.panel.am .btn { background: rgba(255,255,255,.62); color: #130d22; border-color: rgba(19,13,34,.22) }
.panel.am .btn.pri, .panel.am .btn.primario { background: #130d22; color: #f1ecfa; border-color: #130d22; box-shadow: 0 10px 24px -14px rgba(19,13,34,.9) }
.primero { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: p }
.primero li { counter-increment: p; display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paramo) 5%, var(--surface)) }
.primero li::before { content: counter(p); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--mono); background: var(--ink); color: var(--surface) }
.primero li:first-child::before { background: var(--paramo); color: var(--paramo-ink) }
.primero li > div { min-width: 0 }
.primero b { display: block; font-size: 17px }
.primero p { margin: 2px 0 8px; font-size: 15px; overflow-wrap: anywhere }
.vacio-m { margin: 8px 0 0 }
.alta { background: rgba(255,255,255,.55); border: 1px solid rgba(19,13,34,.14); border-radius: 14px; padding: 12px 14px; margin-top: 10px; color: #130d22 }
.alta .muted { color: #3b2d63 }
.sello { display: inline-block; font: 800 11px/1.75 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 8px; border-radius: 999px; background: #130d22; color: #f1ecfa }
.sello.recibido { background: #0d6b40; color: #fff }
.segs { display: flex; gap: 4px; margin-top: 12px }
.segs i { flex: 1; height: 10px; border-radius: 4px; background: rgba(19,13,34,.16) }
.segs i.curso { background: #5a2fc2 }
.segs i.listo { background: #0d6b40 }
/* la constelación de tus clientes (la firma de SKL Mando en la Plataforma) */
.conste { display: block; width: 100%; height: auto; margin: 6px 0 4px }
.conste .est { fill: #efeaf8; animation: titila 3.4s ease-in-out infinite alternate; animation-delay: var(--d) }
@keyframes titila { from { opacity: .12 } to { opacity: .8 } }
.conste .orb { fill: none; stroke: rgba(167,121,255,.3); stroke-width: 1.6; stroke-dasharray: 2 10; stroke-linecap: round }
.conste .disco { fill: #0d0819; stroke: #a779ff; stroke-width: 2.5 }
.conste .onda { fill: none; stroke: #45d3dc; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ondaC 2.6s ease-out infinite }
@keyframes ondaC { from { transform: scale(1); opacity: .8 } to { transform: scale(2.4); opacity: 0 } }
.conste .nodo.verde { color: #4ade9b } .conste .nodo.amarillo { color: #f5c451 } .conste .nodo.rojo { color: #ff715c } .conste .nodo.nuevo { color: #45d3dc }
.conste .nodo .pto { fill: currentColor; stroke: #0d0819; stroke-width: 3 }
.conste .nodo .aura { fill: currentColor; opacity: .16 }
.conste .nodo.rojo .aura, .conste .nodo.nuevo .aura { animation: late 1.8s ease-in-out infinite }
@keyframes late { 50% { opacity: .42 } }
.conste .etq { font: 700 17px var(--mono); fill: #cfc6e6; letter-spacing: .02em }
.conste a.nodo { cursor: pointer; outline: none }
.conste a.nodo:hover .etq, .conste a.nodo:focus-visible .etq { fill: #ffffff }
.conste a.nodo:hover .aura, .conste a.nodo:focus-visible .aura { opacity: .5 }
.conste .estela { stroke: #45d3dc; stroke-width: 2; stroke-dasharray: 3 8; opacity: .7; fill: none }
@media (max-width: 699px) { .conste .etq { display: none } }
.conste-pie { display: flex; gap: 6px 16px; flex-wrap: wrap; font: 800 11.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #aba1c4 }
.conste-pie i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px }
.c-verde { background: #4ade9b } .c-amarillo { background: #f5c451 } .c-rojo { background: #ff715c } .c-nuevo { background: #45d3dc }
/* el tablero de tus clientes (como el tablero de salidas de SKL Mando) */
.tablero { background: #0d0819; color: #f1ecfa; border: 1px solid #2c2347; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 64px -38px rgba(91,47,194,.7); margin: 18px 0 }
.tablero .cab { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; font: 800 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #aba1c4; border-bottom: 1px solid #2c2347; background: #08050f }
.tablero .filas { list-style: none; margin: 0; padding: 0 }
.tablero .fila-l { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid #1b1432; background: none; color: inherit; text-align: left; transition: background-color .25s }
.tablero li:last-child .fila-l { border-bottom: 0 }
.tablero .fila-l:hover { background: #110a22 }
.tablero .n { font: 800 16px var(--mono); color: #b996ff }
.tablero .q-t { min-width: 0 }
.tablero .q-t b { display: block; font-size: 17px }
.tablero .q { display: block; font-size: 14px; color: #aba1c4 }
.tablero .q-a { display: block; margin-top: 6px; font-size: 14px; color: #f5c451 }
.tablero .q-a.riesgo { color: #ff9a88 }
.tablero .estado { position: relative; min-width: 104px; min-height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #2f2550; background: linear-gradient(#1a1234 50%, #130c28 50%); font: 800 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.tablero .estado::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.45) }
.tablero .estado.verde { color: #4ade9b; border-color: #1f6b4a }
.tablero .estado.amarillo { color: #f5c451; border-color: #6b5520 }
.tablero .estado.rojo { color: #ff8a75; border-color: #6b2e27; box-shadow: 0 0 18px -6px rgba(255,113,92,.6) }
.entra .tablero .estado { animation: voltea .5s cubic-bezier(.3,1.4,.5,1) both }
@keyframes voltea { 0% { transform: perspective(300px) rotateX(90deg) } 100% { transform: none } }
@media (max-width: 480px) { .tablero .cab { display: none } .tablero .fila-l { grid-template-columns: 2rem minmax(0, 1fr) } .tablero .estado { grid-column: 2; justify-self: start; min-width: 120px } }
.vacio-t { padding: 18px; color: #aba1c4; margin: 0 }
/* la entrada escalonada al cambiar de pantalla (no en cada refresco) */
.entra > * { animation: ent .55s cubic-bezier(.2,.75,.2,1) both }
.entra > :nth-child(2) { animation-delay: .05s } .entra > :nth-child(3) { animation-delay: .1s } .entra > :nth-child(4) { animation-delay: .15s } .entra > :nth-child(5) { animation-delay: .2s } .entra > :nth-child(n+6) { animation-delay: .25s }
@keyframes ent { from { transform: translateY(14px) } }
.valor { margin: 24px 0 4px }
.valor .etiqueta { font: 800 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft) }
.valor .grande { font-family: var(--display); font-weight: var(--fw); font-size: clamp(38px, 11vw, 54px); letter-spacing: -.02em; line-height: 1.02; font-variant-numeric: tabular-nums; margin: 6px 0 }
:root[data-piel="mando"] .valor .grande { font-size: clamp(30px, 8.5vw, 44px) }
.valor .comparacion { display: inline-flex; gap: 8px; align-items: center; background: var(--maiz-tint); border-radius: var(--r-in); padding: 8px 12px; font-size: 15px; margin: 6px 0 10px }
.banda { display: flex; height: 16px; border-radius: min(var(--r-in), 8px); overflow: hidden; gap: 3px; background: var(--line); margin-top: 10px }
.banda span { display: block; height: 100%; min-width: 4px }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14px; color: var(--ink-soft) }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px }
.cifras div { border: var(--bw) solid var(--borde); border-radius: var(--r); padding: 12px; background: var(--surface); min-width: 0; overflow: hidden; box-shadow: var(--sombra-tarjeta) }
:root[data-piel="barberia"] .cifras div { box-shadow: 3px 3px 0 var(--ink) }
@media (prefers-color-scheme: dark) { :root[data-piel="barberia"] .cifras div { box-shadow: 3px 3px 0 var(--paramo) } }
.cifras strong { display: block; font-family: var(--display); font-weight: var(--fw); font-size: clamp(17px, 5.4vw, 26px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em }
:root[data-piel="mando"] .cifras strong { font-size: clamp(16px, 4.6vw, 24px) }
.cifras span { font-size: 15px; color: var(--ink-soft) }
/* celular angosto: una cifra por renglón (como SKL Cliente) para que $1.194.500 no se corte */
@media (max-width: 440px) { .cifras { grid-template-columns: minmax(0, 1fr) } .cifras div { display: flex; align-items: baseline; gap: 12px } .cifras strong { font-size: 24px } }
.estado-hoy { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 12px; color: var(--ink-soft) }
.estado-hoy::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line) }
.estado-hoy.abierto::before { background: var(--ok) }
.estado-hoy.cerrado::before { background: var(--achiote) }

.aviso-caja { border-radius: var(--r); padding: 14px 16px; position: relative; margin-top: 16px }
.aviso-caja.sugerencia { border: var(--bw) solid var(--maiz); background: var(--maiz-tint) }
.aviso-caja.urgente { border: var(--bw) solid var(--achiote); background: var(--achiote-tint); display: flex; justify-content: space-between; align-items: center; gap: 12px }
.aviso-caja.info { background: var(--paramo-tint); border: var(--bw) solid color-mix(in srgb, var(--paramo) 35%, transparent) }
.aviso-caja p { margin: 0 40px 10px 0 }
.aviso-caja .cerrar { position: absolute; top: 6px; right: 6px; border: 0; background: none; font-size: 22px; width: 44px; height: 44px; border-radius: 10px; color: var(--ink-soft) }

.feed { list-style: none; margin: 0; padding: 0 }
.feed li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start }
.feed li:last-child { border-bottom: 0 }
.feed .t { font-size: 15px; color: var(--ink-soft) }
.feed .monto { margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums }
.canal { flex: none; width: 38px; height: 38px; border-radius: min(var(--r-in), 11px); display: grid; place-items: center; font-size: 12px; font-weight: 700 }
.canal svg { width: 20px; height: 20px }
.canal.whatsapp { background: var(--paramo-tint); color: var(--ink) }
.canal.voz { background: var(--maiz-tint); color: var(--ink) }
.canal.web { background: var(--anil-tint); color: var(--ink) }
.canal.local { background: var(--line) }
.nuevo-llega { animation: llega .6s ease-out }
@keyframes llega { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }

/* ---------- pedidos y citas ---------- */
.pedido { background: var(--surface); border: var(--bw) solid var(--borde); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sombra-tarjeta); position: relative }
.pedido.es-nuevo { border: 2px solid var(--paramo) }
.pedido-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start }
.pedido h3 { font-size: 18px }
.pedido dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0; font-size: 16px }
.pedido dt { color: var(--ink-soft) }
.pedido dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.estado { font-size: 14px; font-weight: 700; padding: 5px 11px; border-radius: min(var(--r-btn), 999px); white-space: nowrap }
.e-nuevo, .e-agendada { background: var(--maiz-tint) }
.e-preparando, .e-confirmada { background: var(--anil-tint) }
.e-en_camino { background: var(--paramo-tint) }
.e-entregado, .e-atendida { background: var(--line); color: var(--ink-soft) }
.e-cancelado, .e-cancelada, .e-no_llego { background: var(--achiote-tint) }
.dia-titulo { font-family: var(--display); font-weight: var(--fw); letter-spacing: var(--ls); font-size: 16px; color: var(--ink-soft); margin: 20px 0 8px; text-transform: capitalize }
.hora-cita { font-family: var(--display); font-size: 22px; font-weight: var(--fw); font-variant-numeric: tabular-nums }

/* ---------- chats ---------- */
.chat-item { display: flex; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; min-height: 68px }
.avatar { flex: none; width: 46px; height: 46px; border-radius: var(--r-av); background: var(--paramo-tint); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 18px; position: relative }
.avatar .n { position: absolute; top: -3px; right: -3px; background: var(--achiote); color: #fff; font-size: 12px; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px }
.chat-item .meta { flex: 1; min-width: 0 }
.chat-item .linea1 { display: flex; gap: 8px; align-items: center; justify-content: space-between }
.chat-item .ultimo { display: block; color: var(--ink-soft); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chat-item .hora { font-size: 13px; color: var(--ink-soft); white-space: nowrap }
.hilo { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 }
.msg { max-width: 86%; padding: 9px 13px; border-radius: calc(min(var(--r), 14px) + 6px); font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line) }
.msg small { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 2px; font-weight: 700 }
.msg time { display: block; font-size: 12px; color: var(--ink-soft); text-align: right; margin-top: 2px }
.msg.cliente { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 5px }
.msg.asistente { align-self: flex-end; background: var(--paramo-tint); border-color: transparent; border-bottom-right-radius: 5px }
.msg.dueno { align-self: flex-end; background: var(--anil-tint); border-color: transparent; border-bottom-right-radius: 5px }
.msg.sistema { align-self: center; background: none; border: 0; color: var(--ink-soft); font-size: 14px; text-align: center; max-width: 100% }
.banner { padding: 12px 14px; border-radius: var(--r-in); font-size: 15px; margin-bottom: 8px }
.banner.pausa { background: var(--anil-tint) }
.banner.alerta { background: var(--achiote-tint) }
.componer { display: flex; gap: 8px; position: sticky; bottom: 78px; background: var(--paper); padding: 8px 0 }
@media (min-width: 900px) { .componer { bottom: 0 } }
.componer textarea, .componer input { flex: 1; border: var(--bw) solid var(--borde-btn); border-radius: var(--r-in); padding: 11px 13px; background: var(--surface); min-height: 50px; resize: none }
.volver { border: 0; background: none; padding: 6px 0; font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--paramo) }

/* ---------- menú ---------- */
.sincro { font-size: 15px; background: var(--paramo-tint); border-radius: var(--r-in); padding: 11px 14px; display: flex; gap: 10px; align-items: center }
.sincro svg { width: 22px; height: 22px; flex: none; color: var(--paramo) }
.categoria { font-family: var(--display); font-weight: var(--fw); text-transform: var(--caps); letter-spacing: var(--ls); margin: 24px 0 4px; font-size: 16px; color: var(--ink-soft) }
.item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center }
.item .nombre { font-weight: 700; border: 0; background: none; padding: 0; text-align: left; min-height: 44px; display: flex; align-items: center; gap: 10px }
.item .nombre img { width: 44px; height: 44px; border-radius: min(var(--r-in), 10px); object-fit: cover; flex: none }
.item.agotado .nombre span { text-decoration: line-through; color: var(--ink-soft) }
.precio { display: flex; align-items: center; gap: 4px; font-size: 16px }
.precio input { width: 112px; border: var(--bw) solid var(--borde-btn); border-radius: var(--r-in); padding: 9px 11px; background: var(--paper); text-align: right; min-height: 46px; font-variant-numeric: tabular-nums }
.item label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-soft); grid-column: 1 / -1 }
.pendiente { color: var(--achiote); font-weight: 700; font-size: 14px }

/* ---------- listas y formularios ---------- */
.lista-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; border: var(--bw) solid var(--borde); background: var(--surface); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; text-align: left; min-height: 64px; color: var(--ink); text-decoration: none; box-shadow: var(--sombra-tarjeta) }
.lista-btn .ic { width: 42px; height: 42px; border-radius: min(var(--r-in), 12px); display: grid; place-items: center; background: var(--paramo); color: var(--paramo-ink); flex: none }
.lista-btn .ic svg { width: 22px; height: 22px }
.lista-btn .tx { flex: 1; min-width: 0 }
.lista-btn b { font-size: 17px; display: block }
.lista-btn span.d { display: block; font-size: 15px; color: var(--ink-soft) }
.lista-btn .flecha { color: var(--ink-soft); font-size: 22px }
.renglon { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line) }
.renglon p { margin: 2px 0 0; font-size: 15px; color: var(--ink-soft) }
.renglon > div { min-width: 0 }
.campo { display: grid; gap: 6px; margin-bottom: 14px }
.campo label { font-weight: 700; font-size: 15px }
.campo input:not([type="checkbox"]), .campo select, .campo textarea { border: var(--bw) solid var(--borde-btn); border-radius: var(--r-in); padding: 11px 13px; background: var(--surface); min-height: 50px; width: 100% }
.campo textarea { min-height: 110px; resize: vertical }
.campo .ayuda { font-size: 14px; color: var(--ink-soft) }
.error-caja { background: var(--achiote-tint); color: var(--ink); border-radius: var(--r-in); padding: 10px 14px; margin-bottom: 12px; font-size: 15px }

/* ---------- vistas especiales ---------- */
.burbuja-wa-fondo { background: #E5DDD5; border-radius: var(--r-in); padding: 14px }
@media (prefers-color-scheme: dark) { .burbuja-wa-fondo { background: #1B2620 } }
:root[data-piel="joyeria"] .burbuja-wa-fondo { background: #1B2620 }
.burbuja-wa { background: #fff; color: #111; border-radius: 12px; padding: 11px 13px; font-size: 16px; white-space: pre-wrap; max-width: 94%; box-shadow: 0 1px 1px rgba(0,0,0,.12); overflow-wrap: anywhere }
.plan { border: var(--bw) solid var(--borde); border-radius: var(--r); padding: 16px; margin-bottom: 12px; background: var(--surface); box-shadow: var(--sombra-tarjeta); position: relative }
.plan.actual { border: 2px solid var(--paramo) }
.plan h3 { font-size: 20px; display: flex; justify-content: space-between; align-items: center; gap: 8px }
.plan ul { margin: 10px 0 12px; padding-left: 20px }
.plan .costo { font-family: var(--display); font-size: 24px; font-weight: var(--fw); font-variant-numeric: tabular-nums }

/* ---------- agencia (SKL Mando) ---------- */
.cliente-fila { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0; background: none }
.luz { width: 16px; height: 16px; border-radius: 50%; margin-top: 4px }
.luz.verde { background: var(--ok) }
.luz.amarillo { background: var(--maiz) }
.luz.rojo { background: var(--achiote) }
.cliente-fila p { margin: 2px 0 0; font-size: 15px; color: var(--ink-soft) }
.cliente-fila .alerta-tx { color: var(--ink); background: var(--maiz-tint); border-radius: min(var(--r-in), 10px); padding: 7px 11px; margin-top: 7px; font-size: 15px }
.cliente-fila .alerta-tx.riesgo { background: var(--achiote-tint) }
.tabla-precios { width: 100%; border-collapse: collapse; font-size: 15px }
.tabla-precios th, .tabla-precios td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top }
.tabla-precios th { font: 800 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft) }
.scroll-x { overflow-x: auto }
code, .codigo { font-family: var(--mono); background: var(--paramo-tint); border-radius: 8px; padding: 2px 7px; font-size: 15px; overflow-wrap: anywhere }

/* ---------- detalles de cada piel ---------- */
:root[data-piel="barberia"] .titulo { border-left: 6px solid var(--paramo); padding-left: 10px }
:root[data-piel="joyeria"] .tarjeta::before, :root[data-piel="joyeria"] .tarjeta::after, :root[data-piel="joyeria"] .pedido::before, :root[data-piel="joyeria"] .pedido::after, :root[data-piel="joyeria"] .plan::before, :root[data-piel="joyeria"] .plan::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid #e0c27f; pointer-events: none }
:root[data-piel="joyeria"] .tarjeta::before, :root[data-piel="joyeria"] .pedido::before, :root[data-piel="joyeria"] .plan::before { top: -1px; left: -1px; border-width: 1px 0 0 1px }
:root[data-piel="joyeria"] .tarjeta::after, :root[data-piel="joyeria"] .pedido::after, :root[data-piel="joyeria"] .plan::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0 }
:root[data-piel="papeleria"] .tarjeta, :root[data-piel="papeleria"] .pedido, :root[data-piel="papeleria"] .cifras div { border-top: 5px solid var(--c5, #0e7490) }
:root[data-piel="papeleria"] .pedido:nth-of-type(4n+2), :root[data-piel="papeleria"] .cifras div:nth-child(2) { --c5: #f97316 }
:root[data-piel="papeleria"] .pedido:nth-of-type(4n+3), :root[data-piel="papeleria"] .cifras div:nth-child(3) { --c5: #7c3aed }
:root[data-piel="papeleria"] .pedido:nth-of-type(4n+4) { --c5: #16a34a }
:root[data-piel="mando"] .tarjeta, :root[data-piel="mando"] .lista-btn, :root[data-piel="mando"] .cifras div { border-color: color-mix(in srgb, var(--paramo) 22%, var(--line)) }
:root[data-piel="mando"] .cifras strong { color: var(--paramo) }
/* como en SKL Mando: las cifras van en letra de instrumento (en Unbounded el 0 parece una O) */
:root[data-piel="mando"] .cifras strong, :root[data-piel="mando"] .grande, :root[data-piel="mando"] .valor .grande, :root[data-piel="mando"] .plan .costo { font-family: var(--mono) !important; letter-spacing: -.03em }

/* ---------- hoja inferior (modal) ---------- */
.fondo { position: fixed; inset: 0; background: rgba(13, 8, 25, .55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: aparece .2s ease-out }
@keyframes aparece { from { opacity: 0 } }
.hoja { background: var(--paper); width: 100%; max-width: 640px; border-radius: calc(var(--r) + 6px) calc(var(--r) + 6px) 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; animation: sube .25s ease-out; border-top: var(--bw) solid var(--borde) }
@keyframes sube { from { transform: translateY(40px) } }
@media (min-width: 700px) { .fondo { align-items: center } .hoja { border-radius: calc(var(--r) + 6px); border: var(--bw) solid var(--borde) } }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px }
.hoja-cab h2 { font-size: 21px }
:root[data-piel="mando"] .hoja-cab h2 { font-size: 17px }
.hoja-cuerpo { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -16px; padding: 0 16px }
.hoja .hilo { min-height: 160px }

/* ---------- aviso flotante ---------- */
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding: 13px 18px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: all .25s; z-index: 70; width: max-content; max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--sombra) }
.toast.ver { opacity: 1; transform: translateX(-50%) }
@media (min-width: 900px) { .toast { bottom: 28px } }

/* ---------- entrada: la noche SKL ---------- */
:root[data-piel="skl"] { color-scheme: dark }
:root[data-piel="skl"] body { background: #07050d; color: #efeaf8 }
.entrada { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; padding: 28px 16px 36px; display: grid; place-items: center; align-content: center; isolation: isolate }
.entrada .orbitas { position: absolute; left: 70%; top: 32%; width: 0; height: 0; pointer-events: none; z-index: -1 }
.entrada .orbitas i { position: absolute; border: 1px solid rgba(167,121,255,.16); border-radius: 50%; transform: translate(-50%, -50%); animation: orbita 60s linear infinite }
.entrada .orbitas i::after { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #a779ff; box-shadow: 0 0 14px #a779ff }
.entrada .orbitas i:nth-child(1) { width: 460px; height: 460px }
.entrada .orbitas i:nth-child(2) { width: 820px; height: 820px; animation-duration: 90s; animation-direction: reverse }
.entrada .orbitas i:nth-child(2)::after { background: #45d3dc; box-shadow: 0 0 14px #45d3dc }
.entrada .orbitas i:nth-child(3) { width: 1200px; height: 1200px; animation-duration: 130s }
@keyframes orbita { to { transform: translate(-50%, -50%) rotate(360deg) } }
.entrada::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px circle at 72% 30%, rgba(124,77,255,.28), transparent 62%), radial-gradient(520px circle at 8% 100%, rgba(69,211,220,.12), transparent 60%), radial-gradient(rgba(167,121,255,.10) 1px, transparent 1.4px) 0 0 / 28px 28px }
/* en el celular: quién es, entrar, para qué sirve; en la pantalla grande: la explicación a la izquierda y la entrada a la derecha */
.entrada .marco-e { width: 100%; max-width: 1080px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "caja" "usos" "pie" }
.entrada .cab-e { grid-area: cab } .entrada .caja { grid-area: caja } .entrada .usos { grid-area: usos } .entrada .pie { grid-area: pie }
@media (min-width: 900px) { .entrada .marco-e { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "cab caja" "usos caja" "pie pie"; column-gap: 64px; row-gap: 26px; align-items: start } .entrada .caja { align-self: center } }
.entrada .logo-skl { display: flex; align-items: center; gap: 14px; margin-bottom: 26px }
.entrada .logo-skl svg { width: 70px; height: 52px; overflow: visible; flex: none }
.entrada .logo-skl .sep { width: 1px; height: 38px; background: linear-gradient(transparent, rgba(255,255,255,.35), transparent) }
.entrada .logo-skl b { display: block; font: 700 14px/1.15 "Unbounded", var(--display); letter-spacing: .18em; text-transform: uppercase; color: #efeaf8 }
.entrada .logo-skl span { font-size: 13px; color: #b9b0d0 }
.entrada .logo-skl .trazo path { stroke-dasharray: 400; animation: trazo 1.1s .2s cubic-bezier(.6,.1,.2,1) both }
.entrada .logo-skl .trazo path + path { animation-delay: .55s }
.entrada .logo-skl .kk { transform-box: fill-box; transform-origin: center; animation: kk .5s .45s cubic-bezier(.2,.8,.2,1) both }
.entrada .logo-skl .raya { transform-box: fill-box; transform-origin: left; animation: raya .8s .95s cubic-bezier(.2,.8,.2,1) both }
/* el logo se ve siempre; la animación solo lo dibuja al entrar (con «reducir movimiento» aparece completo) */
@keyframes trazo { from { stroke-dashoffset: 400 } to { stroke-dashoffset: 0 } }
@keyframes kk { from { transform: scale(.3); opacity: 0 } }
@keyframes raya { from { transform: scaleX(0) } }
.entrada .rotulo { font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b996ff; margin: 0 0 10px }
.entrada h1 { font: 700 clamp(30px, 7.4vw, 50px)/1.04 "Unbounded", var(--display); letter-spacing: -.02em; color: #f4f0fc; margin: 0 0 16px; text-transform: none }
.entrada h1 em { font-style: normal; background: linear-gradient(90deg, #b996ff, #45d3dc); -webkit-background-clip: text; background-clip: text; color: transparent }
.entrada .lead { font-size: 18px; color: #cfc6e6; max-width: 34em; margin: 0 0 22px }
.entrada .usos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.entrada .usos li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid #2c2347; border-radius: 16px; background: rgba(17,11,32,.72) }
.entrada .usos .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #1b1236; color: #b996ff; border: 1px solid #3a2f5c }
.entrada .usos .ic svg { width: 21px; height: 21px }
.entrada .usos b { display: block; color: #f1ecfa }
.entrada .usos span { font-size: 15px; color: #b9b0d0 }
.entrada .caja { position: relative; width: 100%; border: 1px solid rgba(167,121,255,.42); border-radius: 22px; padding: 26px 22px; background: rgba(13,8,25,.92); box-shadow: inset 0 0 0 1px rgba(167,121,255,.1), 0 30px 80px -24px rgba(120,70,255,.55) }
.entrada .caja h2 { font: 700 20px/1.2 "Unbounded", var(--display); color: #f1ecfa; margin: 0 0 6px; text-transform: none; letter-spacing: 0 }
.entrada .caja > p { color: #b9b0d0; font-size: 15px; margin-bottom: 16px }
.entrada .campo label { color: #e4dcf6 }
.entrada .campo input { background: #17102a; color: #efeaf8; border: 1px solid #3a2f5c; border-radius: 12px; font-size: 18px }
.entrada .campo input::placeholder { color: #8e84ab }
.entrada .campo .ayuda { color: #b9b0d0 }
.entrada .btn { border-radius: 12px; background: #17102a; color: #efeaf8; border: 1px solid #5b4c8a; box-shadow: none }
.entrada .btn.primario { background: linear-gradient(135deg, #bb98ff, #9466ff); color: #130d22; border-color: transparent; font-size: 17px }
.entrada .nota { color: #b9b0d0; font-size: 14px; margin: 14px 0 0 }
.entrada .nota a, .entrada .pie a { color: #d6c2ff }
.entrada .separador { display: flex; align-items: center; gap: 12px; color: #a99fc2; font-size: 14px; margin: 22px 0 12px }
.entrada .separador::before, .entrada .separador::after { content: ""; flex: 1; height: 1px; background: #2c2347 }
.entrada .error-caja { background: #3a1d1b; color: #ffd9d4 }
.entrada .pie { margin: 0; font-size: 14px; color: #a99fc2 }
.entrada .pie b { color: #e4dcf6; font-weight: 700 }
.entrada :focus-visible { outline-color: #b996ff }
.codigo-input { font-size: 30px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums }
.separador { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; margin: 26px 0 14px }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.cargando { display: grid; place-items: center; min-height: 40vh; color: var(--ink-soft) }
.girar { width: 34px; height: 34px; border: 4px solid var(--line); border-top-color: var(--paramo); border-radius: 50%; animation: gira 1s linear infinite }
@keyframes gira { to { transform: rotate(360deg) } }

/* solo se apaga lo que se mueve solo; los cambios de estado siguen funcionando */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }