/* =====================================================================
   VidrieraLive · zona vendedores (F3, CONTRACT-v4 §2.4)
   /vender · /vender/planes · /vender/beneficios · /vender/abrir · /centro
   Prefijos: .ven- (compartido y landing) · .vpl- (planes) · .vben- (beneficios) · .abr- (alta) · .ctr- (Centro).
   Paleta Cartulina: solo tokens de styles.css (con su valor de respaldo). Lima = una acción principal por pantalla.
   Mobile-first (375 px). Foco visible, objetivos ≥ 44 px, prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Utilidades compartidas
   --------------------------------------------------------------------- */
.ven-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ven-mono, .ven-seller-dl .ven-mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.ven-req { color: var(--danger, #921B1B); }
.ven-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ven-h3 { margin: 0 0 6px; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 16px; font-weight: 700; }
.ven-grid2, .ven-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ven-field-error { margin: 4px 0 0; color: var(--danger, #921B1B); font-size: 13px; }
.ven-field-error[hidden] { display: none; }
.ven-form-alert { padding: 10px 12px; border: 1px solid var(--danger-line, #F1C0B2); border-radius: 8px; background: var(--danger-soft, #FDE9E2); color: var(--danger, #921B1B); font-size: 14px; }
.ven-form-alert[hidden] { display: none; }
.ven-check-msg { margin: 4px 0 0; font-size: 13px; color: var(--text-muted, #695B66); min-height: 1em; }
.ven-check-msg:empty { display: none; }
.ven-check-msg.is-ok { color: var(--success, #1B7238); }
.ven-check-msg.is-bad { color: var(--danger, #921B1B); }
.ven-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--info-soft, #EEF1F4); color: var(--text, #1F1520); font-size: 13.5px; }
.ven-form-actions { flex-wrap: wrap; gap: 8px; }
.ven-seg-wrap { margin: 0; padding: 0; border: 0; min-width: 0; }
.ven-seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ven-seg label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--border-strong, #8C7D88); border-radius: 8px; background: var(--surface, #FFFFFF); cursor: pointer; font-size: 14px; }
.ven-seg label.is-on { border-color: var(--brand, #9A1584); background: var(--brand-soft, #FBE9F5); font-weight: 600; }
.ven-seg label:focus-within { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 2px; }
.ven-consent { padding: 12px; border: 1.5px solid var(--brand-line, #EDC3E2); border-radius: 10px; background: var(--brand-soft, #FBE9F5); }
.ven-consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.ven-consent-label input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--brand, #9A1584); }
.ven-consent-links { margin: 6px 0 0 32px; }
.ven-consent [aria-invalid="true"] { outline: 2px solid var(--danger, #921B1B); outline-offset: 2px; }
.ven-state { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: var(--info-soft, #EEF1F4); }
.ven-spinner { flex: 0 0 auto; width: 26px; height: 26px; border: 3px solid var(--border, #E2D8DF); border-top-color: var(--brand, #9A1584); border-radius: 50%; animation: ven-spin .8s linear infinite; display: inline-block; vertical-align: middle; }
.ven-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes ven-spin { to { transform: rotate(360deg); } }
.ven-seller-dl { display: grid; gap: 6px; margin: 0 0 8px; }
.ven-seller-dl > div { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 8px; font-size: 14px; }
.ven-seller-dl dt { color: var(--text-muted, #695B66); }
.ven-seller-dl dd { margin: 0; overflow-wrap: anywhere; }
.ven-example-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px dashed var(--border-strong, #8C7D88); border-radius: 999px; font-size: 12px; color: var(--text-muted, #695B66); }

@media (min-width: 600px) {
  .ven-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ven-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ven-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   1. Vendé en VidrieraLive (/vender)
   --------------------------------------------------------------------- */
.ven-main { padding-top: 16px; padding-bottom: 48px; }
.ven-hero { display: grid; gap: 18px; padding: 24px 18px; border-radius: 16px; background: var(--brand-soft, #FBE9F5); border: 1px solid var(--brand-line, #EDC3E2); }
.ven-hero h1 { margin: 0; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(28px, 7.5vw, 46px); line-height: 1.06; letter-spacing: -.02em; color: var(--text, #1F1520); }
.ven-hero h1 .ven-hl { color: var(--brand-strong, #6F0E5F); }
.ven-hero-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text, #1F1520); max-width: 40em; }
.ven-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ven-hero-cta .btn { flex: 1 1 auto; }
.ven-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ven-hero-facts li { padding: 6px 10px; border-radius: 999px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); font-size: 13.5px; }
.ven-hero-card { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: var(--surface, #FFFFFF); box-shadow: 0 8px 24px rgba(31, 21, 32, .08); }
.ven-section { margin-top: 36px; scroll-margin-top: 80px; }
.ven-section > h2, .ven-section-head h2 { margin: 0 0 6px; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(22px, 5.6vw, 30px); line-height: 1.15; }
.ven-section-lead { margin: 0 0 16px; color: var(--text-muted, #695B66); max-width: 44em; }
.ven-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ven-card { padding: 18px; border-radius: 12px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); }
.ven-card h3 { margin: 0 0 6px; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 18px; }
.ven-card p { margin: 0 0 8px; }
.ven-card ul { margin: 0; padding-left: 18px; }
.ven-card-ico { font-size: 30px; line-height: 1; margin-bottom: 8px; display: block; }
.ven-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ven-step; }
.ven-steps li { position: relative; padding: 16px 16px 16px 60px; border-radius: 12px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); counter-increment: ven-step; }
.ven-steps li::before { content: counter(ven-step); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-strong, #6F0E5F); color: #FFFFFF; font-weight: 800; font-family: var(--font-display, "Archivo", system-ui, sans-serif); }
.ven-steps b { display: block; margin-bottom: 2px; }
.ven-steps .ven-must { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--warning-soft, #FFF3DA); color: var(--warning, #8A4300); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.ven-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ven-preview-card { padding: 4px; }
.ven-preview-quote { margin: 0; padding: 16px; border-left: 4px solid var(--brand, #9A1584); background: var(--surface, #FFFFFF); border-radius: 0 12px 12px 0; font-size: 17px; }
.ven-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ven-plan { display: grid; gap: 6px; padding: 16px; border-radius: 12px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); }
.ven-plan h3 { margin: 0; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 18px; }
.ven-plan-price { font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ven-plan-price small { font-size: 14px; font-weight: 600; color: var(--text-muted, #695B66); }
.ven-plan ul { margin: 0; padding-left: 18px; font-size: 14px; }
.ven-links-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ven-faq { display: grid; gap: 8px; }
.ven-faq details, .ctr-faq-item { border: 1px solid var(--border, #E2D8DF); border-radius: 10px; background: var(--surface, #FFFFFF); }
.ven-faq summary, .ctr-faq-item summary { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; cursor: pointer; font-weight: 700; list-style: none; }
.ven-faq summary::-webkit-details-marker, .ctr-faq-item summary::-webkit-details-marker { display: none; }
.ven-faq summary::after, .ctr-faq-item summary::after { content: '+'; margin-left: auto; padding-left: 12px; font-size: 20px; color: var(--brand-strong, #6F0E5F); }
.ven-faq details[open] summary::after, .ctr-faq-item[open] summary::after { content: '−'; }
.ven-faq summary:focus-visible, .ctr-faq-item summary:focus-visible { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 2px; border-radius: 10px; }
.ven-faq details > div, .ven-faq details > p, .ctr-faq-item > p, .ctr-faq-item > ul { margin: 0; padding: 0 14px 14px; }
.ven-close { margin-top: 36px; padding: 24px 18px; border-radius: 16px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); text-align: center; }
.ven-close h2 { margin: 0 0 8px; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(22px, 5.6vw, 30px); }
.ven-close p { margin: 0 auto 14px; max-width: 34em; }

@media (min-width: 768px) {
  .ven-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding: 40px 36px; }
  .ven-hero-cta .btn { flex: 0 0 auto; }
  .ven-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ven-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ven-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ven-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ven-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   2. Abrí tu local (/vender/abrir)
   --------------------------------------------------------------------- */
.abr-main { padding-top: 16px; padding-bottom: 48px; }
.abr-wrap { max-width: 920px; margin: 0 auto; }
.abr-head h1 { margin: 0; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(26px, 7vw, 38px); line-height: 1.1; }
.abr-head p { margin: 4px 0 0; color: var(--text-muted, #695B66); }
.abr-has-local { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--info-soft, #EEF1F4); border: 1px solid var(--info-line, #D3DAE2); }
.abr-has-local p { margin: 0; }
.abr-progress { margin: 16px 0 6px; }
.abr-progress-text { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.abr-bar { height: 8px; border-radius: 999px; background: var(--surface-alt, #EFE8ED); overflow: hidden; }
.abr-bar > span { display: block; height: 100%; background: var(--brand, #9A1584); border-radius: inherit; transition: width .25s ease; }
.abr-steps { position: relative; display: flex; gap: 6px; margin: 10px 0 14px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.abr-steps::-webkit-scrollbar { display: none; }
.abr-steps li { flex: 0 0 auto; }
.abr-step-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px 6px 6px; border: 1px solid var(--border, #E2D8DF); border-radius: 999px; background: var(--surface, #FFFFFF); color: var(--text, #1F1520); font: inherit; font-size: 13.5px; cursor: pointer; }
.abr-step-btn:disabled { cursor: default; opacity: 1; color: var(--text-muted, #695B66); }
.abr-step-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-alt, #EFE8ED); font-weight: 700; }
.abr-steps .is-current .abr-step-btn { border-color: var(--brand, #9A1584); background: var(--brand-soft, #FBE9F5); font-weight: 700; color: var(--text, #1F1520); }
.abr-steps .is-current .abr-step-num { background: var(--brand-strong, #6F0E5F); color: #FFFFFF; }
.abr-steps .is-done .abr-step-num { background: var(--success, #1B7238); color: #FFFFFF; }
.abr-step-btn:focus-visible { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 2px; }
.abr-card { padding: 18px; }
.abr-card h2 { margin: 0 0 6px; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 22px; }
.abr-card h2:focus { outline: none; }
.abr-card h2:focus-visible { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 4px; }
.abr-lead { margin: 0 0 14px; color: var(--text-muted, #695B66); }
.abr-status { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 10px; border: 1px solid var(--border, #E2D8DF); background: var(--surface-hover, #FAF7F9); margin-bottom: 14px; }
.abr-status-ico { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-alt, #EFE8ED); font-size: 18px; }
.abr-status.is-ok { border-color: var(--success-line, #BFDFC9); background: var(--success-soft, #E7F4EB); }
.abr-status.is-ok .abr-status-ico { background: var(--success, #1B7238); color: #FFFFFF; }
.abr-status.is-warn { border-color: var(--warning-line, #EFCB8F); background: var(--warning-soft, #FFF3DA); }
.abr-status.is-bad { border-color: var(--danger-line, #F1C0B2); background: var(--danger-soft, #FDE9E2); }
.abr-status p { margin: 0; }
.abr-status b { display: block; }
.abr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.abr-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.abr-nav .spacer { flex: 1 1 auto; }
.abr-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft, #EEF9D9); font-size: 14px; }
.abr-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border, #E2D8DF); }
.abr-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.abr-section h3 { margin: 0 0 8px; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 17px; }
.abr-done-list { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.abr-done-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-hover, #FAF7F9); border: 1px solid var(--border, #E2D8DF); }
.abr-key { display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--border-strong, #8C7D88); border-radius: 10px; }
.abr-later { padding: 12px; border-radius: 10px; background: var(--warning-soft, #FFF3DA); border: 1px solid var(--warning-line, #EFCB8F); }
.abr-later p { margin: 0 0 8px; }

/* ---------------------------------------------------------------------
   3. Centro de vendedores (/centro)
   --------------------------------------------------------------------- */
body[data-page="centro"] { background: var(--centro-surface, #F6E8F3); }
.ctr-main { padding-top: 12px; padding-bottom: 40px; }
.ctr-main .panel-root { padding-top: 0; }
.ctr-layout { display: block; }
.ctr-content { min-width: 0; }
.ctr-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.ctr-titles { min-width: 0; }
.ctr-eyebrow { margin: 0; font-size: 13px; color: var(--text-muted, #695B66); overflow-wrap: anywhere; }
.ctr-eyebrow-local { font-weight: 700; color: var(--text, #1F1520); }
.ctr-title { margin: 0; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(22px, 6vw, 28px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.ctr-title:focus { outline: none; }
.ctr-title:focus-visible { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 3px; border-radius: 4px; }
.ctr-back { display: none; }
.ctr-menu-btn { min-height: 44px; }
.ctr-lead { margin: 4px 0 0; color: var(--text-muted, #695B66); }
.ctr-narrow { max-width: 760px; }
.ctr-main #panel-head { margin-bottom: 12px; }
.ctr-main .panel-alerts:empty { display: none; }

/* Barra lateral: cajón por debajo de 1024 px */
.ctr-side { position: fixed; z-index: 900; top: 0; bottom: 0; left: 0; width: min(310px, 86vw); padding: 16px 12px 24px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface, #FFFFFF); box-shadow: 0 0 0 1px var(--border, #E2D8DF), 0 12px 40px rgba(31, 21, 32, .25); transform: translateX(-105%); visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s; }
.ctr-side.is-open { transform: translateX(0); visibility: visible; transition: transform .2s ease; }
.ctr-scrim { position: fixed; inset: 0; z-index: 899; background: var(--scrim, rgba(23, 17, 22, .62)); }
.ctr-scrim[hidden] { display: none; }
.ctr-side-list { margin: 0; padding: 0; list-style: none; }
.ctr-side-group { margin-top: 14px; }
.ctr-side-title { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; padding: 0 10px; font-family: var(--font-ui, system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #695B66); }
.ctr-side-group.is-active .ctr-side-title { color: var(--brand-strong, #6F0E5F); }
.ctr-side-count { letter-spacing: 0; }
.ctr-side-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; border-left: 3px solid transparent; color: var(--text, #1F1520); text-decoration: none; font-size: 14.5px; line-height: 1.25; }
.ctr-side-link:hover { background: var(--surface-hover, #FAF7F9); color: var(--text, #1F1520); text-decoration: none; }
.ctr-side-link[aria-current="page"] { background: var(--brand-soft, #FBE9F5); border-left-color: var(--brand, #9A1584); color: var(--brand-strong, #6F0E5F); font-weight: 700; }
.ctr-side-link:focus-visible { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 1px; }
.ctr-side-ico { flex: 0 0 auto; width: 22px; text-align: center; }
.ctr-side-text { flex: 1 1 auto; min-width: 0; }
.ctr-side-extra .panel-tab-count, .ctr-side-extra:not(:empty) { flex: 0 0 auto; }
.ctr-side-out { color: var(--brand-strong, #6F0E5F); }

/* En el celular, la barra inferior de la cáscara (F1) reemplaza a la barra lateral (§5.13). */
@media (max-width: 767.98px) {
  body.has-bottom-bar .ctr-menu-btn { display: none; }
}

/* ≥ 1024 px: barra lateral fija al costado */
@media (min-width: 1024px) {
  .ctr-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; }
  .ctr-side { position: sticky; z-index: auto; top: 12px; bottom: auto; width: auto; max-height: calc(100vh - 24px); padding: 12px 8px; transform: none; visibility: visible;
    border-radius: 12px; box-shadow: 0 0 0 1px var(--border, #E2D8DF); transition: none; }
  .ctr-menu-btn { display: none; }
  .ctr-scrim { display: none !important; }
}

/* «Salir en vivo»: pantalla completa, sin barra lateral (§5.13) */
.ctr-layout.is-full { display: block; }
.ctr-layout.is-full .ctr-side { display: none; }
.ctr-layout.is-full .ctr-menu-btn { display: none; }
.ctr-layout.is-full .ctr-back { display: inline-flex; min-height: 44px; }

/* Entrada sin sesión */
.ctr-gate { display: grid; gap: 16px; padding-top: 8px; }
.ctr-gate-main { display: grid; gap: 14px; padding: 20px; }
.ctr-gate-icon { font-size: 40px; line-height: 1; }
.ctr-gate-title { margin: 0; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(24px, 6.4vw, 32px); line-height: 1.12; }
.ctr-gate-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ctr-gate-cta .btn { flex: 1 1 auto; }
.ctr-gate-perks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ctr-gate-perks li { display: flex; gap: 10px; align-items: flex-start; }
.ctr-gate-legacy { margin: 0; }
@media (min-width: 900px) {
  .ctr-gate { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .ctr-gate-cta .btn { flex: 0 0 auto; }
}

/* Salir en vivo: chequeo, título, botón */
.ctr-checklist[hidden] { display: none; }
.ctr-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ctr-ck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #E2D8DF); background: var(--surface, #FFFFFF); }
.ctr-ck:focus { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 2px; }
.ctr-ck > .btn { grid-column: 2; justify-self: start; }
.ctr-ck-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; }
.ctr-ck.is-ok .ctr-ck-ico { background: var(--success, #1B7238); color: #FFFFFF; }
.ctr-ck.is-bad { border-color: var(--warning-line, #EFCB8F); background: var(--warning-soft, #FFF3DA); }
.ctr-ck.is-bad .ctr-ck-ico { background: var(--warning, #8A4300); color: #FFFFFF; }
.ctr-ck-body { display: grid; gap: 2px; min-width: 0; }
.ctr-ck-detail { display: block; }
.ctr-ck-err { display: block; margin-top: 2px; color: var(--danger, #921B1B); font-size: 13.5px; font-weight: 600; }
.ctr-notready { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.ctr-title-meta { gap: 8px; align-items: flex-start; flex-wrap: nowrap; }
.ctr-title-count { flex: 0 0 auto; color: var(--text-muted, #695B66); font-variant-numeric: tabular-nums; }
.ctr-title-count.is-ok { color: var(--success, #1B7238); }
.ctr-live-cat { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ctr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--live, #D42A1C); box-shadow: 0 0 0 2px #FFFFFF; }
.panel-golive-btn .ctr-dot { margin-right: 4px; }
.ctr-golive-help { margin: 0; }
.ctr-golive-help b { display: block; margin-bottom: 2px; }
.ctr-blockers { margin: 2px 0 0; padding-left: 18px; color: var(--text, #1F1520); }
.ctr-chat-only .panel-chat { max-width: 760px; }

/* Productos listos */
.ctr-ready .panel-alert { margin: 0; }
.ctr-prob-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ctr-prob { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--warning-soft, #FFF3DA); border: 1px solid var(--warning-line, #EFCB8F); color: var(--warning, #8A4300); font-size: 12px; font-weight: 700; }

/* Pedidos: cupón */
.ctr-int-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.ctr-coupon-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--brand, #9A1584); background: var(--brand-soft, #FBE9F5); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ctr-int-coupon-cond { flex-basis: 100%; }

/* Datos del local: casa o calle */
.ctr-sellertype { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.ctr-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ctr-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--border-strong, #8C7D88); border-radius: 8px; background: var(--surface, #FFFFFF); cursor: pointer; font-size: 14px; }
.ctr-radio input { width: 18px; height: 18px; accent-color: var(--brand, #9A1584); }
.ctr-radio:has(input:checked) { border-color: var(--brand, #9A1584); background: var(--brand-soft, #FBE9F5); font-weight: 600; }
.ctr-radio:focus-within, .ctr-radio-card:focus-within { outline: 2px solid var(--brand-strong, #6F0E5F); outline-offset: 2px; }
.ctr-street { margin-top: 10px; display: grid; gap: 8px; }
.ctr-street[hidden], .ctr-sellertype-note[hidden] { display: none; }
.ctr-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14px; }
.ctr-switch input { width: 40px; height: 22px; accent-color: var(--brand, #9A1584); }
.ctr-sellertype-note { margin: 8px 0 0; }

/* Inicio */
.ctr-home { display: grid; gap: 14px; }
.ctr-todo { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ctr-todo-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #E2D8DF); background: var(--surface, #FFFFFF); }
.ctr-todo-item p { margin: 0; }
.ctr-todo-item > .btn, .ctr-todo-item > a.btn { grid-column: 2; justify-self: start; }
.ctr-todo-ico { font-size: 20px; line-height: 1.3; }
.ctr-todo-item.is-warn { border-color: var(--warning-line, #EFCB8F); background: var(--warning-soft, #FFF3DA); }
.ctr-todo-item.is-danger { border-color: var(--danger-line, #F1C0B2); background: var(--danger-soft, #FDE9E2); }
.ctr-todo-item.is-info { border-color: var(--info-line, #D3DAE2); background: var(--info-soft, #EEF1F4); }
.ctr-allgood { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--success-soft, #E7F4EB); color: var(--success, #1B7238); font-weight: 700; }
.ctr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ctr-stat .stat-value { overflow-wrap: anywhere; }
.ctr-stat-sub { margin-top: 2px; }
.ctr-steps-meter { margin: 2px 0 6px; }
.ctr-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ctr-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 4px 8px; border-radius: 8px; }
.ctr-step-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong, #8C7D88); font-weight: 800; font-size: 13px; }
.ctr-step.is-done .ctr-step-ico { border-color: var(--success, #1B7238); background: var(--success, #1B7238); color: #FFFFFF; }
.ctr-step.is-done .ctr-step-text { color: var(--text-muted, #695B66); text-decoration: line-through; text-decoration-color: var(--border-strong, #8C7D88); }
.ctr-step-text { flex: 1 1 auto; min-width: 0; }
.ctr-two-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ctr-mini-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ctr-mini-list li { padding: 6px 0; border-bottom: 1px solid var(--border, #E2D8DF); overflow-wrap: anywhere; }
.ctr-mini-list li:last-child { border-bottom: 0; }
.ctr-medals { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ctr-medals li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ctr-progress { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ctr-progress-item .row { gap: 6px; align-items: center; }
.ctr-progress-note { margin: 0; color: var(--warning, #8A4300); }
@media (min-width: 768px) {
  .ctr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ctr-two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Guía y soporte */
.ctr-help { display: grid; gap: 14px; }
.ctr-howto { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ctr-faq { display: grid; gap: 8px; }

/* Estadísticas */
.ctr-hints { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ctr-hints li { padding: 8px 12px; border-radius: 8px; background: var(--accent-soft, #EEF9D9); font-size: 14px; }
.ctr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border, #E2D8DF); border-radius: 10px; }
.ctr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctr-table th, .ctr-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border, #E2D8DF); white-space: nowrap; }
.ctr-table thead th { background: var(--surface-alt, #EFE8ED); font-size: 13px; }
.ctr-table tbody th { font-weight: 600; white-space: normal; min-width: 140px; }
.ctr-table tr:last-child th, .ctr-table tr:last-child td { border-bottom: 0; }

/* Invitá a tus clientes */
.ctr-inv-card h2 { line-height: 1.2; }
.ctr-big { font-size: 1.6em; font-variant-numeric: tabular-nums; color: var(--brand-strong, #6F0E5F); }
.ctr-inv-caps { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.ctr-inv-next { padding: 10px 12px; border-radius: 10px; background: var(--surface-hover, #FAF7F9); border: 1px solid var(--border, #E2D8DF); }
.ctr-qr-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.ctr-qr { margin: 0; width: min(100%, 240px); padding: 8px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--border, #E2D8DF); }
.ctr-qr svg { display: block; width: 100%; height: auto; }
.ctr-rules { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
@media (min-width: 600px) {
  .ctr-qr-wrap { grid-template-columns: 240px minmax(0, 1fr); }
}

/* Cupones */
.ctr-cp-type { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.ctr-cp-kind { margin: 0; padding: 0; border: 0; min-width: 0; }
.ctr-radio-card { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--border-strong, #8C7D88); border-radius: 10px; background: var(--surface, #FFFFFF); cursor: pointer; }
.ctr-radio-card input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand, #9A1584); }
.ctr-radio-card:has(input:checked) { border-color: var(--brand, #9A1584); background: var(--brand-soft, #FBE9F5); }
.ctr-coupons { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ctr-coupon-item { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--border, #E2D8DF); background: var(--surface, #FFFFFF); }
.ctr-coupon { display: grid; gap: 4px; }
.ctr-coupon-label { margin: 0; font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 20px; font-weight: 800; }
.ctr-coupon-actions { flex-wrap: wrap; gap: 6px; }
.ctr-reds { margin-top: 4px; }

/* Datos del vendedor y cobro */
.ctr-vc .vl-seller-card { padding: 14px; border-radius: 12px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); }
.vc-alias-form { margin-top: 6px; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .ven-spinner { animation: none; }
  .ctr-side, .ctr-side.is-open, .abr-bar > span { transition: none; }
}

/* ---------------------------------------------------------------------
   4. Bloques que vienen del panel v3 (.panel-*): Centro y alta de local
   Se movieron tal cual del <style> de panel.html v3 (copia §7.1); los usan las funciones de dibujo que vienen de panel.js.
   --------------------------------------------------------------------- */
/* ===== Centro de vendedores: estilos de los bloques que vienen del panel v3 (prefijo .panel-) · paleta «Cartulina» =====
   Los estilos nuevos de v4 (barra lateral, secciones, prefijo .ctr-) están en /css/vender.css.
   Alias locales de los tokens de styles.css, con el valor del contrato como respaldo. Van en el body
   para que también los hereden los modales (VL.modal los agrega al final del body). */
body[data-zone="centro"], body[data-zone="vender"] {
  --pn-brand: var(--brand, #9A1584);
  --pn-brand-strong: var(--brand-strong, #6F0E5F);
  --pn-brand-soft: var(--brand-soft, #FBE9F5);
  --pn-accent: var(--accent, #A8E43C);
  --pn-accent-soft: var(--accent-soft, #EEF9D9);
  --pn-on-accent: var(--on-accent, #1F1520);
  --pn-accent-edge: var(--accent-edge, #4D7C0F);
  --pn-live: var(--live, #D42A1C);
  --pn-success: var(--success, #1B7238);
  --pn-success-soft: var(--success-soft, #E7F4EB);
  --pn-verified: var(--verified, #1659B5);
  --pn-verified-soft: var(--verified-soft, #E9F0FB);
  --pn-warning: var(--warning, #8A4300);
  --pn-warning-soft: var(--warning-soft, #FFF3DA);
  --pn-danger: var(--danger, #921B1B);
  --pn-danger-soft: var(--danger-soft, #FDE9E2);
  --pn-info: var(--info, #455D76);
  --pn-info-soft: var(--info-soft, #EEF1F4);
  --pn-surface: var(--surface, #FFFFFF);
  --pn-surface-alt: var(--surface-alt, #EFE8ED);
  --pn-border: var(--border, #E2D8DF);
  --pn-border-strong: var(--border-strong, #8C7D88);
  --pn-text: var(--text, #1F1520);
  --pn-muted: var(--text-muted, #695B66);
  --pn-display: var(--font-display, "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --pn-radius: var(--vl-radius, 8px);
  --pn-shadow-lg: var(--vl-shadow-lg, 0 8px 24px rgba(31, 21, 32, .12));
}

.panel-root { padding-top: 20px; padding-bottom: 40px; min-height: 60vh; }
.panel-root *, .panel-root *::before, .panel-root *::after { box-sizing: border-box; }
.panel-root h1, .panel-root h2, .panel-root h3 { margin: 0; line-height: 1.25; }
.panel-root code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .92em; background: var(--pn-surface-alt); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.panel-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.panel-root [hidden], .modal [hidden] { display: none !important; }

/* Foco visible (anillo 2 px --brand-strong con separación blanca) */
.panel-root :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.modal :is(.panel-radio-card, .panel-pack, .panel-testcard) input:focus-visible { outline: 2px solid var(--pn-brand-strong); outline-offset: 2px; }
.modal :is(.panel-radio-card, .panel-pack, .panel-testcard):focus-within,
.panel-root :is(.panel-radio-card, .panel-pack, .panel-testcard):focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pn-brand-strong); }

/* Carga */
.panel-loading { padding: 72px 16px; text-align: center; color: var(--pn-muted); }
.panel-spinner { width: 30px; height: 30px; margin: 0 auto 14px; border: 3px solid var(--pn-border); border-top-color: var(--pn-brand); border-radius: 50%; animation: panel-spin .8s linear infinite; }
@keyframes panel-spin { to { transform: rotate(360deg); } }

/* Tipografía y utilidades */
.panel-title { font-family: var(--pn-display); font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.panel-subtitle { margin: 2px 0 0; }
.panel-h2 { font-family: var(--pn-display); font-size: 19px; font-weight: 700; }
.panel-h3 { font-family: var(--pn-display); font-size: 16px; font-weight: 700; }
.panel-lead { margin: 4px 0 0; color: var(--pn-muted); }
.panel-center { justify-content: center; }
.panel-center-text { text-align: center; margin: 0; }
.panel-span-2 { grid-column: 1 / -1; }
.panel-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.panel-req { color: var(--pn-danger); }
.panel-error { color: var(--pn-danger); font-size: 13px; margin-top: 4px; }
.panel-error:empty { display: none; }
.panel-root [aria-invalid="true"], .modal [aria-invalid="true"] { border-color: var(--pn-danger) !important; box-shadow: 0 0 0 1px var(--pn-danger); }
.panel-mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.panel-count { font-variant-numeric: tabular-nums; }
/* Precios: siempre en la tipografía de display con cifras tabulares, en tinta. */
.panel-price { font-family: var(--pn-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pn-text); white-space: nowrap; }

/* Avisos */
.panel-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-radius: var(--pn-radius); border: 1px solid transparent; font-size: 14px; line-height: 1.45; }
.panel-alert > p { margin: 0; flex: 1 1 240px; min-width: 0; }
.panel-alert-info { background: var(--pn-info-soft); border-color: #D3DAE2; color: var(--pn-info); }
.panel-alert-info b { color: var(--pn-text); }
.panel-alert-warn { background: var(--pn-warning-soft); border-color: #F0D49A; color: var(--pn-warning); }
.panel-alert-danger { background: var(--pn-danger-soft); border-color: #F1BFB3; color: var(--pn-danger); }
.panel-alert-ok { background: var(--pn-success-soft); border-color: #BCDDC6; color: var(--pn-success); }
.panel-alerts:empty { display: none; }
.panel-alerts { display: grid; gap: 8px; margin-top: 12px; }
.panel-badge-warn { background: var(--pn-warning-soft); color: var(--pn-warning); box-shadow: inset 0 0 0 1px #F0D49A; }
.panel-badge-danger { background: #fff; color: var(--pn-danger); box-shadow: inset 0 0 0 1.5px var(--pn-danger); }
.panel-badge-trial { background: var(--pn-brand-soft); color: var(--pn-brand-strong); box-shadow: inset 0 0 0 1px var(--pn-brand); }
.panel-badge-founder { background: #fff; color: var(--pn-brand-strong); box-shadow: inset 0 0 0 1.5px var(--pn-brand-strong); }
.panel-badge-featured { background: #fff; color: var(--pn-muted); box-shadow: inset 0 0 0 1px var(--pn-border-strong); }
.panel-free { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--pn-radius); background: var(--pn-success-soft); border: 1px solid #BCDDC6; color: var(--pn-success); font-size: 14px; line-height: 1.45; }
.panel-free > span:first-child { font-size: 20px; line-height: 1; }

/* Elegido (chips, tarjetas): --brand-soft + texto --brand-strong + borde 1,5 px --brand + ✓ */
.btn.panel-chosen, .btn.panel-chosen:hover { background: var(--pn-brand-soft); color: var(--pn-brand-strong); box-shadow: inset 0 0 0 1.5px var(--pn-brand); border-color: transparent; }

/* ===== Asistente ===== */
.panel-wizard { max-width: 1040px; margin: 0 auto; }
.panel-wizard-top { margin-bottom: 10px; }
.panel-wizard-head { margin-bottom: 16px; }
.panel-wizard-head h1 { font-family: var(--pn-display); font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.panel-progress { height: 8px; background: #fff; border-radius: 99px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--pn-border); }
.panel-progress > span { display: block; height: 100%; background: var(--pn-brand); border-radius: 99px; transition: width .35s ease; }
.panel-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 10px 0 16px; }
.panel-step-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 0; background: transparent; color: var(--pn-muted); font: inherit; font-size: 13px; line-height: 1.2; text-align: center; cursor: pointer; border-radius: 6px; }
.panel-step-btn:disabled { cursor: default; opacity: .75; }
.panel-step-btn:not(:disabled):hover { background: var(--pn-brand-soft); }
.panel-step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #fff; border: 2px solid var(--pn-border); color: var(--pn-muted); }
.panel-step.done .panel-step-num { background: var(--pn-success); border-color: var(--pn-success); color: #fff; }
.panel-step.current .panel-step-num { background: var(--pn-brand); border-color: var(--pn-brand); color: #fff; }
.panel-step.current .panel-step-btn { color: var(--pn-text); font-weight: 600; }
.panel-wizard-body { min-height: 280px; }
.panel-wizard-body h2 { font-family: var(--pn-display); font-size: 21px; margin-bottom: 4px; }
.panel-wizard-nav { margin-top: 16px; }
.panel-wizard-nav .btn { min-width: 132px; }
.panel-step-heading:focus { outline: none; }

.panel-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.panel-plan-grid .plan-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0; }
.panel-plan-grid .plan-card.selected { border-color: var(--pn-brand); box-shadow: 0 0 0 1.5px var(--pn-brand), var(--pn-shadow-lg); }
.panel-plan-grid .plan-card .plan-card-features { flex: 1; }
.panel-plan-grid .plan-card-price { font-family: var(--pn-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pn-text); }
.panel-plan-name { font-family: var(--pn-display); font-size: 19px; font-weight: 800; }
.panel-plan-per { font-size: 14px; color: var(--pn-muted); font-weight: 400; font-family: var(--font-ui, inherit); }
.panel-plan-hint { margin: 0; color: var(--pn-muted); font-size: 13px; line-height: 1.4; }
.panel-plan-quota { font-size: 14px; padding: 6px 10px; border-radius: 6px; background: var(--pn-brand-soft); color: var(--pn-brand-strong); }
.panel-plan-quota b { font-variant-numeric: tabular-nums; }
.panel-period { margin: 14px 0; }
.panel-period .segmented { max-width: 100%; }
.panel-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; color: var(--pn-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.panel-or::before, .panel-or::after { content: ""; flex: 1; height: 1px; background: var(--pn-border); }
.panel-trial { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; cursor: pointer; }
.panel-trial.selected { border-color: var(--pn-brand); box-shadow: 0 0 0 1.5px var(--pn-brand); background: var(--pn-brand-soft); }
.panel-trial.is-used { cursor: default; background: var(--pn-surface-alt); }
.panel-trial-main { flex: 1 1 320px; min-width: 0; }
.panel-prepay { display: grid; gap: 6px; margin-top: 14px; }
.panel-prepay .segmented { max-width: 100%; flex-wrap: wrap; }
.panel-seg-off { font-size: 12px; font-weight: 700; }
.panel-seg-sub { font-size: 12px; font-weight: 400; }
.panel-offers { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.panel-offers li { padding: 9px 12px; border-radius: var(--pn-radius); background: var(--pn-surface-alt); font-size: 14px; line-height: 1.45; }
.panel-he-help { margin: 12px 0 0; line-height: 1.5; }

.panel-two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.panel-sticky { position: sticky; top: 16px; }
.panel-preview { pointer-events: none; user-select: none; max-width: 340px; }
.panel-preview-label { font-size: 13px; color: var(--pn-muted); margin: 0 0 8px; }
.panel-preview-socials { margin-top: 12px; }
.panel-preview-pay { margin-top: 10px; font-size: 14px; background: #fff; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); padding: 10px 12px; overflow-wrap: anywhere; }

.panel-color-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.panel-color { width: 56px; height: 42px; padding: 3px; border: 1px solid var(--pn-border-strong); border-radius: 8px; background: #fff; cursor: pointer; }
.panel-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--pn-border-strong); cursor: pointer; padding: 0; }
.panel-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pn-text); }

.panel-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.panel-emoji { height: 42px; font-size: 22px; line-height: 1; border: 1px solid var(--pn-border); background: #fff; border-radius: 8px; cursor: pointer; padding: 0; }
.panel-emoji:hover { border-color: var(--pn-brand); }
.panel-emoji[aria-pressed="true"] { border-color: var(--pn-brand); background: var(--pn-brand-soft); box-shadow: inset 0 0 0 2px var(--pn-brand); }
.panel-emoji-custom { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-emoji-custom .input { width: 84px; text-align: center; font-size: 18px; }

.panel-summary { width: 100%; border-collapse: collapse; font-size: 15px; }
.panel-summary th, .panel-summary td { padding: 10px 0; border-bottom: 1px solid var(--pn-border); text-align: left; vertical-align: top; }
.panel-summary td { text-align: right; padding-left: 12px; }
.panel-summary-local { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; min-width: 0; }
.panel-summary-local > div { min-width: 0; }
.panel-pay-box { display: grid; gap: 12px; margin-top: 16px; }
.panel-edit-link { font-size: 13px; }

/* Medios de pago simulados y tarjetas de prueba */
.panel-pay { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.panel-pay > legend { padding: 0; display: flex; align-items: center; gap: 6px; }
.panel-radio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.panel-radio-card { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--pn-border-strong); border-radius: var(--pn-radius); background: #fff; cursor: pointer; min-width: 0; }
.panel-radio-card input { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--pn-brand); }
.panel-radio-card:has(input:checked) { border-color: var(--pn-brand); background: var(--pn-brand-soft); box-shadow: inset 0 0 0 .5px var(--pn-brand); }
.panel-radio-card.is-disabled { cursor: not-allowed; background: var(--pn-surface-alt); border-color: var(--pn-border); }
.panel-radio-card.is-disabled .panel-radio-title { color: var(--pn-muted); }
.panel-radio-body { display: grid; gap: 2px; min-width: 0; }
.panel-radio-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.panel-radio-note { font-size: 12px; color: var(--pn-muted); line-height: 1.35; overflow-wrap: anywhere; }
.panel-testcards { border: 1px dashed var(--pn-border-strong); border-radius: var(--pn-radius); margin: 0; padding: 10px 12px; min-width: 0; display: grid; gap: 8px; background: #fff; }
.panel-testcards legend { padding: 0 4px; }
.panel-testcard-row { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-testcard { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--pn-border-strong); border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; }
.panel-testcard input { margin: 0; accent-color: var(--pn-brand); }
.panel-testcard:has(input:checked) { border-color: var(--pn-brand); background: var(--pn-brand-soft); color: var(--pn-brand-strong); font-weight: 600; }
.panel-testcard-note { margin: 0; }

/* Presupuesto (Quote) y comprobante simulado */
.panel-quote { margin: 0; display: grid; gap: 0; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; }
.panel-quote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--pn-border); }
.panel-quote-row:last-child { border-bottom: 0; }
.panel-quote-row dt { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.panel-quote-row dd { margin: 0; white-space: nowrap; }
.panel-quote-disc dt, .panel-quote-disc dd .panel-price { color: var(--pn-success); }
.panel-quote-total { background: var(--pn-surface-alt); border-radius: 0 0 var(--pn-radius) var(--pn-radius); }
.panel-quote-total dt { font-weight: 700; font-size: 15px; }
.panel-quote-total dd .panel-price { font-size: 22px; }
.panel-quote-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.panel-quote-loading { height: 92px; border-radius: var(--pn-radius); }
.panel-receipt dl { margin: 0; display: grid; gap: 0; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); }
.panel-receipt dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--pn-border); }
.panel-receipt dl > div:last-child { border-bottom: 0; }
.panel-receipt dt { color: var(--pn-muted); font-size: 14px; }
.panel-receipt dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.panel-receipt-note { margin: 8px 0 0; }

/* ===== Clave / problemas ===== */
.panel-narrow { max-width: 560px; margin: 0 auto; }
.panel-help { background: var(--pn-warning-soft); border: 1px dashed #E2B866; border-radius: var(--pn-radius); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--pn-text); }
.panel-input-row { display: flex; gap: 8px; align-items: stretch; }
.panel-input-row .input { flex: 1; min-width: 0; }
.panel-problem { text-align: center; padding: 32px 20px; display: grid; gap: 12px; justify-items: center; }
.panel-problem p { max-width: 560px; margin: 0; }
.panel-problem-emoji { font-size: 48px; line-height: 1; }

/* ===== Dashboard ===== */
.panel-topbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.panel-topbar > div:first-child { min-width: 0; }
.panel-local-select { display: grid; gap: 2px; min-width: 200px; max-width: 100%; }
.panel-topbar-actions { justify-content: flex-end; }
.panel-head-main { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.panel-head-info { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.panel-head-name { font-family: var(--pn-display); font-size: 23px; font-weight: 800; overflow-wrap: anywhere; }
.panel-head-meta { font-size: 13px; color: var(--pn-muted); overflow-wrap: anywhere; }
.panel-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-pane:focus { outline: none; }

/* En vivo */
.panel-live-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel-live-main { min-width: 0; }
.panel-preview-video video { background: #000; }
.panel-video-empty { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px; }
.panel-video-empty b { font-size: 18px; }
.panel-video-empty span:first-child { font-size: 40px; line-height: 1; }
.panel-cam-actions .btn { flex: 0 1 auto; }
.panel-golive { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 4px; }
.panel-golive-btn { min-width: 230px; font-size: 18px; }
.panel-clock { display: grid; gap: 2px; }
.panel-clock .kpi-live { font-variant-numeric: tabular-nums; font-family: var(--pn-display); }
.panel-clock.idle .kpi-live { color: var(--pn-muted); }
.panel-viewer-names { margin: 0; overflow-wrap: anywhere; }
.panel-stat-sub { font-size: 12px; color: var(--pn-muted); margin-top: 2px; min-height: 1em; }
.panel-quality { display: grid; gap: 6px; min-width: 0; }
.panel-quality-seg { max-width: 100%; flex-wrap: wrap; }
.panel-quality-seg button[disabled] { opacity: .45; cursor: not-allowed; }
.panel-quality-help { margin: 0; line-height: 1.45; }
.panel-quota-facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--pn-muted); }
.panel-quota-alert .btn { flex: 0 0 auto; }
/* Barra de cupo (respaldo de VL.quotaBar) */
.panel-qbar { display: grid; gap: 6px; }
.panel-qbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.panel-qbar-track { height: 10px; border-radius: 99px; background: var(--pn-surface-alt); overflow: hidden; box-shadow: inset 0 0 0 1px var(--pn-border); }
.panel-qbar-track > span { display: block; height: 100%; border-radius: 99px; background: var(--pn-success); transition: width .4s ease; }
.panel-qbar-warn .panel-qbar-track > span { background: var(--pn-warning); }
.panel-qbar-info .panel-qbar-track > span { background: var(--pn-info); }
.panel-qbar-danger .panel-qbar-track > span { background: var(--pn-danger); }
.panel-qbar-text { margin: 0; color: var(--pn-muted); }

.panel-interest-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.panel-interest { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; padding: 10px 6px; border-bottom: 1px solid var(--pn-border); border-radius: 6px; animation: panel-flash 1.6s ease-out; }
.panel-interest:last-child { border-bottom: 0; }
.panel-interest-emoji { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; font-size: 20px; border-radius: 8px; background: var(--pn-accent-soft); }
.panel-interest-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.panel-interest-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.panel-interest-actions { flex: 0 1 auto; align-self: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.panel-interest-actions .btn { white-space: nowrap; }
.panel-interest-empty { padding: 12px 0; }
.panel-variant { display: inline-flex; align-items: center; padding: 1px 8px; margin-left: 4px; border-radius: 999px; background: var(--pn-brand-soft); color: var(--pn-brand-strong); font-weight: 700; font-size: 12px; vertical-align: 1px; }
@keyframes panel-flash { from { background: var(--pn-accent-soft); } to { background: transparent; } }
.panel-chat { --chat-h: 640px; min-width: 0; }
.panel-chat .chat-header { display: flex; align-items: center; gap: 8px; }
.panel-chat .chat-pinned { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-pinned-text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.panel-chat .chat-msg-actions .badge { align-self: center; }
/* Acciones de moderación en el flujo del mensaje: siempre visibles (atenuadas en escritorio), nunca tapan el texto. */
.panel-chat .chat-msg-actions { position: static; display: inline-flex; vertical-align: middle; margin: 2px 0 0 6px; }
@media (hover: hover) {
  .panel-chat .chat-msg-actions { opacity: .65; pointer-events: auto; }
  .panel-chat .chat-msg:hover .chat-msg-actions,
  .panel-chat .chat-msg:focus-within .chat-msg-actions { opacity: 1; }
}
@media (hover: none) {
  .panel-chat .chat-msg-actions { display: flex; margin: 4px 0 0; }
  .panel-chat .chat-msg-actions button { min-height: 32px; padding: 4px 10px; }
}
.panel-chat .chat-msg.role-asistente { background: var(--pn-info-soft); }
.panel-auto-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: #fff; color: var(--pn-info); box-shadow: inset 0 0 0 1px #C9D2DC; font-size: 12px; font-weight: 700; }
.panel-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pn-muted); white-space: nowrap; }
.panel-conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B9AEB6; }
.panel-conn.on::before { background: var(--pn-success); }
.panel-conn.retry::before, .panel-conn.connecting::before { background: #C77700; }
.panel-conn.failed::before { background: var(--pn-danger); }
.panel-chat-form-note { font-size: 12px; color: var(--pn-muted); padding: 0 12px 10px; }

/* Producto fijado */
.panel-pinprod-now { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: var(--pn-radius); background: var(--pn-brand-soft); border: 1px solid #EBC3DF; }
.panel-pinprod-info { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.panel-variant-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.panel-variant-chips .panel-variant { margin-left: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--pn-brand); }
.panel-variant-presets { gap: 6px; }

/* Agenda */
.panel-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.panel-agenda-item { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; }
.panel-agenda-when { display: grid; line-height: 1.3; }
.panel-agenda-when b { font-family: var(--pn-display); }
.panel-agenda-when span { font-size: 13px; color: var(--pn-muted); font-variant-numeric: tabular-nums; }
.panel-agenda-title { min-width: 0; overflow-wrap: anywhere; }
.panel-agenda-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.panel-agenda-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.panel-agenda-hint:empty { display: none; }

/* Productos */
.panel-quota { display: grid; gap: 6px; }
.panel-meter { height: 8px; background: var(--pn-surface-alt); border-radius: 99px; overflow: hidden; }
.panel-meter > span { display: block; height: 100%; background: var(--pn-success); border-radius: 99px; transition: width .3s ease; }
.panel-meter.warn > span { background: var(--pn-warning); }
.panel-meter.full > span { background: var(--pn-danger); }
.panel-products { list-style: none; margin: 0; padding: 0; }
.panel-product { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--pn-border); }
.panel-product:last-child { border-bottom: 0; }
.panel-product-emoji { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; font-size: 28px; border-radius: 10px; background: linear-gradient(135deg, #FFFFFF, var(--pn-brand-soft)); box-shadow: inset 0 0 0 1px var(--pn-border); }
.panel-product-info { flex: 1 1 180px; min-width: 0; }
.panel-product-name { font-weight: 600; overflow-wrap: anywhere; }
.panel-product-desc { font-size: 13px; color: var(--pn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-product-meta { display: grid; justify-items: end; gap: 2px; min-width: 104px; }
.panel-product-price { font-size: 18px; font-family: var(--pn-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-product-stock { font-size: 13px; color: var(--pn-success); }
.panel-product-stock.out { color: var(--pn-muted); }
.panel-product-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-product-controls .checkbox { font-size: 14px; white-space: nowrap; }

/* Mi local */
.panel-save-bar { position: sticky; bottom: 8px; z-index: 5; box-shadow: var(--pn-shadow-lg); }

/* Plan y saldo */
.panel-rent-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.panel-rent-side { display: grid; gap: 16px; min-width: 0; }
.panel-rent-main { min-width: 0; }
.panel-rent-until { font-size: 15px; margin: 0; }
.panel-rent-facts { margin: 0; padding-left: 18px; font-size: 14px; color: var(--pn-muted); display: grid; gap: 4px; }
.panel-key { flex: 1 1 220px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 14px; background: var(--pn-surface-alt); border: 1px dashed var(--pn-border-strong); border-radius: 6px; padding: 9px 10px; overflow-wrap: anywhere; word-break: break-all; }
.panel-key-input { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 14px; }
.panel-rent-summary { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--pn-radius); background: var(--pn-surface-alt); border: 1px solid var(--pn-border); font-size: 14px; }
.panel-balance { font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
.panel-cap { display: grid; gap: 6px; }
.panel-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.panel-packs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.panel-packs > legend { padding: 0; }
.panel-pack { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--pn-border-strong); border-radius: var(--pn-radius); background: #fff; cursor: pointer; min-width: 0; }
.panel-pack input { margin: 4px 0 0; accent-color: var(--pn-brand); }
.panel-pack:has(input:checked) { border-color: var(--pn-brand); background: var(--pn-brand-soft); }
.panel-pack-body { display: grid; gap: 2px; min-width: 0; }
.panel-pack-amt { font-size: 17px; }
.panel-pack-bonus { font-size: 12px; font-weight: 700; color: var(--pn-success); }
.panel-pack-bonus.is-none { color: var(--pn-muted); font-weight: 400; }
.panel-topup-preview:empty { display: none; }
.panel-topup-sum { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--pn-radius); background: var(--pn-surface-alt); font-size: 14px; }
.panel-topup-sum .row { flex-wrap: nowrap; }
.panel-topup-sum p { margin: 2px 0 0; }
.panel-topup-total { border-top: 1px solid var(--pn-border); padding-top: 6px; margin-top: 2px; }
.panel-topup-total .panel-price { font-size: 20px; }
.panel-consent { align-items: flex-start; line-height: 1.45; font-size: 14px; }
.panel-consent input { margin-top: 3px; }
.panel-ledger, .panel-invoices, .panel-bookings { list-style: none; margin: 0; padding: 0; }
.panel-ledger-row, .panel-invoice-row, .panel-booking { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--pn-border); }
.panel-ledger-row:last-child, .panel-invoice-row:last-child, .panel-booking:last-child { border-bottom: 0; }
.panel-ledger-main, .panel-invoice-main, .panel-booking-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.panel-ledger-side, .panel-booking-side { display: grid; justify-items: end; gap: 2px; text-align: right; }
.panel-booking-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.panel-amt-pos { color: var(--pn-success); }
.panel-amt-neg { color: var(--pn-text); }

/* Ubicaciones */
.panel-place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.panel-place-grid > .panel-skel, .panel-place-grid > .panel-problem, .panel-place-grid > .empty-state { grid-column: 1 / -1; }
.panel-place { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; min-width: 0; }
.panel-place.is-blocked { background: var(--pn-surface-alt); }
.panel-place-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.panel-place-price .panel-price { font-size: 18px; }
.panel-place-desc, .panel-place-scope { margin: 0; }
.panel-place-reason { margin: 0; color: var(--pn-warning); }
.panel-place .row { margin-top: auto; }
.panel-ub-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.panel-ub-facts:empty { display: none; }
.panel-avail-sum { margin: 0; }
.panel-avail { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.panel-avail-day { display: grid; place-items: center; height: 24px; border-radius: 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.panel-avail-day.is-free, .panel-avail-legend i.is-free { background: var(--pn-success-soft); color: var(--pn-success); box-shadow: inset 0 0 0 1px #BCDDC6; }
.panel-avail-day.is-low, .panel-avail-legend i.is-low { background: var(--pn-warning-soft); color: var(--pn-warning); box-shadow: inset 0 0 0 1px #F0D49A; }
.panel-avail-day.is-full, .panel-avail-legend i.is-full { background: var(--pn-surface-alt); color: var(--pn-muted); text-decoration: line-through; }
.panel-avail-day.is-mine, .panel-avail-legend i.is-mine { background: var(--pn-brand-soft); color: var(--pn-brand-strong); box-shadow: inset 0 0 0 1.5px var(--pn-brand); font-weight: 700; }
.panel-avail-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.panel-avail-legend span { display: inline-flex; align-items: center; gap: 4px; }
.panel-avail-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* Respuestas automáticas */
.panel-ra-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel-ra-toggles { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.panel-switch-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; cursor: pointer; }
.panel-switch-row input { margin: 4px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--pn-brand); }
.panel-switch-row > span { display: grid; gap: 2px; min-width: 0; }
.panel-switch-row small { color: var(--pn-muted); font-size: 13px; line-height: 1.4; }
.panel-switch-row:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.panel-ra-sample { padding: 10px 12px; border-radius: var(--pn-radius); background: var(--pn-info-soft); font-size: 14px; line-height: 1.45; }
.panel-ra-sample p { margin: 4px 0 0; }
.panel-faq-list, .panel-pending-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.panel-faq, .panel-pending { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; min-width: 0; overflow-wrap: anywhere; }
.panel-faq-a { margin: 0; color: var(--pn-text); font-size: 14px; line-height: 1.45; white-space: pre-line; }
.panel-pending-q { font-weight: 600; }
.panel-kw { display: flex; flex-wrap: wrap; gap: 4px; }
.panel-kw span { padding: 1px 8px; border-radius: 999px; background: var(--pn-surface-alt); color: var(--pn-muted); font-size: 12px; }
.panel-modal-counter { float: right; font-variant-numeric: tabular-nums; }

/* Modal de producto */
.panel-modal-form { display: grid; gap: 12px; }

/* ===== v2 ===== */

/* Skeletons de carga */
.panel-skel { display: grid; gap: 14px; }
.panel-skel .skeleton { display: block; }
.panel-skel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-skel-title { height: 30px; width: 280px; max-width: 60%; }
.panel-skel-btn { height: 34px; width: 170px; max-width: 30%; border-radius: 6px; }
.panel-skel-card { height: 118px; border-radius: var(--pn-radius); }
.panel-skel-tabs { height: 44px; border-radius: 6px; }
.panel-skel-cols { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; }
.panel-skel-block { height: 340px; border-radius: var(--pn-radius); }
.panel-skel-row { height: 72px; border-radius: var(--pn-radius); }
.panel-skel-line { height: 44px; border-radius: var(--pn-radius); }
.panel-skel-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.panel-skel-ad { height: 190px; border-radius: var(--pn-radius); }
.panel-state-error { padding: 24px 12px; }

/* Ingreso (sin sesión) */
.panel-gate { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1040px; margin: 0 auto; }
.panel-gate-main { display: grid; gap: 18px; padding: 28px; }
.panel-gate-main h1:focus { outline: none; }
.panel-gate-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; background: var(--pn-brand-soft); box-shadow: inset 0 0 0 1.5px var(--pn-brand); }
.panel-gate-cta .btn { min-width: 160px; justify-content: center; text-align: center; }
.panel-gate-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.panel-gate-perks li { display: flex; gap: 10px; align-items: flex-start; }
.panel-gate-perks li > span:first-child { font-size: 20px; line-height: 1.2; }
.panel-gate-legacy { border-top: 1px solid var(--pn-border); padding-top: 12px; }
.panel-gate-legacy p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Requisitos para alquilar */
.panel-narrow-wide { max-width: 760px; margin: 0 auto; }
.panel-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.panel-rq { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; }
.panel-rq-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--pn-surface-alt); color: var(--pn-muted); }
.panel-rq-body { flex: 1 1 auto; min-width: 0; }
.panel-rq-title { font-weight: 600; }
.panel-rq-desc { margin: 2px 0 0; font-size: 14px; color: var(--pn-muted); line-height: 1.45; overflow-wrap: anywhere; }
.panel-rq-action { flex: 0 0 auto; align-self: center; }
.panel-rq.is-done .panel-rq-icon { background: var(--pn-success); color: #fff; }
.panel-rq.is-current { border-color: var(--pn-brand); box-shadow: 0 0 0 1px var(--pn-brand); }
.panel-rq.is-current .panel-rq-icon { background: var(--pn-brand); color: #fff; }
.panel-rq.is-pending { border-color: #F0D49A; background: var(--pn-warning-soft); }
.panel-rq.is-pending .panel-rq-icon { background: #fff; color: var(--pn-warning); }
.panel-rq.is-error { border-color: #F1BFB3; background: var(--pn-danger-soft); }
.panel-rq.is-error .panel-rq-icon { background: var(--pn-danger); color: #fff; }
.panel-rq.is-auto .panel-rq-icon { background: var(--pn-verified-soft); }
.panel-rq.is-locked { opacity: .8; }
.panel-req-compact .panel-rq { padding: 10px 12px; }
.panel-req-compact .panel-rq-icon { flex-basis: 28px; width: 28px; height: 28px; font-size: 13px; }
.panel-req-nav { padding-top: 4px; }
.panel-req-block { margin: 0; text-align: right; }
.panel-reqs-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--pn-radius); background: var(--pn-success-soft); border: 1px solid #BCDDC6; color: var(--pn-success); font-size: 13px; }

/* Ubicación y entregas */
.panel-subsection { border-top: 1px solid var(--pn-border); padding-top: 16px; display: grid; gap: 10px; }
.panel-subsection-lead { margin: -4px 0 0; }
.panel-ac { position: relative; }
.panel-ac-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--pn-border); border-radius: 8px; box-shadow: var(--pn-shadow-lg); max-height: 264px; overflow-y: auto; }
.panel-ac-list[hidden] { display: none; }
.panel-ac-opt { padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.panel-ac-opt small { color: var(--pn-muted); margin-left: 4px; }
.panel-ac-opt[aria-selected="true"], .panel-ac-opt:hover { background: var(--pn-brand-soft); }
.panel-ac-empty { padding: 9px 10px; color: var(--pn-muted); font-size: 14px; }
.panel-delivery { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.panel-delivery legend { padding: 0; margin-bottom: 4px; }
.panel-delivery-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--pn-border); border-radius: 8px; background: #fff; }
.panel-delivery-opt:has(input:checked) { border-color: #E7B6D8; background: #FFF8FC; }
.panel-delivery-opt .checkbox { font-weight: 600; }
.panel-delivery-opt small { flex-basis: 100%; color: var(--pn-muted); font-size: 13px; line-height: 1.4; }
.panel-radius { width: auto; min-width: 136px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }

/* Cartel de publicidad arriba del dashboard */

/* Cabecera v2 */
.panel-head-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.panel-commerce { align-items: center; }
.panel-commerce-icon { font-size: 24px; line-height: 1; }
.panel-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--pn-brand-strong); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 2px; }

/* Chat v2: reglas, reputación, avisos */
.panel-chat-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-bottom: 1px solid var(--pn-border); background: var(--pn-surface-alt); font-size: 13px; flex-shrink: 0; }
.panel-cs-item { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.panel-cs-select { width: auto; min-height: 32px; padding: 4px 30px 4px 8px; font-size: 13px; background-position: right 9px center; }
.panel-cs-bans { margin-left: auto; }
.panel-cs-help { flex-basis: 100%; margin: 0; color: var(--pn-muted); font-size: 12px; line-height: 1.35; }
.panel-rep { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 999px; background: var(--pn-surface-alt); color: var(--pn-muted); font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: 1px; font-style: normal; }
.panel-rep-good { background: var(--pn-success-soft); color: var(--pn-success); }
.panel-rep-low { background: var(--pn-danger-soft); color: var(--pn-danger); }
.panel-rep-new { background: var(--pn-verified-soft); color: var(--pn-verified); }
.panel-check { margin-left: 3px; color: var(--pn-verified); font-weight: 700; font-size: 12px; }
.panel-msg-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.panel-flag-code { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--pn-warning-soft); color: var(--pn-warning); border: 1px solid #F0D49A; font-size: 12px; font-weight: 600; font-style: normal; }
.panel-chat .chat-msg.panel-msg-alert { background: var(--pn-warning-soft); box-shadow: inset 3px 0 0 var(--pn-warning); }
.panel-hidden-text { color: var(--pn-muted); font-style: italic; }
.panel-banned-tag { align-self: center; padding: 1px 6px; border-radius: 4px; background: var(--pn-surface-alt); color: var(--pn-muted); font-size: 11px; font-weight: 600; }
.panel-bans { list-style: none; margin: 0; padding: 0; }
.panel-ban-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--pn-border); }
.panel-ban-row:last-child { border-bottom: 0; }
.panel-ban-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

/* Venta concretada */
.panel-order-who { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--pn-surface-alt); border: 1px solid var(--pn-border); border-radius: var(--pn-radius); }
.panel-order-who > div { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; }
.panel-order-total-line { margin: 0; font-size: 16px; }

/* Ventas */
.panel-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-filter:empty { display: none; }
.panel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--pn-border-strong); border-radius: 999px; background: #fff; color: var(--pn-text); font: inherit; font-size: 13px; cursor: pointer; }
.panel-chip:hover { border-color: var(--pn-brand); }
.panel-chip[aria-pressed="true"] { background: var(--pn-brand-soft); border-color: var(--pn-brand); box-shadow: inset 0 0 0 .5px var(--pn-brand); color: var(--pn-brand-strong); font-weight: 600; }
.panel-chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
.panel-chip-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(31, 21, 32, .07); font-size: 12px; font-weight: 600; text-align: center; }
.panel-orders { list-style: none; margin: 0; padding: 0; }
.panel-order { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pn-border); }
.panel-order:last-child { border-bottom: 0; }
.panel-order-emoji { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #FFFFFF, var(--pn-brand-soft)); box-shadow: inset 0 0 0 1px var(--pn-border); }
.panel-order-main { min-width: 0; display: grid; gap: 3px; }
.panel-order-title { font-weight: 600; overflow-wrap: anywhere; }
.panel-order-buyer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.panel-order-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.panel-order-total { font-size: 18px; font-family: var(--pn-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-order-note { grid-column: 2 / -1; margin: 0; }
.panel-order-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-ok-text { color: var(--pn-success); font-weight: 600; }
.panel-order-review { overflow-wrap: anywhere; }
.panel-review-stars { color: var(--pn-text); letter-spacing: 1px; }
.panel-pane-note { margin: 10px 2px 0; }

/* Estrellas para calificar (en tinta) */
.panel-stars-input { border: 0; margin: 0; padding: 0; min-width: 0; }
.panel-stars-input legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 14px; }
.panel-stars-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.panel-star { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: #D9CFD6; font-size: 32px; line-height: 1; cursor: pointer; transition: transform .1s ease, color .1s ease; }
.panel-star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.panel-star.on { color: var(--pn-text); }
.panel-star:hover { transform: scale(1.08); }
.panel-star:focus-within { outline: 2px solid var(--pn-brand-strong); outline-offset: 1px; }
.panel-stars-text { margin-left: 8px; color: var(--pn-muted); font-size: 14px; }

/* Beneficios */
.panel-benefits-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.panel-benefits-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.panel-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-cat-chips:empty { display: none; }
/* Cada categoría es una columna (con 1–3 beneficios por rubro se lee mejor que filas casi vacías). */
.panel-benefits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px 16px; align-items: start; }
.panel-benefits-list > .panel-skel, .panel-benefits-list > .panel-problem, .panel-benefits-list > .empty-state { grid-column: 1 / -1; }
.panel-benefits-cat { display: grid; gap: 10px; min-width: 0; scroll-margin-top: 16px; border-radius: var(--pn-radius); }
.panel-benefits-cat:focus { outline: none; }
.panel-benefits-cat:focus-visible { outline: 2px solid var(--pn-brand-strong); outline-offset: 4px; }
.panel-benefits-title { display: flex; align-items: center; gap: 8px; font-size: 16px; padding-bottom: 6px; border-bottom: 2px solid var(--pn-border); }
.panel-benefits-slot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.panel-coupon-row { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-ad-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--pn-border); border-radius: var(--pn-radius); background: #fff; min-width: 0; }
.panel-ad-top { display: flex; align-items: center; gap: 10px; }
.panel-ad-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; color: #fff; }
.panel-ad-who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.panel-ad-offer { font-family: var(--pn-display); font-size: 18px; font-weight: 700; color: var(--pn-text); line-height: 1.25; }
.panel-ad-title { font-weight: 600; font-size: 14px; }
.panel-ad-desc { margin: 0; }
.panel-ad-terms { margin: 0; font-size: 12px; color: var(--pn-muted); line-height: 1.4; }
.panel-ad-actions { margin-top: auto; }
.panel-coupon-code { padding: 14px; border: 2px dashed var(--pn-brand); border-radius: 10px; background: var(--pn-brand-soft); color: var(--pn-brand-strong); font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 22px; font-weight: 700; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .panel-live-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-chat { --chat-h: 520px; }
  .panel-rent-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-ra-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-skel-cols { grid-template-columns: minmax(0, 1fr); }
  .panel-skel-side { display: none !important; }
}
@media (max-width: 860px) {
  .panel-two-col { grid-template-columns: minmax(0, 1fr); }
  .panel-sticky { position: static; }
  .panel-preview { max-width: 100%; }
  .panel-gate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .panel-gate-main { padding: 20px 16px; }
  .panel-gate-cta .btn { flex: 1 1 120px; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 16px; white-space: nowrap; }
  .panel-rq { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
  .panel-req-compact .panel-rq { grid-template-columns: 28px minmax(0, 1fr); }
  .panel-rq-action { grid-column: 2; justify-self: start; }
  .panel-req-block { text-align: left; }
  .panel-req-nav .btn-lg { width: 100%; }
  .panel-order { grid-template-columns: 44px minmax(0, 1fr); }
  .panel-order-side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; text-align: left; }
  .panel-interest-actions { flex-basis: 100%; padding-left: 46px; justify-content: flex-start; }
  .panel-cs-bans { margin-left: 0; }
  .panel-chat { --chat-h: 620px; }
  .panel-skel-btn { display: none !important; }
  .panel-skel-title { max-width: 100%; }
  .panel-title { font-size: 22px; }
  .panel-wizard-head h1 { font-size: 24px; }
  .panel-step-btn { font-size: 11px; }
  .panel-wizard-nav .btn { min-width: 0; flex: 1 1 auto; }
  .panel-golive-btn { width: 100%; min-width: 0; }
  .panel-topbar-actions { width: 100%; justify-content: flex-start; }
  .panel-local-select { width: 100%; }
  .panel-product-meta { justify-items: start; min-width: 0; }
  .panel-product-controls { width: 100%; justify-content: flex-end; }
  .panel-head-actions { width: 100%; }
  .panel-head-actions .btn { flex: 1 1 auto; text-align: center; }
  .panel-summary { font-size: 14px; }
  .panel-agenda-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel-agenda-grid > .field:last-child { grid-column: 1 / -1; }
  .panel-agenda-item { grid-template-columns: minmax(0, 1fr); }
  .panel-agenda-actions { justify-content: flex-start; }
  .panel-avail { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .panel-radio-cards { grid-template-columns: minmax(0, 1fr); }
  .panel-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-ledger-side, .panel-booking-side { justify-items: start; text-align: left; justify-content: flex-start; }
  .panel-balance { font-size: 30px; }
}
@media (max-width: 640px) {
  /* Las 8 pestañas del panel entran en dos filas de 4 en el teléfono (sin scroll horizontal escondido). */
}
@media (max-width: 480px) {
  /* Calidad del vivo y pago adelantado: en el teléfono, grilla de 2 columnas en vez de una píldora que se parte en dos filas. */
  .panel-quality-seg, .panel-prepay .segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; overflow: visible; }
  .panel-quality-seg button, .panel-prepay .segmented button { border-radius: 10px; white-space: normal; min-width: 0; }
}
@media (max-width: 380px) {
  .panel-pack-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-spinner, .panel-interest, .panel-root .skeleton { animation: none; }
  .panel-progress > span, .panel-meter > span, .panel-star, .panel-qbar-track > span { transition: none; }
}

/* ---------------------------------------------------------------------
   5. Vendé en VidrieraLive: tarjeta ilustrativa del héroe
   --------------------------------------------------------------------- */
.ven-hero-card-top { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.ven-hero-card-row { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-hover, #FAF7F9); font-size: 14.5px; }
.ven-preview-card .vl-seller-card { padding: 16px; border-radius: 12px; background: var(--surface, #FFFFFF); border: 1px solid var(--border, #E2D8DF); }
.ven-faq details > p { margin: 0; padding: 0 14px 14px; }

/* ---------------------------------------------------------------------
   6. Ajustes finales: objetivos táctiles ≥ 44 px en el celular y números largos
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body[data-zone="centro"] .btn-sm,
  body[data-zone="vender"] .btn-sm { min-height: 44px; }
  body[data-zone="centro"] .segmented > button,
  body[data-zone="vender"] .segmented > button { min-height: 44px; }
}
.ctr-stat .stat-value { font-size: clamp(20px, 5vw, 28px); line-height: 1.15; }

/* ---------------------------------------------------------------------
   7. v4.2: fotos (Centro › Productos, Centro › Mi local, Abrí tu local). El componente (.vlm-*) trae sus estilos en
   /js/media-upload.js; acá van solo los ajustes de cada pantalla.
   --------------------------------------------------------------------- */
.modal.ctr-pf-modal { max-width: 600px; }
.ctr-pf-photos { margin: 4px 0 6px; }
.panel-product-emoji.ctr-prod-thumb { overflow: hidden; padding: 0; background: var(--surface-alt, #EFE8ED); }
.panel-product-emoji.ctr-prod-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ctr-prod-photos { margin-top: 2px; }
.ctr-prod-addphoto { min-height: 32px; padding: 2px 8px; margin-left: -8px; font-size: 13px; }
.ctr-media-grid { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.ctr-media-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 40px; }
.ctr-media-fallback-cover { position: absolute; inset: 0; opacity: .9; }
.ctr-media-fallback-txt { position: relative; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--text, #1F1520); }
.ctr-media-logo .vlm-empty, .ctr-media-cover .vlm-empty { padding: 0; }
@media (max-width: 560px) {
  .ctr-media-grid { grid-template-columns: minmax(0, 1fr); }
  .ctr-media-logo .vlm-frame { max-width: 120px; }
}
@media (max-width: 767.98px) {
  .ctr-prod-addphoto { min-height: 44px; }
}
/* Abrí tu local › paso 6: «Cargá tus primeros productos» */
.abr-prods { margin: 6px 0 18px; padding: 16px; border: 1px solid var(--border, #E2D8DF); border-radius: 12px; background: var(--surface-hover, #FAF7F9); }
.abr-prods .panel-h3 { margin-top: 0; }
.abr-prod-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border, #E2D8DF); }
.abr-prod-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 10px 12px; align-items: start; }
.abr-prod-grid .field { margin: 0; }
.abr-prod-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.abr-prod-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: var(--surface, #FFFFFF); box-shadow: inset 0 0 0 1px var(--border, #E2D8DF); }
.abr-prod-thumb { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: var(--brand-soft, #FBE9F5); font-size: 24px; }
.abr-prod-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.abr-prod-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.abr-prod-meta { color: var(--text-muted, #695B66); font-size: 13px; }
.abr-prod-count { margin: 0; color: var(--text-muted, #695B66); font-size: 14px; font-weight: 600; }
.abr-prod-count.is-ok { color: var(--success, #1B7238); }
.abr-prod-form .row { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 560px) {
  .abr-prods { padding: 12px; }
  .abr-prod-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .abr-prod-name-f { grid-column: 1 / -1; }
}
.panel-interest-emoji.ctr-pin-thumb { overflow: hidden; padding: 0; }
.panel-interest-emoji.ctr-pin-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }