/* =============================================================
   panel.css — Sistema de diseño del panel (escritorio ≥ 1100 px)
   -------------------------------------------------------------
   Lenguaje tomado del diseño de "Élites Inmobiliarios del Ecuador": negro cálido, bloques de
   vino que dan volumen, papel hueso para alternar, capas con borde de luz fino, esquinas de
   12 px, titulares gruesos con letra apretada y etiquetas en mayúsculas con letra tipo máquina.
   Capa SOBRE styles.css, sin tocar la lógica. Solo se activa cuando panel-shell.js pone .pn-on
   en <html> (usuario con sesión + página de trabajo). Por debajo de 1100 px no cambia nada.
   Sin serifas.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");

html.pn-on {
  --pn-side-w: 264px;
  --pn-f: "Geist", "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --pn-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pn-hot: #ff5a47;
  --pn-wine: #3f0808; --pn-wine-hi: #5c1011;

  /* Tema claro: papel hueso */
  --pn-canvas: #e9e6e2;
  --pn-card: #fbfaf8;
  --pn-card-2: #f2efeb;
  --pn-text: #1b1514;
  --pn-mute: #6f6560;
  --pn-line: rgba(27, 21, 20, .10);
  --pn-line-strong: rgba(27, 21, 20, .18);
  --pn-glow: inset 0 1px 0 rgba(255, 255, 255, .9);
  --pn-shadow: 0 1px 2px rgba(27, 21, 20, .05), 0 22px 40px -28px rgba(27, 21, 20, .35);
  --pn-side-bg: #130f0f;
  --pn-chip: #1b1514; --pn-chip-ink: #f5f2ef;
  --pn-ok: #17794a;   --pn-ok-bg: rgba(23, 121, 74, .12);
  --pn-warn: #9a6200; --pn-warn-bg: rgba(190, 120, 0, .14);
  --pn-bad: #b3281b;  --pn-bad-bg: rgba(224, 57, 44, .11);
}
html.pn-on[data-theme="dark"] {
  --pn-canvas: #0f0d0d;
  --pn-card: #191413;
  --pn-card-2: #211a19;
  --pn-text: #f5f2ef;
  --pn-mute: #a69d98;
  --pn-line: rgba(255, 255, 255, .09);
  --pn-line-strong: rgba(255, 255, 255, .17);
  --pn-glow: inset 0 1px 0 rgba(255, 255, 255, .05);
  --pn-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 26px 44px -30px rgba(0, 0, 0, .85);
  --pn-side-bg: #0a0808;
  --pn-chip: #f5f5f5; --pn-chip-ink: #1a1a1a;
  --pn-ok: #5fd29a;   --pn-ok-bg: rgba(95, 210, 154, .12);
  --pn-warn: #f0b955; --pn-warn-bg: rgba(240, 185, 85, .13);
  --pn-bad: #ff8f81;  --pn-bad-bg: rgba(255, 143, 129, .13);
}

/* Por debajo de 1100 px el panel se queda exactamente como estaba. */
.pn-side { display: none; }
.pn-actions, .pn-more, .pn-menu { display: contents; }
.pn-more-btn, .pn-menu hr { display: none; }

@media (min-width: 0px) {
  /* (el menú lateral solo desde 768 px: ver el bloque de abajo) */
  .pn-actions { display: flex; }
  .pn-more { display: block; }
  .pn-menu { display: none; }
  .pn-more-btn { display: grid; }
  .pn-menu hr { display: block; }

  html.pn-on { --nav-h: 0px; }
  /* Lo que el sitio marca como oculto debe seguir oculto, aunque aquí le demos otro "display". */
  html.pn-on [hidden] { display: none !important; }
  html.pn-on body { background: var(--pn-canvas); color: var(--pn-text); font-family: var(--pn-f); }
  html.pn-on :is(h1, h2, h3, h4, .btn, button, input, select, textarea, .lede, .eyebrow) { font-family: var(--pn-f); }
  html.pn-on .nav, html.pn-on .nav-mobile { display: none !important; }
  /* El pie público no pinta nada dentro del panel (el menú lateral ya trae "Ver el sitio"). */
  html.pn-on .footer { display: none; }
  html.pn-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* ───────── Menú lateral ───────── */
  .pn-side {
    position: fixed; inset: 0 auto 0 0; width: var(--pn-side-w); z-index: 90; flex-direction: column;
    background: linear-gradient(180deg, #151010 0%, var(--pn-side-bg) 55%); color: #f5f2ef;
    padding: 1.3rem .9rem 1rem; border-right: 1px solid rgba(255, 255, 255, .07);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent;
    font-family: var(--pn-f);
  }
  .pn-side > * { flex-shrink: 0; }   /* en pantallas bajas el menú se desplaza; sus piezas no se aplastan */
  .pn-brand { display: flex; align-items: center; gap: .75rem; padding: .1rem .55rem 1.2rem; color: #fff; }
  .pn-brand img { width: 40px; height: 40px; flex-shrink: 0;  }
  .pn-brand-text { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
  .pn-brand b { font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
  .pn-brand-text > span { font: 400 .6rem/1 var(--pn-mono); letter-spacing: .16em; text-transform: uppercase; color: #a69d98; }
  .pn-new {
    display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0 .25rem 1.25rem; padding: .78rem 1rem; border-radius: 10px;
    background: #f5f5f5; color: #1a1a1a; font-weight: 600; font-size: .875rem; transition: transform .15s ease, background .15s ease;
  }
  .pn-new:hover { transform: translateY(-1px); background: #fff; }
  .pn-new svg { width: 18px; height: 18px; stroke-width: 2.4; color: #1a1a1a; flex-shrink: 0; }
  .pn-new span { color: #1a1a1a; }
  .pn-group { margin-bottom: 1rem; }
  .pn-group-label { font: 500 .62rem/1 var(--pn-mono); letter-spacing: .16em; text-transform: uppercase; color: #8a807b; padding: .25rem .75rem .6rem; }
  .pn-link {
    position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 9px; margin-bottom: 2px;
    font-size: .875rem; font-weight: 500; color: #cfc8c3; transition: background-color .15s, color .15s;
  }
  .pn-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.6; color: #8f8681; transition: color .15s; }
  .pn-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
  .pn-link:hover svg { color: #d6cfca; }
  .pn-link[aria-current="page"] { background: linear-gradient(90deg, rgba(92, 16, 17, .75), rgba(63, 8, 8, .35)); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 90, 71, .18); }
  .pn-link[aria-current="page"]::before { content: ""; position: absolute; left: -.9rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--pn-hot); }
  .pn-link[aria-current="page"] svg { color: var(--pn-hot); }
  .pn-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 2px; }
  .pn-user { display: flex; align-items: center; gap: .7rem; padding: .65rem .7rem; margin-bottom: .45rem; border-radius: 12px; background: linear-gradient(135deg, rgba(92, 16, 17, .55), rgba(63, 8, 8, .25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .pn-avatar { width: 36px; height: 36px; border-radius: 10px; background: #f5f5f5; color: #3f0808; display: grid; place-items: center; font-weight: 800; font-size: .92rem; flex-shrink: 0; }
  .pn-user-name { font-size: .85rem; font-weight: 600; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pn-user-plan { font: 400 .66rem/1.3 var(--pn-mono); letter-spacing: .06em; text-transform: uppercase; color: #cdb9b4; margin-top: .22rem; }
  .pn-user-plan b { color: #ffb4aa; font-weight: 500; }
  .pn-foot button.pn-link { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; }
  .pn-side :focus-visible { outline: 2px solid var(--pn-hot); outline-offset: 2px; }

  /* ───────── Páginas: ancho y encabezados ───────── */
  html.pn-on .container, html.pn-on .section.container { max-width: 1240px; padding-inline: 2.4rem; }
  html.pn-on .page-header { padding-top: 2.2rem; padding-bottom: .5rem; }
  html.pn-on .page-header-row { margin-bottom: 1rem; }
  html.pn-on .page-hero-title { font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--pn-text); }
  html.pn-on .page-hero-title em { font-family: var(--pn-f); font-weight: 800; color: var(--pn-hot); }
  html.pn-on .page-header .lede, html.pn-on .page-header-row .lede { font-size: .98rem; max-width: 60ch; margin-top: .55rem; color: var(--pn-mute); }
  html.pn-on .section { padding-block: 1.1rem; }
  html.pn-on .section-head { margin-bottom: 1rem; max-width: none; }
  html.pn-on .section-head h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--pn-text); }
  html.pn-on [data-dashboard-section] { padding-top: 2.2rem !important; }
  html.pn-on [data-dashboard-section] .section-head h2 { font-size: 2.1rem; }
  html.pn-on .lede { color: var(--pn-mute); }
  html.pn-on .eyebrow { font: 500 .66rem/1 var(--pn-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pn-hot); margin-bottom: .75rem; }
  html.pn-on .eyebrow::before { display: none; }

  /* ───────── Tarjetas con profundidad ───────── */
  html.pn-on .glass-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pn-card) 100%, #fff 3%), var(--pn-card));
    border: 1px solid var(--pn-line); border-radius: 14px; box-shadow: var(--pn-glow), var(--pn-shadow);
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: 1.4rem 1.55rem; color: var(--pn-text);
  }
  html.pn-on .glass-card > p { max-width: 74ch; }
  html.pn-on .glass-card > p[style*="font-size:.82rem"] { font-size: .86rem !important; line-height: 1.6; color: var(--pn-mute) !important; }
  html.pn-on .glass-card h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; color: var(--pn-text); }
  html.pn-on .dash-card-head { margin-bottom: 1.1rem; }
  html.pn-on .dash-grid { gap: 1.25rem; }
  html.pn-on [data-theme="dark"] .glass-card strong, html.pn-on .glass-card strong { color: inherit; }

  /* Botones */
  html.pn-on .btn { border-radius: 9px; font-weight: 600; letter-spacing: 0; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
  html.pn-on .btn:hover { transform: translateY(-1px); }
  html.pn-on .btn-outline { background: transparent; border: 1px solid var(--pn-line-strong); color: var(--pn-text); }
  html.pn-on .btn-outline:hover { background: var(--pn-card-2); border-color: var(--pn-mute); }
  html.pn-on .btn-accent { background: var(--pn-hot); color: #fff; border: 1px solid transparent; }
  html.pn-on .btn-accent:hover { background: #ff6f5e; }

  /* ───────── Avisos: compactos ───────── */
  html.pn-on .dash-note {
    display: flex; align-items: center; gap: .75rem; max-width: 100%; padding: .75rem 1.05rem; margin-bottom: .9rem; border-radius: 12px;
    border: 1px solid var(--pn-line); background: var(--pn-card); font-size: .875rem; color: var(--pn-mute); box-shadow: var(--pn-glow);
  }
  html.pn-on .dash-note svg { color: var(--pn-mute); }
  html.pn-on .dash-note a, html.pn-on .dash-note button { color: var(--pn-hot) !important; }

  /* Banner de plan: el único bloque de vino de la pantalla */
  html.pn-on .glass-card.trial-banner {
    position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 1.35rem 1.6rem; margin-bottom: 1.1rem;
    background: radial-gradient(120% 140% at 100% 0%, rgba(255, 90, 71, .30) 0%, rgba(255, 90, 71, 0) 55%), linear-gradient(135deg, var(--pn-wine-hi) 0%, var(--pn-wine) 70%);
    border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 28px 50px -30px rgba(63, 8, 8, .9);
  }
  html.pn-on .trial-banner h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
  html.pn-on .trial-banner .lede { font-size: .92rem; color: #e8c9c5; }
  html.pn-on .trial-banner > div { max-width: 100%; width: 100%; }
  html.pn-on .trial-banner [data-trial-continue] { margin-left: auto; background: #f5f5f5; color: #1a1a1a; }
  html.pn-on .trial-banner [data-trial-continue]:hover { background: #fff; }
  .pn-days { flex: 1 1 200px; max-width: 280px; }
  .pn-days-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
  .pn-days-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb4aa, var(--pn-hot)); }

  /* ───────── Métricas ───────── */
  html.pn-on .dash-stats, html.pn-on .stats-tiles-grid {
    display: grid !important; grid-template-columns: repeat(var(--pn-cols, 4), minmax(0, 1fr)) !important; gap: 1rem !important; margin-bottom: 1.4rem !important;
  }
  html.pn-on .dash-stats > *, html.pn-on .stats-tiles-grid > * {
    position: relative; min-width: 0; padding: 1.15rem 1.25rem !important; border-radius: 14px; border: 1px solid var(--pn-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pn-card) 100%, #fff 3%), var(--pn-card)); box-shadow: var(--pn-glow), var(--pn-shadow);
    transition: transform .2s ease, border-color .2s ease;
  }
  html.pn-on .dash-stats > *:hover, html.pn-on .stats-tiles-grid > *:hover { transform: translateY(-2px); border-color: var(--pn-line-strong); }
  html.pn-on .stats-tiles-grid > * { display: flex; flex-direction: column; gap: .4rem; color: var(--pn-text); }
  html.pn-on .stats-tiles-grid > * > :first-child, html.pn-on .dash-stats > * [class*="label"] {
    font: 500 .64rem/1.4 var(--pn-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--pn-mute);
  }
  html.pn-on .stats-tiles-grid > * > :last-child:not(:first-child), html.pn-on .stats-tiles-grid > * strong {
    font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--pn-text);
  }
  html.pn-on .stats-tiles-grid > * > :nth-child(2) { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
  /* Tarjeta destacada (dinero): vino */
  html.pn-on .pn-feature {
    background: radial-gradient(120% 140% at 100% 0%, rgba(255, 90, 71, .28) 0%, rgba(255, 90, 71, 0) 55%), linear-gradient(135deg, var(--pn-wine-hi), var(--pn-wine)) !important;
    border-color: rgba(255, 255, 255, .12) !important; color: #fff !important;
  }
  html.pn-on .pn-feature * { color: #fff !important; }
  html.pn-on .pn-feature > :first-child { color: #e8c9c5 !important; }

  /* ───────── Listas → tablas ───────── */
  html.pn-on .dash-listing {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 1.1rem; row-gap: 0;
    padding: .95rem 1rem; margin-inline: -1rem; border-bottom: 1px solid var(--pn-line); border-radius: 10px; transition: background-color .15s;
  }
  html.pn-on .dash-listing:hover { background: color-mix(in srgb, var(--pn-card-2) 70%, transparent); }
  html.pn-on .dash-listing:last-child { border-bottom: 0; }
  /* Fila de propiedad: miniatura · datos · estado · acciones */
  html.pn-on .dash-listing:has(> .dash-listing-art) {
    grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "art info status" "art actions actions"; column-gap: 1rem; row-gap: .6rem; align-items: start;
  }
  html.pn-on .dash-listing:has(> .dash-listing-art) > .dash-listing-art { grid-area: art; align-self: start; }
  html.pn-on .dash-listing:has(> .dash-listing-art) > .dash-listing-info { grid-area: info; }
  html.pn-on .dash-listing:has(> .dash-listing-art) > .dash-status { grid-area: status; align-self: start; }
  html.pn-on .dash-listing:has(> .dash-listing-art) > .dash-listing-actions { grid-area: actions; display: flex; gap: .35rem; flex-wrap: wrap; }
  html.pn-on .dash-listing-actions .dash-icon-btn, html.pn-on .dash-icon-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--pn-line-strong); background: transparent; color: var(--pn-mute);
    display: inline-grid; place-items: center; transition: background-color .15s, color .15s, border-color .15s;
  }
  html.pn-on .dash-icon-btn:hover { background: var(--pn-card-2); color: var(--pn-text); border-color: var(--pn-mute); }
  html.pn-on .dash-icon-btn svg { width: 17px; height: 17px; }
  html.pn-on .dash-listing > [data-admin-properties-panel], html.pn-on .dash-listing > [data-admin-reset-panel], html.pn-on .dash-listing > form { grid-column: 1 / -1; }
  html.pn-on .dash-listing-info .t { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; white-space: normal; color: var(--pn-text); }
  html.pn-on .dash-listing-info .s { font-size: .82rem; color: var(--pn-mute); margin-top: .18rem; line-height: 1.5; }
  html.pn-on .dash-listing-actions { overflow: visible; }

  /* Estado: píldora con punto, sin emoji */
  html.pn-on .dash-status, html.pn-on .pill-tag[data-pn-state] {
    display: inline-flex; align-items: center; gap: .45rem; font: 500 .72rem/1 var(--pn-f); padding: .42rem .8rem .42rem .65rem; border-radius: 999px;
    background: rgba(127, 127, 127, .10); color: var(--pn-mute); border: 1px solid var(--pn-line);
  }
  html.pn-on .dash-status::before, html.pn-on .pill-tag[data-pn-state]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pn-mute); }
  html.pn-on .dash-status.active, html.pn-on .pill-tag[data-pn-state="ok"] { background: var(--pn-ok-bg); color: var(--pn-ok); border-color: transparent; }
  html.pn-on .dash-status.active::before, html.pn-on .pill-tag[data-pn-state="ok"]::before { background: var(--pn-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pn-ok) 22%, transparent); }
  html.pn-on .pill-tag[data-pn-state="bad"] { background: var(--pn-bad-bg); color: var(--pn-bad); border-color: transparent; }
  html.pn-on .pill-tag[data-pn-state="bad"]::before { background: var(--pn-bad); }
  html.pn-on .pill-tag[data-pn-state="wait"] { background: var(--pn-warn-bg); color: var(--pn-warn); border-color: transparent; }
  html.pn-on .pill-tag[data-pn-state="wait"]::before { background: var(--pn-warn); }
  html.pn-on .pill.pill-tag:not([data-pn-state]) { border-radius: 6px; font: 500 .62rem/1 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; padding: .3rem .5rem; background: var(--pn-card-2); color: var(--pn-mute); border: 1px solid var(--pn-line); }

  /* Acciones por fila: una principal + menú "Más" */
  .pn-actions { align-items: center; gap: .5rem; position: relative; }
  .pn-more { position: relative; }
  .pn-more-btn { width: 36px; height: 36px; border-radius: 9px; place-items: center; border: 1px solid var(--pn-line-strong); background: transparent; color: var(--pn-text); cursor: pointer; transition: background-color .15s, border-color .15s; }
  .pn-more-btn:hover, .pn-more-btn[aria-expanded="true"] { background: var(--pn-card-2); border-color: var(--pn-mute); }
  .pn-more-btn svg { width: 18px; height: 18px; }
  .pn-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; padding: .4rem; flex-direction: column;
    background: var(--pn-card); border: 1px solid var(--pn-line-strong); border-radius: 12px; box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .55);
  }
  .pn-more[data-open="1"] .pn-menu { display: flex; }
  .pn-menu .btn { justify-content: flex-start; width: 100%; border: 0; background: none; box-shadow: none; border-radius: 8px; padding: .62rem .75rem; font-size: .85rem; font-weight: 500; color: var(--pn-text); transform: none; }
  .pn-menu .btn:hover { background: var(--pn-card-2); }
  .pn-menu .btn.is-danger { color: var(--pn-bad); }
  .pn-menu hr { border: 0; border-top: 1px solid var(--pn-line); margin: .35rem .25rem; }

  /* ───────── Pestañas del administrador ───────── */
  .pn-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.6rem; width: fit-content; max-width: 100%; }
  .pn-tab { appearance: none; font: 500 .85rem/1 var(--pn-f); padding: .72rem 1.1rem; border-radius: 999px; background: transparent; color: var(--pn-mute); border: 1px solid var(--pn-line-strong); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
  .pn-tab:hover { color: var(--pn-text); border-color: var(--pn-mute); }
  .pn-tab[aria-selected="true"] { background: var(--pn-chip); color: var(--pn-chip-ink); border-color: var(--pn-chip); }
  .pn-hide { display: none !important; }

  /* ───────── Formularios y filtros ───────── */
  html.pn-on form[data-admin-search-form], html.pn-on form[data-admin-verification-search-form] { max-width: 600px; }
  html.pn-on :is(input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"], select, textarea):not([type="checkbox"]) {
    background: var(--pn-card-2); border: 1px solid var(--pn-line-strong); color: var(--pn-text); border-radius: 10px;
  }
  html.pn-on form[data-admin-search-form] input, html.pn-on form[data-admin-verification-search-form] input { padding: .72rem 1rem; font-size: .92rem; }
  html.pn-on .filter-tabs { justify-content: flex-start !important; gap: .4rem; }
  html.pn-on .filter-tab { font: 500 .8rem/1 var(--pn-f); padding: .62rem 1rem; border-radius: 999px; background: transparent; color: var(--pn-mute); border: 1px solid var(--pn-line-strong); }
  html.pn-on .filter-tab:hover { color: var(--pn-text); }
  html.pn-on .filter-tab.is-active { background: var(--pn-chip); color: var(--pn-chip-ink); border-color: var(--pn-chip); }

  /* ───────── Campañas: el menú interno de iconos pasa a pestañas con nombre ───────── */
  html.pn-on .campaigns-sidebar { width: 232px; padding-right: 1.6rem; gap: .25rem; }
  html.pn-on .campaigns-side-btn {
    width: 100%; height: auto; display: flex; align-items: center; justify-content: flex-start; gap: .7rem; padding: .66rem .85rem; border-radius: 10px;
    font: 500 .86rem/1.25 var(--pn-f); color: var(--pn-mute); text-align: left; border: 1px solid transparent; background: transparent;
  }
  html.pn-on .campaigns-side-btn::after { content: attr(title); }
  html.pn-on .campaigns-side-btn:hover { background: var(--pn-card-2); color: var(--pn-text); }
  html.pn-on .campaigns-side-btn.is-active { background: var(--pn-card); color: var(--pn-text); border-color: var(--pn-line-strong); box-shadow: var(--pn-glow); }
  html.pn-on .campaigns-side-btn.is-active svg { color: var(--pn-hot); }
  html.pn-on .campaigns-side-btn svg { flex-shrink: 0; }

  /* ───────── Embudo de pago: barras finas con degradado y cifras en letra tipo máquina ───────── */
  html.pn-on [data-admin-funnel] { max-width: 880px; }
  html.pn-on [data-admin-funnel] div[style*="height:8px"] { height: 6px !important; background: var(--pn-card-2) !important; border: 1px solid var(--pn-line); }
  html.pn-on [data-admin-funnel] div[style*="background:var(--accent)"] { background: linear-gradient(90deg, #ffb4aa, var(--pn-hot)) !important; }
  html.pn-on [data-admin-funnel] strong { font: 500 .78rem/1.4 var(--pn-mono); letter-spacing: .02em; color: var(--pn-text); }
  html.pn-on [data-admin-funnel] > div { border-bottom-color: var(--pn-line) !important; }

  /* ───────── Estados vacíos ───────── */
  html.pn-on .empty-state {
    display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 2.4rem 1rem; color: var(--pn-mute); font-size: .92rem; text-align: center;
  }
  html.pn-on .empty-state::before {
    content: ""; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--pn-line-strong); background-color: var(--pn-card-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a69d98' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 22px;
  }
}

/* =============================================================
   Pantallas medianas (1100–1499 px): el menú lateral pasa a iconos y se despliega al pasar el cursor
   ============================================================= */
@media (min-width: 768px) and (max-width: 1499px) {
  html.pn-on { --pn-side-w: 76px; }
  .pn-side { transition: width .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s; overflow-x: hidden; }
  .pn-side:hover, .pn-side:focus-within, .pn-side.pn-open { width: 264px; box-shadow: 28px 0 70px -20px rgba(0, 0, 0, .75); }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) { padding-inline: .6rem; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-brand { justify-content: center; padding-inline: 0; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-brand-text,
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-link > span,
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-new > span,
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-user > div,
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-group-label { display: none; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-link { justify-content: center; padding-inline: 0; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-new { padding: 0; margin-inline: auto; width: 44px; height: 44px; border-radius: 12px; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-user { justify-content: center; padding-inline: 0; background: none; box-shadow: none; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-group { margin-bottom: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .06); }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-group:first-of-type { border-top: 0; padding-top: 0; }
  .pn-side:not(:hover):not(:focus-within):not(.pn-open) .pn-link[aria-current="page"]::before { left: -.6rem; }
  /* El menú interno de Campañas también se recoge a iconos (con el nombre al pasar el cursor) */
  html.pn-on .campaigns-sidebar { width: auto; padding-right: 1rem; }
  html.pn-on .campaigns-side-btn { width: 46px; height: 46px; justify-content: center; padding: 0; }
  html.pn-on .campaigns-side-btn::after { content: none; }
  html.pn-on .container, html.pn-on .section.container { padding-inline: 1.6rem; }
}

/* =============================================================
   Sin parpadeo al navegar: mientras se confirma la sesión, el panel ya ocupa su sitio
   ============================================================= */
@media (min-width: 768px) {
  html.pn-pre body::before {
    content: ""; position: fixed; inset: 0 auto 0 0; width: var(--pn-side-w); z-index: 89;
    background: var(--pn-side-bg, #0a0808); border-right: 1px solid rgba(255, 255, 255, .07);
  }
  html.pn-pre :is([data-auth-section], [data-dashboard-guest], [data-crm-guest], [data-stats-guest], [data-campana-guest], [data-team-guest], [data-learning-guest], [data-wa-guest], [data-admin-denied]) { display: none !important; }

  /* Cargando: un indicador que gira, no el recuadro de lista vacía */
  html.pn-on .empty-state[data-pn-loading]::before {
    width: 22px; height: 22px; border-radius: 50%; background: none; border: 2px solid var(--pn-line-strong); border-top-color: var(--pn-hot);
    animation: pn-spin .8s linear infinite;
  }
  html.pn-on .empty-state[data-pn-loading] { padding: 1.6rem 1rem; gap: .6rem; font-size: .86rem; }
}
@keyframes pn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .empty-state[data-pn-loading]::before { animation: none; } .pn-side { transition: none; } }

/* =============================================================
   Tablet (iPad) — 768 a 1499 px: menú de iconos con botón táctil
   ============================================================= */
.pn-toggle, .pn-scrim { display: none; }
@media (min-width: 768px) and (max-width: 1499px) {
  .pn-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto .6rem; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .07); color: #e9e4e0; cursor: pointer; flex-shrink: 0; }
  .pn-toggle:hover { background: rgba(255, 255, 255, .12); }
  .pn-toggle svg { width: 20px; height: 20px; }
  .pn-side:hover .pn-toggle, .pn-side:focus-within .pn-toggle, .pn-side.pn-open .pn-toggle { margin-left: .3rem; margin-right: auto; }
  .pn-scrim { display: block; position: fixed; inset: 0; z-index: 88; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .pn-scrim.is-on { opacity: 1; pointer-events: auto; }
  /* En pantallas táctiles el "pasar el cursor" no existe: el botón manda; el hover solo cuenta con mouse */
}
@media (hover: none) and (min-width: 768px) and (max-width: 1499px) {
  .pn-side:hover:not(.pn-open):not(:focus-within) { width: var(--pn-side-w); box-shadow: none; }
  .pn-side:not(.pn-open):not(:focus-within) .pn-brand-text,
  .pn-side:not(.pn-open):not(:focus-within) .pn-link > span,
  .pn-side:not(.pn-open):not(:focus-within) .pn-new > span,
  .pn-side:not(.pn-open):not(:focus-within) .pn-user > div,
  .pn-side:not(.pn-open):not(:focus-within) .pn-group-label { display: none; }
}
@media (max-width: 1099px) {
  html.pn-on .container, html.pn-on .section.container { padding-inline: 1.2rem; }
  html.pn-on .page-hero-title, html.pn-on [data-dashboard-section] .section-head h2 { font-size: 1.75rem; }
  html.pn-on .page-header { padding-top: 1.4rem; }
  html.pn-on .dash-stats, html.pn-on .stats-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .8rem !important; }
  html.pn-on .dash-stats > *, html.pn-on .stats-tiles-grid > * { padding: 1rem 1.05rem !important; }
  html.pn-on .stats-tiles-grid > * > :nth-child(2) { font-size: 1.7rem; }
  html.pn-on .glass-card { padding: 1.1rem 1.15rem; }
  html.pn-on .glass-card.trial-banner > div { flex-wrap: wrap; }
  .pn-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: 1.2rem !important; width: auto; }
  .pn-tabs::-webkit-scrollbar { display: none; }
  .pn-tab { white-space: nowrap; flex-shrink: 0; }
  html.pn-on .dash-listing { margin-inline: -.6rem; padding: .85rem .6rem; column-gap: .8rem; }
  html.pn-on form[data-admin-search-form], html.pn-on form[data-admin-verification-search-form] { max-width: none; }
}
@media (max-width: 899px) {
  html.pn-on .dash-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.pn-on .crm-board { }
}

/* =============================================================
   Desde 768 px: menú lateral
   ============================================================= */
@media (min-width: 768px) {
  .pn-side { display: flex; }
  html.pn-on body { padding-left: var(--pn-side-w); }
  html.pn-on .crm-board { grid-template-columns: repeat(3, minmax(250px, 1fr)); overflow-x: auto; padding-bottom: .6rem; }
}
@media (min-width: 900px) { html.pn-on .crm-board { overflow: visible; } }

/* Ocultar "visitante" mientras se confirma la sesión, y el indicador de carga: todos los anchos */
html.pn-pre :is([data-auth-section], [data-dashboard-guest], [data-crm-guest], [data-stats-guest], [data-campana-guest], [data-team-guest], [data-learning-guest], [data-wa-guest], [data-admin-denied]) { display: none !important; }
html.pn-on .empty-state[data-pn-loading]::before {
  width: 22px; height: 22px; border-radius: 50%; background: none; border: 2px solid var(--pn-line-strong); border-top-color: var(--pn-hot);
  animation: pn-spin .8s linear infinite;
}
html.pn-on .empty-state[data-pn-loading] { padding: 1.6rem 1rem; gap: .6rem; font-size: .86rem; }

/* =============================================================
   CELULAR (< 768 px): barra superior, barra inferior con Publicar al centro y hoja "Más"
   ============================================================= */
.pn-topbar, .pn-tabbar, .pn-sheet, .pn-sheet-scrim { display: none; }
@media (max-width: 767px) {
  html.pn-on body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  html.pn-on .container, html.pn-on .section.container { padding-inline: 1rem; }
  html.pn-on .page-header { padding-top: .8rem; }
  html.pn-on .page-hero-title, html.pn-on [data-dashboard-section] .section-head h2 { font-size: 1.6rem; }
  html.pn-on .page-header .lede, html.pn-on .page-header-row .lede { font-size: .92rem; }
  html.pn-on [data-dashboard-section] { padding-top: .6rem !important; }
  html.pn-on .section { padding-block: .7rem; }
  html.pn-on .glass-card { padding: 1rem 1.05rem; }
  html.pn-on .dash-stats, html.pn-on .stats-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; margin-bottom: 1rem !important; }
  html.pn-on .dash-stats > *, html.pn-on .stats-tiles-grid > * { padding: .85rem .9rem !important; }
  html.pn-on .stats-tiles-grid > * > :nth-child(2) { font-size: 1.5rem; }
  html.pn-on .dash-grid { grid-template-columns: minmax(0, 1fr) !important; gap: .9rem; }
  html.pn-on .glass-card.trial-banner { padding: 1.05rem 1.1rem; }
  html.pn-on .glass-card.trial-banner > div { flex-wrap: wrap; gap: .8rem; }
  html.pn-on .trial-banner [data-trial-continue] { margin-left: 0; width: 100%; justify-content: center; }
  .pn-days { max-width: none; flex-basis: 100%; }
  html.pn-on .dash-note { padding: .65rem .85rem; font-size: .82rem; }
  html.pn-on .dash-listing { margin-inline: -.4rem; padding: .8rem .4rem; column-gap: .7rem; }
  html.pn-on .dash-listing-info .t { font-size: .92rem; }
  html.pn-on .filter-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  html.pn-on .filter-tabs::-webkit-scrollbar { display: none; }
  html.pn-on .filter-tab { flex-shrink: 0; white-space: nowrap; }
  .pn-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem !important; padding-inline: 1rem; width: auto; max-width: none; }
  .pn-tabs::-webkit-scrollbar { display: none; }
  .pn-tab { white-space: nowrap; flex-shrink: 0; }
  html.pn-on form[data-admin-search-form], html.pn-on form[data-admin-verification-search-form] { max-width: none; }
  html.pn-on .campaigns-wrap { flex-direction: column; }
  html.pn-on .campaigns-sidebar { flex-direction: row; width: auto; overflow-x: auto; padding: 0 0 .6rem; position: static; gap: .35rem; scrollbar-width: none; }
  html.pn-on .campaigns-sidebar::-webkit-scrollbar { display: none; }
  html.pn-on .campaigns-side-btn { width: auto; height: 40px; padding: 0 .9rem; flex-shrink: 0; }
  html.pn-on .campaigns-side-btn::after { content: attr(title); font: 500 .78rem/1 var(--pn-f); }

  /* Barra superior */
  .pn-topbar { display: flex; align-items: center; gap: .7rem; padding: calc(.7rem + env(safe-area-inset-top, 0px)) 1rem .5rem; color: var(--pn-text); font-family: var(--pn-f); }
  .pn-topbar img { width: 34px; height: 34px; flex-shrink: 0; }
  .pn-topbar b { font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em; flex: 1; min-width: 0; line-height: 1.1; }
  .pn-topbar b small { display: block; font: 400 .56rem/1 var(--pn-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pn-mute); margin-top: .3rem; }
  .pn-topbar button { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--pn-line-strong); background: transparent; color: var(--pn-text); cursor: pointer; }
  .pn-topbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* Barra inferior */
  .pn-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; inset: auto 0 0 0; z-index: 95;
    padding: .45rem .5rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--pn-canvas) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--pn-line); font-family: var(--pn-f);
  }
  .pn-tabbar a, .pn-tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: .28rem; padding: .35rem 0 0; background: none; border: 0; cursor: pointer;
    font: 500 .6rem/1 var(--pn-f); color: var(--pn-mute); text-decoration: none; position: relative;
  }
  .pn-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .pn-tabbar .on { color: var(--pn-text); }
  .pn-tabbar .on svg { color: var(--pn-hot); }
  .pn-tabbar .fab { padding: 0; }
  .pn-tabbar .fab i { width: 48px; height: 48px; border-radius: 16px; background: var(--pn-hot); display: grid; place-items: center; margin-top: -22px; box-shadow: 0 10px 22px -8px rgba(255, 90, 71, .75); }
  .pn-tabbar .fab svg { color: #fff; stroke-width: 2.3; width: 22px; height: 22px; }
  .pn-tabbar :focus-visible { outline: 2px solid var(--pn-hot); outline-offset: 2px; border-radius: 8px; }

  /* Hoja "Más" */
  .pn-sheet-scrim { display: block; position: fixed; inset: 0; z-index: 96; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .pn-sheet-scrim.is-on { opacity: 1; pointer-events: auto; }
  .pn-sheet {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 97; max-height: 88%; overflow-y: auto; font-family: var(--pn-f);
    background: var(--pn-card); color: var(--pn-text); border-radius: 24px 24px 0 0; border-top: 1px solid var(--pn-line-strong);
    padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); transition: transform .26s cubic-bezier(.16, 1, .3, 1);
  }
  .pn-sheet.is-on { transform: translateY(0); }
  .pn-sheet .grab { width: 40px; height: 4px; border-radius: 9px; background: var(--pn-line-strong); margin: .3rem auto .8rem; }
  .pn-sheet .usr { display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: 13px; background: linear-gradient(135deg, rgba(92, 16, 17, .6), rgba(63, 8, 8, .3)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #fff; }
  .pn-sheet .usr .av { width: 38px; height: 38px; border-radius: 11px; background: #f5f5f5; color: #3f0808; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
  .pn-sheet .usr b { display: block; font-size: .88rem; font-weight: 600; line-height: 1.2; }
  .pn-sheet .usr span { display: block; font: 400 .6rem/1 var(--pn-mono); letter-spacing: .08em; text-transform: uppercase; color: #e8c9c5; margin-top: .3rem; }
  .pn-sheet .grp { font: 500 .56rem/1 var(--pn-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pn-mute); padding: .9rem .3rem .45rem; }
  .pn-sheet .row { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .75rem .55rem; border-radius: 11px; font: 500 .92rem/1.2 var(--pn-f); color: var(--pn-text); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
  .pn-sheet .row svg { width: 20px; height: 20px; fill: none; stroke: var(--pn-mute); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .pn-sheet .row[aria-current="page"] { background: var(--pn-card-2); }
  .pn-sheet .row[aria-current="page"] svg { stroke: var(--pn-hot); }
  .pn-sheet .row.out, .pn-sheet .row.out svg { color: var(--pn-bad); stroke: var(--pn-bad); }
}

/* CRM en celular: pestañas con conteo en lugar de tres columnas */
.pn-seg { display: none; }
@media (max-width: 767px) {
  html.pn-on .pn-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; margin-bottom: .8rem; border: 1px solid var(--pn-line-strong); border-radius: 12px; }
  html.pn-on .pn-seg-b { appearance: none; border: 0; background: none; font: 500 .72rem/1.2 var(--pn-f); color: var(--pn-mute); padding: .55rem .2rem; border-radius: 9px; cursor: pointer; }
  html.pn-on .pn-seg-b b { display: block; font: 500 .68rem/1 var(--pn-mono); margin-top: .25rem; }
  html.pn-on .pn-seg-b[aria-selected="true"] { background: var(--pn-chip); color: var(--pn-chip-ink); }
  html.pn-on .crm-column.pn-off { display: none; }
  html.pn-on .crm-column-head { display: none; }
  html.pn-on .crm-board { display: block; }
}

/* Celular: ajustes que evitan desbordes horizontales */
@media (max-width: 767px) {
  html.pn-on .campaigns-wrap { align-items: stretch; }
  html.pn-on .campaigns-sidebar { max-width: 100%; min-width: 0; }
  html.pn-on .campaigns-main { min-width: 0; width: 100%; }
  html.pn-on .dash-listing { grid-template-columns: minmax(0, 1fr) auto; }
  html.pn-on .dash-listing > .dash-listing-actions { grid-column: 1 / -1; margin-top: .6rem; justify-content: flex-start; flex-wrap: wrap; }
  html.pn-on .dash-listing:has(> .dash-listing-art) { grid-template-columns: 56px minmax(0, 1fr) auto; }
  html.pn-on .pn-actions { flex-wrap: wrap; }
  html.pn-on .page-header-row { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  html.pn-on .pn-tabs { margin-inline: 0 !important; padding-inline: 1rem !important; max-width: 100%; box-sizing: border-box; }
}

/* Celular: hoja "Más" que se cierra deslizando, pestañas de Campañas parejas y sin parpadeo al cargar */
@media (max-width: 767px) {
  html.pn-on .pn-sheet { overscroll-behavior: contain; }
  html.pn-on .pn-sheet .grab { width: 100%; height: auto; background: none; margin: 0; padding: .55rem 0 .9rem; position: relative; }
  html.pn-on .pn-sheet .grab::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 9px; background: var(--pn-line-strong); margin: 0 auto; }
  html.pn-on .campaigns-sidebar { align-items: center; padding: .15rem 0 .7rem; }
  html.pn-on .campaigns-side-btn,
  html.pn-on .campaigns-side-btn[style] { margin: 0 !important; height: 40px !important; padding: 0 .9rem !important; border-top: 1px solid transparent !important; box-shadow: none !important; }
  html.pn-on .campaigns-side-btn.is-active { border-color: var(--pn-line-strong) !important; }
  html.pn-on .pn-topbar { position: relative; z-index: 90; }
  html.pn-pre body::before { content: ""; position: fixed; inset: 0; z-index: 89; background: var(--pn-canvas, #0b0909); }
}

/* Selector de comodidades desplegable (publicar): cerrado por defecto, muestra cuántas hay marcadas */
.amen-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; min-height: 56px; padding: .6rem 1rem; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--pn-line-strong); background: var(--pn-card-2, var(--pn-card)); color: var(--pn-text); font: inherit;
}
.amen-toggle > span { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.amen-toggle b { font-size: .95rem; font-weight: 700; }
.amen-toggle small { font-size: .8rem; color: var(--pn-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amen-toggle.has-value small { color: var(--pn-hot); font-weight: 600; }
.amen-toggle svg { flex-shrink: 0; transition: transform .2s; }
.amen-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.amen-toggle + .amen-picker { margin-top: .6rem; }