/* ZENTRO Client Panel v3.20.52 — generado. Editar src/css/ y re-ensamblar (prefijos #zcp-root automáticos). */

/* ═══ 00-tokens.css ═══ */
/* ══════════════════════════════════════════════════════════════
   ZENTRO Client Panel — sistema visual "cuenta de socio"
   Papel cálido + serif editorial + un solo acento por negocio.
   El acento lo hornea PHP como --zc-accent / --zc-accent-rgb.
   Sin color-mix (compat WebView antiguos): las capas suaves del
   acento se hacen con rgba(var(--zc-accent-rgb), α).
   ══════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css");

/* ── CONTRATO CON EL BAKE PHP (panel_shortcode.php) — NO TOCAR ──
   1) El bake de FUENTE hace str_replace LITERAL de la línea --zc-font de abajo.
   2) El bake de ACENTO añade al FINAL del archivo:
      :root{--shop-color:#XXX;--zc-accent-rgb:R,G,B;}
      [data-theme="dark"]{--shop-color:#XXX;--zc-accent-rgb:R,G,B;}
   Por eso --shop-color/--zc-accent-rgb viven en :root (nunca en #zcp-root,
   que les ganaría por especificidad y mataría el acento del barbero). */
:root{
  --zc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --shop-color:#9A6A4A;
  --zc-accent-rgb:154,106,74;
}

#zcp-root{
  /* acento por negocio — hereda el bake de :root */
  --zc-accent:var(--shop-color);

  /* papel claro */
  --zc-surface:#FBFAF7;
  --zc-raise:#FFFFFF;
  --zc-surface-2:#F1F0EC;
  --zc-text:#1B1A18;
  --zc-text-2:#6E6B64;
  --zc-text-3:#9C988F;
  --zc-line:rgba(27,26,24,.09);
  --zc-line-2:rgba(27,26,24,.15);
  --zc-primary:#1B1A18;
  --zc-on-primary:#FBFAF7;
  --zc-accent-soft:rgba(var(--zc-accent-rgb),.12);
  --zc-scrim:rgba(20,19,17,.42);
  --zc-danger:#9F2F2D;
  --zc-danger-soft:#FDEBEC;
  --zc-ok:#346538;
  --zc-ok-soft:#EDF3EC;
  --zc-warn:#956400;
  --zc-warn-soft:#FBF3DB;
  --zc-shadow-sheet:0 -12px 44px -22px rgba(0,0,0,.35);
  --zc-nav-bg:rgba(251,250,247,.92);

  --zc-serif:"Newsreader",Georgia,serif;
  --zc-sans:var(--zc-font); /* honra la fuente elegida por el barbero (bake §7); el serif editorial es fijo */
  --zc-ease:cubic-bezier(.16,1,.3,1);
}

/* tinta cálida (modo oscuro) — mismo acento, papel invertido */
#zcp-root[data-theme="dark"]{
  --zc-surface:#131211;
  --zc-raise:#1C1B19;
  --zc-surface-2:#242220;
  --zc-text:#F2F0EC;
  --zc-text-2:#A5A19A;
  --zc-text-3:#757169;
  --zc-line:rgba(242,240,236,.09);
  --zc-line-2:rgba(242,240,236,.17);
  --zc-primary:#F2F0EC;
  --zc-on-primary:#161514;
  --zc-accent-soft:rgba(var(--zc-accent-rgb),.20);
  --zc-scrim:rgba(0,0,0,.55);
  --zc-danger:#E08B89;
  --zc-danger-soft:rgba(224,139,137,.14);
  --zc-ok:#9DC4A0;
  --zc-ok-soft:rgba(157,196,160,.13);
  --zc-warn:#D9B36A;
  --zc-warn-soft:rgba(217,179,106,.13);
  --zc-shadow-sheet:0 -12px 44px -18px rgba(0,0,0,.7);
  --zc-nav-bg:rgba(19,18,17,.92);
}

/* ── base ── */
#zcp-root{
  min-height:100dvh;
  background:var(--zc-surface);
  color:var(--zc-text);
  font-family:var(--zc-sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* ── ARMADURA ANTI-TEMA ──
   Esto vive dentro de un WordPress con un tema arbitrario que estiliza
   button/a/input con bordes, fondos y sombras. Arquitectura de 3 capas:
   1) reset `#zcp-root :where(x)` → especificidad (1,0,0): GANA a cualquier
      selector del tema sin id (button, .entry-content a, …)
   2) componentes: build.mjs prefija TODA regla .zc-* con `#zcp-root`
      → (1,1,0): ganan al reset
   3) estilos inline del JS: ganan a todo */
#zcp-root :where(*, *::before, *::after){ box-sizing:border-box; margin:0; padding:0; }
#zcp-root :where(button, [type="button"], [type="submit"]){
  font-family:inherit; font-size:inherit; line-height:inherit; color:inherit;
  background:none; border:0; border-radius:0; box-shadow:none; outline:none;
  text-transform:none; letter-spacing:normal; text-shadow:none; min-height:0; min-width:0;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
#zcp-root :where(input, select, textarea){
  font-family:inherit; font-size:inherit; line-height:inherit; color:inherit;
  background:none; border:0; border-radius:0; box-shadow:none; outline:none;
  -webkit-appearance:none; appearance:none;
}
#zcp-root :where(img){ max-width:100%; display:block; border:0; box-shadow:none; }
#zcp-root :where(a, a:hover, a:visited){ color:inherit; text-decoration:none; background:none; box-shadow:none; border-bottom:0; }
#zcp-root :where(ul, ol){ list-style:none; }
#zcp-root :where(i, em){ font-style:normal; color:inherit; }   /* los iconos Phosphor heredan color; el tema no los pinta */
#zcp-root [hidden]{ display:none !important; }

/* ── PWA / WebView: el panel vive dentro de un WordPress (a veces Elementor) cuyo <body>
   puede ser oscuro. Sin esto, el overscroll del móvil rebotaba y enseñaba negro abajo,
   con un scroll fantasma. Pintamos html/body con el papel y cortamos el rebote. Los colores
   van literales (= --zc-surface claro/oscuro; el bake de acento no toca surface). La clase
   .zcp-host / .zcp-dark las pone boot()/applyTheme, para no afectar a otras páginas del sitio. */
/* ── Anti-lock de scroll del host (rueda del ratón en escritorio) ──
   El panel scrollea con el scroll natural del documento (window.scrollTo en go()).
   Algunos temas de WordPress/Elementor bloquean el scroll del contenedor de página con
   overflow:hidden o height:100vh → en PC la rueda no movía nada (en móvil el gesto táctil
   aún arrastraba). Reafirmamos overflow-y:auto/height:auto SOLO en la página del panel
   (clases .zcp-host que pone boot()). Va con !important a propósito: acotado a .zcp-host
   (solo esta página), así vence también a temas que usen overflow:hidden !important, sin
   poder afectar a ninguna otra página del sitio. auto/auto es el valor por defecto. */
html.zcp-host{ background:#FBFAF7; overscroll-behavior:none; overflow-y:auto !important; height:auto !important; }
html.zcp-host.zcp-dark{ background:#131211; }
body.zcp-host{ background:inherit; margin:0; overscroll-behavior:none; overflow-y:auto !important; height:auto !important; }

/* grano de papel, profundidad sutil */
#zcp-root::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
#zcp-root[data-theme="dark"]::before{ opacity:.35; mix-blend-mode:screen; }

/* tipografía utilitaria */
#zcp-root .zc-serif{ font-family:var(--zc-serif); font-weight:500; letter-spacing:-.02em; }
#zcp-root .zc-eb{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--zc-text-3); }
#zcp-root .zc-lbl{ font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--zc-text-3); }
#zcp-root .zc-num{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  #zcp-root *{ animation:none !important; transition:none !important; }
}


/* ═══ 01-components.css ═══ */
/* ══════════════════════════════════════════════════════════════
   Componentes — shell, listas, pestañas, botones, sheets, forms
   ══════════════════════════════════════════════════════════════ */

/* ── shell ── */
#zcp-root .zc-app{ position:relative; z-index:1; max-width:520px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column; }
#zcp-root .zc-main{ flex:1 1 auto; padding:14px 22px calc(104px + env(safe-area-inset-bottom, 0px)); }
#zcp-root .zc-screen{ display:none; }
#zcp-root .zc-screen.is-active{ display:block; animation:zc-rise .5s var(--zc-ease) both; }
@keyframes zc-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* cabecera de pantalla */
#zcp-root .zc-top{ display:flex; align-items:flex-start; justify-content:space-between; padding-top:10px; }
#zcp-root .zc-shopname{ font-family:var(--zc-serif); font-weight:500; font-size:22px; letter-spacing:-.02em; margin-top:4px; line-height:1.1; }
#zcp-root .zc-topmeta{ font-size:11.5px; color:var(--zc-text-2); margin-top:4px; }
#zcp-root .zc-avatar{ width:34px; height:34px; border-radius:50%; background:var(--zc-raise); border:1px solid var(--zc-line-2);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; color:var(--zc-text-2); flex:0 0 auto; }
#zcp-root .zc-page{ font-family:var(--zc-serif); font-weight:500; font-size:28px; letter-spacing:-.02em; padding-top:10px; }
#zcp-root .zc-psub{ font-size:12.5px; color:var(--zc-text-2); margin-top:3px; }
#zcp-root .zc-greet{ font-family:var(--zc-serif); font-weight:500; font-size:25px; letter-spacing:-.02em; margin-top:20px; }

/* ── nav inferior ── */
#zcp-root .zc-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--zc-nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--zc-line);
  padding-bottom:env(safe-area-inset-bottom, 0px); }   /* la franja segura (home-indicator) va en el
       OUTER → el fondo+blur se extiende bajo ella y la fila de iconos queda a 62px LIMPIOS, sin aplastar */
#zcp-root .zc-nav-inner{ max-width:520px; margin:0 auto; height:62px; display:flex; }
#zcp-root .zc-ni{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--zc-text-3); position:relative; transition:color .2s var(--zc-ease); }
#zcp-root .zc-ni i{ font-size:23px; }
#zcp-root .zc-ni span{ font-size:9.5px; font-weight:500; }
#zcp-root .zc-ni.is-on{ color:var(--zc-text); }
#zcp-root .zc-ni.is-on i{ color:var(--zc-accent); }
#zcp-root .zc-ni .zc-dot{ position:absolute; top:8px; right:calc(50% - 16px); width:7px; height:7px; border-radius:50%;
  background:var(--zc-accent); border:2px solid var(--zc-surface); }

/* ── saldo / héroe numérico ── */
#zcp-root .zc-bal-k{ font-size:11px; font-weight:500; letter-spacing:.03em; color:var(--zc-text-2); }
#zcp-root .zc-bal-n{ font-family:var(--zc-serif); font-weight:500; font-size:54px; letter-spacing:-.03em; line-height:.98;
  margin-top:7px; font-variant-numeric:tabular-nums; }
#zcp-root .zc-bal-n em{ font-family:var(--zc-sans); font-style:normal; font-size:15px; font-weight:500; color:var(--zc-text-3); margin-left:8px; letter-spacing:0; }
#zcp-root .zc-prog{ height:3px; border-radius:99px; background:var(--zc-line-2); overflow:hidden; margin-top:18px; }
#zcp-root .zc-prog i{ display:block; height:100%; background:var(--zc-accent); border-radius:99px; transition:width .6s var(--zc-ease); }
#zcp-root .zc-goal{ font-size:12.5px; color:var(--zc-text-2); margin-top:11px; }
#zcp-root .zc-goal b{ color:var(--zc-text); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── pestañas ── */
#zcp-root .zc-tabs{ display:flex; gap:22px; margin-top:22px; border-bottom:1px solid var(--zc-line);
  overflow-x:auto; scrollbar-width:none; }
#zcp-root .zc-tabs::-webkit-scrollbar{ display:none; }
#zcp-root .zc-tabs.zc-tabs-fill{ gap:0; justify-content:space-between; }
#zcp-root .zc-tab{ position:relative; padding:0 0 12px; font-size:12.5px; font-weight:500; color:var(--zc-text-3);
  white-space:nowrap; transition:color .2s var(--zc-ease); flex:0 0 auto; }
#zcp-root .zc-tab.is-on{ color:var(--zc-text); font-weight:600; }
#zcp-root .zc-tab.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--zc-accent); border-radius:2px; }

/* ── filas de lista (patrón central) ── */
#zcp-root .zc-li{ display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--zc-line); }
#zcp-root .zc-li:first-child, #zcp-root .zc-li.zc-li-first{ border-top:0; }
#zcp-root .zc-li-tap{ cursor:pointer; }
#zcp-root .zc-li-tx{ flex:1; min-width:0; }
#zcp-root .zc-li-tx b{ display:block; font-size:14px; font-weight:500; letter-spacing:-.005em; }
#zcp-root .zc-li-tx span{ display:block; font-size:12px; color:var(--zc-text-2); margin-top:2px; }
#zcp-root .zc-amt{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto; letter-spacing:-.01em; }
#zcp-root .zc-amt.is-neg{ color:var(--zc-text-3); }
#zcp-root .zc-mutd{ font-size:12px; color:var(--zc-text-3); flex:0 0 auto; text-align:right; }
#zcp-root .zc-link{ font-size:12.5px; font-weight:600; color:var(--zc-accent); flex:0 0 auto; cursor:pointer; }
#zcp-root .zc-donel{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:500; color:var(--zc-text-3); flex:0 0 auto; }
#zcp-root .zc-donel i{ font-size:14px; }
#zcp-root .zc-chev{ font-size:18px; color:var(--zc-text-3); flex:0 0 auto; }
#zcp-root .zc-thumb{ width:46px; height:46px; border-radius:11px; background:var(--zc-surface-2); overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
#zcp-root .zc-thumb i{ font-size:21px; color:var(--zc-text-3); }
#zcp-root .zc-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ── tarjetas ── */
#zcp-root .zc-card{ margin-top:16px; border:1px solid var(--zc-line); border-radius:16px; background:var(--zc-raise); padding:17px 18px; }
#zcp-root .zc-card-accent{ border-color:var(--zc-accent-soft); }
#zcp-root .zc-card .zc-hr{ height:1px; background:var(--zc-line); margin:15px 0 13px; }
#zcp-root .zc-card-ttl{ font-family:var(--zc-serif); font-weight:500; font-size:19px; letter-spacing:-.02em; }
#zcp-root .zc-card-desc{ font-size:12.5px; color:var(--zc-text-2); margin-top:5px; line-height:1.5; }

/* pastillas de estado */
/* El texto NO usa el acento crudo: sobre --zc-accent-soft (el mismo acento al 12%)
   un acento claro (amarillo, beige, dorado) queda ilegible. Usa la versión oscurecida
   si existe, y si no, el color de texto normal — legible con cualquier acento. */
#zcp-root .zc-pill{ font-size:11px; font-weight:500; color:var(--zc-accent-ink, var(--zc-text)); background:var(--zc-accent-soft);
  padding:5px 11px; border-radius:999px; white-space:nowrap; }
#zcp-root .zc-pill.is-ok{ color:var(--zc-ok); background:var(--zc-ok-soft); }
#zcp-root .zc-pill.is-warn{ color:var(--zc-warn); background:var(--zc-warn-soft); }
#zcp-root .zc-pill.is-danger{ color:var(--zc-danger); background:var(--zc-danger-soft); }
#zcp-root .zc-pill.is-plain{ color:var(--zc-text-2); background:var(--zc-surface-2); }
#zcp-root .zc-tag{ display:inline-block; font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--zc-accent); background:var(--zc-accent-soft); padding:3px 7px; border-radius:5px; margin-top:5px; }

/* ── botones ── */
#zcp-root .zc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 15px; border-radius:9px; font-size:12.5px; font-weight:500;
  transition:transform .16s var(--zc-ease), opacity .16s var(--zc-ease); }
#zcp-root .zc-btn:active{ transform:scale(.97); }
#zcp-root .zc-btn[disabled]{ opacity:.45; pointer-events:none; }
#zcp-root .zc-btn-solid{ background:var(--zc-primary); color:var(--zc-on-primary); }
#zcp-root .zc-btn-ghost{ border:1px solid var(--zc-line-2); color:var(--zc-text-2); }
#zcp-root .zc-btn-line{ border:1px solid var(--zc-line-2); color:var(--zc-text); font-weight:600; }
#zcp-root .zc-btn-danger{ border:1px solid var(--zc-line-2); color:var(--zc-danger); }
#zcp-root .zc-btn-lg{ width:100%; height:48px; border-radius:12px; font-size:14px; }
#zcp-root .zc-cta{ display:flex; align-items:center; justify-content:space-between; width:100%; height:54px;
  padding:0 16px 0 20px; border-radius:14px; background:var(--zc-primary); color:var(--zc-on-primary);
  font-size:15px; font-weight:500; margin-top:16px; transition:transform .16s var(--zc-ease); }
#zcp-root .zc-cta:active{ transform:scale(.985); }
#zcp-root .zc-cta i{ font-size:19px; }

/* ── formularios ── */
#zcp-root .zc-field{ margin-top:14px; }
#zcp-root .zc-field label{ display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--zc-text-3); margin-bottom:7px; }
#zcp-root .zc-input{ width:100%; height:48px; padding:0 15px; border:1px solid var(--zc-line-2); border-radius:12px;
  background:var(--zc-raise); font-size:14px; transition:border-color .2s var(--zc-ease); }
#zcp-root .zc-input:focus{ outline:none; border-color:var(--zc-accent); }
#zcp-root .zc-input::placeholder{ color:var(--zc-text-3); }
#zcp-root textarea.zc-input{ height:auto; min-height:96px; padding:13px 15px; resize:vertical; }
#zcp-root .zc-err{ font-size:12px; color:var(--zc-danger); margin-top:7px; }
#zcp-root .zc-hint{ font-size:12px; color:var(--zc-text-2); margin-top:7px; line-height:1.5; }

/* interruptor */
#zcp-root .zc-switch{ position:relative; width:44px; height:26px; border-radius:99px; background:var(--zc-line-2);
  transition:background .2s var(--zc-ease); flex:0 0 auto; }
#zcp-root .zc-switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--zc-raise); box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .22s var(--zc-ease); }
#zcp-root .zc-switch.is-on{ background:var(--zc-accent); }
#zcp-root .zc-switch.is-on::after{ transform:translateX(18px); }

/* chips de selección (slots, opciones) */
#zcp-root .zc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#zcp-root .zc-chip{ height:38px; padding:0 15px; border-radius:10px; border:1px solid var(--zc-line-2);
  background:var(--zc-raise); font-size:13px; font-weight:500; color:var(--zc-text);
  display:inline-flex; align-items:center; gap:6px; transition:all .16s var(--zc-ease); }
#zcp-root .zc-chip.is-on{ background:var(--zc-primary); color:var(--zc-on-primary); border-color:var(--zc-primary); }
#zcp-root .zc-chip[disabled]{ opacity:.35; pointer-events:none; }

/* ── bottom sheet ── */
#zcp-root .zc-scrim{ position:fixed; inset:0; z-index:50; background:var(--zc-scrim); opacity:0; pointer-events:none;
  transition:opacity .3s var(--zc-ease); }
#zcp-root .zc-scrim.is-open{ opacity:1; pointer-events:auto; }
#zcp-root .zc-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:51; max-width:520px; margin:0 auto;
  background:var(--zc-raise); border-top-left-radius:22px; border-top-right-radius:22px;
  box-shadow:var(--zc-shadow-sheet); transform:translateY(103%); transition:transform .4s var(--zc-ease);
  max-height:88dvh; display:flex; flex-direction:column; }
#zcp-root .zc-sheet.is-open{ transform:translateY(0); }
#zcp-root .zc-sheet-grab{ width:38px; height:4px; border-radius:99px; background:var(--zc-line-2); margin:10px auto 0; flex:0 0 auto; }
#zcp-root .zc-sheet-body{ padding:16px 22px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y:auto; }
#zcp-root .zc-sheet-ttl{ font-family:var(--zc-serif); font-weight:500; font-size:23px; letter-spacing:-.02em; line-height:1.15; }
#zcp-root .zc-sheet-meta{ font-size:12px; color:var(--zc-text-2); margin-top:5px; }
#zcp-root .zc-sheet-desc{ font-size:13px; color:var(--zc-text-2); line-height:1.55; margin-top:11px; }
#zcp-root .zc-sheet-close{ width:100%; height:44px; margin-top:8px; color:var(--zc-text-2); font-size:13px; font-weight:500; }

/* ── toast (siempre por encima de todo — regla de la casa) ── */
#zcp-root .zc-toast{ position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom, 0px)); z-index:9999;
  transform:translateX(-50%) translateY(16px); opacity:0; pointer-events:none;
  background:var(--zc-primary); color:var(--zc-on-primary); font-size:13px; font-weight:500;
  padding:12px 18px; border-radius:12px; max-width:86vw; text-align:center;
  transition:all .3s var(--zc-ease); }
#zcp-root .zc-toast.is-open{ transform:translateX(-50%) translateY(0); opacity:1; }

/* ── estados vacíos / carga ── */
#zcp-root .zc-empty{ text-align:center; padding:44px 20px; }
#zcp-root .zc-empty i{ font-size:30px; color:var(--zc-text-3); }
#zcp-root .zc-empty b{ display:block; font-family:var(--zc-serif); font-weight:500; font-size:18px; letter-spacing:-.015em; margin-top:12px; }
#zcp-root .zc-empty span{ display:block; font-size:12.5px; color:var(--zc-text-2); margin-top:5px; line-height:1.5; }
#zcp-root .zc-spin{ width:22px; height:22px; border-radius:50%; border:2px solid var(--zc-line-2);
  border-top-color:var(--zc-accent); margin:34px auto; animation:zc-spin .7s linear infinite; }
@keyframes zc-spin{ to{ transform:rotate(360deg) } }
#zcp-root .zc-skel{ border-radius:10px; background:linear-gradient(90deg,var(--zc-surface-2) 25%,var(--zc-line) 50%,var(--zc-surface-2) 75%);
  background-size:200% 100%; animation:zc-skel 1.3s ease infinite; }
@keyframes zc-skel{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* separador de sección */
#zcp-root .zc-sec{ margin-top:26px; }
#zcp-root .zc-sec-h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
#zcp-root .zc-sec-h .zc-link{ font-weight:500; color:var(--zc-text-2); }


/* ═══ 02-screens.css ═══ */
/* ══════════════════════════════════════════════════════════════
   Piezas específicas de pantalla — masthead, cita, huecos,
   steppers, deslizador, código, banner calendario, galería.
   ══════════════════════════════════════════════════════════════ */

/* masthead con foto de portada (Inicio) */
#zcp-root .zc-masthead{ position:relative; height:118px; border-radius:16px; overflow:hidden;
  background-size:cover; background-position:center; margin-top:10px; }
#zcp-root .zc-mh-top{ position:absolute; top:12px; right:12px; }
#zcp-root .zc-mh-top .zc-avatar{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#zcp-root .zc-mh-name{ position:absolute; left:16px; bottom:13px; color:#fff;
  font-family:var(--zc-serif); font-weight:500; font-size:20px; letter-spacing:-.02em; }

/* tarjeta de cita */
#zcp-root .zc-when{ font-family:var(--zc-serif); font-weight:500; font-size:22px; letter-spacing:-.02em; margin-top:12px; }
#zcp-root .zc-apptmeta{ display:flex; align-items:center; gap:9px; margin-top:12px; }
#zcp-root .zc-bav{ width:25px; height:25px; border-radius:50%; background:var(--zc-surface); border:1px solid var(--zc-line-2);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--zc-text-2); flex:0 0 auto; }
#zcp-root .zc-svcline{ font-size:12.5px; color:var(--zc-text-2); }
#zcp-root .zc-svcline b{ color:var(--zc-text); font-weight:500; }
#zcp-root .zc-price{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
#zcp-root .zc-price small{ margin-left:5px; color:var(--zc-text-3); font-size:11px; font-weight:400; }
#zcp-root .zc-rebook{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:13.5px; color:var(--zc-text-2); margin-top:10px; padding:11px 14px; cursor:pointer; border:1px solid var(--zc-line); border-radius:14px; transition:border-color .15s, background .15s; }
#zcp-root .zc-rebook:active{ background:var(--zc-accent-soft); border-color:var(--zc-accent-soft); }
#zcp-root .zc-rebook b{ color:var(--zc-text); font-weight:600; }
#zcp-root .zc-rebook .zc-rebook-ic{ font-size:16px; color:var(--zc-accent); }
#zcp-root .zc-rebook i.ph-caret-right{ font-size:14px; vertical-align:-2px; color:var(--zc-text-3); }

/* punto en pestaña interna */
#zcp-root .zc-tabdot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--zc-accent);
  margin-left:5px; vertical-align:2px; }

/* selección y atenuado en filas */
#zcp-root .zc-li-sel b{ color:var(--zc-accent); }
#zcp-root .zc-li-dim{ opacity:.55; }
#zcp-root .zc-thumb{ position:relative; }
#zcp-root .zc-thumb-n{ position:absolute; right:3px; bottom:3px; background:rgba(15,13,11,.62); color:#fff;
  font-size:9px; font-weight:600; padding:1px 5px; border-radius:99px; }

/* steppers − / + */
#zcp-root .zc-stepper{ display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; }
#zcp-root .zc-step{ width:30px; height:30px; border-radius:9px; border:1px solid var(--zc-line-2); background:var(--zc-raise);
  display:inline-flex; align-items:center; justify-content:center; color:var(--zc-text); }
#zcp-root .zc-step i{ font-size:14px; }
#zcp-root .zc-step:active{ transform:scale(.94); }

/* navegador de mes (reserva, paso fecha) */
#zcp-root .zc-mnav{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 2px 0; }
#zcp-root .zc-mnav-lbl{ font-size:14px; font-weight:600; text-transform:capitalize; }
#zcp-root .zc-mnav-btn{ flex:0 0 auto; width:36px; height:36px; border-radius:11px; border:1px solid var(--zc-line-2);
  background:var(--zc-raise); color:inherit; font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:opacity .16s var(--zc-ease); }
#zcp-root .zc-mnav-btn:disabled{ opacity:.28; }

/* tira de días (reserva / reprogramar) */
#zcp-root .zc-daystrip{ display:flex; gap:7px; overflow-x:auto; padding:12px 2px 6px; scrollbar-width:none; align-items:flex-end; }
#zcp-root .zc-daystrip::-webkit-scrollbar{ display:none; }
#zcp-root .zc-day{ flex:0 0 auto; width:52px; padding:9px 0 8px; border-radius:12px; border:1px solid var(--zc-line-2);
  background:var(--zc-raise); text-align:center; position:relative; transition:all .16s var(--zc-ease); }
#zcp-root .zc-day span{ display:block; font-size:9.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--zc-text-3); }
#zcp-root .zc-day b{ display:block; font-size:16px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums; }
#zcp-root .zc-day[disabled]{ opacity:.32; }
#zcp-root .zc-day.is-on{ background:var(--zc-primary); border-color:var(--zc-primary); }
#zcp-root .zc-day.is-on span, #zcp-root .zc-day.is-on b{ color:var(--zc-on-primary); }
#zcp-root .zc-day-mark{ position:absolute; top:4px; right:5px; font-style:normal; font-size:8.5px; font-weight:700; color:var(--zc-accent); }
#zcp-root .zc-day.is-on .zc-day-mark{ color:var(--zc-on-primary); }
#zcp-root .zc-day-month{ flex:0 0 auto; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--zc-text-3); writing-mode:vertical-rl; transform:rotate(180deg); padding:6px 0; }

/* chips de hora con etiqueta de precio/puntos */
#zcp-root .zc-chip-time{ flex-direction:column; height:auto; padding:8px 14px; gap:1px; }
#zcp-root .zc-chip-time em{ font-style:normal; font-size:9.5px; font-weight:600; color:var(--zc-accent); }
#zcp-root .zc-chip-time em.is-pts{ color:var(--zc-text-3); }
#zcp-root .zc-chip-time.is-on em{ color:var(--zc-on-primary); }

/* deslizador de puntos (tienda) */
#zcp-root .zc-range{ width:100%; height:26px; -webkit-appearance:none; appearance:none; background:transparent; }
#zcp-root .zc-range::-webkit-slider-runnable-track{ height:4px; border-radius:99px; background:var(--zc-line-2); }
#zcp-root .zc-range::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--zc-accent); margin-top:-9px; border:3px solid var(--zc-raise); box-shadow:0 1px 4px rgba(0,0,0,.2); }
#zcp-root .zc-range::-moz-range-track{ height:4px; border-radius:99px; background:var(--zc-line-2); }
#zcp-root .zc-range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--zc-accent); border:3px solid var(--zc-raise); }
#zcp-root .zc-range[disabled]{ opacity:.4; }

/* código de canje / referido */
#zcp-root .zc-code{ font-family:var(--zc-serif); font-size:26px; letter-spacing:.12em; text-align:center;
  padding:16px; border:1px dashed var(--zc-line-2); border-radius:14px; margin-top:14px; user-select:all; }

/* footer del sheet */
#zcp-root .zc-sheet-hd{ padding:16px 22px 0; flex:0 0 auto; }
#zcp-root .zc-sheet-ft{ flex:0 0 auto; padding:12px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--zc-line); background:var(--zc-raise); }
#zcp-root .zc-sheet-ft:has(> :only-child){ border-top:0; padding-top:4px; }

/* contenedor Stripe */
#zcp-root .zc-stripe-el{ min-height:180px; padding:4px 0; }

/* ── CAPA GLOBAL (elementos que el JS cuelga de <body>, FUERA de #zcp-root) ──
   El prefijador los deja en paz (empiezan por body) y llevan su propia
   armadura anti-tema explícita (border/background/appearance). */

/* banner "Guardar en calendario" — el toast SIEMPRE por encima */
body .zc-calbanner{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  z-index:60; display:flex; align-items:center; gap:12px; background:var(--zc-raise, #fff); color:var(--zc-text, #1B1A18);
  border:1px solid var(--zc-line-2, rgba(27,26,24,.15)); border-radius:14px; padding:11px 14px; margin:0;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.3); font-size:12.5px; font-weight:500; max-width:92vw;
  font-family:"DM Sans",-apple-system,system-ui,sans-serif; box-sizing:border-box; }
body .zc-calbanner a{ color:var(--zc-accent, #9A6A4A); font-weight:600; text-decoration:none; background:none; border:0; box-shadow:none; }
body .zc-calbanner button{ display:flex; color:var(--zc-text-3, #9C988F); font-size:14px;
  background:none; border:0; padding:0; margin:0; box-shadow:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
body.zc-cal-on #zcp-root .zc-toast{ bottom:calc(150px + env(safe-area-inset-bottom, 0px)); }

/* galería de fotos de servicio */
body .zc-gallery{ position:fixed; inset:0; z-index:70; background:rgba(12,11,10,.92); margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
body .zc-gallery *{ box-sizing:border-box; }
body .zc-gal-strip{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0; padding:0; }
body .zc-gal-strip::-webkit-scrollbar{ display:none; }
body .zc-gal-item{ flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; padding:44px 18px 64px; margin:0; }
body .zc-gal-item img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; border:0; box-shadow:none; }
body .zc-gal-close{ position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px;
  border:0; padding:0; margin:0; box-shadow:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
body .zc-gal-dots{ position:absolute; bottom:26px; left:0; right:0; display:flex; justify-content:center; gap:6px; margin:0; padding:0; }
body .zc-gal-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35); font-style:normal; }
body .zc-gal-dots i.on{ background:#fff; }

/* transición de arranque */
#zcp-root{ transition:opacity .3s ease; }