/* ════════════════════════════════════════════════════════════════════════════
   Pana V2 — marco de la app y piezas de página compartidas (Figma "03 - Pana").
   Solo se carga con ui_design = "pana-v2" (<html class="pv2">), después de pana-kit.css y pana-theme.css.
   Solo tokens: ningún hex aquí (D-30); los colores viven en pana-kit.css.
     · Header de la app ............ 150:20648
     · Sidebar + ítem .............. 150:20669 · 191:318 · cuenta 195:6371 · ancla 150:20693
     · Encabezado de página, botones y fila de KPI: los usan el inicio (150:20647) y las calculadoras (224:6170)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header (76 px): wordmark · divisor · lockup Pana + familia | sede · campana · idioma · apariencia · avatar ── */
.pv2 .nav.pv2-hdr{display:flex;align-items:center;gap:16px;height:76px;padding:0 30px;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none}
/* La hamburguesa va siempre: en escritorio pliega el sidebar a rail; ≤1024 px abre el panel deslizable (toggleSidebar). */
.pv2-brand{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none}
.pv2-brand img{display:block;width:180px;height:54px;object-fit:contain}
.pv2-brand-div{width:1px;height:30px;background:var(--border);flex:none}
.pv2-lockup{display:flex;align-items:center;gap:8px}
.pv2-lockup svg{width:26px;height:26px;flex:none}
.pv2-product{font:700 18px var(--pana-font);color:var(--text);white-space:nowrap}
.pv2-family{padding:5px 9px;border-radius:var(--pana-pill);background:var(--pana-info-bg);font:700 10px var(--pana-font);text-transform:uppercase;color:var(--pana-navy)}
.pv2-hdr-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.pv2-branch{display:flex;align-items:center;gap:6px;font:700 11px var(--pana-font);color:var(--text);white-space:nowrap}
.pv2-branch svg{width:18px;height:18px;color:var(--muted)}
.pv2-mode{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border-radius:var(--radius-sm);background:none;border:0;cursor:pointer;font:700 11px var(--pana-font);color:var(--text);transition:background .12s}
.pv2-mode:hover{background:var(--surface2)}
.pv2-mode svg{width:14px;height:14px;color:inherit}
.pv2 .pv2-hdr .nav-ctrl-btn{height:34px;min-width:34px;border-radius:var(--radius-sm);background:none;border:1px solid transparent;color:var(--muted)}
.pv2 .pv2-hdr .nav-ctrl-btn:hover{background:var(--surface2);color:var(--text)}
/* Frame 150:20666: navy + blanco. --accent-ink es navy en Light y azul de marca en Dark (el navy se pierde sobre la
   superficie navy); las iniciales en --pana-canvas dan > 6:1 en los dos, sin override por modo. El avatar es un
   círculo relleno: su hover es un halo de un paso de superficie, no un cambio de fondo que tape las iniciales. */
.pv2-avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--pana-pill);border:0;background:var(--accent-ink);color:var(--pana-canvas);font:700 11px var(--pana-font);cursor:pointer;transition:box-shadow .12s}
.pv2-avatar:hover{box-shadow:0 0 0 3px var(--surface2)}
/* Cuenta abierta desde el avatar del header (escritorio): el popover del pie del sidebar se muestra debajo del avatar,
   no abajo a la izquierda, lejos de donde se hizo clic. En tablet/teléfono sigue dentro del panel deslizable. */
.pv2 .ls-profile-pop.from-hdr{position:fixed;top:68px;right:24px;left:auto;bottom:auto;width:300px;max-height:calc(100dvh - 84px);overflow-y:auto;z-index:400}

/* ── Sidebar (224 px): WORKSPACE · lista · ancla de marca · cuenta al pie ── */
/* Escritorio: columna fija. ≤1024 px: el panel deslizable de la app (lsIsDrawer), debajo del header. */
.pv2 .ls.pv2-side{width:224px;min-width:224px;padding:18px;gap:12px;background:var(--surface);border-right:1px solid var(--border);overflow-x:hidden;backdrop-filter:none;-webkit-backdrop-filter:none}
.pv2-side-lbl{font:700 10px var(--pana-font);text-transform:uppercase;color:var(--muted)}
.pv2 .pv2-nav{display:flex;flex-direction:column;gap:4px;overflow:visible}
.pv2 .pv2-nav .ls-item{margin:0;padding:10px 12px;gap:10px;border-radius:var(--radius-md);font:400 12px var(--pana-font);color:var(--muted)}
.pv2 .pv2-nav .ls-item:hover{color:var(--text)}
.pv2 .pv2-nav .ls-item .icon{width:20px;height:20px;flex:none}
.pv2 .pv2-nav .ls-item.active{font-weight:700;color:var(--pana-on-sun)}
.pv2 .pv2-nav .ls-item:focus-visible{outline:2px solid var(--pana-focus);outline-offset:-2px}
/* Opción de pago (Cash · Tarjeta · Financiado) en las calculadoras V2 (Sigenergy, Baterías Portables, Calentadores):
   un solo estado seleccionado, el de la tarjeta de opción del kit: borde sun de 2 px y marca ✓ en sun, sobre la
   superficie. Antes cada calculadora teñía la tarjeta con su color (en Dark quedaba café/oliva). El precio va en
   --accent-ink y la tarjeta no salta de tamaño al elegirla (el borde extra sale del padding). */
.pv2 .sig-pay{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:none;transition:background .12s,border-color .12s}
.pv2 .sig-pay:hover{background:var(--surface2);border-color:var(--border)}
.pv2 .sig-pay.on,.pv2 .sig-pay.on:hover{border:2px solid var(--pana-sun);background:var(--surface);box-shadow:none;padding:calc(.9rem - .5px) calc(.95rem - .5px)}
.pv2 .sig-pay.on::after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:var(--pana-pill);background:var(--pana-sun);color:var(--pana-on-sun);font:700 12px/20px var(--pana-font);text-align:center}
.pv2 .sig-pay-v{color:var(--accent-ink)}
.pv2 .sig-pay:focus-visible{outline:2px solid var(--pana-focus);outline-offset:2px}
/* Secciones del sidebar (pedido del 5-oct, mismas que v1). La lista scrollea sola; la cuenta queda abajo y el
   triángulo vive en el espacio libre (.pv2-grow se recorta a 0 cuando la lista lo ocupa). */
.pv2-grow{flex:1;position:relative;min-height:0;overflow:hidden;container-type:size}
@container (max-height:64px){.pv2-grow .pana-motif{display:none}}
.pv2-side-scroll{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;margin:0 -6px;padding:0 6px}
.pv2-sec{display:flex;flex-direction:column;gap:6px}
.pv2-sec-h{display:flex;align-items:center;justify-content:space-between;width:calc(100% + 12px);margin:0 -6px;padding:4px 6px;border:0;border-radius:var(--radius-sm);background:none;cursor:pointer;font:700 10px var(--pana-font);text-transform:uppercase;color:var(--muted);transition:color .12s,background .12s}
/* hover = un paso de superficie (regla Pana); el margen negativo deja el texto alineado con los ítems */
.pv2-sec-h:hover{color:var(--text);background:var(--surface2)}
.pv2-sec-h:focus-visible{outline:2px solid var(--pana-focus);outline-offset:2px;border-radius:var(--radius-sm)}
.pv2-sec-h svg{width:14px;height:14px;transition:transform .12s}
.pv2-sec-h[aria-expanded="false"] svg{transform:rotate(-90deg)}
.pv2 .pv2-nav[hidden]{display:none}
.pv2 .pv2-nav .pv2-ic{color:inherit}
.pv2-anchor{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--radius-lg);background:var(--surface2);border:1px solid var(--border)}
.pv2-anchor b{font:700 10px var(--pana-font);color:var(--pana-navy)}
.pv2-anchor span{font:400 9px var(--pana-font);color:var(--muted)}
html.pv2:not(.light) .pv2-anchor b{color:var(--pana-sun)} /* D-20: el titular del ancla va en sun en Dark */
.pv2 .pv2-side .ls-footer{margin:0;padding:0;border:0}
.pv2 .pv2-side .ls-user{gap:10px;padding:10px;border:0;border-radius:var(--radius-md);background:none}
.pv2 .pv2-side .ls-user:hover{background:var(--surface2)}
.pv2 .pv2-side .ls-avatar{width:32px;height:32px;border-radius:var(--pana-pill);background:var(--pana-blue);color:var(--pana-on-blue);font:700 10px var(--pana-font)}
.pv2 .pv2-side .ls-user-name{font:600 12px var(--pana-font);color:var(--text)}
.pv2 .pv2-side .ls-user-role{font:400 10px var(--pana-font);letter-spacing:0;text-transform:none;color:var(--muted)}
.pv2 .pv2-side .ls-user-chev{width:16px;height:16px;color:var(--muted);transform:rotate(90deg)}
.pv2 .pv2-side>.pana-motif{z-index:0}
.pv2 .ls-pp-logout{width:100%;border:0;background:none;cursor:pointer;font:inherit;text-align:left;color:var(--text)}
.pv2 .ls-pp-logout:hover{background:var(--surface2)}

/* ── Encabezado de página (eyebrow · título · descripción · ruta mono | acciones) ── */
.pv2-page{display:flex;flex-direction:column;gap:13px;max-width:1216px;margin:0 auto;padding:22px 24px 24px;font-family:var(--pana-font);color:var(--text)}
.pv2-head{position:relative;display:flex;align-items:center;gap:8px;min-height:102px;overflow:hidden}
.pv2-head .pana-vendor-tile{flex:0 0 auto;position:relative;z-index:1}
.pv2-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.pv2-eyebrow{display:flex;align-items:center;gap:10px;font:700 11px var(--pana-font);text-transform:uppercase;color:var(--text)}
.pv2-eyebrow span{width:38px;height:4px;border-radius:var(--pana-pill);background:var(--pana-sun)}
.pv2-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pv2-title h1{margin:0;font:700 30px/1.2 var(--pana-font);color:var(--text)}
.pv2-sub{margin:0;font:400 12px var(--pana-font);color:var(--muted)}
.pv2-route{margin:0;font:400 10px var(--pana-mono);color:var(--muted)}
.pv2-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.pv2-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;font:700 13px var(--pana-font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.pv2-btn svg{width:15px;height:15px}
.pv2-btn.ghost{background:none;color:var(--muted);padding-left:4px;transition:background .12s,color .12s}
.pv2-btn.ghost:hover{background:var(--surface2);color:var(--text)}
.pv2-btn:disabled{opacity:.55;cursor:default}
.pv2-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pv2-kpis .pana-kpi{min-height:108px}
.pv2-kpis .pana-kpi small{display:flex;align-items:center;gap:8px}
.pv2-kpis .pana-kpi small svg,.pv2-ic{width:18px;height:18px;color:var(--pana-blue)}
.pv2-kpis .pana-kpi b.pv2-kpi-text,.pv2-kpi-unit{font-family:var(--pana-font)} /* la mono es solo para cifras */
.pv2-ic{display:inline-block;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}

/* Triángulos del encabezado: con el encabezado angosto tocarían el texto (regla: nunca sobre texto). */
@media (max-width:1319px){.pv2-head .pana-motif{display:none}}

/* ── Rail de 64 px (escritorio, D-39): lo pide el organigrama del Directorio de Ventas para ganar ancho y lo alterna la
   hamburguesa. Ítems = Navigation/Sidebar item variante rail (.pana-nav.is-rail del kit); el nombre va en el tooltip
   (data-label). Las secciones quedan abiertas y separadas por una línea; sin títulos, ancla de marca ni triángulo. ── */
@media (min-width:1025px){
  .pv2 .app-shell.ls-rail .ls.pv2-side{width:64px;min-width:64px;padding:18px 12px}
  .pv2 .app-shell.ls-rail .pv2-side .pv2-nav .ls-item{width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:var(--radius-md)}
  /* El nombre sigue para el lector de pantalla (solo se oculta a la vista); el tooltip lo muestra con mouse y con teclado. */
  .pv2 .app-shell.ls-rail .pv2-side .pv2-nav .ls-item>span{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* El ::after del ítem activo es la marca del kit (4x20): plegado se oculta, salvo cuando hace de tooltip. */
  .pv2 .app-shell.ls-rail .pv2-side .pv2-nav .ls-item.is-active:not(:hover):not(:focus-visible)::after{display:none}
  /* Tooltip con el nombre, con mouse y con teclado. La lista tiene scroll y recortaría un tooltip absoluto fuera del rail;
     con position:fixed sale del recorte (el sidebar V2 no tiene backdrop-filter que lo atrape). _railTip (shell) pone
     --tip-x/--tip-y con la posición del ítem: 10 px a su derecha, centrado en su alto. */
  .pv2 .app-shell.ls-rail .pv2-side .pv2-nav .ls-item:is(:hover,:focus-visible)::after{content:attr(data-label);position:fixed;inset:var(--tip-y) auto auto var(--tip-x);width:auto;height:auto;margin:0;transform:translateY(-50%);padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:600 12px var(--pana-font);white-space:nowrap;box-shadow:var(--pana-shadow-card);z-index:400;pointer-events:none}
  .pv2 .app-shell.ls-rail .pv2-side-lbl,.pv2 .app-shell.ls-rail .pv2-sec-h,.pv2 .app-shell.ls-rail .pv2-anchor,.pv2 .app-shell.ls-rail .pv2-grow{display:none}
  .pv2 .app-shell.ls-rail .pv2-nav[hidden]{display:flex}
  .pv2 .app-shell.ls-rail .pv2-sec{padding-top:10px;border-top:1px solid var(--border)}
  .pv2 .app-shell.ls-rail .pv2-side .ls-user{justify-content:center;padding:4px}
}

/* ── Módulos de datos (Comisiones, Sales Ops, Employees): piezas compartidas ─────────────────────────────────────
   .pv2-data va en el contenedor de la página; las reglas suben sobre el CSS propio de cada módulo (.pv2 delante). */
/* Los módulos de datos llevan tablas anchas: su página llega a 1560 px (el resto del marco V2 se queda en 1216). */
.pv2 .pv2-page.pv2-data{max-width:1560px}
/* Pestañas como Route stepper (150:21628, 150:23817): es un selector, no un avance. La abierta es .is-current
   (barra y punto sol del kit); las demás .is-upcoming. El label va dentro del botón de la pestaña. */
.pv2 .pv2-steptabs{display:flex;gap:8px;max-width:none;margin:0 0 13px}
.pv2 .pv2-steptabs [role=tab]{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:400 10px var(--pana-font);color:var(--muted);text-align:left;cursor:pointer;transition:background .12s}
.pv2 .pv2-steptabs [role=tab]:hover{color:var(--text);background:var(--surface2)}
.pv2 .pv2-steptabs [role=tab].is-current{color:var(--text);font-weight:600}
/* Fila de la pestaña: el label se corta con puntos suspensivos (el nombre completo va en title) y el contador queda fuera
   del corte, siempre visible. */
.pv2 .pv2-steptabs .pv2-steprow{display:flex;align-items:center;gap:6px;min-width:0}
.pv2 .pv2-steptabs .lbl{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv2 .pv2-steptabs .is-current .lbl::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--pana-sun);vertical-align:middle}
@media (max-width:720px){.pv2 .pv2-steptabs{flex-wrap:wrap}.pv2 .pv2-steptabs [role=tab]{flex:0 0 calc(50% - 4px)}}
/* Fila de KPI de largo variable (4-5 tarjetas) con el icono en el tono del borde; la KPI que filtra es un botón y la
   elegida (aria-pressed) lleva el fondo de selección del kit. */
.pv2 .pv2-data .pv2-kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:13px}
.pv2-data .pv2-kpis .pana-kpi.warning small svg{color:var(--pana-warning)} .pv2-data .pv2-kpis .pana-kpi.success small svg{color:var(--pana-success)}
.pv2-data .pv2-kpis small :is(i,svg)~.dot{display:none}
.pv2-kpib{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .12s}
.pv2-kpib:hover{background:var(--surface2)}
.pv2-kpib[aria-pressed="true"]{background:color-mix(in srgb,var(--pana-sun) 14%,var(--surface))}
/* Trabajo + riel (Sales Ops 150:21628): columna de datos y riel de contexto de 330 px. Tarjeta-tabla con barra (icono,
   título y pastilla), vacío y pie. Tarjeta de contexto del riel con borde en el tono (info azul, notes verde, warning
   naranja) y su motif chico. Las usan Eventos e Intake; sv2-/cmv2- tienen copias propias (pendiente pasarlas a estas). */
.pv2-work{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.pv2-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.pv2-rail{display:flex;flex-direction:column;gap:12px;min-width:0}
.pv2-tbar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--border)}
.pv2-tt{display:flex;align-items:center;gap:9px;margin-right:auto;font:700 12px var(--pana-font);color:var(--text)}
.pv2-tt svg{width:20px;height:20px;color:var(--muted)}
.pv2-tfoot{margin:0;padding:12px 16px;border-top:1px solid var(--border);font:400 10px/1.5 var(--pana-font);color:var(--muted)}
.pv2-empty{padding:28px 16px;text-align:center;font:400 12px/1.5 var(--pana-font);color:var(--muted)}
.pv2-ctx{display:flex;flex-direction:column;gap:9px;padding:16px}
.pv2-ctx.info{border-color:var(--pana-blue)} .pv2-ctx.notes{border-color:var(--pana-success)} .pv2-ctx.warning{border-color:var(--pana-warning)}
.pv2-ctx-l{position:relative;z-index:1;display:flex;align-items:center;gap:8px;color:var(--text)}
.pv2-ctx-l svg{width:18px;height:18px;color:var(--pana-blue)}
.pv2-ctx.notes .pv2-ctx-l svg{color:var(--pana-success)} .pv2-ctx.warning .pv2-ctx-l svg{color:var(--pana-warning)}
.pv2-ctx h2{position:relative;z-index:1;margin:0;font:700 18px/1.3 var(--pana-font);color:var(--text)}
.pv2-ctx p{position:relative;z-index:1;margin:0;font:400 11px/1.5 var(--pana-font);color:var(--muted)}
@media (max-width:1024px){.pv2-work{grid-template-columns:1fr}}
/* Campos de formulario (calculadoras 224:6170): etiqueta en caption, campo de 40 px sobre surface2 y el anillo Pana al
   enfocar. Los usa Eventos (Nuevo / Editar); las calculadoras siguen con sus .sig-* (pasarlas a estas: deuda en PARITY). */
.pv2 .pv2-lbl{font:700 10px/1.4 var(--pana-font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pv2 :is(.pv2-input,.pv2-select,.pv2-textarea){width:100%;box-sizing:border-box;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);font:400 12px var(--pana-font);color:var(--text)}
.pv2 :is(.pv2-input,.pv2-select){height:40px;padding:0 12px}
.pv2 .pv2-textarea{padding:10px 12px;line-height:1.5;resize:vertical}
.pv2 :is(.pv2-input,.pv2-select,.pv2-textarea):focus{outline:2px solid var(--pana-focus);outline-offset:1px;box-shadow:none}
/* Tablas (720:14982): cabecera en mono 9 px mayúscula sobre el canvas; cifras en mono; celdas de 10 px de aire. */
.pv2 .pv2-data table thead th{font:700 9px/1.4 var(--pana-mono);letter-spacing:0;text-transform:uppercase;color:var(--muted);background:var(--surface2)}
.pv2 .pv2-data .dt-table{font-size:12px}
.pv2 .pv2-data .dt-num{font-family:var(--pana-mono);white-space:nowrap}
.pv2 .pv2-data .dt-table thead th,.pv2 .pv2-data .dt-table tbody td{padding:10px}

/* ── Tablet / teléfono: el sidebar es el panel deslizable de la app (≤1024, como lsIsDrawer) y el header se acorta ── */
@media (min-width:1025px){.pv2 .ls.pv2-side{position:relative}}
@media (min-width:901px){.pv2 .app-shell{height:calc(100dvh - 76px)}}
@media (max-width:1024px){
  .pv2 .ls.pv2-side{position:fixed;top:76px;left:-260px;height:calc(100dvh - 76px);z-index:300;overflow-y:auto}
  .pv2 .ls.pv2-side.open{left:0}
}
@media (max-width:900px){
  .pv2 .nav.pv2-hdr{height:60px;padding:0 12px;gap:10px}
  .pv2-brand img,.pv2-brand-div,.pv2-family,.pv2-branch{display:none}
  .pv2-hdr-actions{gap:6px}
  .pv2 .ls.pv2-side{top:60px;height:calc(100dvh - 60px)}
}
@media (min-width:769px) and (max-width:900px){.pv2 .app-shell{height:calc(100dvh - 60px)}}
@media (max-width:768px){.pv2 .app-shell{min-height:calc(100dvh - 60px)}}
/* "Ver como" suma un control al header: en teléfono el nombre del producto cede su lugar (queda la hoja). */
@media (max-width:480px){.pv2-hdr:has(.pana-viewas) .pv2-product{display:none}}
@media (max-width:760px){
  .pv2-page{padding:16px}
  .pv2-kpis{grid-template-columns:1fr}
  .pv2-kpis .pana-kpi{min-height:0}
  .pv2-head{flex-wrap:wrap}
  .pv2-actions{width:100%}
}