/*
 * ═══════════════════════════════════════════════════════════════
 *  PLUM BLOSSOM — C2 Design System
 *  Complete UI framework for FISMRD Back-office
 *  Single CSS file: replaces lx-design, custom, tailwind, etc.
 * ═══════════════════════════════════════════════════════════════
 */

/* PERF: fuentes self-hosted (subset latin, woff2, mismo origen). Antes se
   cargaban por CDN (fonts.googleapis + gstatic): ~870ms render-blocking + 2
   handshakes externos + la cara DM Sans 300 nunca usada. Ahora font-display:
   swap desde /static/fonts. El peso 800 (LCP del hero) se preloadea en el
   <head>. No hay que tocar el CSS de consumo: body ya usa 'DM Sans' y
   --font-mono ya es 'JetBrains Mono'. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: optional; src: url('../fonts/dm-sans-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/dm-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/dm-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: optional; src: url('../fonts/dm-sans-800.woff2') format('woff2'); }
@font-face { font-family: 'Sarpanch'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/sarpanch-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }

/* Fallback con métricas ajustadas a DM Sans, POR PESO (CLS webfont 2026-07-11).
   size-adjust calibrado EMPÍRICAMENTE en Chrome: ancho(DM Sans peso) /
   ancho(Arial reg|bold) sobre corpus representativo (nombres de producto,
   precios RD$, frases ES); ascent/descent de DM Sans (99.2% / 31%) DIVIDIDOS
   por el size-adjust de cada cara (convención fontaine/next-font: size-adjust
   también escala los overrides). Un solo size-adjust global (antes 105.93%,
   ascent sin dividir) dejaba el fallback 4-6% más ancho que la webfont →
   re-wrap al swap → CLS flaky 0.02-0.03 en hero/.tumbe. Pesos 400/500 caen
   en Arial regular; 600-900 en Arial Bold (sin bold sintética).
   MANTENER EN SYNC con el bloque inline de landing/_critical_css.html. */
@font-face { font-family: 'DM Sans Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); size-adjust: 100.77%; ascent-override: 98.44%; descent-override: 30.76%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; font-weight: 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); size-adjust: 102.29%; ascent-override: 96.97%; descent-override: 30.30%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); size-adjust: 99.28%; ascent-override: 99.92%; descent-override: 31.22%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); size-adjust: 100.67%; ascent-override: 98.54%; descent-override: 30.79%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; font-weight: 800 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); size-adjust: 98.90%; ascent-override: 100.30%; descent-override: 31.35%; line-gap-override: 0%; }

@layer tokens, reset, typography, layout, components, pages, utilities;

/* ═══════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════ */
@layer tokens {

  :root,
  [data-theme="light"] {
    color-scheme: light;

    /* ── Brand (unificado a #7c3aed — Aurora Glass) ── */
    --brand:        #7c3aed;
    --brand-hover:  #6d28d9;
    --brand-soft:   #efe9ff;
    --brand-vivid:  #a78bfa;
    --brand-grad:   linear-gradient(135deg, #7c3aed, #a78bfa);
    /* RGB del brand para glows/sombras tintadas: rgba(var(--shadow-brand-rgb), a) */
    --shadow-brand-rgb: 124,58,237;

    /* ── Surfaces ── */
    --surface-0: #fefcff;
    --surface-1: #fdf8fc;
    --surface-2: #f5edf4;
    --surface-3: #ede3ec;

    /* ── Borders ── */
    --border:       #f0e4ee;
    --border-strong: #e0d0de;
    --ring:         #7c3aed;

    /* ── Ink ── */
    --ink:       #2d1f3d;
    --ink-soft:  #6b5580;
    --ink-faint: #b5a3c2;
    --text:      #2d1f3d;
    --text-soft: #6b5580;
    --text-faint:#b5a3c2;

    /* ── Semantic ── */
    --ok:       #16a34a;  --ok-soft:   #f0fdf4;
    --warn:     #d97706;  --warn-soft: #fffbeb;
    --err:      #dc2626;  --err-soft:  #fef2f2;
    --info:     #2563eb;  --info-soft: #eff6ff;

    /* ── Pares "on-" y piso de control no textual (contrato de contraste) ──
       --brand-on / --err-on son la TINTA que va encima de un relleno de marca o
       de error. No pueden ser #fff fijo: en oscuro --brand (#a78bfa) y --err
       (#f87171) son variantes CLARAS, pensadas como color de texto sobre fondo
       oscuro, y el blanco encima cae a 2.72:1 / 2.77:1 → falla 1.4.3 AA. Cada
       tema declara su propia tinta y el par siempre cierra.
       --control-dim cubre un escalón que no existía: --border es decorativo
       (1.21:1 contra el fondo del hero) y --ink-soft es grado texto (6.36:1); un
       control NO textual (barras de carrusel, tracks) necesita ≥3:1 por 1.4.11
       sin gritar como si fuera texto. */
    --brand-on:    #ffffff;  /* sobre --brand #7c3aed → 5.70:1 */
    --err-on:      #ffffff;  /* sobre --err   #dc2626 → 4.83:1 */
    --control-dim: #8f7ea0;  /* sobre --surface-0 → 3.64:1 (hero tintado 3.37:1) */

    /* Stops intermedios del "Chromatographic Sweep" del hero (firma de marca
       autorizada, ver DESIGN.md). Vivían crudos en la plantilla, fuera del
       sistema; aquí entran como token con valor propio por tema. En claro son
       EXACTAMENTE los originales → el hero no cambia un pixel. */
    --brand-sweep-1: #d946ef;
    --brand-sweep-2: #6366f1;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px rgba(45,31,61,.04);
    --shadow-sm:  0 2px 6px rgba(45,31,61,.05), 0 1px 2px rgba(45,31,61,.03);
    --shadow:     0 4px 12px rgba(45,31,61,.07), 0 1px 3px rgba(45,31,61,.04);
    --shadow-md:  0 6px 20px rgba(45,31,61,.09), 0 2px 6px rgba(45,31,61,.04);
    --shadow-lg:  0 12px 36px rgba(45,31,61,.12), 0 4px 8px rgba(45,31,61,.04);
    --shadow-glass: 0 4px 24px rgba(124,58,237,.07);

    /* ── Overlay ── */
    --overlay: rgba(45,31,61,.45);
  }

  [data-theme="dark"] {
    color-scheme: dark;

    --brand:        #a78bfa;
    --brand-hover:  #7c3aed;
    --brand-soft:   rgba(124,58,237,.14);
    --brand-vivid:  #c4b5fd;
    --brand-grad:   linear-gradient(135deg, #a78bfa, #c4b5fd);
    --shadow-brand-rgb: 167,139,250;

    --surface-0: #16121f;
    --surface-1: #1c1726;
    --surface-2: #201b30;
    --surface-3: #28213a;

    --border:       #302842;
    --border-strong: #3d3255;
    --ring:         #a78bfa;

    --ink:       #ede4f5;
    --ink-soft:  #a89ab8;
    --ink-faint: #5c4d70;
    --text:      #ede4f5;
    --text-soft: #a89ab8;
    --text-faint:#5c4d70;

    --ok:   #4ade80;  --ok-soft:   rgba(74,222,128,.10);
    --warn: #fbbf24;  --warn-soft: rgba(251,191,36,.10);
    --err:  #f87171;  --err-soft:  rgba(248,113,113,.10);
    --info: #60a5fa;  --info-soft: rgba(96,165,250,.10);

    /* Pares "on-" del tema oscuro: aquí --brand y --err son los claros del par,
       así que la tinta que va ENCIMA es la superficie más oscura, no blanco
       (blanco medido: 2.72:1 sobre brand, 2.77:1 sobre err). Se apunta a
       --surface-0 en vez de a un hex suelto para que el par siga cerrando si el
       fondo del tema se retoca. Ver el bloque claro para el contrato. */
    --brand-on:    var(--surface-0);  /* #16121f sobre --brand #a78bfa → 6.77:1 */
    --err-on:      var(--surface-0);  /* #16121f sobre --err   #f87171 → 6.66:1 */
    --control-dim: #7b6a92;           /* sobre --surface-0 → 3.79:1 (hero tintado 3.55:1) */

    /* El sweep en oscuro NO puede reusar los stops claros: #6366f1 abre un pozo
       de luminancia (4.11:1) justo en medio de un texto cuyo resto va a 6-7:1, y
       se lee como si el nombre del producto se apagara. Los hermanos 400 de los
       mismos matices mantienen la banda (mín. 6.16:1). */
    --brand-sweep-1: #e879f9;
    --brand-sweep-2: #818cf8;

    --shadow-xs:  0 1px 2px rgba(0,0,0,.20);
    --shadow-sm:  0 2px 6px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.12);
    --shadow:     0 4px 12px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.12);
    --shadow-md:  0 6px 20px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.12);
    --shadow-lg:  0 12px 36px rgba(0,0,0,.38), 0 4px 8px rgba(0,0,0,.12);
    --shadow-glass: 0 4px 24px rgba(168,85,247,.08);

    --overlay: rgba(10,8,14,.60);
  }

  /* ── Shared tokens ── */
  :root {
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius:      10px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 999px;
    --radius-full: 50%;

    --ease:     cubic-bezier(.4,0,.2,1);
    --duration: 200ms;
    --fast:     120ms;
    --slow:     300ms;

    --sidebar-w:   240px;
    --topbar-h:    56px;
    --bottomnav-h: 64px;
    --content-max: 1280px;
    /* Gutter horizontal UNICO del backoffice: lo comparten topbar, page-header y
       contenido para que todo quede alineado al mismo borde. Es pequeno a
       proposito (el contenido llena el resto del ancho y crece hasta 4K). Escala
       poco en pantallas muy anchas (ver media queries). */
    --gutter: 32px;

    /* ── Spacing scale ── */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Spacing aliases (inline form styles) ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* ── Font stacks ── */
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal:     500;
    --z-toast:     600;
    --z-tooltip:   700;
  }
}

/* ═══════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════ */
@layer reset {

  *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    height: 100%;
    /* Evita scroll horizontal por el menu off-canvas movil (position:fixed,
       translateX(100%)). 'clip' (no 'hidden') no crea contenedor de scroll,
       asi que NO rompe position:sticky (buscador faq, sidebar catalogo). */
    overflow-x: clip;
    /* Overscroll/rubber-band (iOS/trackpad): sin esto el navegador pinta el
       canvas BLANCO al rebasar el footer. Se usa el color del footer para que
       el rebote inferior se funda con él (arriba la diferencia surface-2 vs
       surface-0 es imperceptible en ambos temas). */
    background-color: var(--surface-2);
  }
  html[data-theme="dark"] {
    /* El footer oscuro usa surface-1 — el rebote debe fundirse con él. */
    background-color: var(--surface-1);
  }

  body {
    min-height: 100dvh;
    line-height: 1.55;
    background: var(--surface-0);
    color: var(--ink);
    font-family: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: .875rem;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  }

  img,picture,video,canvas,svg { display: block; max-width: 100%; }
  input,button,textarea,select { font: inherit; color: inherit; }
  a { color: var(--brand); text-decoration: none; transition: color var(--fast) var(--ease); }
  a:hover { color: var(--brand-hover); }
  button { cursor: pointer; border: none; background: none; }
  table { border-collapse: collapse; width: 100%; }
  h1,h2,h3,h4,h5,h6 { line-height: 1.25; font-weight: 600; color: var(--ink); }
  ul,ol { list-style: none; }
  hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  ::selection    { background: var(--brand-soft); color: var(--brand); }
  ::placeholder  { color: var(--ink-soft); opacity: 1; }

  ::-webkit-scrollbar       { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track  { background: transparent; }
  ::-webkit-scrollbar-thumb  { background: var(--ink-faint); border-radius: var(--radius-pill); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

  dialog { border: none; padding: 0; background: transparent; }
  dialog::backdrop { background: var(--overlay); }
  fieldset { border: none; }
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */
@layer typography {

  .font-sans  { font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; }
  .font-mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9em; }

  .text-hero   { font-size: 2rem;     font-weight: 700; letter-spacing: -.02em; }
  .text-h1     { font-size: 1.5rem;   font-weight: 700; letter-spacing: -.01em; }
  .text-h2     { font-size: 1.25rem;  font-weight: 600; }
  .text-h3     { font-size: 1.125rem; font-weight: 600; }
  .text-h4     { font-size: 1rem;     font-weight: 600; }
  .text-body   { font-size: .875rem;  line-height: 1.6; }
  .text-sm     { font-size: .8125rem; line-height: 1.5; }
  .text-xs     { font-size: .75rem;   line-height: 1.5; }
  .text-tiny   { font-size: .625rem;  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
  .text-label  { font-size: .75rem;   font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

  .text-brand  { color: var(--brand); }
  .text-soft   { color: var(--ink-soft); }
  .text-faint  { color: var(--ink-faint); }
  .text-ok     { color: var(--ok); }
  .text-warn   { color: var(--warn); }
  .text-err    { color: var(--err); }
  .text-info   { color: var(--info); }

  .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .text-balance  { text-wrap: balance; }
  .text-center   { text-align: center; }
  .text-right    { text-align: right; }
  .text-left     { text-align: left; }
  .text-nowrap   { white-space: nowrap; }
  .uppercase     { text-transform: uppercase; }
  .capitalize    { text-transform: capitalize; }
  .line-through  { text-decoration: line-through; }
  .underline     { text-decoration: underline; }

  .font-normal   { font-weight: 400; }
  .font-medium   { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold     { font-weight: 700; }
}

/* ═══════════════════════════════════════════
   LAYOUT — Shell, Sidebar, Topbar, Content
   ═══════════════════════════════════════════ */
@layer layout {

  /* ── App shell ── */
  .pl-shell {
    display: grid;
    min-height: 100dvh;
    grid-template-rows: var(--topbar-h) 1fr;
    /* minmax(0,1fr): el track de contenido puede ENCOGER por debajo del ancho
       intrinseco de su contenido. Con 1fr (min-width:auto) una tabla ancha
       expandia el track mas alla del viewport y arrastraba la topbar sticky,
       causando scroll horizontal en movil. Ahora la tabla hace scroll DENTRO de
       su .pl-table-wrap (overflow-x:auto) y la pagina no se desborda. */
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-areas:
      "sidebar topbar"
      "sidebar content";
  }

  @media (max-width: 1023px) {
    .pl-shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--topbar-h) 1fr var(--bottomnav-h);
      grid-template-areas:
        "topbar"
        "content"
        "bottomnav";
    }
  }

  /* ── Sidebar ── */
  .pl-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--sidebar-w);
    background: var(--surface-1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: var(--z-sticky);
    transition: transform var(--slow) var(--ease);
  }

  .pl-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    height: var(--topbar-h);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    flex-shrink: 0;
  }

  .pl-sidebar__logo img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
  }

  .pl-sidebar__section {
    padding: 16px 12px 8px;
  }

  .pl-sidebar__title {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-faint);
    padding: 0 8px 8px;
  }

  .pl-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: .875rem;
    font-weight: 500;
    transition: all var(--fast) var(--ease);
    text-decoration: none;
    margin-bottom: 2px;
  }
  .pl-sidebar__link:hover {
    background: var(--surface-2);
    color: var(--ink);
  }
  .pl-sidebar__link.active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
  }
  .pl-sidebar__link svg,
  .pl-sidebar__link i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .7;
  }
  .pl-sidebar__link.active svg,
  .pl-sidebar__link.active i { opacity: 1; }

  .pl-sidebar__footer {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--border);
  }

  @media (max-width: 1023px) {
    .pl-sidebar {
      display: none;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: var(--z-modal);
      transform: translateX(-100%);
    }
    .pl-sidebar.open {
      display: flex;
      transform: translateX(0);
    }
    .pl-sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: calc(var(--z-modal) - 1);
    }
    .pl-sidebar-overlay.open { display: block; }
  }

  /* ── Topbar ── */
  .pl-topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    height: var(--topbar-h);
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter);
    gap: 16px;
    z-index: var(--z-sticky);
  }

  .pl-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }

  .pl-topbar__burger {
    display: none;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: var(--radius);
    color: var(--ink-soft);
    transition: background var(--fast) var(--ease);
  }
  .pl-topbar__burger:hover { background: var(--surface-2); }

  @media (max-width: 1023px) {
    .pl-topbar__burger { display: flex; }
  }

  .pl-topbar__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pl-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .pl-topbar__icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    color: var(--ink-soft);
    position: relative;
    transition: all var(--fast) var(--ease);
  }
  .pl-topbar__icon-btn:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  .pl-topbar__badge {
    position: absolute;
    top: 4px; right: 4px;
    width: 8px; height: 8px;
    background: var(--err);
    border-radius: var(--radius-full);
    border: 2px solid var(--surface-0);
  }

  .pl-topbar__avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--brand-soft);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: .75rem;
    cursor: pointer;
    transition: box-shadow var(--fast) var(--ease);
  }
  .pl-topbar__avatar:hover { box-shadow: 0 0 0 2px var(--brand); }

  /* ── Bottom Nav (mobile) ── */
  .pl-bottomnav {
    display: none;
    grid-area: bottomnav;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottomnav-h);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    z-index: var(--z-sticky);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .pl-bottomnav__list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    padding: 0 4px;
  }

  .pl-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: var(--radius);
    color: var(--ink-faint);
    font-size: .625rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--fast) var(--ease);
    min-width: 56px;
  }
  .pl-bottomnav__item svg,
  .pl-bottomnav__item i { width: 22px; height: 22px; }
  .pl-bottomnav__item:hover { color: var(--ink-soft); }
  .pl-bottomnav__item.active { color: var(--brand); }

  @media (max-width: 1023px) {
    .pl-bottomnav { display: block; }
  }

  /* ── Main content ── */
  .pl-content {
    grid-area: content;
    padding: 24px var(--gutter);
    overflow-x: hidden;
    min-width: 0;
  }
  /* El contenido LLENA el ancho disponible (escala hasta 4K) en vez de toparse en
     1280px y dejar grandes margenes en blanco a los lados. En pantallas muy anchas
     subimos el padding lateral para dar aire sin desperdiciar el espacio. Las
     grillas fluidas (.pl-grid auto-fit) reparten ese ancho en mas columnas. */
  .pl-content > .pl-content__inner {
    max-width: 100%;
    margin: 0;
  }

  /* El gutter (compartido con la topbar) escala poco en pantallas muy anchas:
     el contenido crece, y topbar + page-header + contenido siguen alineados. */
  @media (min-width: 2000px) { :root { --gutter: 40px; } }
  @media (min-width: 3200px) { :root { --gutter: 56px; } }

  @media (max-width: 1023px) {
    :root { --gutter: 16px; }
    .pl-content { padding-bottom: calc(var(--bottomnav-h) + 16px); }
  }

  /* ── Page header ── */
  .pl-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .pl-page-header__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .pl-page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
  }
  .pl-page-header__subtitle {
    font-size: .8125rem;
    color: var(--ink-soft);
  }
  .pl-page-header__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  @media (max-width: 639px) {
    .pl-page-header { flex-direction: column; align-items: flex-start; }
    .pl-page-header__actions { width: 100%; }
    .pl-page-header__actions .pl-btn { flex: 1; }
  }

  /* ── Grid system ── FLUIDO y adaptable a cualquier pantalla.
     repeat(auto-fit, minmax(min(Xpx,100%), 1fr)): las columnas se reflujan SOLAS
     segun el ancho disponible (4 -> 3 -> 2 -> 1) sin breakpoints rigidos; cada
     tarjeta nunca baja de X px y reparte el resto del espacio. El min(Xpx,100%)
     evita que la columna desborde en pantallas mas angostas que X.
     (auto-fit + minmax tambien resuelve el grid-blowout con .text-truncate.) */
  .pl-grid { display: grid; gap: 24px; }
  .pl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .pl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .pl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .pl-grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; }

  .pl-col-span-2 { grid-column: span 2; }
  .pl-col-span-3 { grid-column: span 3; }
  .pl-col-span-full { grid-column: 1 / -1; }

  @media (max-width: 639px) {
    .pl-col-span-2,
    .pl-col-span-3,
    .pl-col-span-full { grid-column: span 1; }
  }

  /* ── Container ── */
  .pl-container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (max-width: 639px) { .pl-container { padding: 0 16px; } }
}

/* ═══════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════ */
@layer components {

  /* ──────────── BUTTONS ──────────── */
  .pl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--fast) var(--ease);
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
  }
  .pl-btn svg,.pl-btn i { width: 16px; height: 16px; flex-shrink: 0; }
  .pl-btn:disabled,.pl-btn.disabled {
    opacity: .5; pointer-events: none;
  }

  /* Primary — sólido morado (igual que el Hero; antes gradiente) */
  .pl-btn--primary {
    background: var(--brand);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-xs), 0 1px 3px rgba(var(--shadow-brand-rgb),.2);
  }
  .pl-btn--primary:hover {
    background: var(--brand-hover);
    box-shadow: 0 12px 28px rgba(var(--shadow-brand-rgb),.28);
    transform: translateY(-2px);
  }
  .pl-btn--primary:active { transform: translateY(0); }

  /* Secondary — outlined (hover con lift simétrico, igual que el Hero) */
  .pl-btn--secondary {
    background: var(--surface-0);
    color: var(--ink);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
  }
  .pl-btn--secondary:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  /* Respeta reduced-motion: sin desplazamiento vertical */
  @media (prefers-reduced-motion: reduce) {
    .pl-btn:hover, .pl-btn:active { transform: none; }
  }

  /* Ghost */
  .pl-btn--ghost {
    background: transparent;
    color: var(--ink-soft);
  }
  .pl-btn--ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  /* Danger */
  .pl-btn--danger {
    background: var(--err);
    color: #fff;
    box-shadow: var(--shadow-xs);
  }
  .pl-btn--danger:hover { filter: brightness(1.1); }

  /* Danger ghost */
  .pl-btn--danger-ghost {
    background: transparent;
    color: var(--err);
  }
  .pl-btn--danger-ghost:hover { background: var(--err-soft); }

  /* Sizes */
  .pl-btn--xs { padding: 5px 10px; font-size: .75rem; gap: 4px; border-radius: var(--radius-sm); }
  .pl-btn--xs svg,.pl-btn--xs i { width: 14px; height: 14px; }
  .pl-btn--sm { padding: 7px 14px; font-size: .8125rem; gap: 6px; }
  .pl-btn--lg { padding: 12px 24px; font-size: 1rem; gap: 10px; }

  /* Icon-only */
  .pl-btn--icon {
    padding: 8px;
    aspect-ratio: 1;
    min-width: 36px;
  }
  .pl-btn--icon.pl-btn--xs { padding: 5px; min-width: 28px; }
  .pl-btn--icon.pl-btn--sm { padding: 6px; min-width: 32px; }
  .pl-btn--icon.pl-btn--lg { padding: 10px; min-width: 44px; }

  /* ──────────── CARDS ──────────── */
  .pl-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }

  [data-theme="light"] .pl-card { box-shadow: var(--shadow-glass); }

  .pl-card--hover:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
  }
  .pl-card--flat { box-shadow: none !important; }
  .pl-card--flush { padding: 0; }

  .pl-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .pl-card__header--flush { padding-bottom: 0; border-bottom: none; margin-bottom: 12px; }
  .pl-card__title { font-size: 1rem; font-weight: 600; color: var(--ink); }
  .pl-card__body { /* no special styles needed */ }
  .pl-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  /* ──────────── FORM CONTROLS ──────────── */
  .pl-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pl-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .pl-label__required { color: var(--err); font-size: .875rem; }
  .pl-label__hint {
    font-weight: 400;
    color: var(--ink-faint);
    font-size: .75rem;
    margin-left: auto;
  }

  .pl-input,
  .pl-select,
  .pl-textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--ink);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  }
  .pl-input:hover, .pl-select:hover, .pl-textarea:hover { border-color: var(--border-strong); }
  .pl-input:focus, .pl-select:focus, .pl-textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
  }
  .pl-input.is-invalid, .pl-select.is-invalid, .pl-textarea.is-invalid {
    border-color: var(--err);
    box-shadow: 0 0 0 3px var(--err-soft);
  }
  .pl-input.is-valid, .pl-select.is-valid, .pl-textarea.is-valid {
    border-color: var(--ok);
    box-shadow: 0 0 0 3px var(--ok-soft);
  }
  .pl-input:disabled, .pl-select:disabled, .pl-textarea:disabled {
    background: var(--surface-2);
    color: var(--ink-faint);
    cursor: not-allowed;
  }
  .pl-input--sm, .pl-select--sm { padding: 6px 10px; font-size: .8125rem; }
  .pl-input--lg, .pl-select--lg { padding: 12px 16px; font-size: 1rem; }
  .pl-textarea { resize: vertical; min-height: 80px; }

  /* En pantallas anchas, un input de una sola columna no debe estirarse de forma
     absurda (llegaba a 2000px+ en 2560/4K). Se limita a un ancho legible; las
     grillas de campos (.pl-grid--N) siguen repartiendo en columnas y la pagina
     sigue llenando el ancho. Por debajo de 1400px no aplica (no afecta laptops). */
  @media (min-width: 1400px) {
    .pl-input, .pl-select, .pl-textarea { max-width: 900px; }
  }

  .pl-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b5580' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }

  .pl-help-text { font-size: .75rem; color: var(--ink-faint); }
  .pl-error-text { font-size: .75rem; color: var(--err); }

  /* Input with icon */
  .pl-input-group {
    position: relative;
    display: flex;
    align-items: center;
  }
  .pl-input-group .pl-input { padding-left: 36px; }
  .pl-input-group__icon {
    position: absolute;
    left: 12px;
    width: 16px; height: 16px;
    color: var(--ink-faint);
    pointer-events: none;
    z-index: 1;
  }
  .pl-input-group__right {
    position: absolute;
    right: 12px;
    color: var(--ink-faint);
    z-index: 1;
  }

  /* Input addons */
  .pl-input-addon {
    display: flex;
    align-items: stretch;
  }
  .pl-input-addon .pl-input {
    border-radius: 0;
    flex: 1;
  }
  .pl-input-addon .pl-input:first-child  { border-radius: var(--radius) 0 0 var(--radius); }
  .pl-input-addon .pl-input:last-child   { border-radius: 0 var(--radius) var(--radius) 0; }
  .pl-input-addon__prefix,
  .pl-input-addon__suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .8125rem;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .pl-input-addon__prefix { border-right: none; border-radius: var(--radius) 0 0 var(--radius); }
  .pl-input-addon__suffix { border-left: none;  border-radius: 0 var(--radius) var(--radius) 0; }

  /* Checkbox / radio */
  .pl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .875rem;
  }
  .pl-check input[type="checkbox"],
  .pl-check input[type="radio"] {
    appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-0);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--fast) var(--ease);
    position: relative;
  }
  .pl-check input[type="radio"] { border-radius: var(--radius-full); }
  .pl-check input:checked {
    background: var(--brand);
    border-color: var(--brand);
  }
  .pl-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 6px; height: 10px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
  }
  .pl-check input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: var(--radius-full);
  }

  /* Toggle switch */
  .pl-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .875rem;
  }
  .pl-toggle input { display: none; }
  .pl-toggle__track {
    width: 40px; height: 22px;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    position: relative;
    transition: background var(--fast) var(--ease);
  }
  .pl-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    transition: transform var(--fast) var(--ease);
  }
  .pl-toggle input:checked + .pl-toggle__track { background: var(--brand); }
  .pl-toggle input:checked + .pl-toggle__track::after { transform: translateX(18px); }

  /* ──────────── TABLES ──────────── */
  .pl-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
  }
  [data-theme="light"] .pl-table-wrap { box-shadow: var(--shadow-glass); }

  .pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
  }
  .pl-table thead { background: var(--surface-2); }
  .pl-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .pl-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    vertical-align: middle;
  }
  .pl-table tbody tr { transition: background var(--fast) var(--ease); }
  .pl-table tbody tr:hover { background: var(--surface-2); }
  .pl-table tbody tr:last-child td { border-bottom: none; }

  .pl-table--striped tbody tr:nth-child(even) { background: var(--surface-2); }
  .pl-table--compact th { padding: 8px 12px; }
  .pl-table--compact td { padding: 8px 12px; }

  .pl-table__actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
  }

  /* ── Valor monetario en tarjetas de stat ──
     Escala con el viewport y, como red de seguridad, envuelve antes que
     desbordar la tarjeta (números grandes tipo "RD$ 12,345,678" nunca rompen
     el layout). tabular-nums para alineación de dígitos. */
  .pl-stat__amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1rem, 0.72rem + 0.6vw, 1.3rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ── Tablas responsive (mobile-first) ──
     En <=768px cada fila se apila como TARJETA y cada celda muestra su etiqueta
     (data-label) a la izquierda + el valor a la derecha. Requiere data-label en
     cada <td>. Reemplaza el scroll horizontal por tarjetas legibles en movil. */
  @media (max-width: 768px) {
    .pl-table--responsive thead { display: none; }
    .pl-table--responsive tbody tr {
      display: block;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface-1);
      padding: 2px 14px;
      margin-bottom: 12px;
    }
    .pl-table--responsive tbody tr:hover { background: var(--surface-1); }
    .pl-table--responsive tbody td {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 11px 0;
      border: none;
      border-bottom: 1px solid var(--border);
      text-align: right;
      min-height: 0;
    }
    .pl-table--responsive tbody tr td:last-child { border-bottom: none; }
    .pl-table--responsive tbody td::before {
      content: attr(data-label);
      font-weight: 700;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--ink-soft);
      text-align: left;
      flex: none;
    }
    /* Celda de acciones: a la derecha, sin etiqueta vacia */
    .pl-table--responsive tbody td.pl-table__actions { justify-content: flex-end; }
    .pl-table--responsive tbody td.pl-table__actions::before { content: none; }
  }

  /* ──────────── BADGES ──────────── */
  .pl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--ink-soft);
  }
  .pl-badge svg,.pl-badge i { width: 12px; height: 12px; }
  .pl-badge--brand  { background: var(--brand-soft); color: var(--brand); }
  .pl-badge--ok     { background: var(--ok-soft);    color: var(--ok); }
  .pl-badge--warn   { background: var(--warn-soft);  color: var(--warn); }
  .pl-badge--err    { background: var(--err-soft);   color: var(--err); }
  .pl-badge--info   { background: var(--info-soft);  color: var(--info); }
  .pl-badge--lg { padding: 4px 14px; font-size: .75rem; }

  /* Dot indicator */
  .pl-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }
  .pl-dot--ok   { background: var(--ok); }
  .pl-dot--warn { background: var(--warn); }
  .pl-dot--err  { background: var(--err); }
  .pl-dot--brand { background: var(--brand); }

  /* ──────────── MODALS ──────────── */
  .pl-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--slow) var(--ease), visibility var(--slow) var(--ease);
  }
  .pl-modal.open { opacity: 1; visibility: visible; }

  .pl-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay);
  }

  .pl-modal__dialog {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(.96) translateY(8px);
    transition: transform var(--slow) var(--ease);
    overflow: hidden;
  }
  .pl-modal.open .pl-modal__dialog { transform: scale(1) translateY(0); }
  .pl-modal__dialog--sm { max-width: 400px; }
  .pl-modal__dialog--lg { max-width: 720px; }
  .pl-modal__dialog--xl { max-width: 960px; }
  .pl-modal__dialog--full { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }

  .pl-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    gap: 12px;
  }
  .pl-modal__title { font-size: 1.125rem; font-weight: 700; }
  .pl-modal__close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    color: var(--ink-faint);
    transition: all var(--fast) var(--ease);
    flex-shrink: 0;
  }
  .pl-modal__close:hover { background: var(--surface-2); color: var(--ink); }

  .pl-modal__body {
    padding: 0 24px 20px;
    overflow-y: auto;
    flex: 1;
  }

  .pl-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
  }

  /* ──────────── DROPDOWNS ──────────── */
  .pl-dropdown {
    position: relative;
    display: inline-block;
  }
  .pl-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all var(--fast) var(--ease);
  }
  .pl-dropdown__menu.open {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .pl-dropdown__menu--left { right: auto; left: 0; }

  .pl-dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: background var(--fast) var(--ease);
  }
  .pl-dropdown__item:hover { background: var(--surface-2); }
  .pl-dropdown__item--danger { color: var(--err); }
  .pl-dropdown__item--danger:hover { background: var(--err-soft); }
  .pl-dropdown__item svg,.pl-dropdown__item i { width: 16px; height: 16px; opacity: .6; }

  .pl-dropdown__divider { height: 1px; background: var(--border); margin: 4px 0; }

  /* ──────────── TABS ──────────── */
  .pl-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .pl-tab {
    padding: 10px 16px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink-faint);
    border-bottom: 2px solid transparent;
    transition: all var(--fast) var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .pl-tab:hover { color: var(--ink-soft); }
  .pl-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
  }

  .pl-tab-panel { display: none; padding-top: 20px; }
  .pl-tab-panel.active { display: block; }

  /* ──────────── ALERTS ──────────── */
  .pl-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: .8125rem;
    line-height: 1.5;
  }
  .pl-alert svg,.pl-alert i { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
  .pl-alert--ok   { background: var(--ok-soft);   color: var(--ok); }
  .pl-alert--warn { background: var(--warn-soft); color: var(--warn); }
  .pl-alert--err  { background: var(--err-soft);  color: var(--err); }
  .pl-alert--info { background: var(--info-soft); color: var(--info); }
  .pl-alert__content { flex: 1; }
  .pl-alert__title { font-weight: 600; margin-bottom: 4px; }
  .pl-alert__close {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    opacity: .6;
    flex-shrink: 0;
    transition: opacity var(--fast) var(--ease);
  }
  .pl-alert__close:hover { opacity: 1; }

  /* ──────────── STAT CARDS ──────────── */
  .pl-stat {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  [data-theme="light"] .pl-stat { box-shadow: var(--shadow-glass); }

  .pl-stat__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pl-stat__label svg,.pl-stat__label i { width: 16px; height: 16px; opacity: .6; }

  .pl-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.1;
  }
  .pl-stat__change {
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .pl-stat__change--up   { color: var(--ok); }
  .pl-stat__change--down { color: var(--err); }

  /* ──────────── AVATAR ──────────── */
  .pl-avatar {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: var(--brand-soft);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: .8125rem;
    flex-shrink: 0;
    overflow: hidden;
  }
  .pl-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pl-avatar--xs { width: 24px; height: 24px; font-size: .625rem; }
  .pl-avatar--sm { width: 30px; height: 30px; font-size: .75rem; }
  .pl-avatar--lg { width: 48px; height: 48px; font-size: 1rem; }
  .pl-avatar--xl { width: 64px; height: 64px; font-size: 1.25rem; }

  /* ──────────── TOAST ──────────── */
  .pl-toast-container {
    position: fixed;
    top: 16px; right: 16px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
  }
  @media (max-width: 639px) {
    .pl-toast-container { top: auto; bottom: calc(var(--bottomnav-h) + 16px); left: 16px; right: 16px; max-width: 100%; }
  }

  .pl-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: .8125rem;
    pointer-events: all;
    animation: pl-toast-in var(--slow) var(--ease);
  }
  /* Semántica por tinte de fondo + borde completo (no side-stripe). */
  .pl-toast--ok   { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: var(--ok-soft); }
  .pl-toast--err  { border-color: color-mix(in srgb, var(--err) 40%, var(--border)); background: var(--err-soft); }
  .pl-toast--warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: var(--warn-soft); }
  .pl-toast--info { border-color: color-mix(in srgb, var(--info) 40%, var(--border)); background: var(--info-soft); }

  @keyframes pl-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes pl-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
  }
  .pl-toast__close {
    color: var(--ink-faint);
    padding: 2px;
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    transition: color var(--fast) var(--ease);
  }
  .pl-toast__close:hover { color: var(--ink); }

  /* ──────────── NOTIFICATION DROPDOWN ──────────── */
  .pl-notif-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all var(--fast) var(--ease);
    display: flex;
    flex-direction: column;
  }
  .pl-notif-dropdown.open {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  @media (max-width: 479px) {
    .pl-notif-dropdown {
      position: fixed;
      top: var(--topbar-h);
      left: 8px; right: 8px;
      width: auto;
    }
  }

  .pl-notif__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .pl-notif__header-title {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ink);
  }
  .pl-notif__header-count {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .pl-notif__header-action {
    font-size: .75rem;
    font-weight: 500;
    color: var(--brand);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: opacity var(--fast) var(--ease);
  }
  .pl-notif__header-action:hover { opacity: .7; }

  .pl-notif__list {
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
  }

  .pl-notif__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-soft, var(--border));
    transition: background var(--fast) var(--ease);
  }
  .pl-notif__item:last-child { border-bottom: none; }
  .pl-notif__item:hover { background: var(--surface-2); }
  .pl-notif__item--unread { background: var(--brand-soft); }
  .pl-notif__item--unread:hover { background: var(--surface-2); }

  .pl-notif__icon {
    width: 32px; height: 32px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .75rem;
  }
  .pl-notif__icon--info { background: var(--info-soft, rgba(59,130,246,.1)); color: var(--info); }
  .pl-notif__icon--ok   { background: var(--ok-soft, rgba(34,197,94,.1)); color: var(--ok); }
  .pl-notif__icon--warn { background: var(--warn-soft, rgba(234,179,8,.1)); color: var(--warn); }
  .pl-notif__icon--err  { background: var(--err-soft, rgba(239,68,68,.1)); color: var(--err); }

  .pl-notif__content { flex: 1; min-width: 0; }
  .pl-notif__title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  .pl-notif__message {
    font-size: .75rem;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pl-notif__time {
    font-size: .6875rem;
    color: var(--ink-faint);
    margin-top: 4px;
  }

  .pl-notif__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--ink-faint);
    font-size: .8125rem;
  }
  .pl-notif__empty i { font-size: 1.5rem; opacity: .4; }

  .pl-notif__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
  }

  /* Badge counter (mejorado del dot basico) */
  .pl-topbar__badge-count {
    position: absolute;
    top: 0; right: 0;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--err);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    border: 2px solid var(--surface-0);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }

  /* ──────────── SPINNER ──────────── */
  .pl-spinner {
    width: 20px; height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--brand);
    border-radius: var(--radius-full);
    animation: pl-spin .6s linear infinite;
  }
  .pl-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
  .pl-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
  .pl-spinner--white { border-color: rgba(255,255,255,.3); border-top-color: #fff; }

  @keyframes pl-spin { to { transform: rotate(360deg); } }

  /* ──────────── EMPTY STATE ──────────── */
  .pl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
  }
  .pl-empty__icon {
    width: 56px; height: 56px;
    color: var(--ink-faint);
    opacity: .5;
  }
  .pl-empty__title { font-size: 1rem; font-weight: 600; color: var(--ink); }
  .pl-empty__desc  { font-size: .8125rem; color: var(--ink-soft); max-width: 360px; }

  /* ──────────── BREADCRUMBS ──────────── */
  .pl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    flex-wrap: wrap;
  }
  .pl-breadcrumb__item {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color var(--fast) var(--ease);
  }
  .pl-breadcrumb__item:hover { color: var(--brand); }
  .pl-breadcrumb__item.active { color: var(--ink); font-weight: 600; pointer-events: none; }
  .pl-breadcrumb__sep { color: var(--ink-faint); font-size: .75rem; }

  /* ──────────── PAGINATION ──────────── */
  .pl-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
  }
  .pl-pagination__btn {
    min-width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all var(--fast) var(--ease);
    padding: 0 8px;
  }
  .pl-pagination__btn:hover { background: var(--surface-2); color: var(--ink); }
  .pl-pagination__btn.active { background: var(--brand); color: #fff; }
  .pl-pagination__btn:disabled { opacity: .4; pointer-events: none; }

  /* ──────────── SEARCH BOX ──────────── */
  .pl-search {
    position: relative;
    max-width: 360px;
    width: 100%;
  }
  .pl-search__input {
    width: 100%;
    padding: 9px 12px 9px 38px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--ink);
    transition: all var(--fast) var(--ease);
  }
  .pl-search__input:hover { border-color: var(--border); }
  .pl-search__input:focus {
    outline: none;
    background: var(--surface-0);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
  }
  .pl-search__icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--ink-faint);
    pointer-events: none;
  }

  /* ──────────── PROGRESS ──────────── */
  .pl-progress {
    width: 100%;
    height: 6px;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .pl-progress__bar {
    height: 100%;
    background: var(--brand-grad);
    border-radius: var(--radius-pill);
    transition: width var(--slow) var(--ease);
  }
  .pl-progress--ok .pl-progress__bar  { background: var(--ok); }
  .pl-progress--warn .pl-progress__bar { background: var(--warn); }
  .pl-progress--err .pl-progress__bar  { background: var(--err); }

  /* ──────────── TAGS ──────────── */
  .pl-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-soft);
  }
  .pl-tag__remove {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    font-size: .625rem;
    color: var(--ink-faint);
    transition: all var(--fast) var(--ease);
  }
  .pl-tag__remove:hover { background: var(--err-soft); color: var(--err); }

  /* ──────────── FILE UPLOAD ──────────── */
  .pl-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-0);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    text-align: center;
  }
  .pl-upload:hover { border-color: var(--brand); background: var(--brand-soft); }
  .pl-upload.dragging { border-color: var(--brand); background: var(--brand-soft); }
  .pl-upload__icon { width: 40px; height: 40px; color: var(--ink-faint); }
  .pl-upload__text { font-size: .8125rem; color: var(--ink-soft); }
  .pl-upload__hint { font-size: .75rem; color: var(--ink-faint); }

  /* ──────────── IMAGE PREVIEW ──────────── */
  .pl-img-preview {
    position: relative;
    width: 80px; height: 80px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .pl-img-preview img { width: 100%; height: 100%; object-fit: cover; }
  .pl-img-preview__remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: .75rem;
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
  }
  .pl-img-preview:hover .pl-img-preview__remove { opacity: 1; }

  /* ──────────── STEPS (multi-step forms) ──────────── */
  .pl-steps {
    display: flex;
    align-items: center;
    gap: 0;
    counter-reset: step;
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 4px 0;
  }
  .pl-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink-faint);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--fast) var(--ease);
    flex-shrink: 0;
  }
  .pl-step:hover { color: var(--ink-soft); }
  .pl-step.active { color: var(--brand); font-weight: 600; }
  .pl-step.completed { color: var(--ok); }
  .pl-step__num {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    border: 2px solid var(--border);
    font-size: .6875rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all var(--fast) var(--ease);
  }
  .pl-step.active .pl-step__num { border-color: var(--brand); background: var(--brand); color: #fff; }
  .pl-step.completed .pl-step__num { border-color: var(--ok); background: var(--ok); color: #fff; }
  .pl-step__connector {
    width: 32px; height: 2px;
    background: var(--border);
    flex-shrink: 0;
  }
  .pl-step.completed + .pl-step__connector,
  .pl-step.completed ~ .pl-step__connector { background: var(--ok); }

  /* ──────────── COLLAPSIBLE SECTION ──────────── */
  .pl-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    overflow: hidden;
  }
  [data-theme="light"] .pl-section { box-shadow: var(--shadow-glass); }

  .pl-section + .pl-section { margin-top: 16px; }

  .pl-section__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    cursor: pointer;
    transition: background var(--fast) var(--ease);
    text-align: left;
  }
  .pl-section__toggle:hover { background: var(--surface-2); }
  .pl-section__toggle svg,
  .pl-section__toggle i { width: 18px; height: 18px; color: var(--ink-faint); flex-shrink: 0; transition: transform var(--duration) var(--ease); }
  .pl-section.open .pl-section__toggle svg,
  .pl-section.open .pl-section__toggle i { transform: rotate(90deg); }

  .pl-section__title { font-size: .9375rem; font-weight: 600; color: var(--ink); flex: 1; }
  .pl-section__badge { margin-left: auto; }

  .pl-section__body {
    padding: 0 20px 20px;
    display: none;
  }
  .pl-section.open .pl-section__body { display: block; }

  /* ──────────── DIVIDER ──────────── */
  .pl-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 16px 0;
  }
  .pl-divider--lg { margin: 24px 0; }

  /* ──────────── SKELETON ──────────── */
  .pl-skeleton {
    background: var(--surface-2);
    border-radius: var(--radius);
    animation: pl-shimmer 1.5s infinite;
  }
  .pl-skeleton--text { height: 14px; width: 80%; border-radius: var(--radius-sm); }
  .pl-skeleton--title { height: 20px; width: 50%; border-radius: var(--radius-sm); }
  .pl-skeleton--avatar { width: 36px; height: 36px; border-radius: var(--radius-full); }
  .pl-skeleton--btn { height: 36px; width: 100px; }
  .pl-skeleton--card { height: 120px; }

  @keyframes pl-shimmer {
    0%   { opacity: 1; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
  }

  /* ──────────── TOOLTIP ──────────── */
  [data-tooltip] {
    position: relative;
  }
  [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    padding: 6px 10px;
    background: var(--ink);
    color: var(--surface-0);
    font-size: .6875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: var(--z-tooltip);
    transition: all var(--fast) var(--ease);
  }
  [data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }

  /* ──────────── ACCORDION ──────────── */
  .pl-accordion { }
  .pl-accordion__item {
    border-bottom: 1px solid var(--border);
  }
  .pl-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: color var(--fast) var(--ease);
    text-align: left;
  }
  .pl-accordion__trigger:hover { color: var(--brand); }
  .pl-accordion__trigger svg {
    width: 16px; height: 16px;
    transition: transform var(--duration) var(--ease);
    color: var(--ink-faint);
  }
  .pl-accordion__item.open .pl-accordion__trigger svg { transform: rotate(180deg); }

  .pl-accordion__content {
    display: none;
    padding-bottom: 16px;
    font-size: .8125rem;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .pl-accordion__item.open .pl-accordion__content { display: block; }

  /* ──────────── SELECT2 OVERRIDES ──────────── */
  .select2-container--default .select2-selection--single {
    background: var(--surface-0) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink) !important;
    padding-left: 12px !important;
    font-size: .875rem !important;
  }
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--brand) !important;
    color: #fff !important;
  }
  .select2-dropdown {
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--surface-1) !important;
  }
  .select2-container--default .select2-selection--multiple {
    background: var(--surface-0) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    min-height: 38px !important;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--brand-soft) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    color: var(--brand) !important;
    font-size: .75rem !important;
    padding: 2px 8px !important;
  }

  /* ──────────── FLATPICKR OVERRIDES ──────────── */
  .flatpickr-calendar {
    background: var(--surface-1) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .flatpickr-day.selected {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
  }
  .flatpickr-day:hover {
    background: var(--brand-soft) !important;
  }
}

/* ═══════════════════════════════════════════
   PAGES — Auth, Dashboard, specific overrides
   ═══════════════════════════════════════════ */
@layer pages {

  /* ── Auth pages (login/register/forgot) ── */
  .pl-auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-0);
    padding: 24px;
    position: relative;
    overflow: hidden;
  }
  /* Subtle gradient backdrop for brand identity */
  .pl-auth::before {
    content: '';
    position: absolute;
    top: -40%; left: -20%;
    width: 140%; height: 100%;
    background: radial-gradient(ellipse at 30% 20%, rgba(var(--shadow-brand-rgb),.07) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(192,132,252,.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .pl-auth > * { position: relative; z-index: 1; }
  .pl-auth__card {
    width: 100%;
    max-width: 420px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    box-shadow: var(--shadow-lg);
  }
  .pl-auth__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }
  .pl-auth__logo img { height: 40px; }
  .pl-auth__title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
  }
  .pl-auth__subtitle {
    font-size: .8125rem;
    color: var(--ink-soft);
    text-align: center;
    margin-bottom: 32px;
  }
  .pl-auth__form { display: flex; flex-direction: column; gap: 16px; }
  .pl-auth__links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8125rem;
    margin-top: 16px;
  }

  /* ── Dashboard ── */
  .pl-dashboard-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .pl-dashboard-chart {
    grid-column: 1 / -1;
  }

  /* ── Product form ── */
  .pl-product-form .pl-section { margin-bottom: 16px; }
  .pl-product-form__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    margin-top: 12px;
  }
  .pl-product-form__main-image {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed var(--border);
    cursor: pointer;
    transition: border-color var(--fast) var(--ease);
  }
  .pl-product-form__main-image:hover { border-color: var(--brand); }

  /* ── Invoice detail ── */
  .pl-invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 24px;
  }
  .pl-invoice-header__logo { height: 48px; }
  .pl-invoice-header__info { text-align: right; }

  .pl-invoice-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
  @media (max-width: 639px) {
    .pl-invoice-meta { grid-template-columns: 1fr; }
  }

  .pl-invoice-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-top: 16px;
  }
  .pl-invoice-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    font-size: .875rem;
  }
  .pl-invoice-totals__row--total {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand);
    padding-top: 8px;
    border-top: 2px solid var(--border);
  }

  /* ── Error pages ── */
  .pl-error-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 24px;
  }
  .pl-error-page__code {
    font-size: 6rem;
    font-weight: 700;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
  }
  .pl-error-page__msg { font-size: 1.25rem; color: var(--ink-soft); max-width: 400px; }

  /* ── Landing page ── */
  .pl-landing-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: var(--brand-grad);
    color: #fff;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
  .pl-landing-hero__title { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; max-width: 600px; }
  .pl-landing-hero__desc  { font-size: 1.125rem; opacity: .9; margin-top: 16px; max-width: 480px; }

  /* ── PDF invoice styles ── */
  @media print {
    body { background: #fff !important; color: #000 !important; }
    .pl-sidebar, .pl-topbar, .pl-bottomnav, .no-print { display: none !important; }
    .pl-content { padding: 0 !important; }
    .pl-card { box-shadow: none !important; border: 1px solid #ddd !important; }
  }
}

/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */
@layer utilities {

  /* ── Display ── */
  .block        { display: block; }
  .inline-block { display: inline-block; }
  .inline       { display: inline; }
  .flex         { display: flex; }
  .inline-flex  { display: inline-flex; }
  .grid         { display: grid; }
  .hidden       { display: none; }
  .contents     { display: contents; }

  /* ── Flexbox ── */
  .flex-col     { flex-direction: column; }
  .flex-row     { flex-direction: row; }
  .flex-wrap    { flex-wrap: wrap; }
  .flex-nowrap  { flex-wrap: nowrap; }
  .flex-1       { flex: 1 1 0%; }
  .flex-auto    { flex: 1 1 auto; }
  .flex-none    { flex: none; }
  .shrink-0     { flex-shrink: 0; }
  .grow         { flex-grow: 1; }

  .items-start    { align-items: flex-start; }
  .items-center   { align-items: center; }
  .items-end      { align-items: flex-end; }
  .items-stretch  { align-items: stretch; }
  .items-baseline { align-items: baseline; }

  .justify-start   { justify-content: flex-start; }
  .justify-center  { justify-content: center; }
  .justify-end     { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-around  { justify-content: space-around; }

  .self-start  { align-self: flex-start; }
  .self-center { align-self: center; }
  .self-end    { align-self: flex-end; }

  /* ── Grid ── */
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-span-1  { grid-column: span 1; }
  .col-span-2  { grid-column: span 2; }
  .col-span-3  { grid-column: span 3; }
  .col-span-4  { grid-column: span 4; }
  .col-span-6  { grid-column: span 6; }
  .col-span-full { grid-column: 1 / -1; }

  /* ── Gap ── */
  .gap-0  { gap: 0; }
  .gap-1  { gap: 4px; }
  .gap-2  { gap: 8px; }
  .gap-3  { gap: 12px; }
  .gap-4  { gap: 16px; }
  .gap-5  { gap: 20px; }
  .gap-6  { gap: 24px; }
  .gap-8  { gap: 32px; }
  .gap-10 { gap: 40px; }
  .gap-x-1 { column-gap: 4px; }
  .gap-x-2 { column-gap: 8px; }
  .gap-x-4 { column-gap: 16px; }
  .gap-y-1 { row-gap: 4px; }
  .gap-y-2 { row-gap: 8px; }
  .gap-y-4 { row-gap: 16px; }

  /* ── Spacing (margin/padding) ── */
  .p-0  { padding: 0; }       .m-0  { margin: 0; }
  .p-1  { padding: 4px; }     .m-1  { margin: 4px; }
  .p-2  { padding: 8px; }     .m-2  { margin: 8px; }
  .p-3  { padding: 12px; }    .m-3  { margin: 12px; }
  .p-4  { padding: 16px; }    .m-4  { margin: 16px; }
  .p-5  { padding: 20px; }    .m-5  { margin: 20px; }
  .p-6  { padding: 24px; }    .m-6  { margin: 24px; }
  .p-8  { padding: 32px; }    .m-8  { margin: 32px; }

  .px-0 { padding-left: 0; padding-right: 0; }
  .px-1 { padding-left: 4px; padding-right: 4px; }
  .px-2 { padding-left: 8px; padding-right: 8px; }
  .px-3 { padding-left: 12px; padding-right: 12px; }
  .px-4 { padding-left: 16px; padding-right: 16px; }
  .px-5 { padding-left: 20px; padding-right: 20px; }
  .px-6 { padding-left: 24px; padding-right: 24px; }
  .px-8 { padding-left: 32px; padding-right: 32px; }

  .py-0 { padding-top: 0; padding-bottom: 0; }
  .py-1 { padding-top: 4px; padding-bottom: 4px; }
  .py-2 { padding-top: 8px; padding-bottom: 8px; }
  .py-3 { padding-top: 12px; padding-bottom: 12px; }
  .py-4 { padding-top: 16px; padding-bottom: 16px; }
  .py-5 { padding-top: 20px; padding-bottom: 20px; }
  .py-6 { padding-top: 24px; padding-bottom: 24px; }
  .py-8 { padding-top: 32px; padding-bottom: 32px; }

  .pt-0 { padding-top: 0; }  .pt-1 { padding-top: 4px; }  .pt-2 { padding-top: 8px; }  .pt-3 { padding-top: 12px; }  .pt-4 { padding-top: 16px; }  .pt-6 { padding-top: 24px; }  .pt-8 { padding-top: 32px; }
  .pb-0 { padding-bottom: 0; }  .pb-1 { padding-bottom: 4px; }  .pb-2 { padding-bottom: 8px; }  .pb-3 { padding-bottom: 12px; }  .pb-4 { padding-bottom: 16px; }  .pb-6 { padding-bottom: 24px; }  .pb-8 { padding-bottom: 32px; }
  .pl-0 { padding-left: 0; }  .pl-1 { padding-left: 4px; }  .pl-2 { padding-left: 8px; }  .pl-4 { padding-left: 16px; }
  .pr-0 { padding-right: 0; }  .pr-1 { padding-right: 4px; }  .pr-2 { padding-right: 8px; }  .pr-4 { padding-right: 16px; }

  .mx-auto { margin-left: auto; margin-right: auto; }
  .ml-auto { margin-left: auto; }
  .mr-auto { margin-right: auto; }
  .mt-0 { margin-top: 0; }  .mt-1 { margin-top: 4px; }  .mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 12px; }  .mt-4 { margin-top: 16px; }  .mt-6 { margin-top: 24px; }  .mt-8 { margin-top: 32px; }
  .mb-0 { margin-bottom: 0; }  .mb-1 { margin-bottom: 4px; }  .mb-2 { margin-bottom: 8px; }  .mb-3 { margin-bottom: 12px; }  .mb-4 { margin-bottom: 16px; }  .mb-5 { margin-bottom: 20px; }  .mb-6 { margin-bottom: 24px; }  .mb-8 { margin-bottom: 32px; }
  .ml-0 { margin-left: 0; }  .ml-1 { margin-left: 4px; }  .ml-2 { margin-left: 8px; }  .ml-4 { margin-left: 16px; }
  .mr-0 { margin-right: 0; }  .mr-1 { margin-right: 4px; }  .mr-2 { margin-right: 8px; }  .mr-4 { margin-right: 16px; }
  .mx-1 { margin-left: 4px; margin-right: 4px; }  .mx-2 { margin-left: 8px; margin-right: 8px; }

  /* ── Sizing ── */
  .w-full   { width: 100%; }
  .w-auto   { width: auto; }
  .w-screen { width: 100vw; }
  .w-72     { width: 18rem; }
  .h-full   { height: 100%; }
  .h-auto   { height: auto; }
  .h-screen { height: 100dvh; }
  .min-h-0  { min-height: 0; }
  .min-h-screen { min-height: 100dvh; }
  .min-w-0  { min-width: 0; }
  .max-w-xs  { max-width: 320px; }
  .max-w-sm  { max-width: 384px; }
  .max-w-md  { max-width: 448px; }
  .max-w-lg  { max-width: 512px; }
  .max-w-xl  { max-width: 576px; }
  .max-w-2xl { max-width: 672px; }
  .max-w-3xl { max-width: 768px; }
  .max-w-4xl { max-width: 896px; }
  .max-w-5xl { max-width: 1024px; }
  .max-w-full { max-width: 100%; }

  /* ── Position ── */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed    { position: fixed; }
  .sticky   { position: sticky; }
  .static   { position: static; }
  .inset-0  { inset: 0; }
  .inset-y-0 { top: 0; bottom: 0; }
  .top-0    { top: 0; }    .right-0  { right: 0; }
  .bottom-0 { bottom: 0; } .left-0   { left: 0; }

  /* ── Z-index ── */
  .z-0   { z-index: 0; }
  .z-10  { z-index: 10; }
  .z-20  { z-index: 20; }
  .z-30  { z-index: 30; }
  .z-50  { z-index: 50; }
  .z-auto { z-index: auto; }

  /* ── Overflow ── */
  .overflow-auto    { overflow: auto; }
  .overflow-hidden  { overflow: hidden; }
  .overflow-visible { overflow: visible; }
  .overflow-scroll  { overflow: scroll; }
  .overflow-x-auto  { overflow-x: auto; }
  .overflow-y-auto  { overflow-y: auto; }

  /* ── Border ── */
  .border     { border: 1px solid var(--border); }
  .border-t   { border-top: 1px solid var(--border); }
  .border-b   { border-bottom: 1px solid var(--border); }
  .border-l   { border-left: 1px solid var(--border); }
  .border-r   { border-right: 1px solid var(--border); }
  .border-0   { border: none; }
  .border-brand { border-color: var(--brand); }
  .border-err   { border-color: var(--err); }

  .rounded-none { border-radius: 0; }
  .rounded-sm   { border-radius: var(--radius-sm); }
  .rounded      { border-radius: var(--radius); }
  .rounded-md   { border-radius: var(--radius-md); }
  .rounded-lg   { border-radius: var(--radius-lg); }
  .rounded-xl   { border-radius: var(--radius-xl); }
  .rounded-full { border-radius: var(--radius-full); }
  .rounded-pill { border-radius: var(--radius-pill); }

  /* ── Background ── */
  .bg-surface-0 { background: var(--surface-0); }
  .bg-surface-1 { background: var(--surface-1); }
  .bg-surface-2 { background: var(--surface-2); }
  .bg-surface-3 { background: var(--surface-3); }
  .bg-brand     { background: var(--brand); }
  .bg-brand-soft { background: var(--brand-soft); }
  .bg-ok-soft   { background: var(--ok-soft); }
  .bg-warn-soft { background: var(--warn-soft); }
  .bg-err-soft  { background: var(--err-soft); }
  .bg-info-soft { background: var(--info-soft); }
  .bg-transparent { background: transparent; }
  .bg-white     { background: #fff; }

  /* ── Shadows ── */
  .shadow-none { box-shadow: none; }
  .shadow-xs   { box-shadow: var(--shadow-xs); }
  .shadow-sm   { box-shadow: var(--shadow-sm); }
  .shadow      { box-shadow: var(--shadow); }
  .shadow-md   { box-shadow: var(--shadow-md); }
  .shadow-lg   { box-shadow: var(--shadow-lg); }

  /* ── Opacity ── */
  .opacity-0   { opacity: 0; }
  .opacity-25  { opacity: .25; }
  .opacity-50  { opacity: .5; }
  .opacity-75  { opacity: .75; }
  .opacity-100 { opacity: 1; }

  /* ── Cursor ── */
  .cursor-pointer     { cursor: pointer; }
  .cursor-default     { cursor: default; }
  .cursor-not-allowed { cursor: not-allowed; }
  .cursor-grab        { cursor: grab; }

  /* ── Pointer Events ── */
  .pointer-events-none { pointer-events: none; }
  .pointer-events-auto { pointer-events: auto; }

  /* ── User Select ── */
  .select-none { user-select: none; }
  .select-all  { user-select: all; }
  .select-text { user-select: text; }

  /* ── Flex shrink ── */
  .flex-shrink-0 { flex-shrink: 0; }

  /* ── Transition ── */
  .transition           { transition: all var(--duration) var(--ease); }
  .transition-fast      { transition: all var(--fast) var(--ease); }
  .transition-slow      { transition: all var(--slow) var(--ease); }
  .transition-none      { transition: none; }
  .transition-transform { transition: transform var(--duration) var(--ease); }
  .duration-300         { transition-duration: 300ms; }
  .ease-in-out          { transition-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* ── Transform ── */
  .transform             { /* enable GPU layer */ }
  .translate-y-0         { transform: translateY(0); }
  .-translate-x-full     { transform: translateX(-100%); }
  .translate-x-0         { transform: translateX(0); }
  .scale-95              { transform: scale(.95); }
  .scale-100             { transform: scale(1); }
  .rotate-90             { transform: rotate(90deg); }
  .rotate-180            { transform: rotate(180deg); }

  /* ── Whitespace ── */
  .whitespace-nowrap  { white-space: nowrap; }
  .whitespace-pre     { white-space: pre; }
  .whitespace-normal  { white-space: normal; }
  .break-words        { overflow-wrap: break-word; }
  .break-all          { word-break: break-all; }

  /* ── List ── */
  .list-disc    { list-style: disc; padding-left: 20px; }
  .list-decimal { list-style: decimal; padding-left: 20px; }

  /* ── Aspect ratio ── */
  .aspect-square { aspect-ratio: 1; }
  .aspect-video  { aspect-ratio: 16/9; }

  /* ── Object fit ── */
  .object-cover   { object-fit: cover; }
  .object-contain { object-fit: contain; }

  /* ── Visibility ── */
  .visible   { visibility: visible; }
  .invisible { visibility: hidden; }

  /* ── Print ── */
  .no-print { }
  @media print { .no-print { display: none !important; } }
  .print-only { display: none; }
  @media print { .print-only { display: block !important; } }

  /* ── Screen reader only ── */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Responsive utilities ── */
  @media (max-width: 639px) {
    .sm\:hidden    { display: none; }
    .sm\:block     { display: block; }
    .sm\:flex      { display: flex; }
    .sm\:flex-col  { flex-direction: column; }
    .sm\:grid-cols-1 { grid-template-columns: 1fr; }
    .sm\:text-center { text-align: center; }
    .sm\:p-2 { padding: 8px; }
    .sm\:p-3 { padding: 12px; }
    .sm\:p-4 { padding: 16px; }
    .sm\:gap-2 { gap: 8px; }
    .sm\:gap-3 { gap: 12px; }
    .sm\:w-full { width: 100%; }
    .sm\:text-sm { font-size: .8125rem; }
  }

  /* ⚠️ OJO: las utilidades `.md\:*` se activan a 640px (NO 768px como en
     Tailwind). 640px es un teléfono grande, no una tablet. Usar `.md\:grid-cols-2`
     aquí produce 2 columnas ya en móvil. Para un breakpoint de tablet real usa
     `.lg\:*` (1024px). No mover este 640px en silencio: hay 76 páginas que lo
     consumen — requiere auditoría + regresión visual antes de cambiarlo. */
  @media (min-width: 640px) {
    .md\:hidden      { display: none; }
    .md\:block       { display: block; }
    .md\:flex        { display: flex; }
    .md\:inline-flex { display: inline-flex; }
    .md\:grid        { display: grid; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:flex-row    { flex-direction: row; }
    .md\:gap-4 { gap: 16px; }
    .md\:gap-6 { gap: 24px; }
    .md\:p-4 { padding: 16px; }
    .md\:p-6 { padding: 24px; }
    .md\:px-6 { padding-left: 24px; padding-right: 24px; }
  }

  @media (min-width: 1024px) {
    .lg\:hidden      { display: none; }
    .lg\:block       { display: block; }
    .lg\:flex        { display: flex; }
    .lg\:grid        { display: grid; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\:gap-6 { gap: 24px; }
    .lg\:gap-8 { gap: 32px; }
    .lg\:p-6 { padding: 24px; }
    .lg\:p-8 { padding: 32px; }
    .lg\:relative       { position: relative; }
    .lg\:translate-x-0  { transform: translateX(0); }
    .lg\:flex-row       { flex-direction: row; }
  }

  @media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  }

  /* ── Hover helpers (pointer devices only) ── */
  @media (hover: hover) {
    .hover\:bg-surface-2:hover { background: var(--surface-2); }
    .hover\:bg-brand-soft:hover { background: var(--brand-soft); }
    .hover\:text-brand:hover { color: var(--brand); }
    .hover\:text-ink:hover { color: var(--ink); }
    .hover\:shadow:hover { box-shadow: var(--shadow); }
    .hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
    .hover\:border-brand:hover { border-color: var(--brand); }
    .hover\:opacity-100:hover { opacity: 1; }
  }

  /* ── Focus ── */
  .focus\:ring:focus-visible { box-shadow: 0 0 0 3px var(--brand-soft); }

  /* ── Landing: responsive grid helpers ── */
  .lg\:col-span-2  { grid-column: span 2; }
  .lg\:col-span-6  { grid-column: span 6; }
  .col-span-3      { grid-column: span 3; }
  @media (min-width: 1024px) {
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
    .lg\:grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .lg\:gap-12       { gap: 48px; }
    .lg\:col-span-2   { grid-column: span 2; }
    .lg\:col-span-6   { grid-column: span 6; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   @layer landing — Public-facing marketing pages
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Nav Island ──
   Mobile base: flex space-between (brand | actions; centre nav hidden).
   ≥1024px: symmetric grid 1fr|auto|1fr so the links sit dead-centre and
   stay IN FLOW — they can never overlap the brand or the actions. */
.pl-nav-island {
  position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%);
  width: 92%; max-width: 1180px; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--pl-surface, rgba(255,255,255,0.88));
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--pl-border);
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  box-shadow: 0 4px 30px -4px rgba(var(--shadow-brand-rgb),0.05);
  transition: top 0.4s cubic-bezier(0.22,1,0.36,1),
              padding 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),
              border-color 0.4s ease;
  animation: pl-nav-enter 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@media (min-width: 1024px) {
  .pl-nav-island { display: grid; grid-template-columns: 1fr auto 1fr; }
}
[data-theme="dark"] .pl-nav-island {
  background: rgba(22,18,31,0.88);
}
@media (max-width: 640px) {
  .pl-nav-island { width: 96%; padding: .5rem .75rem; top: .5rem; border-radius: 22px; }
}
.pl-nav-island.scrolled {
  top: .5rem; padding: .4rem 1.25rem;
  box-shadow: 0 12px 36px -6px rgba(var(--shadow-brand-rgb),0.16);
  border-color: color-mix(in srgb, var(--pl-brand) 18%, var(--pl-border));
}

/* Island entrance: settle in from above, keeps the translateX(-50%) centring */
@keyframes pl-nav-enter {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Brand ── */
.pl-nav-brand {
  display: flex; align-items: center; gap: .75rem;
  justify-self: start; text-decoration: none; min-width: 0;
}
.pl-nav-brand__name { display: flex; align-items: baseline; gap: .375rem; white-space: nowrap; min-width: 0; overflow: hidden; }
.pl-nav-brand__fism { font-family: 'Sarpanch', 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; color: var(--pl-ink); }
.pl-nav-brand__tech { font-family: 'Sarpanch', 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; }
.pl-nav-brand__mark { transition: transform .45s cubic-bezier(0.22,1,0.36,1); transform-origin: center; }
.pl-nav-brand:hover .pl-nav-brand__mark,
.pl-nav-brand:focus-visible .pl-nav-brand__mark { transform: scale(1.07) rotate(-5deg); }
/* El umbral era 380px y estaba MAL MEDIDO: por debajo de 380 "Technology" se
   esconde, pero al reaparecer en 381 el nav todavía no tiene sitio para la
   marca completa MÁS los tres iconos de acción, y el nombre del negocio se
   metía DEBAJO del icono de cuenta. Barrido de 376 a 420px de 2 en 2: solapa
   de 382px a 402px, hasta 21px, y el clic sobre el borde derecho de la marca
   lo intercepta el SVG del icono. Esa franja es justo la de los teléfonos más
   vendidos hoy — iPhone 12/13/14 (390), iPhone 16 y Pixel (393), Galaxy S2x
   (384-390) — y este sitio recibe la mayoría de su tráfico desde el móvil.
   420px deja margen sobre los 403px donde deja de solaparse.

   Debajo, la defensa estructural, que es la que importa de verdad: el número
   de arriba vuelve a quedarse corto el día que alguien añada un cuarto icono
   o alargue el nombre. Con las acciones en `flex:0 0 auto` y el nombre con
   `min-width:0; overflow:hidden`, lo que cede es la MARCA (se recorta), nunca
   la posición de los iconos. Un nombre recortado se lee mal; un icono tapado
   no se puede pulsar. */
/* En móvil el nav lleva SOLO el logo (decisión del dueño, 2026-08-08): el
   nombre completo se esconde, no solo "Technology". El aria-label del
   brand-mark conserva el nombre para lectores de pantalla. */
@media (max-width: 767.98px) { .pl-nav-brand__name { display: none; } }

/* ── Nav zones ── */
.pl-nav-links { display: none; }
@media (min-width: 1024px) {
  .pl-nav-links {
    display: flex; align-items: center; gap: .25rem;
    position: relative; justify-self: center;
  }
}
/* `flex: 0 0 auto` no es decorativo: sin él las acciones son `0 1 auto` y el
   navegador las deja empujar fuera de sitio cuando la marca no cabe, que es
   como el nombre acabó por debajo del icono de cuenta. Con esto, quien cede
   es la marca. */
.pl-nav-actions { display: flex; align-items: center; gap: .5rem; justify-self: end; flex: 0 0 auto; }
.pl-nav-icon.pl-nav-toggle { display: flex; }
@media (min-width: 1024px) { .pl-nav-icon.pl-nav-toggle { display: none; } }

/* ── Nav links ── */
.pl-nav-link {
  position: relative; z-index: 1;
  font-size: .875rem; font-weight: 600; color: var(--pl-ink-soft);
  padding: .5rem 1rem; border-radius: var(--cta-radio, 20px); white-space: nowrap;
  transition: color .25s ease;
  text-decoration: none; letter-spacing: -.01em;
}
/* No-JS / fallback emphasis (suppressed once the sliding pill is live) */
.pl-nav-link:hover { color: var(--pl-brand); background: var(--pl-brand-soft); }
.pl-nav-link.active { color: var(--pl-brand); background: var(--pl-brand-soft); font-weight: 700; }
.pl-nav-link:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; border-radius: var(--cta-radio, 20px); }

/* ── Sliding active/hover pill (progressive enhancement) ── */
.pl-nav-links.has-indicator .pl-nav-link:hover,
.pl-nav-links.has-indicator .pl-nav-link.active { background: transparent; }
.pl-nav-link.active { color: var(--pl-brand); }
.pl-nav-indicator {
  position: absolute; top: 50%; left: 0; z-index: 0;
  height: 36px; width: 0;
  transform: translate(0, -50%);
  /* MISMA GEOMETRIA que los botones de accion (--cta-radio, pedido del dueño
     2026-08-18): la pastilla de la pagina activa era una pildora de 20px al
     lado de botones de 10px. El radio sale del token, no de un numero suelto,
     para que no vuelvan a separarse. El ALTO se queda en 36: la isla mide
     32px de enlace, y subirlo a los 44 del boton desbordaria la barra. */
  border-radius: var(--cta-radio, 20px);
  background: var(--pl-brand-soft);
  opacity: 0; pointer-events: none;
  transition: transform .42s cubic-bezier(0.22,1,0.36,1),
              width .42s cubic-bezier(0.22,1,0.36,1),
              opacity .3s ease;
  will-change: transform, width;
}
.pl-nav-links.has-indicator .pl-nav-indicator.is-active { opacity: 1; }

/* ── Nav icon button ── */
.pl-nav-icon {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--pl-ink); border: 1px solid transparent; background: transparent;
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(0.22,1,0.36,1);
  cursor: pointer; touch-action: manipulation;
}
@media (min-width: 768px) { .pl-nav-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; } }
.pl-nav-icon:hover { background: var(--pl-surface-2); border-color: var(--pl-border); transform: translateY(-1px); }
.pl-nav-icon:active { transform: scale(.92); }
.pl-nav-icon:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; }
.pl-nav-icon i { transition: transform .35s cubic-bezier(0.22,1,0.36,1); }
[data-theme-toggle]:hover i { transform: rotate(-22deg) scale(1.05); }
#cart-btn:hover i { transform: translateY(-1px) scale(1.06); }

/* ── Cart count badge ── */
.pl-cart-count {
  display: none; position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px;
  background: var(--pl-brand); color: #fff; font-size: 10px;
  border-radius: 50%; font-weight: 700;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--pl-surface, #fff);
  animation: pl-badge-pop .32s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pl-badge-pop {
  0%   { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Reduced motion: kill all nav motion, keep states ── */
@media (prefers-reduced-motion: reduce) {
  .pl-nav-island, .pl-nav-indicator, .pl-cart-count,
  .pl-nav-icon, .pl-nav-icon i, .pl-nav-brand__mark {
    animation: none !important;
    transition: none !important;
  }
  .pl-nav-island { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Mobile menu ── */
.pl-mobile-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 1001; opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(0.2,0.8,0.2,1);
  backdrop-filter: blur(4px);
}
.pl-mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }

.pl-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw;
  z-index: 1002; background: var(--pl-surface);
  box-shadow: -12px 0 40px rgba(0,0,0,.12);
  padding: 2rem 1.5rem;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.2,0.8,0.2,1);
  overflow-y: auto;
}
[data-theme="dark"] .pl-mobile-menu { background: var(--pl-surface); }
.pl-mobile-menu.active { transform: translateX(0); }

.pl-mobile-nav-link {
  display: flex; align-items: center; gap: 14px;
  padding: .875rem 1rem; border-radius: var(--pl-radius);
  color: var(--pl-ink); font-weight: 600; font-size: 1rem;
  text-decoration: none; transition: background .2s;
}
.pl-mobile-nav-link:hover { background: var(--pl-brand-soft); color: var(--pl-brand); }
.pl-mobile-nav-link.active {
  background: var(--pl-brand-soft); color: var(--pl-brand); font-weight: 700;
}
.pl-mobile-nav-link.active i { color: var(--pl-brand); }
.pl-mobile-nav-link i { width: 20px; text-align: center; color: var(--pl-ink-soft); transition: color .2s; }
.pl-mobile-nav-link:focus-visible,
.pl-mobile-secondary-link:focus-visible {
  outline: 2px solid var(--pl-brand); outline-offset: 3px; border-radius: var(--pl-radius);
}

.pl-mobile-secondary-link {
  display: block; padding: .625rem 1rem; font-size: .875rem;
  color: var(--pl-ink-soft); text-decoration: none; transition: color .2s;
}
.pl-mobile-secondary-link:hover { color: var(--pl-brand); }

/* ── Footer ── */
.pl-footer {
  background: var(--pl-surface-2); border-top: 1px solid var(--pl-border);
  padding: 3rem 0 2rem; margin-top: 4rem;
}
[data-theme="dark"] .pl-footer { background: var(--surface-1); }

.pl-footer-col-title {
  display: block; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--pl-ink-soft); margin-bottom: .75rem;
}
.pl-footer-link {
  /* min-height:24px explícito: WCAG 2.5.8 (target size) — Lighthouse marcó
     estos links de una sola línea de texto por debajo del mínimo táctil
     (auditoría PageSpeed Insights 2026-07-04, 24 items en el footer). */
  display: flex; align-items: center; min-height: 24px; font-size: .8125rem; color: var(--pl-ink-soft);
  padding: .25rem 0; text-decoration: none; transition: color .2s;
}
.pl-footer-link:hover { color: var(--pl-brand); }
.pl-footer-offer { color: var(--pl-brand); font-weight: 600; }

/* ── Newsletter card ── */
.pl-newsletter-card {
  position: relative; border-radius: var(--pl-radius-lg, 16px);
  padding: 1.5rem; overflow: hidden;
  background: linear-gradient(135deg, var(--pl-surface) 0%, var(--pl-surface-2) 100%);
  border: 1px solid var(--pl-border);
}

/* ── WhatsApp FAB ── */
.pl-whatsapp-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.pl-whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(37,211,102,.45); }
.pl-whatsapp-tooltip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--pl-surface); color: var(--pl-ink);
  padding: .5rem .75rem; border-radius: var(--pl-radius);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  opacity: 0; pointer-events: none; transition: opacity .2s;
  border: 1px solid var(--pl-border);
}
.pl-whatsapp-fab:hover .pl-whatsapp-tooltip { opacity: 1; }

/* ── Toast (landing) ── */
.pl-toast-landing {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 3rem));
  background: var(--pl-surface); color: var(--pl-ink);
  padding: 1rem 1.5rem; border-radius: var(--pl-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  border: 1px solid var(--pl-border);
  z-index: 2000;
  transition: transform .3s cubic-bezier(0.2,0.8,0.2,1), opacity .3s ease, visibility .3s;
  max-width: 400px; width: 90%;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.pl-toast-landing.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ── Scroll progress ── */
.pl-scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 1001;
  background: var(--pl-brand); transform-origin: left;
  transform: scaleX(0); transition: none;
}

/* ── Landing typography ── */
/* KAN-67. El techo del clamp iba al doble de la comp en escritorio: 72px
   contra los 38px de Contacto y los 46px de Garantía, medidos rótulo por
   rótulo en navegador a 1440. En móvil ya calzaba a 2-8px, así que lo que se
   baja es el TECHO; el mínimo sólo se ajusta de 36 a 30px, que es lo que la
   comp pide a 390. Estos dos valores están DUPLICADOS en el CSS crítico
   (landing/_critical_css.html): cambiar uno sin el otro deja un salto visible
   al cargar la página. */
.pl-hero-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
}
.pl-section-title {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.025em;
}
.pl-subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400; line-height: 1.5;
  color: var(--pl-ink-soft); max-width: 680px; margin: 0 auto;
}

/* ── Landing buttons ── */
/* ══════════════════════════════════════════════════════════════════════
   BOTÓN CANÓNICO DEL SITIO — el estándar del Hero del homepage.
   Silueta, radio (10px = var(--pl-radius)), peso, transición y HOVER SIMÉTRICO
   (translateY(-2px) + sombra) compartidos por primario y secundario. Todos los
   CTA del sitio (storefront + backoffice) heredan este lenguaje visual.
   ══════════════════════════════════════════════════════════════════════ */
.pl-btn-hero {
  display: inline-flex; align-items: center; justify-content: center;
  /* Alto por token (2026-08-18): el acolchado lo llevaba a 54px, una medida que
     no compartia con ningun otro boton de la tienda. */
  gap: 10px; padding: 0 2rem; font-size: .9375rem; font-weight: 700;
  border-radius: var(--cta-radio, var(--pl-radius)); border: 1.5px solid transparent; cursor: pointer;
  transition: background .28s cubic-bezier(0.2,0.8,0.2,1),
              border-color .28s cubic-bezier(0.2,0.8,0.2,1),
              color .28s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow .28s, transform .28s;
  text-decoration: none; min-height: var(--cta-alto-lg,52px); touch-action: manipulation;
  letter-spacing: -.01em;
}
.pl-btn-hero--primary { background: var(--pl-brand); color: #fff; }
.pl-btn-hero--primary:hover {
  background: var(--pl-brand-hover); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(var(--shadow-brand-rgb),.28);
}
.pl-btn-hero--secondary {
  background: transparent; color: var(--pl-ink);
  border-color: var(--pl-border);
}
.pl-btn-hero--secondary:hover {
  border-color: var(--pl-brand); color: var(--pl-brand);
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--shadow-brand-rgb),.14);
}
.pl-btn-hero:active { transform: translateY(0) scale(.98); }
.pl-btn-hero:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .pl-btn-hero { transition: background .2s ease, border-color .2s ease, color .2s ease; }
  .pl-btn-hero:hover, .pl-btn-hero:active { transform: none; }
}

/* ── Product card (landing) ── */
.pl-product-card {
  contain: content; background: var(--pl-surface);
  border-radius: 24px; overflow: hidden;
  transition: border-color .28s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow .28s, transform .28s;
  cursor: pointer; border: 1px solid var(--pl-border); position: relative;
}
.pl-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(var(--shadow-brand-rgb),.12);
  border-color: var(--pl-brand-soft);
}
.pl-product-card:hover .pl-product-card__img { transform: scale(1.06); }
.pl-product-card__img { transition: transform .45s cubic-bezier(0.2,0.8,0.2,1); }

/* ── Section spacing ── */
.pl-section-spacing { padding: 3.5rem 1rem; }
@media (min-width: 768px) { .pl-section-spacing { padding: 7rem 2rem; } }
@media (min-width: 1024px) { .pl-section-spacing { padding: 9rem 3rem; } }

/* ── Landing container ── */
.pl-landing-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .pl-landing-container { padding: 0 1.5rem; } }
@media (min-width: 1280px) { .pl-landing-container { padding: 0 3rem; } }

/* ── Animations ── */
@keyframes pl-fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
.pl-fade-in-up { animation: pl-fadeInUp .7s cubic-bezier(0.2,0.8,0.2,1) forwards; opacity: 0; }
.pl-staggered > * { opacity: 0; animation: pl-fadeInUp .6s cubic-bezier(0.2,0.8,0.2,1) forwards; }
.pl-staggered > *:nth-child(1) { animation-delay: .08s; }
.pl-staggered > *:nth-child(2) { animation-delay: .16s; }
.pl-staggered > *:nth-child(3) { animation-delay: .24s; }
.pl-staggered > *:nth-child(4) { animation-delay: .32s; }
.pl-staggered > *:nth-child(5) { animation-delay: .4s; }

/* ── Brand accent text ──
   Antes era texto con gradiente (ban absoluto de marca + fallaba contraste).
   Ahora color de marca sólido: misma intención (resaltar marca/modelo) sin el
   tell de IA. El énfasis adicional se logra con peso/tamaño en cada uso. */
.pl-text-gradient {
  color: var(--pl-brand);
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* ── Input for landing forms ── */
.pl-input-landing {
  width: 100%; padding: .75rem 1rem; font-size: .875rem;
  border: 1.5px solid var(--pl-border); border-radius: var(--pl-radius);
  background: var(--pl-surface); color: var(--pl-ink);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.pl-input-landing:focus {
  border-color: var(--pl-brand);
  box-shadow: 0 0 0 3px var(--pl-brand-soft);
}

/* ── Skip link ── */
.pl-skip-link {
  position: absolute; top: -100%; left: 0;
  background: var(--pl-brand); color: #fff;
  padding: .75rem 1.5rem; z-index: 9999;
  font-weight: 700; border-radius: 0 0 .5rem 0;
  transition: top .2s;
}
.pl-skip-link:focus { top: 0; }

/* ── Brand mark (logo line-art recoloreado por tema vía mask) ──
   Un solo SVG transparente; el color sigue --brand (#7c3aed claro /
   #a78bfa oscuro). Setear width/height por uso. */
.brand-mark {
  display: inline-block;
  flex: none;
  background-color: var(--brand, #7c3aed);
  -webkit-mask: url("/static/brand/logo.svg") center / contain no-repeat;
          mask: url("/static/brand/logo.svg") center / contain no-repeat;
}

/* ═══════════════════════════════════════════
   ACCESIBILIDAD GLOBAL (transversal a toda la app)
   ═══════════════════════════════════════════ */

/* Reduced motion — red de seguridad global: neutraliza toda animación/transición
   (spinners, skeletons, toasts, fade/stagger, badge-pop, etc.) para usuarios que
   piden menos movimiento. Las superficies con su propio bloque (nav) ya estaban
   cubiertas; esto cubre el resto. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch targets — en punteros gruesos (móvil/táctil) garantiza el mínimo de 44px
   (WCAG 2.2 SC 2.5.8) en botones, inputs y selects sin depender de los
   *_mobile.css por superficie. */
@media (pointer: coarse) {
  .pl-btn,
  .pl-input,
  .pl-select,
  .pl-nav-icon,
  .pl-btn--icon {
    min-height: 44px;
  }
}

/* ======================================================================
   MEJORAS DEL EQUIPO (configurador)
   ====================================================================== */
.pd-mejoras__intro { color: var(--ink-soft); margin: -.4rem 0 1.5rem; max-width: 62ch; }
.pd-mejoras { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .pd-mejoras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.5rem; } }
.pd-mejoras__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.pd-mejoras__leyenda {
  padding: 0; margin: 0 0 .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
/* Fila seleccionable. El borde es de 1px y neutro: un filete de color a la
   izquierda esta prohibido en este sistema de diseno. El estado marcado se
   nota por fondo y borde de marca, no por un adorno lateral. */
.pd-mejora {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .75rem;
  padding: .8rem .95rem; margin-bottom: .5rem;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--cta-radio, 10px); cursor: pointer;
  transition: border-color .18s var(--pd-ease), background .18s var(--pd-ease);
}
.pd-mejora:hover { border-color: var(--brand-soft); }
.pd-mejora:has(.pd-mejora__check:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pd-mejora:has(.pd-mejora__check:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.pd-mejora__check { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.pd-mejora__cuerpo { display: grid; gap: .15rem; min-width: 0; }
.pd-mejora__nombre { font-size: .95rem; font-weight: 600; color: var(--ink); }
.pd-mejora__nombre i { color: var(--brand); margin-right: .4rem; font-size: .85em; }
.pd-mejora__detalle { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.pd-mejora__precio { font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* `[hidden]` es del agente de usuario y PIERDE contra cualquier `display` de
   autor: sin esta linea la caja del total se pinta vacia desde la carga, con
   la etiqueta y sin cifra. Es la trampa de cascada de este repo —ya mordio en
   el badge de descuento, las flechas del hero, el toggle de specs y los campos
   de envio del checkout— y aqui volvio a morder. Se apaga explicitamente. */
.pd-mejoras__total[hidden] { display: none !important; }
.pd-mejoras__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--border-strong);
}
.pd-mejoras__total-txt { font-size: .9rem; color: var(--ink-soft); }
.pd-mejoras__total-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pd-mejora { transition: none; } }

/* ======================================================================
   CONFIGURADOR EN PANTALLA EMERGENTE  (2026-08-18)
   Cerrado: UNA linea bajo los botones. Abierto: modal, el hero no crece.
   ====================================================================== */
.pd-cfg__resumen {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .9rem 0 0; padding: .55rem .75rem;
  border: 1px solid var(--border-strong); border-radius: var(--cta-radio, 10px);
}
.pd-cfg__txt { display: grid; gap: .05rem; min-width: 0; }
.pd-cfg__estado { font-size: .84rem; font-weight: 700; color: var(--ink); }
.pd-cfg__pista { font-size: .73rem; color: var(--ink-soft); }
.pd-cfg__abrir {
  flex: none; min-height: var(--cta-alto-sm, 36px); padding: 0 .9rem;
  border: 1px solid var(--border-strong); border-radius: var(--cta-radio, 10px);
  background: var(--surface-0); color: var(--brand);
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pd-cfg__abrir:hover { border-color: var(--brand); background: var(--brand-soft); }
.pd-cfg__abrir:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pd-cfg__total[hidden] { display: none !important; }
.pd-cfg__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: .55rem 0 0; font-size: .8rem; color: var(--ink-soft);
}
.pd-cfg__total strong {
  font-family: var(--font-display, inherit); font-size: 1.1rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ── El modal ─────────────────────────────────────────────────────────── */
.pd-cfg__modal {
  /* `margin:auto` es lo que CENTRA un <dialog>: sin el se pega arriba a la
     izquierda, porque el reset del proyecto pone `margin:0` a todo y eso pisa
     el `margin:auto` que trae el agente de usuario. Medido: salia clavado al
     borde izquierdo. */
  margin: auto;
  width: min(30rem, calc(100vw - 2rem)); max-height: min(80vh, 44rem);
  padding: 1.4rem; border: 0; border-radius: var(--radius-lg, 16px);
  background: var(--surface-0); color: var(--ink);
  box-shadow: 0 24px 60px -12px rgba(var(--shadow-brand-rgb,124,58,237), .28);
  overflow: auto;
}
.pd-cfg__modal::backdrop { background: rgba(45,31,61,.45); backdrop-filter: blur(2px); }
.pd-cfg__cerrar-form { float: right; margin: -.4rem -.4rem 0 0; }
.pd-cfg__cerrar {
  width: 34px; height: 34px; border: 0; border-radius: var(--ico-radio, 50%);
  background: transparent; color: var(--ink-soft); font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.pd-cfg__cerrar:hover { background: var(--surface-2); color: var(--ink); }
.pd-cfg__cerrar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pd-cfg__modal-t {
  font-family: var(--font-display, inherit); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; margin: 0 2rem .25rem 0;
}
.pd-cfg__modal-d { font-size: .8rem; color: var(--ink-soft); margin: 0 0 .4rem; line-height: 1.5; }

.pd-cfg__panel { padding: 0; }
.pd-cfg__grupo { border: 0; margin: 0; padding: .8rem 0 0; min-width: 0; }
.pd-cfg__grupo + .pd-cfg__grupo { border-top: 1px solid var(--border); margin-top: .7rem; }
.pd-cfg__leyenda {
  padding: 0; margin: 0 0 .35rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
}
/* Fila seleccionable. El estado NO se comunica solo con color: el nombre pasa
   a negrita ademas de teñirse la fila. Toda la fila es zona de clic y mide 40px
   de alto, que es el objetivo tactil del proyecto. */
.pd-cfg__op {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .6rem;
  align-items: center; min-height: 40px; padding: .3rem .5rem;
  margin: 0 -.5rem; border-radius: 8px; cursor: pointer; font-size: .87rem;
  transition: background .15s var(--aurora-ease, ease);
}
.pd-cfg__op:hover { background: var(--surface-2); }
.pd-cfg__op:has(input:checked) { background: var(--brand-soft); }
.pd-cfg__op:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
.pd-cfg__op input { width: 16px; height: 16px; accent-color: var(--brand); }
.pd-cfg__op:has(input:checked) .pd-cfg__nombre { font-weight: 700; }
.pd-cfg__nombre { color: var(--ink); min-width: 0; }
.pd-cfg__precio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
/* «incluido» no es un precio: se dice, no se cobra. */
.pd-cfg__precio--cero { font-weight: 400; color: var(--ink-soft); font-size: .78rem; }

.pd-cfg__modal-pie {
  position: sticky; bottom: -1.4rem; margin: 1.1rem -1.4rem -1.4rem;
  padding: .9rem 1.4rem; background: var(--surface-1);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pd-cfg__modal-total { display: grid; gap: .05rem; font-size: .75rem; color: var(--ink-soft); }
.pd-cfg__modal-total strong {
  font-family: var(--font-display, inherit); font-size: 1.2rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pd-cfg__listo {
  min-height: var(--cta-alto, 44px); padding: 0 1.4rem; border: 0;
  border-radius: var(--cta-radio, 10px); background: var(--brand); color: #fff;
  font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer;
}
.pd-cfg__listo:hover { background: var(--brand-hover); }
@media (prefers-reduced-motion: reduce) { .pd-cfg__op, .pd-cfg__abrir { transition: none; } }

/* ── REGLA DURA: en movil, tocar un campo NUNCA hace zoom ─────────────────
   Safari de iOS amplia la pagina al enfocar cualquier campo cuyo texto mida
   MENOS de 16px, y al salir del campo no vuelve: el comprador se queda con la
   pagina ampliada y el resto del formulario fuera de pantalla. Es una de las
   causas clasicas de abandono en un checkout.

   La salida barata seria `maximum-scale=1` en el viewport, y esta prohibida a
   proposito: eso le quita el zoom con dos dedos a TODO el mundo, incluida la
   gente que lo necesita para leer. Se arregla donde esta el problema: el
   tamaño del texto.

   Vale para el sitio publico y para el backoffice —los dos cargan esta hoja— y
   pisa a proposito lo que declaren los componentes (`.pl-input`, `.ck-field`,
   `.pl-select`…), porque son justo los que bajan de 16px. Solo cambia el
   tamaño del TEXTO DENTRO del campo; la maquetacion, los anchos y los altos
   siguen siendo los del componente.

   Al tocar aqui: cualquier control nuevo entra solo. No hace falta acordarse. */
@media (max-width: 860px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    font-size: 16px !important;
  }
}