/* ========================================= */
      /* CONTROL DE VISTAS (LA MAGIA DEL CAMBIO)   */
      /* ========================================= */
      .view-hidden {
          display: none !important;
      }

      .view-active {
          display: block !important;
      }

      /* ========================================= */
      /* ✅ [FIX-87] PALETA SAAS PROFESIONAL       */
      /* Marca: Turquesa #00D1B2 + Coral #FF6B6B   */
      /* Base: Blanco limpio + grises neutros      */
      /* Inspiración: Stripe, Linear, Notion       */
      /* ========================================= */
      :root {
          /* — Marca Pilas! — */
          --turquesa: #00D1B2;
          --turquesa-dark: #00A896;
          --turquesa-light: #E6FAF8;
          --coral: #FF6B6B;
          --coral-dark: #E85555;
          --coral-light: #FFF0F0;

          /* — Fondos — */
          --bg-app: #F8FAFC;
          /* Fondo principal: blanco frío */
          --bg-card: #FFFFFF;
          /* Cards: blanco puro */
          --bg-subtle: #F1F5F9;
          /* Fondos secundarios */
          --bg-hover: #EFF6FF;
          /* Hover state */

          /* — Texto — */
          --texto-oscuro: #0F172A;
          /* Títulos: casi negro */
          --texto-medio: #475569;
          /* Cuerpo: gris medio */
          --texto-suave: #94A3B8;
          /* Placeholders, labels */

          /* — Bordes — */
          --borde: #E2E8F0;
          /* Bordes sutiles */
          --borde-focus: #00D1B2;
          /* Borde activo */

          /* — Estados — */
          --success: #10B981;
          /* Verde esmeralda */
          --success-light: #ECFDF5;
          --warning: #F59E0B;
          /* Ámbar */
          --warning-light: #FFFBEB;
          --danger: #EF4444;
          /* Rojo */
          --danger-light: #FEF2F2;
          --info: #3B82F6;
          /* Azul */
          --info-light: #EFF6FF;

          /* — Sombras — */
          --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
          --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
          --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
          --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);

          /* — Mapeo de compatibilidad — */
          --accent: var(--turquesa);
          --wa: #25D366;
          --dark-blue: var(--texto-oscuro);
          --bg: var(--bg-app);

          /* ✅ [FIX-89b] Variables semánticas para el radar y modal CFO */
          --info: #3B82F6;
          --info-light: #EFF6FF;

      }

      body {
          font-family: 'Poppins', 'Inter', 'Segoe UI', sans-serif;
          background: var(--bg-app) !important;
          margin: 0;
          padding: 0 !important;
          color: var(--texto-oscuro);
          -webkit-font-smoothing: antialiased;
      }

      #vista-cliente {
          height: 100vh;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 50px;
          background-color: var(--bg-app) !important;
          background-image: none !important;
      }

      /* — CABECERA ERP (v2: chip de marca + jerarquía) — */
      .header-erp {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 60px;
          background: var(--bg-card);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 8px;
          box-sizing: border-box;
          box-shadow: var(--shadow-sm);
          border-bottom: 1px solid var(--borde);
          z-index: 50;
      }

      /* Grupo derecho: íconos de acción */
      #rp-header-slot {
          display: flex;
          align-items: center;
          gap: 2px;
          flex-shrink: 0;
      }

      /* Tipografía general de spans del header (regla amplia conservada) */
      .header-erp span {
          font-weight: 700;
          font-size: 13px;
          color: var(--texto-oscuro);
          letter-spacing: -0.2px;
      }

      /* Botón hamburguesa (izquierda) → chip de marca */
      .header-erp>button {
          background: var(--turquesa-light);
          border: 1.5px solid transparent;
          color: var(--turquesa);
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 7px;
          padding: 8px 12px;
          border-radius: 12px;
          transition: border-color .15s, transform .15s;
          flex-shrink: 0;
      }

      .header-erp>button:hover {
          border-color: var(--turquesa);
      }

      .header-erp>button:active {
          transform: scale(.96);
      }

      .header-erp>button svg {
          stroke: var(--turquesa);
      }

      .header-erp>button span {
          font-weight: 800;
          font-size: 12px;
          color: var(--turquesa);
          letter-spacing: .4px;
      }

      /* ── Íconos del header (lado derecho) ── */
      .hdr-icon-btn {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: none;
          border: none !important;
          border-radius: 12px;
          cursor: pointer;
          color: var(--texto-suave);
          transition: background .15s, color .15s, transform .15s;
          position: relative;
          flex-shrink: 0;
          padding: 0 !important;
      }

      .hdr-icon-btn:hover {
          background: var(--bg-subtle);
          color: var(--texto-oscuro);
      }

      .hdr-icon-btn:active {
          transform: scale(.9);
      }

      /* Estado activo: ícono encendido con aro del color del tema */
      .hdr-icon-btn.activo {
          color: var(--turquesa);
          background: var(--turquesa-light);
          box-shadow: inset 0 0 0 1.5px var(--turquesa);
      }

      /* 🔔 Centro de Alertas — usa solo variables de tema (black/clasico/orquidea) */
      #campana-badge {
          position: absolute;
          top: 3px;
          right: 3px;
          min-width: 16px;
          height: 16px;
          padding: 0 4px;
          border-radius: 8px;
          background: var(--danger);
          color: #fff;
          font-size: 10px;
          font-weight: 700;
          line-height: 1;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      .alertas-panel {
          position: fixed;
          top: 64px;
          right: 8px;
          width: 330px;
          max-width: calc(100vw - 16px);
          max-height: 72vh;
          background: var(--bg-card);
          border: 1px solid var(--borde);
          border-radius: 14px;
          box-shadow: var(--shadow-md);
          z-index: 60;
          flex-direction: column;
          overflow: hidden;
          animation: alertasIn .18s ease;
      }

      @keyframes alertasIn {
          from {
              opacity: 0;
              transform: translateY(-8px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .alertas-panel-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 14px;
          border-bottom: 1px solid var(--borde);
          font-size: 14px;
          font-weight: 700;
          color: var(--texto-oscuro);
          flex-shrink: 0;
      }

      .alertas-cerrar {
          background: none;
          border: none;
          color: var(--texto-suave);
          cursor: pointer;
          padding: 4px;
          display: flex;
          border-radius: 8px;
      }

      .alertas-cerrar:hover {
          background: var(--bg-subtle);
          color: var(--texto-oscuro);
      }

      .alertas-lista {
          overflow-y: auto;
          padding: 8px;
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .alertas-vacio {
          text-align: center;
          padding: 30px 16px;
          color: var(--texto-suave);
          font-size: 13px;
          line-height: 1.6;
      }

      .alerta-item {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          padding: 11px 12px;
          border-radius: 10px;
          cursor: pointer;
          border-left: 3px solid var(--borde);
          background: var(--bg-subtle);
          transition: transform .12s;
      }

      .alerta-item:hover {
          transform: translateX(2px);
      }

      .alerta-item.urgente {
          border-left-color: var(--danger);
      }

      .alerta-item.atencion {
          border-left-color: var(--warning);
      }

      .alerta-item.info {
          border-left-color: var(--accent);
      }

      .alerta-icono {
          font-size: 18px;
          line-height: 1.2;
          flex-shrink: 0;
      }

      .alerta-cuerpo {
          flex: 1;
          min-width: 0;
      }

      .alerta-titulo {
          font-size: 13px;
          font-weight: 700;
          color: var(--texto-oscuro);
      }

      .alerta-detalle {
          font-size: 12px;
          color: var(--texto-suave);
          margin-top: 2px;
          line-height: 1.4;
      }

      .alerta-flecha {
          margin-left: auto;
          align-self: center;
          color: var(--texto-suave);
          font-size: 22px;
          line-height: 1;
          flex-shrink: 0;
          padding-left: 4px;
      }

      .alerta-item:active {
          transform: scale(.985);
      }

      /* Badge de notificación encima del ícono */
      .hdr-icon-badge {
          position: absolute;
          top: 4px;
          right: 4px;
          min-width: 16px;
          height: 16px;
          background: #FF6B6B;
          color: white;
          border-radius: 100px;
          font-size: 9px;
          font-weight: 800;
          display: none;
          align-items: center;
          justify-content: center;
          padding: 0 3px;
          pointer-events: none;
      }

      /* Ícono WiFi — color por estado, sin pill */
      .hdr-wifi-online {
          color: #27ae60;
      }

      .hdr-wifi-offline {
          color: var(--coral, #FF6B6B);
          animation: hdr-wifi-pulse 1.2s ease-in-out infinite;
      }

      @keyframes hdr-wifi-pulse {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: .35;
          }
      }

      /* Pill legacy — se mantiene por si queda alguna ref, pero oculta */

      /* --- 2. CONTENEDOR CENTRAL DINÁMICO (EL MOTOR DEL SCROLL) --- */
      .contenido-dinamico-erp {
          position: absolute;
          top: 60px;
          /* Empieza justo debajo de la cabecera */
          bottom: 0;
          /* Llega hasta el final */
          width: 100%;
          overflow-y: auto;
          /* AQUÍ ESTÁ LA MAGIA: Solo esta zona hace scroll */
          padding: 20px 20px 120px 20px;
          /* Padding extra abajo para que el menú no tape el contenido */
          box-sizing: border-box;
          -webkit-overflow-scrolling: touch;
          /* Scroll suave en iPhones */
      }

      /* Un estilo de prueba para las "Tarjetas" (Cards) de balance y ventas */

      /* ========================================= */
      /* MENÚ INFERIOR PREMIUM v2 (PILAS!)         */
      /* Vidrio esmerilado + píldora animada.      */
      /* Altura 68px y estructura intactas.        */
      /* ========================================= */

      .bottom-nav {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 68px;
          background: var(--bg-card);
          display: flex;
          justify-content: space-around;
          align-items: center;
          box-shadow: 0 -1px 0 var(--borde), var(--shadow-md);
          z-index: 100;
          padding-bottom: env(safe-area-inset-bottom);
      }

      /* Vidrio: el contenido se desliza por debajo de la barra */
      @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
          .bottom-nav {
              background: rgba(255, 255, 255, .82);
              backdrop-filter: blur(16px) saturate(1.4);
              -webkit-backdrop-filter: blur(16px) saturate(1.4);
          }

          body.tema-black .bottom-nav {
              background: rgba(17, 17, 23, .78);
          }

          body.tema-orquidea .bottom-nav {
              background: rgba(30, 21, 40, .78);
          }
      }

      .bottom-nav button {
          background: none;
          border: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          color: var(--texto-suave);
          cursor: pointer;
          transition: color .2s;
          flex: 1;
          padding: 8px 4px;
          position: relative;
      }

      .bottom-nav button svg {
          width: 24px;
          height: 24px;
          stroke: currentColor;
          transition: transform .2s;
          position: relative;
          z-index: 1;
      }

      .bottom-nav button span {
          font-size: 11px;
          font-weight: 600;
          position: relative;
          z-index: 1;
      }

      @keyframes nav-pildora-in {
          0% {
              transform: translateX(-50%) scale(.55);
              opacity: 0;
          }

          60% {
              transform: translateX(-50%) scale(1.08);
              opacity: 1;
          }

          100% {
              transform: translateX(-50%) scale(1);
              opacity: 1;
          }
      }

      @keyframes nav-icono-pop {
          0% {
              transform: translateY(0) scale(1);
          }

          45% {
              transform: translateY(-3px) scale(1.12);
          }

          100% {
              transform: translateY(-1px) scale(1);
          }
      }

      .bottom-nav button.activo {
          color: var(--turquesa);
      }

      .bottom-nav button.activo span {
          font-weight: 800;
      }

      .bottom-nav button.activo svg {
          transform: translateY(-1px);
          filter: drop-shadow(0 2px 5px rgba(0, 209, 178, .35));
          animation: nav-icono-pop .32s cubic-bezier(.22, 1.3, .36, 1);
      }

      body.tema-orquidea .bottom-nav button.activo svg {
          filter: drop-shadow(0 2px 5px rgba(199, 123, 232, .4));
      }

      /* Píldora activa animada detrás del ícono */
      .bottom-nav button.activo::before {
          content: '';
          position: absolute;
          top: 4px;
          left: 50%;
          transform: translateX(-50%);
          width: 42px;
          height: 32px;
          background: var(--turquesa-light);
          border-radius: 12px;
          border-top: 2px solid var(--turquesa);
          pointer-events: none;
          animation: nav-pildora-in .28s cubic-bezier(.22, 1.3, .36, 1);
      }

      /* --- FAB CENTRAL: ANILLO LED v2 (tematizable + halo que respira) --- */
      .fab-central-pro {
          position: fixed;
          bottom: 25px;
          left: 50%;
          transform: translateX(-50%);
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: 3.5px solid transparent;
          background:
              linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              linear-gradient(135deg, var(--turquesa) 15%, var(--bg-card) 50%, var(--coral) 85%) border-box;
          box-shadow:
              -3px -3px 12px -2px rgba(0, 224, 198, 0.55),
              3px 3px 12px -2px rgba(255, 107, 107, 0.55),
              0 12px 24px rgba(0, 0, 0, 0.14);
          cursor: pointer;
          z-index: 1001;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
      }

      /* Halo respirando: guía la mirada hacia la acción principal */
      .fab-central-pro::after {
          content: '';
          position: absolute;
          inset: -7px;
          border-radius: 50%;
          border: 2px solid var(--turquesa);
          opacity: 0;
          animation: fab-respira 3.6s ease-in-out infinite;
          pointer-events: none;
      }

      @keyframes fab-respira {

          0%,
          100% {
              opacity: 0;
              transform: scale(.92);
          }

          50% {
              opacity: .35;
              transform: scale(1.04);
          }
      }

      .fab-central-pro:hover {
          transform: translateX(-50%) translateY(-2px);
      }

      .fab-central-pro:active {
          transform: translateX(-50%) scale(0.92);
          box-shadow:
              -2px -2px 8px -1px rgba(0, 224, 198, 0.85),
              2px 2px 8px -1px rgba(255, 107, 107, 0.85),
              0 4px 10px rgba(0, 0, 0, 0.08);
      }

      body.tema-orquidea .fab-central-pro {
          box-shadow:
              -3px -3px 12px -2px rgba(199, 123, 232, 0.55),
              3px 3px 12px -2px rgba(232, 173, 170, 0.55),
              0 12px 24px rgba(0, 0, 0, 0.25);
      }

      @media (prefers-reduced-motion: reduce) {

          .fab-central-pro::after,
          .bottom-nav button.activo::before,
          .bottom-nav button.activo svg {
              animation: none !important;
          }
      }

      /* --- 5. MENÚ LATERAL (v2: deslizamiento premium) --- */
      .offcanvas-menu {
          position: absolute;
          top: 0;
          left: 0;
          width: 280px;
          height: 100%;
          background-color: var(--bg-card);
          z-index: 200;
          transform: translateX(-102%);
          transition: transform .34s cubic-bezier(.32, .72, .16, 1), box-shadow .34s ease;
          box-shadow: none !important;
          border-right: 1px solid var(--borde);
      }

      /* Esta clase se la pone JavaScript para que aparezca */
      .offcanvas-menu.abierto {
          transform: translateX(0);
          box-shadow: 12px 0 34px rgba(0, 0, 0, .18) !important;
      }

      /* Scrollbar fino del cuerpo del menú */
      .offcanvas-menu div::-webkit-scrollbar {
          width: 5px;
      }

      .offcanvas-menu div::-webkit-scrollbar-thumb {
          background: var(--borde);
          border-radius: 10px;
      }

      .offcanvas-menu div::-webkit-scrollbar-thumb:hover {
          background: var(--turquesa);
      }

      /* ========================================= */
      /* ESTILOS PARA CERRAR EL MENÚ LATERAL       */
      /* ========================================= */

      /* El telón de fondo: oscurece y desenfoca el ERP detrás */
      #overlay-menu {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(5, 17, 31, .45);
          z-index: 150;
          opacity: 0;
          visibility: hidden;
          transition: opacity .3s ease, visibility .3s ease;
      }

      /* Clase que le pone JS para que aparezca */
      #overlay-menu.activo {
          opacity: 1;
          visibility: visible;
          backdrop-filter: blur(3px);
          -webkit-backdrop-filter: blur(3px);
      }

      /* Estilos de la cabecera del menú lateral */

      .btn-cerrar-menu {
          background: none;
          border: none;
          font-size: 22px;
          color: #888;
          cursor: pointer;
          padding: 0;
      }

      /* ========================================= */
      /* ESTILOS PREMIUM PARA CATÁLOGO CLIENTE     */
      /* ========================================= */

      /* Tipografía de la marca y modelo */
      .text-premium-marca {
          font-size: 12px;
          color: #888;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 2px;
      }

      .text-premium-modelo {
          font-size: 18px;
          font-weight: 800;
          color: #1a1a1a;
          line-height: 1.2;
          margin-bottom: 8px;
      }

      /* Etiquetas (Badges) Corregidas */

      /* Botón Agregar al Carrito */
      .btn-premium-cart {
          width: 100%;
          background: var(--turquesa);
          /* Botón Turquesa de acción */
          color: white;
          border: none;
          padding: 14px;
          border-radius: 12px;
          font-size: 14px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          cursor: pointer;
          box-shadow: 0 6px 15px rgba(0, 209, 178, 0.3);
          transition: all 0.2s;
      }

      .btn-premium-cart:active {
          transform: scale(0.97);
          box-shadow: 0 2px 5px rgba(0, 200, 83, 0.3);
      }

      .btn-premium-cart.btn-agotado {
          background: #cbd5e1;
          color: #64748b;
          box-shadow: none;
          cursor: not-allowed;
      }

      /* Títulos internos de los slides */

      /* --- HEADER DE MARCA LIMPIO --- */
      .header-marca {
          text-align: center;
          padding: 30px 15px;
          background: #ffffff;
          /* Blanco limpio */
          border: 1px solid #f0f0f0;
          color: var(--texto-oscuro);
          border-radius: 20px;
          margin-bottom: 20px;
          position: relative;
          box-shadow: 0 10px 25px rgba(0, 209, 178, 0.05);
          /* Sombra turquesa sutil */
      }

      .btn-admin-config {
          position: absolute;
          top: 10px;
          right: 15px;
          background: none;
          border: none;
          color: rgba(255, 255, 255, 0.4);
          font-size: 20px;
          cursor: pointer;
      }

      .btn-oferta-especial {
          background: var(--coral);
          /* Coral para llamar la atención en ofertas */
          color: #fff;
          border: none;
          padding: 14px 25px;
          font-size: 15px;
          font-weight: 800;
          border-radius: 50px;
          cursor: pointer;
          text-transform: uppercase;
          margin-bottom: 20px;
          box-shadow: 0 6px 15px rgba(255, 107, 107, 0.3);
      }

      .btn-oferta-especial.activo {
          background: #fff;
          color: var(--coral);
          border: 2px solid var(--coral);
          box-shadow: none;
      }

      .filtros-container {
          display: flex;
          justify-content: center;
          gap: 10px;
          flex-wrap: wrap;
          /* NUEVO: Asegura que el contenedor respete los márgenes de la pantalla */
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
      }

      /* ESTILOS PANEL ADMIN MEJORADO */
      #panel-admin {
          display: none;
          background: #ffffff;
          margin: 10px auto 20px;
          padding: 24px;
          border-radius: 24px;
          max-width: 450px;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
          /* Sombra 3D elegante */
          border: 1px solid #f0f0f0;
          /* Borde súper fino, sin azul oscuro */
          color: var(--texto-oscuro);
      }

      .seccion-admin {
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px dashed #eee;
      }

      /* --- CAJAS DE TEXTO FINTECH --- */
      /* — INPUTS ADMIN — */
      .input-admin {
          width: 100%;
          padding: 12px 16px;
          margin-bottom: 10px;
          background: var(--bg-subtle);
          border: 1.5px solid var(--borde);
          border-radius: 12px;
          box-sizing: border-box;
          font-size: 14px;
          font-family: inherit;
          color: var(--texto-oscuro);
          transition: all 0.2s ease;
      }

      .input-admin::placeholder {
          color: var(--texto-suave);
      }

      .input-admin:focus {
          background: var(--bg-card);
          border-color: var(--turquesa);
          box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.12);
          outline: none;
      }

      /* — BOTONES ADMIN — */
      .btn-admin-acc {
          width: 100%;
          padding: 13px 20px;
          border: none;
          border-radius: 12px;
          color: white;
          font-weight: 700;
          font-size: 14px;
          font-family: inherit;
          margin-bottom: 6px;
          cursor: pointer;
          background: var(--turquesa);
          box-shadow: 0 4px 12px rgba(0, 209, 178, 0.25);
          transition: all 0.2s ease;
          letter-spacing: 0.2px;
      }

      .btn-admin-acc:hover {
          background: var(--turquesa-dark);
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(0, 209, 178, 0.35);
      }

      .btn-admin-acc:active {
          transform: translateY(0) scale(0.98);
          box-shadow: 0 2px 6px rgba(0, 209, 178, 0.2);
      }

      /* CONTROLES POR CATEGORIA */
      .fila-descuento {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #f9f9f9;
          padding: 8px;
          border-radius: 8px;
          margin-bottom: 5px;
          border: 1px solid #eee;
      }

      .fila-descuento span {
          font-size: 13px;
          font-weight: bold;
          color: #555;
          max-width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .select-mini {
          padding: 5px;
          border-radius: 5px;
          border: 1px solid #ccc;
          font-size: 12px;
      }

      /* LOG DE AUDITORIA VISUAL */

      /* MODAL CLAVE */
      .modal-pass {
          display: none;
          position: fixed;
          z-index: 999999;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(4px);
      }

      /* ========================================= */
      /* GRID PEIGO STYLE (Bulldozer Fix)          */
      /* ========================================= */
      .grid-tienda {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 8px !important;
          width: 100% !important;
          max-width: 100vw !important;
          padding: 10px !important;
          margin: 0 !important;
          box-sizing: border-box !important;
          justify-items: stretch !important;
          /* Fuerza a estirar a los lados */
      }

      /* 🚀 DETECTOR DE PANTALLAS GRANDES (Tablets y PC) */
      @media (min-width: 600px) {
          .grid-tienda {
              grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
              gap: 10px !important;
              padding: 20px !important;
          }
      }

      /* Aseguramos que la tarjeta ocupe toda su columna */
      .item-card-mini {
          width: 100% !important;
          margin: 0 !important;
          box-sizing: border-box !important;
          background: #ffffff;
          border-radius: 18px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
          display: flex;
          flex-direction: column;
          position: relative;
          overflow: hidden;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          cursor: pointer;
      }

      .item-card-mini:active {
          transform: scale(0.97);
      }

      .mini-foto-container {
          width: 100%;
          aspect-ratio: 1 / 1;
          background: #f8f9fa;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .mini-foto-container img {
          max-width: 90%;
          max-height: 90%;
          object-fit: contain;
      }

      .mini-info {
          padding: 10px 12px;
      }

      .mini-modelo {
          font-size: 11px;
          color: #636e72;
          font-weight: 800;
          text-transform: uppercase;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .mini-precio {
          font-size: 18px;
          font-weight: 900;
          color: #2d3436;
          margin-top: 2px;
          letter-spacing: -0.5px;
      }

      /* Etiquetas para la Miniatura */
      .badge-promo-mini {
          position: absolute;
          top: 8px;
          left: 8px;
          background: #00C8B6;
          color: white;
          font-weight: 800;
          font-size: 10px;
          padding: 4px 8px;
          border-radius: 6px;
          z-index: 2;
          box-shadow: 0 2px 5px rgba(0, 200, 182, 0.3);
      }

      .badge-stock-zero {
          position: absolute;
          top: 8px;
          right: 8px;
          background: #FF6B6B;
          color: white;
          font-weight: 800;
          font-size: 10px;
          padding: 4px 8px;
          border-radius: 6px;
          z-index: 2;
          box-shadow: 0 2px 5px rgba(255, 107, 107, 0.3);
      }

      /* --- TARJETA EXPANDIDA (El Modal / Pop-Up) --- */
      /* Usaremos tu .item-card antiguo pero ajustado para el modal */

      .detalle {
          padding: 15px;
          flex-grow: 1;
      }



      .btn-pedido {
          text-align: center;
          padding: 15px;
          text-decoration: none;
          font-weight: 800;
          border-radius: 0 0 15px 15px;
          transition: 0.2s;
      }

      .btn-activo {
          background: var(--wa);
          color: white;
      }

      .btn-agotado {
          background: #ccc;
          color: #666;
          cursor: not-allowed;
          pointer-events: none;
      }


      /* Contenedor de la tabla con scroll interno si hay muchas tallas */
      .tabla-variantes-container {
          margin-top: 10px;
          max-height: 120px;
          overflow-y: auto;
          border: 1px solid #eee;
          border-radius: 4px;
      }

      .tabla-stock {
          width: 100%;
          border-collapse: collapse;
          font-size: 15px;
          text-align: center;
      }

      .tabla-stock th {
          background: #f8f9fa;
          color: #888;
          padding: 4px;
          position: sticky;
          top: 0;
          border-bottom: 1px solid #eee;
      }

      .tabla-stock td {
          padding: 4px;
          border-bottom: 1px solid #fdfdfd;
      }


      /* Scrollbar estética */
      .tabla-variantes-container::-webkit-scrollbar {
          width: 10px;
      }

      .tabla-variantes-container::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 10px;
      }

      /* Estilo para la Categoría (Mantenemos tu base) */
      .cat-tag {
          display: block;
          font-size: 15px;
          color: #2e5bff;
          font-weight: bold;
          margin-bottom: 2px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      /* NUEVA: Estilo para la Marca */

      .prev,
      .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 0 3px 3px 0;
          user-select: none;
      }

      .next {
          right: 0;
          border-radius: 3px 0 0 3px;
      }

      .prev:hover,
      .next:hover {
          background-color: rgba(0, 0, 0, 0.8);
      }

      /* 1. Transición suave para todos los botones (evita cambios bruscos) */
      .btn-pedido,
      .btn-admin-acc,
      .btn-oferta-especial {
          transition: all 0.15s ease;
      }

      /* 2. Botón de Pedido (El verde de WhatsApp) al hacer clic */
      .btn-pedido.btn-activo:active {
          background: #1da851;
          /* Un verde un poco más oscuro y sólido */
          transform: scale(0.96);
          /* Simula que el botón se hunde */
          box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2);
          /* Sombra interna para dar profundidad */
      }

      /* 3. Botones del Panel de Administrador al hacer clic */
      .btn-admin-acc:active {
          /* filter: brightness oscurece el color dinámico que tengas configurado sin importar cuál sea */
          filter: brightness(0.85);
          transform: scale(0.96);
          box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2);
      }

      /* 4. Filtros Desplegables (Categorías y Tallas) al tocarlos */

      /* 5. Botón de Configuración (La tuerquita ⚙️) al hacer clic */
      .btn-admin-config:active {
          color: #000;
          /* Se vuelve totalmente negro al tocarlo */
          transform: rotate(45deg) scale(0.90);
          /* Da un pequeño giro mecánico */
      }

      /* =========================================
        ESTILOS PRO PARA TABLA DE GESTIÓN (SaaS)
        ========================================= */
      .input-tabla {
          width: 100%;
          padding: 6px;
          /* Más compacto que el input-admin */
          border: 1px solid #ccc;
          border-radius: 4px;
          /* Bordes ligeramente menos redondos para formato tabla */
          box-sizing: border-box;
          font-size: 13px;
          text-align: center;
          /* Centramos el texto para números (Talla/Stock) */
          background-color: #fff;
          transition: border-color 0.2s, box-shadow 0.2s;
          margin: 0;
      }

      .input-tabla:focus {
          border-color: var(--accent);
          outline: none;
          box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
          /* Brillo sutil al escribir */
      }

      .btn-eliminar-fila {
          background: #ffebee;
          color: var(--danger);
          border: 1px solid #ffcdd2;
          border-radius: 4px;
          padding: 4px 8px;
          cursor: pointer;
          font-size: 11px;
          transition: all 0.2s;
          width: 100%;
      }

      .btn-eliminar-fila:hover {
          background: var(--danger);
          color: white;
      }

      .celda-id {
          font-weight: 800;
          color: var(--accent);
          text-align: center;
          font-size: 12px;
          width: 60px;
          /* Ancho fijo para que no baile la columna */
          vertical-align: middle;
      }

      /* =========================================
        NOTIFICACIONES TOAST (FLOTANTES)
        ========================================= */
      /* — TOASTS PROFESIONALES — */
      #toast-container {
          position: fixed;
          top: 16px;
          right: 16px;
          z-index: 9999999;
          display: flex;
          flex-direction: column;
          gap: 8px;
          max-width: calc(100vw - 32px);
      }

      @keyframes slideInRight {
          from {
              transform: translateX(120%);
              opacity: 0;
          }

          to {
              transform: translateX(0);
              opacity: 1;
          }
      }

      /* =========================================
        NUEVO MENÚ DE NAVEGACIÓN TIPO APP (SaaS)
        ========================================= */
      .nav-app-container {
          display: flex;
          overflow-x: auto;
          /* Permite deslizar con el dedo en celular */
          gap: 10px;
          padding-bottom: 10px;
          margin-bottom: 15px;
          border-bottom: 2px solid #eee;
          /* Oculta la barra de scroll para que se vea limpio */
          scrollbar-width: none;
      }

      .nav-app-container::-webkit-scrollbar {
          display: none;
      }

      .btn-nav-app {
          flex: 0 0 auto;
          background: #f8f9fa;
          /* Fondo gris casi blanco */
          border: 1px solid #f0f0f0;
          padding: 10px 18px;
          border-radius: 25px;
          /* Estilo píldora totalmente curva */
          font-size: 13px;
          font-weight: 800;
          color: #888;
          /* Texto gris suave */
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 6px;
      }

      .btn-nav-app.activo {
          background: var(--texto-oscuro);
          /* Contraste fuerte y elegante */
          color: #ffffff;
          border-color: var(--texto-oscuro);
          box-shadow: 0 6px 15px rgba(26, 26, 46, 0.15);
          /* Sombra elegante */
          transform: translateY(-2px);
      }

      /* Ocultador mágico de módulos */
      .modulo-admin {
          display: none;
          animation: fadeInApp 0.3s ease-in-out;
      }

      .modulo-admin.activo {
          display: block;
      }

      @keyframes fadeInApp {
          from {
              opacity: 0;
              transform: translateY(10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      /* =========================================
        TARJETAS DEL DASHBOARD DE CIERRE DE CAJA
        ========================================= */

      .text-success {
          color: var(--success);
      }

      .text-danger {
          color: var(--danger);
      }

      /* =========================================
        REGLAS DE IMPRESIÓN (SOLO ARQUEO CAJA)
        ========================================= */
      @media print {

          /* 1. Apagar elementos flotantes */
          #widget-caminador,
          #radar-container,
          #toast-container {
              display: none !important;
          }

          /* 2. EL CULPABLE DE LAS 40 HOJAS: Apagamos el catálogo entero */
          #contenedor {
              display: none !important;
          }

          /* 3. Apagamos los filtros, ofertas y el menú de pestañas para limpiar el PDF */
          #btn-ofertas,
          .filtros-container,
          .nav-app-container {
              display: none !important;
          }

          /* 4. EXPANDIR HISTORIAL: Quitar el límite de altura para que salgan todos los tickets */
          #lista-movimientos {
              max-height: none !important;
              overflow: visible !important;
          }

          /* 5. EVITAR CORTES: Que un ticket no se parta a la mitad al cambiar de hoja */
          #lista-movimientos>div {
              page-break-inside: avoid;
          }
      }

      /* =========================================
        ANIMACIÓN 3D EMPAQUETADO PREMIUM (V2)
        ========================================= */
      .item-card {
          transition: box-shadow 0.3s ease;
          transform-style: preserve-3d;
      }

      /* Animación principal: 4 vueltas completas (1440 grados) en 3.5 segundos */
      .item-card.magic-spin {
          animation: superGiroPremium 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

          /* 🚀 OPTIMIZACIÓN EXTREMA PARA CELULARES */
          will-change: transform;
          /* Obliga al celular a usar su Tarjeta Gráfica (GPU) */
          backdrop-filter: none !important;
          /* Apaga el efecto cristal temporalmente para evitar lag */
          -webkit-backdrop-filter: none !important;
          box-shadow: none;
          /* Apaga las sombras externas pesadas durante el giro */
      }

      @keyframes superGiroPremium {
          0% {
              transform: perspective(1000px) rotateY(0deg) scale(1);
          }

          10% {
              transform: perspective(1000px) rotateY(90deg) scale(0.85);
          }

          /* Se pone de perfil y se encoge */
          70% {
              transform: perspective(1000px) rotateY(1440deg) scale(0.9);
          }

          /* Gira rápido 4 veces */
          85% {
              transform: perspective(1000px) rotateY(1440deg) scale(1.05);
          }

          /* Efecto POP! hacia adelante */
          100% {
              transform: perspective(1000px) rotateY(1440deg) scale(1);
          }

          /* Se queda quieta */
      }

      @keyframes redBadgePulse {

          0%,
          100% {
              opacity: 1;
              transform: rotate(-8deg) scale(1);
          }

          50% {
              opacity: .75;
              transform: rotate(-8deg) scale(1.08);
          }
      }

      /* Diseño de la Caja Premium (Azul Rey y Cintas de Oro) */

      .sello-titulo {
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 1px;
          padding: 0 5px;
      }

      /* Texto Flotante Brillante */
      .text-preparando {
          color: white;
          font-size: 15px;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-top: 35px;
          z-index: 20;
          background: rgba(0, 0, 0, 0.5);
          padding: 8px 18px;
          border-radius: 20px;
          animation: pulse-glow 1s infinite alternate;
          transition: background 0.3s ease;
      }

      @keyframes pulse-glow {
          from {
              box-shadow: 0 0 10px rgba(26, 115, 232, 0.5);
              text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
          }

          to {
              box-shadow: 0 0 20px rgba(26, 115, 232, 0.9);
              text-shadow: 0 0 15px #fff, 0 0 20px #1a73e8;
          }
      }

      /* Interruptores Mágicos activados por JS */

      /* Botones flotantes laterales */
      .btn-nav-info {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.08);
          color: #555;
          border: none;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          font-size: 11px;
          cursor: pointer;
          z-index: 5;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.2s, transform 0.2s, opacity 0.3s;
      }

      .btn-nav-info:active {
          transform: translateY(-50%) scale(0.9);
      }

      /* Por defecto, la flecha izquierda inicia oculta */
      .btn-nav-info.prev {
          left: 0px;
          opacity: 0;
          pointer-events: none;
      }

      .btn-nav-info.next {
          right: 0px;
          opacity: 1;
          pointer-events: auto;
      }

      /* Puntitos indicadores abajo */

      /* =========================================
        CENTRAR MODALES DE PAGO Y FACTURACIÓN
        ========================================= */
      #modalPago,
      #modalFactura {
          justify-content: center;
          align-items: center;
          z-index: 99999;
          /* Asegura que estén por encima de todo */
      }

      /* --- MODALES TIPO APP --- */
      #modalPago .modal-content,
      #modalFactura .modal-content {
          background: #ffffff;
          padding: 30px;
          border-radius: 24px;
          /* Más curvo, más amigable */
          width: 80%;
          max-width: 350px;
          margin: 15% auto;
          text-align: center;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          /* Sombra 3D flotante */
          border: 1px solid #f0f0f0;
      }

      /* =========================================
        🖨️ MOTOR PREMIUM: TICKET TÉRMICO 80MM (ANTI-ESTIRAMIENTO)
        ========================================= */
      #ticket-impresion {
          display: block;
      }

      @media print {

          /* 1. Ocultamos todo */
          body.modo-impresion-ticket * {
              visibility: hidden !important;
          }

          /* 2. Mostramos nuestra ruta */
          body.modo-impresion-ticket #modal-ticket-print,
          body.modo-impresion-ticket #ticket-impresion,
          body.modo-impresion-ticket #ticket-impresion * {
              visibility: visible !important;
          }

          /* 3. Engañamos al navegador: Le decimos que el cuerpo ocupa TODA la hoja A4 */
          html,
          body {
              background: #FFFFFF !important;
              margin: 0 !important;
              padding: 0 !important;
              width: 100% !important;
              height: 100% !important;
          }

          /* 4. El Modal Padre actúa como un contenedor transparente del tamaño de la hoja */
          body.modo-impresion-ticket #modal-ticket-print {
              position: absolute !important;
              left: 0 !important;
              top: 0 !important;
              width: 100% !important;
              /* Chrome creerá que esto es lo que llena la página */
              height: 100% !important;
              padding: 0 !important;
              background: transparent !important;
              display: block !important;
          }

          /* 🚀 5. LA TRAMPA: Flotamos el ticket. Esto ROMPE el estiramiento automático */
          body.modo-impresion-ticket #ticket-impresion {
              position: relative !important;
              float: left !important;
              /* <--- ESTA ES LA CLAVE MÁGICA */
              width: 78mm !important;
              /* Ancho estricto */
              max-width: 78mm !important;
              margin: 0 !important;
              padding: 10px !important;
              box-shadow: none !important;
              border: none !important;
              font-family: Arial, Helvetica, sans-serif !important;
              /* Look limpio como en tu 2da imagen */
              color: #000 !important;
              background: #fff !important;
          }

          /* 6. Apagamos botones */
          .no-print {
              display: none !important;
          }

          /* 7. Sin márgenes de navegador */
          @page {
              margin: 0;
          }

          /* 8. ESTILOS INTERNOS (Alineados a tu diseño ideal) */
          .t-header {
              text-align: center;
              margin-bottom: 15px;
          }

          .t-logo {
              font-size: 22px;
              font-weight: 900;
              margin-bottom: 5px;
              border-bottom: 2px dashed #000;
              padding-bottom: 5px;
              text-transform: uppercase;
          }

          .t-info {
              font-size: 13px;
              text-align: left;
              margin-bottom: 15px;
              line-height: 1.4;
          }

          .t-table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 15px;
              font-size: 12px;
          }

          .t-table th {
              border-bottom: 1px solid #000;
              border-top: 1px solid #000;
              padding: 6px 0;
              text-align: left;
          }

          .t-table td {
              padding: 6px 0;
              vertical-align: top;
          }

          .t-total {
              font-size: 18px;
              font-weight: 900;
              text-align: right;
              border-top: 2px dashed #000;
              padding-top: 8px;
              margin-top: 5px;
          }

          .t-footer {
              text-align: center;
              font-size: 12px;
              margin-top: 20px;
              border-top: 1px solid #000;
              padding-top: 10px;
              font-weight: normal;
          }
      }

      /* ==========================================
         🛒 PANEL DEL CARRITO (CARA A - LIMPIO)
         ========================================== */
      #panel-carrito-cliente {
          position: fixed;
          top: 0;
          right: 0;
          width: 100%;
          max-width: 400px;
          height: 100vh;
          background: rgba(255, 255, 255, 0.98);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
          z-index: 2147483647 !important;
          /* Nadie lo puede tapar */

          transform: translateX(100%);
          /* Oculto por defecto */
          transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
          display: flex;
          flex-direction: column;
      }

      /* 🚀 GATILLO: Esta clase empuja el panel a la pantalla */
      #panel-carrito-cliente.abierto {
          transform: translateX(0) !important;
      }

      /* ==========================================
         🎨 DISEÑO INTERIOR DEL CARRITO (ORDEN Y ESTÉTICA)
         ========================================== */

      /* 1. El Encabezado (Se queda fijo arriba) */
      .carrito-header {
          padding: 20px;
          background: #ffffff;
          color: var(--texto-oscuro);
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;
          min-height: 65px;
          box-sizing: border-box;
      }

      /* 2. El Cuerpo (Aquí hacen scroll los zapatos) */
      .carrito-body {
          padding: 15px;
          flex-grow: 1;
          /* 🚀 MAGIA: Toma todo el espacio disponible */
          overflow-y: auto;
          /* 🚀 MAGIA: Permite hacer scroll si hay muchos productos */
          background: #fcfcfc;
      }

      /* 3. El Pie (Se ancla abajo con el Total y Botón) */
      .carrito-footer {
          padding: 20px;
          background: #ffffff;
          border-top: 1px solid #f0f0f0;
          box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.04);
          box-sizing: border-box;
      }

      /* 4. Diseño de cada par de zapatos en la lista */
      .item-carrito-cli {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          background: #ffffff;
          border: 1px solid #f0f0f0;
          border-radius: 16px;
          margin-bottom: 12px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
      }

      /* 5. El botónazo de Enviar Pedido */
      .btn-wsp-checkout {
          width: 100%;
          padding: 16px;
          background: var(--turquesa);
          color: white;
          font-weight: 900;
          font-size: 16px;
          border: none;
          border-radius: 16px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          box-shadow: 0 6px 15px rgba(0, 209, 178, 0.3);
          transition: transform 0.2s;
      }

      .btn-wsp-checkout:active {
          transform: scale(0.96);
      }

      /* =========================================
        GAMIFICACIÓN (Caminador)
        ========================================= */
      #widget-caminador {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background: #ffffff;
          /* Blanco sólido */
          border: 1px solid #f0f0f0;
          border-radius: 16px;
          /* Bordes más suaves */
          padding: 10px 15px;
          z-index: 9998;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
          /* Sombra 3D suave */
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .barra-fill {
          background: var(--turquesa);
          height: 100%;
          width: 0%;
          transition: width 0.5s ease-out;
      }

      .texto-pasos {
          font-size: 13px;
          font-weight: 800;
          color: var(--texto-oscuro);
          text-align: center !important;
          /* 🚀 FUERZA EL TEXTO AL CENTRO */
          width: 100% !important;
          display: block !important;
          /* 🚀 EVITA QUE SE COMPRIMA COMO CAJA FLEX */
          align-self: center !important;
          /* 🚀 CANDADO CONTRA FLEXBOX PADRE */
          margin-top: 5px;
      }

      /* 🚀 CENTRADO EXCLUSIVO PARA EL MODAL "TU PROGRESO" */
      #modalProgresoCliente .texto-pasos {
          text-align: center !important;
          width: 100% !important;
          display: block !important;
          margin: 10px auto !important;
      }


      /* =========================================
        BOTÓN COMPARTIR (VIRALIDAD)
        ========================================= */
      .btn-compartir {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          background: rgba(255, 255, 255, 0.95);
          border: none;
          border-radius: 50%;
          width: 35px;
          height: 35px;
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
          z-index: 100;
          /* 🚀 SUPER ALTO para que siempre esté por encima de todo */
          transition: transform 0.2s, background 0.2s;
      }

      .btn-compartir:active {
          /* Mantenemos el translateY para que el botón no salte hacia arriba al hacer clic */
          transform: translateY(-50%) scale(0.85);
          background: #e0e0e0;
      }

      /* =========================================
        MÓDULO DE CONFIANZA Y VIDEO
        ========================================= */

      .btn-video-tienda {
          background: var(--coral);
          /* Color Coral para llamar la atención */
          color: white;
          border: none;
          padding: 12px 20px;
          border-radius: 25px;
          font-weight: 800;
          font-size: 13px;
          cursor: pointer;
          display: inline-block;
          margin: 0 auto;
          box-shadow: 0 6px 15px rgba(255, 107, 107, 0.3);
          /* Sombra Coral */
          transition: transform 0.2s;
      }

      .btn-video-tienda:active {
          transform: scale(0.95);
      }

      /* Modal del Video */
      .modal-video-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.9);
          z-index: 99999;
          justify-content: center;
          align-items: center;
          flex-direction: column;
      }

      .modal-video-content {
          width: 100%;
          max-width: 100%;
          /* Formato celular */
          height: 75vh;
          background: #000;
          border-radius: 12px;
          position: relative;
      }

      .close-video-btn {
          position: absolute;
          top: -45px;
          right: 0;
          color: white;
          font-size: 35px;
          background: none;
          border: none;
          cursor: pointer;
      }

      /* ══════════════════════════════════════════════════════
         SPLASH SCREEN — Pilas! "Encendido" v4.0
         Acto 1: chispa · Acto 2: trazo izq→der materializa letras
         Acto 3: "!" power-on + anillo · Acto 4: batería de carga
         Tematizable vía variables --splash-* (Black y Orquídea
         redefinen sus tokens en sus propias secciones).
      ══════════════════════════════════════════════════════ */

      @keyframes splash-gradiente {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
          }
      }

      #splash-screen {
          /* — Tokens del tema (Clásico por defecto) — */
          --splash-acento: #00D1B2;
          --splash-acento-dark: #00A896;
          --splash-secundario: #FF6B6B;
          --splash-glow: rgba(0, 209, 178, .35);
          --splash-bg-a: #05111F;
          --splash-bg-b: #0B1E33;
          --splash-bg-c: #081928;
          --splash-texto: rgba(255, 255, 255, .55);

          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, var(--splash-bg-a) 0%, var(--splash-bg-b) 40%, var(--splash-bg-c) 70%, var(--splash-bg-a) 100%);
          background-size: 300% 300%;
          animation: splash-gradiente 8s ease infinite;
          z-index: 999999;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
      }

      /* Capa de ruido sutil — misma que brain-card */
      #splash-screen::before {
          content: '';
          position: absolute;
          inset: 0;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
          pointer-events: none;
          z-index: 0;
      }

      .splash-content {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0;
      }

      /* ── Acto 1 — La chispa: ignición + viaje izquierda→derecha ── */

      .splash-marca {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      @keyframes splash-chispa-vida {
          0% {
              left: -4%;
              opacity: 0;
              transform: scale(.4);
          }

          7% {
              left: -2%;
              opacity: 1;
              transform: scale(1.25);
          }

          14% {
              transform: scale(1);
          }

          80% {
              left: 101%;
              opacity: 1;
              transform: scale(1);
          }

          100% {
              left: 103%;
              opacity: 0;
              transform: scale(.3);
          }
      }

      .splash-chispa {
          position: absolute;
          top: 50%;
          left: -4%;
          width: 10px;
          height: 10px;
          margin-top: -5px;
          border-radius: 50%;
          background: var(--splash-acento);
          box-shadow: 0 0 18px 4px var(--splash-glow), 0 0 6px 1px var(--splash-acento);
          opacity: 0;
          animation: splash-chispa-vida 1.35s cubic-bezier(.45, 0, .25, 1) .10s both;
          z-index: 3;
      }

      /* ── Acto 2 — Trazo de energía que deja la chispa a su paso ── */

      @keyframes splash-trazo-vida {
          0% {
              width: 0%;
              opacity: 0;
          }

          10% {
              opacity: .75;
          }

          75% {
              width: 100%;
              opacity: .75;
          }

          100% {
              width: 100%;
              opacity: 0;
          }
      }

      .splash-trazo {
          position: absolute;
          top: 50%;
          left: 0;
          height: 2px;
          width: 0%;
          margin-top: -1px;
          background: linear-gradient(90deg, transparent, var(--splash-acento));
          opacity: 0;
          animation: splash-trazo-vida 1.4s cubic-bezier(.45, 0, .25, 1) .10s both;
          z-index: 1;
          border-radius: 2px;
      }

      /* Letras: se materializan al paso de la chispa (desenfoque → nitidez) */
      @keyframes splash-letra-encendido {
          0% {
              opacity: 0;
              filter: blur(8px);
              transform: translateY(10px) scale(.92);
          }

          60% {
              opacity: 1;
              filter: blur(0);
              transform: translateY(-2px) scale(1.03);
          }

          100% {
              opacity: 1;
              filter: blur(0);
              transform: translateY(0) scale(1);
          }
      }

      .splash-logo-pro {
          font-size: 88px;
          font-weight: 900;
          color: var(--splash-acento);
          letter-spacing: -3px;
          line-height: 0.85;
          filter: drop-shadow(0 0 24px var(--splash-glow));
          font-family: 'Poppins', sans-serif;
          display: flex;
          align-items: baseline;
          justify-content: center;
          position: relative;
          z-index: 2;
      }

      .splash-letra {
          display: inline-block;
          opacity: 0;
          animation: splash-letra-encendido .5s cubic-bezier(.22, 1, .36, 1) both;
      }

      /* ── Acto 3 — El "!": cae con resorte, como botón de encendido ── */

      @keyframes splash-encendido-final {
          0% {
              opacity: 0;
              transform: translateY(-34px) scale(.6) rotate(-8deg);
          }

          55% {
              opacity: 1;
              transform: translateY(3px) scale(1.12) rotate(3deg);
          }

          75% {
              transform: translateY(-2px) scale(.97) rotate(0deg);
          }

          100% {
              opacity: 1;
              transform: translateY(0) scale(1) rotate(0deg);
          }
      }

      .splash-accent-pro {
          color: var(--splash-secundario);
          font-size: 94px;
          display: inline-block;
          opacity: 0;
      }

      .splash-letra-final {
          animation: splash-encendido-final .55s cubic-bezier(.22, 1.4, .36, 1) both;
      }

      /* Anillo de pulso al aterrizar el "!" (power-on) */
      @keyframes splash-anillo-pulso {
          0% {
              opacity: .85;
              transform: scale(.35);
          }

          100% {
              opacity: 0;
              transform: scale(1.9);
          }
      }

      .splash-anillo {
          position: absolute;
          right: -16px;
          top: 50%;
          width: 70px;
          height: 70px;
          margin-top: -35px;
          border: 2px solid var(--splash-secundario);
          border-radius: 50%;
          opacity: 0;
          transform: scale(.35);
          animation: splash-anillo-pulso .6s ease-out 1.45s both;
          pointer-events: none;
          z-index: 1;
      }

      /* ── Acto 4a — Tagline: asentamiento del letter-spacing ── */

      @keyframes splash-tagline-in {
          0% {
              opacity: 0;
              transform: translateY(8px);
              letter-spacing: 8px;
          }

          100% {
              opacity: 1;
              transform: translateY(0);
              letter-spacing: 4px;
          }
      }

      .splash-tagline-bottom {
          font-size: 12px;
          font-weight: 700;
          color: var(--splash-texto);
          text-transform: uppercase;
          letter-spacing: 4px;
          font-family: 'Poppins', sans-serif;
          margin-top: 16px;
          opacity: 0;
          animation: splash-tagline-in .5s ease 1.60s both;
          white-space: nowrap;
          overflow: hidden;
          z-index: 2;
      }

      /* ── Acto 4b — Batería cargándose: el nombre explicado sin palabras ── */

      @keyframes splash-bateria-in {
          0% {
              opacity: 0;
              transform: scale(.85);
          }

          100% {
              opacity: 1;
              transform: scale(1);
          }
      }

      @keyframes splash-bateria-carga {
          0% {
              width: 0%;
          }

          100% {
              width: 100%;
          }
      }

      @keyframes splash-bateria-llena {

          0%,
          100% {
              box-shadow: 0 0 0 0 var(--splash-glow);
          }

          50% {
              box-shadow: 0 0 14px 2px var(--splash-glow);
          }
      }

      .splash-bateria {
          display: flex;
          align-items: center;
          gap: 2px;
          margin-top: 26px;
          opacity: 0;
          animation: splash-bateria-in .4s ease 1.78s both;
          z-index: 2;
      }

      .splash-bateria-cuerpo {
          width: 64px;
          height: 26px;
          border: 2px solid rgba(255, 255, 255, .35);
          border-radius: 7px;
          padding: 3px;
          box-sizing: border-box;
      }

      .splash-bateria-polo {
          width: 4px;
          height: 12px;
          background: rgba(255, 255, 255, .35);
          border-radius: 0 2px 2px 0;
      }

      .splash-bateria-fill {
          height: 100%;
          width: 0%;
          background: linear-gradient(90deg, var(--splash-acento-dark), var(--splash-acento));
          border-radius: 3px;
          animation: splash-bateria-carga 1s ease-out 1.95s both,
              splash-bateria-llena 1.2s ease-in-out 2.95s infinite;
      }

      /* ── Salida cinematográfica (contrato intacto con _splashCerrar) ── */

      @keyframes splash-salida-content {
          0% {
              opacity: 1;
              transform: scale(1);
          }

          100% {
              opacity: 0;
              transform: scale(1.06);
          }
      }

      @keyframes splash-salida-fondo {
          0% {
              transform: translateY(0);
          }

          100% {
              transform: translateY(-100%);
          }
      }

      .splash-saliendo .splash-content {
          animation: splash-salida-content .25s ease forwards;
      }

      .splash-saliendo {
          animation: splash-salida-fondo .45s cubic-bezier(.55, 0, 1, .45) .2s forwards !important;
      }

      /* ── Accesibilidad: respeto a usuarios con movimiento reducido ── */
      @media (prefers-reduced-motion: reduce) {

          #splash-screen {
              animation: none;
          }

          .splash-chispa,
          .splash-trazo,
          .splash-anillo {
              display: none;
          }

          .splash-letra,
          .splash-letra-final,
          .splash-tagline-bottom,
          .splash-bateria,
          .splash-bateria-fill {
              animation-duration: .01s !important;
              animation-delay: 0s !important;
          }
      }

      /* ══════════════════════════════════════════════════════
         LOGIN "ACCESO EQUIPO" — Premium v2.0
         Continuidad de marca desde el splash. 100% tematizable:
         usa solo variables del tema → Clásico/Black/Orquídea
         se adaptan automáticamente sin reglas extra.
      ══════════════════════════════════════════════════════ */

      /* Telón de vidrio — solo el modal de login (los demás modales no cambian) */
      #modalClave {
          background: rgba(5, 17, 31, .55);
          backdrop-filter: blur(14px) saturate(1.15);
          -webkit-backdrop-filter: blur(14px) saturate(1.15);
          overflow-y: auto;
      }

      /* En temas oscuros el overlay genérico se pinta sólido (!important):
         lo devolvemos a vidrio con especificidad de ID (gana siempre). */
      body.tema-black #modalClave {
          background: rgba(6, 6, 12, .72) !important;
          border: none !important;
      }

      body.tema-orquidea #modalClave {
          background: rgba(18, 10, 26, .72) !important;
          border: none !important;
      }

      @keyframes login-card-in {
          0% {
              opacity: 0;
              transform: translateY(14px) scale(.96);
          }

          100% {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }

      .login-card {
          max-width: 360px;
          margin: 9% auto;
          padding: 38px 28px 26px;
          background: var(--bg-card);
          border-radius: 28px;
          text-align: center;
          border: 1px solid var(--borde);
          box-shadow: var(--shadow-lg), 0 30px 60px rgba(0, 0, 0, .22);
          animation: login-card-in .38s cubic-bezier(.22, 1, .36, 1) both;
      }

      /* ── Continuidad de marca: eco del splash ── */
      @keyframes login-marca-in {
          0% {
              opacity: 0;
              filter: blur(6px);
              transform: translateY(8px);
          }

          100% {
              opacity: 1;
              filter: blur(0);
              transform: translateY(0);
          }
      }

      .login-marca {
          font-family: 'Poppins', sans-serif;
          font-size: 40px;
          font-weight: 900;
          letter-spacing: -1.5px;
          line-height: 1;
          color: var(--turquesa);
          margin-bottom: 14px;
          animation: login-marca-in .45s cubic-bezier(.22, 1, .36, 1) .08s both;
          filter: drop-shadow(0 0 14px var(--turquesa-light));
      }

      .login-marca-accent {
          color: var(--coral);
          display: inline-block;
          transform: rotate(5deg);
      }

      .login-titulo {
          margin: 0 0 5px 0;
          color: var(--texto-oscuro);
          font-weight: 900;
          font-size: 22px;
          letter-spacing: -0.5px;
      }

      .login-subtitulo {
          font-size: 13px;
          color: var(--texto-medio);
          margin: 0 0 24px;
          font-weight: 600;
      }

      .login-input-pin {
          text-align: center;
          font-size: 24px;
          letter-spacing: 6px;
          padding: 16px;
          border-radius: 16px;
          border: 2px solid var(--borde);
          background: var(--bg-subtle);
          color: var(--texto-oscuro);
          margin-bottom: 14px;
          width: 100%;
          box-sizing: border-box;
          transition: border-color .2s ease, box-shadow .2s ease;
      }

      .login-input-pin:focus {
          outline: none;
          border-color: var(--turquesa);
          box-shadow: 0 0 0 4px var(--turquesa-light);
      }

      .login-btn-principal {
          background: linear-gradient(135deg, var(--turquesa), var(--turquesa-dark));
          font-size: 15px;
          font-weight: 900;
          padding: 18px;
          border-radius: 16px;
          box-shadow: 0 8px 25px var(--turquesa-light), 0 4px 12px rgba(0, 0, 0, .12);
          text-transform: uppercase;
          letter-spacing: 1px;
          width: 100%;
          border: none;
          cursor: pointer;
          transition: transform .15s ease, box-shadow .2s ease;
      }

      .login-btn-principal:hover {
          transform: translateY(-1px);
      }

      .login-btn-principal:active {
          transform: scale(.96);
      }

      /* Contraste AA: texto ciruela oscuro sobre el degradado orquídea */
      body.tema-orquidea .login-btn-principal {
          color: #2A1838;
      }

      .login-btn-bio {
          background: var(--bg-subtle);
          border: 1.5px solid var(--borde);
          color: var(--texto-oscuro);
          cursor: pointer;
          font-size: 14px;
          font-weight: 700;
          margin-top: 12px;
          width: 100%;
          padding: 16px;
          border-radius: 16px;
          transition: transform .15s ease, border-color .2s ease, background .2s ease;
          gap: 10px;
          align-items: center;
          justify-content: center;
      }

      .login-btn-bio svg {
          color: var(--turquesa);
          flex-shrink: 0;
      }

      .login-btn-bio:hover {
          border-color: var(--turquesa);
          background: var(--turquesa-light);
      }

      .login-btn-bio:active {
          transform: scale(.96);
      }

      .login-activar-bio {
          font-size: 11px;
          color: var(--texto-suave);
          margin-top: 14px;
          cursor: pointer;
          text-decoration: underline;
      }

      .login-btn-ghost {
          background: transparent;
          border: 1px solid var(--coral-light);
          color: var(--coral);
          cursor: pointer;
          font-size: 14px;
          font-weight: 800;
          margin-top: 12px;
          width: 100%;
          padding: 15px;
          border-radius: 16px;
          transition: transform .15s ease, background .2s ease;
      }

      .login-btn-ghost:hover {
          background: var(--coral-light);
      }

      .login-btn-ghost:active {
          transform: scale(.96);
      }

      @media (prefers-reduced-motion: reduce) {

          .login-card,
          .login-marca {
              animation-duration: .01s !important;
              animation-delay: 0s !important;
          }
      }

      /* Compatibilidad: clase antigua usada en el código */
      .levantar-telon {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
      }

      /* =========================================
         📡 [f116] AVISOS VIVOS (cara A, esquina inferior derecha)
         Colores, letras y esquinas: variables --av-* (catalogo-tema.js las
         pone con el tema publicado). Sin tema: los colores de Pilas.
         ========================================= */
      #radar-container {
          position: fixed;
          right: 16px;
          bottom: var(--av-abajo, 90px);
          z-index: 9997;
          width: min(360px, calc(100vw - 32px));
          pointer-events: none;
      }

      @media (max-width: 640px) {
          #radar-container {
              left: 12px;
              right: 12px;
              width: auto;
          }
      }

      .av-vivo {
          position: relative;
          display: flex;
          pointer-events: auto;
          background: var(--av-card, #FFFFFF);
          color: var(--av-tx, #18181B);
          border: 1px solid var(--av-ln, rgba(20, 24, 40, .10));
          border-radius: var(--av-r, 14px);
          box-shadow: 0 14px 34px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .06);
          overflow: hidden;
          font-family: var(--av-f, 'Inter', system-ui, sans-serif);
          animation: avEntra .38s cubic-bezier(.2, .8, .2, 1) both;
      }

      .av-vivo.av-sale {
          animation: avSale .25s ease-in forwards;
      }

      .av-vivo-cuerpo {
          flex: 1;
          min-width: 0;
          display: flex;
          align-items: center;
          gap: 12px;
          margin: 0;
          padding: 10px 38px 12px 10px;
          border: 0;
          box-shadow: none;
          background: transparent;
          color: inherit;
          font: inherit;
          text-align: left;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
      }

      .av-vivo-cuerpo:focus-visible {
          outline: 2px solid var(--av-acento, #047857);
          outline-offset: -3px;
      }

      .av-vivo-ft {
          flex: 0 0 52px;
          width: 52px;
          height: 52px;
          border-radius: calc(var(--av-r, 14px) * .7);
          background: var(--av-foto, #F4F4F5);
          display: grid;
          place-items: center;
          overflow: hidden;
      }

      .av-vivo-ft img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .av-vivo-ft--txt,
      .av-vivo-ft--ico {
          background: var(--av-marca, #047857);
          color: var(--av-sobre, #FFFFFF);
      }

      .av-vivo-ft--txt {
          font-size: 14px;
          font-weight: 800;
          letter-spacing: -.02em;
      }

      .av-vivo-ft--ico svg {
          width: 24px;
          height: 24px;
      }

      .av-vivo-tx {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .av-vivo-k {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 10.5px;
          font-weight: 800;
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--av-acento, #047857);
      }

      .av-vivo-k svg {
          flex: 0 0 auto;
          width: 12px;
          height: 12px;
      }

      .av-vivo-tx b {
          font-family: var(--av-ft, inherit);
          font-size: 14px;
          font-weight: 700;
          line-height: 1.25;
          color: inherit;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .av-vivo-s {
          font-size: 12px;
          line-height: 1.3;
          color: var(--av-tx2, #6B7280);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .av-vivo-s:empty {
          display: none;
      }

      .av-vivo-cv {
          flex: 0 0 18px;
          width: 18px;
          height: 18px;
          margin-left: auto;
          color: var(--av-tx2, #6B7280);
      }

      .av-vivo-x {
          position: absolute;
          top: 4px;
          right: 4px;
          width: 30px;
          height: 30px;
          display: grid;
          place-items: center;
          margin: 0;
          padding: 0;
          border: 0;
          border-radius: 50%;
          background: transparent;
          box-shadow: none;
          color: var(--av-tx2, #6B7280);
          cursor: pointer;
      }

      .av-vivo-x:hover {
          background: rgba(127, 127, 127, .14);
      }

      .av-vivo-x svg {
          width: 15px;
          height: 15px;
      }

      .av-vivo-bar {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 3px;
          background: var(--av-marca, #047857);
          opacity: .85;
          transform-origin: left;
          animation: avBarra var(--av-dura, 8s) linear forwards;
      }

      .av-vivo.av-pausa .av-vivo-bar {
          animation-play-state: paused;
      }

      @keyframes avEntra {
          from {
              opacity: 0;
              transform: translateY(14px) scale(.98);
          }

          to {
              opacity: 1;
              transform: none;
          }
      }

      @keyframes avSale {
          to {
              opacity: 0;
              transform: translateY(10px);
          }
      }

      @keyframes avBarra {
          from {
              transform: scaleX(1);
          }

          to {
              transform: scaleX(0);
          }
      }

      @media (prefers-reduced-motion: reduce) {

          .av-vivo,
          .av-vivo.av-sale {
              animation: none;
          }

          .av-vivo-bar {
              display: none;
          }
      }

      /* =========================================
         LANDING PAGE PRO: "PILAS !"
         ========================================= */
      #pantalla-inicio {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ffffff;
          z-index: 999998;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 40px 20px;
          box-sizing: border-box;
          background-image: radial-gradient(circle at 20% 20%, rgba(0, 209, 178, 0.02) 0%, transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.02) 0%, transparent 40%);
      }

      /* Nombre de la Tienda con estilo minimalista y pro */
      .tienda-gran-label {
          font-size: 20px;
          font-weight: 400;
          color: #888;
          text-transform: uppercase;
          letter-spacing: 5px;
          margin-bottom: 50px;
          /* Espacio generoso para que respire */
          font-family: 'Poppins', sans-serif;
      }

      .tienda-gran-label b {
          font-weight: 900;
          color: var(--texto-oscuro);
      }

      /* El Logo "Pilas !" al nivel de peiGO */
      .pilas-wrapper {
          position: relative;
          margin-bottom: 10px;
      }

      .pilas-logo {
          font-size: 85px;
          font-weight: 900;
          color: var(--turquesa);
          letter-spacing: -5px;
          line-height: 0.8;
          filter: drop-shadow(0 10px 15px rgba(0, 209, 178, 0.2));
          transform: rotate(-2deg);
          /* Un toque de personalidad */
      }

      .pilas-accent {
          color: var(--coral);
          font-size: 90px;
          display: inline-block;
          transform: rotate(5deg);
      }

      .pilas-tagline {
          font-size: 12px;
          color: var(--texto-oscuro);
          margin-bottom: 60px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 3px;
          border-top: 1px solid #f0f0f0;
          padding-top: 15px;
      }

      /* Botones con estilo App Nativa */
      .btn-container-pilas {
          width: 100%;
          max-width: 320px;
          display: flex;
          flex-direction: column;
          gap: 15px;
      }

      .pilas-btn {
          width: 100%;
          padding: 20px;
          border-radius: 20px;
          font-size: 16px;
          font-weight: 800;
          border: none;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
      }

      .pilas-btn:active {
          transform: scale(0.95);
      }

      .pilas-btn-cliente {
          background: var(--turquesa);
          color: white;
          box-shadow: 0 15px 30px rgba(0, 209, 178, 0.25);
      }

      .pilas-btn-equipo {
          background: #ffffff;
          color: var(--texto-oscuro);
          border: 2px solid #f0f0f0;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
      }

      /* ========================================= */
      /* ESTRUCTURA APP NATIVA (CARA A - CLIENTE)  */
      /* ========================================= */

      /* 1. Header Fijo Superior (MÁS COMPACTO) */
      .header-cliente-fijo {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background: #ffffff;
          z-index: 1000;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px 15px;
          /* Reducido de 10px 20px */
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
          box-sizing: border-box;
          height: 50px;
          /* Reducido de 65px a 50px */
          color: var(--texto-oscuro);
      }

      .btn-menu-hamburguesa {
          background: none;
          border: none;
          font-size: 22px;
          color: var(--texto-oscuro);
          cursor: pointer;
          padding: 0;
      }

      /* 2. Zona Filtros Sticky (ESTILO PEIGO - Fondo gris, botones blancos) */
      .zona-filtros-sticky {
          position: fixed;
          top: 50px;
          /* Ajustado al nuevo alto del header */
          left: 0;
          width: 100%;
          background: #f8f9fa;
          /* Gris financiero muy elegante */
          z-index: 990;
          padding: 10px 15px;
          /* Reducido de 15px 20px */
          box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
          box-sizing: border-box;
          border-bottom: 1px solid rgba(0, 0, 0, 0.02);
      }

      /* Estilo Premium para los inputs (Efecto "Pop-out") */
      .input-search-pro {
          padding: 8px 14px;
          /* Altura más compacta */
          background: #ffffff;
          /* Blanco puro para contrastar con el fondo gris */
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          font-size: 13px;
          color: var(--texto-oscuro);
          transition: all 0.3s ease;
          box-sizing: border-box;
          font-family: inherit;
          outline: none;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
          /* Sombra 3D muy sutil */
          height: 38px;
          /* Altura controlada estricta */
      }

      .input-search-pro:focus {
          background: #ffffff;
          border-color: var(--turquesa);
          box-shadow: 0 0 0 3px rgba(0, 224, 198, 0.15);
      }

      /* 3. Ajuste del Contenedor Central (Sincronizado) */
      #contenedor {
          /* La suma exacta del nuevo Header (50) + Filtros (94) = 144px */
          padding-top: 150px !important;
          padding-bottom: 85px !important;
          transition: all 0.3s ease;
      }

      .nav-app-container,
      #panel-admin {
          display: none;
      }

      /* 4. Menú Inferior Fijo (Cliente) - Sincronizado con Cara B */
      .bottom-nav-cliente {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background: #ffffff;
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 70px;
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
          z-index: 1000;
          border-top: 1px solid rgba(0, 0, 0, 0.03);
          padding-bottom: env(safe-area-inset-bottom);
      }

      .bottom-nav-cliente button {
          background: none;
          border: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 11px;
          color: #a0a0a0;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.2s;
          flex: 1;
      }

      .bottom-nav-cliente button span {
          font-size: 22px;
          margin-bottom: 2px;
          transition: transform 0.2s;
      }

      .bottom-nav-cliente button.activo {
          color: var(--turquesa);
      }

      .bottom-nav-cliente button.activo span {
          transform: translateY(-3px);
      }

      /* 5. Menú Lateral Izquierdo */
      .menu-lateral-cli {
          position: fixed;
          top: 0;
          left: 0;
          width: 280px;
          height: 100%;
          background: #ffffff;
          z-index: 1005;
          transform: translateX(-100%);
          transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
          box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
      }

      .menu-lateral-cli.abierto {
          transform: translateX(0);
      }

      .menu-cli-item {
          padding: 15px 20px;
          border-bottom: 1px solid #f0f0f0;
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 14px;
          font-weight: 700;
          color: var(--texto-oscuro);
          text-decoration: none;
      }

      /* Animación para que el menú suba desde abajo */
      @keyframes slideUpAccion {
          from {
              transform: translateY(100%);
              opacity: 0;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      /* --- ESTADO ACTIVO DEL BOTÓN DE OFERTAS --- */

      /* =========================================
        🚀 ANIMACIÓN PARA MODAL CENTRAL
        ========================================= */
      @keyframes slideUpAccion {
          from {
              transform: translateY(100%);
              opacity: 0;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      /* 📱 Inteligencia Visual para Móviles y Escritorio */
      .peigo-contenedor {
          padding: 0px;
          /* Menos espacio a los lados en celular */
      }

      /* 💻 Cuando detecta pantalla grande (PC), regresa a la normalidad */
      @media (min-width: 768px) {
          .peigo-contenedor {
              padding: 35px;
          }

      }

      /* ========================================= */
      /* AJUSTE MAESTRO DE ALTURA (Mata el espacio blanco) */
      /* ========================================= */
      #contenedor {
          padding-top: 10px !important;
          /* Si aún hay hueco, bájale a 95px. Si las tarjetas se tapan, súbele a 115px */
          padding-bottom: 85px !important;
      }

      /* ========================================= */
      /* CANDADO ANTI-SCROLL HORIZONTAL            */
      /* ========================================= */
      html,
      body,
      #vista-cliente,
      #contenedor {
          overflow-x: hidden !important;
          max-width: 100vw !important;
          box-sizing: border-box !important;
      }

      .grid-tienda {
          width: 100% !important;
          box-sizing: border-box !important;
      }

      /* ========================================= */
      /* ARQUITECTURA: PANEL DESLIZABLE PRODCUTOS (TIPO PEIGO)*/
      /* ========================================= */

      /* Contenedor principal que cubre toda la pantalla */
      .panel-slide-wrapper {
          position: fixed;
          top: 0;
          right: -100%;
          /* Oculto por defecto a la derecha */
          width: 100%;
          height: 100vh;
          background-color: #F8F9FA;
          /* Fondo ultra limpio */
          z-index: 9999;
          transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          display: flex;
          flex-direction: column;
          overflow: hidden;
      }

      /* Clase que activa la animación para que entre a la pantalla */
      .panel-slide-wrapper.activo {
          right: 0;
      }

      /* Cabecera superior fija */
      .panel-slide-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 20px;
          background: #ffffff;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          z-index: 10;
      }

      .btn-volver-slide {
          background: none;
          border: none;
          font-size: 24px;
          color: #1a1a1a;
          cursor: pointer;
          display: flex;
          align-items: center;
          padding: 0;
      }

      .titulo-header-slide {
          font-weight: 700;
          font-size: 16px;
          color: #333;
          letter-spacing: 0.5px;
      }

      /* Área de contenido con scroll */
      .panel-slide-body {
          flex: 1;
          overflow-y: auto;
          padding-bottom: 40px;
      }

      /* Contenedor de la foto principal */
      .slide-foto-hero {
          width: 100%;
          height: 350px;
          background: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
      }

      .slide-foto-hero img {
          max-width: 90%;
          max-height: 90%;
          object-fit: contain;
      }

      /* Tarjeta blanca para el contenido de texto */
      .slide-info-card {
          background: #ffffff;
          border-radius: 24px 24px 0 0;
          padding: 25px 20px;
          margin-top: -20px;
          /* Sube un poco sobre la foto */
          position: relative;
          z-index: 2;
          box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03);
      }

      /* Tipografía Premium */
      .slide-marca {
          font-size: 12px;
          font-weight: 800;
          color: var(--turquesa, #00D1B2);
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 4px;
      }

      .slide-modelo {
          font-size: 24px;
          font-weight: 900;
          color: #1a1a1a;
          line-height: 1.2;
          margin-bottom: 8px;
      }

      .slide-precio {
          font-size: 28px;
          font-weight: 800;
          color: #2b2d42;
      }

      /* Tabla de Tallas Rediseñada con Botones por Fila */
      .tabla-tallas-action {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0 8px;
          margin-top: 20px;
      }

      .tabla-tallas-action th {
          text-align: left;
          color: #888;
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          padding-bottom: 5px;
      }

      .tabla-tallas-action td {
          background: #f8f9fa;
          padding: 12px 15px;
      }

      .tabla-tallas-action tr td:first-child {
          border-radius: 12px 0 0 12px;
          font-weight: 800;
          color: #1a1a1a;
          font-size: 16px;
      }

      .tabla-tallas-action tr td:last-child {
          border-radius: 0 12px 12px 0;
          text-align: right;
      }

      /* Los botoncitos mágicos de compra rápida */
      .btn-fila-add {
          background: var(--turquesa, #00D1B2);
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 8px;
          font-weight: 700;
          font-size: 13px;
          cursor: pointer;
          transition: transform 0.1s, background 0.2s;
      }

      .btn-fila-add:active {
          transform: scale(0.95);
          background: #00b398;
      }

      .btn-fila-agotado {
          background: #e9ecef;
          color: #adb5bd;
          border: none;
          padding: 8px 16px;
          border-radius: 8px;
          font-weight: 700;
          font-size: 13px;
      }

      /* Ficha Técnica Estilo "Tags" modernos */
      .slide-specs-grid {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-top: 25px;
      }

      .slide-spec-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 15px;
          background: #fff;
          border: 1px solid #eee;
          border-radius: 12px;
      }

      .spec-title {
          font-size: 12px;
          color: #888;
          font-weight: 600;
      }

      .spec-data {
          font-size: 14px;
          font-weight: 700;
          color: #333;
          text-align: right;
      }

      /* ══════════════════════════════════════════════════════
         MÓDULOS FINANCIEROS — Estado de Resultados v2 + Balance v2
         Diseño responsive: móvil, tablet, desktop
      ══════════════════════════════════════════════════════ */

      /* ── Cabecera del reporte con selector dual ── */

      /* Semáforo de porcentajes */
      .pct-verde {
          background: rgba(39, 174, 96, .1);
          color: #27ae60;
      }

      .pct-amarillo {
          background: rgba(241, 196, 15, .12);
          color: #d4a017;
      }

      .pct-rojo {
          background: rgba(231, 76, 60, .1);
          color: #e74c3c;
      }

      /* ── Balance General v2 ── */
      .bal-semaforo {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-bottom: 16px;
      }

      .bal-kpi {
          background: var(--bg-card, #fff);
          border-radius: 12px;
          padding: 12px 10px;
          text-align: center;
          border: 1px solid var(--borde, #e9ecef);
          position: relative;
      }

      .bal-kpi-label {
          font-size: 9px;
          font-weight: 700;
          color: var(--texto-suave);
          text-transform: uppercase;
          letter-spacing: .5px;
          display: block;
          margin-bottom: 4px;
      }

      .bal-kpi-valor {
          font-size: 18px;
          font-weight: 900;
          display: block;
          margin-bottom: 2px;
      }

      .bal-kpi-status {
          font-size: 9px;
          font-weight: 700;
          padding: 2px 6px;
          border-radius: 100px;
          display: inline-block;
      }

      .kpi-verde {
          color: #27ae60;
      }

      .kpi-amarillo {
          color: #d4a017;
      }

      .kpi-rojo {
          color: #e74c3c;
      }

      .status-verde {
          background: rgba(39, 174, 96, .1);
          color: #27ae60;
      }

      .status-amarillo {
          background: rgba(241, 196, 15, .12);
          color: #d4a017;
      }

      .status-rojo {
          background: rgba(231, 76, 60, .1);
          color: #e74c3c;
      }

      /* Subsección de activos corrientes / fijos */
      .bal-subseccion-titulo {
          font-size: 9px;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: .8px;
          color: var(--texto-suave);
          padding: 4px 8px;
          background: rgba(0, 0, 0, .03);
          border-radius: 6px;
          margin: 8px 0 4px;
          display: block;
      }

      /* Fila del balance */
      .bal-fila {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 6px 8px;
          border-radius: 8px;
          font-size: 13px;
          transition: background .12s;
      }

      .bal-fila:hover {
          background: rgba(0, 0, 0, .03);
      }

      .bal-fila-label {
          color: var(--texto-medio);
          font-weight: 500;
          flex: 1;
      }

      .bal-fila-valor {
          font-weight: 800;
          white-space: nowrap;
      }

      .bal-fila-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 8px;
          border-top: 2px solid var(--borde, #e9ecef);
          margin-top: 8px;
      }

      /* Gráfica de patrimonio histórico */
      .bal-chart-wrap {
          overflow-x: auto;
          padding-bottom: 4px;
      }

      .bal-chart-barras {
          display: flex;
          align-items: flex-end;
          gap: 6px;
          height: 80px;
          min-width: 240px;
      }

      .bal-barra-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          gap: 3px;
      }

      .bal-barra {
          width: 100%;
          border-radius: 4px 4px 0 0;
          background: linear-gradient(to top, #00C8B6, #00D1B2);
          min-height: 4px;
          transition: height .6s cubic-bezier(.22, 1, .36, 1);
      }

      .bal-barra.negativa {
          background: linear-gradient(to top, #e74c3c, #ff6b6b);
      }

      .bal-barra-label {
          font-size: 8px;
          font-weight: 600;
          color: var(--texto-suave);
          white-space: nowrap;
      }

      /* Ecuación de cierre */
      .bal-ecuacion {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          flex-wrap: wrap;
          padding: 14px;
          background: var(--bg-card, #fff);
          border-radius: 14px;
          border: 1.5px solid var(--borde, #e9ecef);
          font-size: 13px;
          font-weight: 800;
          text-align: center;
      }

      /* Responsive: 1 columna en móvil, 2 en tablet, 3 en PC */
      .bal-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 14px;
      }

      @media (min-width: 640px) {
          .bal-grid {
              grid-template-columns: repeat(2, 1fr);
          }

      }

      @media (min-width: 1024px) {
          .bal-grid {
              grid-template-columns: repeat(3, 1fr);
          }

          .bal-semaforo {
              grid-template-columns: repeat(3, 1fr);
          }
      }

      .color-turquesa {
          color: var(--turquesa);
      }

      .color-coral {
          color: var(--coral);
      }

      /* ======================================================= */
      /* 🖨️ MOTOR DE IMPRESIÓN (EL ESPEJO MÁGICO PROFESIONAL)  */
      /* ======================================================= */
      @media print {

          /* 1. Ocultamos ABSOLUTAMENTE TODO el sistema visualmente */
          body.modo-impresion-ticket * {
              visibility: hidden !important;
          }

          /* 2. Rescatamos ÚNICAMENTE el papel del ticket y sus textos */
          body.modo-impresion-ticket #ticket-impresion,
          body.modo-impresion-ticket #ticket-impresion * {
              visibility: visible !important;
          }

          /* 3. Posicionamos el ticket en la esquina exacta (0,0) de la impresora térmica */
          body.modo-impresion-ticket #ticket-impresion {
              position: absolute !important;
              left: 0 !important;
              top: 0 !important;
              width: 100% !important;
              /* Se ajusta al rollo de 58mm u 80mm */
              max-width: 100% !important;
              margin: 0 !important;
              padding: 0 !important;
              box-shadow: none !important;
              /* Las impresoras no entienden sombras */
              border: none !important;
              border-radius: 0 !important;
              /* Quitamos bordes redondeados en papel */
              overflow: visible !important;
          }

          /* 4. Apagamos el fondo oscuro del modal para que no gaste tinta */
          body.modo-impresion-ticket #modal-ticket-print {
              background: transparent !important;
              backdrop-filter: none !important;
              position: static !important;
          }

          /* 5. Aseguramos que los botones de Re-Imprimir desaparezcan */
          .no-print {
              display: none !important;
          }
      }

      /* ========================================== */
      /* ESTILOS BOTON CENTRAL PILAS CARA B (Fintech Design)*/
      /* ========================================== */
      .btn-titan {
          padding: 16px 20px;
          border-radius: 18px;
          border: none;
          color: white;
          cursor: pointer;
          transition: transform 0.12s cubic-bezier(.22, 1, .36, 1), box-shadow 0.15s;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          width: 100%;
          box-sizing: border-box;
          text-align: left;
      }

      .btn-titan:active {
          transform: scale(0.97);
          box-shadow: none !important;
      }

      .btn-titan:hover {
          filter: brightness(1.06);
          transform: translateY(-1px);
      }

      /* Zona izquierda: ícono circular */
      .btn-titan-icono {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: rgba(255, 255, 255, .2);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          flex-shrink: 0;
      }

      /* Zona central: título + subtítulo */
      .btn-titan-texto {
          flex: 1;
          min-width: 0;
      }

      .btn-titan-titulo {
          font-size: 17px;
          font-weight: 900;
          display: block;
          line-height: 1.2;
          letter-spacing: -0.2px;
      }

      .btn-titan-sub {
          font-size: 11px;
          font-weight: 500;
          opacity: .78;
          display: block;
          margin-top: 2px;
      }

      /* Flecha derecha */
      .btn-titan-flecha {
          font-size: 20px;
          opacity: .6;
          flex-shrink: 0;
      }

      .btn-entra {
          background: linear-gradient(135deg, #00C8B6 0%, #007A73 100%);
          box-shadow: 0 6px 20px rgba(0, 200, 182, .35);
      }

      .btn-sale {
          background: linear-gradient(135deg, #FF6B6B 0%, #C0392B 100%);
          box-shadow: 0 6px 20px rgba(255, 107, 107, .35);
      }

      /* Franja de datos del día en el modal */
      .modal-datos-dia {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          background: #f8fafc;
          border-radius: 12px;
          padding: 8px 14px;
          margin-bottom: 14px;
          border-left: 3px solid #27ae60;
          font-size: 12px;
          font-weight: 700;
          color: #334155;
      }

      .modal-datos-dia.negativo {
          border-left-color: var(--coral);
      }

      .modal-datos-dia span {
          white-space: nowrap;
      }

      .modal-datos-dia .sep {
          color: #cbd5e1;
          font-weight: 400;
      }

      /* ══════════════════════════════════════════════════════
         MODAL CENTRAL — CARDS DE OPCIÓN (reemplazan píldoras)
      ══════════════════════════════════════════════════════ */
      .opcion-card {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 14px;
          border-radius: 14px;
          border: 1.5px solid transparent;
          cursor: pointer;
          text-align: left;
          transition: transform 0.12s, background 0.15s, border-color 0.15s;
          background: #f8fafc;
          position: relative;
          width: 100%;
          box-sizing: border-box;
      }

      .opcion-card:active {
          transform: scale(0.98);
      }

      .opcion-card-icono {
          font-size: 28px;
          flex-shrink: 0;
          width: 44px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
      }

      .opcion-card-texto {
          flex: 1;
          min-width: 0;
      }

      .opcion-card-titulo {
          font-size: 14px;
          font-weight: 800;
          line-height: 1.2;
          display: block;
          margin-bottom: 2px;
      }

      .opcion-card-desc {
          font-size: 11px;
          font-weight: 500;
          opacity: .7;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .opcion-card-flecha {
          font-size: 16px;
          opacity: .35;
          flex-shrink: 0;
      }

      /* Variante verde (ingresos) */
      .opcion-card.verde {
          border-color: #b2dfdb;
          color: #00695c;
      }

      .opcion-card.verde .opcion-card-icono {
          background: #e0f2f1;
      }

      .opcion-card.verde:hover {
          background: #e0f2f1;
          border-color: #00C8B6;
      }

      /* Variante roja (egresos) */
      .opcion-card.roja {
          border-color: #ffcdd2;
          color: #b71c1c;
      }

      .opcion-card.roja .opcion-card-icono {
          background: #ffebee;
      }

      .opcion-card.roja:hover {
          background: #ffebee;
          border-color: #FF6B6B;
      }

      /* Resaltado de sugerencia inteligente del Brain */
      .opcion-card.sugerida {
          border-color: var(--turquesa) !important;
          background: rgba(0, 209, 178, .06) !important;
          color: var(--turquesa-dark) !important;
      }

      .opcion-card.sugerida .opcion-card-icono {
          background: rgba(0, 209, 178, .15) !important;
      }

      /* Badge "Sugerido" */
      .badge-sugerido {
          position: absolute;
          top: -8px;
          left: 14px;
          background: var(--turquesa);
          color: #fff;
          font-size: 8px;
          font-weight: 900;
          padding: 2px 8px;
          border-radius: 100px;
          letter-spacing: .5px;
          text-transform: uppercase;
      }

      /* Vista "Otros Ingresos" — tercer nivel */
      #vista-otros-ingresos {
          display: none;
          flex-direction: column;
          gap: 8px;
          animation: fadeIn 0.25s ease;
      }

      /* Formulario inline de Otros Ingresos */
      .otros-ing-form {
          background: #f8fafc;
          border: 1.5px solid #e2e8f0;
          border-radius: 14px;
          padding: 14px;
          margin-top: 4px;
          animation: fadeIn 0.2s ease;
      }

      .otros-ing-form label {
          font-size: 10px;
          font-weight: 800;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: .5px;
          display: block;
          margin-bottom: 4px;
          margin-top: 10px;
      }

      .otros-ing-form label:first-child {
          margin-top: 0;
      }

      .otros-ing-form input,
      .otros-ing-form select {
          width: 100%;
          box-sizing: border-box;
          border: 1.5px solid #e2e8f0;
          border-radius: 10px;
          padding: 9px 12px;
          font-size: 14px;
          font-weight: 600;
          color: #0f172a;
          background: #fff;
          outline: none;
          transition: border-color .15s;
          font-family: inherit;
      }

      .otros-ing-form input:focus,
      .otros-ing-form select:focus {
          border-color: var(--turquesa);
      }

      .otros-ing-btn-confirmar {
          width: 100%;
          margin-top: 12px;
          padding: 13px;
          border-radius: 12px;
          border: none;
          background: linear-gradient(135deg, #00C8B6, #009FA8);
          color: #fff;
          font-size: 15px;
          font-weight: 900;
          cursor: pointer;
          transition: opacity .15s;
      }

      .otros-ing-btn-confirmar:active {
          opacity: .85;
      }

      .otros-ing-btn-confirmar:disabled {
          opacity: .5;
          cursor: not-allowed;
      }

      .btn-pildora {
          padding: 15px;
          border-radius: 14px;
          font-size: 16px;
          font-weight: 700;
          border: 1px solid transparent;
          cursor: pointer;
          text-align: left;
          transition: transform 0.1s, background 0.2s;
      }

      .btn-pildora:active {
          transform: scale(0.98);
      }

      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateY(10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }


      /* ======================================================= */
      /* ICONOS REDES SOCIALES CARA A CLIENTES  */
      /* ======================================================= */
      /* Efecto latido elegante al pasar el mouse */
      .btn-red-social {
          transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          display: inline-flex;
          align-items: center;
          justify-content: center;
      }

      .btn-red-social:hover {
          transform: scale(1.15);
      }

      /* =======================================================
       🚀 EXPANSIÓN TOTAL DEL DASHBOARD (MODO CFO FULL SCREEN)
       ======================================================= */

      /* 1. Matamos el margen nativo del navegador desde la raíz */
      body,
      html {
          margin: 0 !important;
          padding: 0 !important;
          overflow-x: hidden !important;
          width: 100% !important;
      }

      /* 2. Destruimos los límites de las cajas principales */
      .container,
      main {
          max-width: 100% !important;
          width: 100% !important;
          /* Te dejo los 4px exactos que pediste para que no choque con el bisel */
          padding-left: 4px !important;
          padding-right: 4px !important;
          margin: 0 !important;
          box-sizing: border-box !important;
      }

      /* 3. 🎯 EL BISTURÍ: Aplastamos los colchones invisibles de filas y columnas */
      .row {
          margin-left: 0 !important;
          margin-right: 0 !important;
          width: 100% !important;
      }

      [class*="col-"],
      .col {
          /* Evita que cada columna meta sus 15px de padding por defecto */
          padding-left: 4px !important;
          padding-right: 4px !important;
      }

      /* 4. Forzamos al módulo inicio a estirarse al máximo absoluto */
      #inicio,
      .tab-pane {
          width: 100% !important;
          max-width: 100% !important;
          padding-left: 0px !important;
          padding-right: 0px !important;
          margin: 0 !important;
          box-sizing: border-box !important;
      }

      /* ========================================= */
      /* CSS: ACADEMIA PILAS (ONBOARDING GAMIFICADO) */
      /* ========================================= */

      .diploma-container {
          background: linear-gradient(135deg, #1A2930, #00C8B6);
          padding: 40px 20px;
          border-radius: 20px;
          text-align: center;
          color: white;
          box-shadow: 0 15px 30px rgba(0, 200, 182, 0.4);
          animation: slideUpAccion 0.5s ease-out;
      }

      /* ========================================= */
      /* CSS: SINCRONIZANDO CATALOGO */
      /* ========================================= */
      @keyframes latido {
          0% {
              transform: scale(1);
          }

          50% {
              transform: scale(1.1);
          }

          100% {
              transform: scale(1);
          }
      }

      /* ========================================= */
      /* ✅ [FIX-90] BURBUJA DE TARJETAS EN LIMBO  */
      /* ========================================= */
      .notificacion-tarjeta {
          position: absolute;
          top: -10px;
          right: 10px;
          font-size: 10px;
          font-weight: 700;
          padding: 3px 10px;
          border-radius: 999px;
          /* píldora */
          cursor: pointer;
          z-index: 10;
          transition: all 0.25s ease;
          display: none;
          white-space: nowrap;
          letter-spacing: 0.2px;
      }

      /* Alerta activa: coral de la marca, limpio y visible */
      .alerta-activa {
          background: var(--coral-light);
          color: var(--coral-dark);
          border: 1px solid var(--coral);
          box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
          animation: latido-suave 2.5s ease-in-out infinite;
      }

      /* Reposo: borde sutil, sin color fuerte */


      /* Latido más suave — no distrae, solo llama la atención */
      @keyframes latido-suave {

          0%,
          100% {
              transform: scale(1);
              box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
          }

          50% {
              transform: scale(1.06);
              box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.08);
          }
      }

      /* ── ÍTEM MENÚ LATERAL ERP ─────────────────────────── */
      .menu-item-lateral {
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          padding: 10px 12px;
          border-radius: 10px;
          transition: background 0.15s, color 0.15s, border-color 0.15s;
          margin: 2px 0;
          color: var(--texto-medio);
          font-weight: 600;
          font-size: 13px;
          border-left: 3px solid transparent;
          position: relative;
      }

      .menu-item-lateral:hover {
          background: var(--bg-subtle);
          color: var(--texto-oscuro);
      }

      .menu-item-lateral svg {
          flex-shrink: 0;
          color: var(--texto-suave);
          transition: color 0.15s;
          width: 17px;
          height: 17px;
      }

      .menu-item-lateral:hover svg {
          color: var(--turquesa);
      }

      /* Estado activo — módulo abierto actualmente */
      .menu-item-lateral.activo {
          background: rgba(0, 209, 178, 0.08);
          color: var(--turquesa);
          border-left-color: var(--turquesa);
          font-weight: 800;
      }

      .menu-item-lateral.activo svg {
          color: var(--turquesa);
      }

      /* v2: micro-desplazamiento al pasar/tocar (complementa los estilos base) */
      .menu-item-lateral {
          transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
      }

      .menu-item-lateral:hover {
          transform: translateX(3px);
      }

      .menu-item-lateral:active {
          transform: translateX(3px) scale(.98);
      }

      /* Etiqueta de sección del menú lateral (reemplaza el div de texto uppercase) */
      .menu-seccion-label {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 9px;
          font-weight: 900;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          margin: 14px 0 4px 4px;
          padding: 4px 8px;
          border-radius: 6px;
          width: fit-content;
      }

      .menu-seccion-label.azul {
          color: #4169e1;
          background: rgba(65, 105, 225, .08);
      }

      .menu-seccion-label.verde {
          color: #27ae60;
          background: rgba(39, 174, 96, .08);
      }


      .menu-seccion-label.gris {
          color: #7f8c8d;
          background: rgba(127, 140, 141, .08);
      }

      .menu-seccion-label.rojo {
          color: var(--danger);
          background: var(--danger-light);
      }

      /* Separador restaurar sistema */
      .menu-danger-wrap {
          margin-top: auto;
          padding-top: 8px;
          border-top: 1px solid rgba(231, 76, 60, .15);
      }

      .menu-item-danger {
          color: var(--danger) !important;
          font-weight: 700;
      }

      .menu-item-danger:hover {
          background: var(--danger-light) !important;
      }

      .menu-item-danger svg {
          color: var(--danger) !important;
      }

      /* Botón nav cliente con SVG */
      .bottom-nav-cliente button {
          background: none;
          border: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          font-size: 10px;
          font-weight: 600;
          color: var(--texto-suave);
          cursor: pointer;
          transition: color 0.2s;
          flex: 1;
          padding: 8px 4px;
      }

      .bottom-nav-cliente button svg {
          width: 22px;
          height: 22px;
          stroke: currentColor;
          transition: transform 0.2s;
      }

      .bottom-nav-cliente button {
          position: relative;
      }

      .bottom-nav-cliente button svg {
          width: 24px;
          height: 24px;
      }

      .bottom-nav-cliente button.activo {
          color: var(--turquesa);
      }

      .bottom-nav-cliente button.activo span {
          font-weight: 800;
      }

      .bottom-nav-cliente button.activo svg {
          transform: translateY(-1px);
          filter: drop-shadow(0 2px 4px rgba(0, 209, 178, 0.3));
      }

      /* Píldora activa — cara A */
      .bottom-nav-cliente button.activo::before {
          content: '';
          position: absolute;
          top: 4px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px;
          height: 32px;
          background: rgba(0, 209, 178, 0.10);
          border-radius: 10px;
          border-top: 2px solid var(--turquesa);
          pointer-events: none;
      }

      /* Badge de promos activas */

      /* ── TRANSICIÓN ENTRE MÓDULOS ──────────────────────── */
      @keyframes pilas-fadein {
          from {
              opacity: 0;
              transform: translateY(8px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .modulo-fadein {
          /* 🐞 [f197] «backwards» (antes «both»): al terminar la entrada no queda «transform» en el módulo.
             Con «both» quedaba transform y todo lo «fijo» de adentro se iba al final de la lista
             (botón de Gastos, ventana de «+ Nueva compra»…). */
          animation: pilas-fadein 0.22s cubic-bezier(0.22, 1, 0.36, 1) backwards;
      }

      /* ── SKELETON LOADERS ───────────────────────────────── */


      /* ✅ [FIX-95b] Spinner del overlay de login */
      @keyframes girar-login {
          from {
              transform: rotate(0deg);
          }

          to {
              transform: rotate(360deg);
          }
      }

      /* ✅ [FIX-101b] Cursor parpadeante del Briefing Typewriter */
      @keyframes parpadeo-cursor {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: 0;
          }
      }

      /* ══════════════════════════════════════════════════════
   🌑 TEMA BLACK — Pilas! Dark Mode
   Se activa añadiendo la clase .tema-black al <body>
   Todos los elementos que usan variables CSS se adaptan
   automáticamente. Los colores de marca se mantienen.
══════════════════════════════════════════════════════ */

      body.tema-black {
          /* — Fondos — */
          --bg-app: #0A0A0F;
          --bg-card: #111117;
          --bg-subtle: #1A1A24;
          --bg-hover: #1F1F2E;
          --bg: #0A0A0F;

          /* — Texto — */
          --texto-oscuro: #F0F0F5;
          --texto-medio: #A0A0B5;
          --texto-suave: #606078;
          --dark-blue: #F0F0F5;

          /* — Bordes — */
          --borde: rgba(255, 255, 255, .08);
          --borde-focus: #00D1B2;

          /* — Estados (más vibrantes en oscuro) — */
          --success-light: rgba(16, 185, 129, .12);
          --warning-light: rgba(245, 158, 11, .12);
          --danger-light: rgba(239, 68, 68, .12);
          --info-light: rgba(59, 130, 246, .12);

          /* — Turquesa ligeramente más brillante en oscuro — */
          --turquesa: #00D1B2;
          --turquesa-dark: #00B89C;
          --turquesa-light: rgba(0, 209, 178, .12);

          /* — Coral igual — */
          --coral: #FF6B6B;
          --coral-dark: #E85555;
          --coral-light: rgba(255, 107, 107, .12);

          /* — Sombras más pronunciadas en oscuro — */
          --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
          --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
          --shadow-md: 0 4px 6px rgba(0, 0, 0, .4);
          --shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);
      }

      /* Fondo del body en tema black */
      body.tema-black,
      body.tema-black #vista-erp,
      body.tema-black #panel-admin {
          background: #0A0A0F !important;
          color: #F0F0F5;
      }

      /* Cards y tarjetas */
      body.tema-black .modal-content {
          background: #111117 !important;
          border-color: rgba(255, 255, 255, .08) !important;
      }

      /* Inputs del ERP en tema black */
      body.tema-black .input-admin {
          background: #1A1A24 !important;
          border-color: rgba(255, 255, 255, .12) !important;
          color: #F0F0F5 !important;
      }

      /* ══════════════════════════════════════════════════════
   🌑 TEMA BLACK — Complemento: elementos específicos ERP
══════════════════════════════════════════════════════ */

      /* ── Panel admin y vista ERP ── */
      body.tema-black #panel-admin,
      body.tema-black .vista-seccion,
      body.tema-black .modulo-admin,
      body.tema-black .peigo-contenedor {
          background: #0A0A0F !important;
      }

      /* ── Menú offcanvas lateral ── */
      body.tema-black .offcanvas-menu {
          background: #111117 !important;
          border-right: 1px solid rgba(255, 255, 255, .08) !important;
      }

      body.tema-black .offcanvas-menu p,
      body.tema-black .offcanvas-menu span,
      body.tema-black .offcanvas-menu div {
          color: #A0A0B5;
      }

      /* ── Modales ── */
      body.tema-black .modal-pass,
      body.tema-black #modalPago .modal-content,
      body.tema-black #modalFactura .modal-content {
          background: #111117 !important;
          border: 1px solid rgba(255, 255, 255, .1) !important;
          color: #F0F0F5 !important;
      }

      body.tema-black .modal-pass h2,
      body.tema-black .modal-pass h3,
      body.tema-black .modal-pass label,
      body.tema-black .modal-pass p {
          color: #F0F0F5 !important;
      }

      /* ── Nav de tabs (Mostrador, Apartados, etc.) ── */
      body.tema-black .nav-app-container {
          background: #111117 !important;
          border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
      }

      body.tema-black .btn-nav-app {
          background: #111117 !important;
          color: #606078 !important;
          border: none !important;
      }

      body.tema-black .btn-nav-app.activo {
          background: rgba(0, 209, 178, .12) !important;
          color: #00D1B2 !important;
          border-bottom: 2px solid #00D1B2 !important;
      }

      /* ── Cards de métricas del dashboard ── */

      /* ── Tabla de inventario ── */
      body.tema-black .tabla-stock th {
          background: #1A1A24 !important;
          color: #A0A0B5 !important;
          border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
      }

      body.tema-black .tabla-stock td {
          border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
          color: #F0F0F5 !important;
      }

      body.tema-black .tabla-stock tr:hover td {
          background: #1A1A24 !important;
      }

      body.tema-black .input-tabla {
          background: #1A1A24 !important;
          border: 1px solid rgba(255, 255, 255, .1) !important;
          color: #F0F0F5 !important;
      }

      /* ── Items del inventario (cards producto) ── */
      body.tema-black .item-card-mini {
          background: #111117 !important;
          border: 0.5px solid rgba(255, 255, 255, .08) !important;
      }

      body.tema-black .spec-data {
          color: #F0F0F5 !important;
      }

      body.tema-black .text-premium-modelo {
          color: #A0A0B5 !important;
      }

      /* ── Carrito ── */
      body.tema-black .carrito-header,
      body.tema-black .carrito-footer {
          background: #111117 !important;
          border-color: rgba(255, 255, 255, .08) !important;
      }

      body.tema-black .item-carrito-cli {
          background: #1A1A24 !important;
          border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
      }

      /* ── Filtros y selects ── */

      /* ── Slides de producto (detalle) ── */
      body.tema-black .btn-volver-slide,
      body.tema-black .titulo-header-slide {
          color: #F0F0F5 !important;
          background: #111117 !important;
      }

      body.tema-black .slide-modelo {
          background: #1A1A24 !important;
          border-color: rgba(255, 255, 255, .08) !important;
          color: #F0F0F5 !important;
      }

      /* ── FAB central y botones principales ── */
      body.tema-black .fab-central-pro {
          background: linear-gradient(135deg, #00D1B2, #00A896) !important;
          box-shadow: 0 4px 20px rgba(0, 209, 178, .4) !important;
      }

      /* ── Sección de configuración ── */

      /* ── Pantalla inicio (login) ── */
      body.tema-black #pantalla-inicio {
          background: #0A0A0F !important;
      }

      body.tema-black .pilas-btn-cliente {
          background: rgba(0, 209, 178, .12) !important;
          border: 1.5px solid rgba(0, 209, 178, .3) !important;
          color: #00D1B2 !important;
      }

      body.tema-black .pilas-btn-equipo {
          background: rgba(255, 107, 107, .08) !important;
          border: 1.5px solid rgba(255, 107, 107, .25) !important;
          color: #FF6B6B !important;
      }

      /* ── Descuentos y fila ── */
      body.tema-black .fila-descuento {
          background: #1A1A24 !important;
          border: 1px solid rgba(255, 255, 255, .08) !important;
      }

      body.tema-black .fila-descuento span {
          color: #F0F0F5 !important;
      }

      /* ── Header marca (cliente vista) — se mantiene navy ── */
      body.tema-black .header-marca {
          background: #05111F !important;
      }

      /* ── Botón oferta especial ── */
      body.tema-black .btn-oferta-especial {
          background: linear-gradient(135deg, #00D1B2, #00A896) !important;
          color: #0A0A0F !important;
      }

      /* ── Widget gamificación ── */
      body.tema-black #widget-gamificacion-inicio {
          background: #111117 !important;
          border-color: rgba(255, 255, 255, .08) !important;
      }

      /* ── Badges ── */
      body.tema-black .badge-stock-zero {
          background: rgba(239, 68, 68, .15) !important;
          color: #FF6B6B !important;
          border-color: rgba(239, 68, 68, .25) !important;
      }

      body.tema-black .badge-promo-mini {
          background: rgba(245, 158, 11, .15) !important;
          color: #F59E0B !important;
      }

      /* ── Trust banner (cliente) ── */

      /* ── Splash screen (Encendido v4): noir profundo ── */
      body.tema-black #splash-screen {
          --splash-bg-a: #06060A;
          --splash-bg-b: #111117;
          --splash-bg-c: #0A0A0F;
      }

      /* ── Sello premium ── */

      /* ── Btn nav info (detalles producto) ── */
      body.tema-black .btn-nav-info {
          background: #1A1A24 !important;
          border-color: rgba(255, 255, 255, .1) !important;
          color: #A0A0B5 !important;
      }

      body.tema-black .btn-nav-info.activo {
          background: rgba(0, 209, 178, .12) !important;
          color: #00D1B2 !important;
      }

      /* ── Contenedores foto ── */
      body.tema-black .mini-foto-container {
          background: #1A1A24 !important;
          border-color: rgba(255, 255, 255, .08) !important;
      }

      /* ── Stock crítico ── */

      /* ── Textos genéricos que aún tienen colores hardcodeados ── */
      body.tema-black h1,
      body.tema-black h2,
      body.tema-black h3,
      body.tema-black h4,
      body.tema-black h5,
      body.tema-black h6 {
          color: #F0F0F5;
      }

      body.tema-black p {
          color: #A0A0B5;
      }

      /* ── Transición suave al cambiar tema ── */
      body,
      body * {
          transition: background-color .25s ease, color .15s ease, border-color .2s ease;
      }

      /* Excluir transición de elementos que no la necesitan */
      body *,
      *::before,
      *::after {
          transition-property: background-color, color, border-color;
      }

      /* Pero las animaciones y transforms no se interrumpen */
      body.tema-black .fab-central-pro,
      body.tema-black .btn-oferta-especial {
          transition: all .25s ease !important;
      }

      /* ══════════════════════════════════════════════════════
   🧠 PILAS BRAIN — Estilos del Dashboard Principal
   Gradiente animado · Avatar pulsante · Chat UI
══════════════════════════════════════════════════════ */

      /* Gradiente de fondo animado */

      /* Anillo "pensando" */
      @keyframes brain-pensando {
          from {
              transform: rotate(0deg);
          }

          to {
              transform: rotate(360deg);
          }
      }

      /* Chips entrada suave */
      @keyframes brain-chip-in {
          from {
              opacity: 0;
              transform: translateY(6px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      /* Burbuja de respuesta */

      /* Transición de entrada/salida del briefing (fade + desliz sutil) */
      #bloque-briefing {
          transition: opacity .2s ease, transform .2s ease;
          transform-origin: top center;
      }

      /* [REMOVED V3.7.2] Estilos del toggle viejo (.brain-colapsado, #brain-toggle-wrap,
         #btn-ver-numeros) eliminados — reemplazados por módulos independientes
         (mod-inicio + mod-numeros). */

      /* ── Contenedor principal Brain ── */
      .brain-card {
          width: 100%;
          box-sizing: border-box;
          border-radius: 20px;
          overflow: hidden;
          position: relative;
          background: linear-gradient(135deg, #05111F 0%, #0B1E33 40%, #081928 70%, #05111F 100%);
          border: 1px solid rgba(0, 209, 178, .18);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(0, 209, 178, .08);
      }

      /* UX (Punto 1 · etapa 1): cuando el Brief muestra una ALERTA, la tarjeta
         cambia a acento coral para que la urgencia se sienta de un vistazo. */
      .brain-card.brief-alerta {
          border-color: rgba(255, 107, 107, .45);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 107, 107, .12), 0 0 0 1px rgba(255, 107, 107, .18);
      }

      /* UX (Punto 1 · etapa 6): CELEBRACIÓN — buenas noticias, acento verde con brillo. */
      .brain-card.brief-celebra {
          border-color: rgba(0, 209, 178, .55);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(0, 209, 178, .15), 0 0 24px rgba(0, 209, 178, .22);
      }

      /* UX (Punto 1 · etapa 6): ONBOARDING — negocio nuevo / por configurar, acento ámbar cálido. */
      .brain-card.brief-onboarding {
          border-color: rgba(245, 158, 11, .4);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(245, 158, 11, .12), 0 0 0 1px rgba(245, 158, 11, .15);
      }

      /* Capa de ruido sutil sobre el gradiente */
      .brain-card::before {
          content: '';
          position: absolute;
          inset: 0;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
          pointer-events: none;
          border-radius: 20px;
          z-index: 0;
      }

      /* Todo el contenido va sobre el ruido */
      .brain-card>* {
          position: relative;
          z-index: 1;
      }

      /* ── Cabecera ── */

      .brain-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: linear-gradient(135deg, #00D1B2, #FF6B6B);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
          position: relative;
      }

      /* Pulso del avatar — anillo en GPU (transform/opacity), no repinta */
      .brain-avatar::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 50%;
          border: 2px solid rgba(0, 209, 178, .45);
          animation: brain-pulso-ring 2.5s ease-out infinite;
          pointer-events: none;
      }

      @keyframes brain-pulso-ring {
          0% {
              transform: scale(1);
              opacity: .5;
          }

          100% {
              transform: scale(1.7);
              opacity: 0;
          }
      }

      /* Anillo pensando — visible mientras typea */
      .brain-avatar.pensando::after {
          content: '';
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          border: 2px solid transparent;
          border-top-color: #00D1B2;
          border-right-color: rgba(0, 209, 178, .3);
          animation: brain-pensando .8s linear infinite;
      }

      .brain-categoria-wrap {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .brain-label {
          font-size: 9px;
          font-weight: 700;
          color: #00D1B2;
          text-transform: uppercase;
          letter-spacing: 1.2px;
      }

      .brain-sublabel {
          font-size: 9px;
          color: rgba(141, 168, 191, .7);
          font-weight: 500;
      }

      .brain-btn-reload {
          background: rgba(255, 255, 255, .04);
          border: 1px solid rgba(255, 255, 255, .08);
          border-radius: 100px;
          padding: 3px 10px;
          font-size: .68rem;
          color: rgba(141, 168, 191, .8);
          cursor: pointer;
          transition: all .2s;
      }

      .brain-btn-reload:hover {
          background: rgba(0, 209, 178, .1);
          border-color: rgba(0, 209, 178, .3);
          color: #00D1B2;
      }

      /* [REMOVED V3.7.2] .brain-btn-numeros — pill del toggle viejo eliminada. */

      /* ── Responsive móvil: brain-header en 2 filas ── */
      @media (max-width: 479px) {

          /* El header se hace wrap para que la fila 2 baje */

          /* Mover el reload (🔄) a la fila 1, pegado a la derecha del avatar-wrap
             Para lograrlo le damos order: -1 para que aparezca antes de brain-acciones */
          .brain-btn-reload {
              order: -1;
          }

          /* Fila 2: toda la fila para fecha + pill
             Ocupa 100% del ancho → superior derecho */

          /* [REMOVED V3.7.2] reglas mobile del toggle viejo eliminadas. */
      }

      /* ── Área de mensaje ── */
      .brain-mensaje-wrap {
          padding: 14px 16px 12px;
          min-height: 80px;
      }

      #briefing-mensaje {
          font-size: 15px !important;
          font-weight: 500 !important;
          color: #E8F4FF !important;
          line-height: 1.75 !important;
          margin: 0 !important;
          letter-spacing: .01em;
      }

      #briefing-cursor {
          background: #00D1B2 !important;
          width: 2px !important;
          height: 15px !important;
      }

      /* ── Badge de contexto ── */
      .brain-contexto-badge {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          background: rgba(0, 209, 178, .07);
          border: 1px solid rgba(0, 209, 178, .15);
          border-radius: 100px;
          padding: 3px 10px;
          font-size: .7rem;
          color: rgba(141, 168, 191, .85);
          margin: 0 16px 12px;
      }

      /* ── Botones de reacción y acción ── */
      .brain-footer {
          padding: 0 16px 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          flex-wrap: wrap;
      }

      /* ── Zona de chat ── */
      .brain-chat-zona {
          padding: 12px 16px 16px;
      }

      .brain-chat-titulo {
          font-size: 9px;
          font-weight: 800;
          color: rgba(0, 209, 178, .7);
          text-transform: uppercase;
          letter-spacing: 1.4px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 5px;
      }

      /* Chips scroll horizontal */
      .brain-chips-scroll {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          padding-bottom: 10px;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
      }

      .brain-chips-scroll::-webkit-scrollbar {
          display: none;
      }

      .brain-chip {
          flex-shrink: 0;
          background: rgba(0, 209, 178, .07);
          border: 1px solid rgba(0, 209, 178, .18);
          border-radius: 100px;
          padding: 6px 13px;
          font-size: .74rem;
          font-weight: 600;
          color: #00D1B2;
          cursor: pointer;
          transition: all .18s;
          white-space: nowrap;
          animation: brain-chip-in .3s ease both;
      }

      .brain-chip:hover {
          background: rgba(0, 209, 178, .15);
          border-color: rgba(0, 209, 178, .4);
          transform: translateY(-1px);
      }

      /* Input estilo chat */
      .brain-input-wrap {
          display: flex;
          align-items: center;
          gap: 0;
          background: rgba(255, 255, 255, .04);
          border: 1px solid rgba(255, 255, 255, .1);
          border-radius: 100px;
          overflow: hidden;
          margin-top: 4px;
          transition: border-color .2s;
      }

      .brain-input-wrap:focus-within {
          border-color: rgba(0, 209, 178, .4);
          background: rgba(0, 209, 178, .04);
      }

      #brain-input-pregunta {
          flex: 1 !important;
          background: transparent !important;
          border: none !important;
          border-radius: 0 !important;
          padding: 10px 16px !important;
          font-size: .84rem !important;
          color: #E8F4FF !important;
          outline: none !important;
          font-family: 'DM Sans', sans-serif;
      }

      #brain-input-pregunta::placeholder {
          color: rgba(141, 168, 191, .55) !important;
      }

      .brain-btn-enviar {
          background: linear-gradient(135deg, #00D1B2, #00A896);
          border: none;
          width: 38px;
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 1rem;
          flex-shrink: 0;
          transition: opacity .2s;
          margin: 2px;
          border-radius: 100px;
      }

      .brain-btn-enviar:hover {
          opacity: .88;
      }

      /* Burbuja de respuesta */

      /* Barra de progreso al fondo */
      .brain-progress-bar {
          height: 2px;
          background: rgba(0, 209, 178, .08);
          position: relative;
          overflow: hidden;
      }

      .brain-progress-bar::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, #00D1B2, transparent);
          transform: translateX(-100%);
          animation: brain-progress-shimmer 2s ease infinite;
      }

      @keyframes brain-progress-shimmer {
          from {
              transform: translateX(-100%);
          }

          to {
              transform: translateX(100%);
          }
      }

      /* Reducir animaciones si el usuario lo prefiere */
      @media (prefers-reduced-motion: reduce) {
          .brain-card {
              animation: none;
          }

          .brain-avatar {
              animation: none;
          }

          .brain-avatar.pensando::after {
              animation: none;
          }

          .brain-progress-bar::after {
              animation: none;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          *,
          *::before,
          *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
          }
      }

      /* ── Modal genérico Pilas (Comunicados, Perfil B2B, etc) ── */
      .pilas-modal-overlay {
          position: fixed;
          inset: 0;
          z-index: 4000;
          background: rgba(15, 30, 40, .55);
          backdrop-filter: blur(3px);
          display: flex;
          align-items: flex-end;
          justify-content: center;
          animation: pilasFadeIn .2s ease;
      }

      .pilas-modal-card {
          width: 100%;
          max-width: 560px;
          max-height: 85vh;
          background: var(--bg-card);
          border-radius: 20px 20px 0 0;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-shadow: 0 -8px 40px rgba(0, 0, 0, .25);
          animation: pilasSlideUp .28s cubic-bezier(.22, 1, .36, 1);
      }

      @media (min-width: 640px) {
          .pilas-modal-overlay {
              align-items: center;
          }

          .pilas-modal-card {
              border-radius: 20px;
          }
      }

      .pilas-modal-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 18px;
          border-bottom: .5px solid var(--borde);
          flex-shrink: 0;
      }

      .pilas-modal-x {
          background: var(--bg-subtle);
          border: none;
          cursor: pointer;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          font-size: 14px;
          color: var(--texto-suave);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .15s;
      }

      .pilas-modal-x:hover {
          background: var(--borde);
      }

      .pilas-modal-body {
          padding: 16px 18px;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
      }

      @keyframes pilasFadeIn {
          from {
              opacity: 0;
          }

          to {
              opacity: 1;
          }
      }

      @keyframes pilasSlideUp {
          from {
              transform: translateY(40px);
              opacity: .6;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          .pilas-modal-overlay,
          .pilas-modal-card {
              animation: none;
          }
      }

      /* ════════════════════════════════════════════════════════════
   COMPACTACIÓN DEL BRIEF (Lote B)
   Overrides bajo .brief-compacto para no afectar el brain-card
   en otros contextos. Reduce paddings, alturas y márgenes.
   ════════════════════════════════════════════════════════════ */

      .brief-compacto .brain-avatar {
          width: 32px;
          height: 32px;
          font-size: 15px;
      }

      .brief-compacto .brain-mensaje-wrap {
          padding: 10px 14px 9px;
          min-height: 54px;
      }

      .brief-compacto #briefing-mensaje {
          font-size: 14px !important;
          line-height: 1.6 !important;
      }

      .brief-compacto .brain-contexto-badge {
          margin: 0 14px 9px;
      }

      .brief-compacto .brain-footer {
          padding: 0 14px 11px;
      }

      .brief-compacto .brain-chat-zona {
          padding: 11px 14px 14px;
      }

      /* Pulso: tarjetas internas y proyección más delgadas */
      .brief-compacto #bloque-pulso>div:first-child {
          margin-bottom: 8px !important;
      }

      .brief-compacto #bloque-pulso [style*="grid-template-columns"] {
          gap: 6px !important;
          margin-bottom: 8px !important;
      }

      .brief-compacto #bloque-pulso [style*="grid-template-columns"]>div {
          padding: 7px 9px !important;
      }

      .brief-compacto #pulso-proy-wrap {
          padding: 8px 11px !important;
      }

      /* ════════════════════════════════════════════════════════════
   CARRUSEL DE ESTADOS B2B (Lote C) — estilo Instagram/WhatsApp
   ════════════════════════════════════════════════════════════ */
      .carrusel-b2b-scroll {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          padding: 4px 2px 8px;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
      }

      .carrusel-b2b-scroll::-webkit-scrollbar {
          display: none;
      }

      .carrusel-item {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          width: 62px;
          background: none;
          border: none;
          padding: 0;
          font-family: inherit;
      }

      .carrusel-ring {
          width: 58px;
          height: 58px;
          border-radius: 50%;
          padding: 2.5px;
          background: linear-gradient(135deg, #00D1B2, #FF6B6B);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform .15s ease;
      }

      .carrusel-ring.visto {
          background: var(--borde);
      }

      .carrusel-item:active .carrusel-ring {
          transform: scale(.92);
      }

      .carrusel-avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: var(--bg-card);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
      }

      .carrusel-avatar-inicial {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          font-weight: 800;
          color: #fff;
      }

      .carrusel-avatar-emoji {
          position: absolute;
          bottom: -2px;
          right: -2px;
          font-size: 15px;
          background: var(--bg-card);
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1.5px solid var(--bg-card);
      }

      .carrusel-badge-count {
          position: absolute;
          top: -1px;
          right: -1px;
          min-width: 17px;
          height: 17px;
          padding: 0 4px;
          border-radius: 999px;
          background: var(--coral);
          color: #fff;
          font-size: 10px;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1.5px solid var(--bg-card);
      }

      .carrusel-nombre {
          font-size: 10px;
          color: var(--texto-medio);
          text-align: center;
          max-width: 62px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 1.2;
      }

      /* ── Modal de perfil B2B (Lote C2) ── */
      .perfil-b2b-cabecera {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 20px 18px 16px;
          background: linear-gradient(135deg, rgba(0, 209, 178, .07), rgba(255, 107, 107, .05));
      }

      .perfil-b2b-avatar {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          font-weight: 800;
          color: #fff;
          flex-shrink: 0;
          position: relative;
      }

      .perfil-b2b-avatar-emoji {
          position: absolute;
          bottom: -2px;
          right: -2px;
          font-size: 18px;
          background: var(--bg-card);
          border-radius: 50%;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .perfil-b2b-nivel {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 11px;
          font-weight: 700;
          padding: 2px 9px;
          border-radius: 999px;
          margin-top: 4px;
      }

      .perfil-b2b-solicitud {
          background: var(--bg-subtle);
          border: .5px solid var(--borde);
          border-radius: 12px;
          padding: 12px 14px;
          margin-bottom: 9px;
      }

      .perfil-b2b-btn-postular {
          width: 100%;
          margin-top: 9px;
          padding: 9px;
          border: none;
          border-radius: 10px;
          background: linear-gradient(135deg, #00D1B2, #00A896);
          color: #05111F;
          font-weight: 700;
          font-size: .82rem;
          cursor: pointer;
          transition: opacity .15s;
      }

      .perfil-b2b-btn-postular:active {
          opacity: .8;
      }

      .perfil-b2b-btn-postulado {
          width: 100%;
          margin-top: 9px;
          padding: 9px;
          border: 1px solid var(--borde);
          border-radius: 10px;
          background: var(--bg-card);
          color: var(--texto-suave);
          font-weight: 700;
          font-size: .82rem;
          cursor: default;
      }

      /* ════════════════════════════════════════════════════════════
   BANNER DE INSTALACIÓN PWA (Lote 5)
   ════════════════════════════════════════════════════════════ */
      #pwa-install-banner {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 4500;
          padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
          background: linear-gradient(135deg, #05111F, #0D2137);
          border-top: 1px solid rgba(0, 209, 178, .25);
          box-shadow: 0 -6px 24px rgba(0, 0, 0, .3);
          animation: pwaSlideUp .35s cubic-bezier(.22, 1, .36, 1);
      }

      .pwa-banner-inner {
          display: flex;
          align-items: center;
          gap: 12px;
          max-width: 560px;
          margin: 0 auto;
      }

      .pwa-banner-icon {
          font-size: 26px;
          flex-shrink: 0;
      }

      .pwa-banner-text {
          flex: 1;
          min-width: 0;
      }

      .pwa-banner-title {
          font-size: .86rem;
          font-weight: 800;
          color: #fff;
          line-height: 1.25;
      }

      .pwa-banner-sub {
          font-size: .72rem;
          color: #8DA8BF;
          line-height: 1.35;
          margin-top: 2px;
      }

      .pwa-banner-actions {
          display: flex;
          align-items: center;
          gap: 7px;
          flex-shrink: 0;
      }

      .pwa-btn-install {
          background: linear-gradient(135deg, #00D1B2, #00A896);
          color: #05111F;
          border: none;
          border-radius: 10px;
          padding: 9px 16px;
          font-size: .82rem;
          font-weight: 800;
          cursor: pointer;
          white-space: nowrap;
          transition: opacity .15s;
      }

      .pwa-btn-install:active {
          opacity: .8;
      }

      .pwa-btn-x {
          background: rgba(255, 255, 255, .08);
          color: #8DA8BF;
          border: none;
          border-radius: 8px;
          width: 30px;
          height: 30px;
          font-size: 13px;
          cursor: pointer;
          flex-shrink: 0;
      }

      @keyframes pwaSlideUp {
          from {
              transform: translateY(100%);
          }

          to {
              transform: translateY(0);
          }
      }

      @media (prefers-reduced-motion: reduce) {
          #pwa-install-banner {
              animation: none;
          }
      }

      /* ════════════════════════════════════════════════════════════
   TEMA BLACK — OVERRIDE GLOBAL DE COLORES INLINE (Camino 1)
   Convierte los colores hardcodeados (background/color en style="")
   a sus equivalentes oscuros. ACOTADO al ERP (#vista-erp, #panel-admin)
   para NO afectar el catálogo público (#vista-cliente), que sigue claro.
   Los selectores cubren ambas variantes de espaciado (#fff y # fff).
   ════════════════════════════════════════════════════════════ */

      /* ── FONDOS CLAROS → superficie oscura (card) ── */
      body.tema-black #vista-erp [style*="background:#fff"],
      body.tema-black #vista-erp [style*="background: #fff"],
      body.tema-black #vista-erp [style*="background:#ffffff"],
      body.tema-black #vista-erp [style*="background: #ffffff"],
      body.tema-black #vista-erp [style*="background:white"],
      body.tema-black #vista-erp [style*="background: white"],
      body.tema-black #vista-erp [style*="background:#fafafa"],
      body.tema-black #vista-erp [style*="background: #fafafa"],
      body.tema-black #vista-erp [style*="background:#f5f5f5"],
      body.tema-black #vista-erp [style*="background: #f5f5f5"],
      body.tema-black #panel-admin [style*="background:#fff"],
      body.tema-black #panel-admin [style*="background: #fff"],
      body.tema-black #panel-admin [style*="background:#ffffff"],
      body.tema-black #panel-admin [style*="background: #ffffff"],
      body.tema-black #panel-admin [style*="background:white"],
      body.tema-black #panel-admin [style*="background: white"] {
          background-color: #111117 !important;
          color: #F0F0F5;
      }

      /* ── FONDOS GRIS-CLARO (subtle: f8f9fa, eee, F8FAFC) → superficie sutil ── */
      body.tema-black #vista-erp [style*="background:#f8f9fa"],
      body.tema-black #vista-erp [style*="background: #f8f9fa"],
      body.tema-black #vista-erp [style*="background:#F8FAFC"],
      body.tema-black #vista-erp [style*="background: #F8FAFC"],
      body.tema-black #vista-erp [style*="background:#eee"],
      body.tema-black #vista-erp [style*="background: #eee"],
      body.tema-black #vista-erp [style*="background:#FAFBFC"],
      body.tema-black #vista-erp [style*="background: #FAFBFC"],
      body.tema-black #panel-admin [style*="background:#f8f9fa"],
      body.tema-black #panel-admin [style*="background: #f8f9fa"],
      body.tema-black #panel-admin [style*="background:#eee"],
      body.tema-black #panel-admin [style*="background: #eee"] {
          background-color: #1A1A24 !important;
          color: #F0F0F5;
      }

      /* ── TEXTOS GRIS-OSCURO (333/555/666/000) → texto claro legible ── */
      body.tema-black #vista-erp [style*="color:#333"],
      body.tema-black #vista-erp [style*="color: #333"],
      body.tema-black #vista-erp [style*="color:#555"],
      body.tema-black #vista-erp [style*="color: #555"],
      body.tema-black #vista-erp [style*="color:#666"],
      body.tema-black #vista-erp [style*="color: #666"],
      body.tema-black #vista-erp [style*="color:#222"],
      body.tema-black #vista-erp [style*="color: #222"],
      body.tema-black #vista-erp [style*="color:#111"],
      body.tema-black #vista-erp [style*="color: #111"],
      body.tema-black #vista-erp [style*="color:#000"],
      body.tema-black #vista-erp [style*="color: #000"],
      body.tema-black #panel-admin [style*="color:#333"],
      body.tema-black #panel-admin [style*="color: #333"],
      body.tema-black #panel-admin [style*="color:#555"],
      body.tema-black #panel-admin [style*="color: #555"],
      body.tema-black #panel-admin [style*="color:#666"],
      body.tema-black #panel-admin [style*="color: #666"] {
          color: #E8E8F0 !important;
      }

      /* ── TEXTOS GRIS-MEDIO (888/999/aaa) → texto secundario claro ── */
      body.tema-black #vista-erp [style*="color:#888"],
      body.tema-black #vista-erp [style*="color: #888"],
      body.tema-black #vista-erp [style*="color:#999"],
      body.tema-black #vista-erp [style*="color: #999"],
      body.tema-black #vista-erp [style*="color:#aaa"],
      body.tema-black #vista-erp [style*="color: #aaa"],
      body.tema-black #panel-admin [style*="color:#888"],
      body.tema-black #panel-admin [style*="color: #888"],
      body.tema-black #panel-admin [style*="color:#999"],
      body.tema-black #panel-admin [style*="color: #aaa"] {
          color: #9090A8 !important;
      }

      /* ── BORDES claros inline → borde oscuro sutil ── */
      body.tema-black #vista-erp [style*="border:1px solid #eee"],
      body.tema-black #vista-erp [style*="border: 1px solid #eee"],
      body.tema-black #vista-erp [style*="border:1px solid #E2E8F0"],
      body.tema-black #vista-erp [style*="border: 1px solid #E2E8F0"],
      body.tema-black #vista-erp [style*="border:2px solid #eee"],
      body.tema-black #vista-erp [style*="border: 2px solid #eee"],
      body.tema-black #panel-admin [style*="border:1px solid #eee"],
      body.tema-black #panel-admin [style*="border: 1px solid #eee"] {
          border-color: rgba(255, 255, 255, .10) !important;
      }

      /* ── INPUTS con fondo claro inline → fondo oscuro de campo ── */
      body.tema-black #vista-erp input[style*="background:#f8f9fa"],
      body.tema-black #vista-erp input[style*="background: #f8f9fa"],
      body.tema-black #vista-erp input[style*="#E2E8F0"],
      body.tema-black #panel-admin input[style*="background:#f8f9fa"] {
          background-color: #1A1A24 !important;
          color: #F0F0F5 !important;
          border-color: rgba(255, 255, 255, .12) !important;
      }

      /* ════════════════════════════════════════════════════════════
   TEMA BLACK — SEGUNDO BARRIDO (Lote 2)
   Cubre los colores inline que faltaron: fondos gris-claro adicionales,
   textos gris/azul-oscuro adicionales, y un degradado claro.
   NO toca colores de marca/acento (turquesa, coral, ámbar, etc.) ni
   los azul-oscuro que ya lucen bien en Black (#122640, #0d2137, etc.).
   ════════════════════════════════════════════════════════════ */

      /* ── FONDOS GRIS-CLARO ADICIONALES → superficie sutil oscura ── */
      body.tema-black #vista-erp [style*="background:#f4f6f8"],
      body.tema-black #vista-erp [style*="background: #f4f6f8"],
      body.tema-black #vista-erp [style*="background:#F4F6F8"],
      body.tema-black #vista-erp [style*="background: #F4F6F8"],
      body.tema-black #vista-erp [style*="background:#fdfdfd"],
      body.tema-black #vista-erp [style*="background: #fdfdfd"],
      body.tema-black #vista-erp [style*="background:#f1f3f5"],
      body.tema-black #vista-erp [style*="background: #f1f3f5"],
      body.tema-black #vista-erp [style*="background:#f1f5f9"],
      body.tema-black #vista-erp [style*="background: #f1f5f9"],
      body.tema-black #vista-erp [style*="background:#e2e8f0"],
      body.tema-black #vista-erp [style*="background: #e2e8f0"],
      body.tema-black #vista-erp [style*="background:#E2E8F0"],
      body.tema-black #vista-erp [style*="background: #E2E8F0"],
      body.tema-black #vista-erp [style*="background:#e0e0e0"],
      body.tema-black #vista-erp [style*="background: #e0e0e0"],
      body.tema-black #panel-admin [style*="background:#f4f6f8"],
      body.tema-black #panel-admin [style*="background: #f4f6f8"],
      body.tema-black #panel-admin [style*="background:#F4F6F8"],
      body.tema-black #panel-admin [style*="background: #F4F6F8"] {
          background-color: #1A1A24 !important;
          color: #F0F0F5;
      }

      /* ── FONDOS DE ALERTA CLAROS (rojo/ámbar muy claros) → tinte oscuro sutil ── */
      body.tema-black #vista-erp [style*="background:#fef2f2"],
      body.tema-black #vista-erp [style*="background: #fef2f2"],
      body.tema-black #vista-erp [style*="background:#fff5f5"],
      body.tema-black #vista-erp [style*="background: #fff5f5"],
      body.tema-black #vista-erp [style*="background:#fff3e0"],
      body.tema-black #vista-erp [style*="background: #fff3e0"],
      body.tema-black #panel-admin [style*="background:#fff3e0"],
      body.tema-black #panel-admin [style*="background: #fff3e0"] {
          background-color: #1F1A1A !important;
      }

      /* ── DEGRADADO CLARO turquesa (f0fdf9→e0faf4) → degradado oscuro sutil ── */
      body.tema-black #vista-erp [style*="linear-gradient(135deg,#f0fdf9,#e0faf4)"],
      body.tema-black #panel-admin [style*="linear-gradient(135deg,#f0fdf9,#e0faf4)"] {
          background: linear-gradient(135deg, #14201E, #0F1A18) !important;
      }

      /* ── TEXTOS GRIS/AZUL-OSCURO ADICIONALES → texto claro legible ── */
      body.tema-black #vista-erp [style*="color:#636E72"],
      body.tema-black #vista-erp [style*="color: #636E72"],
      body.tema-black #vista-erp [style*="color:#475569"],
      body.tema-black #vista-erp [style*="color: #475569"],
      body.tema-black #vista-erp [style*="color:#2D3436"],
      body.tema-black #vista-erp [style*="color: #2D3436"],
      body.tema-black #vista-erp [style*="color:#4A6B80"],
      body.tema-black #vista-erp [style*="color: #4A6B80"],
      body.tema-black #vista-erp [style*="color:#05111F"],
      body.tema-black #vista-erp [style*="color: #05111F"],
      body.tema-black #vista-erp [style*="color:#0277bd"],
      body.tema-black #vista-erp [style*="color: #0277bd"],
      body.tema-black #panel-admin [style*="color:#636E72"],
      body.tema-black #panel-admin [style*="color: #636E72"],
      body.tema-black #panel-admin [style*="color:#475569"],
      body.tema-black #panel-admin [style*="color: #475569"],
      body.tema-black #panel-admin [style*="color:#2D3436"],
      body.tema-black #panel-admin [style*="color: #2D3436"] {
          color: #D8D8E5 !important;
      }

      /* ── TEXTOS gris-medio adicionales (slate 475569 ya cubierto arriba; aquí #94a3b8 etc) ── */
      body.tema-black #vista-erp [style*="color:#94a3b8"],
      body.tema-black #vista-erp [style*="color: #94a3b8"],
      body.tema-black #vista-erp [style*="color:#64748b"],
      body.tema-black #vista-erp [style*="color: #64748b"] {
          color: #9090A8 !important;
      }

      /* ════════════════════════════════════════════════════════════
   TEMA BLACK — CORRECCIONES PUNTUALES (Lote 3)
   Botones de acción que perdieron su color (usaban var(--texto-oscuro)
   o var(--dark-blue), que se aclaran en Black) → forzar turquesa.
   Apuntados por onclick para máxima precisión, acotados al ERP.
   ════════════════════════════════════════════════════════════ */

      /* ── BOTONES DE ACCIÓN → fondo turquesa + letra blanca ── */
      body.tema-black #vista-erp button[onclick*="cargarCierreCaja(null, true)"],
      body.tema-black #vista-erp button[onclick*="buscarClienteCRM(false)"],
      body.tema-black #vista-erp button[onclick*="abrirAsistenteCompras"],
      body.tema-black #vista-erp button[onclick*="ejecutarRegistroProveedor"] {
          background: var(--turquesa) !important;
          color: #fff !important;
          border: none !important;
      }

      /* El botón AL TICKET del mostrador categoría se genera dinámicamente.
   En Black debe ser turquesa cuando NO está deshabilitado. */
      body.tema-black #vista-erp #mst-cat-lista button:not([disabled]) {
          background: var(--turquesa) !important;
          color: #fff !important;
          border: none !important;
      }

      /* ── BUSCADORES DEL CATÁLOGO (cajas con fondo claro f1f3f5/f8f9fa) ──
   El contenedor del buscador y su input → superficie oscura, texto claro. */
      body.tema-black #vista-erp [style*="background:#f1f3f5"],
      body.tema-black #vista-erp [style*="background: #f1f3f5"] {
          background-color: #1A1A24 !important;
      }

      body.tema-black #vista-erp #busqueda-familia,
      body.tema-black #vista-erp #mst-cat-buscador {
          background-color: #111117 !important;
          color: #F0F0F5 !important;
      }

      /* ── TÍTULOS h3 de BÓVEDA (Registrar Crédito, Vincular Deuda) →
   mismo índigo del Simulador (#4F46E5, que en Black se ve bien). ── */
      body.tema-black #vista-erp [style*="color: var(--texto-oscuro)"] {
          color: #F0F0F5 !important;
      }

      /* ── BLOQUE "Terminología del Negocio" (fondo celeste #e8f4f8) →
   igualar al resto de bloques oscuros + texto claro. ── */
      body.tema-black #vista-erp [style*="background:#e8f4f8"],
      body.tema-black #vista-erp [style*="background: #e8f4f8"] {
          background-color: #1A1A24 !important;
          border-color: rgba(255, 255, 255, .10) !important;
      }

      body.tema-black #vista-erp [style*="background:#e8f4f8"] h3,
      body.tema-black #vista-erp [style*="background: #e8f4f8"] h3,
      body.tema-black #vista-erp [style*="background:#e8f4f8"] label,
      body.tema-black #vista-erp [style*="background: #e8f4f8"] label {
          color: #F0F0F5 !important;
      }

      /* ════════════════════════════════════════════════════════════
   TEMA BLACK — Botón AL TICKET (Libre) + filtros del Catálogo
   Solo aplican en modo Black; en tema claro quedan como estaban.
   ════════════════════════════════════════════════════════════ */

      /* Botón "➕ AL TICKET" de la pestaña LIBRE (usa var(--texto-oscuro) que se aclara en Black) */
      body.tema-black #vista-erp button[onclick*="agregarAlTicket('express')"] {
          background: var(--turquesa) !important;
          color: #fff !important;
          border: none !important;
      }

      /* Catálogo: buscador + 2 desplegables (filtro-texto, filtro-categoria, filtro-talla) */
      body.tema-black #filtro-texto,
      body.tema-black #filtro-categoria,
      body.tema-black #filtro-talla {
          background: var(--turquesa) !important;
          color: #fff !important;
          border-color: var(--turquesa-dark) !important;
      }

      body.tema-black #filtro-texto::placeholder {
          color: rgba(255, 255, 255, .85) !important;
      }

      body.tema-black #filtro-categoria option,
      body.tema-black #filtro-talla option {
          color: var(--texto-oscuro);
          background: #fff;
      }

      /* ════════════════════════════════════════════════════════════
   TEMA BLACK — Botón AL TICKET (Libre) + filtros del Catálogo
   Aplican SOLO cuando el admin está en modo Black (body.tema-black).
   El botón vive en el ERP; los filtros del catálogo viven en
   #vista-cliente pero el body.tema-black los alcanza igual cuando
   el admin previsualiza su tienda sin salir del modo oscuro.
   En tema claro, todo queda como estaba.
   ════════════════════════════════════════════════════════════ */

      /* Botón "➕ AL TICKET" de la pestaña LIBRE (usa var(--texto-oscuro), que se aclara en Black) */
      body.tema-black #vista-erp button[onclick*="agregarAlTicket('express')"] {
          background: var(--turquesa) !important;
          color: #fff !important;
          border: none !important;
      }

      /* Catálogo (previsualización del admin en Black): buscador + 2 desplegables */
      body.tema-black #filtro-texto,
      body.tema-black #filtro-categoria,
      body.tema-black #filtro-talla {
          background: var(--turquesa) !important;
          color: #fff !important;
          border-color: var(--turquesa-dark) !important;
      }

      body.tema-black #filtro-texto::placeholder {
          color: rgba(255, 255, 255, .85) !important;
      }

      body.tema-black #filtro-categoria option,
      body.tema-black #filtro-talla option {
          color: var(--texto-oscuro);
          background: #fff;
      }


      /* ══════════════════════════════════════════════════════
         🌸 TEMA ORQUÍDEA — Capa premium PRO (v1.0)
         Ciruela profunda + Orquídea #C77BE8 + Oro rosa #E8ADAA
         ─────────────────────────────────────────────────────
         ARQUITECTURA DE DOBLE CLASE:
         El tema Orquídea activa <body class="tema-black tema-orquidea">.
         · tema-black aporta TODA la infraestructura oscura ya probada.
         · Esta capa re-tinta encima (ciruela/orquídea/oro rosa).
         · Lo que esta capa no cubra, cae al Black (oscuro), nunca al claro.
         ⚠️ REGLA DE ORO: este bloque debe vivir SIEMPRE DESPUÉS del
         bloque del Tema Black en el archivo (la cascada depende de eso).
      ══════════════════════════════════════════════════════ */

      body.tema-orquidea {
          /* — Fondos — */
          --bg-app: #16101E;
          --bg-card: #1E1528;
          --bg-subtle: #281C35;
          --bg-hover: #2E2140;
          --bg: #16101E;

          /* — Texto — */
          --texto-oscuro: #F5F0FA;
          --texto-medio: #B8A8CC;
          --texto-suave: #7A6B92;
          --dark-blue: #F5F0FA;

          /* — Bordes — */
          --borde: rgba(199, 125, 232, .14);
          --borde-focus: #C77BE8;

          /* — Estados (más vibrantes en oscuro) — */
          --success-light: rgba(16, 185, 129, .12);
          --warning-light: rgba(245, 158, 11, .12);
          --danger-light: rgba(239, 68, 68, .12);
          --info-light: rgba(59, 130, 246, .12);

          /* — Turquesa ligeramente más brillante en oscuro — */
          --turquesa: #C77BE8;
          --turquesa-dark: #A95FD0;
          --turquesa-light: rgba(199, 123, 232, .12);

          /* — Coral igual — */
          --coral: #E8ADAA;
          --coral-dark: #D18A80;
          --coral-light: rgba(232, 173, 170, .12);

          /* — Sombras más pronunciadas en oscuro — */
          --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
          --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
          --shadow-md: 0 4px 6px rgba(0, 0, 0, .4);
          --shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);
      }

      body.tema-orquidea,
      body.tema-orquidea #vista-erp,
      body.tema-orquidea #panel-admin {
          background: #16101E !important;
          color: #F5F0FA;
      }

      body.tema-orquidea .modal-content {
          background: #1E1528 !important;
          border-color: rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .input-admin {
          background: #281C35 !important;
          border-color: rgba(199, 125, 232, .18) !important;
          color: #F5F0FA !important;
      }

      body.tema-orquidea #panel-admin,
      body.tema-orquidea .vista-seccion,
      body.tema-orquidea .modulo-admin,
      body.tema-orquidea .peigo-contenedor {
          background: #16101E !important;
      }

      body.tema-orquidea .offcanvas-menu {
          background: #1E1528 !important;
          border-right: 1px solid rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .offcanvas-menu p,
      body.tema-orquidea .offcanvas-menu span,
      body.tema-orquidea .offcanvas-menu div {
          color: #B8A8CC;
      }

      body.tema-orquidea .modal-pass,
      body.tema-orquidea #modalPago .modal-content,
      body.tema-orquidea #modalFactura .modal-content {
          background: #1E1528 !important;
          border: 1px solid rgba(199, 125, 232, .16) !important;
          color: #F5F0FA !important;
      }

      body.tema-orquidea .modal-pass h2,
      body.tema-orquidea .modal-pass h3,
      body.tema-orquidea .modal-pass label,
      body.tema-orquidea .modal-pass p {
          color: #F5F0FA !important;
      }

      body.tema-orquidea .nav-app-container {
          background: #1E1528 !important;
          border-bottom: 1px solid rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .btn-nav-app {
          background: #1E1528 !important;
          color: #7A6B92 !important;
          border: none !important;
      }

      body.tema-orquidea .btn-nav-app.activo {
          background: rgba(199, 123, 232, .12) !important;
          color: #C77BE8 !important;
          border-bottom: 2px solid #C77BE8 !important;
      }

      body.tema-orquidea .tabla-stock th {
          background: #281C35 !important;
          color: #B8A8CC !important;
          border-bottom: 1px solid rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .tabla-stock td {
          border-bottom: 1px solid rgba(199, 125, 232, .10) !important;
          color: #F5F0FA !important;
      }

      body.tema-orquidea .tabla-stock tr:hover td {
          background: #281C35 !important;
      }

      body.tema-orquidea .input-tabla {
          background: #281C35 !important;
          border: 1px solid rgba(199, 125, 232, .16) !important;
          color: #F5F0FA !important;
      }

      body.tema-orquidea .item-card-mini {
          background: #1E1528 !important;
          border: 0.5px solid rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .spec-data {
          color: #F5F0FA !important;
      }

      body.tema-orquidea .text-premium-modelo {
          color: #B8A8CC !important;
      }

      body.tema-orquidea .carrito-header,
      body.tema-orquidea .carrito-footer {
          background: #1E1528 !important;
          border-color: rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .item-carrito-cli {
          background: #281C35 !important;
          border-bottom: 1px solid rgba(199, 125, 232, .10) !important;
      }

      body.tema-orquidea .btn-volver-slide,
      body.tema-orquidea .titulo-header-slide {
          color: #F5F0FA !important;
          background: #1E1528 !important;
      }

      body.tema-orquidea .slide-modelo {
          background: #281C35 !important;
          border-color: rgba(199, 125, 232, .14) !important;
          color: #F5F0FA !important;
      }

      body.tema-orquidea .fab-central-pro {
          background: linear-gradient(135deg, #C77BE8, #A95FD0) !important;
          box-shadow: 0 4px 20px rgba(199, 123, 232, .4) !important;
      }

      body.tema-orquidea .config-section {
          background: #1E1528 !important;
          border-color: rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .config-section h3,
      body.tema-orquidea .config-section label {
          color: #B8A8CC !important;
      }

      body.tema-orquidea #pantalla-inicio {
          background: #16101E !important;
      }

      body.tema-orquidea .pilas-btn-cliente {
          background: rgba(199, 123, 232, .12) !important;
          border: 1.5px solid rgba(199, 123, 232, .3) !important;
          color: #C77BE8 !important;
      }

      body.tema-orquidea .pilas-btn-equipo {
          background: rgba(232, 173, 170, .08) !important;
          border: 1.5px solid rgba(232, 173, 170, .25) !important;
          color: #E8ADAA !important;
      }

      body.tema-orquidea .fila-descuento {
          background: #281C35 !important;
          border: 1px solid rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .fila-descuento span {
          color: #F5F0FA !important;
      }

      body.tema-orquidea .header-marca {
          background: #1A0F26 !important;
      }

      body.tema-orquidea .btn-oferta-especial {
          background: linear-gradient(135deg, #C77BE8, #A95FD0) !important;
          color: #16101E !important;
      }

      body.tema-orquidea #widget-gamificacion-inicio {
          background: #1E1528 !important;
          border-color: rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea .badge-stock-zero {
          background: rgba(239, 68, 68, .15) !important;
          color: #E8ADAA !important;
          border-color: rgba(239, 68, 68, .25) !important;
      }

      /* ── Splash screen (Encendido v4): ciruela + orquídea + oro rosa ── */
      body.tema-orquidea #splash-screen {
          --splash-acento: #C77BE8;
          --splash-acento-dark: #A95FD0;
          --splash-secundario: #E8ADAA;
          --splash-glow: rgba(199, 123, 232, .35);
          --splash-bg-a: #120A1A;
          --splash-bg-b: #1E1528;
          --splash-bg-c: #16101E;
          --splash-texto: rgba(245, 240, 250, .55);
      }

      body.tema-orquidea .btn-nav-info {
          background: #281C35 !important;
          border-color: rgba(199, 125, 232, .16) !important;
          color: #B8A8CC !important;
      }

      body.tema-orquidea .btn-nav-info.activo {
          background: rgba(199, 123, 232, .12) !important;
          color: #C77BE8 !important;
      }

      body.tema-orquidea .mini-foto-container {
          background: #281C35 !important;
          border-color: rgba(199, 125, 232, .14) !important;
      }

      body.tema-orquidea h1,
      body.tema-orquidea h2,
      body.tema-orquidea h3,
      body.tema-orquidea h4,
      body.tema-orquidea h5,
      body.tema-orquidea h6 {
          color: #F5F0FA;
      }

      body.tema-orquidea p {
          color: #B8A8CC;
      }

      body.tema-orquidea #vista-erp [style*="background:#fff"],
      body.tema-orquidea #vista-erp [style*="background: #fff"],
      body.tema-orquidea #vista-erp [style*="background:#ffffff"],
      body.tema-orquidea #vista-erp [style*="background: #ffffff"],
      body.tema-orquidea #vista-erp [style*="background:white"],
      body.tema-orquidea #vista-erp [style*="background: white"],
      body.tema-orquidea #vista-erp [style*="background:#fafafa"],
      body.tema-orquidea #vista-erp [style*="background: #fafafa"],
      body.tema-orquidea #vista-erp [style*="background:#f5f5f5"],
      body.tema-orquidea #vista-erp [style*="background: #f5f5f5"],
      body.tema-orquidea #panel-admin [style*="background:#fff"],
      body.tema-orquidea #panel-admin [style*="background: #fff"],
      body.tema-orquidea #panel-admin [style*="background:#ffffff"],
      body.tema-orquidea #panel-admin [style*="background: #ffffff"],
      body.tema-orquidea #panel-admin [style*="background:white"],
      body.tema-orquidea #panel-admin [style*="background: white"] {
          background-color: #1E1528 !important;
          color: #F5F0FA;
      }

      body.tema-orquidea #vista-erp [style*="background:#f8f9fa"],
      body.tema-orquidea #vista-erp [style*="background: #f8f9fa"],
      body.tema-orquidea #vista-erp [style*="background:#F8FAFC"],
      body.tema-orquidea #vista-erp [style*="background: #F8FAFC"],
      body.tema-orquidea #vista-erp [style*="background:#eee"],
      body.tema-orquidea #vista-erp [style*="background: #eee"],
      body.tema-orquidea #vista-erp [style*="background:#FAFBFC"],
      body.tema-orquidea #vista-erp [style*="background: #FAFBFC"],
      body.tema-orquidea #panel-admin [style*="background:#f8f9fa"],
      body.tema-orquidea #panel-admin [style*="background: #f8f9fa"],
      body.tema-orquidea #panel-admin [style*="background:#eee"],
      body.tema-orquidea #panel-admin [style*="background: #eee"] {
          background-color: #281C35 !important;
          color: #F5F0FA;
      }

      body.tema-orquidea #vista-erp [style*="color:#333"],
      body.tema-orquidea #vista-erp [style*="color: #333"],
      body.tema-orquidea #vista-erp [style*="color:#555"],
      body.tema-orquidea #vista-erp [style*="color: #555"],
      body.tema-orquidea #vista-erp [style*="color:#666"],
      body.tema-orquidea #vista-erp [style*="color: #666"],
      body.tema-orquidea #vista-erp [style*="color:#222"],
      body.tema-orquidea #vista-erp [style*="color: #222"],
      body.tema-orquidea #vista-erp [style*="color:#111"],
      body.tema-orquidea #vista-erp [style*="color: #111"],
      body.tema-orquidea #vista-erp [style*="color:#000"],
      body.tema-orquidea #vista-erp [style*="color: #000"],
      body.tema-orquidea #panel-admin [style*="color:#333"],
      body.tema-orquidea #panel-admin [style*="color: #333"],
      body.tema-orquidea #panel-admin [style*="color:#555"],
      body.tema-orquidea #panel-admin [style*="color: #555"],
      body.tema-orquidea #panel-admin [style*="color:#666"],
      body.tema-orquidea #panel-admin [style*="color: #666"] {
          color: #EFE8F5 !important;
      }

      body.tema-orquidea #vista-erp [style*="color:#888"],
      body.tema-orquidea #vista-erp [style*="color: #888"],
      body.tema-orquidea #vista-erp [style*="color:#999"],
      body.tema-orquidea #vista-erp [style*="color: #999"],
      body.tema-orquidea #vista-erp [style*="color:#aaa"],
      body.tema-orquidea #vista-erp [style*="color: #aaa"],
      body.tema-orquidea #panel-admin [style*="color:#888"],
      body.tema-orquidea #panel-admin [style*="color: #888"],
      body.tema-orquidea #panel-admin [style*="color:#999"],
      body.tema-orquidea #panel-admin [style*="color: #aaa"] {
          color: #A899BD !important;
      }

      body.tema-orquidea #vista-erp [style*="border:1px solid #eee"],
      body.tema-orquidea #vista-erp [style*="border: 1px solid #eee"],
      body.tema-orquidea #vista-erp [style*="border:1px solid #E2E8F0"],
      body.tema-orquidea #vista-erp [style*="border: 1px solid #E2E8F0"],
      body.tema-orquidea #vista-erp [style*="border:2px solid #eee"],
      body.tema-orquidea #vista-erp [style*="border: 2px solid #eee"],
      body.tema-orquidea #panel-admin [style*="border:1px solid #eee"],
      body.tema-orquidea #panel-admin [style*="border: 1px solid #eee"] {
          border-color: rgba(199, 125, 232, .16) !important;
      }

      body.tema-orquidea #vista-erp input[style*="background:#f8f9fa"],
      body.tema-orquidea #vista-erp input[style*="background: #f8f9fa"],
      body.tema-orquidea #vista-erp input[style*="#E2E8F0"],
      body.tema-orquidea #panel-admin input[style*="background:#f8f9fa"] {
          background-color: #281C35 !important;
          color: #F5F0FA !important;
          border-color: rgba(199, 125, 232, .18) !important;
      }

      body.tema-orquidea #vista-erp [style*="background:#f4f6f8"],
      body.tema-orquidea #vista-erp [style*="background: #f4f6f8"],
      body.tema-orquidea #vista-erp [style*="background:#F4F6F8"],
      body.tema-orquidea #vista-erp [style*="background: #F4F6F8"],
      body.tema-orquidea #vista-erp [style*="background:#fdfdfd"],
      body.tema-orquidea #vista-erp [style*="background: #fdfdfd"],
      body.tema-orquidea #vista-erp [style*="background:#f1f3f5"],
      body.tema-orquidea #vista-erp [style*="background: #f1f3f5"],
      body.tema-orquidea #vista-erp [style*="background:#f1f5f9"],
      body.tema-orquidea #vista-erp [style*="background: #f1f5f9"],
      body.tema-orquidea #vista-erp [style*="background:#e2e8f0"],
      body.tema-orquidea #vista-erp [style*="background: #e2e8f0"],
      body.tema-orquidea #vista-erp [style*="background:#E2E8F0"],
      body.tema-orquidea #vista-erp [style*="background: #E2E8F0"],
      body.tema-orquidea #vista-erp [style*="background:#e0e0e0"],
      body.tema-orquidea #vista-erp [style*="background: #e0e0e0"],
      body.tema-orquidea #panel-admin [style*="background:#f4f6f8"],
      body.tema-orquidea #panel-admin [style*="background: #f4f6f8"],
      body.tema-orquidea #panel-admin [style*="background:#F4F6F8"],
      body.tema-orquidea #panel-admin [style*="background: #F4F6F8"] {
          background-color: #281C35 !important;
          color: #F5F0FA;
      }

      body.tema-orquidea #vista-erp [style*="color:#636E72"],
      body.tema-orquidea #vista-erp [style*="color: #636E72"],
      body.tema-orquidea #vista-erp [style*="color:#475569"],
      body.tema-orquidea #vista-erp [style*="color: #475569"],
      body.tema-orquidea #vista-erp [style*="color:#2D3436"],
      body.tema-orquidea #vista-erp [style*="color: #2D3436"],
      body.tema-orquidea #vista-erp [style*="color:#4A6B80"],
      body.tema-orquidea #vista-erp [style*="color: #4A6B80"],
      body.tema-orquidea #vista-erp [style*="color:#05111F"],
      body.tema-orquidea #vista-erp [style*="color: #05111F"],
      body.tema-orquidea #vista-erp [style*="color:#0277bd"],
      body.tema-orquidea #vista-erp [style*="color: #0277bd"],
      body.tema-orquidea #panel-admin [style*="color:#636E72"],
      body.tema-orquidea #panel-admin [style*="color: #636E72"],
      body.tema-orquidea #panel-admin [style*="color:#475569"],
      body.tema-orquidea #panel-admin [style*="color: #475569"],
      body.tema-orquidea #panel-admin [style*="color:#2D3436"],
      body.tema-orquidea #panel-admin [style*="color: #2D3436"] {
          color: #E0D5E8 !important;
      }

      body.tema-orquidea #vista-erp [style*="color:#94a3b8"],
      body.tema-orquidea #vista-erp [style*="color: #94a3b8"],
      body.tema-orquidea #vista-erp [style*="color:#64748b"],
      body.tema-orquidea #vista-erp [style*="color: #64748b"] {
          color: #A899BD !important;
      }

      body.tema-orquidea #vista-erp button[onclick*="cargarCierreCaja(null, true)"],
      body.tema-orquidea #vista-erp button[onclick*="buscarClienteCRM(false)"],
      body.tema-orquidea #vista-erp button[onclick*="abrirAsistenteCompras"],
      body.tema-orquidea #vista-erp button[onclick*="ejecutarRegistroProveedor"] {
          background: var(--turquesa) !important;
          color: #2A1838 !important;
          border: none !important;
      }

      body.tema-orquidea #vista-erp #mst-cat-lista button:not([disabled]) {
          background: var(--turquesa) !important;
          color: #2A1838 !important;
          border: none !important;
      }

      body.tema-orquidea #vista-erp [style*="background:#f1f3f5"],
      body.tema-orquidea #vista-erp [style*="background: #f1f3f5"] {
          background-color: #281C35 !important;
      }

      body.tema-orquidea #vista-erp #busqueda-familia,
      body.tema-orquidea #vista-erp #mst-cat-buscador {
          background-color: #1E1528 !important;
          color: #F5F0FA !important;
      }

      body.tema-orquidea #vista-erp [style*="color: var(--texto-oscuro)"] {
          color: #F5F0FA !important;
      }

      body.tema-orquidea #vista-erp [style*="background:#e8f4f8"],
      body.tema-orquidea #vista-erp [style*="background: #e8f4f8"] {
          background-color: #281C35 !important;
          border-color: rgba(199, 125, 232, .16) !important;
      }

      body.tema-orquidea #vista-erp [style*="background:#e8f4f8"] h3,
      body.tema-orquidea #vista-erp [style*="background: #e8f4f8"] h3,
      body.tema-orquidea #vista-erp [style*="background:#e8f4f8"] label,
      body.tema-orquidea #vista-erp [style*="background: #e8f4f8"] label {
          color: #F5F0FA !important;
      }

      body.tema-orquidea #vista-erp button[onclick*="agregarAlTicket('express')"] {
          background: var(--turquesa) !important;
          color: #2A1838 !important;
          border: none !important;
      }

      body.tema-orquidea #filtro-texto,
      body.tema-orquidea #filtro-categoria,
      body.tema-orquidea #filtro-talla {
          background: var(--turquesa) !important;
          color: #2A1838 !important;
          border-color: var(--turquesa-dark) !important;
      }

      body.tema-orquidea #filtro-texto::placeholder {
          color: rgba(42, 24, 56, .75) !important;
      }

      /* ══════════════════════════════════════════════════════
         🎨 SELECTOR DE TEMA (3 opciones) — Configuración General
         Componente nuevo: botones .tema-opt dentro de #selector-tema
      ══════════════════════════════════════════════════════ */
      .tema-opt {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 9px 14px;
          border-radius: 12px;
          border: 1.5px solid #ddd;
          background: #fff;
          cursor: pointer;
          font-family: inherit;
          font-size: 12px;
          font-weight: 700;
          color: #555;
          transition: all .2s ease;
      }

      .tema-opt:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: var(--shadow-sm);
      }

      .tema-opt.activo {
          border-color: var(--turquesa);
          background: var(--turquesa-light);
          color: var(--texto-oscuro);
          box-shadow: 0 0 0 3px rgba(0, 209, 178, .12);
      }

      .tema-opt:disabled {
          opacity: .6;
          cursor: not-allowed;
      }

      .tema-opt-swatch {
          width: 22px;
          height: 22px;
          border-radius: 7px;
          border: 1px solid rgba(0, 0, 0, .12);
          flex-shrink: 0;
      }

      .tema-pro-chip {
          font-size: 9px;
          font-weight: 800;
          color: var(--turquesa);
          background: var(--turquesa-light);
          padding: 1px 6px;
          border-radius: 999px;
          vertical-align: middle;
          margin-left: 4px;
      }

      /* Adaptación del selector dentro de los temas oscuros */
      body.tema-black .tema-opt {
          background: #1A1A24;
          border-color: rgba(255, 255, 255, .12);
          color: #A0A0B5;
      }

      body.tema-black .tema-opt.activo {
          border-color: #00D1B2;
          background: rgba(0, 209, 178, .12);
          color: #F0F0F5;
          box-shadow: 0 0 0 3px rgba(0, 209, 178, .15);
      }

      body.tema-orquidea .tema-opt {
          background: #281C35;
          border-color: rgba(199, 125, 232, .18);
          color: #B8A8CC;
      }

      body.tema-orquidea .tema-opt.activo {
          border-color: #C77BE8;
          background: rgba(199, 123, 232, .12);
          color: #F5F0FA;
          box-shadow: 0 0 0 3px rgba(199, 123, 232, .15);
      }

      body.tema-orquidea .tema-pro-chip {
          color: #C77BE8;
          background: rgba(199, 123, 232, .12);
      }

      /* ══════════════════════════════════════════════════════
         🧠 BRIEF/BRAIN v3 — Jugada 5
         1) Entrada coreografiada de la pantalla de inicio
         2) Feedback táctil del tab bar
         3) Armonización Orquídea del Brain (acentos en duro
            que la capa de doble clase no cubre por no ser
            reglas del Black). DEBE vivir al FINAL del archivo.
      ══════════════════════════════════════════════════════ */

      /* ── 1. Entrada coreografiada (fade-up escalonado) ── */
      @keyframes inicio-bloque-in {
          0% {
              opacity: 0;
              transform: translateY(10px);
          }

          100% {
              opacity: 1;
              transform: translateY(0);
          }
      }

      #bloque-carrusel-b2b,
      #bloque-briefing,
      #bloque-pulso,
      #widget-gamificacion-inicio,
      #dashboard-financiero-wrap {
          animation: inicio-bloque-in .42s cubic-bezier(.22, 1, .36, 1) both;
      }

      #bloque-pulso {
          animation-delay: .06s;
      }

      #widget-gamificacion-inicio {
          animation-delay: .12s;
      }

      #dashboard-financiero-wrap {
          animation-delay: .18s;
      }

      /* ── 2. Feedback táctil del tab bar (los colores los maneja JS) ── */
      #tab-bar-dashboard button {
          transition: transform .12s ease, background .2s, color .2s;
      }

      #tab-bar-dashboard button:active {
          transform: scale(.95);
      }

      /* ── 3. Brain en Tema Orquídea: ciruela + orquídea + oro rosa ── */

      /* Tarjeta: del azul-marino al lienzo ciruela del tema */
      body.tema-orquidea .brain-card {
          background: linear-gradient(135deg, #120A1A 0%, #1E1528 40%, #16101E 70%, #120A1A 100%);
          border: 1px solid rgba(199, 123, 232, .22);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(199, 123, 232, .10);
      }

      body.tema-orquidea .brain-card.brief-alerta {
          border-color: rgba(232, 173, 170, .5);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(232, 173, 170, .14), 0 0 0 1px rgba(232, 173, 170, .2);
      }

      body.tema-orquidea .brain-card.brief-celebra {
          border-color: rgba(199, 123, 232, .55);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(199, 123, 232, .15), 0 0 24px rgba(199, 123, 232, .22);
      }

      /* Avatar ⚡ y sus anillos */
      body.tema-orquidea .brain-avatar {
          background: linear-gradient(135deg, #C77BE8, #E8ADAA);
      }

      body.tema-orquidea .brain-avatar::before,
      body.tema-orquidea .brain-avatar::after {
          border-color: rgba(199, 123, 232, .45);
          border-top-color: #C77BE8;
          border-right-color: rgba(199, 123, 232, .3);
      }

      /* Etiquetas y tipografía de acento */
      body.tema-orquidea .brain-label {
          color: #C77BE8;
      }

      body.tema-orquidea .brain-sublabel {
          color: #B8A8CC;
      }

      body.tema-orquidea .brain-chat-titulo {
          color: rgba(199, 123, 232, .75);
      }

      /* Botón recargar análisis */
      body.tema-orquidea .brain-btn-reload:hover {
          background: rgba(199, 123, 232, .1);
          border-color: rgba(199, 123, 232, .3);
          color: #C77BE8;
      }

      /* Badge de contexto */
      body.tema-orquidea .brain-contexto-badge {
          background: rgba(199, 123, 232, .07);
          border-color: rgba(199, 123, 232, .15);
      }

      /* Separador luminoso */

      /* Chips de preguntas sugeridas */
      body.tema-orquidea .brain-chip {
          background: rgba(199, 123, 232, .07);
          border: 1px solid rgba(199, 123, 232, .18);
          color: #C77BE8;
      }

      body.tema-orquidea .brain-chip:hover {
          background: rgba(199, 123, 232, .15);
          border-color: rgba(199, 123, 232, .4);
      }

      /* Botón enviar pregunta */
      body.tema-orquidea .brain-btn-enviar {
          background: linear-gradient(135deg, #C77BE8, #A95FD0) !important;
          color: #2A1838 !important;
      }

      /* Elementos con estilo inline en el HTML (requieren !important) */
      body.tema-orquidea #briefing-cursor {
          background: #C77BE8 !important;
      }

      body.tema-orquidea #briefing-progress {
          background: linear-gradient(90deg, #C77BE8, #E8ADAA) !important;
      }

      /* ── Accesibilidad ── */
      @media (prefers-reduced-motion: reduce) {

          #bloque-carrusel-b2b,
          #bloque-briefing,
          #bloque-pulso,
          #widget-gamificacion-inicio,
          #dashboard-financiero-wrap {
              animation: none !important;
          }
      }

      /* ══════════════════════════════════════════════════════
         🤖 PILI — Jugada 6: el cuerpo del Brain
         Robot SVG vivo + voz + órbita de palabras clave.
         Tematizable: ojos/ondas = var(--turquesa), antena =
         var(--coral) → Orquídea lo re-tinta automáticamente.
      ══════════════════════════════════════════════════════ */

      .brain-robot-wrap {
          position: relative;
          width: 84px;
          height: 84px;
          flex-shrink: 0;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
          outline: none;
      }

      .brain-robot-wrap:focus-visible {
          border-radius: 20px;
          box-shadow: 0 0 0 3px var(--turquesa-light), 0 0 0 1.5px var(--turquesa);
      }

      .pili {
          width: 100%;
          height: 100%;
          overflow: visible;
          filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
          transition: filter .3s ease, transform .25s cubic-bezier(.22, 1.4, .36, 1);
      }

      /* ── Piezas ── */
      .pili-cabeza,
      .pili-cuerpo,
      .pili-oreja {
          fill: #F5F7FB;
          stroke: rgba(255, 255, 255, .25);
          stroke-width: 1;
      }

      .pili-visor {
          fill: #0E1626;
      }

      .pili-pupila {
          fill: var(--turquesa);
          filter: drop-shadow(0 0 4px var(--turquesa));
          transform-box: fill-box;
          transform-origin: center;
          animation: pili-parpadeo 4.6s ease-in-out infinite;
      }

      .pili-pupila-mov {
          animation: pili-mirada 7s ease-in-out infinite;
      }

      .pili-antena {
          stroke: #F5F7FB;
          stroke-width: 3;
          stroke-linecap: round;
      }

      .pili-antena-tip {
          fill: var(--coral);
          animation: pili-tip-pulso 2.6s ease-in-out infinite;
      }

      .pili-onda {
          fill: var(--turquesa);
          opacity: 0;
          transform-box: fill-box;
          transform-origin: center;
      }

      /* ── Vida en reposo ── */
      .pili-flotante {
          animation: pili-flota 3.4s ease-in-out infinite;
          transform-box: fill-box;
          transform-origin: center;
      }

      @keyframes pili-flota {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-3px);
          }
      }

      @keyframes pili-parpadeo {

          0%,
          91%,
          100% {
              transform: scaleY(1);
          }

          93%,
          95% {
              transform: scaleY(.08);
          }
      }

      @keyframes pili-mirada {

          0%,
          34%,
          100% {
              transform: translateX(0);
          }

          38%,
          48% {
              transform: translateX(2.2px);
          }

          62%,
          72% {
              transform: translateX(-2px);
          }
      }

      @keyframes pili-tip-pulso {

          0%,
          100% {
              opacity: .65;
          }

          50% {
              opacity: 1;
              filter: drop-shadow(0 0 5px var(--coral));
          }
      }

      /* ── Pecho = #brain-avatar (brain.js intacto: emoji + .pensando) ── */
      .brain-robot-wrap .brain-avatar {
          position: absolute;
          left: 50%;
          bottom: 4px;
          transform: translateX(-50%);
          width: 22px;
          height: 22px;
          font-size: 11px;
          z-index: 2;
          box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
      }

      /* ── Hablando ── */
      .brain-robot-wrap.hablando .pili {
          filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)) drop-shadow(0 0 18px var(--turquesa-light));
      }

      .brain-robot-wrap.hablando .pili-flotante {
          animation: pili-asiente .9s ease-in-out infinite;
      }

      @keyframes pili-asiente {

          0%,
          100% {
              transform: translateY(0) rotate(0deg);
          }

          30% {
              transform: translateY(-2px) rotate(1.4deg);
          }

          70% {
              transform: translateY(-1px) rotate(-1.2deg);
          }
      }

      .brain-robot-wrap.hablando .pili-pupila {
          animation: none;
          transform: scaleY(.42);
      }

      .brain-robot-wrap.hablando .pili-onda {
          opacity: 1;
          animation: pili-voz .5s ease-in-out infinite;
      }

      .brain-robot-wrap.hablando .o2 {
          animation-delay: .12s;
      }

      .brain-robot-wrap.hablando .o3 {
          animation-delay: .24s;
      }

      .brain-robot-wrap.hablando .o4 {
          animation-delay: .36s;
      }

      @keyframes pili-voz {

          0%,
          100% {
              transform: scaleY(1);
          }

          50% {
              transform: scaleY(2.6);
          }
      }

      /* Toque: squash & stretch */
      .brain-robot-wrap.pili-tap .pili {
          transform: scale(.92, 1.06);
      }

      /* La tarjeta cede protagonismo mientras Pili habla */
      .brain-card.pili-hablando .brain-categoria-wrap {
          opacity: .22;
          transition: opacity .3s ease;
      }

      .brain-card .brain-categoria-wrap {
          transition: opacity .3s ease;
      }

      /* ── Órbita de palabras clave ── */
      .robot-orbita {
          position: absolute;
          inset: -10px;
          pointer-events: none;
          z-index: 3;
      }

      .robot-chip {
          position: absolute;
          font-size: 10px;
          font-weight: 800;
          color: var(--turquesa);
          background: rgba(10, 20, 35, .82);
          border: 1px solid var(--turquesa-light);
          border-radius: 999px;
          padding: 3px 9px;
          white-space: nowrap;
          opacity: 0;
          animation: chip-in .35s cubic-bezier(.22, 1.4, .36, 1) forwards,
              chip-flota 2.8s ease-in-out .35s infinite;
          box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
      }

      body.tema-orquidea .robot-chip {
          background: rgba(22, 12, 32, .85);
      }

      .robot-chip.saliendo {
          animation: chip-out .3s ease forwards;
      }

      @keyframes chip-in {
          0% {
              opacity: 0;
              transform: translateY(8px) scale(.7);
          }

          100% {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }

      @keyframes chip-out {
          100% {
              opacity: 0;
              transform: translateY(-6px) scale(.8);
          }
      }

      @keyframes chip-flota {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-4px);
          }
      }

      /* 6 posiciones orbitales (dentro de la tarjeta, sin desbordar) */
      .robot-chip.s1 {
          top: -6px;
          left: 78px;
      }

      .robot-chip.s2 {
          top: 22px;
          left: 96px;
      }

      .robot-chip.s3 {
          top: 50px;
          left: 86px;
      }

      .robot-chip.s4 {
          top: 78px;
          left: 60px;
      }

      /* ── Responsive ── */
      @media (max-width: 380px) {
          .brain-robot-wrap {
              width: 72px;
              height: 72px;
          }

          .robot-chip.s2 {
              left: 84px;
          }

          .robot-chip.s3 {
              left: 76px;
          }
      }

      /* ── Accesibilidad ── */
      @media (prefers-reduced-motion: reduce) {

          .pili-flotante,
          .pili-pupila,
          .pili-pupila-mov,
          .pili-antena-tip,
          .brain-robot-wrap.hablando .pili-flotante {
              animation: none !important;
          }

          .robot-chip {
              animation: chip-in .01s forwards !important;
          }
      }

      /* ══════════════════════════════════════════════════════
         📵 ANTI PULL-TO-REFRESH — Jugada 8
         Evita que arrastrar hacia abajo recargue la PWA (y bote
         al usuario al login). No afecta el scroll interno de los
         módulos, el catálogo ni el menú lateral.
      ══════════════════════════════════════════════════════ */
      html,
      body {
          overscroll-behavior-y: none;
      }

      #contenido-dinamico-erp,
      #vista-cliente,
      .offcanvas-menu>div {
          overscroll-behavior-y: contain;
      }

      /* ══════════════════════════════════════════════════════
         🧠 PILI TURBO — Jugada 10: antena dorada = LLM en línea
      ══════════════════════════════════════════════════════ */
      .brain-robot-wrap.turbo-on .pili-antena-tip {
          fill: #FFD166;
          filter: drop-shadow(0 0 6px #FFD166);
          animation-duration: 1.1s;
      }

      /* ══════════════════════════════════════════════════════
         👂 OÍDO TURBO — Jugada 11: orejas doradas = Whisper activo
      ══════════════════════════════════════════════════════ */
      .brain-robot-wrap.oido-on .pili-oreja {
          fill: #FFD166;
          filter: drop-shadow(0 0 5px #FFD166);
      }

      /* ══════════════════════════════════════════════════════
         🎛️ CENTRO DE COMANDO — Jugada 12
         Pili al centro · dock flotante derecho · paneles
         exclusivos · chat protagonista · header acordeón
      ══════════════════════════════════════════════════════ */

      .brief-comando {
          position: relative;
      }

      /* ── Escenario central ── */
      .brief-comando .comando-escenario {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 10px 56px 14px 12px;
          /* deja aire para el dock */
          min-height: 208px;
      }

      .brief-comando .brain-robot-wrap {
          width: 150px;
          height: 150px;
      }

      .brief-comando .brain-robot-wrap .brain-avatar {
          width: 34px;
          height: 34px;
          font-size: 16px;
          bottom: 8px;
      }

      .brief-comando .brain-categoria-wrap {
          align-items: center;
          text-align: center;
      }

      /* Órbita recalibrada para la Pili grande y centrada */
      .brief-comando .robot-chip.s1 {
          top: -4px;
          left: 132px;
      }

      .brief-comando .robot-chip.s2 {
          top: 56px;
          left: 152px;
      }

      .brief-comando .robot-chip.s3 {
          top: 124px;
          left: 128px;
      }

      .brief-comando .robot-chip.s4 {
          top: 152px;
          left: 30px;
      }

      /* ── Dock flotante (columna derecha) ── */
      .comando-dock {
          position: absolute;
          top: 14px;
          right: 10px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          z-index: 5;
      }

      .dock-btn {
          position: relative;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, .14);
          background: rgba(255, 255, 255, .06);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          font-size: 18px;
          cursor: pointer;
          transition: transform .15s ease, border-color .2s, background .2s, box-shadow .2s;
      }

      .dock-btn:active {
          transform: scale(.9);
      }

      .dock-btn.activo {
          border-color: var(--turquesa);
          background: rgba(0, 209, 178, .14);
          box-shadow: 0 0 14px rgba(0, 209, 178, .25);
      }

      .dock-btn.dock-apagado {
          opacity: .45;
      }

      .dock-btn.dock-chat {
          border-color: rgba(0, 209, 178, .45);
          box-shadow: 0 0 10px rgba(0, 209, 178, .18);
      }

      .dock-dot {
          display: block;
          position: absolute;
          top: 1px;
          right: 1px;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: var(--coral);
          opacity: 0;
          transform: scale(.4);
          transition: opacity .25s, transform .25s;
          pointer-events: none;
      }

      .dock-dot.encendido {
          opacity: 1;
          transform: scale(1);
          animation: dock-dot-pulso 1.6s ease-in-out infinite;
      }

      @keyframes dock-dot-pulso {

          0%,
          100% {
              box-shadow: 0 0 0 0 rgba(255, 107, 107, .5);
          }

          50% {
              box-shadow: 0 0 0 5px rgba(255, 107, 107, 0);
          }
      }

      body.tema-orquidea .dock-btn.activo {
          border-color: #C77BE8;
          background: rgba(199, 123, 232, .14);
          box-shadow: 0 0 14px rgba(199, 123, 232, .25);
      }

      body.tema-orquidea .dock-btn.dock-chat {
          border-color: rgba(199, 123, 232, .45);
      }

      body.tema-orquidea .dock-dot {
          background: #E8ADAA;
      }

      /* ── Paneles exclusivos ── */
      .comando-panel {
          display: none;
      }

      @keyframes panel-in {
          0% {
              opacity: 0;
              transform: translateY(8px);
          }

          100% {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .comando-panel.abierto {
          display: block;
          animation: panel-in .28s cubic-bezier(.22, 1, .36, 1);
          border-top: 1px solid rgba(255, 255, 255, .08);
          margin-top: 4px;
          padding-top: 12px;
      }

      .panel-mini-head {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 8px;
          margin-bottom: 6px;
      }

      .panel-vacio {
          font-size: .8rem;
          color: var(--texto-medio, #8DA8BF);
          padding: 8px 4px;
          margin: 0;
          line-height: 1.5;
      }

      /* ── Chat protagonista (futuro: ingresos/egresos por voz) ── */
      .panel-chat .brain-chat-titulo {
          font-size: 13px;
          letter-spacing: .04em;
      }

      .panel-chat .brain-input-wrap {
          padding: 6px 8px;
          border-radius: 16px;
          border: 1.5px solid rgba(0, 209, 178, .35);
          box-shadow: 0 0 0 3px rgba(0, 209, 178, .07), inset 0 1px 0 rgba(255, 255, 255, .05);
      }

      .panel-chat #brain-input-pregunta {
          font-size: 15px;
          padding: 10px 6px;
      }

      .panel-chat #brain-mic-btn {
          font-size: 22px !important;
          padding: 0 10px !important;
      }

      .panel-chat .brain-btn-enviar {
          transform: scale(1.12);
      }

      body.tema-orquidea .panel-chat .brain-input-wrap {
          border-color: rgba(199, 123, 232, .4);
          box-shadow: 0 0 0 3px rgba(199, 123, 232, .08), inset 0 1px 0 rgba(255, 255, 255, .05);
      }

      /* ── Responsive móvil ── */
      @media (max-width: 420px) {
          .brief-comando .comando-escenario {
              min-height: 188px;
              padding-right: 52px;
          }

          .brief-comando .brain-robot-wrap {
              width: 128px;
              height: 128px;
          }

          .dock-btn {
              width: 40px;
              height: 40px;
              font-size: 16px;
          }

          .brief-comando .robot-chip.s1 {
              left: 112px;
          }

          .brief-comando .robot-chip.s2 {
              top: 48px;
              left: 126px;
          }

          .brief-comando .robot-chip.s3 {
              top: 104px;
              left: 108px;
          }

          .brief-comando .robot-chip.s4 {
              top: 130px;
              left: 24px;
          }
      }

      /* ── Header acordeón ── */
      .hdr-derecha {
          display: flex;
          align-items: center;
          gap: 2px;
      }

      /* 🎨 [J39] Dropdown vertical: cae bajo el botón "⋯", no rompe la pantalla */
      .hdr-derecha {
          position: relative;
      }

      #rp-header-slot.hdr-dropdown {
          position: absolute;
          top: calc(100% + 8px);
          right: 0;
          flex-direction: column;
          align-items: stretch;
          gap: 2px;
          min-width: 210px;
          max-width: 84vw;
          background: var(--bg-card, #fff);
          border: 1px solid var(--borde, #e6ebf0);
          border-radius: 14px;
          box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
          padding: 8px;
          z-index: 1300;
          /* oculto por defecto */
          opacity: 0;
          transform: translateY(-8px) scale(.97);
          pointer-events: none;
          transition: opacity .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
      }

      #rp-header-slot.hdr-dropdown.abierto {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
      }

      /* Cada acción: ícono + etiqueta en fila, ocupando todo el ancho */
      #rp-header-slot.hdr-dropdown .hdr-icon-btn {
          width: 100%;
          justify-content: flex-start;
          gap: 12px;
          padding: 11px 12px;
          border-radius: 9px;
          position: relative;
      }

      #rp-header-slot.hdr-dropdown .hdr-icon-btn:hover {
          background: var(--turquesa-light, #e8faf7);
      }

      #rp-header-slot.hdr-dropdown .hdr-icon-btn svg {
          flex-shrink: 0;
      }

      .hdr-dropdown-lbl {
          font-size: 13.5px;
          font-weight: 600;
          color: var(--texto, #2d3436);
          white-space: nowrap;
      }

      /* El badge dentro del dropdown: puntito coral junto a la etiqueta */
      #rp-header-slot.hdr-dropdown .hdr-icon-badge {
          margin-left: auto;
          color: var(--coral, #e85555);
          font-size: 14px;
          line-height: 1;
      }

      /* La pill de Red Pilas, cuando entra al dropdown, también a lo ancho */
      #rp-header-slot.hdr-dropdown #btn-red-pilas-fab {
          width: 100%;
          justify-content: flex-start;
      }

      #hdr-btn-acordeon.activo {
          color: var(--turquesa);
          background: var(--turquesa-light);
          box-shadow: inset 0 0 0 1.5px var(--turquesa);
      }

      #hdr-acordeon-dot {
          display: none;
          position: absolute;
          top: 6px;
          right: 6px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--coral);
          animation: dock-dot-pulso 1.6s ease-in-out infinite;
      }

      @media (prefers-reduced-motion: reduce) {

          .comando-panel.abierto,
          .dock-dot.encendido,
          #hdr-acordeon-dot {
              animation: none !important;
          }
      }

      /* ══════════════════════════════════════════════════════
         ☀️ PIEL CLARA DEL BRIEF — Jugada 18
         La tarjeta de Pili nació oscura (grafito) y en el tema
         CLÁSICO quedaba como bloque gris ajeno. Esta capa la
         ilumina SOLO en clásico: Black y Orquídea llevan la
         clase .tema-black y quedan intactos píxel por píxel.
      ══════════════════════════════════════════════════════ */

      /* ── La tarjeta ── */
      body:not(.tema-black) .brain-card {
          background: linear-gradient(135deg, #FFFFFF 0%, #F5F9FC 55%, #EEF4F9 100%);
          border: 1px solid #E2EBF2;
          box-shadow: 0 8px 24px rgba(31, 45, 61, .08), inset 0 1px 0 #FFFFFF;
      }

      /* ── Textos del escenario ── */
      body:not(.tema-black) .brain-label {
          color: #009E87;
      }

      body:not(.tema-black) .brain-sublabel {
          color: #5B7186;
      }

      body:not(.tema-black) #briefing-mensaje {
          color: #26323E !important;
          /* el base trae #E8F4FF !important */
      }

      body:not(.tema-black) .brain-chat-titulo {
          color: #009E87;
      }

      /* ── Pili a plena luz: su cabeza casi blanca se camuflaba ── */
      body:not(.tema-black) .pili-cabeza,
      body:not(.tema-black) .pili-cuerpo,
      body:not(.tema-black) .pili-oreja {
          fill: #E2EAF3;
          stroke: rgba(44, 62, 80, .22);
          stroke-width: 1;
      }

      body:not(.tema-black) .pili-antena {
          stroke: #8A9BB0;
      }

      /* (el visor se queda oscuro: contraste perfecto sobre claro) */

      /* ── Órbita de palabras clave ── */
      body:not(.tema-black) .robot-chip {
          background: #FFFFFF;
          border: 1px solid rgba(0, 209, 178, .45);
          color: #00917C;
          box-shadow: 0 3px 10px rgba(31, 45, 61, .10);
      }

      /* ── Dock flotante ── */
      body:not(.tema-black) .dock-btn {
          background: rgba(13, 43, 69, .04);
          border: 1px solid #DFE9F2;
          box-shadow: 0 2px 8px rgba(31, 45, 61, .06);
      }

      body:not(.tema-black) .dock-btn.activo {
          border-color: var(--turquesa);
          background: var(--turquesa-light);
          box-shadow: 0 0 12px rgba(0, 209, 178, .22);
      }

      body:not(.tema-black) .dock-btn.dock-chat {
          border-color: rgba(0, 209, 178, .5);
      }

      /* ── Paneles ── */
      body:not(.tema-black) .comando-panel.abierto {
          border-top: 1px solid #E8EEF4;
      }

      body:not(.tema-black) .panel-vacio {
          color: #6B8095;
      }

      /* ── Chat: el trono, ahora en claro ── */
      body:not(.tema-black) .brain-input-wrap {
          background: #FFFFFF;
          border: 1px solid #DCE6EF;
      }

      body:not(.tema-black) .panel-chat .brain-input-wrap {
          border: 1.5px solid rgba(0, 158, 135, .45);
          box-shadow: 0 0 0 3px rgba(0, 209, 178, .08), inset 0 1px 0 #FFFFFF;
      }

      body:not(.tema-black) #brain-input-pregunta {
          color: #20303E !important;
      }

      body:not(.tema-black) #brain-input-pregunta::placeholder {
          color: #92A5B6;
      }

      body:not(.tema-black) .brain-chip {
          background: rgba(0, 209, 178, .10);
          border: 1px solid rgba(0, 158, 135, .35);
          color: #00806E;
      }

      body:not(.tema-black) .brain-btn-reload {
          background: #FFFFFF;
          border: 1px solid #E1E9F0;
          color: #5B7186;
      }

      body:not(.tema-black) .brain-contexto-badge {
          background: rgba(0, 209, 178, .08);
          border: 1px solid rgba(0, 158, 135, .25);
          color: #3A4A5A;
      }

      /* ── Hilo de conversación: burbujas legibles ── */

      /* ── Barra de progreso del typewriter ── */
      body:not(.tema-black) .brain-progress-bar {
          background: rgba(0, 209, 178, .15);
      }

      /* ══════════════════════════════════════════════════════
         🌐 PILI OMNIPRESENTE — Jugada 19
         Mini-Pili flotante: copiloto de voz en todos los módulos
      ══════════════════════════════════════════════════════ */
      #pili-mini {
          position: fixed;
          left: 14px;
          bottom: 84px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          z-index: 1150;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(8, 22, 38, .92);
          border: 1.5px solid rgba(0, 209, 178, .55);
          box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          transition: transform .15s ease, opacity .25s ease;
      }

      #pili-mini svg {
          width: 40px;
          height: 40px;
      }

      #pili-mini .pili-flotante {
          animation: none;
          /* en 50px, el flote marea */
      }

      #pili-mini:active {
          transform: scale(.9);
      }

      #pili-mini.pili-mini-oculta {
          opacity: 0;
          pointer-events: none;
          transform: scale(.6);
      }

      #pili-mini.escuchando {
          border-color: var(--coral);
          animation: pili-mini-escucha 1.1s ease-in-out infinite;
      }

      @keyframes pili-mini-escucha {

          0%,
          100% {
              box-shadow: 0 0 0 0 rgba(255, 107, 107, .45);
          }

          50% {
              box-shadow: 0 0 0 11px rgba(255, 107, 107, 0);
          }
      }

      #pili-mini-burbuja {
          position: fixed;
          left: 14px;
          bottom: 144px;
          max-width: min(78vw, 340px);
          z-index: 1150;
          background: rgba(10, 24, 40, .96);
          color: #EAF4FF;
          border: 1px solid rgba(0, 209, 178, .35);
          border-radius: 14px 14px 14px 4px;
          padding: 10px 13px;
          font-size: .82rem;
          line-height: 1.5;
          box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
          white-space: pre-wrap;
          transition: opacity .22s ease, transform .22s ease;
      }

      #pili-mini-burbuja.oculta {
          opacity: 0;
          pointer-events: none;
          transform: translateY(6px);
      }

      /* Piel clara (tema clásico) */
      body:not(.tema-black) #pili-mini {
          background: #FFFFFF;
          border-color: rgba(0, 158, 135, .5);
          box-shadow: 0 6px 18px rgba(31, 45, 61, .16);
      }

      body:not(.tema-black) #pili-mini-burbuja {
          background: #FFFFFF;
          color: #26323E;
          border-color: #DCE6EF;
          box-shadow: 0 10px 24px rgba(31, 45, 61, .14);
      }

      /* Orquídea */
      body.tema-orquidea #pili-mini {
          border-color: rgba(199, 123, 232, .6);
      }

      body.tema-orquidea #pili-mini.escuchando {
          border-color: #E8ADAA;
      }

      body.tema-orquidea #pili-mini-burbuja {
          border-color: rgba(199, 123, 232, .4);
      }

      @media (max-width: 420px) {
          #pili-mini {
              left: 10px;
              bottom: 80px;
          }

          #pili-mini-burbuja {
              left: 10px;
              bottom: 138px;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          #pili-mini.escuchando {
              animation: none;
          }
      }

      /* ══════════════════════════════════════════════════════
         🛍️ PILI VENDEDORA — Jugada 20 (cara A · clientes)
      ══════════════════════════════════════════════════════ */
      #pv-btn {
          position: fixed;
          left: 14px;
          bottom: 18px;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          z-index: 1190;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #FFFFFF;
          border: 2px solid var(--turquesa, #00D1B2);
          box-shadow: 0 6px 18px rgba(31, 45, 61, .18);
          transition: transform .15s ease;
      }

      #pv-btn svg {
          width: 42px;
          height: 42px;
      }

      #pv-btn:active {
          transform: scale(.9);
      }

      #pv-btn::after {
          content: '';
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          border: 2px solid rgba(0, 209, 178, .45);
          animation: pv-latido 2.6s ease-out infinite;
          pointer-events: none;
      }

      @keyframes pv-latido {
          0% {
              transform: scale(.9);
              opacity: .8;
          }

          70%,
          100% {
              transform: scale(1.35);
              opacity: 0;
          }
      }

      #pv-chat {
          position: fixed;
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 105%);
          width: min(100%, 460px);
          max-height: 76vh;
          background: #FFFFFF;
          border-radius: 18px 18px 0 0;
          box-shadow: 0 -10px 34px rgba(31, 45, 61, .22);
          z-index: 1200;
          display: flex;
          flex-direction: column;
          transition: transform .3s cubic-bezier(.22, 1, .36, 1);
      }

      #pv-chat.abierto {
          transform: translate(-50%, 0);
      }

      .pv-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 14px;
          border-bottom: 1px solid #EDF2F7;
      }

      .pv-head-tit {
          font-weight: 800;
          font-size: .9rem;
          color: #1E2B38;
      }

      #pv-cerrar {
          border: none;
          background: #F1F5F9;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          cursor: pointer;
          color: #5B7186;
          font-size: 14px;
      }

      #pv-hilo {
          flex: 1;
          overflow-y: auto;
          padding: 12px 14px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          min-height: 120px;
      }

      .pv-burbuja {
          max-width: 86%;
          padding: 9px 12px;
          border-radius: 14px;
          font-size: .85rem;
          line-height: 1.5;
          white-space: pre-wrap;
      }

      .pv-pili {
          align-self: flex-start;
          background: #F1F5F9;
          color: #26323E;
          border: 1px solid #E3EAF1;
          border-bottom-left-radius: 4px;
      }

      .pv-user {
          align-self: flex-end;
          background: rgba(0, 209, 178, .14);
          color: #1E2B38;
          border: 1px solid rgba(0, 158, 135, .3);
          border-bottom-right-radius: 4px;
      }

      #pv-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 7px;
          padding: 8px 14px;
      }

      .pv-chip {
          border: 1px solid rgba(0, 158, 135, .35);
          background: rgba(0, 209, 178, .09);
          color: #00806E;
          font-size: .76rem;
          font-weight: 700;
          padding: 7px 11px;
          border-radius: 99px;
          cursor: pointer;
      }

      .pv-input-row {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 10px 12px 14px;
          border-top: 1px solid #EDF2F7;
      }

      #pv-input {
          flex: 1;
          border: 1.5px solid #DCE6EF;
          border-radius: 99px;
          padding: 11px 14px;
          font-size: .9rem;
          color: #1E2B38;
          outline: none;
      }

      #pv-input:focus {
          border-color: var(--turquesa, #00D1B2);
      }

      #pv-mic,
      #pv-send {
          border: none;
          background: transparent;
          font-size: 21px;
          cursor: pointer;
          padding: 4px 6px;
          color: #5B7186;
      }

      #pv-send {
          color: var(--turquesa, #00D1B2);
          font-weight: 900;
      }

      #pv-mic.escuchando {
          color: var(--coral, #FF6B6B);
          animation: pili-mini-escucha 1.1s ease-in-out infinite;
          border-radius: 50%;
      }

      @media (prefers-reduced-motion: reduce) {

          #pv-btn::after,
          #pv-mic.escuchando {
              animation: none;
          }
      }

      /* 💰 Pili Vendedora v2 — botones de cabecera (Jugada 21) */
      .pv-head-btns {
          display: flex;
          gap: 6px;
          align-items: center;
      }

      #pv-reset {
          border: none;
          background: #F1F5F9;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          cursor: pointer;
          color: #5B7186;
          font-size: 13px;
      }

      #pv-reset:active {
          transform: rotate(-180deg) scale(.92);
          transition: transform .25s;
      }

      /* ================================================================
         🛍️ [f233] PILI VENDEDORA RENOVADA
         Hoja con cara y «En línea», productos y «Tu pedido» dentro del chat.
         Celular: pantalla completa. PC y tablet (768 px o más): panel al lado,
         el catálogo sigue a la vista. Colores, letras y esquinas de la tienda
         (catalogo-tema.js pone las --pv-*; sin diseño, los de Pilas).
         ================================================================ */
      #vista-cliente #pv-chat {
          --_card: var(--pv-card, #FFFFFF);
          --_tx: var(--pv-tx, #1E2B38);
          --_tx2: var(--pv-tx2, #5B7186);
          --_ln: var(--pv-ln, #E3EAF1);
          --_sutil: var(--pv-sutil, #F3F6F9);
          --_campo: var(--pv-campo, #FFFFFF);
          --_marca: var(--pv-marca, #00D1B2);
          --_sobre: var(--pv-sobre, #14161C);
          --_acento: var(--pv-acento, #00806E);
          --_precio: var(--pv-precio, #1E2B38);
          --_foto: var(--pv-foto, #FFFFFF);
          --_r: var(--pv-r, 12px);
          --_rb: var(--pv-rb, 12px);
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          height: 100dvh;
          max-height: none;
          border-radius: 0;
          overflow: hidden;
          background: var(--_card);
          color: var(--_tx);
          font-family: var(--pv-f, inherit);
          box-shadow: none;
          transform: translateY(104%);
          visibility: hidden;
          transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s;
      }

      #vista-cliente #pv-chat.abierto {
          transform: none;
          visibility: visible;
          transition: transform .32s cubic-bezier(.22, 1, .36, 1);
      }

      #vista-cliente #pv-chat .pv-head {
          gap: 10px;
          padding: 10px 12px 10px 14px;
          padding-top: calc(10px + env(safe-area-inset-top, 0px));
          background: var(--_card);
          border-bottom: 1px solid var(--_ln);
      }

      .pv-head-id {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 0;
      }

      .pv-avatar {
          position: relative;
          flex: 0 0 42px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: linear-gradient(145deg, color-mix(in srgb, var(--_marca) 70%, #FFFFFF), var(--_marca) 60%, color-mix(in srgb, var(--_marca) 78%, #000000));
      }

      .pv-avatar svg.pili {
          width: 30px;
          height: 30px;
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
      }

      .pv-punto {
          position: absolute;
          right: -1px;
          bottom: 1px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #22C55E;
          border: 2px solid var(--_card);
      }

      .pv-head-txt {
          display: flex;
          flex-direction: column;
          min-width: 0;
          line-height: 1.25;
      }

      #vista-cliente #pv-chat .pv-head-tit {
          font-family: var(--pv-ft, inherit);
          font-weight: var(--pv-fw, 800);
          font-size: 1.02rem;
          color: var(--_tx);
      }

      .pv-head-sub {
          font-size: .74rem;
          color: var(--_tx2);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pv-head-estado {
          font-weight: 700;
      }

      #vista-cliente #pv-chat #pv-reset,
      #vista-cliente #pv-chat #pv-cerrar {
          width: 38px;
          height: 38px;
          display: grid;
          place-items: center;
          padding: 0;
          border-radius: 50%;
          background: var(--_sutil);
          color: var(--_tx2);
      }

      #vista-cliente #pv-chat button svg {
          width: 19px;
          height: 19px;
          fill: none;
          stroke: currentColor;
          stroke-width: 2.2;
          stroke-linecap: round;
          stroke-linejoin: round;
      }

      #vista-cliente #pv-chat #pv-hilo {
          padding: 14px 12px 10px;
          gap: 9px;
          background: var(--_sutil);
          scroll-behavior: smooth;
          overscroll-behavior: contain;
      }

      #vista-cliente #pv-chat .pv-burbuja {
          max-width: 84%;
          padding: 10px 13px;
          border-radius: 18px;
          font-size: .88rem;
          line-height: 1.5;
          animation: pv-entra .22s ease-out both;
      }

      #vista-cliente #pv-chat .pv-pili {
          background: var(--_card);
          color: var(--_tx);
          border: 1px solid var(--_ln);
          border-bottom-left-radius: 6px;
          box-shadow: 0 1px 2px rgba(20, 24, 40, .05);
      }

      #vista-cliente #pv-chat .pv-user {
          background: var(--_marca);
          color: var(--_sobre);
          border: 0;
          border-bottom-right-radius: 6px;
          font-weight: 600;
      }

      @keyframes pv-entra {
          from {
              opacity: 0;
              transform: translateY(6px);
          }
      }

      /* «Pili está escribiendo…» */
      #vista-cliente #pv-chat .pv-escribiendo {
          display: inline-flex;
          gap: 5px;
          padding: 13px 15px;
      }

      .pv-escribiendo i {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--_tx2);
          animation: pv-punto-salta 1.1s ease-in-out infinite;
      }

      .pv-escribiendo i:nth-child(2) {
          animation-delay: .15s;
      }

      .pv-escribiendo i:nth-child(3) {
          animation-delay: .3s;
      }

      @keyframes pv-punto-salta {

          0%,
          60%,
          100% {
              transform: translateY(0);
              opacity: .35;
          }

          30% {
              transform: translateY(-4px);
              opacity: .9;
          }
      }

      /* Productos dentro del chat */
      .pv-carrusel-wrap {
          position: relative;
          flex: 0 0 auto;
          margin: 0 -12px;
          animation: pv-entra .25s ease-out both;
      }

      .pv-carrusel {
          display: flex;
          gap: 10px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-padding: 0 12px;
          padding: 2px 12px 8px;
          scrollbar-width: none;
      }

      .pv-carrusel::-webkit-scrollbar {
          display: none;
      }

      #vista-cliente #pv-chat .pv-prod {
          flex: 0 0 152px;
          scroll-snap-align: start;
          display: flex;
          flex-direction: column;
          background: var(--_card);
          color: var(--_tx);
          border: 1px solid var(--_ln);
          border-radius: var(--_r);
          overflow: hidden;
          box-shadow: 0 4px 14px rgba(20, 24, 40, .07);
          text-align: left;
          font-family: inherit;
      }

      #vista-cliente #pv-chat .pv-prod-ver {
          display: flex;
          flex-direction: column;
          padding: 0;
          border: 0;
          background: transparent;
          color: inherit;
          font: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pv-prod-foto {
          display: block;
          width: 100%;
          aspect-ratio: 1 / 1;
          object-fit: contain;
          background: var(--_foto);
      }

      .pv-sin-foto {
          display: grid;
          place-items: center;
          font-size: 2rem;
          background: var(--_sutil);
      }

      .pv-prod-nom {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          min-height: 2.5em;
          padding: 8px 10px 0;
          font-size: .8rem;
          font-weight: 600;
          line-height: 1.25;
          color: var(--_tx);
      }

      .pv-prod-precio {
          padding: 4px 10px 0;
          font-family: var(--pv-ft, inherit);
          font-weight: 800;
          font-size: 1.02rem;
          color: var(--_precio);
      }

      .pv-prod-precio s {
          margin-left: 3px;
          font-size: .72rem;
          font-weight: 500;
          color: var(--_tx2);
      }

      .pv-prod-stock {
          min-height: 1.35em;
          padding: 2px 10px 8px;
          font-size: .72rem;
          color: var(--_tx2);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pv-prod-ultimas {
          color: #E8590C;
          font-weight: 700;
      }

      .pv-prod-ok {
          color: #16A34A;
          font-weight: 600;
      }

      #vista-cliente #pv-chat .pv-prod-add {
          margin: auto 10px 10px;
          padding: 9px 8px;
          border: 0;
          border-radius: var(--_rb);
          background: var(--_marca);
          color: var(--_sobre);
          font-family: inherit;
          font-weight: 800;
          font-size: .8rem;
          cursor: pointer;
      }

      #vista-cliente #pv-chat .pv-prod-mas {
          flex: 0 0 112px;
          align-items: center;
          justify-content: center;
          gap: 4px;
          padding: 10px;
          border: 1.5px dashed color-mix(in srgb, var(--_marca) 55%, var(--_ln));
          background: color-mix(in srgb, var(--_marca) 8%, var(--_card));
          color: var(--_acento);
          box-shadow: none;
          text-align: center;
          cursor: pointer;
      }

      .pv-prod-mas b {
          font-size: 1.35rem;
      }

      .pv-prod-mas span {
          font-size: .74rem;
          font-weight: 700;
          line-height: 1.3;
      }

      .pv-prod-add:active,
      .pv-ped-btns button:active,
      .pv-chip:active {
          transform: scale(.96);
      }

      .pv-car-flecha {
          display: none;
      }

      @media (hover: hover) and (pointer: fine) {
          #vista-cliente #pv-chat .pv-car-flecha {
              display: grid;
              place-items: center;
              position: absolute;
              top: 34%;
              width: 32px;
              height: 32px;
              padding: 0;
              border-radius: 50%;
              border: 1px solid var(--_ln);
              background: var(--_card);
              color: var(--_tx);
              font-size: 1.2rem;
              line-height: 1;
              box-shadow: 0 4px 12px rgba(20, 24, 40, .16);
              cursor: pointer;
              opacity: 0;
              transition: opacity .2s;
          }

          .pv-carrusel-wrap:hover .pv-car-flecha {
              opacity: 1;
          }

          .pv-car-flecha.izq {
              left: 4px;
          }

          .pv-car-flecha.der {
              right: 4px;
          }
      }

      /* Tu pedido dentro del chat */
      #vista-cliente #pv-chat .pv-pedido {
          flex: 0 0 auto;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 12px;
          background: var(--_card);
          color: var(--_tx);
          border: 1px solid var(--_ln);
          border-radius: calc(var(--_r) + 4px);
          box-shadow: 0 6px 18px rgba(20, 24, 40, .08);
          animation: pv-entra .25s ease-out both;
      }

      .pv-ped-cab {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 8px;
      }

      .pv-ped-cab b {
          font-family: var(--pv-ft, inherit);
          font-size: .94rem;
      }

      .pv-ped-cab span,
      .pv-ped-mas {
          font-size: .74rem;
          color: var(--_tx2);
      }

      .pv-ped-fila {
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .pv-ped-foto {
          flex: 0 0 44px;
          width: 44px;
          height: 44px;
          border-radius: 10px;
          object-fit: contain;
          background: var(--_foto);
          border: 1px solid var(--_ln);
      }

      .pv-ped-foto.pv-sin-foto {
          font-size: 1.15rem;
      }

      .pv-ped-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .pv-ped-txt b {
          font-size: .82rem;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pv-ped-txt small {
          font-size: .72rem;
          color: var(--_tx2);
      }

      .pv-ped-sub {
          font-size: .82rem;
          font-weight: 700;
          white-space: nowrap;
      }

      .pv-ped-total {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          padding-top: 8px;
          border-top: 1px dashed var(--_ln);
          font-weight: 700;
          font-size: .86rem;
      }

      .pv-ped-total b {
          font-family: var(--pv-ft, inherit);
          font-size: 1.15rem;
          color: var(--_precio);
      }

      .pv-ped-btns {
          display: flex;
          gap: 8px;
          margin-top: 2px;
      }

      #vista-cliente #pv-chat .pv-ped-btns button {
          padding: 11px 10px;
          border-radius: var(--_rb);
          font-family: inherit;
          font-weight: 800;
          font-size: .84rem;
          cursor: pointer;
      }

      #vista-cliente #pv-chat .pv-ped-fin {
          flex: 1.5;
          border: 0;
          background: var(--_marca);
          color: var(--_sobre);
      }

      #vista-cliente #pv-chat .pv-ped-ver {
          flex: 1;
          border: 1.5px solid var(--_ln);
          background: transparent;
          color: var(--_tx);
      }

      /* Respuestas rápidas: fijas abajo, en una fila que se desliza */
      #vista-cliente #pv-chat #pv-chips {
          flex-wrap: nowrap;
          overflow-x: auto;
          gap: 8px;
          padding: 9px 12px 3px;
          background: var(--_card);
          scrollbar-width: none;
      }

      #vista-cliente #pv-chat #pv-chips::-webkit-scrollbar {
          display: none;
      }

      #vista-cliente #pv-chat #pv-chips:empty {
          display: none;
      }

      #vista-cliente #pv-chat .pv-chip {
          flex: 0 0 auto;
          white-space: nowrap;
          padding: 8px 13px;
          border: 1.5px solid color-mix(in srgb, var(--_marca) 45%, var(--_ln));
          background: color-mix(in srgb, var(--_marca) 10%, var(--_card));
          color: var(--_acento);
          font-family: inherit;
          font-size: .78rem;
          font-weight: 700;
          border-radius: 999px;
      }

      #vista-cliente #pv-chat .pv-input-row {
          gap: 8px;
          padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
          background: var(--_card);
          border-top: 0;
      }

      #vista-cliente #pv-chat #pv-input {
          min-width: 0;
          padding: 11px 16px;
          background: var(--_campo);
          color: var(--_tx);
          border: 1.5px solid var(--_ln);
          border-radius: 999px;
          font-family: inherit;
          font-size: 16px;
      }

      #vista-cliente #pv-chat #pv-input::placeholder {
          color: var(--_tx2);
      }

      #vista-cliente #pv-chat #pv-input:focus {
          border-color: var(--_acento);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--_marca) 22%, transparent);
      }

      #vista-cliente #pv-chat #pv-mic,
      #vista-cliente #pv-chat #pv-send {
          flex: 0 0 44px;
          width: 44px;
          height: 44px;
          display: grid;
          place-items: center;
          padding: 0;
          border-radius: 50%;
      }

      #vista-cliente #pv-chat #pv-mic {
          background: var(--_sutil);
          color: var(--_tx2);
      }

      #vista-cliente #pv-chat #pv-send {
          background: var(--_marca);
          color: var(--_sobre);
      }

      #vista-cliente #pv-chat #pv-mic.escuchando {
          background: #FF6B6B;
          color: #FFFFFF;
      }

      #vista-cliente #pv-chat #pv-send svg {
          width: 21px;
          height: 21px;
          stroke-width: 2.6;
      }

      /* PC y tablet: panel al lado, el catálogo sigue a la vista */
      @media (min-width: 768px) {
          #vista-cliente #pv-chat {
              top: 16px;
              right: 16px;
              bottom: 16px;
              left: auto;
              width: 400px;
              height: auto;
              border-radius: 22px;
              transform: translateX(calc(100% + 40px));
              box-shadow: 0 24px 60px rgba(20, 24, 40, .28), 0 0 0 1px var(--_ln);
          }

          #vista-cliente #pv-chat .pv-head {
              padding-top: 12px;
          }

          #vista-cliente #pv-chat .pv-input-row {
              padding-bottom: 12px;
          }

          #vista-cliente #pv-chat #pv-chips {
              flex-wrap: wrap;
              max-height: 92px;
              overflow-y: auto;
          }
      }

      @media (min-width: 1280px) {
          #vista-cliente #pv-chat {
              width: 420px;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          #vista-cliente #pv-chat,
          #vista-cliente #pv-chat .pv-burbuja,
          .pv-carrusel-wrap,
          #vista-cliente #pv-chat .pv-pedido,
          .pv-escribiendo i {
              animation: none;
              transition: none;
          }
      }

      /* 👑 Pili en el FAB central de la cara A (Jugada 22) */
      #btn-pili-flotante svg.pili {
          width: 36px;
          height: 36px;
      }

      /* ══════════════════════════════════════════════════════
         🎭 ESCENARIO PREMIUM — CARA A (Jugada 23)
         La vitrina a la altura de Pili: vidrio, profundidad y
         marca. Capa puramente visual con ámbito #vista-cliente:
         cero cambios de lógica, temas del admin intactos.
      ══════════════════════════════════════════════════════ */

      /* ── El escenario ── */
      #vista-cliente {
          background:
              radial-gradient(900px 320px at 50% -120px, rgba(0, 209, 178, .10), transparent 70%),
              linear-gradient(180deg, #F7FAFC 0%, #EEF3F8 100%);
          min-height: 100vh;
      }

      /* ── Encabezado de filtros: vidrio pegado al cielo ── */
      #vista-cliente .zona-filtros-sticky {
          position: sticky;
          top: 0;
          z-index: 900;
          background: rgba(255, 255, 255, .78);
          backdrop-filter: blur(14px) saturate(1.4);
          -webkit-backdrop-filter: blur(14px) saturate(1.4);
          border-bottom: 1px solid rgba(226, 235, 242, .9);
          box-shadow: 0 8px 24px rgba(31, 45, 61, .06);
      }

      #vista-cliente .filtros-container {
          padding: 12px 14px 14px;
          max-width: 980px;
          margin: 0 auto;
      }

      #vista-cliente .input-search-pro {
          background: #FFFFFF;
          border: 1.5px solid #E3EBF3 !important;
          border-radius: 14px !important;
          padding: 12px 14px !important;
          font-size: .92rem;
          color: #1E2B38;
          box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 8px rgba(31, 45, 61, .04);
          transition: border-color .18s ease, box-shadow .18s ease;
      }

      #vista-cliente .input-search-pro:focus {
          outline: none;
          border-color: var(--turquesa, #00D1B2) !important;
          box-shadow: 0 0 0 4px rgba(0, 209, 178, .14);
      }

      /* ── La galería: respiración y ritmo ── */
      #vista-cliente .grid-tienda {
          gap: 14px !important;
          padding: 14px 12px 130px;
          max-width: 980px;
          margin: 0 auto;
      }

      /* ── Tarjetas de producto: profundidad y vida (anatomía intacta) ── */
      #vista-cliente .grid-tienda>div {
          border-radius: 18px !important;
          border: 1px solid #E7EEF4 !important;
          box-shadow: 0 6px 18px rgba(31, 45, 61, .07) !important;
          overflow: hidden;
          background: #FFFFFF;
          transition: transform .18s ease, box-shadow .18s ease;
      }

      #vista-cliente .grid-tienda>div:active {
          transform: scale(.985);
      }

      @media (hover: hover) {
          #vista-cliente .grid-tienda>div:hover {
              transform: translateY(-4px);
              box-shadow: 0 14px 30px rgba(31, 45, 61, .13) !important;
          }
      }

      #vista-cliente .grid-tienda img {
          object-fit: cover !important;
          transition: transform .35s ease;
      }

      @media (hover: hover) {
          #vista-cliente .grid-tienda>div:hover img {
              transform: scale(1.04);
          }
      }

      /* ── Nav inferior: píldora flotante de vidrio ── */
      #vista-cliente .bottom-nav-cliente {
          left: 12px;
          right: 12px;
          bottom: 10px;
          width: auto;
          height: 64px;
          border-radius: 22px;
          background: rgba(255, 255, 255, .82);
          backdrop-filter: blur(16px) saturate(1.5);
          -webkit-backdrop-filter: blur(16px) saturate(1.5);
          border: 1px solid rgba(226, 235, 242, .9);
          border-top: 1px solid rgba(255, 255, 255, .9);
          box-shadow: 0 12px 32px rgba(31, 45, 61, .16);
          padding-bottom: 0;
          margin-bottom: env(safe-area-inset-bottom);
      }

      #vista-cliente .bottom-nav-cliente button {
          color: #64798D;
          transition: color .18s ease, transform .12s ease;
      }

      #vista-cliente .bottom-nav-cliente button:active {
          transform: scale(.92);
      }

      #vista-cliente .bottom-nav-cliente button svg {
          stroke: currentColor;
      }

      #vista-cliente .bottom-nav-cliente button.activo {
          color: var(--turquesa, #00D1B2);
      }

      /* ── El trono: FAB de Pili ── */
      #btn-pili-flotante {
          width: 62px;
          height: 62px;
          bottom: 32px;
          background: linear-gradient(145deg, #00E0C0 0%, var(--turquesa, #00D1B2) 55%, #00A88F 100%);
          border: 3px solid #FFFFFF;
          box-shadow: 0 10px 26px rgba(0, 209, 178, .42), 0 4px 10px rgba(31, 45, 61, .18);
      }

      #btn-pili-flotante svg.pili {
          width: 38px;
          height: 38px;
      }

      #btn-pili-flotante::after {
          content: '';
          position: absolute;
          inset: -7px;
          border-radius: 50%;
          border: 2px solid rgba(0, 209, 178, .5);
          animation: pv-latido 2.8s ease-out infinite;
          pointer-events: none;
      }

      /* ── Menú lateral: tarjeta de presentación de la tienda ── */
      #vista-cliente .menu-lateral-cli {
          background: rgba(255, 255, 255, .94);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-right: 1px solid #E7EEF4;
          border-radius: 0 26px 26px 0;
          box-shadow: 18px 0 50px rgba(31, 45, 61, .22);
      }

      /* Etiquetas de Confianza: insignias, no texto plano */
      #lista-etiquetas-confianza span {
          background: #F0FBF7;
          border: 1px solid rgba(0, 209, 178, .28);
          border-left: 3px solid var(--turquesa, #00D1B2);
          border-radius: 10px;
          padding: 8px 11px;
          box-shadow: 0 2px 6px rgba(31, 45, 61, .05);
      }

      /* ── Carrito: de lista a boutique ── */
      #panel-carrito-cliente {
          border-radius: 24px 0 0 24px;
          box-shadow: -16px 0 48px rgba(31, 45, 61, .26);
          background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%);
      }

      #panel-carrito-cliente .carrito-body>div {
          background: #FFFFFF !important;
          border: 1px solid #E7EEF4 !important;
          border-radius: 14px !important;
          box-shadow: 0 3px 10px rgba(31, 45, 61, .06);
          margin-bottom: 10px;
      }

      #carrito-total-ui {
          color: var(--turquesa, #00D1B2);
          font-weight: 900;
          font-size: 1.25rem;
          text-shadow: 0 1px 0 #FFFFFF;
      }

      #panel-carrito-cliente button {
          border-radius: 14px !important;
          font-weight: 800 !important;
          transition: transform .12s ease;
      }

      #panel-carrito-cliente button:active {
          transform: scale(.96);
      }

      /* ── Detalles de casa ── */
      #vista-cliente ::selection {
          background: rgba(0, 209, 178, .25);
      }

      #vista-cliente *::-webkit-scrollbar {
          width: 6px;
          height: 6px;
      }

      #vista-cliente *::-webkit-scrollbar-thumb {
          background: rgba(0, 158, 135, .35);
          border-radius: 99px;
      }

      @media (prefers-reduced-motion: reduce) {

          #vista-cliente .grid-tienda>div,
          #vista-cliente .grid-tienda img,
          #btn-pili-flotante::after {
              transition: none;
              animation: none;
          }
      }

      /* ══════════════════════════════════════════════════════
         🎉 BIENVENIDA NEUROBRANDING — Jugada 24 (cara A)
      ══════════════════════════════════════════════════════ */
      #pv-welcome {
          position: fixed;
          inset: 0;
          z-index: 1300;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
          background: rgba(8, 22, 38, .48);
          backdrop-filter: blur(9px);
          -webkit-backdrop-filter: blur(9px);
          opacity: 0;
          transition: opacity .35s ease;
      }

      #pv-welcome.visible {
          opacity: 1;
      }

      .pv-w-card {
          width: min(92vw, 420px);
          background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFC 100%);
          border: 1px solid #E7EEF4;
          border-radius: 26px;
          padding: 24px 22px 18px;
          text-align: center;
          box-shadow: 0 30px 70px rgba(8, 22, 38, .38), inset 0 1px 0 #FFFFFF;
          transform: translateY(26px) scale(.95);
          transition: transform .45s cubic-bezier(.22, 1, .36, 1);
      }

      #pv-welcome.visible .pv-w-card {
          transform: translateY(0) scale(1);
      }

      .pv-w-pili {
          width: 78px;
          height: 78px;
          margin: -56px auto 10px;
          border-radius: 50%;
          background: linear-gradient(145deg, #00E0C0, var(--turquesa, #00D1B2) 60%, #00A88F);
          border: 4px solid #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 10px 24px rgba(0, 209, 178, .45);
          position: relative;
      }

      .pv-w-pili svg {
          width: 50px;
          height: 50px;
      }

      .pv-w-pili::after {
          content: '';
          position: absolute;
          inset: -8px;
          border-radius: 50%;
          border: 2px solid rgba(0, 209, 178, .5);
          animation: pv-latido 2.6s ease-out infinite;
      }

      .pv-w-titulo {
          font-size: 1.22rem;
          font-weight: 900;
          color: #16242F;
          line-height: 1.3;
          margin: 4px 0 8px;
      }

      .pv-w-titulo span {
          color: var(--turquesa, #00D1B2);
      }

      .pv-w-texto {
          font-size: .9rem;
          color: #3A4A5A;
          line-height: 1.6;
          margin: 0 0 6px;
      }

      .pv-w-gracias {
          font-size: .85rem;
          color: #5B7186;
          margin: 0 0 14px;
      }

      .pv-w-cta {
          width: 100%;
          border: none;
          background: linear-gradient(90deg, #00E0C0, var(--turquesa, #00D1B2));
          color: #FFFFFF;
          font-weight: 900;
          font-size: .95rem;
          padding: 14px;
          border-radius: 16px;
          cursor: pointer;
          box-shadow: 0 8px 20px rgba(0, 209, 178, .38);
          transition: transform .12s ease;
      }

      .pv-w-cta:active {
          transform: scale(.96);
      }

      .pv-w-cta2 {
          width: 100%;
          margin-top: 9px;
          background: transparent;
          border: 1.5px solid rgba(0, 158, 135, .4);
          color: #00806E;
          font-weight: 800;
          font-size: .88rem;
          padding: 11px;
          border-radius: 16px;
          cursor: pointer;
      }

      .pv-w-pilas {
          display: block;
          margin-top: 15px;
          font-size: .72rem;
          color: #6B8095;
          text-decoration: none;
          line-height: 1.5;
      }

      .pv-w-pilas b {
          color: var(--turquesa, #00D1B2);
      }

      .pv-w-pilas u {
          font-weight: 800;
      }

      /* 👋 El brinco de saludo del FAB al cerrar la bienvenida */
      .pv-fab-saludo {
          animation: pv-fab-brinco .55s ease 2;
      }

      @keyframes pv-fab-brinco {

          0%,
          100% {
              transform: translateX(-50%) translateY(0);
          }

          40% {
              transform: translateX(-50%) translateY(-10px);
          }
      }

      @media (prefers-reduced-motion: reduce) {

          #pv-welcome,
          .pv-w-card,
          .pv-w-pili::after,
          .pv-fab-saludo {
              transition: none;
              animation: none;
          }
      }

      /* ══════════════════════════════════════════════════════
         🔔 FEED DE INTELIGENCIA — Jugada 25 (Brief)
         Usa variables de tema (--bg-card, --borde, --texto-oscuro,
         --turquesa…) → vive en clásico, black y orquídea sin tocar.
      ══════════════════════════════════════════════════════ */
      #bloque-notif-clientes {
          margin: 0 0 4px;
      }

      .nc-cabecera {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          padding: 0 2px;
      }

      .nc-titulo {
          font-size: 13px;
          font-weight: 800;
          color: var(--texto-oscuro);
      }

      .nc-btn-refrescar {
          background: var(--bg-card);
          border: 0.5px solid var(--borde);
          border-radius: 50%;
          width: 30px;
          height: 30px;
          cursor: pointer;
          font-size: 13px;
          color: var(--texto-oscuro);
          transition: transform .2s ease;
      }

      .nc-girando {
          animation: nc-spin .6s ease;
      }

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

      .nc-lista {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      /* Cada fila: tarjeta sobre fondo "descartar" */
      .nc-item-wrap {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
      }

      .nc-item-fondo {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, #FF6B6B, #ff8787);
          display: flex;
          align-items: center;
          padding-left: 18px;
          color: #fff;
          font-weight: 800;
          font-size: 12px;
          opacity: 0;
          transition: opacity .15s ease;
      }

      .nc-item-wrap.nc-revelado .nc-item-fondo {
          opacity: 1;
      }

      .nc-item {
          position: relative;
          display: flex;
          align-items: center;
          gap: 11px;
          background: var(--bg-card);
          border: 0.5px solid var(--borde);
          border-radius: 12px;
          padding: 11px 12px;
          cursor: grab;
          touch-action: pan-y;
          will-change: transform;
      }

      .nc-item:active {
          cursor: grabbing;
      }

      .nc-item-icono {
          flex-shrink: 0;
          width: 38px;
          height: 38px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          background: var(--turquesa-light);
      }

      .nc-item-icono.nc-compra {
          background: rgba(255, 107, 107, .16);
      }

      .nc-item-cuerpo {
          flex: 1;
          min-width: 0;
      }

      .nc-item-titulo {
          font-size: 12.5px;
          font-weight: 800;
          color: var(--texto-oscuro);
          line-height: 1.3;
      }

      .nc-item-detalle {
          font-size: 12px;
          color: var(--texto-oscuro);
          opacity: .72;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 1px;
      }

      .nc-item-tiempo {
          font-size: 10px;
          color: var(--texto-oscuro);
          opacity: .5;
          margin-top: 2px;
      }

      .nc-item-x {
          flex-shrink: 0;
          background: none;
          border: none;
          color: var(--texto-oscuro);
          opacity: .35;
          font-size: 15px;
          cursor: pointer;
          padding: 4px 6px;
          line-height: 1;
      }

      .nc-item-x:hover {
          opacity: .8;
      }

      .nc-item-wrap.nc-saliendo {
          opacity: 0;
          max-height: 0;
          margin: 0;
          transition: opacity .25s ease, max-height .28s ease, margin .28s ease;
      }

      /* Acento de marca turquesa en el borde izquierdo */
      .nc-item {
          border-left: 3px solid var(--turquesa, #00D1B2);
      }

      .nc-item:has(.nc-compra) {
          border-left-color: var(--coral, #FF6B6B);
      }

      @media (prefers-reduced-motion: reduce) {

          .nc-girando,
          .nc-item,
          .nc-item-wrap {
              animation: none;
              transition: none;
          }
      }

      /* 🔧 [J26] El header-marca de la cara A quedó vacío (solo aire turquesa
         bajo la barra). Lo colapsamos: la galería sube y respira. */
      #vista-cliente>.header-marca {
          padding: 0 !important;
          margin: 0 !important;
          border: none !important;
          box-shadow: none !important;
          min-height: 0 !important;
          background: transparent !important;
      }

      /* 🔧 [J26] Filtros de la cara A: evitar desborde horizontal en móvil.
         Los <select> con flex:1 no encogían (min-width:auto) y el texto
         largo empujaba la fila hacia la derecha rompiendo la pantalla. */
      #vista-cliente .zona-filtros-sticky {
          max-width: 100%;
          overflow-x: hidden;
          box-sizing: border-box;
      }

      #vista-cliente .filtros-container>div {
          max-width: 100%;
          box-sizing: border-box;
      }

      #vista-cliente #filtro-categoria,
      #vista-cliente #filtro-talla {
          min-width: 0;
          max-width: 100%;
          text-overflow: ellipsis;
          box-sizing: border-box;
      }

      /* 🧠 [J27] Pili Cerradora: pulso fuerte al agregar + nudge flotante */
      #pv-btn.pv-pulso-fuerte {
          animation: pv-pulso-cierre .8s ease 2;
      }

      @keyframes pv-pulso-cierre {

          0%,
          100% {
              transform: scale(1);
              box-shadow: 0 6px 18px rgba(0, 209, 178, .3);
          }

          50% {
              transform: scale(1.15);
              box-shadow: 0 8px 26px rgba(0, 209, 178, .6);
          }
      }

      #pv-nudge {
          position: fixed;
          left: 50%;
          bottom: 100px;
          transform: translateX(-50%) translateY(10px);
          z-index: 1195;
          background: linear-gradient(135deg, #00E0C0, var(--turquesa, #00D1B2));
          color: #fff;
          font-weight: 800;
          font-size: .82rem;
          padding: 11px 16px;
          border-radius: 99px;
          box-shadow: 0 8px 22px rgba(0, 209, 178, .4);
          cursor: pointer;
          opacity: 0;
          pointer-events: none;
          transition: opacity .3s ease, transform .3s ease;
          white-space: nowrap;
          max-width: 90vw;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      #pv-nudge.visible {
          opacity: 1;
          pointer-events: auto;
          transform: translateX(-50%) translateY(0);
          animation: pv-nudge-bounce 2.2s ease-in-out infinite;
      }

      @keyframes pv-nudge-bounce {

          0%,
          100% {
              transform: translateX(-50%) translateY(0);
          }

          50% {
              transform: translateX(-50%) translateY(-5px);
          }
      }

      @media (prefers-reduced-motion: reduce) {

          #pv-btn.pv-pulso-fuerte,
          #pv-nudge.visible {
              animation: none;
          }
      }

      /* ════════ 📷 [Jugada 30] CÓDIGOS DE BARRAS ════════ */

      /* Botón flotante del escáner (arriba, centrado) */
      #bc-scan-btn.bc-scan-flotante {
          position: fixed;
          top: 76px;
          left: 50%;
          margin-left: -23px;
          /* mitad del ancho: centrado sin transform (el :active ya lo usa) */
          z-index: 1160;
          width: 46px;
          height: 46px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--bg-card, #fff);
          border: 1.5px solid var(--turquesa, #00D1B2);
          box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
          cursor: pointer;
          transition: transform .15s ease, opacity .2s ease;
      }

      #bc-scan-btn.bc-scan-flotante:active {
          transform: scale(.9);
      }

      #bc-scan-btn.bc-scan-oculto {
          display: none !important;
      }

      @media (max-width: 420px) {
          #bc-scan-btn.bc-scan-flotante {
              top: 70px;
              left: 50%;
              margin-left: -21px;
              width: 42px;
              height: 42px;
          }
      }

      /* Overlay de los modales (generador y escáner) */
      .bc-modal-overlay {
          position: fixed;
          inset: 0;
          z-index: 3000;
          background: rgba(5, 17, 31, .72);
          backdrop-filter: blur(4px);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 16px;
          animation: bc-fade .2s ease;
      }

      @keyframes bc-fade {
          from {
              opacity: 0;
          }

          to {
              opacity: 1;
          }
      }

      /* Tarjeta del generador */
      .bc-modal-card,
      .bc-scan-card {
          background: #fff;
          border-radius: 18px;
          width: 100%;
          max-width: 440px;
          max-height: 88vh;
          overflow-y: auto;
          box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
          animation: bc-pop .25s cubic-bezier(.2, .9, .3, 1.2);
      }

      @keyframes bc-pop {
          from {
              transform: translateY(20px) scale(.96);
              opacity: 0;
          }

          to {
              transform: translateY(0) scale(1);
              opacity: 1;
          }
      }

      .bc-modal-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 18px;
          border-bottom: 1px solid #eef2f5;
          position: sticky;
          top: 0;
          background: #fff;
          border-radius: 18px 18px 0 0;
      }

      .bc-modal-tit {
          font-weight: 800;
          font-size: 16px;
          color: #0D2137;
      }

      .bc-modal-x {
          background: #f1f3f5;
          border: none;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 14px;
          color: #555;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .bc-modal-body {
          padding: 16px 18px 20px;
      }

      .bc-modal-sub {
          font-size: 12.5px;
          color: #667;
          line-height: 1.5;
          margin: 0 0 14px;
      }

      .bc-label {
          display: block;
          font-size: 11px;
          font-weight: 700;
          color: #555;
          text-transform: uppercase;
          letter-spacing: .04em;
          margin-bottom: 6px;
      }

      .bc-select {
          width: 100%;
          padding: 11px 12px;
          border: 1.5px solid #d8e0e6;
          border-radius: 10px;
          font-size: 14px;
          color: #222;
          background: #fff;
          margin-bottom: 14px;
      }

      .bc-gen-acciones {
          margin-bottom: 16px;
      }

      .bc-btn {
          border: none;
          border-radius: 10px;
          padding: 12px 16px;
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
          width: 100%;
          transition: filter .15s ease;
      }

      .bc-btn:active {
          filter: brightness(.92);
      }

      .bc-btn-primary {
          background: linear-gradient(135deg, #00E0C0, #00A896);
          color: #fff;
      }

      /* Grid de previsualización de etiquetas */
      .bc-gen-preview {
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .bc-card-item {
          border: 1px solid #eef2f5;
          border-radius: 12px;
          padding: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          background: #fafcfd;
      }

      .bc-card-svg {
          width: 100%;
          display: flex;
          justify-content: center;
          background: #fff;
          border-radius: 8px;
          padding: 6px;
      }

      .bc-card-svg svg {
          max-width: 100%;
          height: auto;
      }

      .bc-card-meta {
          text-align: center;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .bc-card-meta strong {
          font-size: 13px;
          color: #0D2137;
      }

      .bc-card-meta span {
          font-size: 11px;
          color: #778;
      }

      .bc-btn-mini {
          background: #eef9f7;
          color: #00A896;
          border: 1px solid #b8e8e1;
          border-radius: 8px;
          padding: 6px 14px;
          font-size: 12px;
          font-weight: 700;
          cursor: pointer;
      }

      .bc-vacio {
          color: #aab;
          font-size: 12px;
          text-align: center;
          padding: 10px;
      }

      /* ── Escáner: video + marco ── */
      .bc-scan-video-wrap {
          position: relative;
          width: 100%;
          aspect-ratio: 4 / 3;
          background: #000;
          overflow: hidden;
      }

      #bc-scan-video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .bc-scan-marco {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 78%;
          height: 40%;
          border: 3px solid rgba(0, 224, 192, .9);
          border-radius: 14px;
          box-shadow: 0 0 0 2000px rgba(0, 0, 0, .35);
          pointer-events: none;
      }

      .bc-scan-laser {
          position: absolute;
          top: 50%;
          left: 11%;
          width: 78%;
          height: 2px;
          background: #FF6B6B;
          box-shadow: 0 0 8px 1px rgba(255, 107, 107, .8);
          animation: bc-laser 1.8s ease-in-out infinite;
          pointer-events: none;
      }

      @keyframes bc-laser {

          0%,
          100% {
              transform: translateY(-58px);
          }

          50% {
              transform: translateY(58px);
          }
      }

      .bc-scan-status {
          text-align: center;
          font-size: 13px;
          font-weight: 600;
          color: #0D2137;
          padding: 14px 18px 6px;
          margin: 0;
      }

      .bc-scan-manual {
          width: calc(100% - 36px);
          margin: 8px 18px;
          padding: 11px 12px;
          border: 1.5px solid #d8e0e6;
          border-radius: 10px;
          font-size: 14px;
          box-sizing: border-box;
      }

      .bc-scan-card .bc-btn-primary {
          width: calc(100% - 36px);
          margin: 0 18px 18px;
      }

      @media (prefers-reduced-motion: reduce) {
          .bc-scan-laser {
              animation: none;
          }
      }

      /* 🎯 [J32] Cara A: bajar los filtros para que no queden bajo el header,
         reducir levemente la fuente, y compensar el contenedor para que la
         galería no quede tapada por los filtros fijos. */
      #vista-cliente .zona-filtros-sticky {
          top: 64px !important;
          padding-top: 12px !important;
          padding-bottom: 12px !important;
      }

      #vista-cliente .zona-filtros-sticky .input-search-pro {
          font-size: 12px !important;
          height: 36px !important;
          padding: 7px 12px !important;
      }

      /* El contenedor central baja en la misma medida que los filtros
         (antes: header 50 + filtros 94 = 150px; ahora +14px por el nuevo top) */
      #contenedor {
          padding-top: 164px !important;
      }

      /* En móvil, un pelín más compacto */
      @media (max-width: 420px) {
          #vista-cliente .zona-filtros-sticky {
              top: 60px !important;
          }

          #vista-cliente .zona-filtros-sticky .input-search-pro {
              font-size: 11.5px !important;
          }

          #contenedor {
              padding-top: 160px !important;
          }
      }

      /* ════════ 🎨 [J33] FILA DE ACCESOS + PANELES INVENTARIO ════════ */

      /* Fila de tarjetas de herramienta */
      .inv-herramientas-fila {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
          margin-bottom: 16px;
      }

      .inv-tool {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          padding: 12px 6px;
          background: var(--bg-card, #fff);
          border: 1.5px solid #e6ebf0;
          border-radius: 14px;
          cursor: pointer;
          transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
          min-height: 72px;
      }

      .inv-tool:hover {
          border-color: var(--turquesa, #00C8B6);
          box-shadow: 0 4px 14px rgba(0, 200, 182, .15);
      }

      .inv-tool:active {
          transform: scale(.94);
      }

      .inv-tool-txt {
          font-size: 11px;
          font-weight: 700;
          color: var(--dark-blue, #0D2137);
          text-align: center;
          line-height: 1.1;
      }

      .inv-tool-badge {
          position: absolute;
          top: 6px;
          right: 8px;
          background: #f97316;
          color: #fff;
          border-radius: 20px;
          padding: 1px 7px;
          font-size: 11px;
          font-weight: 800;
          min-width: 18px;
          text-align: center;
      }

      /* Paneles deslizables (Descuentos y Asistente) */
      .inv-panel-deslizable {
          position: fixed;
          top: 0;
          right: 0;
          width: min(440px, 92vw);
          height: 100%;
          background: var(--bg-main, #f5f7fa);
          z-index: 3200;
          box-shadow: -8px 0 40px rgba(0, 0, 0, .35);
          transform: translateX(105%);
          transition: transform .32s cubic-bezier(.4, 0, .2, 1);
          display: flex;
          flex-direction: column;
          overflow: hidden;
      }

      .inv-panel-deslizable.abierto {
          transform: translateX(0);
      }

      .inv-panel-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 18px;
          background: var(--bg-card, #fff);
          border-bottom: 1px solid #e6ebf0;
          flex-shrink: 0;
      }

      .inv-panel-tit {
          font-size: 16px;
          font-weight: 800;
          color: var(--dark-blue, #0D2137);
      }

      .inv-panel-x {
          background: #f1f3f5;
          border: none;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 15px;
          color: #555;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .15s ease;
      }

      .inv-panel-x:active {
          background: #e2e6ea;
      }

      .inv-panel-body {
          flex: 1;
          overflow-y: auto;
          padding: 16px 18px 40px;
          -webkit-overflow-scrolling: touch;
      }

      /* Bloquea el scroll del fondo cuando hay un panel abierto */
      body.inv-panel-abierto {
          overflow: hidden;
      }

      /* Móvil: panel a pantalla completa */
      @media (max-width: 480px) {
          .inv-panel-deslizable {
              width: 100vw;
          }

          .inv-tool-txt {
              font-size: 10px;
          }

          .inv-tool {
              padding: 10px 4px;
              min-height: 66px;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .inv-panel-deslizable {
              transition: none;
          }
      }

      /* ════════ 🏛️ [J43] ESPEJO FISCAL SRI ════════ */
      .sri-wrap {
          max-width: 680px;
          margin: 0 auto;
          padding: 16px;
      }

      .sri-header {
          background: var(--bg-card, #fff);
          border: 1px solid var(--borde, #e6ebf0);
          border-radius: 16px;
          padding: 16px 18px;
          margin-bottom: 16px;
      }

      .sri-header-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 14px;
      }

      .sri-titulo {
          font-size: 18px;
          font-weight: 800;
          color: var(--texto-oscuro, #0D2137);
      }

      .sri-regimen {
          font-size: 11px;
          font-weight: 700;
          color: var(--turquesa, #00A896);
          background: var(--turquesa-light, #e8faf7);
          padding: 4px 10px;
          border-radius: 99px;
      }

      .sri-mes-nav {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
      }

      .sri-mes-btn {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          border: 1px solid var(--borde, #e6ebf0);
          background: var(--bg-main, #f5f7fa);
          color: var(--texto-oscuro, #0D2137);
          font-size: 20px;
          font-weight: 800;
          cursor: pointer;
          transition: background .15s;
      }

      .sri-mes-btn:active {
          background: var(--turquesa-light, #e8faf7);
      }

      .sri-mes-btn:disabled {
          opacity: .35;
          cursor: not-allowed;
      }

      .sri-mes-actual {
          font-size: 15px;
          font-weight: 800;
          color: var(--texto-oscuro, #0D2137);
          min-width: 140px;
          text-align: center;
      }

      .sri-seccion-tit {
          font-size: 13px;
          font-weight: 800;
          color: var(--texto-medio, #475569);
          text-transform: uppercase;
          letter-spacing: .03em;
          margin: 18px 4px 10px;
      }

      .sri-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
      }

      .sri-card {
          background: var(--bg-card, #fff);
          border: 1px solid var(--borde, #e6ebf0);
          border-radius: 14px;
          padding: 14px;
      }

      .sri-card-lbl {
          font-size: 11.5px;
          font-weight: 600;
          color: var(--texto-medio, #475569);
          margin-bottom: 6px;
          line-height: 1.3;
      }

      .sri-hint {
          color: #9aa5b1;
          font-weight: 500;
      }

      .sri-card-val {
          font-size: 20px;
          font-weight: 800;
          color: var(--texto-oscuro, #0D2137);
      }

      .sri-pos {
          color: #10b981;
      }

      .sri-neg {
          color: var(--coral, #e85555);
      }

      .sri-muted {
          color: #9aa5b1;
      }

      .sri-total-linea {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 14px;
          margin-top: 10px;
          background: var(--bg-main, #f5f7fa);
          border-radius: 12px;
          font-size: 14px;
          color: var(--texto-medio, #475569);
      }

      .sri-total-linea strong {
          font-size: 17px;
          color: var(--texto-oscuro, #0D2137);
      }

      .sri-resultado {
          margin-top: 12px;
          padding: 16px 18px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .sri-resultado-pagar {
          background: linear-gradient(135deg, rgba(232, 85, 85, .12), rgba(232, 85, 85, .04));
          border: 1.5px solid rgba(232, 85, 85, .3);
      }

      .sri-resultado-favor {
          background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(16, 185, 129, .04));
          border: 1.5px solid rgba(16, 185, 129, .3);
      }

      .sri-resultado-lbl {
          font-size: 13px;
          font-weight: 700;
          color: var(--texto-medio, #475569);
      }

      .sri-resultado-val {
          font-size: 24px;
          font-weight: 900;
          color: var(--texto-oscuro, #0D2137);
      }

      .sri-card-info {
          display: flex;
          gap: 12px;
          align-items: flex-start;
          background: var(--bg-card, #fff);
          border: 1px solid var(--borde, #e6ebf0);
          border-radius: 14px;
          padding: 14px;
          margin-top: 10px;
      }

      .sri-card-ico {
          font-size: 22px;
          flex-shrink: 0;
      }

      .sri-card-tit {
          font-size: 14px;
          font-weight: 800;
          color: var(--texto-oscuro, #0D2137);
          margin-bottom: 3px;
      }

      .sri-card-txt {
          font-size: 12px;
          color: var(--texto-medio, #475569);
          line-height: 1.5;
      }

      .sri-aviso-config {
          background: rgba(245, 158, 11, .1);
          border: 1.5px solid rgba(245, 158, 11, .35);
          border-radius: 12px;
          padding: 12px 14px;
          font-size: 12.5px;
          color: var(--texto-oscuro, #0D2137);
          margin-bottom: 16px;
          line-height: 1.5;
      }

      .sri-disclaimer {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          background: rgba(245, 158, 11, .08);
          border: 1px dashed rgba(245, 158, 11, .4);
          border-radius: 12px;
          padding: 14px;
          margin-top: 20px;
          font-size: 12px;
          color: var(--texto-medio, #475569);
          line-height: 1.5;
      }

      .sri-btn-compartir {
          width: 100%;
          margin-top: 16px;
          padding: 14px;
          border: none;
          border-radius: 14px;
          background: linear-gradient(135deg, #00E0C0, #00A896);
          color: #fff;
          font-size: 14px;
          font-weight: 800;
          cursor: pointer;
          transition: filter .15s;
      }

      .sri-btn-compartir:active {
          filter: brightness(.92);
      }

      .sri-cargando,
      .sri-error {
          text-align: center;
          padding: 50px 20px;
          color: var(--texto-medio, #475569);
      }

      .sri-spinner {
          width: 36px;
          height: 36px;
          border: 3px solid var(--borde, #e6ebf0);
          border-top-color: var(--turquesa, #00A896);
          border-radius: 50%;
          margin: 0 auto 16px;
          animation: sri-spin .8s linear infinite;
      }

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

      @media (max-width: 420px) {
          .sri-grid {
              grid-template-columns: 1fr;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .sri-spinner {
              animation: none;
          }
      }

      /* ════════ 🗑️ [J44] ELIMINAR CUENTA ════════ */
      .zona-peligro {
          margin-top: 28px;
          padding: 18px;
          border: 1.5px dashed rgba(217, 48, 37, .5);
          border-radius: 14px;
          background: rgba(217, 48, 37, .04);
      }

      .zona-peligro-tit {
          font-size: 13px;
          font-weight: 800;
          color: #d93025;
          text-transform: uppercase;
          letter-spacing: .04em;
          margin-bottom: 8px;
      }

      .zona-peligro-txt {
          font-size: 12px;
          color: var(--texto-medio, #475569);
          line-height: 1.5;
          margin: 0 0 14px;
      }

      .btn-eliminar-cuenta {
          width: 100%;
          padding: 13px;
          border: 1.5px solid #d93025;
          border-radius: 12px;
          background: transparent;
          color: #d93025;
          font-size: 14px;
          font-weight: 800;
          cursor: pointer;
          transition: background .15s, color .15s;
      }

      .btn-eliminar-cuenta:active {
          background: #d93025;
          color: #fff;
      }

      /* ════════ 🎨 [J48] LOGO CENTRADO EN HEADER (cara B) ════════ */

      /* Ocultar el texto "MENÚ" del chip izquierdo: queda solo el ícono hamburguesa.
         El span sigue en el DOM (lo referencia app.js), solo se oculta visualmente. */
      .header-erp>button>#nombre-tienda-header {
          display: none;
      }

      /* El botón hamburguesa, ahora solo ícono, queda compacto y cuadrado */
      .header-erp>button {
          flex-shrink: 0;
          gap: 0;
      }

      .hdr-logo-centro {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          pointer-events: none;
          /* el logo no interfiere con los toques de los botones laterales */
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .hdr-logo-txt {
          font-size: 35px;
          font-weight: 900;
          color: var(--turquesa, #00C8B6);
          letter-spacing: -1px;
          line-height: 1;
          transform: rotate(-2deg);
          user-select: none;
          filter: drop-shadow(0 2px 6px rgba(0, 200, 182, 0.18));
      }

      .hdr-logo-acc {
          color: var(--coral, #FF6B6B);
          font-size: 35px;
          display: inline-block;
          transform: rotate(6deg);
          margin-left: 1px;
      }

      @media (max-width: 360px) {
          .hdr-logo-txt {
              font-size: 35px;
          }

          .hdr-logo-acc {
              font-size: 35px;
          }
      }


      /* ========================================= */
      /* 🛍️ [CATALOGO-F3] Catálogo: tarjeta, filtros ⚙️ y panel del producto */
      /* ========================================= */
      .cat-fila-filtros {
          display: flex;
          gap: 8px;
          width: 100%;
          align-items: center;
          min-width: 0;
      }

      .cat-btn-filtros {
          flex: 0 0 auto;
          height: 38px;
          padding: 0 14px;
          border-radius: 10px;
          border: 1px solid #e2e8f0;
          background: #ffffff;
          font-weight: 800;
          font-size: 13px;
          color: #2d3436;
          cursor: pointer;
          white-space: nowrap;
          font-family: inherit;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
      }

      .cat-btn-filtros.activo {
          border-color: var(--turquesa, #00C8B6);
          background: rgba(0, 200, 182, 0.08);
          color: #00897b;
      }

      .cat-chips {
          flex: 1 1 auto;
          min-width: 0;
          display: flex;
          gap: 6px;
          overflow-x: auto;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
      }

      .cat-chips::-webkit-scrollbar {
          display: none;
      }

      .cat-chip {
          flex: 0 0 auto;
          height: 30px;
          padding: 0 10px;
          border-radius: 15px;
          border: none;
          background: rgba(0, 200, 182, 0.12);
          color: #00796b;
          font-weight: 800;
          font-size: 12px;
          cursor: pointer;
          white-space: nowrap;
          font-family: inherit;
      }

      .cat-chip span {
          margin-left: 6px;
          opacity: 0.7;
      }

      .cat-chip-orden {
          background: #f1f2f6;
          color: #636e72;
      }

      /* Tarjeta */
      .mini-precio-antes {
          font-size: 12px;
          color: #b2bec3;
          font-weight: 700;
          margin-left: 5px;
      }

      .mini-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px 6px;
          margin-top: 6px;
          min-height: 14px;
      }

      .mini-dots {
          display: flex;
          align-items: center;
          gap: 3px;
          flex-shrink: 0;
      }

      .mini-dots-mas {
          font-size: 10px;
          font-weight: 800;
          color: #636e72;
          margin-left: 2px;
      }

      .mini-meta-txt {
          font-size: 11px;
          color: #636e72;
          font-weight: 700;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 0;
      }

      .cat-dot {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid rgba(0, 0, 0, 0.18);
          box-sizing: border-box;
          flex-shrink: 0;
      }

      /* Panel de filtros (sube desde abajo) */
      .cat-sheet {
          position: fixed;
          inset: 0;
          z-index: 10001;
          visibility: hidden;
          pointer-events: none;
      }

      .cat-sheet.abierto {
          visibility: visible;
          pointer-events: auto;
      }

      .cat-sheet-fondo {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.35);
          opacity: 0;
          transition: opacity 0.25s;
      }

      .cat-sheet.abierto .cat-sheet-fondo {
          opacity: 1;
      }

      .cat-sheet-caja {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          max-width: 560px;
          margin: 0 auto;
          max-height: 85vh;
          background: #ffffff;
          border-radius: 22px 22px 0 0;
          display: flex;
          flex-direction: column;
          transform: translateY(100%);
          transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
          box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
      }

      .cat-sheet.abierto .cat-sheet-caja {
          transform: translateY(0);
      }

      .cat-sheet-cab {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 20px 8px;
          font-size: 16px;
          color: #2d3436;
      }

      .cat-sheet-x {
          background: none;
          border: none;
          font-size: 20px;
          cursor: pointer;
          color: #636e72;
      }

      .cat-sheet-cuerpo {
          overflow-y: auto;
          padding: 4px 20px 12px;
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .cat-sheet-cuerpo .input-search-pro {
          width: 100%;
      }

      .cat-lbl {
          display: block;
          font-size: 11px;
          font-weight: 800;
          color: #636e72;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin: 8px 0 4px;
      }

      .cat-colores {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      .cat-swatch {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 10px;
          border-radius: 16px;
          border: 1px solid #e2e8f0;
          background: #ffffff;
          font-size: 12px;
          font-weight: 700;
          color: #2d3436;
          cursor: pointer;
          font-family: inherit;
      }

      .cat-swatch.activo {
          border-color: var(--turquesa, #00C8B6);
          background: rgba(0, 200, 182, 0.1);
      }

      .cat-precio {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .cat-precio span {
          color: #b2bec3;
      }

      .cat-sheet-pie {
          display: flex;
          gap: 10px;
          padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
          border-top: 1px solid #f1f2f6;
      }

      .cat-btn-limpiar {
          flex: 0 0 auto;
          padding: 12px 18px;
          border-radius: 12px;
          border: 1px solid #dfe6e9;
          background: #ffffff;
          font-weight: 800;
          color: #636e72;
          cursor: pointer;
          font-family: inherit;
      }

      .cat-btn-ver {
          flex: 1;
          padding: 12px;
          border-radius: 12px;
          border: none;
          background: var(--turquesa, #00C8B6);
          color: #ffffff;
          font-weight: 900;
          font-size: 14px;
          cursor: pointer;
          font-family: inherit;
      }

      .cat-vacio {
          font-size: 12px;
          color: #b2bec3;
      }

      body.cat-sheet-abierto {
          overflow: hidden;
      }

      /* Panel del producto */
      .cat-pills {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin: -2px 0 12px;
      }

      .cat-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 4px 10px;
          border-radius: 14px;
          background: #f1f2f6;
          font-size: 12px;
          font-weight: 800;
          color: #2d3436;
      }

      .cat-sec-tit {
          font-size: 13px;
          font-weight: 800;
          color: #333;
          margin: 18px 0 10px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      .cat-otros-fila {
          display: flex;
          gap: 10px;
          overflow-x: auto;
          padding-bottom: 4px;
      }

      .cat-otro {
          flex: 0 0 auto;
          width: 78px;
          background: #ffffff;
          border: 2px solid #eeeeee;
          border-radius: 14px;
          padding: 4px;
          cursor: pointer;
          font-family: inherit;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
      }

      .cat-otro.actual {
          border-color: var(--turquesa, #00C8B6);
          cursor: default;
      }

      .cat-otro.agotado {
          opacity: 0.5;
      }

      .cat-otro img {
          width: 64px;
          height: 64px;
          object-fit: contain;
          border-radius: 10px;
          background: #f8f9fa;
      }

      .cat-otro-nom {
          font-size: 10px;
          font-weight: 800;
          color: #2d3436;
          display: flex;
          align-items: center;
          gap: 4px;
          max-width: 70px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }

      .cat-otro-nom .cat-dot {
          width: 10px;
          height: 10px;
      }

      .cat-admin {
          margin-top: 18px;
          padding: 14px;
          border-radius: 14px;
          background: #fff8e1;
          border: 1px dashed #f0c36d;
          font-size: 13px;
          color: #5d4a1f;
      }

      .cat-admin-fila {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          padding: 3px 0;
      }

      /* Tema Black */
      body.tema-black .cat-btn-filtros,
      body.tema-black .cat-swatch,
      body.tema-black .cat-btn-limpiar,
      body.tema-black .cat-otro,
      body.tema-black .cat-pill {
          background: #1A1A24;
          color: #F0F0F5;
          border-color: rgba(255, 255, 255, 0.1);
      }

      body.tema-black .cat-sheet-caja {
          background: #111117;
      }

      body.tema-black .cat-sheet-cab,
      body.tema-black .cat-otro-nom,
      body.tema-black .cat-sec-tit {
          color: #F0F0F5;
      }

      body.tema-black .cat-sheet-pie {
          border-top-color: rgba(255, 255, 255, 0.08);
      }

      body.tema-black .mini-meta-txt,
      body.tema-black .mini-dots-mas {
          color: #A0A0B0;
      }

      body.tema-black .cat-admin {
          background: rgba(240, 195, 109, 0.08);
          color: #F0E2C0;
      }

      body.tema-black #cat-filtros-sheet .input-search-pro {
          background: #1A1A24 !important;
          color: #F0F0F5 !important;
          border-color: rgba(255, 255, 255, 0.12) !important;
      }

      body.tema-black #cat-filtros-sheet .input-search-pro::placeholder {
          color: #A0A0B0 !important;
      }

      body.tema-black #cat-filtros-sheet option {
          color: #1E2B38;
          background: #ffffff;
      }

      /* Tema Orquídea: los selectores del panel, todos iguales y legibles */
      body.tema-orquidea #cat-filtros-sheet .input-search-pro {
          background: #ffffff !important;
          color: #2A1838 !important;
          border-color: #e2e8f0 !important;
      }

      body.tema-black .cat-dot {
          border-color: rgba(255, 255, 255, 0.35);
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 0] Cimientos del sistema de diseño
         - Variables (--pp-*) para los 3 temas: Clásico, Black PRO y Orquídea.
         - Escala de letra, radios, espacios, alturas, sombras y capas.
         - Componentes base (.pp-*) listos para las fases siguientes.
         - Lo ÚNICO que cambia a la vista hoy: la fuente Inter en el ERP.
           El catálogo de clientes (cara A) y el logo siguen en Poppins.
         ═══════════════════════════════════════════════════════════════════ */

      /* ── Tema Clásico (por defecto) ── */
      :root {
          /* Fuentes */
          --pp-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
          --pp-fuente-marca: 'Poppins', 'Inter', sans-serif;
          --pp-fuente-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

          /* Escala de letra (7 tamaños + 11 px solo para rótulos y barra inferior) */
          --pp-fs-11: 11px;
          --pp-fs-12: 12px;
          --pp-fs-13: 13px;
          --pp-fs-15: 15px;
          --pp-fs-17: 17px;
          --pp-fs-20: 20px;
          --pp-fs-28: 28px;
          --pp-fs-34: 34px;
          --pp-fw-normal: 400;
          --pp-fw-medio: 500;
          --pp-fw-fuerte: 600;

          /* Radios */
          --pp-radio-s: 6px;
          --pp-radio-m: 10px;
          --pp-radio-l: 14px;
          --pp-radio-full: 999px;

          /* Espacios (múltiplos de 4) */
          --pp-esp-1: 4px;
          --pp-esp-2: 8px;
          --pp-esp-3: 12px;
          --pp-esp-4: 16px;
          --pp-esp-5: 20px;
          --pp-esp-6: 24px;
          --pp-esp-8: 32px;

          /* Alturas de control (tamaño de dedo) */
          --pp-alto-control: 44px;
          --pp-alto-control-l: 52px;

          /* Capas */
          --pp-z-sticky: 100;
          --pp-z-nav: 900;
          --pp-z-menu: 1000;
          --pp-z-modal: 2000;
          --pp-z-toast: 3000;

          /* Neutros (Zinc) */
          --pp-fondo: #FAFAFA;
          --pp-superficie: #FFFFFF;
          --pp-sutil: #F4F4F5;
          --pp-borde: #E4E4E7;
          --pp-borde-fuerte: #D4D4D8;
          --pp-texto: #18181B;
          --pp-texto-2: #52525B;
          --pp-texto-3: #71717A;
          --pp-texto-off: #A1A1AA;

          /* Acento: esmeralda profundo (acción principal, activo y positivo) */
          --pp-acento: #047857;
          --pp-acento-hover: #065F46;
          --pp-sobre-acento: #FFFFFF;
          --pp-acento-suave: #ECFDF5;
          --pp-acento-texto: #047857;

          /* Estados */
          --pp-positivo: #047857;
          --pp-negativo: #DC2626;
          --pp-negativo-suave: #FEF2F2;
          --pp-aviso: #B45309;
          --pp-aviso-suave: #FFFBEB;

          /* Marca (solo logo, splash y Pili) */
          --pp-marca-1: #00D1B2;
          --pp-marca-2: #FF6B6B;

          /* Gráficos: 5 tonos apagados, separados de la interfaz */
          --pp-dato-1: #2F7D6D;
          --pp-dato-2: #5B6C9A;
          --pp-dato-3: #B07A3B;
          --pp-dato-4: #8E5E8F;
          --pp-dato-5: #71717A;

          /* Efectos */
          --pp-velo: rgba(9, 9, 11, .40);
          --pp-foco: 0 0 0 3px rgba(4, 120, 87, .25);
          --pp-sombra-flotante: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
      }

      /* ── Tema Black PRO ── */
      body.tema-black {
          --pp-fondo: #09090B;
          --pp-superficie: #131316;
          --pp-sutil: #1C1C20;
          --pp-borde: #26262B;
          --pp-borde-fuerte: #3F3F46;
          --pp-texto: #FAFAFA;
          --pp-texto-2: #A1A1AA;
          --pp-texto-3: #8B8B95;
          --pp-texto-off: #52525B;
          --pp-acento: #34D399;
          --pp-acento-hover: #6EE7B7;
          --pp-sobre-acento: #052E1F;
          --pp-acento-suave: rgba(52, 211, 153, .14);
          --pp-acento-texto: #6EE7B7;
          --pp-positivo: #34D399;
          --pp-negativo: #F87171;
          --pp-negativo-suave: rgba(248, 113, 113, .14);
          --pp-aviso: #FBBF24;
          --pp-aviso-suave: rgba(251, 191, 36, .14);
          --pp-dato-1: #4FB39C;
          --pp-dato-2: #8193C4;
          --pp-dato-3: #D19A5A;
          --pp-dato-4: #B784B8;
          --pp-dato-5: #8B8B95;
          --pp-velo: rgba(0, 0, 0, .60);
          --pp-foco: 0 0 0 3px rgba(52, 211, 153, .35);
          --pp-sombra-flotante: 0 12px 32px rgba(0, 0, 0, .50);
      }

      /* ── Tema Orquídea (la app activa tema-black + tema-orquidea) ── */
      body.tema-black.tema-orquidea {
          --pp-fondo: #140F1A;
          --pp-superficie: #1B1423;
          --pp-sutil: #251B2F;
          --pp-borde: #33273F;
          --pp-borde-fuerte: #4A3A5C;
          --pp-texto: #F6F1FA;
          --pp-texto-2: #BCAACF;
          --pp-texto-3: #9C8AB2;
          --pp-texto-off: #5E4E70;
          --pp-acento: #C69CF2;
          --pp-acento-hover: #DCC3F8;
          --pp-sobre-acento: #1E0F2E;
          --pp-acento-suave: rgba(198, 156, 242, .16);
          --pp-acento-texto: #DCC3F8;
          --pp-positivo: #34D399;
          --pp-negativo: #F87171;
          --pp-negativo-suave: rgba(248, 113, 113, .14);
          --pp-aviso: #FBBF24;
          --pp-aviso-suave: rgba(251, 191, 36, .14);
          --pp-marca-2: #E8ADAA;
          --pp-velo: rgba(8, 4, 12, .60);
          --pp-foco: 0 0 0 3px rgba(198, 156, 242, .35);
          --pp-sombra-flotante: 0 12px 32px rgba(0, 0, 0, .55);
      }

      /* ── Lo único visible en la Fase 0: Inter en el ERP ──
         Se activa solo mientras el ERP está abierto (#vista-erp activa).
         La tienda del cliente no cambia. Cifras tabulares: los montos se alinean. */
      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on {
          font-family: var(--pp-fuente);
          font-variant-numeric: tabular-nums;
      }

      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) :is(button, input, select, textarea) · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on button,
      body:not(#pp-z0).pp-ve-on input,
      body:not(#pp-z0).pp-ve-on select,
      body:not(#pp-z0).pp-ve-on textarea {
          font-family: inherit;
      }

      /* El logo del encabezado sigue siendo la marca (Poppins) */
      .hdr-logo-txt,
      .hdr-logo-acc {
          font-family: var(--pp-fuente-marca);
      }

      /* ═══ Componentes base (se empiezan a usar desde la Fase 1) ═══ */

      .pp-num {
          font-variant-numeric: tabular-nums;
      }

      .pp-mono {
          font-family: var(--pp-fuente-mono);
          font-size: .92em;
      }

      .pp-tarjeta {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          padding: 14px;
          box-shadow: none;
          box-sizing: border-box;
      }

      .pp-etiqueta-seccion {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-rotulo {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-monto {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pp-monto-m {
          font-size: 22px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pp-delta {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-3);
      }

      .pp-delta--sube {
          color: var(--pp-positivo);
      }

      .pp-delta--baja {
          color: var(--pp-negativo);
      }

      .pp-chip {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          border-radius: var(--pp-radio-s);
          padding: 2px 6px;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .pp-chip--acento {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-chip--negativo {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pp-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: var(--pp-esp-2);
          height: var(--pp-alto-control);
          padding: 0 var(--pp-esp-4);
          border: 1px solid transparent;
          border-radius: var(--pp-radio-m);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1;
          cursor: pointer;
          box-sizing: border-box;
          transition: background-color .15s ease, border-color .15s ease, color .15s ease;
      }

      .pp-btn:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pp-btn:disabled {
          opacity: .5;
          cursor: not-allowed;
      }

      .pp-btn--primario {
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      .pp-btn--primario:hover {
          background: var(--pp-acento-hover);
      }

      .pp-btn--secundario {
          background: var(--pp-superficie);
          border-color: var(--pp-borde-fuerte);
          color: var(--pp-texto);
      }

      .pp-btn--secundario:hover {
          background: var(--pp-sutil);
      }

      .pp-btn--fantasma {
          background: transparent;
          color: var(--pp-texto-2);
      }

      .pp-btn--fantasma:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pp-btn--peligro {
          background: transparent;
          color: var(--pp-negativo);
      }

      .pp-btn--peligro:hover {
          background: var(--pp-negativo-suave);
      }

      .pp-btn--l {
          height: var(--pp-alto-control-l);
          font-size: 16px;
          border-radius: 12px;
      }

      .pp-btn--bloque {
          display: flex;
          width: 100%;
      }

      .pp-btn--icono {
          width: var(--pp-alto-control);
          padding: 0;
      }

      .pp-campo {
          height: var(--pp-alto-control);
          width: 100%;
          box-sizing: border-box;
          padding: 0 var(--pp-esp-3);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          outline: none;
          transition: border-color .15s ease, box-shadow .15s ease;
      }

      .pp-campo::placeholder {
          color: var(--pp-texto-3);
      }

      .pp-campo:focus {
          border-color: var(--pp-acento);
          box-shadow: var(--pp-foco);
      }

      .pp-segmentado {
          display: flex;
          gap: 2px;
          padding: 3px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-segmentado>button {
          flex: 1;
          height: 36px;
          border: 1px solid transparent;
          border-radius: 8px;
          background: transparent;
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .pp-segmentado>button.activo,
      .pp-segmentado>button[aria-selected="true"] {
          background: var(--pp-superficie);
          border-color: var(--pp-borde);
          color: var(--pp-texto);
      }

      .pp-lista {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
      }

      .pp-lista-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          min-height: 56px;
          padding: 10px 14px;
          box-sizing: border-box;
          border-top: 1px solid var(--pp-borde);
          color: var(--pp-texto);
          text-decoration: none;
      }

      .pp-lista-fila:first-child {
          border-top: 0;
      }

      .pp-icono-caja {
          width: 32px;
          height: 32px;
          flex-shrink: 0;
          border-radius: 8px;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .pp-icono {
          width: 20px;
          height: 20px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.5;
          stroke-linecap: round;
          stroke-linejoin: round;
          flex-shrink: 0;
      }

      .pp-divisor {
          height: 1px;
          background: var(--pp-borde);
          border: 0;
          margin: var(--pp-esp-2) 0;
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 1] ESTRUCTURA
         Encabezado · Menú lateral · Barra inferior · Botón + · Hoja
         "¿Qué registramos?" · Modales genéricos.
         Solo usa tokens --pp-* de la Fase 0 → funciona en los 3 temas.
         Debe ir AL FINAL de styles.css (gana a las reglas viejas).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Encabezado ── */
      #vista-erp .header-erp {
          background: var(--pp-superficie);
          border-bottom: 1px solid var(--pp-borde);
          box-shadow: none;
          padding: 0 var(--pp-esp-2);
      }

      /* Hamburguesa: solo ícono, sin chip de color */
      #vista-erp .header-erp>button {
          width: var(--pp-alto-control);
          height: var(--pp-alto-control);
          padding: 0;
          justify-content: center;
          background: transparent;
          border: 0;
          border-radius: var(--pp-radio-m);
          color: var(--pp-texto);
      }

      #vista-erp .header-erp>button:hover,
      #vista-erp .header-erp>button:active {
          background: var(--pp-sutil);
          transform: none;
      }

      #vista-erp .header-erp>button svg {
          width: 22px;
          height: 22px;
          stroke: currentColor;
          stroke-width: 1.5;
      }

      /* Centro: logo (solo en Inicio) o nombre del módulo */
      #vista-erp .header-erp .hdr-logo-centro {
          max-width: calc(100% - 208px);
      }

      #vista-erp .header-erp .hdr-logo-txt {
          font-family: var(--pp-fuente-marca);
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          letter-spacing: -.02em;
          line-height: 1;
          transform: none;
          filter: none;
      }

      #vista-erp .header-erp .hdr-logo-acc {
          font-size: inherit;
          font-weight: inherit;
          color: var(--pp-marca-2);
          transform: none;
          margin-left: 1px;
      }

      #vista-erp .header-erp .hdr-titulo-modulo {
          display: none;
          margin: 0;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          letter-spacing: -.01em;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      #vista-erp .header-erp.con-titulo .hdr-logo-txt {
          display: none;
      }

      #vista-erp .header-erp.con-titulo .hdr-titulo-modulo {
          display: block;
      }

      /* Íconos de la derecha */
      #vista-erp .header-erp .hdr-icon-btn {
          width: var(--pp-alto-control);
          height: var(--pp-alto-control);
          border-radius: var(--pp-radio-m);
          color: var(--pp-texto-2);
      }

      #vista-erp .header-erp .hdr-icon-btn svg {
          stroke-width: 1.5;
      }

      #vista-erp .header-erp .hdr-icon-btn:hover,
      #vista-erp .header-erp .hdr-icon-btn:active {
          background: var(--pp-sutil);
          color: var(--pp-texto);
          transform: none;
      }

      #vista-erp .header-erp .hdr-icon-btn.activo {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          box-shadow: none;
      }

      #vista-erp .header-erp .hdr-icon-btn:focus-visible,
      #vista-erp .header-erp>button:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      /* Menú "⋯" (acciones rápidas) */
      #vista-erp #rp-header-slot.hdr-dropdown {
          min-width: 224px;
          padding: 6px;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: var(--pp-sombra-flotante);
      }

      #vista-erp #rp-header-slot.hdr-dropdown .hdr-icon-btn {
          width: 100%;
          height: var(--pp-alto-control);
          justify-content: flex-start;
          gap: var(--pp-esp-3);
          padding: 0 var(--pp-esp-3) !important;
          border-radius: 8px;
      }

      #vista-erp #rp-header-slot.hdr-dropdown .hdr-icon-btn:hover {
          background: var(--pp-sutil);
      }

      #vista-erp .header-erp .hdr-dropdown-lbl {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          letter-spacing: 0;
      }

      /* Panel de alertas (campana) */
      #vista-erp .alertas-panel {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: var(--pp-sombra-flotante);
      }

      #vista-erp .alertas-panel-head {
          padding: 8px 8px 8px 16px;
          border-bottom: 1px solid var(--pp-borde);
      }

      #vista-erp .header-erp .alertas-panel-head span {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          letter-spacing: 0;
      }

      /* La etiqueta flotante con efecto máquina de escribir se retira:
         ahora el nombre del módulo vive en el encabezado. */

      /* ── 2. Menú lateral ── */
      #menu-lateral {
          position: fixed;
          top: 0;
          left: 0;
          width: 304px;
          max-width: 85vw;
          height: 100vh;
          height: 100dvh;
          z-index: 9999;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background: var(--pp-superficie) !important;
          border-right: 1px solid var(--pp-borde) !important;
          box-shadow: none !important;
          color: var(--pp-texto);
      }

      #menu-lateral.abierto {
          box-shadow: var(--pp-sombra-flotante) !important;
      }

      /* Los temas viejos pintan todos los span/div del menú: los neutralizamos */
      #menu-lateral span,
      #menu-lateral div {
          color: inherit;
      }

      #menu-lateral .pp-menu-cabecera {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3) var(--pp-esp-2) var(--pp-esp-3) var(--pp-esp-4);
          border-bottom: 1px solid var(--pp-borde);
          flex-shrink: 0;
      }

      #menu-lateral .pp-menu-identidad {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      #menu-lateral .pp-menu-negocio {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          letter-spacing: -.01em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      #menu-lateral .pp-menu-usuario {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      #menu-lateral .pp-menu-usuario:empty {
          display: none;
      }

      #menu-lateral .pp-menu-cuerpo {
          flex: 1;
          overflow-y: auto;
          overscroll-behavior-y: contain;
          padding: var(--pp-esp-2) var(--pp-esp-3) var(--pp-esp-4);
      }

      #menu-lateral .menu-seccion-label {
          display: block;
          width: auto;
          margin: var(--pp-esp-5) 0 var(--pp-esp-1);
          padding: 0 var(--pp-esp-3);
          background: none;
          border-radius: 0;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      #menu-lateral .menu-seccion-label:first-child {
          margin-top: var(--pp-esp-2);
      }

      #menu-lateral .menu-item-lateral {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          width: 100%;
          min-height: var(--pp-alto-control);
          margin: 0;
          padding: 0 var(--pp-esp-3);
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          text-align: left;
          cursor: pointer;
          transform: none;
          -webkit-tap-highlight-color: transparent;
      }

      #menu-lateral .menu-item-lateral:hover,
      #menu-lateral .menu-item-lateral:active {
          background: var(--pp-sutil);
          color: var(--pp-texto);
          transform: none;
      }

      #menu-lateral .menu-item-lateral:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      #menu-lateral .menu-item-lateral svg {
          width: 20px;
          height: 20px;
          color: var(--pp-texto-2);
          stroke: currentColor;
          stroke-width: 1.5;
          fill: none;
      }

      #menu-lateral .menu-item-lateral:hover svg {
          color: var(--pp-texto);
      }

      #menu-lateral .menu-item-lateral.activo {
          background: var(--pp-sutil);
          font-weight: var(--pp-fw-fuerte);
      }

      #menu-lateral .menu-item-lateral.activo svg {
          color: var(--pp-acento-texto);
      }

      /* Mi suscripción: chip del plan a la derecha */
      #menu-lateral #badge-plan-menu {
          margin-left: auto;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          border: 1px solid var(--pp-borde);
      }

      #menu-lateral #badge-plan-menu.pp-chip--acento {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          border-color: transparent;
      }

      /* Restaurar sistema (zona de peligro) */
      #menu-lateral .menu-danger-wrap {
          margin-top: var(--pp-esp-3);
          padding-top: var(--pp-esp-2);
          border-top: 1px solid var(--pp-borde);
      }

      #menu-lateral .menu-item-danger,
      #menu-lateral .menu-item-danger svg {
          color: var(--pp-negativo) !important;
      }

      #menu-lateral .menu-item-danger:hover {
          background: var(--pp-negativo-suave) !important;
      }

      /* Pie: cerrar sesión + versión */
      #menu-lateral .pp-menu-pie {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--pp-esp-1);
          padding: var(--pp-esp-2) var(--pp-esp-3) calc(var(--pp-esp-2) + env(safe-area-inset-bottom));
          border-top: 1px solid var(--pp-borde);
          flex-shrink: 0;
      }

      #menu-lateral .pp-menu-version {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          font-variant-numeric: tabular-nums;
      }

      /* Fondo oscuro detrás del menú (sin desenfoque) */
      #overlay-menu {
          position: fixed;
          inset: 0;
          width: auto;
          height: auto;
          background: var(--pp-velo);
          z-index: 9998;
      }

      #overlay-menu.activo {
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

      /* ── 3. Barra inferior ── */
      #vista-erp .bottom-nav {
          background: var(--pp-superficie);
          border-top: 1px solid var(--pp-borde);
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

      #vista-erp .bottom-nav button {
          gap: var(--pp-esp-1);
          color: var(--pp-texto-3);
          -webkit-tap-highlight-color: transparent;
      }

      #vista-erp .bottom-nav button svg {
          width: 22px;
          height: 22px;
          stroke-width: 1.5;
      }

      #vista-erp .bottom-nav button span {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: 0;
      }

      #vista-erp .bottom-nav button.activo {
          color: var(--pp-acento-texto);
      }

      #vista-erp .bottom-nav button.activo span {
          font-weight: var(--pp-fw-fuerte);
      }

      #vista-erp .bottom-nav button.activo svg {
          transform: none;
          filter: none;
          animation: none;
      }

      #vista-erp .bottom-nav button.activo::before {
          content: none;
          display: none;
      }

      /* ── 4. Botón + central (se mantiene el halo, en el acento del tema) ── */
      #btn-inicio-flotante {
          border: 2px solid transparent;
          background:
              linear-gradient(var(--pp-superficie), var(--pp-superficie)) padding-box,
              linear-gradient(135deg, var(--pp-acento), var(--pp-acento-hover)) border-box !important;
          box-shadow: 0 0 0 4px var(--pp-acento-suave), var(--pp-sombra-flotante) !important;
      }

      #btn-inicio-flotante:active {
          transform: translateX(-50%) scale(.94);
          box-shadow: 0 0 0 2px var(--pp-acento-suave), var(--pp-sombra-flotante) !important;
      }

      #btn-inicio-flotante:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco), var(--pp-sombra-flotante) !important;
      }

      #btn-inicio-flotante::after {
          border-color: var(--pp-acento);
      }

      #btn-inicio-flotante svg {
          width: 28px;
          height: 28px;
          stroke: var(--pp-acento-texto);
          stroke-width: 2;
      }

      /* ── 5. Hoja "¿Qué registramos?" ── */
      #modal-accion-central.pp-hoja-overlay {
          /* display (none/flex) lo controla app.js */
          align-items: flex-end;
          justify-content: center;
          z-index: 99999;
          background: var(--pp-velo) !important;
          border: 0 !important;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

      #modal-accion-central .pp-hoja {
          position: relative;
          width: 100%;
          max-width: 520px;
          max-height: calc(100vh - 24px);
          max-height: calc(100dvh - 24px);
          overflow-y: auto;
          overscroll-behavior: contain;
          box-sizing: border-box;
          padding: var(--pp-esp-2) var(--pp-esp-4) calc(var(--pp-esp-4) + env(safe-area-inset-bottom));
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde) !important;
          border-bottom: 0 !important;
          border-radius: 16px 16px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          color: var(--pp-texto);
          text-align: left;
          animation: slideUpAccion .28s cubic-bezier(.22, 1, .36, 1);
      }

      #modal-accion-central .pp-hoja-handle {
          width: 36px;
          height: 4px;
          margin: 0 auto var(--pp-esp-3);
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde-fuerte);
      }

      #modal-accion-central .pp-hoja-titulo {
          margin: 0 0 var(--pp-esp-3);
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.3;
          letter-spacing: -.01em;
          color: var(--pp-texto) !important;
      }

      /* Franja del día: ↑ ingresos · ↓ gastos · saldo */
      #modal-accion-central .modal-datos-dia {
          justify-content: flex-start;
          gap: var(--pp-esp-2);
          margin: 0 0 var(--pp-esp-3);
          padding: 10px var(--pp-esp-3);
          background: var(--pp-sutil);
          border: 0;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
          font-variant-numeric: tabular-nums;
      }

      #modal-accion-central #modal-dia-ing {
          color: var(--pp-positivo);
      }

      #modal-accion-central #modal-dia-gas {
          color: var(--pp-negativo);
      }

      #modal-accion-central #modal-dia-sal {
          color: var(--pp-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      #modal-accion-central .modal-datos-dia.negativo #modal-dia-sal {
          color: var(--pp-negativo);
      }

      #modal-accion-central .modal-datos-dia .sep {
          color: var(--pp-texto-off);
      }

      /* Nivel 1: Entra dinero / Sale dinero */
      #modal-accion-central .btn-titan {
          min-height: 72px;
          padding: 14px;
          gap: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: none;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          filter: none;
          -webkit-tap-highlight-color: transparent;
      }

      #modal-accion-central .btn-titan:hover {
          background: var(--pp-sutil);
          border-color: var(--pp-borde-fuerte);
          transform: none;
          filter: none;
      }

      #modal-accion-central .btn-titan:active {
          background: var(--pp-sutil);
          transform: scale(.99);
      }

      #modal-accion-central .btn-titan-icono {
          width: 40px;
          height: 40px;
          border-radius: var(--pp-radio-m);
      }

      #modal-accion-central .btn-entra .btn-titan-icono {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      #modal-accion-central .btn-sale .btn-titan-icono {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #modal-accion-central .btn-titan-titulo {
          font-size: 16px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.01em;
          color: var(--pp-texto);
      }

      #modal-accion-central .btn-titan-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
          opacity: 1;
      }

      #modal-accion-central .btn-titan-flecha {
          color: var(--pp-texto-3);
          opacity: 1;
      }

      /* Nivel 2 y 3: filas de opción */
      #modal-accion-central .opcion-card {
          min-height: 64px;
          padding: var(--pp-esp-3);
          gap: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: 12px;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          -webkit-tap-highlight-color: transparent;
      }

      #modal-accion-central .opcion-card:hover {
          background: var(--pp-sutil);
          border-color: var(--pp-borde-fuerte);
      }

      #modal-accion-central .opcion-card:active {
          background: var(--pp-sutil);
          transform: scale(.99);
      }

      #modal-accion-central .opcion-card:focus-visible,
      #modal-accion-central .btn-titan:focus-visible,
      #modal-accion-central .otros-ing-btn-confirmar:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      #modal-accion-central .opcion-card-icono {
          width: 36px;
          height: 36px;
          border-radius: var(--pp-radio-m);
          font-size: 0;
      }

      #modal-accion-central .opcion-card-icono svg,
      #modal-accion-central .badge-lock-pro svg {
          width: 20px;
          height: 20px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.5;
          stroke-linecap: round;
          stroke-linejoin: round;
      }

      #modal-accion-central .opcion-card.verde .opcion-card-icono {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      #modal-accion-central .opcion-card.roja .opcion-card-icono {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #modal-accion-central .opcion-card-titulo {
          margin-bottom: 2px;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      #modal-accion-central .opcion-card-desc {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
          opacity: 1;
      }

      #modal-accion-central .opcion-card-flecha {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
          fill: none;
          stroke: var(--pp-texto-3);
          stroke-width: 1.5;
          stroke-linecap: round;
          stroke-linejoin: round;
          opacity: 1;
      }

      /* Sugerencia inteligente del Brain */
      #modal-accion-central .opcion-card.sugerida {
          background: var(--pp-superficie) !important;
          border-color: var(--pp-acento) !important;
          color: var(--pp-texto) !important;
          box-shadow: inset 0 0 0 1px var(--pp-acento);
      }

      #modal-accion-central .opcion-card.sugerida .opcion-card-icono {
          background: var(--pp-acento-suave) !important;
      }

      #modal-accion-central .badge-sugerido {
          top: -9px;
          left: 12px;
          padding: 2px 8px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: 0;
          text-transform: none;
      }

      /* Candado PRO (se oculta solo cuando el plan es PRO) */
      #modal-accion-central .badge-lock-pro {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          margin-left: 0;
          padding: 2px 6px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          opacity: 1;
          flex-shrink: 0;
      }

      #modal-accion-central .badge-lock-pro svg {
          width: 12px;
          height: 12px;
      }

      body.plan-pro #modal-accion-central .badge-lock-pro {
          display: none;
      }

      /* Títulos de grupo en "Otros ingresos" */
      #modal-accion-central .pp-hoja-grupo {
          padding: var(--pp-esp-2) var(--pp-esp-1) 0;
      }

      #modal-accion-central .pp-hoja-grupo:first-child {
          padding-top: 0;
      }

      /* Formulario de "Otros ingresos" */
      #modal-accion-central .otros-ing-form {
          margin-top: 0;
          padding: var(--pp-esp-4);
          background: var(--pp-sutil);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      #modal-accion-central .pp-hoja-form-titulo {
          margin-bottom: var(--pp-esp-3);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #modal-accion-central .otros-ing-form label {
          margin: var(--pp-esp-3) 0 6px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          letter-spacing: 0;
          text-transform: none;
          color: var(--pp-texto-2) !important;
      }

      #modal-accion-central .pp-hoja-form-titulo+label {
          margin-top: 0;
      }

      #modal-accion-central .otros-ing-form input,
      #modal-accion-central .otros-ing-form select {
          height: var(--pp-alto-control);
          padding: 0 var(--pp-esp-3);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-normal);
      }

      #modal-accion-central .otros-ing-form input::placeholder {
          color: var(--pp-texto-3);
      }

      #modal-accion-central .otros-ing-form input:focus,
      #modal-accion-central .otros-ing-form select:focus {
          border-color: var(--pp-acento);
          box-shadow: var(--pp-foco);
      }

      #modal-accion-central .otros-ing-btn-confirmar {
          height: var(--pp-alto-control-l);
          margin-top: var(--pp-esp-4);
          padding: 0;
          border-radius: 12px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-family: var(--pp-fuente);
          font-size: 16px;
          font-weight: var(--pp-fw-fuerte);
      }

      #modal-accion-central .otros-ing-btn-confirmar:hover {
          background: var(--pp-acento-hover);
      }

      /* Pie: Atrás / Cancelar */
      #modal-accion-central .pp-hoja-pie {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-4);
      }

      #modal-accion-central .pp-hoja-cancelar {
          margin-left: auto;
      }

      /* ── 6. Modales genéricos del ERP (Comunicados, Perfil B2B…) ── */
      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-overlay · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on .pilas-modal-overlay {
          background: var(--pp-velo);
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-card · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on .pilas-modal-card {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-bottom: 0;
          border-radius: 16px 16px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          color: var(--pp-texto);
      }

      @media (min-width: 640px) {

          /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-card · la clase la pone estilos-estado.js (misma especificidad) */
          body:not(#pp-z0).pp-ve-on .pilas-modal-card {
              border-bottom: 1px solid var(--pp-borde);
              border-radius: 16px;
          }
      }

      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-head · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on .pilas-modal-head {
          padding: var(--pp-esp-3) var(--pp-esp-3) var(--pp-esp-3) var(--pp-esp-4);
          border-bottom: 1px solid var(--pp-borde);
      }

      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-x · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on .pilas-modal-x {
          width: 36px;
          height: 36px;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
      }

      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-x:hover · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on .pilas-modal-x:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      /* 🎨 [f221] Antes: body:has(> #vista-erp.view-active) .pilas-modal-body · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0).pp-ve-on .pilas-modal-body {
          padding: var(--pp-esp-4);
      }

      @media (prefers-reduced-motion: reduce) {
          #modal-accion-central .pp-hoja {
              animation: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 2] INICIO Y NÚMEROS
         Tarjetas de métricas · pestañas · Radar · Metas · Pili · Pulso
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 1).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 0. Contenedores de módulo ── */
      #mod-inicio,
      #mod-numeros {
          gap: var(--pp-esp-3) !important;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px !important;
          box-sizing: border-box;
      }

      #mod-numeros {
          flex-direction: column;
      }

      /* app.js muestra Inicio con display:block; lo pasamos a columna flex para el espaciado */
      #mod-inicio[style*="display: block"],
      #mod-inicio[style*="display:block"] {
          display: flex !important;
          flex-direction: column;
      }

      #mod-numeros>div,
      #dashboard-financiero-wrap>div {
          box-sizing: border-box;
      }

      #dashboard-financiero-wrap {
          display: flex !important;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      #dashboard-financiero-wrap[style*="display:none"],
      #dashboard-financiero-wrap[style*="display: none"] {
          display: none !important;
      }

      /* ── 1. Tarjetas de métricas ── */
      .pp-num-par {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-3);
      }

      #bloque-dias>.pp-num-par {
          margin-bottom: var(--pp-esp-3);
      }

      .pp-num-kpi {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-1);
          min-width: 0;
          color: var(--pp-texto);
      }

      .pp-num-kpi-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-num-kpi-monto {
          font-size: 26px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-num-kpi-monto--m {
          font-size: 22px;
      }

      .pp-num-kpi-pie {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-2);
          padding-top: var(--pp-esp-2);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-num-kpi-pie--col {
          flex-direction: column;
          gap: 2px;
      }

      .pp-num-mini-rotulo {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-num-mini-valor {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pp-num-suave {
          color: var(--pp-texto-3);
          font-weight: var(--pp-fw-normal);
      }

      .pp-num-der {
          text-align: right;
      }

      #hud-margen:empty,
      .pp-radar-chip:empty {
          display: none;
      }

      /* Aviso "Por conciliar" (tarjetas en tránsito) sobre Saldo actual */
      #mod-numeros .notificacion-tarjeta {
          top: -9px;
          right: 10px;
          padding: 2px 8px;
          border-radius: var(--pp-radio-full);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: 0;
      }

      #mod-numeros .notificacion-tarjeta.alerta-activa {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          border: 1px solid var(--pp-aviso);
          box-shadow: none;
          animation: none;
      }

      /* Saldo neto + base inicial */
      .pp-num-saldo-neto {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-num-base {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-1);
          padding: var(--pp-esp-2) var(--pp-esp-1) var(--pp-esp-2) var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      #btn-editar-fondo[style*="inline-block"] {
          display: inline-flex !important;
      }

      .pp-num-base-editar {
          width: 36px;
          height: 36px;
      }

      /* ── 2. Pestañas Hoy / Mes / Metas (control segmentado) ── */
      #tab-bar-dashboard.pp-num-pestanas {
          border: 0;
      }

      #tab-bar-dashboard.pp-num-pestanas>button {
          font-size: var(--pp-fs-13);
      }

      #tab-bar-dashboard.pp-num-pestanas>button:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      /* ── 3. Radar del negocio ── */
      #bloque-radar {
          margin-top: var(--pp-esp-3);
      }

      .pp-radar-titulo {
          padding: 12px 14px 8px;
      }

      .pp-radar-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          width: 100%;
          min-height: 60px;
          padding: 10px 10px 10px 14px;
          border: 0;
          border-top: 1px solid var(--pp-borde);
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
          box-sizing: border-box;
          -webkit-tap-highlight-color: transparent;
      }

      .pp-radar-fila:hover,
      .pp-radar-fila:active {
          background: var(--pp-sutil);
      }

      .pp-radar-fila:focus-visible {
          outline: none;
          box-shadow: inset var(--pp-foco);
      }

      .pp-radar-cuerpo {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-radar-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .pp-radar-texto {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          font-variant-numeric: tabular-nums;
      }

      .pp-radar-flecha {
          width: 18px;
          height: 18px;
          color: var(--pp-texto-3);
      }

      .pp-radar-fila[data-estado="ok"] .pp-radar-chip {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-radar-fila[data-estado="aviso"] .pp-radar-chip {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .pp-radar-fila[data-estado="riesgo"] .pp-radar-chip {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pp-radar-fila[data-estado="riesgo"] .pp-icono-caja {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      /* ── 4. Metas: termómetro con anillos ── */
      .pp-metas {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-4);
      }

      #bloque-termometro.pp-metas[style*="display: block"],
      #bloque-termometro.pp-metas[style*="display:block"] {
          display: flex !important;
      }

      .pp-metas-anillos {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-meta {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;
          min-width: 0;
          text-align: center;
      }

      .pp-meta-anillo {
          width: 60px;
          height: 60px;
          display: block;
          margin-bottom: var(--pp-esp-1);
      }

      .pp-meta-pista {
          stroke: var(--pp-sutil);
      }

      .pp-meta-arco {
          stroke: var(--pp-acento);
          transition: stroke-dasharray 1.2s ease-out;
      }

      .pp-meta-pct {
          fill: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: 8px;
          font-weight: var(--pp-fw-fuerte);
          text-anchor: middle;
          dominant-baseline: middle;
      }

      .pp-meta-pct {
          transform: translateY(-3px);
      }

      .pp-meta-nombre {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pp-meta-valor {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
      }

      /* ── 5. Accesos rápidos ── */
      .pp-accesos {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-accesos-grilla {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-acceso {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          min-width: 0;
          padding: var(--pp-esp-2) 2px;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
      }

      .pp-acceso .pp-icono-caja {
          width: 44px;
          height: 44px;
          border-radius: 12px;
      }

      .pp-acceso:hover,
      .pp-acceso:active {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pp-acceso:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      /* ── 6. Inicio · encabezados de sección ── */
      .pp-inicio-seccion,
      #mod-inicio .nc-titulo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-inicio-contador {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      /* ── 7. Inicio · tarjeta de Pili (el robot se queda: es la marca) ── */
      #bloque-briefing .brain-card {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: none;
      }

      #bloque-briefing .brain-card::before {
          display: none;
      }

      #bloque-briefing .brain-card.brief-alerta {
          border-color: var(--pp-negativo);
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      #bloque-briefing .brain-card.brief-celebra {
          border-color: var(--pp-acento);
          box-shadow: inset 3px 0 0 var(--pp-acento);
      }

      #bloque-briefing .brain-card.brief-onboarding {
          border-color: var(--pp-aviso);
          box-shadow: inset 3px 0 0 var(--pp-aviso);
      }

      #bloque-briefing .brief-comando .comando-escenario {
          min-height: 188px;
          padding: var(--pp-esp-3) 60px var(--pp-esp-3) var(--pp-esp-3);
      }

      #bloque-briefing .brief-comando .brain-robot-wrap {
          width: 132px;
          height: 132px;
      }

      #bloque-briefing .brain-label {
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      #bloque-briefing .brain-sublabel {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      #bloque-briefing .brain-contexto-badge {
          margin: 0;
          padding: 2px 8px;
          border: 0;
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-12);
      }

      #bloque-briefing #brain-contexto-ico {
          display: none;
      }

      /* Botones del costado (dock) */
      #bloque-briefing .comando-dock {
          top: var(--pp-esp-3);
          right: var(--pp-esp-3);
          gap: var(--pp-esp-2);
      }

      #bloque-briefing .dock-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          padding: 0;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

      #bloque-briefing .dock-btn:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      #bloque-briefing .dock-btn.activo {
          background: var(--pp-acento-suave);
          border-color: transparent;
          color: var(--pp-acento-texto);
          box-shadow: none;
      }

      #bloque-briefing .dock-btn.dock-chat {
          border-color: var(--pp-borde-fuerte);
          box-shadow: none;
      }

      #bloque-briefing .dock-btn.dock-chat.activo {
          border-color: transparent;
      }

      #bloque-briefing .dock-btn:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      #bloque-briefing .dock-dot {
          top: -3px;
          right: -3px;
          width: 8px;
          height: 8px;
          background: var(--pp-marca-2);
          border: 2px solid var(--pp-superficie);
      }

      #bloque-briefing .dock-dot.encendido {
          animation: none;
      }

      /* Paneles */
      #bloque-briefing .comando-panel.abierto {
          margin: 0;
          padding: var(--pp-esp-3) var(--pp-esp-4) var(--pp-esp-4);
          border-top: 1px solid var(--pp-borde);
      }

      #bloque-briefing .panel-mini-head {
          justify-content: flex-start;
          gap: var(--pp-esp-2);
          margin-bottom: var(--pp-esp-2);
      }

      #bloque-briefing #brain-alerta-tag[style*="inline-block"] {
          display: inline-flex !important;
      }

      #bloque-briefing .pp-pili-fecha,
      #bloque-briefing #briefing-fecha {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      #bloque-briefing .brain-btn-reload {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          margin-left: auto;
          order: 0;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
      }

      #bloque-briefing .brain-btn-reload:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      #bloque-briefing .brain-mensaje-wrap {
          padding: 0;
          min-height: 0;
      }

      #bloque-briefing #briefing-mensaje {
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15) !important;
          font-weight: var(--pp-fw-normal) !important;
          line-height: 1.6 !important;
          color: var(--pp-texto) !important;
          display: inline;
      }

      #bloque-briefing #briefing-cursor {
          display: inline-block;
          width: 2px !important;
          height: 16px !important;
          margin-left: 2px;
          vertical-align: middle;
          background: var(--pp-acento) !important;
          animation: parpadeo-cursor .8s step-end infinite;
      }

      #bloque-briefing .brain-footer {
          padding: 0;
      }

      #bloque-briefing .panel-vacio {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          padding: 0;
      }

      /* Notas de causa / proyección (las arma brain.js) */
      .pp-pili-nota {
          margin-top: var(--pp-esp-2);
          padding: 10px var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-pili-nota strong {
          display: block;
          margin-bottom: 2px;
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-pili-acciones {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-3);
      }

      .pp-pili-votos {
          display: flex;
          gap: 6px;
      }

      .pp-pili-chip {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          height: 32px;
          padding: 0 var(--pp-esp-3);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          cursor: pointer;
      }

      .pp-pili-chip:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pp-pili-ir.pp-btn {
          height: 36px;
          padding: 0 var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          white-space: nowrap;
      }

      .pp-pili-secundarias {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-top: var(--pp-esp-4);
      }

      .pp-pili-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      /* Chat con Pili */
      #bloque-briefing .brain-chat-zona {
          padding: 0;
      }

      #bloque-briefing .brain-chat-titulo {
          margin-bottom: var(--pp-esp-2);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: 0;
          text-transform: none;
          color: var(--pp-texto);
      }

      #bloque-briefing .brain-chip {
          height: 32px;
          padding: 0 var(--pp-esp-3);
          border: 1px solid var(--pp-borde-fuerte);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
      }

      #bloque-briefing .brain-chip:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
          transform: none;
      }

      #bloque-briefing .brain-input-wrap,
      #bloque-briefing .panel-chat .brain-input-wrap {
          height: var(--pp-alto-control);
          padding: 0 4px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          box-shadow: none;
      }

      #bloque-briefing .brain-input-wrap:focus-within {
          border-color: var(--pp-acento);
          box-shadow: var(--pp-foco);
      }

      #bloque-briefing #brain-input-pregunta {
          width: 0 !important;
          min-width: 0;
          height: 100%;
          padding: 0 var(--pp-esp-2) !important;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15) !important;
          color: var(--pp-texto) !important;
      }

      #bloque-briefing #brain-input-pregunta::placeholder {
          color: var(--pp-texto-3) !important;
      }

      #bloque-briefing #brain-mic-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0 !important;
          border: 0;
          border-radius: 8px;
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
          flex-shrink: 0;
      }

      #bloque-briefing #brain-mic-btn[data-estado="grabando"] {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          animation: pp-mic-late 1.2s ease-in-out infinite;
      }

      #bloque-briefing #brain-mic-btn[data-estado="procesando"] {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      @keyframes pp-mic-late {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: .55;
          }
      }

      #bloque-briefing .brain-btn-enviar,
      body.tema-orquidea #bloque-briefing .brain-btn-enviar {
          width: 36px;
          height: 36px;
          margin: 0;
          border-radius: 8px;
          background: var(--pp-acento) !important;
          color: var(--pp-sobre-acento) !important;
          transform: none;
      }

      .pp-pili-hilo {
          flex-direction: column;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-3);
          max-height: 46vh;
          overflow-y: auto;
          padding-right: 4px;
      }

      .pp-pili-fila {
          display: flex;
          align-items: flex-start;
          gap: var(--pp-esp-2);
      }

      .pp-pili-fila--user {
          justify-content: flex-end;
      }

      .pp-pili-av {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-pili-av .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-pili-burbuja {
          max-width: 82%;
          padding: var(--pp-esp-2) var(--pp-esp-3);
          border-radius: 4px 14px 14px 14px;
          background: var(--pp-sutil);
          color: var(--pp-texto);
          font-size: var(--pp-fs-15);
          line-height: 1.5;
          white-space: pre-wrap;
      }

      .pp-pili-burbuja--user {
          border-radius: 14px 4px 14px 14px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      /* Barra de progreso del análisis */
      #bloque-briefing .brain-progress-bar {
          height: 2px;
          background: transparent;
      }

      #bloque-briefing .brain-progress-bar::after {
          display: none;
      }

      #bloque-briefing #briefing-progress,
      body.tema-orquidea #bloque-briefing #briefing-progress {
          height: 100%;
          width: 0%;
          background: var(--pp-acento) !important;
          border-radius: 0;
          transition: width .1s linear;
      }

      /* ── 8. Inicio · "Tus clientes están buscando" ── */
      #mod-inicio .nc-cabecera {
          margin-bottom: var(--pp-esp-2);
      }

      #mod-inicio .nc-btn-refrescar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
      }

      #mod-inicio .nc-btn-refrescar:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      #mod-inicio .nc-item {
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: 12px;
      }

      #mod-inicio .nc-item-wrap {
          border-radius: 12px;
      }

      #mod-inicio .nc-item-icono {
          width: 36px;
          height: 36px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: 0;
      }

      #mod-inicio .nc-item-icono.nc-compra {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      #mod-inicio .nc-item-titulo {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #mod-inicio .nc-item-detalle {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          opacity: 1;
      }

      #mod-inicio .nc-item-tiempo {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          opacity: 1;
      }

      #mod-inicio .nc-item-x {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0;
          border-radius: var(--pp-radio-m);
          color: var(--pp-texto-3);
          opacity: 1;
      }

      #mod-inicio .nc-item-x:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      #mod-inicio .nc-item-x .pp-icono {
          width: 18px;
          height: 18px;
      }

      #mod-inicio .nc-item-fondo {
          background: var(--pp-negativo);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      /* ── 9. Inicio · Pulso del negocio y progreso del vendedor ── */
      .pp-pulso,
      .pp-gam {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      #bloque-pulso[style*="display: block"],
      #bloque-pulso[style*="display:block"],
      #widget-gamificacion-inicio[style*="display: block"],
      #widget-gamificacion-inicio[style*="display:block"] {
          display: flex !important;
      }

      .pp-pulso-cab,
      .pp-gam-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          margin: 0 !important;
      }

      #mod-inicio #bloque-pulso>.pp-pulso-cab {
          margin: 0 !important;
      }

      .pp-pulso-titulo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-pulso-grilla {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-pulso-dato {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-pulso-valor {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.01em;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-pulso-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          font-variant-numeric: tabular-nums;
      }

      #mod-inicio #pulso-proy-wrap.pp-pulso-proy {
          padding: 0 !important;
          background: none;
      }

      .pp-pulso-proy {
          flex-direction: column;
          gap: 6px;
      }

      .pp-pulso-proy[style*="display: block"],
      .pp-pulso-proy[style*="display:block"] {
          display: flex !important;
      }

      .pp-pulso-proy-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-pulso-proy-pct {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pp-barra {
          height: 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          overflow: hidden;
      }

      .pp-barra-relleno {
          height: 100%;
          border-radius: var(--pp-radio-full);
          background: var(--pp-acento);
          transition: width .6s ease;
      }

      .pp-gam-msj {
          text-align: right;
      }

      /* ── 10. Hoja +: las 5 opciones del admin vuelven a ser filas
              (aunque app.js aún les ponga display:block en otro lugar) ── */
      #modal-accion-central .opcion-card[style*="display: block"],
      #modal-accion-central .opcion-card[style*="display:block"] {
          display: flex !important;
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 3] MOSTRADOR
         Agregar productos · Ticket · Cobro (pago → cliente → recibo)
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 2).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedor ── */
      #mod-mostrador.pp-pos {
          max-width: 600px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
      }

      #mod-mostrador.pp-pos>*+* {
          margin-top: var(--pp-esp-3);
      }

      #mod-mostrador.pp-pos>#widget-gamificacion[style*="none"]+* {
          margin-top: 0;
      }

      #mod-mostrador.pp-pos>#admin-res:empty {
          display: none;
      }

      #widget-gamificacion[style*="display: block"],
      #widget-gamificacion[style*="display:block"] {
          display: flex !important;
      }

      /* ── 2. Quién vende + canal ── */
      .pp-pos-cab {
          display: flex;
          gap: var(--pp-esp-3);
          align-items: stretch;
      }

      .pp-pos-usuario {
          flex: 1;
          min-width: 0;
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: 10px var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-pos-avatar {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-pos-avatar .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-pos-usuario-txt {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      .pp-pos-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      #header-usuario-rol.pp-pos-rol {
          width: auto;
          padding: 0;
          border-radius: 0;
          background: none !important;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          letter-spacing: 0;
          color: var(--pp-texto-3);
      }

      .pp-pos-canal {
          position: relative;
          flex: 0 0 44%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 2px;
          padding: 8px 28px 8px var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          cursor: pointer;
          box-sizing: border-box;
          min-width: 0;
      }

      .pp-pos-canal select {
          width: 100%;
          padding: 0;
          border: 0;
          outline: none;
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          appearance: none;
          -webkit-appearance: none;
          cursor: pointer;
          text-overflow: ellipsis;
      }

      .pp-pos-canal select option {
          color: #18181B;
      }

      .pp-pos-canal:focus-within {
          box-shadow: var(--pp-foco);
      }

      .pp-pos-canal-flecha {
          position: absolute;
          right: 10px;
          top: 50%;
          width: 18px;
          height: 18px;
          margin-top: -9px;
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      /* ── 3. Pestañas Código / Categorías / Libre / Salida ── */
      #mod-mostrador .pp-pos-pestanas>.sub-mostrador {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          padding: 0 4px;
          box-shadow: none;
          transform: none;
          text-transform: none;
          letter-spacing: 0;
      }

      #mod-mostrador .pp-pos-pestanas>.sub-mostrador:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      #mod-mostrador .pp-pos-pestanas>.pp-pos-pestana-salida {
          color: var(--pp-negativo);
      }

      /* ── 4. Paneles de agregar ── */
      .pp-pos-panel {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .pp-pos-panel[style*="display: none"],
      .pp-pos-panel[style*="display:none"] {
          display: none !important;
      }

      .pp-pos-panel[style*="display: block"],
      .pp-pos-panel[style*="display:block"] {
          display: flex !important;
      }

      .pp-pos-fila {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: var(--pp-esp-2);
      }

      .pp-pos-buscar {
          position: relative;
      }

      .pp-pos-buscar>.pp-icono {
          position: absolute;
          left: 12px;
          top: 50%;
          margin-top: -10px;
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      #codigoTicket.pp-campo {
          padding-left: 40px;
          text-transform: uppercase;
          font-family: var(--pp-fuente-mono);
          letter-spacing: .02em;
      }

      #codigoTicket.pp-campo::placeholder {
          text-transform: none;
          font-family: var(--pp-fuente);
          letter-spacing: 0;
      }

      .pp-pos-dos {
          display: grid;
          grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
          gap: var(--pp-esp-2);
      }

      .pp-pos-dos .pp-num {
          text-align: right;
          font-variant-numeric: tabular-nums;
      }

      .pp-btn--peligro-relleno {
          background: var(--pp-negativo);
          color: #FFFFFF;
      }

      .pp-btn--peligro-relleno:hover {
          filter: brightness(.95);
      }

      #mst-cat-buscador-wrap[style*="display: block"],
      #mst-cat-buscador-wrap[style*="display:block"] {
          display: block;
      }

      /* Categorías (Inventario Express) */
      .pp-pos-cat-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          max-height: 340px;
          overflow-y: auto;
          overscroll-behavior: contain;
      }

      .pp-cat {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: 12px;
          background: var(--pp-superficie);
      }

      .pp-cat--agotada {
          opacity: .55;
      }

      .pp-cat-cab {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: var(--pp-esp-3);
      }

      .pp-cat-info {
          min-width: 0;
      }

      .pp-cat-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cat-meta {
          margin-top: 2px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          font-variant-numeric: tabular-nums;
      }

      .pp-cat-stock {
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-cat-stock--ok {
          color: var(--pp-positivo);
      }

      .pp-cat-stock--bajo {
          color: var(--pp-aviso);
      }

      .pp-cat-stock--agotado {
          color: var(--pp-negativo);
      }

      .pp-cat-precio {
          text-align: right;
          flex-shrink: 0;
      }

      .pp-cat-precio .pp-num {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cat-acciones {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-cat-cant {
          display: inline-flex;
          align-items: center;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          overflow: hidden;
      }

      .pp-cat-paso {
          width: 40px;
          height: 40px;
          border: 0;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-size: 18px;
          cursor: pointer;
      }

      .pp-cat-paso:hover:not(:disabled) {
          background: var(--pp-sutil);
      }

      .pp-cat-cant-campo {
          width: 48px;
          height: 40px;
          border: 0;
          border-left: 1px solid var(--pp-borde);
          border-right: 1px solid var(--pp-borde);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          text-align: center;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          -moz-appearance: textfield;
          appearance: textfield;
      }

      .pp-cat-cant-campo::-webkit-inner-spin-button,
      .pp-cat-cant-campo::-webkit-outer-spin-button,
      .pp-tk-precio::-webkit-inner-spin-button,
      .pp-tk-precio::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }

      .pp-cat-agregar.pp-btn {
          height: 40px;
      }

      .pp-pos-detalle {
          padding: 10px var(--pp-esp-3);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
      }

      .pp-pos-detalle summary {
          cursor: pointer;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pp-pos-detalle-campos {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
          margin: 10px 0 6px;
      }

      .pp-pos-detalle-campos .pp-campo {
          height: 40px;
          padding: 0 var(--pp-esp-2);
          text-align: center;
      }

      .pp-pos-vacio {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: var(--pp-esp-6) var(--pp-esp-4);
          text-align: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pp-pos-vacio b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .pp-pos-vacio--error {
          border-radius: var(--pp-radio-m);
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      /* ── 5. Ticket ── */
      .pp-tk.pp-tarjeta {
          padding: 0;
          overflow: hidden;
      }

      #pos-comprobante-zona:not(:empty) {
          padding: var(--pp-esp-3) var(--pp-esp-3) 0;
      }

      .pp-comprobante-nota {
          padding: 10px var(--pp-esp-3);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .pp-comprobante-nota b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-tk-cab {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          padding: var(--pp-esp-3) 14px var(--pp-esp-2);
      }

      .pp-tk-lista {
          max-height: 300px;
          overflow-y: auto;
          overscroll-behavior: contain;
      }

      .pp-tk-vacio {
          padding: var(--pp-esp-5) var(--pp-esp-4);
          border-top: 1px solid var(--pp-borde);
          text-align: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pp-tk-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          padding: 10px 6px 10px 14px;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-tk-info {
          flex: 1;
          min-width: 0;
      }

      .pp-tk-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          line-height: 1.3;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          word-break: break-word;
      }

      .pp-tk-meta {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-tk-meta .pp-mono {
          font-size: var(--pp-fs-12);
      }

      .pp-tk-montos {
          flex-shrink: 0;
          text-align: right;
      }

      .pp-tk-precio-wrap {
          display: inline-flex;
          align-items: center;
          cursor: text;
      }

      .pp-tk-signo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-tk-precio {
          width: 78px;
          height: 34px;
          margin: 0;
          padding: 0 6px 0 2px;
          border: 1px solid transparent;
          border-radius: 8px;
          background: transparent;
          color: var(--pp-texto);
          text-align: right;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          -moz-appearance: textfield;
          appearance: textfield;
          box-sizing: border-box;
      }

      .pp-tk-precio:hover {
          border-color: var(--pp-borde-fuerte);
      }

      .pp-tk-precio:focus {
          outline: none;
          border-color: var(--pp-acento);
          background: var(--pp-superficie);
          box-shadow: var(--pp-foco);
      }

      .pp-tk-precio--rebajado {
          color: var(--pp-negativo);
      }

      .pp-tk-original {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          text-decoration: line-through;
          padding-right: 7px;
      }

      .pp-tk-quitar {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-3);
          cursor: pointer;
      }

      .pp-tk-quitar:hover {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pp-tk-quitar .pp-icono {
          width: 18px;
          height: 18px;
      }

      #pos-desglose-iva {
          background: transparent !important;
      }

      .pp-tk-desglose {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 10px 14px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-tk-desglose>div {
          display: flex;
          justify-content: space-between;
      }

      .pp-tk-total {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-3) 14px 14px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      #pos-desglose-iva[style*="display: block"]+.pp-tk-total,
      #pos-desglose-iva[style*="display:block"]+.pp-tk-total {
          border-top: 0;
          padding-top: var(--pp-esp-2);
      }

      #total-ticket {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      #btn-cobrar-ticket.pp-pos-cobrar {
          font-size: var(--pp-fs-17);
          font-variant-numeric: tabular-nums;
      }

      .pp-pos-res {
          text-align: center;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-positivo);
      }

      /* ── 6. Cobro: ventanas de pago y cliente ── */
      #modalPago.pp-cobro-overlay,
      #modalFactura.pp-cobro-overlay {
          align-items: flex-end;
          justify-content: center;
          background: var(--pp-velo) !important;
          border: 0 !important;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

      html body #modalPago .modal-content.pp-cobro,
      html body #modalFactura .modal-content.pp-cobro {
          position: relative;
          width: 100%;
          max-width: 480px !important;
          max-height: calc(100vh - 24px);
          max-height: calc(100dvh - 24px);
          overflow-y: auto;
          overscroll-behavior: contain;
          margin: 0;
          box-sizing: border-box;
          padding: var(--pp-esp-2) var(--pp-esp-4) calc(var(--pp-esp-4) + env(safe-area-inset-bottom));
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde) !important;
          border-bottom: 0 !important;
          border-radius: 16px 16px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          color: var(--pp-texto) !important;
          text-align: left;
          animation: slideUpAccion .28s cubic-bezier(.22, 1, .36, 1);
      }

      @media (min-width: 640px) {

          #modalPago.pp-cobro-overlay,
          #modalFactura.pp-cobro-overlay {
              align-items: center;
          }

          html body #modalPago .modal-content.pp-cobro,
          html body #modalFactura .modal-content.pp-cobro {
              border-bottom: 1px solid var(--pp-borde) !important;
              border-radius: 16px;
          }
      }

      .pp-cobro .pp-hoja-handle {
          width: 36px;
          height: 4px;
          margin: 0 auto var(--pp-esp-3);
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde-fuerte);
      }

      #modalPago .pp-cobro-titulo,
      #modalFactura .pp-cobro-titulo {
          margin: 0 0 var(--pp-esp-3);
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto) !important;
      }

      .pp-cobro-total {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 14px var(--pp-esp-4);
          margin-bottom: var(--pp-esp-4);
          border-radius: 12px;
          background: var(--pp-sutil);
      }

      #modal-pago-total.pp-cobro-monto {
          font-size: var(--pp-fs-34);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.1;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pp-cobro-campo {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          margin-bottom: var(--pp-esp-4);
      }

      #zona-banco.pp-cobro-campo[style*="display: block"],
      #zona-banco.pp-cobro-campo[style*="display:block"] {
          display: flex !important;
      }

      #modalPago label.pp-etiqueta-seccion,
      #modalFactura .pp-etiqueta-seccion {
          color: var(--pp-texto-3) !important;
      }

      .pp-pago-opciones {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-pago-opciones:empty {
          display: none;
      }

      .pp-pago-op {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 0;
          height: 52px;
          padding: 0 var(--pp-esp-3);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 12px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          text-align: left;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
      }

      .pp-pago-op span {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }

      .pp-pago-op .pp-icono {
          color: var(--pp-texto-2);
      }

      .pp-pago-op:hover {
          background: var(--pp-sutil);
      }

      .pp-pago-op.activo {
          border-color: var(--pp-acento);
          box-shadow: inset 0 0 0 1px var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-pago-op.activo .pp-icono {
          color: var(--pp-acento-texto);
      }

      .pp-pago-op:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pp-pago-select--oculto {
          display: none !important;
      }

      .pp-cobro-pie {
          display: flex;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-2);
      }

      .pp-cobro-pie>.pp-btn {
          flex: 1;
      }

      /* Ventana "¿A nombre de quién?" */
      .pp-fac-opciones {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          margin-bottom: var(--pp-esp-4);
      }

      .pp-fac-form {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fac-error {
          padding: 10px var(--pp-esp-3);
          border-radius: var(--pp-radio-m);
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
      }

      /* ── 7. Recibo (marco y botones; el papel no cambia) ── */
      #modal-ticket-print.pp-recibo-overlay {
          position: fixed;
          inset: 0;
          z-index: 999999;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-5) var(--pp-esp-4);
          box-sizing: border-box;
          overflow-y: auto;
          background: rgba(9, 9, 11, .72);
      }

      .pp-recibo-titulo {
          margin: 0;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: #FAFAFA;
      }

      .pp-recibo-wsp {
          display: flex;
          flex-direction: column;
          gap: 6px;
          width: 100%;
          max-width: 380px;
          padding: var(--pp-esp-3);
          box-sizing: border-box;
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
      }

      .pp-recibo-botones {
          display: flex;
          gap: var(--pp-esp-2);
          width: 100%;
          max-width: 380px;
      }

      .pp-recibo-botones>.pp-btn {
          flex: 1;
          padding: 0 var(--pp-esp-2);
      }

      /* ── 8. Neutralizar reglas viejas de los temas oscuros sobre el Mostrador ── */
      html body #vista-erp #mst-cat-lista button.pp-cat-paso:not([disabled]) {
          background: var(--pp-superficie) !important;
          color: var(--pp-texto-2) !important;
          border: 0 !important;
      }

      html body #vista-erp #mst-cat-lista button.pp-cat-agregar:not([disabled]) {
          background: var(--pp-superficie) !important;
          color: var(--pp-texto) !important;
          border: 1px solid var(--pp-borde-fuerte) !important;
      }

      html body #vista-erp #sub-libre button.pp-btn {
          background: var(--pp-superficie) !important;
          color: var(--pp-texto) !important;
          border: 1px solid var(--pp-borde-fuerte) !important;
      }

      html body #vista-erp #mst-cat-buscador.pp-campo {
          background-color: var(--pp-superficie) !important;
          color: var(--pp-texto) !important;
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 4] GESTIÓN DE INVENTARIO
         Panel | Tabla · Indicadores · Herramientas · Editor de producto
         Registrar compra · Revisión de deterioro · Kardex
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 3).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedores (panel y tabla) ── */
      #mod-inventario.pp-inv,
      #inv-tabla-wrap.pp-inv {
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
      }

      #mod-inventario.pp-inv>*+*,
      #inv-tabla-wrap.pp-inv>*+* {
          margin-top: var(--pp-esp-4);
      }

      /* Los paneles deslizables son fijos: no deben dejar espacio */
      #mod-inventario.pp-inv>.inv-panel-deslizable {
          margin-top: 0;
      }

      #mod-inventario.pp-inv>#inv-kpi-wrap:empty {
          display: none;
      }

      /* ── 2. Control Panel | Tabla ── */
      .pp-inv-vista {
          max-width: 260px;
      }

      /* ── 3. Acciones principales ── */
      .pp-inv-acciones {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      /* ── 4. Indicadores 3×2 ── */
      .pp-inv-kpis {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-inv-kpi {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          min-width: 0;
          min-height: 84px;
          padding: var(--pp-esp-3) 10px;
          box-sizing: border-box;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          color: var(--pp-texto);
          text-align: left;
      }

      .pp-inv-kpi--accion {
          font: inherit;
          cursor: pointer;
          transition: border-color .15s ease, background-color .15s ease;
      }

      .pp-inv-kpi--accion:hover {
          border-color: var(--pp-borde-fuerte);
          background: var(--pp-sutil);
      }

      .pp-inv-kpi--accion:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pp-inv-kpi .pp-rotulo {
          font-size: var(--pp-fs-12);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
      }

      .pp-inv-kpi-valor {
          font-size: 22px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.2;
          color: var(--pp-texto);
          max-width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-inv-kpi-valor--largo {
          font-size: 17px;
          line-height: 1.6;
      }

      .pp-inv-kpi-valor--xl {
          font-size: 14px;
          line-height: 1.9;
      }

      .pp-inv-kpi .pp-chip {
          margin-top: auto;
      }

      .pp-chip--aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      /* ── 5. Herramientas (Reposición · Códigos · Descuentos · Asistente) ── */
      #mod-inventario .inv-herramientas-fila.pp-inv-herr {
          gap: var(--pp-esp-2);
          margin-bottom: 0;
      }

      #mod-inventario .inv-tool {
          gap: 6px;
          min-height: 72px;
          padding: 10px 4px;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          color: var(--pp-texto-2);
          box-shadow: none;
          font-family: inherit;
      }

      #mod-inventario .inv-tool:hover {
          border-color: var(--pp-borde-fuerte);
          background: var(--pp-sutil);
          box-shadow: none;
      }

      #mod-inventario .inv-tool:active {
          transform: scale(.97);
      }

      #mod-inventario .inv-tool:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      #mod-inventario .inv-tool .pp-icono {
          width: 22px;
          height: 22px;
          color: var(--pp-texto-2);
      }

      #mod-inventario .inv-tool-txt {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      #mod-inventario .inv-tool-badge {
          top: 6px;
          right: 6px;
          padding: 1px 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
      }

      /* ── 6. Paneles deslizables (Descuentos · Asistente) ── */
      #mod-inventario .inv-panel-deslizable {
          background: var(--pp-fondo);
          border-left: 1px solid var(--pp-borde);
          box-shadow: var(--pp-sombra-flotante);
      }

      #mod-inventario .inv-panel-head {
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border-bottom: 1px solid var(--pp-borde);
      }

      #mod-inventario .inv-panel-tit {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #mod-inventario .inv-panel-x {
          width: 36px;
          height: 36px;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
      }

      #mod-inventario .inv-panel-x:hover,
      #mod-inventario .inv-panel-x:active {
          background: var(--pp-sutil);
      }

      #mod-inventario .inv-panel-body {
          padding: var(--pp-esp-4) var(--pp-esp-4) 40px;
      }

      #mod-inventario .pp-inv-panel-sec {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          margin: 0;
          padding: 0;
          border: 0;
      }

      .pp-inv-desc-lista {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      /* Filas de descuento (las arma inventario.js con clases heredadas) */
      html body #mod-inventario .fila-descuento {
          gap: var(--pp-esp-2);
          margin: 0;
          padding: 8px var(--pp-esp-3);
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde) !important;
          border-radius: var(--pp-radio-m);
      }

      html body #mod-inventario .fila-descuento span {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto) !important;
      }

      #mod-inventario .select-mini {
          height: 36px;
          padding: 0 var(--pp-esp-2);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: inherit;
          font-size: var(--pp-fs-13);
      }

      .pp-inv-periodo>button {
          font-variant-numeric: tabular-nums;
      }

      /* "Analizar reposición": el tema oscuro antiguo lo forzaba a turquesa */
      html body #vista-erp #panel-asistente button.pp-btn--primario {
          background: var(--pp-acento) !important;
          color: var(--pp-sobre-acento) !important;
          border: 1px solid transparent !important;
      }

      /* ── 7. Editor de producto ── */
      #mod-inventario .seccion-admin.pp-editor {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-5);
          margin-bottom: 0;
          padding: var(--pp-esp-4);
          border: 1px solid var(--pp-borde);
          border-bottom: 1px solid var(--pp-borde);
      }

      .pp-editor-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      #mod-inventario .pp-editor-titulo {
          margin: 0;
          min-width: 0;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-editor-nuevo {
          flex-shrink: 0;
          height: 36px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
      }

      .pp-editor-nuevo .pp-icono {
          width: 18px;
          height: 18px;
      }

      /* Buscador */
      .pp-editor-buscar {
          position: relative;
      }

      .pp-editor-buscar>.pp-icono {
          position: absolute;
          left: 12px;
          top: 12px;
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      html body #vista-erp #busqueda-familia.pp-campo {
          padding-left: 40px;
          background-color: var(--pp-superficie) !important;
          color: var(--pp-texto) !important;
      }

      .pp-editor-resultados {
          position: absolute;
          left: 0;
          right: 0;
          top: calc(100% + 4px);
          z-index: 50;
          max-height: 340px;
          overflow-y: auto;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: var(--pp-sombra-flotante);
      }

      .pp-editor-res {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          width: 100%;
          min-height: 56px;
          padding: 8px var(--pp-esp-3);
          box-sizing: border-box;
          border: 0;
          border-top: 1px solid var(--pp-borde);
          background: transparent;
          color: var(--pp-texto);
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pp-editor-res:first-child {
          border-top: 0;
      }

      .pp-editor-res:hover,
      .pp-editor-res:focus-visible {
          background: var(--pp-sutil);
          outline: none;
      }

      .pp-editor-res-foto {
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          border-radius: var(--pp-radio-m);
          object-fit: cover;
          background: var(--pp-sutil);
      }

      .pp-editor-res-foto--vacia {
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--pp-texto-3);
      }

      .pp-editor-res-txt {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pp-editor-res-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-editor-res-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-editor-res-vacio {
          padding: var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      /* Secciones */
      .pp-editor-sec {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding-top: var(--pp-esp-4);
          border-top: 1px solid var(--pp-borde);
      }

      #bloque-forma-compra[style*="display: block"],
      #bloque-forma-compra[style*="display:block"] {
          display: flex !important;
      }

      .pp-editor-dos {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-3);
      }

      .pp-editor-tres {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-editor-tres>.pp-campo {
          padding: 0 var(--pp-esp-2);
          text-overflow: ellipsis;
      }

      .pp-editor-label {
          display: block;
          margin-bottom: 6px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pp-editor-ayuda {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pp-editor-check {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          min-height: 36px;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
          cursor: pointer;
      }

      .pp-editor-check input {
          width: 18px;
          height: 18px;
          margin: 0;
          accent-color: var(--pp-acento);
      }

      .pp-editor-cat-nueva {
          margin-top: var(--pp-esp-2);
      }

      /* Campos de solo lectura (editar familia: stock y costo cambian con "Registrar compra") */
      #mod-inventario .pp-editor input.pp-campo:read-only,
      html body #mod-inventario .pp-editor .input-tabla:read-only {
          background: var(--pp-sutil) !important;
          color: var(--pp-texto-3) !important;
          cursor: not-allowed;
      }

      #mod-inventario .pp-editor .pp-campo:disabled {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
          cursor: not-allowed;
      }

      /* Variantes y stock */
      .pp-editor-tabla {
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
      }

      .pp-editor-tabla table {
          width: 100%;
          border-collapse: collapse;
      }

      .pp-editor-tabla th {
          padding: 8px var(--pp-esp-2);
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-editor-tabla th:last-child {
          width: 44px;
      }

      .pp-editor-tabla td {
          padding: 6px var(--pp-esp-1);
          border-bottom: 1px solid var(--pp-borde);
          vertical-align: middle;
      }

      #mod-inventario .pp-editor-tabla .celda-id {
          width: 64px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      html body #mod-inventario .input-tabla.pp-campo {
          height: 40px;
          padding: 0 var(--pp-esp-2);
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde-fuerte) !important;
          border-radius: var(--pp-radio-s);
          color: var(--pp-texto) !important;
          font-size: var(--pp-fs-15);
          text-align: center;
      }

      html body #mod-inventario .input-tabla.pp-campo:focus {
          border-color: var(--pp-acento) !important;
          box-shadow: var(--pp-foco);
      }

      #mod-inventario .btn-eliminar-fila {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          margin: 0 auto;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-3);
      }

      #mod-inventario .btn-eliminar-fila:hover {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #mod-inventario .btn-eliminar-fila .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-editor-agregar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: var(--pp-alto-control);
          border: 0;
          background: transparent;
          color: var(--pp-acento-texto);
          font-family: inherit;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .pp-editor-agregar:hover {
          background: var(--pp-sutil);
      }

      /* Fuera de la tabla (fotos, compras): con borde punteado */
      .pp-editor-sec>.pp-editor-agregar,
      .pp-modal .pp-editor-agregar {
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
      }

      /* Fotos */
      .pp-editor-fotos {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-editor-fotos:empty {
          display: none;
      }

      .pp-foto-fila {
          margin: 0;
      }

      .pp-foto-form {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          margin: 0;
      }

      .pp-foto-form .pp-campo {
          flex: 1;
          min-width: 0;
      }

      .pp-foto-form .btn-eliminar-fila {
          margin: 0;
      }

      /* Llenar por voz */
      #mod-inventario .pp-editor-voz-texto {
          height: 72px;
          padding: 10px var(--pp-esp-3);
          resize: vertical;
          line-height: 1.4;
      }

      .pp-editor-voz-botones {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-editor-voz-botones>.pp-btn,
      .pp-editor-acciones>.pp-btn--secundario,
      .pp-editor-acciones>.pp-btn--peligro {
          padding: 0 var(--pp-esp-2);
          white-space: nowrap;
      }

      #btn-mic-voz.pp-escuchando {
          background: var(--pp-negativo-suave);
          border-color: var(--pp-negativo);
          color: var(--pp-negativo);
      }

      .pp-editor-msj {
          font-size: var(--pp-fs-13);
          text-align: center;
          color: var(--pp-texto-2);
      }

      .pp-editor-msj:empty {
          display: none;
      }

      /* Forma de compra */
      .pp-fc-opciones {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-fc-op {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          min-width: 0;
          padding: 10px;
          box-sizing: border-box;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          color: var(--pp-texto);
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pp-fc-op.activo {
          background: var(--pp-acento-suave);
          border-color: var(--pp-acento);
          box-shadow: inset 0 0 0 1px var(--pp-acento);
      }

      .pp-fc-titulo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-fc-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-fc-op.activo .pp-fc-titulo {
          color: var(--pp-acento-texto);
      }

      .pp-fc-credito {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          opacity: .55;
      }

      .pp-fc-credito.activo {
          opacity: 1;
          border-color: var(--pp-borde-fuerte);
      }

      .pp-fc-credito-titulo {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .pp-fc-credito .pp-editor-label {
          margin: var(--pp-esp-1) 0 0;
      }

      #fc-factura-zona:empty {
          display: none;
      }

      /* Acciones del editor */
      .pp-editor-acciones {
          display: flex;
          flex-wrap: wrap;
          gap: var(--pp-esp-2);
      }

      .pp-editor-acciones>.pp-btn--primario {
          flex: 1 1 100%;
      }

      .pp-editor-acciones>.pp-btn--secundario,
      .pp-editor-acciones>.pp-btn--peligro {
          flex: 1 1 0;
      }

      #btn-eliminar-familia[style*="display: block"],
      #btn-eliminar-familia[style*="display:block"],
      #btn-cancelar-edit[style*="display: block"],
      #btn-cancelar-edit[style*="display:block"] {
          display: inline-flex !important;
      }

      #msg-editor.pp-editor-msj {
          margin-top: calc(var(--pp-esp-5) * -1 + var(--pp-esp-2));
      }

      .pp-oculto-visual {
          position: absolute !important;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
          border: 0;
      }

      /* ── 8. Vista Tabla ── */
      .pp-tabla-aviso {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 4px;
          padding: 10px var(--pp-esp-3);
          background: var(--pp-negativo-suave);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          color: var(--pp-negativo);
      }

      .pp-tabla-aviso button {
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--pp-texto);
          font: inherit;
          font-weight: var(--pp-fw-fuerte);
          text-decoration: underline;
          cursor: pointer;
      }

      .pp-tabla-marco {
          overflow-x: auto;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          -webkit-overflow-scrolling: touch;
      }

      .pp-tabla {
          width: 100%;
          min-width: 330px;
          border-collapse: collapse;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .pp-tabla th {
          position: sticky;
          top: 0;
          padding: 10px 4px;
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .03em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          text-align: left;
          white-space: nowrap;
      }

      .pp-tabla td {
          padding: 8px 4px;
          border-bottom: 1px solid var(--pp-borde);
          vertical-align: middle;
      }

      .pp-tabla tbody tr:last-child td {
          border-bottom: 0;
      }

      .pp-tabla th:first-child,
      .pp-tabla td:first-child {
          padding-left: 8px;
      }

      .pp-tabla th:last-child,
      .pp-tabla td:last-child {
          padding-right: 2px;
      }

      .pp-tabla-cod {
          display: block;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .pp-tabla-prod {
          font-weight: var(--pp-fw-medio);
      }

      .pp-tabla-var {
          color: var(--pp-texto-2);
      }

      .pp-tabla-centro {
          text-align: center !important;
      }

      .pp-tabla-der {
          text-align: right !important;
          white-space: nowrap;
      }

      .pp-tabla-vacia {
          padding: var(--pp-esp-8) var(--pp-esp-4) !important;
          text-align: center;
          color: var(--pp-texto-3);
      }

      .pp-fila-agotada td {
          background: var(--pp-negativo-suave);
      }

      .pp-tabla-stock {
          display: inline-flex;
          align-items: center;
          gap: 2px;
      }

      .pp-tabla-stock button {
          width: 26px;
          height: 32px;
          padding: 0;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: inherit;
          font-size: 16px;
          line-height: 1;
          cursor: pointer;
      }

      .pp-tabla-stock button:hover {
          background: var(--pp-sutil);
      }

      .pp-tabla-stock button:disabled {
          opacity: .5;
      }

      .pp-tabla-stock span {
          min-width: 22px;
          text-align: center;
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-stock--ok {
          color: var(--pp-texto);
      }

      .pp-stock--bajo {
          color: var(--pp-aviso);
      }

      .pp-stock--agotado {
          color: var(--pp-negativo);
      }

      .pp-tabla-editar {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 36px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pp-tabla-editar:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pp-tabla-editar .pp-icono {
          width: 18px;
          height: 18px;
      }

      /* ── 9. Ventanas (Registrar compra · Deterioro · Kardex) ── */
      .pp-modal {
          position: fixed;
          inset: 0;
          z-index: 9999;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          background: var(--pp-velo);
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      .pp-modal-panel {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          width: 100%;
          max-width: 480px;
          max-height: 92dvh;
          overflow-y: auto;
          padding: var(--pp-esp-4) var(--pp-esp-4) calc(var(--pp-esp-5) + env(safe-area-inset-bottom, 0px));
          box-sizing: border-box;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-bottom: 0;
          border-radius: 16px 16px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          animation: slideUpAccion .28s cubic-bezier(.22, 1, .36, 1);
      }

      .pp-modal-panel--ancho {
          max-width: 640px;
      }

      @media (min-width: 640px) {
          .pp-modal {
              align-items: center;
              padding: var(--pp-esp-4);
          }

          .pp-modal-panel {
              border-bottom: 1px solid var(--pp-borde);
              border-radius: 16px;
              padding-bottom: var(--pp-esp-5);
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .pp-modal-panel {
              animation: none;
          }
      }

      .pp-modal-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-modal-titulo {
          min-width: 0;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-modal-x {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pp-modal-x:hover {
          background: var(--pp-sutil);
      }

      .pp-modal-sub {
          margin-top: calc(var(--pp-esp-2) * -1);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pp-modal-campo:empty {
          display: none;
      }

      .pp-modal-campo-sub {
          margin-top: var(--pp-esp-3);
      }

      .pp-modal-resumen {
          padding: var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      /* Registrar compra: cantidades */
      .pp-compra-lista {
          margin-bottom: var(--pp-esp-2);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
      }

      .pp-compra-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          padding: 8px var(--pp-esp-3);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-compra-lista>.pp-compra-fila:first-child {
          border-top: 0;
      }

      .pp-compra-fila--nueva {
          background: var(--pp-acento-suave);
      }

      .pp-compra-fila--nueva .compra-nueva-talla {
          flex: 1;
          min-width: 0;
      }

      .pp-compra-info {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-compra-var {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-compra-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-compra-cant.pp-campo {
          flex: 0 0 80px;
          width: 80px;
          text-align: center;
      }

      /* Revisión de deterioro */
      .pp-vnr-grupo {
          display: block;
          margin-top: var(--pp-esp-2);
      }

      .pp-vnr-grupo--rebaja {
          color: var(--pp-negativo);
      }

      .pp-vnr-grupo--recupero {
          color: var(--pp-positivo);
      }

      .pp-vnr-tarjeta {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-vnr-cab {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-vnr-nombre {
          min-width: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
      }

      .pp-vnr-stock {
          flex-shrink: 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pp-vnr-datos {
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-vnr-datos b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-vnr-datos b.pp-vnr-perdida {
          color: var(--pp-negativo);
      }

      .pp-vnr-datos b.pp-vnr-recupero {
          color: var(--pp-positivo);
      }

      .pp-vnr-accion {
          display: flex;
          align-items: flex-end;
          gap: var(--pp-esp-2);
      }

      .pp-vnr-precio {
          flex: 1;
          min-width: 0;
      }

      .pp-vnr-vacio {
          padding: var(--pp-esp-6) var(--pp-esp-4);
          font-size: var(--pp-fs-15);
          line-height: 1.5;
          text-align: center;
          color: var(--pp-texto-2);
      }

      /* Kardex */
      .pp-kx-resumen {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-kx-resumen>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-kx-resumen .pp-num {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-kx-deterioro {
          padding: 8px var(--pp-esp-3);
          background: var(--pp-aviso-suave);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          color: var(--pp-aviso);
      }

      .pp-kx-marco {
          overflow-x: auto;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          -webkit-overflow-scrolling: touch;
      }

      table.pp-kx {
          width: 100%;
          min-width: 720px;
          border-collapse: collapse;
          font-size: var(--pp-fs-12);
          font-variant-numeric: tabular-nums;
          color: var(--pp-texto);
      }

      .pp-kx th {
          padding: 8px 6px;
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          text-align: left;
          white-space: nowrap;
      }

      .pp-kx td {
          padding: 8px 6px;
          border-bottom: 1px solid var(--pp-borde);
          vertical-align: top;
          white-space: nowrap;
      }

      .pp-kx tbody tr:last-child td {
          border-bottom: 0;
      }

      .pp-kx .pp-kx-der {
          text-align: right;
      }

      .pp-kx .pp-kx-borde {
          border-left: 1px solid var(--pp-borde);
      }

      .pp-kx th.pp-kx-borde {
          text-align: center;
      }

      .pp-kx-sub th {
          font-size: 10px;
      }

      .pp-kx-vacio {
          color: var(--pp-texto-off);
      }

      .pp-kx-fecha {
          color: var(--pp-texto-2);
      }

      .pp-kx-mov {
          white-space: normal !important;
          min-width: 110px;
      }

      .pp-kx-tallas {
          margin-top: 2px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          white-space: normal;
      }

      .pp-kx-fuerte {
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-kx .pp-kx-entra {
          color: var(--pp-positivo);
      }

      .pp-kx .pp-kx-sale {
          color: var(--pp-negativo);
      }

      .pp-kx .pp-kx-ajuste {
          color: var(--pp-dato-4);
      }

      .pp-kx-tipo {
          display: inline-block;
          padding: 2px 6px;
          border-radius: var(--pp-radio-s);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .pp-kx-tipo--entra {
          background: var(--pp-acento-suave);
          color: var(--pp-positivo);
      }

      .pp-kx-tipo--sale {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pp-kx-tipo--ajuste {
          color: var(--pp-dato-4);
      }

      /* ── 10. "¿Tiene factura?" (editor, Registrar compra y Proveedores) ── */
      .pp-fac-compra {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3);
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-l);
          color: var(--pp-texto);
      }

      .pp-fac-compra-check {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          cursor: pointer;
      }

      .pp-fac-compra-check input {
          width: 18px;
          height: 18px;
          margin: 0;
          accent-color: var(--pp-acento);
      }

      .pp-fac-compra-campos {
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fac-compra-campos[style*="display: block"],
      .pp-fac-compra-campos[style*="display:block"] {
          display: flex !important;
      }

      .pp-fac-compra-campos .pp-editor-label {
          margin-bottom: 0;
      }

      /* ── 11. Pantallas pequeñas ── */
      @media (max-width: 380px) {
          .pp-inv-kpi-valor {
              font-size: 19px;
          }

          .pp-editor-tres {
              grid-template-columns: 1fr;
          }

          .pp-fc-sub {
              display: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 5a] FIADOS
         Por cobrar | Fiar | Saldo inicial · Estado de cuenta · Cartera de vencimiento
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 4).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedor ── */
      #mod-fiados.pp-fia {
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
      }

      #mod-fiados.pp-fia>*+* {
          margin-top: var(--pp-esp-4);
      }

      .pp-fia-panel[hidden] {
          display: none !important;
      }

      .pp-fia-panel {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      /* ── 2. Por cobrar: buscador y forma de pago ── */
      .pp-fia-buscar {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .pp-fia-buscar-campo {
          position: relative;
          flex: 1;
          min-width: 0;
      }

      .pp-fia-buscar-campo>.pp-icono {
          position: absolute;
          left: 12px;
          top: 12px;
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      .pp-fia-buscar-campo .pp-campo {
          padding-left: 40px;
      }

      .pp-fia-buscar>.pp-btn {
          flex-shrink: 0;
          padding: 0 var(--pp-esp-3);
      }

      .pp-fia-pago .pp-segmentado>button {
          font-size: var(--pp-fs-13);
      }

      /* ── 3. Lista de clientes ── */
      .pp-fia-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fia-vacio {
          padding: var(--pp-esp-6) var(--pp-esp-4);
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-fia-cli {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
      }

      .pp-fia-cli[open] {
          border-color: var(--pp-borde-fuerte);
      }

      .pp-fia-cli>summary,
      .pp-fia-bloque>summary {
          list-style: none;
          cursor: pointer;
      }

      .pp-fia-cli>summary::-webkit-details-marker,
      .pp-fia-bloque>summary::-webkit-details-marker {
          display: none;
      }

      .pp-fia-cli-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          min-height: 64px;
          padding: 10px var(--pp-esp-3) 10px 14px;
          box-sizing: border-box;
      }

      .pp-fia-cli-cab:focus-visible,
      .pp-fia-bloque>summary:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pp-fia-cli-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-fia-cli-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-fia-cli-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-fia-cli-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 4px;
      }

      .pp-fia-cli-saldo {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-negativo);
      }

      .pp-fia-chev {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          color: var(--pp-texto-3);
          transition: transform .15s ease;
      }

      details[open]>summary>.pp-fia-chev {
          transform: rotate(90deg);
      }

      /* Detalle del cliente */
      .pp-fia-cli-det {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-3) 14px 14px;
          border-top: 1px solid var(--pp-borde);
          background: var(--pp-fondo);
      }

      .pp-fia-accion {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .pp-fia-accion>.pp-campo {
          flex: 1;
          min-width: 0;
      }

      .pp-fia-accion>.pp-btn {
          flex-shrink: 0;
      }

      /* Bloques plegables (estado de cuenta, historial, agregar producto) */
      .pp-fia-bloque {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
      }

      .pp-fia-bloque>summary {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          min-height: 44px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-fia-bloque>summary>.pp-fia-chev {
          margin-left: auto;
      }

      .pp-fia-n {
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pp-fia-bloque[open]>summary {
          border-bottom: 1px solid var(--pp-borde);
      }

      .pp-fia-bloque>*:not(summary) {
          margin: var(--pp-esp-3);
      }

      .pp-fia-bloque>.pp-btn--bloque {
          width: calc(100% - 2 * var(--pp-esp-3));
      }

      .pp-fia-cli-det .pp-btn--bloque {
          white-space: nowrap;
          font-size: var(--pp-fs-13);
      }

      .pp-fia-resumen {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-fia-resumen>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 8px 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-fia-resumen .pp-num {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-fia-pos {
          color: var(--pp-positivo) !important;
      }

      .pp-fia-neg {
          color: var(--pp-negativo) !important;
      }

      /* Movimientos (estado de cuenta) */
      .pp-fia-movs {
          max-height: 320px;
          overflow-y: auto;
      }

      .pp-fia-mov {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 10px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-fia-mov:first-child {
          border-top: 0;
          padding-top: 0;
      }

      .pp-fia-mov-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .pp-fia-mov-ico .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-fia-mov-ico--abono {
          background: var(--pp-acento-suave);
          color: var(--pp-positivo);
      }

      .pp-fia-mov-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-fia-mov-concepto {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .pp-fia-mov-detalle {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-fia-mov-meta {
          margin-top: 2px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-fia-mov-der {
          flex-shrink: 0;
          text-align: right;
      }

      .pp-fia-mov-monto {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-fia-mov-saldo {
          margin-top: 2px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .pp-fia-mov-vacio {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-fia-hist-tot {
          display: flex;
          justify-content: space-between;
          margin-top: 0 !important;
          margin-bottom: var(--pp-esp-2) !important;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-fia-movs+.pp-fia-hist-tot {
          padding-top: var(--pp-esp-2);
          border-top: 1px solid var(--pp-borde-fuerte);
      }

      /* Cuentas del cliente */
      .pp-fia-cuenta {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-fia-cuenta-cab {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-fia-cuenta-txt {
          min-width: 0;
      }

      .pp-fia-cuenta-prod {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .pp-fia-cuenta-meta {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-fia-cuenta-der {
          flex-shrink: 0;
          text-align: right;
      }

      .pp-fia-cuenta-saldo {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-negativo);
      }

      .pp-fia-cuenta-total {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 6px;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-fia-cuenta .pp-fia-bloque {
          background: var(--pp-fondo);
      }

      .pp-fia-agregar {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fia-pane {
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fia-cant {
          flex: 0 0 72px !important;
          text-align: center;
      }

      .pp-fia-finv-total {
          flex: 1;
          align-self: center;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .pp-fia-comp {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fia-comp .fcomp-datos {
          gap: var(--pp-esp-2);
      }

      .pp-fia-comp .fcomp-datos select {
          flex: 0 0 120px;
          width: 120px;
      }

      .pp-fia-comp .fcomp-datos input {
          flex: 1;
          min-width: 0;
      }

      .pp-fia-pagado {
          align-self: flex-end;
          padding: 6px 0;
          border: 0;
          background: transparent;
          font-family: inherit;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-3);
          text-decoration: underline;
          cursor: pointer;
      }

      .pp-fia-pagado:hover {
          color: var(--pp-texto);
      }

      /* ── 4. Fiar y Saldo inicial (formularios) ── */
      .pp-fia-form {
          gap: var(--pp-esp-5);
          padding: var(--pp-esp-4);
      }

      .pp-fia-sec {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-fia-sec+.pp-fia-sec {
          padding-top: var(--pp-esp-4);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-fia-ayuda {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      #apt-comprobante-zona:empty {
          display: none;
      }

      .pp-fia-idfiscal {
          grid-template-columns: 120px minmax(0, 1fr);
          gap: var(--pp-esp-2);
      }

      .pp-fia-filas {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-fia-fila {
          display: grid;
          grid-template-columns: 78px minmax(0, 1fr) 78px 36px;
          gap: 6px;
          align-items: center;
      }

      .pp-fia-fila .pp-campo {
          padding: 0 var(--pp-esp-2);
      }

      .pp-fia-fila .apt-codigo {
          text-transform: uppercase;
          text-align: center;
      }

      .pp-fia-fila .apt-precio {
          text-align: right;
      }

      .pp-fia-total {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          padding: var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-fia-total strong {
          font-size: 22px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      /* ── 5. Cartera de vencimiento (Fiados y Proveedores) ── */
      .pp-cartera {
          display: flex;
          flex-direction: column;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      .pp-cartera-cab {
          padding: 14px 14px 0;
      }

      .pp-cartera-titulo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cartera-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-cartera-kpis {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3) 14px;
      }

      .pp-cartera-kpis>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 8px 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-cartera-kpis .pp-num {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-cartera-kpis small {
          display: block;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
      }

      .pp-cartera-marco {
          overflow-x: auto;
          border-top: 1px solid var(--pp-borde);
          -webkit-overflow-scrolling: touch;
      }

      .pp-cartera-tabla {
          width: 100%;
          min-width: 640px;
          border-collapse: collapse;
          font-size: var(--pp-fs-12);
          font-variant-numeric: tabular-nums;
          color: var(--pp-texto);
      }

      .pp-cartera-tabla th {
          padding: 8px 10px;
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .pp-cartera-tabla td {
          padding: 8px 10px;
          border-bottom: 1px solid var(--pp-borde);
          vertical-align: top;
      }

      .pp-cartera-tabla .pp-cart-num {
          text-align: right;
          white-space: nowrap;
      }

      .pp-cartera-tabla .pp-cart-ent {
          position: sticky;
          left: 0;
          z-index: 1;
          text-align: left;
          background: var(--pp-superficie);
          box-shadow: 1px 0 0 var(--pp-borde);
          white-space: nowrap;
      }

      .pp-cartera-tabla th.pp-cart-ent {
          z-index: 2;
          background: var(--pp-sutil);
      }

      .pp-cart-nombre {
          display: inline-block;
          max-width: 130px;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: bottom;
          font-weight: var(--pp-fw-medio);
      }

      .pp-cart-pct {
          margin-top: 1px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-cart-vacio {
          color: var(--pp-texto-off);
      }

      .pp-cart-tot {
          font-weight: var(--pp-fw-fuerte);
          background: var(--pp-fondo);
      }

      .pp-cart-critico td {
          background: var(--pp-negativo-suave);
      }

      .pp-cartera-tabla .pp-cart-critico .pp-cart-ent {
          background: var(--pp-superficie);
          box-shadow: inset 3px 0 0 var(--pp-negativo), 1px 0 0 var(--pp-borde);
      }

      .pp-cart-fila-total td {
          border-top: 1px solid var(--pp-borde-fuerte);
          border-bottom: 0;
          font-weight: var(--pp-fw-fuerte);
          background: var(--pp-fondo);
      }

      .pp-cartera-tabla .pp-cart-fila-total .pp-cart-ent {
          background: var(--pp-fondo);
      }

      .pp-cart--ok {
          color: var(--pp-positivo);
      }

      .pp-cart--aviso {
          color: var(--pp-aviso);
      }

      .pp-cart--negativo {
          color: var(--pp-negativo);
      }

      .pp-cart--neutro {
          color: var(--pp-texto-3);
      }

      .pp-cartera-nota {
          padding: 10px 14px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      /* ── 6. Pantallas pequeñas ── */
      @media (max-width: 380px) {
          .pp-fia-pago .pp-segmentado>button {
              font-size: var(--pp-fs-12);
          }

          .pp-fia-fila {
              grid-template-columns: 70px minmax(0, 1fr) 70px 32px;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 5b] REPORTES
         Estado de Resultados · Balance General · Espejo Fiscal SRI
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 5a).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedor común de reportes ── */
      #mod-estado-resultados.pp-rep,
      #mod-balance-general.pp-rep {
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px !important;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          border-radius: 0;
      }

      #mod-balance-general.pp-rep {
          max-width: 960px;
      }

      #mod-estado-resultados.pp-rep>*+*,
      #mod-balance-general.pp-rep>*+* {
          margin-top: var(--pp-esp-4);
      }

      .pp-rep-cab {
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      #vista-erp .pp-rep-titulo,
      .pp-rep-titulo {
          margin: 0;
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.01em;
          color: var(--pp-texto);
      }

      .pp-rep-sub {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .pp-rep-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-8) var(--pp-esp-4);
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-rep-vacio>.pp-icono {
          width: 28px;
          height: 28px;
      }

      .pp-rep-spinner {
          width: 28px;
          height: 28px;
          border: 2px solid var(--pp-borde);
          border-top-color: var(--pp-acento);
          border-radius: 50%;
          animation: sri-spin .8s linear infinite;
      }

      @media (prefers-reduced-motion: reduce) {
          .pp-rep-spinner {
              animation: none;
          }
      }

      .pp-rep-error {
          padding: var(--pp-esp-4);
          background: var(--pp-negativo-suave);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-negativo);
          text-align: center;
      }

      /* ── 2. Estado de Resultados ── */
      .pp-er-controles {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-er-cuerpo {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      /* Resumen de arriba */
      .pp-er-resumen {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-er-neta {
          font-size: var(--pp-fs-34);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
      }

      .pp-er-neta-sub {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px 10px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-er-mini {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-3);
      }

      .pp-er-mini>div,
      .pp-er-comp {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 8px 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-er-mini .pp-num,
      .pp-er-comp-valor {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-er-neg {
          color: var(--pp-negativo) !important;
      }

      /* Secciones del detalle */
      .pp-er-sec {
          display: flex;
          flex-direction: column;
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-er-sec-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          margin-bottom: var(--pp-esp-2);
      }

      .pp-er-sec-tit {
          margin-bottom: var(--pp-esp-2);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-er-sec-cab .pp-er-sec-tit {
          margin-bottom: 0;
      }

      .pp-er-subtit {
          margin: var(--pp-esp-2) 0 2px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .pp-er-nota {
          margin-bottom: 4px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-er-fila {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto auto;
          align-items: center;
          gap: var(--pp-esp-3);
          min-height: 40px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
      }

      .pp-er-sec-tit+.pp-er-fila,
      .pp-er-nota+.pp-er-fila,
      .pp-er-subtit+.pp-er-fila {
          border-top: 0;
      }

      .pp-er-fila-label {
          color: var(--pp-texto);
          min-width: 0;
      }

      .pp-er-pct {
          min-width: 38px;
          padding: 2px 6px;
          border-radius: var(--pp-radio-s);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-3);
          text-align: right;
          font-variant-numeric: tabular-nums;
      }

      .pp-er-pct--aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-er-pct--negativo {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-er-fila-valor {
          min-width: 84px;
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          text-align: right;
          white-space: nowrap;
      }

      .pp-er-total {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          min-height: 44px;
          margin-top: 4px;
          border-top: 1px solid var(--pp-borde-fuerte);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-er-sec>.pp-er-total:first-child,
      .pp-er-sec-cab+.pp-er-total {
          margin-top: 0;
          border-top: 0;
      }

      .pp-er-total--final {
          font-size: var(--pp-fs-17);
      }

      .pp-er-fila+.pp-er-total--final,
      .pp-er-sec-tit+.pp-er-total--final {
          margin-top: 4px;
      }

      /* Comparativo */
      .pp-er-comparativo {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-er-comp-delta {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-er-sube {
          color: var(--pp-positivo);
      }

      .pp-er-baja {
          color: var(--pp-negativo);
      }

      /* Punto de equilibrio */
      .pp-er-pe-cab {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          margin-bottom: var(--pp-esp-2);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-er-pe-cab b {
          color: var(--pp-texto);
      }

      .pp-er-pe-pct {
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-er-pe-barra {
          height: 8px;
          margin-bottom: var(--pp-esp-2);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-full);
          overflow: hidden;
      }

      .pp-er-pe-fill {
          height: 100%;
          border-radius: var(--pp-radio-full);
      }

      .pp-er-pe-pct.pp-er-pe--ok {
          color: var(--pp-positivo);
      }

      .pp-er-pe-pct.pp-er-pe--aviso {
          color: var(--pp-aviso);
      }

      .pp-er-pe-pct.pp-er-pe--negativo {
          color: var(--pp-negativo);
      }

      .pp-er-pe-fill.pp-er-pe--ok {
          background: var(--pp-positivo);
      }

      .pp-er-pe-fill.pp-er-pe--aviso {
          background: var(--pp-aviso);
      }

      .pp-er-pe-fill.pp-er-pe--negativo {
          background: var(--pp-negativo);
      }

      /* Escudo y recomendación */
      .pp-er-texto {
          margin: var(--pp-esp-2) 0 0;
          font-size: var(--pp-fs-13);
          line-height: 1.6;
          color: var(--pp-texto-2);
      }

      .pp-er-texto b {
          color: var(--pp-texto);
      }

      .pp-er-reco-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-er-sec-cab .pp-chip {
          flex-shrink: 0;
      }

      /* ── 3. Balance General ── */
      #mod-balance-general .pp-bal-kpis {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          margin-bottom: 0;
      }

      #mod-balance-general .bal-kpi {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          min-width: 0;
          padding: var(--pp-esp-3) 10px;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          text-align: left;
      }

      #mod-balance-general .bal-kpi-label {
          margin: 0;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          letter-spacing: 0;
          text-transform: none;
          color: var(--pp-texto-2);
      }

      #mod-balance-general .bal-kpi-valor {
          margin: 0;
          font-size: 22px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      #mod-balance-general .bal-kpi-status {
          margin-top: 4px;
          padding: 2px 6px;
          border-radius: var(--pp-radio-s);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      #mod-balance-general .bal-kpi-status.status-verde {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      #mod-balance-general .bal-kpi-status.status-amarillo {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      #mod-balance-general .bal-kpi-status.status-rojo {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #mod-balance-general .pp-bal-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--pp-esp-3);
      }

      @media (min-width: 900px) {
          #mod-balance-general .pp-bal-grid {
              grid-template-columns: repeat(3, minmax(0, 1fr));
              align-items: start;
          }
      }

      .pp-bal-bloque {
          display: flex;
          flex-direction: column;
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-sizing: border-box;
      }

      .pp-bal-bloque-cab {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-bal-bloque-cab--col {
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          margin-bottom: var(--pp-esp-2);
      }

      .pp-bal-bloque-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bal-bloque-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-bal-total {
          margin: 2px 0 var(--pp-esp-2);
          font-size: 28px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      #mod-balance-general .bal-subseccion-titulo {
          display: block;
          margin: var(--pp-esp-3) 0 2px;
          padding: 0;
          background: transparent;
          border-radius: 0;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      #mod-balance-general .bal-fila {
          gap: var(--pp-esp-3);
          min-height: 40px;
          padding: 0;
          border-radius: 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
      }

      #mod-balance-general .bal-subseccion-titulo+.bal-fila,
      #mod-balance-general .pp-bal-total+.bal-fila,
      #mod-balance-general .pp-bal-bloque-cab+.bal-fila {
          border-top: 0;
      }

      #mod-balance-general .bal-fila:hover {
          background: transparent;
      }

      #mod-balance-general .bal-fila-label {
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto);
      }

      #mod-balance-general .bal-fila-valor {
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      #mod-balance-general .pp-bal-fila-dif .bal-fila-label {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      #mod-balance-general .bal-fila-valor.color-turquesa,
      #mod-balance-general .color-turquesa {
          color: var(--pp-positivo);
      }

      #mod-balance-general .bal-fila-valor.color-coral,
      #mod-balance-general .color-coral {
          color: var(--pp-negativo);
      }

      .pp-bal-fila-der {
          display: flex;
          align-items: center;
          gap: 6px;
      }

      .pp-bal-transito {
          cursor: pointer;
          white-space: nowrap;
      }

      #mod-balance-general .bal-fila-total {
          gap: var(--pp-esp-3);
          margin-top: 4px;
          padding: 0;
          min-height: 44px;
          border-top: 1px solid var(--pp-borde-fuerte);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bal-acciones {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .pp-bal-acciones:not(:has(> [style*="flex"])):not(:has(> [style*="block"])) {
          display: none;
      }

      #btn-editar-balance[style*="flex"],
      #btn-guardar-balance[style*="flex"],
      #btn-editar-balance[style*="block"],
      #btn-guardar-balance[style*="block"] {
          display: inline-flex !important;
          flex: 1;
      }

      /* Gráfica de evolución patrimonial */
      #mod-balance-general .bal-chart-wrap {
          margin-top: var(--pp-esp-3);
      }

      #mod-balance-general .bal-chart-barras {
          gap: 6px;
          height: 96px;
      }

      #mod-balance-general .bal-barra {
          border-radius: 4px 4px 0 0;
          background: var(--pp-borde-fuerte);
      }

      #mod-balance-general .bal-barra-item:last-child .bal-barra {
          background: var(--pp-acento);
      }

      #mod-balance-general .bal-barra.negativa,
      #mod-balance-general .bal-barra-item:last-child .bal-barra.negativa {
          background: var(--pp-negativo);
      }

      #mod-balance-general .bal-barra-label {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pp-bal-chart-vacio {
          width: 100%;
          align-self: center;
          font-size: var(--pp-fs-12);
          line-height: 1.6;
          color: var(--pp-texto-3);
          text-align: center;
      }

      /* Ecuación Activos = Pasivos + Patrimonio */
      #mod-balance-general .pp-bal-ecuacion {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
          align-items: center;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-normal);
          text-align: center;
      }

      .pp-bal-ecuacion>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pp-bal-ecuacion strong {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-bal-signo {
          font-size: var(--pp-fs-17);
          color: var(--pp-texto-3);
      }

      /* ── 4. Espejo Fiscal SRI ── */
      #mod-sri-fiscal .pp-sri {
          max-width: 640px;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      #mod-sri-fiscal .sri-header {
          margin-bottom: var(--pp-esp-4);
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      #mod-sri-fiscal .sri-header-top {
          margin-bottom: var(--pp-esp-3);
      }

      #mod-sri-fiscal .sri-titulo {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-regimen {
          padding: 2px 8px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-mes-nav {
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 3px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      #mod-sri-fiscal .sri-mes-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 36px;
          padding: 0;
          border: 1px solid transparent;
          border-radius: 8px;
          background: transparent;
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-mes-btn:not(:disabled):hover {
          background: var(--pp-superficie);
          border-color: var(--pp-borde);
      }

      #mod-sri-fiscal .sri-mes-actual {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-seccion-tit {
          margin: var(--pp-esp-5) 0 var(--pp-esp-2);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          color: var(--pp-texto-3);
      }

      #mod-sri-fiscal .sri-grid {
          gap: var(--pp-esp-2);
      }

      #mod-sri-fiscal .sri-card,
      #mod-sri-fiscal .sri-card-info {
          padding: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      #mod-sri-fiscal .sri-card-lbl {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-hint {
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      #mod-sri-fiscal .sri-hint b {
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-desglose {
          display: block;
          margin-top: 4px;
          font-size: var(--pp-fs-12);
          line-height: 1.5;
      }

      #mod-sri-fiscal .sri-card-val {
          font-size: 20px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.01em;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      #mod-sri-fiscal .sri-pos {
          color: var(--pp-positivo);
      }

      #mod-sri-fiscal .sri-neg {
          color: var(--pp-negativo);
      }

      #mod-sri-fiscal .sri-muted {
          color: var(--pp-texto-3);
      }

      #mod-sri-fiscal .sri-total-linea {
          gap: var(--pp-esp-3);
          margin-top: var(--pp-esp-2);
          padding: 10px var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-total-linea strong {
          flex-shrink: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      #mod-sri-fiscal .sri-total-linea strong.sri-neg {
          color: var(--pp-negativo);
      }

      #mod-sri-fiscal .sri-total-linea strong.sri-pos {
          color: var(--pp-positivo);
      }

      #mod-sri-fiscal .sri-total-linea--fuerte strong {
          font-size: var(--pp-fs-17);
      }

      #mod-sri-fiscal .sri-resultado {
          margin-top: var(--pp-esp-2);
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      #mod-sri-fiscal .sri-resultado-lbl {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-resultado-val {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          font-variant-numeric: tabular-nums;
      }

      #mod-sri-fiscal .sri-resultado-pagar {
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      #mod-sri-fiscal .sri-resultado-pagar .sri-resultado-val {
          color: var(--pp-negativo);
      }

      #mod-sri-fiscal .sri-resultado-favor {
          box-shadow: inset 3px 0 0 var(--pp-positivo);
      }

      #mod-sri-fiscal .sri-resultado-favor .sri-resultado-val {
          color: var(--pp-positivo);
      }

      #mod-sri-fiscal .sri-btn-pago {
          margin-top: var(--pp-esp-3);
      }

      #mod-sri-fiscal .sri-card-ico {
          display: flex;
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-card-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-card-txt {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-aviso-config {
          margin-bottom: var(--pp-esp-4);
          padding: var(--pp-esp-3);
          background: var(--pp-aviso-suave);
          border: 0;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-plegable {
          margin-top: var(--pp-esp-2);
          padding: 0 var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
      }

      #mod-sri-fiscal .sri-plegable>summary {
          display: flex;
          align-items: center;
          gap: 6px;
          min-height: 44px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          cursor: pointer;
      }

      #mod-sri-fiscal .sri-plegable>summary::-webkit-details-marker {
          display: none;
      }

      #mod-sri-fiscal .sri-plegable>summary::after {
          content: '';
          width: 7px;
          height: 7px;
          margin: 0 4px 0 auto;
          border-right: 1.5px solid var(--pp-texto-3);
          border-bottom: 1.5px solid var(--pp-texto-3);
          transform: rotate(-45deg);
          transition: transform .15s ease;
      }

      #mod-sri-fiscal .sri-plegable[open]>summary::after {
          transform: rotate(45deg);
      }

      #mod-sri-fiscal .sri-plegable>summary {
          list-style: none;
      }

      #mod-sri-fiscal .sri-plegable[open] {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding-bottom: var(--pp-esp-3);
      }

      #mod-sri-fiscal .sri-factura {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          padding-top: var(--pp-esp-2);
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
      }

      #mod-sri-fiscal .sri-factura-txt {
          flex: 1;
          min-width: 0;
      }

      #mod-sri-fiscal .sri-factura-anular {
          height: 36px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
      }

      #mod-sri-fiscal .sri-disclaimer {
          align-items: flex-start;
          gap: 10px;
          margin-top: var(--pp-esp-5);
          padding: var(--pp-esp-3);
          background: var(--pp-sutil);
          border: 0;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-disclaimer>.pp-icono {
          color: var(--pp-aviso);
          width: 18px;
          height: 18px;
      }

      #mod-sri-fiscal .sri-disclaimer b {
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-btn-compartir {
          margin-top: var(--pp-esp-4);
          padding: 0 var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 12px;
          color: var(--pp-texto);
          font-size: var(--pp-fs-15);
          filter: none;
      }

      #mod-sri-fiscal .sri-btn-compartir:hover {
          background: var(--pp-sutil);
      }

      #mod-sri-fiscal .sri-cargando,
      #mod-sri-fiscal .sri-error {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--pp-esp-2);
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-13);
      }

      #mod-sri-fiscal .sri-error>.pp-icono {
          width: 28px;
          height: 28px;
      }

      #mod-sri-fiscal .sri-spinner {
          width: 28px;
          height: 28px;
          border-width: 2px;
          border-color: var(--pp-borde);
          border-top-color: var(--pp-acento);
      }

      .sri-pago-monto.pp-campo {
          height: var(--pp-alto-control-l);
          font-size: 20px;
          font-weight: var(--pp-fw-fuerte);
          text-align: right;
      }

      /* ── 5. Pantallas pequeñas ── */
      @media (max-width: 380px) {
          .pp-er-neta {
              font-size: var(--pp-fs-28);
          }

          #mod-balance-general .bal-kpi-valor {
              font-size: 19px;
          }

          .pp-er-fila-valor {
              min-width: 72px;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 6a] INTELIGENCIA
         Sigue el tema (claro en Clásico, oscuro en Black PRO y Orquídea).
         Gráficos con la paleta de datos --pp-dato-1..5.
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 5b).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedor y período ── */
      #mod-inteligencia.pp-in {
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      .pp-in-periodos {
          position: sticky;
          top: 0;
          z-index: 10;
          padding: 4px 0 var(--pp-esp-2);
          background: var(--pp-fondo);
      }

      .pp-in-periodos .pp-segmentado>button {
          min-width: 0;
          padding: 0 2px;
          font-size: var(--pp-fs-12);
          white-space: nowrap;
      }

      .pp-in-periodos .pp-segmentado>.pp-in-periodo-rango {
          flex: 0 0 40px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .pp-in-periodo-rango .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-in-rango {
          display: none;
          align-items: flex-end;
          gap: var(--pp-esp-2);
          margin-bottom: var(--pp-esp-3);
      }

      .pp-in-rango>div {
          flex: 1;
          min-width: 0;
      }

      .pp-in-rango .pp-btn {
          flex-shrink: 0;
      }

      .pp-in-contenido {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          margin-top: var(--pp-esp-2);
      }

      .pp-in-estado {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-8) var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      /* ── 2. Tarjetas ── */
      .pp-in-card {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
          box-sizing: border-box;
      }

      .pp-in-card--alerta {
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pp-in-tit {
          margin-bottom: 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-in-dato {
          font-size: 22px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.25;
          color: var(--pp-texto);
          overflow-wrap: anywhere;
      }

      .pp-in-sub {
          margin-bottom: var(--pp-esp-3);
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-3);
      }

      .pp-in-card>.pp-in-sub:last-child {
          margin-bottom: 0;
      }

      .pp-in-vacio {
          margin: 0;
          padding: var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-in-bueno {
          color: var(--pp-positivo) !important;
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-in-malo {
          color: var(--pp-negativo) !important;
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-in-aviso {
          color: var(--pp-aviso) !important;
      }

      .pp-in-igual {
          color: var(--pp-texto-3);
      }

      /* Candado PRO */
      .pp-in-lock {
          position: absolute;
          inset: 0;
          z-index: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: var(--pp-esp-2);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pp-in-lock::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: -1;
          background: var(--pp-superficie);
          opacity: .94;
      }

      .pp-in-card:has(> .pp-in-lock) {
          min-height: 120px;
      }

      .pp-in-lock .pp-icono {
          width: 24px;
          height: 24px;
      }

      /* ── 3. Resumen del período ── */
      .pp-in-res-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          margin: 4px 0 var(--pp-esp-3);
      }

      .pp-in-res-item {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-in-res-val {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-in-res-sub {
          font-size: var(--pp-fs-11);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pp-in-split {
          display: flex;
          height: 8px;
          gap: 2px;
          border-radius: var(--pp-radio-full);
          overflow: hidden;
          background: var(--pp-sutil);
      }

      .pp-in-split>div {
          transition: width .6s ease;
      }

      .pp-in-split-ley {
          display: flex;
          justify-content: space-between;
          margin-top: 6px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-in-split-ley i {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 5px;
          border-radius: 2px;
      }

      /* Pestañas */
      .pp-in-tabs>button {
          min-width: 0;
          padding: 0 2px;
          white-space: nowrap;
      }

      /* ── 4. Gráficos ── */
      .pp-in-barras {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .pp-in-barra-cab {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          margin-bottom: 4px;
          font-size: var(--pp-fs-13);
      }

      .pp-in-barra-lbl {
          min-width: 0;
          color: var(--pp-texto);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-in-barra-val {
          flex-shrink: 0;
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-in-pista {
          display: block;
          height: 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          overflow: hidden;
      }

      .pp-in-pista--l {
          height: 8px;
          margin-top: 6px;
      }

      .pp-in-relleno {
          display: block;
          width: 0;
          height: 100%;
          border-radius: var(--pp-radio-full);
          transition: width .8s ease;
      }

      @media (prefers-reduced-motion: reduce) {

          .pp-in-relleno,
          .pp-in-split>div {
              transition: none;
          }
      }

      .pp-in-linea {
          display: block;
          width: 100%;
          margin-top: 4px;
      }

      .pp-in-donut {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-4);
          flex-wrap: wrap;
      }

      .pp-in-donut>svg {
          width: 100px;
          flex-shrink: 0;
      }

      .pp-in-donut-ley {
          flex: 1;
          min-width: 140px;
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pp-in-ley {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          font-size: var(--pp-fs-13);
      }

      .pp-in-ley-color {
          flex-shrink: 0;
          width: 10px;
          height: 10px;
          border-radius: 3px;
      }

      .pp-in-ley-lbl {
          min-width: 0;
          color: var(--pp-texto-2);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-in-ley-val {
          margin-left: auto;
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-in-gauge {
          display: block;
          width: 100%;
          max-width: 200px;
          margin: 0 auto;
      }

      /* Mapa de calor */
      .pp-in-hm-marco {
          overflow-x: auto;
      }

      .pp-in-hm {
          width: 100%;
          border-collapse: separate;
          border-spacing: 3px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-in-hm-h {
          text-align: center;
      }

      .pp-in-hm-d {
          padding-right: 4px;
          white-space: nowrap;
      }

      .pp-in-hm-c {
          position: relative;
          min-width: 26px;
          height: 24px;
          border-radius: 5px;
          background: var(--pp-sutil);
          text-align: center;
          overflow: hidden;
      }

      .pp-in-hm-bg {
          position: absolute;
          inset: 0;
          background: var(--pp-dato-1);
      }

      .pp-in-hm-v {
          position: relative;
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pp-in-hm-v--fuerte {
          color: var(--pp-superficie);
      }

      /* Tablas (cobertura, variantes, capital congelado) */
      .pp-in-tabla-marco {
          overflow-x: auto;
          margin-top: 4px;
      }

      .pp-in-tabla {
          width: 100%;
          border-collapse: collapse;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .pp-in-tabla th {
          padding: 6px 8px;
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          text-align: left;
          white-space: nowrap;
      }

      .pp-in-tabla td {
          padding: 8px;
          border-bottom: 1px solid var(--pp-borde);
      }

      .pp-in-tabla tr:last-child td {
          border-bottom: 0;
      }

      .pp-in-tabla .pp-in-der {
          text-align: right;
      }

      .pp-in-alerta-fila {
          margin-top: 4px;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto);
      }

      /* ── 5. Explorador ── */
      .pp-in-ctrl-tit {
          margin: var(--pp-esp-3) 0 6px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pp-in-chips {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          padding-bottom: 2px;
          scrollbar-width: none;
      }

      .pp-in-chips::-webkit-scrollbar {
          display: none;
      }

      .pp-in-chip {
          flex: 0 0 auto;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          height: 32px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: transparent;
          color: var(--pp-texto-2);
          font-family: inherit;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          cursor: pointer;
      }

      .pp-in-chip.activo {
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-in-chip .pp-icono {
          width: 14px;
          height: 14px;
      }

      .pp-in-chip--nuevo {
          border-style: dashed;
      }

      .pp-in-filtros {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
      }

      .pp-in-link {
          padding: 4px;
          border: 0;
          background: transparent;
          color: var(--pp-texto-3);
          font-family: inherit;
          font-size: var(--pp-fs-12);
          text-decoration: underline;
          cursor: pointer;
      }

      .pp-in-picker {
          flex-wrap: wrap;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-2);
      }

      .pp-in-picker select {
          flex: 1 1 140px;
          min-width: 0;
      }

      .pp-in-exp-tot {
          margin-bottom: var(--pp-esp-2);
      }

      .pp-in-exp-tot .pp-in-sub {
          margin-bottom: 2px;
      }

      .pp-in-exp-resumen {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-in-exp-fila {
          padding: 8px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-in-exp-fila-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
      }

      .pp-in-exp-toggle {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--pp-texto);
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pp-in-exp-linea {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          width: 100%;
      }

      .pp-in-exp-linea .pp-in-pista {
          flex: 1;
      }

      .pp-in-exp-nombre {
          flex: 1;
          min-width: 0;
          font-size: var(--pp-fs-13);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-in-exp-n {
          color: var(--pp-texto-3);
      }

      .pp-in-exp-valor {
          flex-shrink: 0;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-in-exp-pct {
          flex-shrink: 0;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-in-exp-chev {
          display: flex;
          color: var(--pp-texto-3);
          transition: transform .15s ease;
      }

      .pp-in-exp-chev .pp-icono {
          width: 14px;
          height: 14px;
      }

      .pp-in-exp-fila.abierto .pp-in-exp-chev {
          transform: rotate(90deg);
      }

      .pp-in-exp-filtrar {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 34px;
          height: 34px;
          padding: 0;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pp-in-exp-filtrar .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-in-exp-sub {
          margin: 6px 0 2px 18px;
          padding-left: 10px;
          border-left: 2px solid var(--pp-borde-fuerte);
      }

      .pp-in-exp-sub-fila {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          padding: 3px 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-in-exp-sub-fila span {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-in-exp-sub-fila b {
          flex-shrink: 0;
          color: var(--pp-texto);
          font-weight: var(--pp-fw-medio);
      }

      .pp-in-exp-nota {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-in-exp-mas {
          margin-top: var(--pp-esp-3);
      }

      .pp-in-exp-acciones {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-4);
      }

      .pp-in-exp-acciones .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-in-notas {
          margin-top: var(--pp-esp-3);
          font-size: var(--pp-fs-11);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      /* ── 6. Pantallas pequeñas ── */
      @media (max-width: 380px) {
          .pp-in-periodos .pp-segmentado>button {
              font-size: var(--pp-fs-11);
          }

          .pp-in-dato {
              font-size: 20px;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 6b-1] CAJA DEL DÍA
         Gastos · Pagos programados · Cierre de caja · Bancos
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 6a).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedores ── */
      #mod-gasto.pp-gas,
      #mod-cierre.pp-cie,
      #mod-bancos.pp-ban {
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      #mod-gasto.pp-gas>*+*,
      #mod-cierre.pp-cie>*+*,
      #mod-bancos.pp-ban>*+* {
          margin-top: var(--pp-esp-4);
      }

      #mod-gasto.pp-gas>h2.pp-oculto-visual+* {
          margin-top: 0;
      }

      /* ── 2. Gastos ── */
      .pp-gas-panel[hidden] {
          display: none !important;
      }

      #gas-panel-programados {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-4);
      }

      #mod-gasto .pp-fia-form {
          display: flex;
          flex-direction: column;
      }

      #mod-gasto .pp-segmentado>button {
          min-width: 0;
          padding: 0 4px;
          white-space: nowrap;
      }

      .pp-gas-monto.pp-campo {
          height: var(--pp-alto-control-l);
          font-size: 24px;
          font-weight: var(--pp-fw-fuerte);
          text-align: right;
      }

      .pp-gas-factura {
          display: flex;
          align-items: flex-start;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          cursor: pointer;
      }

      .pp-gas-factura input {
          flex-shrink: 0;
          width: 20px;
          height: 20px;
          margin: 0;
          accent-color: var(--pp-acento);
      }

      .pp-gas-factura>span {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-gas-factura-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .pp-gas-aviso {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-3);
          background: var(--pp-aviso-suave);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto);
      }

      .pp-gas-aviso[style*="display: block"],
      .pp-gas-aviso[style*="display:block"] {
          display: flex !important;
      }

      .pp-gas-ayuda {
          margin-top: 4px;
      }

      .pp-gas-pp {
          gap: var(--pp-esp-2);
      }

      .pp-gas-pp-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-gas-pp-concepto {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .pp-gas-pp-detalle {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-gas-pp-meta {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-gas-pp-pagar {
          flex-shrink: 0;
          height: 36px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
      }

      .pp-gas-modal-monto {
          margin-top: 4px;
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      .pp-gas-deshabilitado {
          opacity: .5;
      }

      /* ── 3. Cierre de caja ── */
      .pp-cie-filtro .pp-fia-accion .pp-campo {
          flex: 1;
      }

      /* El tema oscuro antiguo pintaba "Buscar" en turquesa */
      html body #vista-erp #filtro-fecha-admin button.pp-btn--secundario {
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde-fuerte) !important;
          color: var(--pp-texto) !important;
      }

      #cargando-caja[style*="block"] {
          display: flex !important;
      }

      .pp-cie-dash {
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      #dashboard-caja.pp-cie-dash[style*="block"] {
          display: flex !important;
      }

      .pp-cie-total {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-cie-neta {
          font-size: var(--pp-fs-34);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
      }

      .pp-cie-dos {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-cie-mini {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-cie-mini .pp-num {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cie-mini-ayuda {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-cie-bloque {
          padding: 14px var(--pp-esp-4);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-cie-tit {
          margin-bottom: 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-cie-fila {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          min-height: 40px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .pp-cie-tit+.pp-cie-fila,
      .pp-cie-detalle>.pp-cie-fila:first-child {
          border-top: 0;
      }

      .pp-cie-fila>span:last-child {
          font-weight: var(--pp-fw-fuerte);
          text-align: right;
      }

      .pp-cie-fila--sep {
          border-top-color: var(--pp-borde-fuerte);
      }

      .pp-cie-pos {
          color: var(--pp-positivo) !important;
      }

      .pp-cie-neg {
          color: var(--pp-negativo) !important;
      }

      .pp-cie-aportes {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          margin-top: 6px;
      }

      .pp-cie-aporte {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-cie-aporte .pp-num {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cie-vacio {
          grid-column: 1 / -1;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-cie-movs {
          max-height: 420px;
          overflow-y: auto;
      }

      .pp-cie-mov {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 10px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-cie-movs>.pp-cie-mov:first-child {
          border-top: 0;
      }

      .pp-cie-mov-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .pp-cie-mov-ico .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-cie-mov-ico--in {
          background: var(--pp-acento-suave);
          color: var(--pp-positivo);
      }

      .pp-cie-mov-ico--out {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pp-cie-mov-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-cie-mov-accion {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .pp-cie-mov-detalle {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          overflow-wrap: anywhere;
      }

      .pp-cie-mov-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px;
          margin-top: 4px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-cie-mov-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 6px;
      }

      .pp-cie-mov-monto {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-cie-recibo {
          height: 30px;
          padding: 0 10px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: transparent;
          color: var(--pp-texto-2);
          font-family: inherit;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .pp-cie-recibo:hover {
          background: var(--pp-sutil);
      }

      .pp-cie-acciones {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-cie-detalle {
          display: flex;
          flex-direction: column;
      }

      /* ── 4. Bancos ── */
      .pp-ban-cab {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-ban-cab .pp-btn {
          flex-shrink: 0;
      }

      #btn-add-banco[style*="block"] {
          display: inline-flex !important;
      }

      .pp-ban-fila {
          gap: 4px;
          padding: 6px 8px 6px 6px;
      }

      .pp-ban-abrir {
          flex: 1;
          min-width: 0;
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: 6px;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto);
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pp-ban-abrir:hover {
          background: var(--pp-sutil);
      }

      .pp-ban-ini {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .02em;
      }

      .pp-ban-ini--l {
          width: 48px;
          height: 48px;
          font-size: var(--pp-fs-17);
      }

      .pp-ban-txt {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-ban-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-ban-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-ban-accion:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pp-ban-info-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          min-width: 0;
      }

      .pp-ban-info-sub {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      #banco-metodoCobro-badge[style*="inline-block"] {
          display: inline-flex !important;
      }

      .pp-ban-datos {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-ban-numero {
          margin-bottom: var(--pp-esp-2);
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          word-break: break-all;
      }

      .pp-ban-dato {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-ban-qr {
          display: flex;
          justify-content: center;
      }

      #banco-qr-img {
          width: 200px;
          height: 200px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: #FFFFFF;
      }

      .pp-ban-qr-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: var(--pp-esp-2);
          width: 200px;
          height: 140px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-ban-qr-vacio[style*="display: none"],
      .pp-ban-qr-vacio[style*="display:none"] {
          display: none !important;
      }

      .pp-ban-qr-vacio .pp-icono {
          width: 28px;
          height: 28px;
      }

      /* ── 5. Pantallas pequeñas ── */
      @media (max-width: 380px) {
          .pp-gas-vista>button {
              font-size: var(--pp-fs-12);
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 6b-2] PLANIFICACIÓN
         Bóveda (créditos, simulador, pagos) · Flujo de caja (Hoy | Mes | Equilibrio)
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 6b-1).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedores ── */
      #mod-boveda.pp-bov,
      #mod-cfo.pp-cfo {
          width: 100%;
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      #mod-boveda.pp-bov>*+* {
          margin-top: var(--pp-esp-4);
      }

      #mod-boveda.pp-bov>h2.pp-oculto-visual+* {
          margin-top: 0;
      }

      #mod-cfo.pp-cfo {
          flex-direction: column;
          gap: var(--pp-esp-4);
      }

      body.tema-black :is(#mod-boveda, #mod-cfo) input[type="date"],
      body.tema-black :is(#mod-boveda, #mod-cfo) input[type="month"] {
          color-scheme: dark;
      }

      :is(#mod-boveda, #mod-cfo) .pp-segmentado>button {
          min-width: 0;
          padding: 0 6px;
          white-space: nowrap;
      }

      /* ── 2. Bóveda: resumen y acciones ── */
      .pp-bov-resumen {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: var(--pp-esp-4);
      }

      .pp-bov-total {
          font-size: var(--pp-fs-34);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
      }

      .pp-bov-barra {
          height: 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          overflow: hidden;
      }

      .pp-bov-barra>div {
          width: 0;
          height: 100%;
          border-radius: inherit;
          background: var(--pp-acento);
          transition: width 1s ease-out;
      }

      .pp-bov-pie {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-bov-pie b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-acciones {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-bov-acciones>.pp-btn {
          flex-direction: column;
          gap: 6px;
          height: auto;
          min-height: 72px;
          padding: 10px 6px;
          font-size: var(--pp-fs-13);
          line-height: 1.25;
          text-align: center;
          white-space: normal;
      }

      /* ── 3. Bóveda: formularios (uno a la vez, en el lugar) ── */
      .pp-bov-form {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-4);
          padding: var(--pp-esp-4);
      }

      .pp-bov-form[style*="display: block"],
      .pp-bov-form[style*="display:block"] {
          display: flex !important;
      }

      .pp-bov-form-tit {
          margin: 0 0 2px;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-ayuda {
          margin: 6px 0 0;
      }

      .pp-bov-botones {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .pp-bov-botones>.pp-btn {
          flex: 1;
          min-width: 0;
      }

      .pp-bov-botones>.pp-btn--primario {
          flex: 1.6;
      }

      #btn-simulador-tabla[style*="block"] {
          display: inline-flex !important;
      }

      .pp-bov-sim {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: var(--pp-esp-4) var(--pp-esp-3) var(--pp-esp-3);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          text-align: center;
      }

      .pp-bov-sim-cuota {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      .pp-bov-sim-fila {
          align-self: stretch;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 4px var(--pp-esp-3);
          margin-top: 8px;
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-bov-sim-fila b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-consejo {
          align-items: flex-start;
          gap: var(--pp-esp-2);
          padding: 10px 12px;
          border-left: 3px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-bov-consejo b {
          color: var(--pp-texto);
      }

      .pp-bov-consejo-ico:empty {
          display: none;
      }

      .pp-bov-consejo[data-nivel="peligro"] {
          background: var(--pp-negativo-suave);
          border-left-color: var(--pp-negativo);
      }

      .pp-bov-consejo[data-nivel="peligro"] b {
          color: var(--pp-negativo);
      }

      .pp-bov-consejo[data-nivel="aviso"] {
          background: var(--pp-aviso-suave);
          border-left-color: var(--pp-aviso);
      }

      .pp-bov-consejo[data-nivel="aviso"] b {
          color: var(--pp-aviso);
      }

      .pp-bov-consejo[data-nivel="ok"] {
          background: var(--pp-acento-suave);
          border-left-color: var(--pp-acento);
      }

      .pp-bov-consejo[data-nivel="ok"] b {
          color: var(--pp-acento-texto);
      }

      /* ── 4. Bóveda: créditos ── */
      .pp-bov-seccion {
          margin: 0;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      #mod-boveda.pp-bov>.pp-bov-seccion {
          margin-top: var(--pp-esp-6);
      }

      #mod-boveda.pp-bov>.pp-bov-seccion+* {
          margin-top: var(--pp-esp-2);
      }

      .pp-bov-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-bov-vacio-tit {
          display: block;
          margin-bottom: 4px;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pp-bov-cred {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: var(--pp-esp-4);
      }

      .pp-bov-cred-cab {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-bov-cred-id {
          min-width: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
      }

      .pp-bov-cred-nombre {
          max-width: 100%;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-bov-cred-cuota {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 2px;
          text-align: right;
      }

      .pp-bov-cred-cuota .pp-num {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-bov-cred-ayuda {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-bov-cred-montos {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pp-bov-cred-montos b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-cred-montos b.pp-bov-pos {
          color: var(--pp-positivo);
      }

      .pp-bov-cred-acciones {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          margin-top: 4px;
      }

      .pp-bov-cred-acciones>.pp-btn {
          height: 40px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          white-space: nowrap;
      }

      .pp-bov-cred-acciones>.pp-btn--primario {
          flex: 1;
          min-width: 0;
      }

      .pp-bov-cred-acciones>.pp-tk-quitar {
          width: 40px;
          height: 40px;
      }

      .pp-bov-cred-acciones>.pp-tk-quitar:hover {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      /* ── 5. Bóveda: movimientos de capital ── */
      .pp-bov-hist-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-bov-hist-nombre {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-bov-hist-meta {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-bov-hist-der {
          flex-shrink: 0;
          text-align: right;
      }

      .pp-bov-hist-der .pp-num {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-hist-vacio {
          margin: 0;
          padding: var(--pp-esp-5) var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      /* ── 6. Bóveda: ventanas (pagar cuota · tabla de amortización) ── */
      .pp-bov-pago-ref {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;
          text-align: center;
      }

      .pp-bov-pago-cuota {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      .pp-bov-amort-sub {
          margin: 2px 0 0;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-bov-mini {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 10px 12px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-bov-mini .pp-num {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-tabla-wrap {
          flex-shrink: 1;
          min-height: 120px;
          max-height: 52dvh;
          overflow: auto;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
      }

      .pp-bov-tabla {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0;
          font-size: var(--pp-fs-12);
          font-variant-numeric: tabular-nums;
      }

      .pp-bov-tabla th {
          position: sticky;
          top: 0;
          z-index: 1;
          padding: 8px 6px;
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
          text-align: right;
          white-space: nowrap;
      }

      .pp-bov-tabla td {
          padding: 8px 6px;
          border-top: 1px solid var(--pp-borde);
          color: var(--pp-texto-2);
          text-align: right;
          white-space: nowrap;
      }

      @media (max-width: 420px) {
          .pp-bov-tabla {
              font-size: var(--pp-fs-11);
          }

          /* 🎨 [f221] Antes: .pp-bov-tabla :is(th, td) · separado para que el navegador lo encuentre rápido */
          .pp-bov-tabla th,
          .pp-bov-tabla td {
              padding-left: 4px;
              padding-right: 4px;
          }
      }

      .pp-bov-tabla tbody tr:first-child td {
          border-top: 0;
      }

      /* 🎨 [f221] Antes: .pp-bov-tabla :is(th, td):nth-child(-n+2) · separado para que el navegador lo encuentre rápido */
      .pp-bov-tabla th:nth-child(-n+2),
      .pp-bov-tabla td:nth-child(-n+2) {
          text-align: center;
      }

      .pp-bov-tabla td:nth-child(5) {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-pagada td:first-child {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-positivo);
      }

      .pp-bov-pagada-fecha {
          display: inline-flex;
          align-items: center;
          gap: 2px;
          font-weight: var(--pp-fw-medio);
          color: var(--pp-positivo);
      }

      .pp-bov-pagada-fecha .pp-icono {
          width: 13px;
          height: 13px;
          stroke-width: 2.25;
      }

      .pp-bov-tabla td.pp-bov-amort-ok {
          padding: var(--pp-esp-5);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-positivo);
          text-align: center;
      }

      /* ── 7. Flujo de caja: vistas Hoy | Mes | Equilibrio ── */
      .pp-cfo-panel {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-cfo-panel[hidden] {
          display: none !important;
      }

      .pp-cfo-panel>div:empty {
          display: none;
      }

      .pp-cfo-bloque {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4);
      }

      .pp-cfo-destacado {
          border-color: var(--pp-acento);
      }

      .pp-cfo-rotulo {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-cfo-destacado .pp-cfo-rotulo {
          color: var(--pp-acento-texto);
      }

      .pp-cfo-cab {
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          justify-content: space-between;
          gap: 2px var(--pp-esp-3);
      }

      .pp-cfo-texto {
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-cfo-texto b,
      .pp-cfo-nota b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cfo-grande {
          margin: 2px 0;
          font-size: 32px;
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
      }

      :is(.pp-cfo-texto, .pp-cfo-nota, .pp-cfo-grande, .pp-cfo-fila-meta, .pp-num) .pp-cfo-pos,
      .pp-cfo-pos {
          color: var(--pp-positivo) !important;
      }

      .pp-cfo-neg,
      .pp-cfo-nota b.pp-cfo-neg {
          color: var(--pp-negativo) !important;
      }

      .pp-cfo-aviso-txt {
          color: var(--pp-aviso) !important;
      }

      .pp-cfo-nota {
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-cfo-nota--caja {
          padding: 10px 12px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-12);
      }

      .pp-cfo-aviso {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 10px 12px;
          border-left: 3px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto);
      }

      .pp-cfo-aviso>span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-cfo-aviso--ok {
          background: var(--pp-acento-suave);
          border-left-color: var(--pp-acento);
      }

      .pp-cfo-aviso--ok>b {
          color: var(--pp-acento-texto);
      }

      .pp-cfo-aviso--mal {
          background: var(--pp-negativo-suave);
          border-left-color: var(--pp-negativo);
      }

      .pp-cfo-aviso--mal>b {
          color: var(--pp-negativo);
      }

      .pp-cfo-aviso--aviso {
          background: var(--pp-aviso-suave);
          border-left-color: var(--pp-aviso);
      }

      .pp-cfo-aviso--aviso>b {
          color: var(--pp-aviso);
      }

      .pp-cfo-puedo {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding-top: var(--pp-esp-3);
          border-top: 1px solid var(--pp-borde);
      }

      #puedo-box[style*="block"] {
          display: flex !important;
          flex-direction: column;
          gap: 10px;
      }

      #puedo-resultado:empty {
          display: none;
      }

      .pp-cfo-mini {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 10px 12px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-cfo-mini .pp-num {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      /* Filas (caja libre · escalera) */
      .pp-cfo-fila {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-cfo-fila .pp-icono-caja,
      .pp-cfo-fila .pp-cie-mov-ico {
          width: 28px;
          height: 28px;
      }

      .pp-cfo-fila .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-cfo-fila-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-cfo-fila-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-cfo-fila-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-cfo-fila-der {
          flex-shrink: 0;
          text-align: right;
      }

      .pp-cfo-fila-der .pp-num {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cfo-detalles>summary {
          display: flex;
          align-items: center;
          gap: 6px;
          min-height: 32px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-acento-texto);
          list-style: none;
          cursor: pointer;
      }

      .pp-cfo-detalles>summary::-webkit-details-marker {
          display: none;
      }

      .pp-cfo-detalles>summary::after {
          content: "";
          width: 7px;
          height: 7px;
          margin-left: 2px;
          border-right: 1.5px solid currentColor;
          border-bottom: 1.5px solid currentColor;
          transform: translateY(-2px) rotate(45deg);
          transition: transform .15s ease;
      }

      .pp-cfo-detalles[open]>summary::after {
          transform: translateY(1px) rotate(-135deg);
      }

      .pp-cfo-detalles>div:first-of-type {
          margin-top: 4px;
      }

      .pp-cfo-pie {
          margin-top: 6px;
          font-size: var(--pp-fs-11);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .pp-cfo-bloque>.pp-cfo-pie {
          margin-top: 0;
      }

      .pp-cfo-pie b {
          color: var(--pp-texto-2);
      }

      /* Gráficos */
      .pp-cfo-grafico {
          padding: 10px 8px 8px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-cfo-grafico .pp-cfo-pie {
          text-align: center;
      }

      .pp-cfo-lienzo {
          position: relative;
          width: 100%;
      }

      .pp-cfo-lienzo--180 {
          height: 180px;
      }

      .pp-cfo-lienzo--210 {
          height: 210px;
      }

      .pp-cfo-lienzo--300 {
          height: 300px;
      }

      /* ── 8. Flujo de caja: Mes ── */
      #flujo-mini-chart-wrap[style*="block"] {
          display: flex !important;
      }

      .pp-cfo-toggle {
          align-self: flex-start;
      }

      .pp-cfo-toggle>button {
          flex: none;
          height: 30px;
          padding: 0 14px !important;
      }

      .pp-cfo-leyenda {
          display: flex;
          flex-wrap: wrap;
          gap: 6px 14px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-cfo-leyenda>span {
          display: inline-flex;
          align-items: center;
          gap: 5px;
      }

      .pp-cfo-muestra {
          width: 10px;
          height: 10px;
          border-radius: 2px;
      }

      .pp-cfo-muestra--1 {
          background: var(--pp-dato-1);
      }

      .pp-cfo-muestra--2 {
          background: var(--pp-dato-2);
      }

      .pp-cfo-muestra--3 {
          background: var(--pp-dato-3);
      }

      .pp-cfo-muestra--linea {
          width: 14px;
          height: 0;
          border-top: 2px solid var(--pp-texto);
          border-radius: 0;
      }

      #flujo-alertas-cards {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      #flujo-alertas-cards:empty {
          display: none;
      }

      .pp-cfo-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          padding: 28px var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-cfo-fuente>button {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1px;
          height: auto;
          min-height: 46px;
          padding: 4px 6px;
          line-height: 1.2;
      }

      .pp-cfo-fuente>button small {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pp-cfo-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      /* Tabla proyectada (antes venía en un <style> dentro del JS) */
      .fp-scroll {
          overflow-x: auto;
      }

      .fp-tabla {
          width: 100%;
          border-collapse: collapse;
          font-size: var(--pp-fs-13);
          font-variant-numeric: tabular-nums;
      }

      .fp-tabla th {
          padding: 6px 8px;
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          text-align: right;
      }

      .fp-tabla td {
          padding: 8px;
          border-bottom: 1px solid var(--pp-borde);
          color: var(--pp-texto);
          text-align: right;
          white-space: nowrap;
      }

      /* 🎨 [f221] Antes: .fp-tabla :is(th, td):first-child · separado para que el navegador lo encuentre rápido */
      .fp-tabla th:first-child,
      .fp-tabla td:first-child {
          text-align: left;
      }

      .fp-tabla tr:not(.fp-det) {
          cursor: pointer;
      }

      .fp-tabla tr.fp-comprar {
          background: var(--pp-acento-suave);
      }

      .fp-tabla tr.fp-rojo {
          background: var(--pp-negativo-suave);
      }

      .fp-tabla tr.fp-hoy {
          background: var(--pp-sutil);
      }

      /* Los detalles empiezan cerrados (antes en celular salían todos abiertos) */
      .fp-tabla tr.fp-det {
          display: none;
      }

      .fp-tabla tr.fp-det.fp-abierto {
          display: table-row;
      }

      .fp-det>td {
          padding: 0 !important;
          white-space: normal;
      }

      .fp-dia {
          display: inline-flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px;
      }

      .fp-chev {
          display: inline-flex;
          color: var(--pp-texto-3);
          transition: transform .15s;
      }

      .fp-chev .pp-icono {
          width: 14px;
          height: 14px;
      }

      .fp-real {
          font-size: 10px;
          color: var(--pp-texto-3);
      }

      .fp-tabla td.fp-cero {
          color: var(--pp-texto-3);
      }

      .fp-tabla td.fp-final {
          font-weight: var(--pp-fw-fuerte);
      }

      .fp-det-caja {
          padding: 10px 12px;
          background: var(--pp-sutil);
          border-radius: 0 0 var(--pp-radio-m) var(--pp-radio-m);
          text-align: left;
      }

      .fp-det-tit {
          margin: 8px 0 2px;
          font-size: 10px;
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .fp-det-caja>.fp-det-tit:first-child {
          margin-top: 0;
      }

      .fp-det-linea {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 2px 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .fp-det-saldo {
          margin-top: 8px;
          padding: 6px 10px;
          background: var(--pp-superficie);
          border-radius: 8px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto);
      }

      .fp-det-saldo .fp-det-tit {
          margin: 0;
      }

      @media (max-width: 640px) {
          .fp-tabla thead {
              display: none;
          }

          .fp-tabla,
          .fp-tabla tbody,
          .fp-tabla tr {
              display: block;
              width: 100%;
          }

          .fp-tabla tr:not(.fp-det) {
              margin-bottom: 8px;
              padding: 6px 10px;
              border: 1px solid var(--pp-borde);
              border-radius: var(--pp-radio-m);
              box-sizing: border-box;
          }

          .fp-tabla td {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 3px 0;
              border: none;
              text-align: right;
          }

          .fp-tabla td::before {
              content: attr(data-label);
              font-size: var(--pp-fs-11);
              font-weight: var(--pp-fw-normal);
              color: var(--pp-texto-3);
          }

          .fp-tabla td:first-child {
              display: block;
              margin-bottom: 2px;
              font-size: var(--pp-fs-15);
          }

          .fp-tabla td:first-child::before,
          .fp-det>td::before {
              content: "";
          }

          .fp-tabla tr.fp-det.fp-abierto {
              display: block;
              margin: -8px 0 8px;
          }

          .fp-det>td {
              display: block;
          }
      }

      /* Tabla del mes: días × conceptos (sigue el tema) */
      .pp-cfo-tabla-wrap {
          overflow-x: auto;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
      }

      .fc-tabla {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0;
          font-size: var(--pp-fs-12);
          font-variant-numeric: tabular-nums;
          color: var(--pp-texto-2);
      }

      .fc-tabla th {
          position: sticky;
          top: 0;
          z-index: 2;
          min-width: 64px;
          padding: 8px 10px;
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-3);
          text-align: center;
          white-space: nowrap;
      }

      .fc-tabla td {
          padding: 7px 8px;
          border-bottom: 1px solid var(--pp-borde);
          text-align: center;
          white-space: nowrap;
      }

      .fc-tabla .fc-col1 {
          position: sticky;
          left: 0;
          z-index: 1;
          min-width: 150px;
          padding-left: 12px;
          background: var(--pp-superficie);
          border-right: 1px solid var(--pp-borde);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          text-align: left;
      }

      .fc-tabla .fc-total {
          position: sticky;
          right: 0;
          z-index: 1;
          min-width: 84px;
          background: var(--pp-sutil);
          border-left: 1px solid var(--pp-borde);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .fc-tabla th.fc-col1,
      .fc-tabla th.fc-total {
          z-index: 3;
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .fc-tabla tr.fc-seccion td {
          padding-top: 12px;
          border-bottom-color: var(--pp-borde);
      }

      .fc-tabla tr.fc-seccion td.fc-col1 {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .fc-tabla .fc-nota {
          font-size: var(--pp-fs-11);
          font-style: italic;
          color: var(--pp-texto-3);
          text-align: right;
      }

      .fc-tabla tr.fc-parcial td {
          border-top: 1px solid var(--pp-borde-fuerte);
      }

      .fc-tabla tr:is(.fc-parcial, .fc-final, .fc-saldo-ini) td.fc-col1 {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .04em;
          text-transform: uppercase;
      }

      .fc-tabla tr.fc-final td {
          border-bottom: 0;
          background: var(--pp-sutil);
      }

      .fc-tabla .fc-saldo {
          font-weight: var(--pp-fw-fuerte);
      }

      .fc-tabla .fc-cero {
          color: var(--pp-texto-off);
      }

      /* En celular solo queda fija la columna de conceptos (la de Total va al final del desplazamiento) */
      @media (max-width: 640px) {
          .fc-tabla .fc-col1 {
              min-width: 118px;
              max-width: 140px;
              white-space: normal;
          }

          .fc-tabla .fc-total {
              position: static;
          }
      }

      /* ── 9. Flujo de caja: Equilibrio ── */
      .pp-cfo-pe {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-cfo-pe .pp-cfo-mini {
          padding: var(--pp-esp-3);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pp-cfo-pe .pp-cfo-mini .pp-num {
          font-size: var(--pp-fs-20);
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 6c] COMPRAS Y EQUIPO
         Proveedores · Reposición · Vendedores · Rendimiento · Promociones · Clientes (CRM)
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 6b-2).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedores ── */
      #mod-proveedores.pp-prv {
          background: transparent !important;
      }

      #mod-proveedores .pp-prv-cont,
      #mod-reposicion.pp-rpo,
      #mod-vendedores.pp-ven,
      #mod-promociones.pp-pro,
      #mod-crm.pp-crm {
          width: 100%;
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          border: 0;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      #mod-promociones.pp-pro {
          max-width: 960px;
      }

      /* Flujo en bloque (app.js pone display:block/none en línea): separación entre hijos */
      #mod-proveedores .pp-prv-cont>*+*,
      #mod-reposicion.pp-rpo>*+*,
      #mod-vendedores.pp-ven>*+*,
      #mod-promociones.pp-pro>*+*,
      #mod-crm.pp-crm>*+* {
          margin-top: var(--pp-esp-4);
      }

      :is(#mod-proveedores .pp-prv-cont, #mod-reposicion, #mod-promociones, #mod-crm)>h2.pp-oculto-visual+* {
          margin-top: 0;
      }

      #mod-reposicion.pp-rpo>h2.pp-oculto-visual+* {
          margin-top: var(--pp-esp-3);
      }

      :is(#mod-proveedores, #mod-reposicion, #mod-vendedores, #mod-promociones, #mod-crm) .pp-segmentado>button {
          min-width: 0;
          padding: 0 6px;
          white-space: nowrap;
      }

      body.tema-black #mod-proveedores input[type="date"] {
          color-scheme: dark;
      }

      /* El tema oscuro antiguo pintaba en turquesa "Buscar" (CRM) y "Registrar compra" (Proveedores) */
      html body #vista-erp #mod-crm button.pp-btn--secundario[onclick*="buscarClienteCRM(false)"] {
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde-fuerte) !important;
          color: var(--pp-texto) !important;
      }

      html body #vista-erp #mod-proveedores button.pp-btn--primario[onclick*="ejecutarRegistroProveedor"] {
          background: var(--pp-acento) !important;
          border: 1px solid transparent !important;
          color: var(--pp-sobre-acento) !important;
      }

      /* ── 2. Proveedores ── */
      .pp-prv-panel[hidden] {
          display: none !important;
      }

      #prov-vista-pagar,
      #prov-vista-express {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      #mod-proveedores .pp-fia-form,
      #mod-promociones .pp-fia-form,
      #mod-crm .pp-fia-form {
          display: flex;
          flex-direction: column;
      }

      .pp-prv-auto {
          position: relative;
      }

      .pp-prv-drop {
          position: absolute;
          top: calc(100% + 4px);
          left: 0;
          right: 0;
          z-index: 20;
          max-height: 220px;
          overflow-y: auto;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          box-shadow: var(--pp-sombra-flotante);
      }

      .pp-prv-drop-op {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          width: 100%;
          padding: 10px 12px;
          border: 0;
          border-top: 1px solid var(--pp-borde);
          background: transparent;
          color: var(--pp-texto);
          font-family: inherit;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          text-align: left;
          cursor: pointer;
      }

      .pp-prv-drop-op:first-child {
          border-top: 0;
      }

      .pp-prv-drop-op:hover {
          background: var(--pp-sutil);
      }

      #prov-vista-pagar .pp-fia-accion>.pp-btn,
      #mod-crm .pp-fia-accion>.pp-btn {
          padding: 0 var(--pp-esp-3);
      }

      .pp-prv-nueva {
          margin-top: var(--pp-esp-2);
      }

      .pp-prv-nueva[style*="block"] {
          display: block !important;
      }

      .pp-prv-hist {
          min-height: 32px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-prv-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-prv-meta b {
          color: var(--pp-texto-2);
      }

      .pp-prv-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-prv-lista:empty {
          display: none;
      }

      /* Grupo por proveedor (Por pagar) */
      .pp-prv-grupo {
          padding: 0;
          overflow: hidden;
      }

      .pp-prv-grupo-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: 12px 14px;
          list-style: none;
          cursor: pointer;
      }

      .pp-prv-grupo-cab::-webkit-details-marker {
          display: none;
      }

      .pp-prv-grupo-cab::after {
          content: "";
          flex-shrink: 0;
          width: 7px;
          height: 7px;
          margin-left: 2px;
          border-right: 1.5px solid var(--pp-texto-3);
          border-bottom: 1.5px solid var(--pp-texto-3);
          transform: rotate(-45deg);
          transition: transform .15s ease;
      }

      .pp-prv-grupo[open]>.pp-prv-grupo-cab::after {
          transform: rotate(45deg);
      }

      .pp-prv-grupo-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-prv-grupo-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-prv-grupo-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 1px;
      }

      .pp-prv-grupo-der b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-prv-grupo-cuerpo {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: 12px 14px 14px;
          border-top: 1px solid var(--pp-borde);
          background: var(--pp-sutil);
      }

      .pp-prv-fac {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 12px;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
      }

      .pp-prv-fac-cab {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-prv-fac-txt {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-prv-fac-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          overflow-wrap: anywhere;
      }

      .pp-prv-fac-chip {
          margin-top: 4px;
      }

      .pp-prv-fac-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 4px;
          text-align: right;
      }

      .pp-prv-saldo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-prv-hist>summary {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-acento-texto);
          list-style: none;
          cursor: pointer;
      }

      .pp-prv-hist>summary::-webkit-details-marker {
          display: none;
      }

      .pp-prv-hist-cuerpo {
          margin-top: 6px;
          padding: 4px 10px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-s);
      }

      .pp-prv-hist-fila {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 5px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-prv-hist-fila:first-child {
          border-top: 0;
      }

      .pp-prv-hist-fila .pp-num {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      /* Express */
      .pp-prv-resumen {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4);
      }

      .pp-prv-resumen-txt {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pp-prv-total {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
      }

      .pp-prv-cat {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .pp-prv-cat-cab {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-prv-cat-txt {
          min-width: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
      }

      .pp-prv-cat-stock {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
      }

      .pp-prv-cat-stock b {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.1;
          color: var(--pp-texto);
      }

      .pp-prv-cat-datos {
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-prv-cat-datos .pp-num {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-prv-sub {
          text-transform: none;
          letter-spacing: 0;
      }

      .pp-prv-unit {
          margin-top: calc(var(--pp-esp-1) * -1);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-prv-unit b {
          color: var(--pp-texto);
      }

      #prov-exp-bloque-contado[style*="block"],
      #prov-exp-bloque-credito[style*="grid"] {
          display: grid !important;
      }

      #prov-exp-resumen-texto {
          margin-top: 4px;
          color: var(--pp-texto-2);
      }

      #prov-exp-resumen-texto b {
          color: var(--pp-texto);
      }

      /* ── 3. Reposición ── */
      .pp-rpo-volver {
          display: inline-flex;
          height: 36px;
          padding: 0 10px 0 6px;
          font-size: var(--pp-fs-13);
      }

      .pp-rpo-volver+h2+#reposicion-contenido,
      #reposicion-contenido {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-rpo-kpis {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-rpo-fila {
          gap: var(--pp-esp-3);
      }

      .pp-rpo-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      .pp-rpo-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-rpo-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px 6px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-rpo-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          text-align: right;
      }

      .pp-rpo-cant {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-rpo-vacio-tit {
          display: block;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pp-rpo-ok {
          color: var(--pp-positivo);
      }

      .pp-rpo-pie {
          margin: 0;
          text-align: center;
      }

      /* ── 4. Vendedores ── */
      .pp-ven-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-ven-fila {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4);
      }

      .pp-ven-fila--nueva {
          border-color: var(--pp-acento);
      }

      .pp-ven-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          min-width: 0;
      }

      .pp-ven-id {
          min-width: 0;
      }

      .pp-ven-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-ven-fila .pp-campo:disabled {
          background: var(--pp-sutil);
          border-color: var(--pp-borde);
          color: var(--pp-texto-2);
          opacity: 1;
          -webkit-text-fill-color: var(--pp-texto-2);
      }

      .pp-ven-acciones {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .pp-ven-acciones>.pp-btn {
          flex: 1;
          min-width: 0;
          height: 40px;
          padding: 0 var(--pp-esp-2);
          font-size: var(--pp-fs-13);
      }

      .pp-ven-acciones>.pp-btn[style*="block"] {
          display: inline-flex !important;
      }

      /* ── 6. Promociones ── */
      .pp-pro-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: var(--pp-esp-4);
      }

      @media (min-width: 760px) {
          .pp-pro-grid {
              grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
              align-items: start;
          }
      }

      .pp-pro-texto.pp-campo {
          height: auto;
          min-height: 84px;
          padding-top: 10px;
          padding-bottom: 10px;
          line-height: 1.45;
          resize: vertical;
      }

      .pp-pro-lista:empty {
          display: none;
      }

      .pp-pro-fila {
          min-height: 52px;
      }

      .pp-pro-fila-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-pro-fila-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-pro-fila-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-pro-previa {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4);
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-l);
      }

      .pp-pro-previa>.pp-cfo-rotulo {
          align-self: stretch;
      }

      /* La tarjeta imita la app del cliente: usa los colores de marca */
      .pp-pro-movil {
          width: 100%;
          max-width: 280px;
          overflow: hidden;
          background: #FFFFFF;
          border: 1px solid var(--pp-borde);
          border-radius: 18px;
          box-shadow: var(--pp-sombra-flotante);
          color: #18181B;
      }

      .pp-pro-movil-cab {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0 14px;
          background: var(--pp-marca-1);
          color: #FFFFFF;
          font-family: var(--pp-fuente-marca);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-pro-movil-img {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 140px;
          overflow: hidden;
          background: #F4F4F5;
          color: #A1A1AA;
      }

      .pp-pro-movil-img .pp-icono {
          width: 40px;
          height: 40px;
          stroke-width: 1.25;
      }

      .pp-pro-movil-img .pp-icono[style*="none"] {
          display: none !important;
      }

      .pp-pro-movil-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .pp-pro-movil-cuerpo {
          padding: 14px;
      }

      html body .pp-pro-movil-cuerpo h4#preview-titulo {
          color: #18181B !important;
      }

      html body .pp-pro-movil-cuerpo p#preview-texto {
          color: #52525B !important;
      }

      .pp-pro-movil-cuerpo h4 {
          margin: 0 0 6px;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: #18181B;
          overflow-wrap: anywhere;
      }

      .pp-pro-movil-cuerpo p {
          margin: 0 0 14px;
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: #52525B;
          overflow-wrap: anywhere;
      }

      .pp-pro-movil-btn {
          padding: 8px;
          border-radius: 8px;
          background: var(--pp-marca-2);
          color: #FFFFFF;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          text-align: center;
      }

      /* ── 7. Clientes (CRM) ── */
      .pp-crm-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-crm-kpis {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      @media (min-width: 560px) {
          .pp-crm-kpis {
              grid-template-columns: repeat(4, minmax(0, 1fr));
          }
      }

      .pp-crm-alerta {
          flex-direction: row;
          align-items: center;
          gap: var(--pp-esp-3);
      }

      .pp-crm-alerta-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-crm-alerta-txt>b {
          color: var(--pp-aviso);
      }

      .pp-crm-alerta-txt>span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-crm-alerta>.pp-btn {
          flex-shrink: 0;
          height: 34px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
      }

      .pp-crm-filtros {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          margin: 0 calc(var(--pp-esp-4) * -1);
          padding: 0 var(--pp-esp-4) 2px;
          scrollbar-width: none;
      }

      .pp-crm-filtros::-webkit-scrollbar {
          display: none;
      }

      .pp-crm-filtro {
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          height: 32px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: inherit;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          cursor: pointer;
      }

      .pp-crm-filtro .pp-num {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-crm-filtro.activo {
          background: var(--pp-texto);
          border-color: var(--pp-texto);
          color: var(--pp-superficie);
      }

      .pp-crm-filtro.activo .pp-num {
          color: var(--pp-superficie);
          opacity: .75;
      }

      .pp-crm-cli {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: var(--pp-esp-4);
      }

      .pp-crm-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
      }

      .pp-crm-id {
          flex: 1;
          min-width: 0;
      }

      .pp-crm-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-crm-cab>.pp-chip {
          flex-shrink: 0;
      }

      .pp-crm-datos {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          padding: 10px 12px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
      }

      .pp-crm-datos>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pp-crm-datos b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pp-crm-notas {
          padding-left: 10px;
          border-left: 2px solid var(--pp-borde-fuerte);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          overflow-wrap: anywhere;
      }

      .pp-crm-acciones {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
      }

      .pp-crm-acciones>.pp-btn {
          flex: 1;
          min-width: 0;
          height: 40px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
      }

      .pp-crm-acciones>.pp-btn .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-crm-acciones>.pp-tk-quitar {
          width: 40px;
          height: 40px;
      }

      .pp-crm-acciones>.pp-tk-quitar:hover {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      /* Ventanas de WhatsApp (recibo, pedido, mensajes) */
      .pp-crm-pre {
          margin: 0;
          padding: 12px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-family: inherit;
          font-size: var(--pp-fs-12);
          line-height: 1.5;
          white-space: pre-wrap;
          color: var(--pp-texto-2);
      }

      a.pp-crm-enlace {
          text-decoration: none;
      }

      .pp-crm-msg {
          justify-content: space-between;
          min-height: 48px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .pp-crm-msg:hover {
          background: var(--pp-sutil);
      }

      .pp-crm-msg .pp-icono {
          width: 16px;
          height: 16px;
          color: var(--pp-texto-3);
      }

      .pp-crm-personal {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          padding-top: var(--pp-esp-3);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-crm-personal .pp-editor-label {
          margin-bottom: 0;
      }

      /* Captura de cliente después de la venta: panel abajo, sin fondo oscuro */
      .pp-crm-captura {
          position: fixed;
          left: 50%;
          bottom: 0;
          z-index: 9999998;
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          width: 100%;
          max-width: 480px;
          padding: var(--pp-esp-4) var(--pp-esp-4) calc(var(--pp-esp-5) + env(safe-area-inset-bottom, 0px));
          box-sizing: border-box;
          transform: translateX(-50%);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-bottom: 0;
          border-radius: 16px 16px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      /* ═══════════════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · FASE 6d] AJUSTES
         Configuración · Parámetros · Restaurar sistema · Academia (Potencial) · Tutoriales
         Solo tokens --pp-*. Va AL FINAL de styles.css (después de la Fase 6c).
         ═══════════════════════════════════════════════════════════════════ */

      /* ── 1. Contenedores ── */
      #mod-configuracion.pp-cfg,
      #modulo-parametros.pp-par,
      #mod-reset-nuclear.pp-rst,
      #mod-potencial.pp-aca,
      #mod-academia.pp-tut {
          width: 100%;
          max-width: 640px;
          margin: 0 auto;
          padding: var(--pp-esp-3) var(--pp-esp-4) 120px;
          box-sizing: border-box;
          background: transparent !important;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
      }

      #mod-configuracion.pp-cfg>*+*,
      #modulo-parametros.pp-par>*+*,
      #mod-reset-nuclear.pp-rst>*+*,
      #mod-academia.pp-tut>*+* {
          margin-top: var(--pp-esp-4);
      }

      :is(#mod-configuracion, #modulo-parametros, #mod-reset-nuclear)>h2.pp-oculto-visual+* {
          margin-top: 0;
      }

      #mod-configuracion.pp-cfg>.pp-cfg-sec+.pp-cfg-sec {
          margin-top: var(--pp-esp-2);
      }

      /* ── 2. Configuración: secciones plegables ── */
      .pp-cfg-sec {
          padding: 0;
          overflow: hidden;
      }

      .pp-cfg-cab {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 14px 44px 14px 16px;
          list-style: none;
          cursor: pointer;
      }

      .pp-cfg-cab::-webkit-details-marker {
          display: none;
      }

      .pp-cfg-cab::after {
          content: "";
          position: absolute;
          right: 18px;
          top: 50%;
          width: 7px;
          height: 7px;
          margin-top: -6px;
          border-right: 1.5px solid var(--pp-texto-3);
          border-bottom: 1.5px solid var(--pp-texto-3);
          transform: rotate(45deg);
          transition: transform .15s ease;
      }

      .pp-cfg-sec[open]>.pp-cfg-cab::after {
          margin-top: -2px;
          transform: rotate(-135deg);
      }

      .pp-cfg-cab:hover {
          background: var(--pp-sutil);
      }

      .pp-cfg-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-cfg-desc {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-cfg-cuerpo {
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 14px 16px 16px;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-cfg-texto {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-cfg-texto b {
          color: var(--pp-texto);
      }

      .pp-cfg-aviso {
          margin: 0;
          padding: 8px 10px;
          background: var(--pp-aviso-suave);
          border-radius: var(--pp-radio-s);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto);
      }

      .pp-cfg-ruc {
          margin-top: 6px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
      }

      .pp-cfg-estado {
          padding: 10px 12px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-cfg-fila {
          display: flex;
          flex-wrap: wrap;
          gap: var(--pp-esp-2);
      }

      .pp-cfg-fila>.pp-campo {
          flex: 1 1 180px;
          width: auto;
      }

      .pp-cfg-fila>.pp-btn {
          flex: 1 1 auto;
      }

      .pp-cfg-sub {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding-top: 14px;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-cfg-subtit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      /* Campos bloqueados hasta tocar Editar (app.js pone disabled + opacidad) */
      #mod-configuracion .pp-campo:disabled {
          background: var(--pp-sutil);
          border-color: var(--pp-borde);
          color: var(--pp-texto-2);
          -webkit-text-fill-color: var(--pp-texto-2);
          opacity: 1 !important;
          cursor: default !important;
      }

      /* Idioma: i18n.js pinta colores en línea; aquí mandan los del sistema */
      #mod-configuracion .pp-cfg-idiomas>.lang-btn {
          flex: 1;
          background: transparent !important;
          border: 1px solid transparent !important;
          color: var(--pp-texto-2) !important;
      }

      #mod-configuracion .pp-cfg-idiomas>.lang-btn[style*="--turquesa"] {
          background: var(--pp-superficie) !important;
          border-color: var(--pp-borde) !important;
          color: var(--pp-texto) !important;
      }

      /* Tema visual */
      .pp-cfg-temas {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      #mod-configuracion .pp-cfg-temas>.tema-opt {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          min-width: 0;
          margin: 0;
          padding: 10px 8px 12px;
          background: var(--pp-superficie) !important;
          border: 1px solid var(--pp-borde) !important;
          border-radius: var(--pp-radio-m);
          box-shadow: none !important;
          color: var(--pp-texto) !important;
          font-family: inherit;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      #mod-configuracion .pp-cfg-temas>.tema-opt.activo {
          border-color: var(--pp-acento) !important;
          box-shadow: inset 0 0 0 1px var(--pp-acento) !important;
      }

      .pp-cfg-swatch.tema-opt-swatch {
          display: block;
          width: 100%;
          height: 36px;
          margin: 0;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-s);
      }

      .pp-cfg-swatch--clasico {
          background: linear-gradient(135deg, #FAFAFA 55%, #047857 55%);
      }

      .pp-cfg-swatch--black {
          background: linear-gradient(135deg, #09090B 55%, #34D399 55%);
      }

      .pp-cfg-swatch--orquidea {
          background: linear-gradient(135deg, #140F1A 55%, #C69CF2 55%);
      }

      #mod-configuracion .tema-pro-chip {
          margin: 0;
          padding: 1px 6px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: 10px;
          font-weight: var(--pp-fw-fuerte);
      }

      /* Interruptores (Inventario y Color/Género): app.js pone data-activo y colores en línea */
      .pp-cfg-opcion {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-cfg-opcion-tit {
          margin-bottom: 2px;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      #mod-configuracion .pp-cfg-switch {
          position: relative;
          flex-shrink: 0;
          width: 48px;
          min-width: 48px;
          height: 28px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde-fuerte) !important;
          color: transparent !important;
          font-size: 0 !important;
          cursor: pointer;
          transition: background-color .2s ease;
      }

      #mod-configuracion .pp-cfg-switch::after {
          content: "";
          position: absolute;
          top: 3px;
          left: 3px;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: #FFFFFF;
          box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
          transition: transform .2s ease;
      }

      #mod-configuracion .pp-cfg-switch[data-activo="true"] {
          background: var(--pp-acento) !important;
      }

      #mod-configuracion .pp-cfg-switch[data-activo="true"]::after {
          transform: translateX(20px);
      }

      /* Barra fija de Editar / Guardar (Configuración y Parámetros) */
      /* El área que hace scroll tiene 120px de relleno abajo y la barra inferior mide 68px:
         -44px deja la barra justo encima del menú inferior */
      .pp-cfg-barra {
          position: sticky;
          bottom: -44px;
          z-index: 5;
          padding: var(--pp-esp-2) 0;
          background: var(--pp-fondo);
      }

      #btn-editar-config[style*="block"],
      #btn-guardar-config[style*="block"] {
          display: flex !important;
      }

      /* Zona de peligro */
      #mod-configuracion .zona-peligro {
          margin-top: var(--pp-esp-6);
          padding: var(--pp-esp-4);
          background: var(--pp-negativo-suave);
          border: 1px solid var(--pp-negativo);
          border-radius: var(--pp-radio-l);
      }

      #mod-configuracion .zona-peligro-tit {
          margin-bottom: 6px;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: 0;
          text-transform: none;
          color: var(--pp-negativo);
      }

      #mod-configuracion .zona-peligro-txt {
          margin: 0 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      #mod-configuracion .btn-eliminar-cuenta.pp-btn {
          width: auto;
          padding: 0 var(--pp-esp-4);
          border: 1px solid var(--pp-negativo);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-negativo);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      /* ── 3. Parámetros ── */
      .pp-par-grupo {
          padding: var(--pp-esp-4);
      }

      .pp-par-cab {
          display: flex;
          flex-direction: column;
          gap: 2px;
          margin-bottom: var(--pp-esp-3);
      }

      .pp-par-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: var(--pp-esp-3);
      }

      .pp-par-campo {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      /* Etiquetas de 1 o 2 líneas: la caja siempre queda alineada con la de al lado */
      .pp-par-campo>.pp-editor-label {
          min-height: 2.7em;
          display: flex;
          align-items: flex-end;
      }

      .pp-par-ayuda {
          margin: 6px 0 0;
      }

      #modulo-parametros .pp-campo {
          box-shadow: none;
      }

      #modulo-parametros .pp-campo:disabled {
          background: var(--pp-sutil) !important;
          border-color: var(--pp-borde) !important;
          color: var(--pp-texto) !important;
          -webkit-text-fill-color: var(--pp-texto);
          opacity: 1 !important;
          cursor: default !important;
      }

      #modulo-parametros .pp-campo:enabled {
          background: var(--pp-superficie) !important;
          border-color: var(--pp-acento) !important;
          color: var(--pp-texto) !important;
      }

      .pp-par-acceso.pp-btn {
          align-self: flex-start;
          gap: 2px;
          height: 30px;
          margin-top: 4px;
          padding: 0 6px;
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-13);
      }

      .pp-par-acceso .pp-icono {
          width: 14px;
          height: 14px;
      }

      .pp-par-acceso[style*="block"],
      .pp-par-acceso[style*="inline-flex"] {
          display: inline-flex !important;
      }

      .pp-par-guardando {
          align-items: center;
          justify-content: center;
          gap: 10px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-par-guardando .pp-rep-spinner {
          width: 18px;
          height: 18px;
      }

      .pp-par-msg {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-par-msg:empty {
          display: none;
      }

      .pp-par-msg--error {
          color: var(--pp-negativo);
      }

      /* ── 4. Restaurar sistema ── */
      .pp-rst-tarjeta {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-5) var(--pp-esp-4);
          border-color: var(--pp-negativo);
      }

      .pp-rst-ico {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pp-rst-ico .pp-icono {
          width: 22px;
          height: 22px;
      }

      .pp-rst-rojo {
          color: var(--pp-negativo) !important;
      }

      .pp-btn.pp-rst-btn {
          background: var(--pp-negativo);
          border-color: transparent;
          color: #FFFFFF;
          box-shadow: none !important;
      }

      .pp-btn.pp-rst-btn:hover:not(:disabled) {
          filter: brightness(.92);
      }

      .pp-rst-pin.pp-campo {
          letter-spacing: .3em;
          text-align: center;
      }

      .pp-rst-confirma.pp-campo {
          font-weight: var(--pp-fw-fuerte);
          text-align: center;
          text-transform: uppercase;
      }

      /* ── 5. Academia (menú "Potencial") ── */
      .pp-aca-wrap {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-4);
      }

      .pp-aca-hero {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          padding: var(--pp-esp-4);
      }

      .pp-aca-progreso {
          align-self: stretch;
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-top: 4px;
      }

      .pp-aca-esqueleto {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-aca-esqueleto>.pp-tarjeta {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: var(--pp-esp-5) var(--pp-esp-4);
          animation: pp-aca-pulso 1.4s ease-in-out infinite;
      }

      .pp-aca-esqueleto span {
          height: 12px;
          width: 80%;
          border-radius: 6px;
          background: var(--pp-sutil);
      }

      .pp-aca-esqueleto span:first-child {
          width: 40%;
      }

      @keyframes pp-aca-pulso {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: .55;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .pp-aca-esqueleto>.pp-tarjeta {
              animation: none;
          }
      }

      .pp-aca-sec span {
          margin-left: 6px;
          font-weight: var(--pp-fw-normal);
          letter-spacing: 0;
          text-transform: none;
      }

      .pp-aca-grid {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          margin-top: calc(var(--pp-esp-4) * -1 + var(--pp-esp-2));
      }

      .pp-aca-card {
          padding: var(--pp-esp-4);
      }

      .pp-aca-card>*+* {
          margin-top: 8px;
      }

      .pp-aca-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      .pp-aca-titulo {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.35;
          color: var(--pp-texto);
      }

      .pp-aca-desc {
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-aca-recursos {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      .pp-aca-recurso {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          padding: 4px 8px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          text-decoration: none;
      }

      .pp-aca-recurso .pp-icono {
          width: 14px;
          height: 14px;
      }

      .pp-aca-pie {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-aca-card>.pp-aca-pie {
          margin-top: 12px;
      }

      .pp-aca-meta {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-btn.pp-aca-play {
          flex-shrink: 0;
          height: 36px;
          padding: 0 14px;
          font-size: var(--pp-fs-13);
          text-decoration: none;
      }

      .pp-aca-play .pp-icono {
          width: 12px;
          height: 12px;
          fill: currentColor;
      }

      .pp-aca-charla {
          align-items: flex-start;
          gap: var(--pp-esp-3);
          padding-top: 12px;
          padding-bottom: 12px;
      }

      .pp-aca-charla-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      .pp-aca-charla-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-aca-error {
          margin: var(--pp-esp-4);
      }

      /* ── 6. Tutoriales · Ruta de despegue ── */
      .pp-tut-progreso {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 14px var(--pp-esp-4);
      }

      #progreso-academia-container[style*="block"] {
          display: flex !important;
      }

      .pp-tut-pct {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #barra-progreso-academia.pp-tut-oro {
          background: var(--pp-aviso);
      }

      .pp-chip.pp-tut-chip-oro {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      /* Modo biblioteca: si no cabe en una línea, chip y botón bajan juntos */
      .pp-tut-progreso>.pp-bov-pie {
          flex-wrap: wrap;
          row-gap: 6px;
      }

      .pp-tut-progreso>.pp-bov-pie>span,
      .pp-tut-pct>* {
          white-space: nowrap;
      }

      .pp-btn.pp-tut-ver-diploma {
          height: 30px;
          padding: 0 10px;
          font-size: var(--pp-fs-12);
      }

      .pp-tut-fase {
          margin: var(--pp-esp-5) 0 var(--pp-esp-2);
      }

      .pp-tut-mapa>.pp-tut-fase:first-child {
          margin-top: 0;
      }

      .pp-tut-nodo {
          width: 100%;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
          background: transparent;
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pp-lista>.pp-tut-nodo:first-child {
          border-top: 0;
      }

      .pp-tut-nodo:hover {
          background: var(--pp-sutil);
      }

      .pp-tut-nodo-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .pp-tut-nodo-ico .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-tut-nodo.nodo-completado .pp-tut-nodo-ico {
          background: var(--pp-acento-suave);
          color: var(--pp-positivo);
      }

      .pp-tut-nodo.nodo-activo .pp-tut-nodo-ico {
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      .pp-tut-nodo.nodo-activo .pp-tut-nodo-ico .pp-icono {
          fill: currentColor;
      }

      .pp-tut-nodo.nodo-bloqueado .pp-tut-nodo-txt {
          opacity: .55;
      }

      .pp-tut-nodo-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 1px;
      }

      .pp-tut-nodo-parada {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-tut-nodo-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      /* Diploma: pieza de celebración con los colores de marca (igual en todos los temas) */
      #mod-academia .pp-tut-diploma {
          position: relative;
          overflow: hidden;
          padding: 36px 20px 28px;
          border-radius: 20px;
          background: linear-gradient(145deg, #12262E 0%, #0E5E57 55%, #00B3A2 100%);
          box-shadow: 0 16px 36px rgba(0, 120, 110, .28);
          color: #FFFFFF;
          text-align: center;
          animation: slideUpAccion .5s ease-out;
      }

      .pp-tut-diploma-ico svg {
          width: 52px;
          height: 52px;
          fill: none;
          stroke: #FFFFFF;
          stroke-width: 1.3;
          stroke-linecap: round;
          stroke-linejoin: round;
      }

      .pp-tut-diploma-rotulo {
          margin: 8px 0 0;
          font-size: var(--pp-fs-11);
          letter-spacing: .14em;
          text-transform: uppercase;
          opacity: .8;
      }

      .pp-tut-diploma-marca {
          margin: 6px 0 12px;
          font-family: var(--pp-fuente-marca);
          font-size: 26px;
          font-weight: 800;
          letter-spacing: -.01em;
          color: #FFFFFF;
      }

      .pp-tut-diploma-txt {
          margin: 0 auto 22px;
          max-width: 320px;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          opacity: .92;
      }

      .pp-tut-diploma-caja {
          margin-bottom: 22px;
          padding: 18px 16px;
          background: rgba(255, 255, 255, .1);
          border: 1px solid rgba(255, 255, 255, .2);
          border-radius: 14px;
      }

      .pp-tut-diploma-caja .pp-tut-diploma-rotulo:first-child {
          margin-top: 0;
      }

      .pp-tut-diploma-nombre {
          margin: 4px 0 14px;
          font-size: 22px;
          font-weight: 800;
          color: #FFFFFF;
          overflow-wrap: anywhere;
      }

      .pp-tut-diploma-linea {
          width: 70%;
          height: 1px;
          margin: 0 auto 12px;
          background: rgba(255, 255, 255, .25);
      }

      .pp-tut-diploma-negocio {
          margin: 4px 0 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .04em;
          color: #FFFFFF;
          overflow-wrap: anywhere;
      }

      .pp-tut-diploma-btn {
          padding: 12px 26px;
          border: 0;
          border-radius: var(--pp-radio-full);
          background: #FFFFFF;
          color: #0E5E57;
          font-family: inherit;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          cursor: pointer;
      }

      .pp-tut-diploma-acciones {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-3);
      }

      /* Modo cine (oscuro a propósito) */
      .pp-tut-cine {
          position: fixed;
          inset: 0;
          z-index: 2147483647;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 20px;
          padding: 20px;
          box-sizing: border-box;
          background: rgba(0, 0, 0, .96);
          font-family: var(--pp-fuente);
      }

      .pp-tut-cine-tit {
          margin: 0;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-medio);
          color: #FFFFFF;
          text-align: center;
      }

      .pp-tut-cine-video {
          width: 100%;
          max-width: 800px;
          min-height: 200px;
          aspect-ratio: 16 / 9;
          overflow: hidden;
          border-radius: 12px;
          background: #000000;
      }

      .pp-tut-cine-acciones {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 100%;
          max-width: 320px;
      }

      .pp-btn.pp-tut-cine-volver {
          background: transparent;
          border: 1px solid rgba(255, 255, 255, .3);
          color: #FFFFFF;
      }

      /* Misión cumplida */
      .pp-tut-alfombra .pp-modal-panel {
          align-items: center;
          text-align: center;
      }

      .pp-tut-alfombra-ico {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-tut-alfombra-ico .pp-icono {
          width: 26px;
          height: 26px;
      }

      .pp-tut-alfombra-input.pp-campo {
          text-align: center;
          font-weight: var(--pp-fw-fuerte);
      }

      /* ════════════════════════════════════════════════════════════════
         🛍️ [CATÁLOGO-F1] Galería de la ficha + insignias del catálogo
         ════════════════════════════════════════════════════════════════ */
      .slide-galeria {
          position: absolute;
          inset: 0;
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
      }

      .slide-galeria::-webkit-scrollbar {
          display: none;
      }

      .slide-galeria img {
          flex: 0 0 100%;
          width: 100%;
          height: 100%;
          max-width: none;
          max-height: none;
          padding: 5%;
          box-sizing: border-box;
          object-fit: contain;
          scroll-snap-align: center;
      }

      .slide-galeria-puntos {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 30px;
          z-index: 3;
          display: flex;
          justify-content: center;
          gap: 6px;
          pointer-events: none;
      }

      .slide-galeria-puntos span {
          width: 7px;
          height: 7px;
          border-radius: 4px;
          background: rgba(0, 0, 0, .18);
          transition: width .2s, background .2s;
      }

      .slide-galeria-puntos span.activo {
          width: 18px;
          background: #00C8B6;
      }

      .slide-galeria-flecha {
          display: none;
          position: absolute;
          top: 50%;
          z-index: 4;
          width: 36px;
          height: 36px;
          margin-top: -18px;
          border: none;
          border-radius: 50%;
          background: rgba(255, 255, 255, .92);
          box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
          color: #2d3436;
          font-size: 22px;
          line-height: 1;
          cursor: pointer;
      }

      .slide-galeria-flecha--izq {
          left: 10px;
      }

      .slide-galeria-flecha--der {
          right: 10px;
      }

      @media (hover: hover) {
          .slide-galeria-flecha {
              display: flex;
              align-items: center;
              justify-content: center;
          }
      }

      .badge-promo-mini.badge-ultimas {
          background: #E67E22;
          box-shadow: 0 2px 5px rgba(230, 126, 34, .3);
      }

      .badge-oculto-mini {
          position: absolute;
          bottom: 8px;
          left: 8px;
          z-index: 2;
          padding: 4px 8px;
          border-radius: 6px;
          background: rgba(45, 52, 54, .85);
          color: #fff;
          font-size: 10px;
          font-weight: 800;
      }

      body.tema-black .badge-promo-mini.badge-ultimas {
          background: rgba(255, 107, 107, .15) !important;
          color: #FF6B6B !important;
      }

      body.tema-black .slide-galeria-puntos span {
          background: rgba(255, 255, 255, .25);
      }

      /* ════════════════════════════════════════════════════════════════
         🧾 [CATÁLOGO-F2] Carrito: datos del cliente · Feed: tarjetas de pedido
         ════════════════════════════════════════════════════════════════ */
      .carrito-datos {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-bottom: 12px;
      }

      .carrito-datos input {
          width: 100%;
          box-sizing: border-box;
          padding: 11px 12px;
          border: 1px solid #e3e3e8;
          border-radius: 12px;
          background: #fafafc;
          color: #2d3436;
          font-size: 15px;
          font-family: inherit;
          outline: none;
      }

      .carrito-datos input:focus {
          border-color: var(--turquesa, #00D1B2);
          background: #fff;
      }

      .carrito-datos input.carrito-dato-error {
          border-color: #FF6B6B;
          background: rgba(255, 107, 107, .06);
      }

      body.tema-black .carrito-datos input {
          background: #1A1A24;
          border-color: rgba(255, 255, 255, .12);
          color: #F0F0F5;
      }

      body.tema-orquidea .carrito-datos input {
          background: #281C35;
          border-color: rgba(199, 125, 232, .2);
          color: #F3EAFB;
      }

      .nc-item.nc-pedido,
      #mod-inicio .nc-item.nc-pedido {
          display: block;
          cursor: default;
          touch-action: auto;
          border-left: 3px solid var(--pp-acento, #00D1B2);
          background: var(--pp-acento-suave, rgba(0, 209, 178, .08));
      }

      .nc-pedido-cab {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
      }

      .nc-pedido-num {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-15, 15px);
          font-weight: var(--pp-fw-fuerte, 800);
          color: var(--pp-texto, #2d3436);
      }

      .nc-pedido-origen {
          padding: 2px 7px;
          border-radius: var(--pp-radio-full, 999px);
          background: var(--pp-superficie, #fff);
          color: var(--pp-texto-2, #636e72);
          font-size: var(--pp-fs-11, 11px);
          font-weight: var(--pp-fw-medio, 600);
      }

      .nc-pedido-total {
          font-size: var(--pp-fs-15, 15px);
          font-weight: var(--pp-fw-fuerte, 800);
          color: var(--pp-texto, #2d3436);
          font-variant-numeric: tabular-nums;
      }

      .nc-pedido-cliente {
          margin-top: 2px;
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-2, #636e72);
      }

      .nc-pedido-items {
          list-style: none;
          margin: 8px 0 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      .nc-pedido-items li {
          display: grid;
          grid-template-columns: 1fr auto;
          column-gap: 8px;
          font-size: var(--pp-fs-13, 13px);
          color: var(--pp-texto, #2d3436);
      }

      .nc-pedido-cod {
          grid-column: 1;
          font-family: var(--pp-fuente-mono, monospace);
          font-size: var(--pp-fs-11, 11px);
          color: var(--pp-texto-3, #95a5a6);
      }

      .nc-pedido-precio {
          grid-column: 2;
          grid-row: 1;
          font-variant-numeric: tabular-nums;
      }

      .nc-pedido-factura {
          margin-top: 6px;
          font-size: var(--pp-fs-12, 12px);
          font-weight: var(--pp-fw-medio, 600);
          color: var(--pp-texto-2, #636e72);
      }

      .nc-pedido-acciones {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 10px;
      }

      .nc-pedido-acciones .pp-btn {
          flex: 1 1 auto;
          min-width: 0;
      }

      .nc-pedido-acciones .pp-btn--primario {
          flex: 2 1 100%;
      }

      /* ════════════════════════════════════════════════════════════════
         🛍️ [CATÁLOGO-F3] Cara A: favoritos, Avísame, relacionados, esqueleto
         ════════════════════════════════════════════════════════════════ */
      .mini-fav {
          position: absolute;
          top: 8px;
          right: 8px;
          z-index: 3;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          padding: 0;
          border: none;
          border-radius: 50%;
          background: rgba(255, 255, 255, .92);
          box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
          cursor: pointer;
      }

      .mini-fav svg,
      .cat-fav-btn svg {
          fill: none;
          stroke: #636e72;
          stroke-width: 2;
      }

      .mini-fav.activo svg,
      .cat-fav-btn.activo svg {
          fill: #FF6B6B;
          stroke: #FF6B6B;
      }

      .badge-stock-zero+.mini-fav,
      .mini-foto-container .badge-stock-zero~.mini-fav {
          top: 40px;
      }

      .cat-btn-esp {
          padding: 0 12px;
      }

      .cat-btn-esp.activo {
          border-color: #FF6B6B;
          background: rgba(255, 107, 107, .1);
          color: #d63031;
      }

      .cat-vacio-especial {
          grid-column: 1 / -1;
          padding: 34px 20px;
          text-align: center;
          color: #636e72;
      }

      .cat-vacio-especial button {
          margin-top: 12px;
          padding: 10px 20px;
          border: none;
          border-radius: 8px;
          background: #00C8B6;
          color: #fff;
          font-weight: 800;
          cursor: pointer;
          font-family: inherit;
      }

      .btn-fila-avisame {
          padding: 8px 12px;
          border: 1.5px solid #FF6B6B;
          border-radius: 8px;
          background: #fff;
          color: #d63031;
          font-weight: 800;
          font-size: 12px;
          white-space: nowrap;
          cursor: pointer;
          font-family: inherit;
      }

      .btn-fila-avisame.hecho {
          border-color: #b2bec3;
          color: #636e72;
          cursor: default;
      }

      .cat-rel-fila {
          display: flex;
          gap: 10px;
          overflow-x: auto;
          padding-bottom: 6px;
          scrollbar-width: none;
      }

      .cat-rel-fila::-webkit-scrollbar {
          display: none;
      }

      .cat-rel {
          flex: 0 0 auto;
          width: 120px;
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 6px;
          border: 1px solid #eee;
          border-radius: 14px;
          background: #fff;
          text-align: left;
          cursor: pointer;
          font-family: inherit;
      }

      .cat-rel img {
          width: 100%;
          aspect-ratio: 1 / 1;
          object-fit: contain;
          border-radius: 10px;
          background: #f8f9fa;
      }

      .cat-rel-nom {
          font-size: 11px;
          font-weight: 800;
          color: #2d3436;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }

      .cat-rel-pre {
          font-size: 13px;
          font-weight: 900;
          color: #00897b;
      }

      .cat-esq {
          border-radius: 18px;
          overflow: hidden;
          background: #fff;
          box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
      }

      .cat-esq i,
      .cat-esq b,
      .cat-esq s {
          display: block;
          background: linear-gradient(90deg, #f1f2f6 25%, #e9ecef 50%, #f1f2f6 75%);
          background-size: 200% 100%;
          animation: cat-esq-brillo 1.2s linear infinite;
      }

      .cat-esq i {
          aspect-ratio: 1 / 1;
      }

      .cat-esq b {
          height: 12px;
          margin: 12px 12px 8px;
          border-radius: 6px;
      }

      .cat-esq s {
          width: 45%;
          height: 12px;
          margin: 0 12px 14px;
          border-radius: 6px;
      }

      @keyframes cat-esq-brillo {
          to {
              background-position: -200% 0;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          .cat-esq i,
          .cat-esq b,
          .cat-esq s {
              animation: none;
          }
      }

      body.tema-black .mini-fav,
      body.tema-black .btn-fila-avisame,
      body.tema-black .cat-rel,
      body.tema-black .cat-esq {
          background: #1A1A24;
          border-color: rgba(255, 255, 255, .1);
      }

      body.tema-black .cat-rel-nom {
          color: #F0F0F5;
      }

      body.tema-black .cat-esq i,
      body.tema-black .cat-esq b,
      body.tema-black .cat-esq s {
          background: linear-gradient(90deg, #22222c 25%, #2a2a36 50%, #22222c 75%);
          background-size: 200% 100%;
      }

      body.tema-orquidea .mini-fav,
      body.tema-orquidea .btn-fila-avisame,
      body.tema-orquidea .cat-rel,
      body.tema-orquidea .cat-esq {
          background: #281C35;
          border-color: rgba(199, 125, 232, .18);
      }

      /* ════════════════════════════════════════════════════════════════
         🗂️ [CATÁLOGO-F4] Cara B: feed, historial, demanda, acciones masivas
         ════════════════════════════════════════════════════════════════ */
      .nc-btn-pedidos {
          margin-left: auto;
          margin-right: 6px;
          padding: 6px 10px;
          border: 1px solid var(--pp-borde, #e4e4e7);
          border-radius: var(--pp-radio-m, 8px);
          background: transparent;
          color: var(--pp-texto, #18181b);
          font-size: var(--pp-fs-12, 12px);
          font-weight: var(--pp-fw-medio, 600);
          cursor: pointer;
          font-family: inherit;
      }

      .nc-btn-pedidos:hover {
          background: var(--pp-sutil, #f4f4f5);
      }

      .nc-vacio {
          padding: 10px 2px;
          font-size: var(--pp-fs-13, 13px);
          color: var(--pp-texto-3, #71717a);
      }

      .nc-item.nc-avisame,
      #mod-inicio .nc-item.nc-avisame {
          border-left-color: var(--pp-aviso, #d97706);
          background: var(--pp-aviso-suave, rgba(217, 119, 6, .08));
      }

      .av-grupo {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .av-grupo-tit {
          font-size: var(--pp-fs-13, 13px);
          font-weight: var(--pp-fw-fuerte, 700);
          color: var(--pp-texto, #18181b);
      }

      .av-fila {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          padding: 8px 10px;
          border: 1px solid var(--pp-borde, #e4e4e7);
          border-radius: var(--pp-radio-m, 8px);
      }

      .av-fila-txt {
          min-width: 0;
          font-size: var(--pp-fs-13, 13px);
          color: var(--pp-texto, #18181b);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .av-fila.av-hecho {
          opacity: .6;
      }

      .hp-panel {
          gap: var(--pp-esp-3, 12px);
      }

      .hp-estados {
          overflow-x: auto;
          scrollbar-width: none;
      }

      .hp-estados button {
          flex: 0 0 auto;
          white-space: nowrap;
      }

      .hp-filtros {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .hp-buscar {
          grid-column: 1 / -1;
      }

      .hp-resumen {
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-2, #52525b);
      }

      .hp-lista {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .hp-fila {
          border: 1px solid var(--pp-borde, #e4e4e7);
          border-radius: var(--pp-radio-m, 8px);
          background: var(--pp-superficie, #fff);
      }

      .hp-fila summary {
          display: grid;
          grid-template-columns: auto 1fr auto auto;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          cursor: pointer;
          list-style: none;
          font-size: var(--pp-fs-13, 13px);
          color: var(--pp-texto, #18181b);
      }

      .hp-fila summary::-webkit-details-marker {
          display: none;
      }

      .hp-num {
          font-weight: var(--pp-fw-fuerte, 700);
      }

      .hp-cli {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: var(--pp-texto-2, #52525b);
      }

      .hp-total {
          font-weight: var(--pp-fw-fuerte, 700);
      }

      .hp-cuerpo {
          padding: 0 12px 12px;
      }

      .dem-tarjeta {
          margin-top: var(--pp-esp-4, 16px);
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .dem-sub {
          margin-top: 6px;
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-13, 13px);
          font-weight: var(--pp-fw-fuerte, 700);
          color: var(--pp-texto, #18181b);
      }

      .pp-masivo {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          align-items: center;
          margin: 8px 0;
      }

      .pp-masivo .pp-campo {
          width: auto;
          flex: 1 1 180px;
      }

      .pp-masivo-solo,
      .pp-masivo-col {
          display: none;
      }

      .pp-masivo-on .pp-masivo-solo {
          display: inline-flex;
      }

      .pp-masivo-on .pp-masivo-col {
          display: table-cell;
          width: 34px;
          text-align: center;
      }

      .pp-masivo-col input {
          width: 18px;
          height: 18px;
      }

      .pp-fila-sel td {
          background: var(--pp-acento-suave, rgba(0, 209, 178, .08));
      }

      .pp-tabla-etq {
          margin-left: 6px;
          font-size: 10px;
          vertical-align: middle;
      }

      .pp-masivo-acciones {
          position: sticky;
          bottom: calc(70px + env(safe-area-inset-bottom, 0px));
          z-index: 5;
          display: none;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
          margin: 8px 0;
          padding: 10px;
          border: 1px solid var(--pp-borde, #e4e4e7);
          border-radius: var(--pp-radio-l, 12px);
          background: var(--pp-superficie, #fff);
          box-shadow: var(--pp-sombra-flotante, 0 8px 24px rgba(0, 0, 0, .12));
      }

      .pp-masivo-acciones.visible {
          display: flex;
      }

      .pp-masivo-n {
          flex: 1 1 100%;
          font-size: var(--pp-fs-13, 13px);
          font-weight: var(--pp-fw-fuerte, 700);
          color: var(--pp-texto, #18181b);
      }

      .pm-fila {
          display: grid;
          grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr;
          gap: 6px;
          align-items: center;
      }

      .pm-fila .pp-btn {
          min-width: 0;
          padding-left: 4px;
          padding-right: 4px;
      }

      .pm-pct {
          min-width: 0;
          text-align: center;
      }

      .pm-vista {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pm-item {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          font-size: var(--pp-fs-13, 13px);
          color: var(--pp-texto, #18181b);
      }

      .pm-item span:first-child {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pm-ayuda {
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-3, #71717a);
      }

      /* ════════════════════════════════════════════════════════════════
         🔔 [PILAS-PRO · CAMPANA] Alertas y prevención
         Agrupadas por urgencia · iconos de trazo · hoja inferior en celular
         ════════════════════════════════════════════════════════════════ */
      #vista-erp #centro-alertas-panel.alertas-panel {
          width: 360px;
          max-height: min(72vh, 560px);
          font-family: var(--pp-fuente);
      }

      #vista-erp #centro-alertas-panel .alertas-panel-head {
          padding: 10px 8px 10px 16px;
      }

      #vista-erp #centro-alertas-panel .al-cab-tit {
          display: inline-flex;
          align-items: center;
          gap: 8px;
      }

      #vista-erp #centro-alertas-panel .al-total {
          min-width: 20px;
          height: 20px;
          padding: 0 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          font-variant-numeric: tabular-nums;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      #vista-erp #centro-alertas-panel .al-total:empty {
          display: none;
      }

      #vista-erp #centro-alertas-panel .alertas-lista {
          padding: 4px 8px 12px;
          gap: 0;
      }

      #vista-erp #centro-alertas-panel .al-grupo {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      #vista-erp #centro-alertas-panel .al-grupo+.al-grupo {
          margin-top: 6px;
          padding-top: 6px;
          border-top: 1px solid var(--pp-borde);
      }

      #vista-erp #centro-alertas-panel .al-grupo-tit {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 8px 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      #vista-erp #centro-alertas-panel .al-punto {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--pp-texto-3);
          flex-shrink: 0;
      }

      #vista-erp #centro-alertas-panel .al-grupo--urgente .al-punto {
          background: var(--pp-negativo);
      }

      #vista-erp #centro-alertas-panel .al-grupo--atencion .al-punto {
          background: var(--pp-aviso);
      }

      #vista-erp #centro-alertas-panel .al-grupo-n {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          margin-left: auto;
          font-variant-numeric: tabular-nums;
      }

      #vista-erp #centro-alertas-panel .al-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          width: 100%;
          padding: 10px 8px;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
          transition: background-color .12s ease;
      }

      #vista-erp #centro-alertas-panel .al-item:hover {
          background: var(--pp-sutil);
      }

      #vista-erp #centro-alertas-panel .al-item:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      #vista-erp #centro-alertas-panel .al-ico {
          width: 34px;
          height: 34px;
          flex-shrink: 0;
          border-radius: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      #vista-erp #centro-alertas-panel .al-item--urgente .al-ico {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #vista-erp #centro-alertas-panel .al-item--atencion .al-ico {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      #vista-erp #centro-alertas-panel .al-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      #vista-erp #centro-alertas-panel .al-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.35;
          color: var(--pp-texto);
      }

      #vista-erp #centro-alertas-panel .al-det {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          letter-spacing: 0;
          line-height: 1.45;
          color: var(--pp-texto-3);
      }

      #vista-erp #centro-alertas-panel .al-flecha {
          align-self: center;
          color: var(--pp-texto-3);
          display: flex;
      }

      #vista-erp #centro-alertas-panel .al-flecha .pp-icono {
          width: 16px;
          height: 16px;
      }

      #vista-erp #centro-alertas-panel .al-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: 28px 16px 24px;
          text-align: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      #vista-erp #centro-alertas-panel .al-vacio b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #vista-erp #centro-alertas-panel .al-vacio-ico {
          width: 44px;
          height: 44px;
          margin-bottom: 6px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--pp-acento-suave);
          color: var(--pp-acento);
      }

      #vista-erp #centro-alertas-panel .al-vacio-ico--error {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #vista-erp #centro-alertas-panel .al-esq,
      .rp-esq {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 8px 0;
      }

      #vista-erp #centro-alertas-panel .al-esq i,
      .rp-esq i {
          display: block;
          height: 52px;
          border-radius: var(--pp-radio-m);
          background: linear-gradient(90deg, var(--pp-sutil) 25%, var(--pp-borde) 50%, var(--pp-sutil) 75%);
          background-size: 200% 100%;
          animation: pp-esq-brillo 1.2s linear infinite;
      }

      .rp-esq i {
          height: 120px;
          border-radius: var(--pp-radio-l);
      }

      @keyframes pp-esq-brillo {
          to {
              background-position: -200% 0;
          }
      }

      /* Celular: hoja que sube desde abajo, con velo detrás */
      @media (max-width: 640px) {
          #vista-erp .header-erp:has(#centro-alertas-panel[style*="flex"]) {
              z-index: 2100;
          }

          #vista-erp #centro-alertas-panel.alertas-panel {
              top: auto;
              bottom: 0;
              left: 0;
              right: 0;
              width: auto;
              max-width: none;
              max-height: 82dvh;
              border-bottom: 0;
              border-radius: 16px 16px 0 0;
              padding-bottom: env(safe-area-inset-bottom, 0px);
              z-index: 2100;
              box-shadow: 0 0 0 100vmax var(--pp-velo), var(--pp-sombra-flotante);
              animation: slideUpAccion .26s cubic-bezier(.22, 1, .36, 1);
          }

          #vista-erp #centro-alertas-panel .alertas-panel-head::before {
              content: '';
              position: absolute;
              top: 6px;
              left: 50%;
              width: 36px;
              height: 4px;
              margin-left: -18px;
              border-radius: 2px;
              background: var(--pp-borde-fuerte);
          }

          #vista-erp #centro-alertas-panel .alertas-panel-head {
              position: relative;
              padding-top: 18px;
          }

          #vista-erp #centro-alertas-panel .al-item {
              padding: 12px 8px;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          #vista-erp #centro-alertas-panel .al-esq i,
          .rp-esq i {
              animation: none;
          }

          #vista-erp #centro-alertas-panel.alertas-panel {
              animation: none;
          }
      }

      /* ════════════════════════════════════════════════════════════════
         🌐 [PILAS-PRO · RED PILAS] Pantalla completa que sigue el tema
         ════════════════════════════════════════════════════════════════ */
      /* Pill dentro del menú "⋯" del encabezado */
      #rp-header-slot #btn-red-pilas-fab.rp-fab,
      .rp-fab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          position: relative;
          height: var(--pp-alto-control);
          padding: 0 var(--pp-esp-3);
          border: 0;
          border-radius: 8px;
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          cursor: pointer;
          flex-shrink: 0;
      }

      #rp-header-slot #btn-red-pilas-fab.rp-fab:hover {
          background: var(--pp-sutil);
      }

      #rp-header-slot #btn-red-pilas-fab.rp-fab svg {
          color: var(--pp-texto-2);
      }

      #rp-header-slot #btn-red-pilas-fab .rp-fab-badge,
      .rp-fab .rp-fab-badge {
          position: static;
          margin-left: auto;
          min-width: 20px;
          height: 20px;
          padding: 0 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-negativo);
          color: #FFFFFF;
          font-size: 11px;
          font-weight: var(--pp-fw-fuerte);
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      #btn-red-pilas-fab.rp-pulse {
          animation: rpPulse 1.2s ease-in-out 3;
      }

      @keyframes rpPulse {

          0%,
          100% {
              box-shadow: 0 0 0 0 transparent;
          }

          50% {
              box-shadow: 0 0 0 4px var(--pp-acento-suave);
          }
      }

      /* Aviso emergente */
      .rp-aviso {
          position: fixed;
          top: calc(56px + env(safe-area-inset-top, 0px));
          left: 0;
          right: 0;
          z-index: 99997;
          padding: 8px 12px;
          pointer-events: none;
          font-family: var(--pp-fuente);
      }

      .rp-aviso-tarjeta {
          display: flex;
          align-items: center;
          gap: 10px;
          max-width: 520px;
          margin: 0 auto;
          padding: 10px 8px 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          box-shadow: var(--pp-sombra-flotante);
          pointer-events: auto;
          animation: slideDownNotif .3s ease-out;
      }

      @keyframes slideDownNotif {
          from {
              transform: translateY(-16px);
              opacity: 0;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      .rp-aviso-ico,
      .rp-cab-ico {
          width: 36px;
          height: 36px;
          flex-shrink: 0;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--pp-acento-suave);
          color: var(--pp-acento);
      }

      .rp-aviso-txt {
          flex: 1;
          min-width: 0;
      }

      .rp-aviso-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .rp-aviso-det {
          margin-top: 1px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      /* Botones compactos */
      .pp-btn.rp-btn-sm {
          height: 36px;
          padding: 0 12px;
          font-size: var(--pp-fs-13);
          gap: 6px;
          white-space: nowrap;
          text-decoration: none;
          flex-shrink: 0;
      }

      .pp-btn.rp-btn-sm .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-btn.rp-btn-wa {
          background: #25D366;
          color: #FFFFFF;
      }

      .pp-btn.rp-btn-wa:hover {
          background: #1EB858;
      }

      /* Ventana principal */
      .rp-modal {
          position: fixed;
          inset: 0;
          z-index: 99998;
          flex-direction: column;
          align-items: stretch;
          justify-content: flex-end;
          background: var(--pp-velo);
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      .rp-hoja {
          height: 100%;
          height: 100dvh;
          width: 100%;
          max-width: 760px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background: var(--pp-fondo);
          animation: slideUpAccion .26s cubic-bezier(.22, 1, .36, 1);
      }

      @media (min-width: 761px) {
          .rp-hoja {
              border-left: 1px solid var(--pp-borde);
              border-right: 1px solid var(--pp-borde);
          }
      }

      .rp-cab {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 16px;
          background: var(--pp-superficie);
          border-bottom: 1px solid var(--pp-borde);
          flex-shrink: 0;
      }

      .rp-cab-txt {
          flex: 1;
          min-width: 0;
      }

      .rp-cab-tit {
          margin: 0;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.2;
          color: var(--pp-texto);
      }

      .rp-cab-sub {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-top: 1px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .rp-cab-sub::before {
          content: '';
          width: 12px;
          height: 12px;
          flex-shrink: 0;
          background: currentColor;
          -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      .rp-cab-acc {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
      }

      .pp-btn.rp-btn-perfil {
          width: 36px;
          height: 36px;
      }

      .pp-btn.rp-btn-perfil.activo {
          background: var(--pp-acento-suave);
          border-color: var(--pp-acento);
          color: var(--pp-acento);
      }

      /* Estado Abierta / Cerrada */
      .rp-estado {
          display: flex;
          align-items: center;
          gap: 12px;
          margin: 12px 16px 0;
          padding: 10px 14px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
          flex-shrink: 0;
      }

      .rp-estado:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .rp-estado-punto {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--pp-texto-3);
          flex-shrink: 0;
      }

      .rp-estado.abierto .rp-estado-punto {
          background: var(--pp-acento);
          box-shadow: 0 0 0 3px var(--pp-acento-suave);
      }

      .rp-estado-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 1px;
      }

      .rp-estado-txt b {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .rp-estado-txt span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .rp-interruptor {
          position: relative;
          width: 40px;
          height: 24px;
          flex-shrink: 0;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde-fuerte);
          transition: background-color .15s ease;
      }

      .rp-interruptor::after {
          content: '';
          position: absolute;
          top: 3px;
          left: 3px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: #FFFFFF;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
          transition: transform .15s ease;
      }

      .rp-estado.abierto .rp-interruptor,
      .rp-interruptor.on {
          background: var(--pp-acento);
      }

      .rp-estado.abierto .rp-interruptor::after,
      .rp-interruptor.on::after {
          transform: translateX(16px);
      }

      .rp-interruptor--btn {
          cursor: pointer;
      }

      .rp-interruptor--btn:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      /* Pestañas */
      .rp-tabs {
          display: flex;
          gap: 4px;
          margin-top: 8px;
          padding: 0 12px;
          border-bottom: 1px solid var(--pp-borde);
          flex-shrink: 0;
      }

      .rp-tab {
          flex: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          height: 44px;
          margin-bottom: -1px;
          border: 0;
          border-bottom: 2px solid transparent;
          background: none;
          color: var(--pp-texto-3);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .rp-tab .pp-icono {
          width: 16px;
          height: 16px;
      }

      .rp-tab:hover {
          color: var(--pp-texto);
      }

      .rp-tab.activo {
          color: var(--pp-texto);
          font-weight: var(--pp-fw-fuerte);
          border-bottom-color: var(--pp-acento);
      }

      .rp-tab.activo .pp-icono {
          color: var(--pp-acento);
      }

      /* Paneles */
      .rp-panel {
          flex: 1;
          flex-direction: column;
          gap: 12px;
          min-height: 0;
          overflow-y: auto;
          padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
          -webkit-overflow-scrolling: touch;
      }

      .rp-sub {
          flex-shrink: 0;
      }

      .rp-sub>button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          position: relative;
      }

      .rp-cuenta {
          min-width: 18px;
          height: 18px;
          padding: 0 5px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          font-variant-numeric: tabular-nums;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      .rp-cuenta:empty {
          display: none;
      }

      .rp-sub>button.rp-con-aviso::after {
          content: '';
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--pp-negativo);
      }

      .rp-lista {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      /* Tarjetas */
      .rp-card {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 14px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
      }

      .rp-card--propia {
          border-color: var(--pp-borde-fuerte);
      }

      .rp-card--ofertada {
          background: var(--pp-sutil);
      }

      .rp-card-top {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 2px;
      }

      .rp-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          min-width: 0;
      }

      .pp-chip.rp-chip {
          gap: 4px;
          padding: 3px 8px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          text-decoration: none;
      }

      .pp-chip.rp-chip .pp-icono {
          width: 13px;
          height: 13px;
      }

      .pp-chip.rp-chip-wa {
          background: rgba(37, 211, 102, .12);
          color: #128C4A;
      }

      body.tema-black .pp-chip.rp-chip-wa {
          color: #4ADE80;
      }

      .pp-chip.rp-chip--ok {
          background: var(--pp-acento-suave);
          color: var(--pp-positivo);
      }

      .rp-timer {
          flex-shrink: 0;
          padding: 4px 8px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-12);
          font-weight: 500;
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
      }

      .rp-timer--alta,
      .rp-timer--urgente {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .rp-timer--media {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .rp-timer--baja {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .rp-timer--fin {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .rp-card-tit {
          margin: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.35;
          color: var(--pp-texto);
      }

      .rp-card-desc {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .rp-card-pie {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin-top: 6px;
      }

      .rp-card-tienda,
      .rp-meta-dato,
      .rp-oferta-tienda {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          min-width: 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .rp-card-tienda .pp-icono,
      .rp-meta-dato .pp-icono {
          width: 14px;
          height: 14px;
          flex-shrink: 0;
      }

      .rp-card-nota {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .rp-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 6px 14px;
          margin-top: 2px;
      }

      .rp-card-btn {
          align-self: flex-start;
          margin-top: 6px;
      }

      .rp-card-ok {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          margin-top: 6px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-positivo);
      }

      .rp-card-ok .pp-icono {
          width: 16px;
          height: 16px;
      }

      /* Ofertas recibidas en MIS pedidos */
      .rp-ofertas {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: 8px;
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
      }

      .rp-ofertas-tit {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-3);
      }

      .rp-oferta {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-fondo);
      }

      .rp-oferta-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
      }

      .rp-oferta-tienda {
          flex-wrap: wrap;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .rp-oferta-tienda .pp-icono {
          width: 15px;
          height: 15px;
          color: var(--pp-texto-3);
      }

      .rp-precio {
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-15);
          font-weight: 500;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
      }

      .rp-oferta-acc {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      /* Insignia de nivel: punto de color + texto neutro */
      .rp-nivel {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 2px 8px 2px 6px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-full);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
          background: var(--pp-superficie);
      }

      .rp-nivel::before {
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--rp-nivel, #A1A1AA);
      }

      .rp-nivel--bronce,
      .rp-nivel-hero--bronce {
          --rp-nivel: #B07A3B;
      }

      .rp-nivel--plata,
      .rp-nivel-hero--plata {
          --rp-nivel: #8A94A3;
      }

      .rp-nivel--oro,
      .rp-nivel-hero--oro {
          --rp-nivel: #C99A1B;
      }

      .rp-nivel--platino,
      .rp-nivel-hero--platino {
          --rp-nivel: #2F7D6D;
      }

      body.tema-black .rp-nivel--platino,
      body.tema-black .rp-nivel-hero--platino {
          --rp-nivel: #4FB39C;
      }

      /* Vacíos */
      .rp-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          padding: 40px 20px;
          text-align: center;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .rp-vacio b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .rp-vacio-ico {
          width: 48px;
          height: 48px;
          margin-bottom: 6px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .rp-vacio-extra {
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-medio);
      }

      .rp-vacio .pp-btn {
          margin-top: 8px;
      }

      /* Perfil */
      .rp-perfil {
          display: flex;
          flex-direction: column;
          gap: 16px;
          width: 100%;
      }

      .rp-nivel-hero {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: 8px 0 4px;
          text-align: center;
      }

      .rp-medalla {
          width: 72px;
          height: 72px;
          margin-bottom: 8px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid var(--rp-nivel, var(--pp-borde-fuerte));
          background: var(--pp-superficie);
          color: var(--rp-nivel, var(--pp-texto-2));
      }

      .rp-medalla .pp-icono {
          width: 32px;
          height: 32px;
      }

      .rp-nivel-nom {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .rp-nivel-pts {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .rp-progreso {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .rp-progreso-lbl,
      .rp-progreso-nota {
          display: flex;
          justify-content: space-between;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .rp-progreso-nota {
          justify-content: center;
      }

      .rp-max {
          text-align: center;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-acento-texto);
      }

      .rp-kpis {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          overflow: hidden;
      }

      .rp-kpis--4 {
          grid-template-columns: repeat(4, 1fr);
          border: 0;
          background: transparent;
      }

      .rp-kpi {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;
          padding: 14px 6px;
          border-left: 1px solid var(--pp-borde);
          text-align: center;
      }

      .rp-kpi:first-child {
          border-left: 0;
      }

      .rp-kpi b {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .rp-kpi span {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .rp-kpis--4 .rp-kpi {
          padding: 8px 4px 2px;
      }

      .rp-kpis--4 .rp-kpi b {
          font-size: var(--pp-fs-17);
      }

      .rp-niveles-tit {
          padding: 12px 14px 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-lista-fila.rp-nivel-fila {
          min-height: 44px;
          justify-content: space-between;
      }

      .rp-niveles-tit+.rp-nivel-fila {
          border-top: 0;
      }

      .rp-nivel-fila.actual {
          background: var(--pp-sutil);
      }

      .rp-nivel-fila.actual .rp-nivel {
          color: var(--pp-texto);
          border-color: var(--pp-borde-fuerte);
      }

      .rp-nivel-req {
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      /* Mercado */
      .rp-periodos {
          margin-bottom: 12px;
      }

      .rp-periodos>button.activo {
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-tarjeta.rp-resumen {
          margin-bottom: 12px;
      }

      .rp-resumen-tit {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-3);
      }

      .rp-post-estado {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
      }

      .rp-hace {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .rp-precios {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
          margin-top: 4px;
      }

      .rp-precio-chip {
          padding: 2px 8px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-sutil);
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto);
      }

      .rp-estrellas {
          color: var(--pp-aviso);
          letter-spacing: 1px;
      }

      /* Formularios Solicitar / Responder */
      .pp-modal.rp-form {
          z-index: 99999;
      }

      .rp-campo {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .rp-label {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .rp-label-nota {
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pp-campo.rp-area {
          height: auto;
          min-height: 72px;
          padding: 10px 12px;
          resize: vertical;
          line-height: 1.5;
      }

      .rp-tiempos {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
      }

      .rp-tiempo-btn {
          height: 40px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .rp-tiempo-btn--doble {
          grid-column: span 2;
      }

      .rp-tiempo-btn:hover {
          background: var(--pp-sutil);
      }

      .rp-tiempo-btn.activo {
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      .rp-tiempo-btn:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .rp-resp-prod {
          margin: -4px 0 0;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-acento-texto);
      }

      .pp-campo.rp-campo-precio {
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-17);
      }

      .rp-fila-switch {
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 10px 14px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      @media (max-width: 380px) {
          .rp-cab-acc .rp-btn-sm span {
              display: none;
          }

          .rp-kpis--4 {
              grid-template-columns: repeat(2, 1fr);
          }

          .rp-kpis--4 .rp-kpi:nth-child(3) {
              border-left: 0;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          .rp-hoja,
          .rp-aviso-tarjeta {
              animation: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · ARRANQUE] Splash sobrio
         ═══════════════════════════════════════════════════════════ */
      html body #splash-screen.sp-pro {
          flex-direction: column;
          gap: 22px;
          background: var(--pp-fondo) !important;
          animation: none !important;
      }

      html body #splash-screen.sp-pro::before {
          display: none;
      }

      .sp-marca {
          font-family: var(--pp-fuente-marca);
          font-size: 44px;
          font-weight: 700;
          letter-spacing: -.03em;
          line-height: 1;
          color: var(--pp-texto);
          animation: sp-entrar .45s cubic-bezier(.22, 1, .36, 1) both;
      }

      .sp-acento {
          margin-left: 1px;
          color: var(--pp-marca-2);
      }

      /* Línea de carga: solo aparece si la carga pasa de 0,8 s */
      .sp-progreso {
          width: 72px;
          height: 2px;
          border-radius: 2px;
          overflow: hidden;
          background: var(--pp-borde);
          opacity: 0;
          animation: sp-aparecer .3s ease .8s forwards;
      }

      .sp-progreso span {
          display: block;
          width: 40%;
          height: 100%;
          border-radius: inherit;
          background: var(--pp-acento);
          animation: sp-barrido 1.1s ease-in-out infinite;
      }

      html body #splash-screen.sp-pro.splash-saliendo {
          animation: sp-salir .26s ease forwards !important;
      }

      @keyframes sp-entrar {
          from {
              opacity: 0;
              transform: translateY(6px);
          }

          to {
              opacity: 1;
              transform: none;
          }
      }

      @keyframes sp-aparecer {
          to {
              opacity: 1;
          }
      }

      @keyframes sp-barrido {
          from {
              transform: translateX(-100%);
          }

          to {
              transform: translateX(250%);
          }
      }

      @keyframes sp-salir {
          to {
              opacity: 0;
              visibility: hidden;
          }
      }

      /* ═══════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · ARRANQUE] Bienvenida: la tienda primero
         ═══════════════════════════════════════════════════════════ */
      html body #pantalla-inicio.bv-pro {
          justify-content: space-between;
          gap: var(--pp-esp-6);
          padding: max(32px, env(safe-area-inset-top)) var(--pp-esp-4) max(20px, env(safe-area-inset-bottom));
          background: var(--pp-fondo) !important;
          background-image: none;
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
          overflow-y: auto;
      }

      .bv-centro {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 360px;
      }

      .bv-monograma {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 72px;
          height: 72px;
          margin-bottom: var(--pp-esp-5);
          border-radius: 20px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-family: var(--pp-fuente-marca);
          font-size: 26px;
          font-weight: 700;
          letter-spacing: .02em;
      }

      .bv-monograma:empty {
          visibility: hidden;
      }

      .bv-nombre {
          max-width: 100%;
          margin: 0;
          font-family: var(--pp-fuente-marca);
          font-size: var(--pp-fs-28);
          font-weight: 700;
          letter-spacing: -.02em;
          line-height: 1.15;
          color: var(--pp-texto);
          overflow-wrap: anywhere;
      }

      .bv-sub {
          margin: 6px 0 0;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto-2);
      }

      .bv-sub[hidden] {
          display: none;
      }

      .bv-red {
          margin-top: var(--pp-esp-4);
          padding: 3px 8px;
      }

      .bv-red .pp-icono {
          width: 14px;
          height: 14px;
      }

      .bv-acciones {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          width: 100%;
          margin-top: 40px;
      }

      .bv-pie {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .bv-hecho b {
          font-family: var(--pp-fuente-marca);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .bv-hecho b span {
          margin-left: 1px;
          color: var(--pp-marca-2);
      }

      .bv-unete {
          color: var(--pp-texto-3);
          text-decoration: none;
      }

      .bv-unete b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-acento-texto);
      }

      .bv-unete:hover b {
          text-decoration: underline;
      }

      /* El carrito cerrado vive fuera de la pantalla a la derecha: su sombra se
         colaba como una franja gris en el borde de la bienvenida y del catálogo */
      html body #panel-carrito-cliente:not(.abierto) {
          box-shadow: none !important;
      }

      /* Menú del catálogo → "Volver a la bienvenida" */
      .menu-cli-item.bv-menu-volver {
          width: 100%;
          border: 0;
          border-bottom: 1px solid #f0f0f0;
          background: transparent;
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      @media (prefers-reduced-motion: reduce) {

          .sp-marca,
          .sp-progreso span {
              animation: none;
          }

          html body #splash-screen.sp-pro.splash-saliendo {
              animation: none !important;
          }
      }

      /* ═══════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · PILI] Decisión del día (Inicio)
         ═══════════════════════════════════════════════════════════ */
      #bloque-briefing .pp-decision {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      #bloque-briefing .pp-decision--alerta {
          border-color: var(--pp-negativo);
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pp-decision-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          min-width: 0;
      }

      .pp-decision-av {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-decision-av .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-decision-quien {
          flex-shrink: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-decision-tema {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-decision-voz {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          margin-left: auto;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pp-decision-voz:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pp-decision-voz:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pp-decision-voz .pp-voz-off,
      .pp-decision-voz.hablando .pp-voz-on {
          display: none;
      }

      .pp-decision-voz.hablando .pp-voz-off {
          display: block;
      }

      .pp-decision-voz.hablando {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-decision-msj {
          margin: 0;
          font-size: var(--pp-fs-15);
          line-height: 1.55;
          color: var(--pp-texto);
      }

      .pp-decision-acc {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: var(--pp-esp-2);
      }

      .pp-decision-acc:empty {
          display: none;
      }

      .pp-btn.pp-decision-btn {
          height: 36px;
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          white-space: nowrap;
      }

      .pp-btn.pp-decision-btn.pp-btn--primario {
          padding: 0 var(--pp-esp-4);
      }

      /* Preguntar · Entendido: juntos a la derecha (si no caben, bajan juntos) */
      .pp-decision-sec {
          display: flex;
          gap: 2px;
          margin-left: auto;
      }

      .pp-decision-sec .pp-btn.pp-decision-btn {
          padding: 0 10px;
      }

      /* Mientras analiza: filas fantasma */
      .pp-decision--cargando .pp-decision-msj {
          height: 44px;
          border-radius: var(--pp-radio-m);
          background: linear-gradient(90deg, var(--pp-sutil) 25%, var(--pp-borde) 50%, var(--pp-sutil) 75%);
          background-size: 200% 100%;
          animation: pp-esq-brillo 1.2s linear infinite;
      }

      .pp-decision--cargando .pp-decision-acc,
      .pp-decision--cargando .pp-decision-voz {
          visibility: hidden;
      }

      /* Hoja "Preguntar a Pili" */
      .pili-hoja-tit-wrap {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          min-width: 0;
      }

      .pili-hoja-ctx:empty {
          display: none;
      }

      .pili-hoja-ctx .pp-pili-nota:first-child {
          margin-top: 0;
      }

      .pili-hoja-ctx .pp-pili-secundarias {
          margin-top: var(--pp-esp-3);
      }

      .pili-hoja-ctx .pp-pili-secundarias:first-child {
          margin-top: 0;
      }

      /* ═══════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · PILI] Hoja "Preguntar a Pili" — misma interacción que la campana
         Celular: hoja desde abajo sobre header y barra · Escritorio: panel lateral derecho
         ═══════════════════════════════════════════════════════════ */
      #pili-hoja {
          position: fixed;
          inset: 0;
          z-index: 2200;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          background: var(--pp-velo);
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      #pili-hoja .pili-hoja-panel {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          width: 100%;
          max-height: 82dvh;
          box-sizing: border-box;
          padding: 0 var(--pp-esp-4) calc(var(--pp-esp-4) + env(safe-area-inset-bottom, 0px));
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-bottom: 0;
          border-radius: 16px 16px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          animation: pili-hoja-subir .26s cubic-bezier(.22, 1, .36, 1);
      }

      #pili-hoja .pili-hoja-agarre {
          display: flex;
          justify-content: center;
          padding-top: var(--pp-esp-2);
          touch-action: none;
      }

      #pili-hoja .pili-hoja-agarre span {
          width: 36px;
          height: 4px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde-fuerte);
      }

      #pili-hoja .pili-hoja-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          touch-action: none;
      }

      #pili-hoja .pili-hoja-titulo {
          min-width: 0;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #pili-hoja .pili-hoja-x {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      #pili-hoja .pili-hoja-x:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      #pili-hoja .pili-hoja-x:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      /* Cuerpo: contexto arriba, conversación al medio (se desplaza), sugerencias y campo abajo */
      #pili-hoja #pilas-brain-preguntas {
          display: flex !important;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0;
          padding: 0;
      }

      #pili-hoja .pili-hoja-ctx {
          flex: 0 0 auto;
          max-height: 34dvh;
          overflow-y: auto;
          overscroll-behavior: contain;
          padding-bottom: var(--pp-esp-3);
          margin-bottom: var(--pp-esp-3);
          border-bottom: 1px solid var(--pp-borde);
      }

      #pili-hoja .pili-hoja-ctx:empty {
          display: none;
      }

      #pili-hoja .pp-pili-hilo {
          flex: 1 1 auto;
          min-height: 0;
          max-height: none;
          margin: 0 0 var(--pp-esp-3);
          overflow-y: auto;
          overscroll-behavior: contain;
      }

      #pili-hoja .brain-chips-scroll {
          flex-shrink: 0;
          margin-top: auto;
          padding-bottom: var(--pp-esp-2);
      }

      #pili-hoja .brain-input-wrap {
          flex-shrink: 0;
          margin-top: 0;
      }

      /* Chat (mismos estilos que tenía dentro de la tarjeta) */
      #pili-hoja .brain-chat-zona {
          padding: 0;
      }

      #pili-hoja .brain-chat-titulo {
          margin-bottom: var(--pp-esp-2);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: 0;
          text-transform: none;
          color: var(--pp-texto);
      }

      #pili-hoja .brain-chip {
          height: 32px;
          padding: 0 var(--pp-esp-3);
          border: 1px solid var(--pp-borde-fuerte);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
      }

      #pili-hoja .brain-chip:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
          transform: none;
      }

      #pili-hoja .brain-input-wrap {
          height: var(--pp-alto-control);
          padding: 0 4px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          box-shadow: none;
      }

      #pili-hoja .brain-input-wrap:focus-within {
          border-color: var(--pp-acento);
          box-shadow: var(--pp-foco);
      }

      #pili-hoja #brain-input-pregunta {
          width: 0 !important;
          min-width: 0;
          height: 100%;
          padding: 0 var(--pp-esp-2) !important;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15) !important;
          color: var(--pp-texto) !important;
      }

      #pili-hoja #brain-input-pregunta::placeholder {
          color: var(--pp-texto-3) !important;
      }

      #pili-hoja #brain-mic-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          padding: 0 !important;
          border: 0;
          border-radius: 8px;
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
          flex-shrink: 0;
      }

      #pili-hoja #brain-mic-btn[data-estado="grabando"] {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          animation: pp-mic-late-hoja 1.2s ease-in-out infinite;
      }

      #pili-hoja #brain-mic-btn[data-estado="procesando"] {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      @keyframes pp-mic-late-hoja {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: .55;
          }
      }

      #pili-hoja .brain-btn-enviar {
          width: 36px;
          height: 36px;
          margin: 0;
          border-radius: 8px;
          background: var(--pp-acento) !important;
          color: var(--pp-sobre-acento) !important;
          transform: none;
      }

      /* Escritorio: panel lateral derecho a toda la altura */
      @media (min-width: 641px) {
          #pili-hoja {
              align-items: stretch;
              justify-content: flex-end;
          }

          #pili-hoja .pili-hoja-panel {
              width: 420px;
              max-width: 100%;
              height: 100dvh;
              max-height: none;
              padding: var(--pp-esp-4);
              border: 0;
              border-left: 1px solid var(--pp-borde);
              border-radius: 0;
              animation-name: pili-hoja-lateral;
          }

          #pili-hoja .pili-hoja-agarre {
              display: none;
          }
      }

      @keyframes pili-hoja-subir {
          from {
              transform: translateY(100%);
          }

          to {
              transform: none;
          }
      }

      @keyframes pili-hoja-lateral {
          from {
              transform: translateX(100%);
          }

          to {
              transform: none;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          #pili-hoja .pili-hoja-panel {
              animation: none;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .pp-decision--cargando .pp-decision-msj {
              animation: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · CONCILIACIÓN] Tarjetas D/C por ticket
         Hoja desde abajo en celular · ventana centrada en escritorio
         ═══════════════════════════════════════════════════════════ */
      #modal-conciliacion .conc-panel {
          max-width: 560px;
          overflow: hidden;
      }

      .conc-handle {
          width: 36px;
          height: 4px;
          margin: 0 auto calc(var(--pp-esp-1) * -1);
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde-fuerte);
      }

      @media (min-width: 640px) {
          .conc-handle {
              display: none;
          }
      }

      /* Resumen */
      .conc-resumen {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: var(--pp-esp-2) var(--pp-esp-5);
      }

      .conc-resumen:empty {
          display: none;
      }

      .conc-res-dato {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .conc-res-dato span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .conc-res-dato b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .conc-res-aviso {
          align-self: center;
      }

      /* Lista (se desplaza; el pie queda fijo) */
      .conc-lista {
          flex: 1 1 auto;
          min-height: 120px;
          overflow-y: auto;
          overscroll-behavior: contain;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .conc-banco+.conc-banco {
          border-top: 1px solid var(--pp-borde);
      }

      .conc-banco-cab {
          position: sticky;
          top: 0;
          z-index: 1;
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          padding: 8px var(--pp-esp-3);
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
      }

      .conc-banco-nom {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .02em;
          color: var(--pp-texto);
      }

      .conc-banco-n {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .conc-banco-total {
          margin-left: auto;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .conc-fila {
          display: grid;
          grid-template-columns: auto 1fr auto auto;
          align-items: center;
          column-gap: var(--pp-esp-2);
          padding: 10px var(--pp-esp-3);
          border-bottom: 1px solid var(--pp-borde);
      }

      .conc-banco .conc-fila:last-child {
          border-bottom: 0;
      }

      .conc-fila.marcada {
          background: var(--pp-acento-suave);
      }

      .conc-check {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          margin: 0;
          cursor: pointer;
      }

      .conc-check input {
          width: 18px;
          height: 18px;
          margin: 0;
          accent-color: var(--pp-acento);
          cursor: pointer;
      }

      .conc-info {
          min-width: 0;
      }

      .conc-tk {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .conc-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px 6px;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .conc-monto {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .conc-ver {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .conc-ver:hover {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .conc-ver .pp-icono {
          width: 18px;
          height: 18px;
          transition: transform .15s ease;
      }

      .conc-fila.abierta .conc-ver .pp-icono {
          transform: rotate(180deg);
      }

      .conc-detalle {
          grid-column: 2 / -1;
          margin-top: var(--pp-esp-2);
          padding: var(--pp-esp-2) var(--pp-esp-3);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
      }

      .conc-det-linea {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 4px 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .conc-det-linea .pp-num {
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .conc-det-quien {
          margin-top: 6px;
          padding-top: 6px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .conc-det-quien b {
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .conc-det-nota {
          margin: 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      /* Vacío y carga */
      .conc-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: 28px var(--pp-esp-4);
          text-align: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .conc-vacio b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .conc-vacio-ico {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          margin-bottom: 4px;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .conc-esq {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: var(--pp-esp-3);
      }

      .conc-esq i {
          display: block;
          height: 48px;
          border-radius: var(--pp-radio-m);
          background: linear-gradient(90deg, var(--pp-sutil) 25%, var(--pp-borde) 50%, var(--pp-sutil) 75%);
          background-size: 200% 100%;
          animation: pp-esq-brillo 1.2s linear infinite;
      }

      /* Pie: selección, campos, comisión y botones */
      .conc-pie {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .conc-sel {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .conc-sel b {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .conc-campos {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--pp-esp-3);
      }

      .conc-campo {
          display: flex;
          flex-direction: column;
          gap: 6px;
          min-width: 0;
          margin: 0;
      }

      .conc-campo>span {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      #modal-conciliacion #mod-dep {
          text-align: right;
          font-weight: var(--pp-fw-fuerte);
      }

      #modal-conciliacion input[type="date"] {
          color-scheme: light;
      }

      body.tema-black #modal-conciliacion input[type="date"] {
          color-scheme: dark;
      }

      .conc-comision {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .conc-comision b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .conc-comision b.conc-com-pos {
          color: var(--pp-negativo);
      }

      /* Sin pendientes: solo queda el botón Cerrar */
      .conc-panel--vacio .conc-sel,
      .conc-panel--vacio .conc-campos,
      .conc-panel--vacio .conc-comision,
      .conc-panel--vacio #btn-conf-liq {
          display: none;
      }

      .conc-panel--vacio .conc-botones {
          grid-template-columns: 1fr;
      }

      .conc-pct {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .conc-error {
          padding: 8px var(--pp-esp-3);
          border-radius: var(--pp-radio-m);
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          font-size: var(--pp-fs-13);
      }

      .conc-error[hidden] {
          display: none;
      }

      .conc-botones {
          display: grid;
          grid-template-columns: 1fr 2fr;
          gap: var(--pp-esp-2);
      }

      @media (max-width: 380px) {
          .conc-campos {
              grid-template-columns: 1fr;
          }
      }

      /* ═══════════════════════════════════════════════════════════
         🎨 [PILAS-PRO · COMUNICADOS] Lista como la campana
         ═══════════════════════════════════════════════════════════ */
      #modal-comunicados .com-cab {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      #modal-comunicados .com-titulo {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #modal-comunicados .com-sub {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      #modal-comunicados .pilas-modal-x {
          flex-shrink: 0;
          border: 0;
      }

      #modal-comunicados .pilas-modal-body {
          padding: 0 var(--pp-esp-4) calc(var(--pp-esp-2) + env(safe-area-inset-bottom, 0px));
      }

      #modal-comunicados .com-item {
          display: flex;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4) 0;
          border-bottom: 1px solid var(--pp-borde);
      }

      #modal-comunicados .com-item:last-child {
          border-bottom: 0;
      }

      #modal-comunicados .com-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      #modal-comunicados .com-ico .pp-icono {
          width: 18px;
          height: 18px;
      }

      #modal-comunicados .com-ico--novedad {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      #modal-comunicados .com-ico--promo {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      #modal-comunicados .com-ico--alerta {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #modal-comunicados .com-txt {
          flex: 1;
          min-width: 0;
      }

      #modal-comunicados .com-fila1 {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      #modal-comunicados .com-tit {
          min-width: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.35;
          color: var(--pp-texto);
      }

      #modal-comunicados .com-fecha {
          flex-shrink: 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      #modal-comunicados .com-meta {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          margin-top: 4px;
      }

      #modal-comunicados .com-chip--novedad {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      #modal-comunicados .com-chip--promo {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      #modal-comunicados .com-chip--alerta {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #modal-comunicados .com-nuevo {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-marca-2);
      }

      #modal-comunicados .com-nuevo i {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--pp-marca-2);
      }

      #modal-comunicados .com-msj {
          margin: var(--pp-esp-2) 0 0;
          font-size: var(--pp-fs-15);
          line-height: 1.55;
          color: var(--pp-texto-2);
          white-space: pre-line;
          overflow-wrap: anywhere;
      }

      #modal-comunicados .com-msj.plegado {
          display: -webkit-box;
          -webkit-line-clamp: 4;
          line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      #modal-comunicados .com-leer {
          margin-top: 4px;
          padding: 0;
          border: 0;
          background: transparent;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-acento-texto);
          cursor: pointer;
      }

      #modal-comunicados .com-leer[hidden] {
          display: none;
      }

      #modal-comunicados .com-ver.pp-btn {
          height: 36px;
          margin-top: var(--pp-esp-3);
          padding: 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          text-decoration: none;
      }

      #modal-comunicados .com-ver .pp-icono {
          width: 16px;
          height: 16px;
      }

      #modal-comunicados .com-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: 36px var(--pp-esp-4);
          text-align: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      #modal-comunicados .com-vacio b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      #modal-comunicados .com-vacio-ico {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          margin-bottom: 6px;
          border-radius: 50%;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      /* ═══════════════════════════════════════════════════════════
         🗓️ [PLAN ANUAL] Flujo de caja › Año
         ═══════════════════════════════════════════════════════════ */
      #pa-contenido {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pa-sec-cab {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pa-sec-cab--btn {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pa-sec-tit-wrap {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pa-sec-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-sec-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-btn.pa-btn-fecha {
          flex-shrink: 0;
          height: 34px;
          padding: 0 10px;
          font-size: var(--pp-fs-13);
      }

      .pa-btn-fecha .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pa-fechas {
          padding: 0;
          overflow: hidden;
      }

      .pa-anio {
          padding: 6px 14px;
          background: var(--pp-sutil);
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .pa-f {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          width: 100%;
          box-sizing: border-box;
          padding: 10px 14px;
          border: 0;
          border-bottom: 1px solid var(--pp-borde);
          background: transparent;
          color: inherit;
          font-family: var(--pp-fuente);
          text-align: left;
      }

      .pa-fechas>.pa-f:last-child {
          border-bottom: 0;
      }

      button.pa-f {
          cursor: pointer;
      }

      button.pa-f:hover {
          background: var(--pp-sutil);
      }

      .pa-f-dia {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 42px;
          padding: 4px 0;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          text-transform: uppercase;
      }

      .pa-f--propia .pa-f-dia {
          background: var(--pp-superficie);
          border: 1px dashed var(--pp-borde-fuerte);
      }

      .pa-f-dia b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.1;
          color: var(--pp-texto);
      }

      .pa-f-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 1px;
      }

      .pa-f-txt b {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-f-txt span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pa-f-txt small {
          font-size: var(--pp-fs-11);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pa-f-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 3px;
      }

      .pa-f-der small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .pp-chip.pa-chip-neutro {
          background: transparent;
          border: 1px solid var(--pp-borde);
      }

      .pa-nota {
          display: flex;
          gap: 8px;
          margin: 0 2px;
          font-size: var(--pp-fs-12);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .pa-nota .pp-icono {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          margin-top: 1px;
      }

      .pa-nota b {
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pa-vacio,
      .pa-bloq {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          padding: 28px var(--pp-esp-4);
          text-align: center;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pa-vacio b,
      .pa-bloq b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-vacio .pp-btn {
          margin-top: 6px;
      }

      .pa-vacio-ico,
      .pa-bloq-ico {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          margin-bottom: 4px;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pa-vacio-ico--error {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pa-esq {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .pa-esq i {
          display: block;
          height: 56px;
          border-radius: var(--pp-radio-l);
          background: linear-gradient(90deg, var(--pp-sutil) 25%, var(--pp-borde) 50%, var(--pp-sutil) 75%);
          background-size: 200% 100%;
          animation: pp-esq-brillo 1.2s linear infinite;
      }

      /* Hoja: fecha propia */
      .pa-campo {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin: 0;
      }

      .pa-campo>span {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pa-hoja .pp-segmentado>button.activo {
          background: var(--pp-superficie);
          color: var(--pp-texto);
          box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
      }

      .pa-cats {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      .pa-cat {
          height: 32px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          cursor: pointer;
      }

      .pa-cat.activo {
          border-color: transparent;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      .pa-hoja-btns {
          display: flex;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-2);
      }

      .pa-hoja-btns .pp-btn--l {
          flex: 1;
      }

      .pa-hoja-btns [hidden] {
          display: none !important;
      }

      body.tema-black .pa-hoja input[type="date"] {
          color-scheme: dark;
      }

      @media (prefers-reduced-motion: reduce) {
          .pa-esq i {
              animation: none;
          }
      }

      /* 📈 [PLAN ANUAL · F2] Proyección de 12 meses */
      .pa-proy {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pa-cab {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pa-cab-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pa-cab-tit {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pa-cab-tit b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-cab-tit span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-btn.pa-btn-aj {
          flex-shrink: 0;
          height: 34px;
          padding: 0 10px;
          font-size: var(--pp-fs-13);
      }

      .pa-btn-aj .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pa-esc>button.activo {
          background: var(--pp-superficie);
          color: var(--pp-texto);
          box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
      }

      .pa-aviso {
          display: flex;
          gap: 8px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pa-aviso .pp-icono {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          margin-top: 2px;
      }

      .pa-aviso b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      /* Indicadores */
      .pa-kpis {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pa-kpi {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: 12px 14px;
      }

      .pa-kpi>span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pa-kpi>b {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pa-kpi>small {
          font-size: var(--pp-fs-11);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pa-kpi--aviso {
          border-color: var(--pp-aviso);
          box-shadow: inset 3px 0 0 var(--pp-aviso);
      }

      .pa-kpi--neg {
          border-color: var(--pp-negativo);
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pa-proy .pos {
          color: var(--pp-positivo);
      }

      .pa-proy .neg {
          color: var(--pp-negativo);
      }

      /* Gráfica */
      .pa-graf-card {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pa-graf-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-graf {
          position: relative;
          width: 100%;
          min-height: 180px;
      }

      .pa-graf svg {
          display: block;
          overflow: visible;
      }

      .pa-g-rejilla {
          stroke: var(--pp-borde);
          stroke-width: 1;
      }

      .pa-g-cero {
          stroke: var(--pp-borde-fuerte);
          stroke-width: 1;
      }

      .pa-g-eje {
          font-family: var(--pp-fuente);
          font-size: 10px;
          fill: var(--pp-texto-3);
      }

      .pa-g-barra {
          fill: var(--pp-borde-fuerte);
      }

      .pa-g-barra--alta {
          fill: var(--pp-acento);
      }

      .pa-g-colchon {
          stroke: var(--pp-aviso);
          stroke-width: 1.5;
          stroke-dasharray: 4 3;
      }

      .pa-g-saldo {
          fill: none;
          stroke: var(--pp-texto);
          stroke-width: 2;
          stroke-linejoin: round;
          stroke-linecap: round;
      }

      .pa-g-punto {
          fill: var(--pp-texto);
          stroke: var(--pp-superficie);
          stroke-width: 2;
      }

      .pa-g-punto--bajo {
          fill: var(--pp-aviso);
      }

      .pa-g-punto--neg {
          fill: var(--pp-negativo);
      }

      .pa-g-hit {
          fill: transparent;
          cursor: pointer;
      }

      .pa-g-hit.activo {
          fill: var(--pp-texto);
          fill-opacity: .06;
      }

      .pa-g-tip {
          position: absolute;
          top: 0;
          display: flex;
          flex-direction: column;
          gap: 1px;
          padding: 6px 10px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          box-shadow: var(--pp-sombra-flotante);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          white-space: nowrap;
          pointer-events: none;
      }

      .pa-g-tip[hidden] {
          display: none;
      }

      .pa-g-tip b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-leyenda {
          display: flex;
          flex-wrap: wrap;
          gap: 4px 14px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pa-leyenda span {
          display: inline-flex;
          align-items: center;
          gap: 6px;
      }

      .pa-ley-barra {
          width: 10px;
          height: 10px;
          border-radius: 2px;
          background: var(--pp-borde-fuerte);
      }

      .pa-ley-barra--alta {
          background: var(--pp-acento);
      }

      .pa-ley-linea {
          width: 14px;
          height: 2px;
          border-radius: 1px;
          background: var(--pp-texto);
      }

      .pa-ley-colchon {
          width: 14px;
          border-top: 2px dashed var(--pp-aviso);
      }

      /* Mes a mes */
      .pa-meses {
          padding: 0;
          overflow: hidden;
      }

      .pa-m {
          border-bottom: 1px solid var(--pp-borde);
      }

      .pa-m:last-child {
          border-bottom: 0;
      }

      .pa-m--bajo {
          box-shadow: inset 3px 0 0 var(--pp-aviso);
      }

      .pa-m--neg {
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pa-m-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          width: 100%;
          box-sizing: border-box;
          padding: 12px 10px 12px 14px;
          border: 0;
          background: transparent;
          color: inherit;
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .pa-m-fila:hover {
          background: var(--pp-sutil);
      }

      .pa-m-izq {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      .pa-m-izq>b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-m-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
      }

      .pa-m-chips .pp-chip {
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .pp-chip.pa-chip-fecha {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pa-m-der {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 3px;
          font-variant-numeric: tabular-nums;
      }

      .pa-m-v {
          display: flex;
          align-items: baseline;
          gap: 6px;
      }

      .pa-m-v b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-m-v small,
      .pa-m-s {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .pa-m-s em {
          font-style: normal;
          font-weight: var(--pp-fw-medio);
      }

      .pa-m-chev {
          flex-shrink: 0;
          display: flex;
          color: var(--pp-texto-3);
          transition: transform .15s ease;
      }

      .pa-m-chev .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pa-m.abierto .pa-m-chev {
          transform: rotate(180deg);
      }

      .pa-m-det {
          display: flex;
          flex-direction: column;
          gap: 2px;
          margin: 0 12px 12px 14px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
      }

      .pa-m-det[hidden] {
          display: none;
      }

      .pa-l {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 5px 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .pa-l>b {
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-weight: var(--pp-fw-fuerte);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
      }

      .pa-l--sal>b {
          color: var(--pp-negativo);
      }

      .pa-l-txt {
          display: flex;
          flex-direction: column;
          gap: 1px;
          min-width: 0;
      }

      .pa-l-txt small {
          font-size: var(--pp-fs-11);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pa-l-cats {
          margin: 0 0 4px;
          padding-left: 10px;
          border-left: 2px solid var(--pp-borde);
      }

      .pa-l--cat {
          padding: 3px 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pa-l--cat>b {
          font-weight: var(--pp-fw-medio);
      }

      .pa-l--total {
          margin-top: 4px;
          padding-top: 8px;
          border-top: 1px solid var(--pp-borde-fuerte);
      }

      .pa-l--total b {
          font-weight: var(--pp-fw-fuerte);
      }

      .pa-alerta {
          display: flex;
          gap: 8px;
          margin-top: 6px;
          padding: 8px 10px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-aviso-suave);
          font-size: var(--pp-fs-12);
          line-height: 1.5;
          color: var(--pp-texto);
      }

      .pa-alerta .pp-icono {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          margin-top: 1px;
          color: var(--pp-aviso);
      }

      .pa-alerta--neg {
          background: var(--pp-negativo-suave);
      }

      .pa-alerta--neg .pp-icono {
          color: var(--pp-negativo);
      }

      /* Hoja de Ajustes */
      .pa-aj-intro {
          margin: 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pa-campo>label {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pa-monto {
          position: relative;
      }

      .pa-monto>span {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          font-size: var(--pp-fs-15);
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      .pa-monto .pp-campo {
          width: 100%;
          box-sizing: border-box;
          padding-left: 26px;
          font-variant-numeric: tabular-nums;
      }

      .pa-aj-ayuda {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pa-aj-ayuda small {
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pa-aj-pilas {
          flex-shrink: 0;
          padding: 0;
          border: 0;
          background: none;
          color: var(--pp-acento-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      @media (prefers-reduced-motion: reduce) {
          .pa-m-chev {
              transition: none;
          }
      }

      /* 🛒 [PLAN ANUAL · F3] Ventanas de inversión y proveedores */
      .pa-v {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pa-v--urg {
          border-color: var(--pp-negativo);
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pa-v-cab {
          display: flex;
          align-items: flex-start;
          gap: var(--pp-esp-3);
      }

      .pa-v-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pa-v-ico .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pa-v-ico--ok {
          background: var(--pp-sutil);
          color: var(--pp-positivo);
      }

      .pa-v-tit {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pa-v-tit b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-v-tit small {
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pa-v-cab>.pp-chip {
          flex-shrink: 0;
          white-space: nowrap;
      }

      .pp-chip.pa-chip-neg {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .pa-v-datos {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          padding: 10px 0;
          border-top: 1px solid var(--pp-borde);
          border-bottom: 1px solid var(--pp-borde);
      }

      .pa-v-datos>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pa-v-datos span {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pa-v-datos b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pa-v-datos small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .pa-v-prov {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px 8px;
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-2);
      }

      .pa-v-prov .pp-icono {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          color: var(--pp-texto-3);
      }

      .pa-v-prov>span {
          flex: 1;
          min-width: 0;
      }

      .pa-v-ok,
      .pa-v-falta {
          display: flex;
          gap: 8px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto);
      }

      .pa-v-falta {
          background: var(--pp-aviso-suave);
      }

      .pa-v-ok .pp-icono,
      .pa-v-falta .pp-icono {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
          margin-top: 1px;
      }

      .pa-v-ok .pp-icono {
          color: var(--pp-positivo);
      }

      .pa-v-falta .pp-icono {
          color: var(--pp-aviso);
      }

      .pa-v-ok b,
      .pa-v-falta b {
          font-weight: var(--pp-fw-fuerte);
      }

      .pa-v-btns {
          display: flex;
          flex-wrap: wrap;
          gap: var(--pp-esp-2);
      }

      .pa-v--hecha {
          gap: var(--pp-esp-2);
      }

      .pa-v--hecha .pa-v-btns {
          justify-content: flex-end;
      }

      .pa-ver-mas {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          align-self: center;
          height: 36px;
          padding: 0 12px;
          border: 0;
          background: none;
          color: var(--pp-acento-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .pa-ver-mas .pp-icono {
          width: 16px;
          height: 16px;
          transition: transform .15s ease;
      }

      .pa-ver-mas[aria-expanded="true"] .pp-icono {
          transform: rotate(180deg);
      }

      /* Hoja "Qué comprar" */
      .pa-qc {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          overflow: hidden;
      }

      .pa-qc-f {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 10px 12px;
          border-bottom: 1px solid var(--pp-borde);
      }

      .pa-qc-f:last-child {
          border-bottom: 0;
      }

      .pa-qc-txt,
      .pa-qc-der {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pa-qc-der {
          flex-shrink: 0;
          align-items: flex-end;
          font-variant-numeric: tabular-nums;
      }

      .pa-qc-txt b,
      .pa-qc-der b {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pa-qc-txt small,
      .pa-qc-der small {
          font-size: var(--pp-fs-11);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pa-qc-tot {
          background: var(--pp-sutil);
      }

      /* Tus proveedores */
      .pa-prov-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 42px;
          height: 42px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .pa-prov-ico .pp-icono {
          width: 20px;
          height: 20px;
      }

      .pa-hoja-btns [hidden],
      #pa-hoja-prov [hidden] {
          display: none !important;
      }

      @media (max-width: 360px) {
          .pa-v-datos {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .pa-ver-mas .pp-icono {
              transition: none;
          }
      }

      /* 🛍️ [CATÁLOGO · AGOTADOS] Título antes de los productos agotados */
      .cat-sep-agotados {
          grid-column: 1 / -1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;
          margin: 18px 0 6px;
          text-align: center;
      }

      /* No es una tarjeta: sin borde, sombra ni efecto al tocar */
      #vista-cliente .grid-tienda>div.cat-sep-agotados {
          border: 0 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: transparent;
          transform: none !important;
          overflow: visible;
      }

      .cat-sep-agotados span {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          font-size: 12px;
          font-weight: 800;
          letter-spacing: .4px;
          text-transform: uppercase;
          color: #636e72;
      }

      .cat-sep-agotados span::before,
      .cat-sep-agotados span::after {
          content: '';
          flex: 1;
          height: 1px;
          background: #e3e6ea;
      }

      .cat-sep-agotados small {
          font-size: 12px;
          color: #95a5a6;
      }

      /* ═══════════════════════════════════════════════════════════════
         🏷️ [PROMOS] Cara A: banner, insignias, página Promociones, carrito
         ═══════════════════════════════════════════════════════════════ */
      #promo-banner-cli {
          padding: 0 0 10px;
      }

      #promo-banner-cli[hidden] {
          display: none !important;
      }

      .prc-banner {
          display: flex;
          gap: 10px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding: 4px 10px 6px;
          scroll-padding: 0 10px;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
      }

      .prc-banner::-webkit-scrollbar {
          display: none;
      }

      .prc-bn {
          position: relative;
          flex: 0 0 86%;
          max-width: 420px;
          height: 150px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          gap: 2px;
          padding: 16px;
          box-sizing: border-box;
          overflow: hidden;
          scroll-snap-align: center;
          border: 0;
          border-radius: 20px;
          color: #fff;
          text-align: left;
          font-family: inherit;
          cursor: pointer;
          box-shadow: 0 8px 20px rgba(31, 45, 61, .12);
      }

      .prc-banner .prc-bn:only-child {
          flex-basis: 100%;
          max-width: none;
      }

      .prc-bn-velo {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .65) 100%);
      }

      .prc-bn>*:not(.prc-bn-velo):not(.prc-bn-grande) {
          position: relative;
      }

      .prc-bn-grande {
          position: absolute;
          right: 14px;
          top: 6px;
          font-size: 56px;
          font-weight: 900;
          letter-spacing: -2px;
          line-height: 1;
          opacity: .95;
      }

      .prc-bn-chip {
          align-self: flex-start;
          margin-bottom: 6px;
          padding: 3px 9px;
          border-radius: 99px;
          background: rgba(255, 255, 255, .22);
          font-size: 11px;
          font-weight: 700;
          color: #fff;
      }

      .prc-bn b {
          max-width: 72%;
          font-size: 18px;
          line-height: 1.2;
          font-weight: 800;
      }

      .prc-bn-pie {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
          margin-top: 8px;
          font-size: 12px;
      }

      .prc-bn-pie span:last-child {
          display: flex;
          align-items: center;
          gap: 2px;
          font-weight: 700;
          white-space: nowrap;
      }

      .prc-bn-pie .pp-icono {
          width: 14px;
          height: 14px;
      }

      .prc-puntos {
          display: flex;
          justify-content: center;
          gap: 5px;
          margin: 4px 0 2px;
      }

      .prc-puntos i {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #D5DDE5;
          transition: width .2s ease;
      }

      .prc-puntos i.on {
          width: 16px;
          border-radius: 3px;
          background: var(--pp-acento);
      }

      /* Insignia en la tarjeta del catálogo */
      .prc-insignia {
          position: absolute;
          top: 8px;
          left: 8px;
          z-index: 2;
          padding: 3px 8px;
          border-radius: 8px;
          background: #E11D48;
          color: #fff;
          font-size: 12px;
          font-weight: 800;
      }

      .prc-insignia--lleva {
          background: #111827;
      }

      .prc-fin {
          margin-top: 2px;
          font-size: 11px;
          font-weight: 700;
          color: #E11D48;
      }

      /* Chip "En promoción" junto a Filtros */
      .cat-btn-promo {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          border-color: transparent;
          background: #ECFDF5;
          color: #047857;
      }

      .cat-btn-promo .pp-icono {
          width: 15px;
          height: 15px;
      }

      .cat-btn-promo.activo {
          border-color: #047857;
          background: #047857;
          color: #fff;
      }

      /* Página "Promociones" */
      .prc-pag {
          position: fixed;
          inset: 0;
          z-index: 2147483000;
          display: none;
          flex-direction: column;
          background: var(--pp-fondo);
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      .prc-pag.abierta {
          display: flex;
          animation: slideUpAccion .28s cubic-bezier(.22, 1, .36, 1);
      }

      body.prc-sin-scroll {
          overflow: hidden;
      }

      .prc-pag-cab {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 14px 16px;
          padding-top: calc(14px + env(safe-area-inset-top, 0px));
          background: var(--pp-superficie);
          border-bottom: 1px solid var(--pp-borde);
      }

      .prc-pag-cab b {
          flex: 1;
          font-size: 18px;
          font-weight: 700;
      }

      .prc-pag-cab small {
          display: block;
          font-size: 12px;
          font-weight: 500;
          color: var(--pp-texto-3);
      }

      .prc-x {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 38px;
          height: 38px;
          padding: 0;
          border: 1px solid var(--pp-borde);
          border-radius: 50%;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .prc-x .pp-icono {
          width: 18px;
          height: 18px;
      }

      .prc-pag-cuerpo {
          flex: 1;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding: 14px 16px calc(40px + env(safe-area-inset-bottom, 0px));
      }

      .prc-pc {
          flex-shrink: 0;
          width: 100%;
          max-width: 520px;
          align-self: center;
          overflow: hidden;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: 18px;
          box-shadow: 0 6px 16px rgba(31, 45, 61, .06);
      }

      .prc-pc-img {
          position: relative;
          display: flex;
          align-items: flex-end;
          height: 120px;
          padding: 12px;
          box-sizing: border-box;
          color: #fff;
      }

      .prc-pc-img .prc-bn-chip {
          margin: 0;
      }

      .prc-pc-cuerpo {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 14px;
      }

      .prc-pc-cuerpo b {
          font-size: 16px;
          font-weight: 700;
      }

      .prc-pc-cuerpo p {
          margin: 0;
          font-size: 13px;
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .prc-pc-meta {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          font-weight: 600;
          color: var(--pp-texto-3);
      }

      .prc-pc-meta--urge {
          color: #E11D48;
      }

      .prc-pc-meta .pp-icono {
          width: 14px;
          height: 14px;
      }

      .prc-cupon {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          padding: 8px 8px 8px 12px;
          border: 1.5px dashed #10B981;
          border-radius: 12px;
          background: rgba(16, 185, 129, .08);
      }

      .prc-cupon span {
          font-family: var(--pp-fuente-mono);
          font-size: 15px;
          font-weight: 800;
          letter-spacing: 1px;
          color: var(--pp-acento-texto);
      }

      .prc-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          height: 44px;
          padding: 0 16px;
          border: 0;
          border-radius: 12px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-family: inherit;
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
      }

      .prc-btn .pp-icono {
          width: 16px;
          height: 16px;
      }

      .prc-btn--sec {
          height: 36px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          background: var(--pp-superficie);
          color: var(--pp-acento-texto);
          font-size: 13px;
      }

      .prc-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          padding: 48px 16px;
          text-align: center;
          font-size: 13px;
          color: var(--pp-texto-2);
      }

      .prc-vacio b {
          font-size: 16px;
          color: var(--pp-texto);
      }

      .prc-vacio .pp-icono {
          width: 32px;
          height: 32px;
          color: var(--pp-acento);
      }

      /* Carrito */
      .item-carrito-cli.prc-it {
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
      }

      .prc-it img {
          flex-shrink: 0;
          width: 52px;
          height: 52px;
          object-fit: cover;
          border-radius: 12px;
          border: 1px solid #eee;
      }

      .prc-it-txt {
          flex: 1;
          min-width: 0;
          line-height: 1.3;
      }

      .prc-it-txt b {
          display: block;
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }

      .prc-it-txt small {
          display: block;
          font-size: 12px;
          color: #64748B;
      }

      .prc-it-txt em {
          display: block;
          font-style: normal;
          font-size: 11px;
          font-weight: 700;
          color: #047857;
      }

      .prc-it-p {
          flex-shrink: 0;
          text-align: right;
          font-size: 14px;
          font-weight: 800;
      }

      .prc-it-p s {
          display: block;
          font-size: 11px;
          font-weight: 600;
          color: #94A3B8;
      }

      .prc-it-x {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          padding: 0;
          border: 0;
          border-radius: 50%;
          background: transparent;
          color: #94A3B8;
          cursor: pointer;
      }

      .prc-it-x .pp-icono {
          width: 16px;
          height: 16px;
      }

      .prc-linea {
          display: flex;
          align-items: center;
          gap: 6px;
          margin: 8px 0;
          padding: 8px 10px;
          border-radius: 10px;
          background: rgba(16, 185, 129, .1);
          font-size: 13px;
          font-weight: 600;
          color: #047857;
      }

      .prc-linea span {
          flex: 1;
          min-width: 0;
      }

      .prc-linea .pp-icono {
          flex-shrink: 0;
          width: 15px;
          height: 15px;
      }

      .prc-envio {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
          margin: 10px 0 4px;
          font-size: 12px;
          color: #334155;
      }

      .prc-envio>span {
          flex: 1;
      }

      .prc-envio b {
          color: #047857;
      }

      .prc-envio .pp-icono {
          width: 16px;
          height: 16px;
          color: #047857;
      }

      .prc-barra {
          flex-basis: 100%;
          height: 6px;
          overflow: hidden;
          border-radius: 3px;
          background: #EEF2F5;
      }

      .prc-barra i {
          display: block;
          height: 100%;
          border-radius: 3px;
          background: #10B981;
          transition: width .3s ease;
      }

      #carrito-promos-zona {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-bottom: 12px;
      }

      #carrito-promos-zona[hidden] {
          display: none !important;
      }

      .prc-cup-in {
          display: flex;
          gap: 6px;
      }

      .prc-cup-in input {
          flex: 1;
          min-width: 0;
          height: 40px;
          padding: 0 12px;
          border: 1px solid #E2E8EE;
          border-radius: 10px;
          font-family: inherit;
          font-size: 14px;
          text-transform: uppercase;
      }

      .prc-cup-in .prc-btn {
          height: 40px;
      }

      .prc-cup-ok {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 10px;
          border: 1.5px dashed #10B981;
          border-radius: 10px;
          font-size: 12px;
          color: #475569;
      }

      .prc-cup-ok>span {
          flex: 1;
          min-width: 0;
      }

      .prc-cup-ok b {
          display: block;
          font-family: var(--pp-fuente-mono);
          font-size: 14px;
          color: #047857;
      }

      .prc-cup-ok .pp-icono {
          width: 18px;
          height: 18px;
          color: #047857;
      }

      .prc-cup-ok--error {
          border-color: #F59E0B;
      }

      .prc-cup-ok--error b,
      .prc-cup-ok--error .pp-icono {
          color: #B45309;
      }

      .prc-cup-ok button {
          border: 0;
          background: none;
          color: #64748B;
          font-family: inherit;
          font-size: 12px;
          text-decoration: underline;
          cursor: pointer;
      }

      .prc-tot {
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          color: #475569;
      }

      .prc-tot--ahorro {
          font-weight: 600;
          color: #047857;
      }

      /* La regla del carrito pinta cada fila como tarjeta: las promos y el envío no */
      #panel-carrito-cliente .carrito-body>div.prc-linea {
          margin: 8px 0 !important;
          border: 0 !important;
          border-radius: 10px !important;
          background: rgba(16, 185, 129, .1) !important;
          box-shadow: none;
      }

      #panel-carrito-cliente .carrito-body>div.prc-envio {
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          box-shadow: none;
      }

      body.tema-black .prc-it-txt small,
      body.tema-black .prc-tot,
      body.tema-black .prc-envio,
      body.tema-black .prc-cup-ok {
          color: #A0A0B5;
      }

      body.tema-black .prc-cup-in input {
          background: #1A1A24;
          border-color: rgba(255, 255, 255, .12);
          color: #F0F0F5;
      }

      /* ═══════════════════════════════════════════════════════════════
         📱 [MENÚ] Menú lateral de la tienda (cara A)
         ═══════════════════════════════════════════════════════════════ */
      #vista-cliente .menu-lateral-cli.mc,
      .menu-lateral-cli.mc {
          width: 300px;
          max-width: 86vw;
          height: 100%;
          height: 100dvh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background: var(--pp-superficie);
          border-right: 0;
          border-radius: 0 24px 24px 0;
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      #vista-cliente .menu-lateral-cli.mc.abierto,
      .menu-lateral-cli.mc.abierto {
          box-shadow: 18px 0 50px rgba(15, 23, 42, .25);
      }

      .menu-lateral-cli.mc.mc-arrastre {
          transition: none;
      }

      .mc-velo {
          position: fixed;
          inset: 0;
          z-index: 1004;
          background: rgba(15, 23, 42, .45);
          opacity: 0;
          visibility: hidden;
          transition: opacity .25s ease, visibility .25s ease;
      }

      .menu-lateral-cli.abierto+.mc-velo {
          opacity: 1;
          visibility: visible;
      }

      .mc-cab {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 18px 14px 14px 16px;
          padding-top: calc(18px + env(safe-area-inset-top, 0px));
      }

      .mc-logo {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          border-radius: 14px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-size: 17px;
          font-weight: 800;
      }

      .mc-tit {
          flex: 1;
          min-width: 0;
      }

      .mc-tit>b {
          display: block;
          overflow: hidden;
          font-size: 16px;
          font-weight: 700;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: var(--pp-texto);
      }

      .mc-horario {
          display: flex;
          align-items: center;
          gap: 6px;
          margin-top: 2px;
          font-size: 12px;
          color: var(--pp-texto-3);
      }

      .mc-horario[hidden] {
          display: none;
      }

      .mc-horario i {
          flex-shrink: 0;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #10B981;
      }

      .mc-horario--cerrado i {
          background: #F59E0B;
      }

      .mc-x {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 38px;
          height: 38px;
          padding: 0;
          border: 1px solid var(--pp-borde);
          border-radius: 50%;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .mc-x .pp-icono {
          width: 18px;
          height: 18px;
      }

      .mc-cuerpo {
          flex: 1;
          overflow-y: auto;
          overflow-x: hidden;
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 2px 12px 14px;
      }

      .mc-promo {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          padding: 12px;
          border: 0;
          border-radius: 14px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .mc-promo[hidden] {
          display: none;
      }

      .mc-promo>span {
          flex: 1;
          min-width: 0;
          font-size: 14px;
          font-weight: 600;
      }

      .mc-promo small {
          display: block;
          font-size: 12px;
          font-weight: 500;
          opacity: .85;
      }

      .mc-promo .pp-icono {
          flex-shrink: 0;
          width: 20px;
          height: 20px;
      }

      .mc-promo .pp-icono:last-child {
          width: 16px;
          height: 16px;
      }

      .mc-sec>span {
          display: block;
          padding: 0 6px 6px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: .4px;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .mc-sec[hidden] {
          display: none !important;
      }

      .mc-lista {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border: 1px solid var(--pp-borde);
          border-radius: 14px;
      }

      .mc-i {
          display: flex;
          align-items: center;
          gap: 12px;
          width: 100%;
          min-height: 48px;
          padding: 0 12px;
          box-sizing: border-box;
          border: 0;
          border-bottom: 1px solid var(--pp-borde);
          background: transparent;
          font-family: inherit;
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          text-decoration: none;
          color: var(--pp-texto);
          cursor: pointer;
      }

      .mc-i[hidden] {
          display: none !important;
      }

      .mc-lista>.mc-i:last-child,
      .mc-lista>.mc-i:not([style*="none"]):not([hidden]):last-of-type {
          border-bottom: 0;
      }

      .mc-i:active {
          background: var(--pp-sutil);
      }

      .mc-i>.pp-icono {
          flex-shrink: 0;
          width: 19px;
          height: 19px;
          color: var(--pp-texto-2);
      }

      .mc-i .mc-txt {
          flex: 1;
          min-width: 0;
      }

      .mc-i em {
          font-style: normal;
          font-size: 12px;
          color: var(--pp-texto-3);
      }

      .mc-i>.pp-icono.mc-chev {
          width: 16px;
          height: 16px;
          color: var(--pp-texto-3);
      }

      #lista-etiquetas-confianza.mc-conf {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 2px 6px;
          font-size: 13px;
          font-weight: 400;
      }

      #lista-etiquetas-confianza.mc-conf>div {
          display: flex;
          align-items: center;
          gap: 8px;
          color: var(--pp-texto-2);
      }

      #lista-etiquetas-confianza.mc-conf span {
          padding: 0;
          border: 0;
          border-radius: 0;
          background: none;
          box-shadow: none;
      }

      #lista-etiquetas-confianza.mc-conf .pp-icono {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          color: var(--pp-positivo);
      }

      .mc-pagos {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 0 6px;
      }

      .mc-pago {
          padding: 4px 9px;
          border: 1px solid var(--pp-borde);
          border-radius: 8px;
          font-size: 12px;
          font-weight: 500;
          color: var(--pp-texto-2);
      }

      .mc-pie {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
          border-top: 1px solid var(--pp-borde);
      }

      .mc-redes {
          display: flex;
          gap: 10px;
      }

      .mc-redes:not(:has(a:not([style*="none"]))) {
          display: none;
      }

      .mc-red {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 42px;
          height: 42px;
          border: 1px solid var(--pp-borde);
          border-radius: 50%;
          color: var(--pp-texto-2);
      }

      .mc-red .pp-icono {
          width: 19px;
          height: 19px;
      }

      .mc-volver {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 8px;
          border: 0;
          background: none;
          font-family: inherit;
          font-size: 12px;
          color: var(--pp-texto-3);
          cursor: pointer;
      }

      .mc-volver .pp-icono {
          width: 14px;
          height: 14px;
      }

      @media (prefers-reduced-motion: reduce) {

          .mc-velo,
          .prc-puntos i,
          .prc-barra i {
              transition: none;
          }

          .prc-pag.abierta {
              animation: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════
         🏷️ [PROMOS] Cara B: Gestor de promociones
         ═══════════════════════════════════════════════════════════════ */
      #promo-gestor {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          max-width: 640px;
          margin: 0 auto;
      }

      /* 🏷️ [f161] Promociones en PC y tablet */
      @media (min-width: 768px) {
          #promo-gestor {
              max-width: 1280px;
          }
      }

      .prg-cab-acc {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-shrink: 0;
      }

      .prg-vista {
          display: none;
      }

      @media (min-width: 768px) {
          .prg-vista {
              display: inline-flex;
          }
      }

      .prg-kpis {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
      }

      @media (min-width: 1024px) {
          .prg-kpis {
              grid-template-columns: repeat(4, minmax(0, 1fr));
          }
      }

      .prg-kpi {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 12px 14px;
          border: 1px solid var(--pp-borde);
          border-radius: 14px;
          background: var(--pp-superficie);
          min-width: 0;
      }

      .prg-kpi span {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-12);
          font-weight: 600;
          color: var(--pp-texto-3);
      }

      .prg-kpi span .pp-icono {
          width: 15px;
          height: 15px;
      }

      .prg-kpi b {
          font-size: var(--pp-fs-20);
          font-weight: 800;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .prg-kpi small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          font-variant-numeric: tabular-nums;
      }

      .prg-pronto {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 12px 14px;
          border: 1px solid var(--pp-aviso);
          border-radius: 14px;
          background: var(--pp-aviso-suave);
      }

      .prg-pronto-t {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-13);
          font-weight: 800;
          color: var(--pp-texto);
      }

      .prg-pronto-t .pp-icono {
          width: 16px;
          height: 16px;
          color: var(--pp-aviso);
      }

      .prg-pronto-l {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
      }

      @media (min-width: 768px) {
          .prg-pronto-l {
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          }
      }

      .prg-pronto-f {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          border: 1px solid var(--pp-borde);
          border-radius: 12px;
          background: var(--pp-superficie);
          font: inherit;
          text-align: left;
          color: inherit;
          cursor: pointer;
          min-width: 0;
      }

      .prg-pronto-th {
          flex-shrink: 0;
          display: grid;
          place-items: center;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          color: #fff;
          font-size: 11px;
          font-weight: 800;
          overflow: hidden;
      }

      .prg-pronto-x {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .prg-pronto-x b {
          font-size: var(--pp-fs-13);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .prg-pronto-x small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .prg-pronto-x small.prg-neg {
          color: var(--pp-negativo);
          font-weight: 700;
      }

      .prg-pronto-a {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          font-size: var(--pp-fs-12);
          font-weight: 700;
          color: var(--pp-acento-texto);
      }

      .prg-pronto-a .pp-icono {
          width: 14px;
          height: 14px;
      }

      .prg-barra {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      @media (min-width: 768px) {
          .prg-barra {
              flex-direction: row;
              align-items: center;
          }

          .prg-buscar {
              max-width: 320px;
          }
      }

      .prg-tipos-f {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          scrollbar-width: none;
      }

      .prg-tipos-f .prg-fil {
          flex-shrink: 0;
      }

      .prg-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--pp-esp-3);
      }

      @media (min-width: 768px) {
          .prg-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }
      }

      @media (min-width: 1280px) {
          .prg-grid {
              grid-template-columns: repeat(3, minmax(0, 1fr));
          }
      }

      .prg-grid>.prg-p {
          margin: 0;
          height: 100%;
          box-sizing: border-box;
      }

      .prg-tabla-wrap {
          padding: 0;
          overflow-x: auto;
      }

      .prg-tabla {
          width: 100%;
          border-collapse: collapse;
          font-size: var(--pp-fs-13);
      }

      .prg-tabla th {
          padding: 10px 12px;
          text-align: left;
          font-size: var(--pp-fs-11);
          font-weight: 700;
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          border-bottom: 1px solid var(--pp-borde);
          white-space: nowrap;
          background: var(--pp-sutil);
      }

      .prg-tabla td {
          padding: 10px 12px;
          border-bottom: 1px solid var(--pp-borde);
          color: var(--pp-texto-2);
          vertical-align: middle;
      }

      .prg-tabla tr:last-child td {
          border-bottom: 0;
      }

      .prg-tabla tbody tr {
          cursor: pointer;
      }

      .prg-tabla tbody tr:hover td {
          background: var(--pp-sutil);
      }

      .prg-t-nom {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 220px;
      }

      .prg-t-nom b {
          display: block;
          color: var(--pp-texto);
          font-size: var(--pp-fs-13);
      }

      .prg-t-nom small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .prg-thumb.prg-thumb--s {
          width: 40px;
          height: 40px;
          font-size: 11px;
          border-radius: 10px;
          flex-shrink: 0;
      }

      .prg-num {
          text-align: right !important;
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
      }

      .prg-centro {
          text-align: center !important;
      }

      .prg-est {
          display: inline-block;
          padding: 2px 8px;
          border-radius: 999px;
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-11);
          font-weight: 700;
      }

      .prg-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
      }

      .prg-cab b {
          display: block;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .prg-cab small {
          display: block;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .prg-cab .pp-btn {
          flex-shrink: 0;
      }

      .prg-sug {
          display: flex;
          flex-direction: column;
          padding: 0;
          overflow: hidden;
      }

      .prg-sug-f {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 14px;
          border-bottom: 1px solid var(--pp-borde);
      }

      .prg-sug-f:last-child {
          border-bottom: 0;
      }

      .prg-sug-f>span:nth-child(2) {
          flex: 1;
          min-width: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.4;
          color: var(--pp-texto-2);
      }

      .prg-sug-f>span:nth-child(2) b {
          display: block;
          font-size: 14px;
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .prg-sug-ico {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 34px;
          height: 34px;
          border-radius: 10px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .prg-sug-ico--av {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .prg-sug-ico--neg {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .prg-sug-ico .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-btn.prg-btn-s {
          flex-shrink: 0;
          height: 34px;
          padding: 0 12px;
      }

      .prg-tabs {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          padding: 2px 0;
          scrollbar-width: none;
      }

      .prg-tabs::-webkit-scrollbar {
          display: none;
      }

      .prg-tabs button {
          flex-shrink: 0;
          height: 34px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .prg-tabs button.activo {
          border-color: transparent;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      .prg-p {
          display: flex;
          flex-direction: column;
          gap: 10px;
          cursor: pointer;
      }

      .prg-p-top {
          display: flex;
          align-items: flex-start;
          gap: 12px;
      }

      .prg-thumb {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 56px;
          height: 56px;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 900;
      }

      .prg-p-txt {
          flex: 1;
          min-width: 0;
      }

      .prg-p-txt b {
          display: block;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .prg-p-txt small {
          display: block;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .prg-p-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          margin-top: 6px;
      }

      .prg-sw {
          position: relative;
          flex-shrink: 0;
          width: 44px;
          height: 26px;
          padding: 0;
          border: 0;
          border-radius: 99px;
          background: var(--pp-borde-fuerte);
          cursor: pointer;
          transition: background .2s ease;
      }

      .prg-sw::after {
          content: '';
          position: absolute;
          top: 3px;
          left: 3px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #fff;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
          transition: transform .2s ease;
      }

      .prg-sw.on {
          background: var(--pp-acento);
      }

      .prg-sw.on::after {
          transform: translateX(18px);
      }

      .prg-res {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
      }

      .prg-res>div {
          display: flex;
          flex-direction: column;
          gap: 1px;
          min-width: 0;
      }

      .prg-res span {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .prg-res span .pp-icono {
          width: 13px;
          height: 13px;
      }

      .prg-res b {
          overflow: hidden;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: var(--pp-texto);
      }

      .prg-basico {
          display: flex;
          gap: 8px;
          padding: 10px 12px;
          border-radius: 12px;
          background: var(--pp-sutil);
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .prg-basico .pp-icono {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          margin-top: 1px;
      }

      /* Editor */
      .prg-hoja .prg-panel {
          max-width: 560px;
      }

      /* 🏷️ [f161] Editor: formulario a la izquierda, vista previa y resumen fijos a la derecha */
      .prg-cuerpo,
      .prg-form {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .prg-lado {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .prg-resumen {
          display: flex;
          flex-direction: column;
          padding: 12px 14px;
          border: 1px solid var(--pp-borde);
          border-radius: 14px;
          background: var(--pp-superficie);
      }

      .prg-resumen-t {
          font-size: var(--pp-fs-11);
          font-weight: 800;
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          margin-bottom: 4px;
      }

      .prg-resumen div:not(.prg-resumen-t) {
          display: flex;
          justify-content: space-between;
          gap: 12px;
          padding: 7px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
      }

      .prg-resumen div:nth-child(2) {
          border-top: 0;
      }

      .prg-resumen span {
          color: var(--pp-texto-3);
      }

      .prg-resumen b {
          color: var(--pp-texto);
          text-align: right;
          font-weight: 700;
      }

      @media (min-width: 768px) {
          .prg-hoja .prg-panel {
              max-width: 760px;
          }

          .prg-prods {
              max-height: min(52vh, 520px);
          }
      }

      @media (min-width: 960px) {
          .prg-hoja .prg-panel {
              max-width: 1180px;
              width: calc(100vw - 64px);
          }

          .prg-cuerpo {
              display: grid;
              grid-template-columns: minmax(0, 1fr) 360px;
              gap: 28px;
              align-items: start;
          }

          .prg-lado {
              position: sticky;
              top: 0;
          }

          .prg-hoja .prg-tipos {
              grid-template-columns: repeat(4, minmax(0, 1fr));
          }
      }

      .prg-vp {
          margin-left: auto;
      }

      .prg-vp>button {
          height: 32px;
          padding: 0 12px;
          font-size: var(--pp-fs-13);
      }

      .prg-prods.prg-prods--fotos {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
          gap: 10px;
          padding: 10px;
      }

      .prg-tile {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 6px 6px 8px;
          border: 1.5px solid var(--pp-borde);
          border-radius: 12px;
          background: var(--pp-superficie);
          cursor: pointer;
          min-width: 0;
      }

      .prg-tile.on {
          border-color: var(--pp-acento);
          box-shadow: 0 0 0 2px var(--pp-acento-suave);
      }

      .prg-tile input {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 1;
          width: 20px;
          height: 20px;
          margin: 0;
          accent-color: var(--pp-acento);
      }

      .prg-tile-foto {
          position: relative;
          display: grid;
          place-items: center;
          aspect-ratio: 1;
          border-radius: 8px;
          overflow: hidden;
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
          margin-bottom: 4px;
      }

      .prg-tile-foto img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .prg-tile-foto svg {
          width: 28px;
          height: 28px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.6;
      }

      .prg-tile-foto .prg-st {
          position: absolute;
          right: 6px;
          bottom: 6px;
          padding: 2px 7px;
          border-radius: 999px;
          background: rgba(255, 255, 255, .92);
          font-style: normal;
      }

      .prg-tile b {
          font-size: var(--pp-fs-12);
          font-weight: 700;
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .prg-tile small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .prg-prods--fotos>.prg-ayuda {
          grid-column: 1 / -1;
      }

      .prg-tipos {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
      }

      .prg-tipo {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 10px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 12px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .prg-tipo b {
          font-size: 14px;
          font-weight: var(--pp-fw-fuerte);
      }

      .prg-tipo small {
          font-size: 11px;
          color: var(--pp-texto-3);
      }

      .prg-tipo.activo {
          padding: 9px;
          border: 2px solid var(--pp-acento);
          background: var(--pp-acento-suave);
      }

      .prg-fila2 {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
      }

      .prg-fila2 .pp-segmentado>button {
          height: 38px;
      }

      .prg-codigo {
          font-family: var(--pp-fuente-mono);
          letter-spacing: 1px;
          text-transform: uppercase;
      }

      .prg-ayuda {
          margin: -4px 2px 0;
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-3);
      }

      .pa-campo .prg-ayuda {
          margin: 0;
      }

      .prg-n {
          font-style: normal;
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .prg-check {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-3);
          cursor: pointer;
      }

      .prg-check input {
          flex-shrink: 0;
          width: 20px;
          height: 20px;
          margin: 1px 0 0;
          accent-color: var(--pp-acento);
      }

      .prg-check b {
          display: block;
          font-size: 14px;
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .prg-dias {
          display: flex;
          gap: 4px;
      }

      .prg-dias button {
          flex: 1;
          height: 36px;
          padding: 0;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 9px;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          cursor: pointer;
      }

      .prg-dias button.activo {
          border-color: transparent;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-weight: var(--pp-fw-fuerte);
      }

      .prg-img {
          display: grid;
          grid-template-columns: 96px minmax(0, 1fr);
          gap: 8px;
      }

      .prg-subir {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          height: 96px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: 12px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .prg-subir.activo {
          border: 2px solid var(--pp-acento);
      }

      .prg-subir .pp-icono {
          width: 20px;
          height: 20px;
      }

      .prg-plants {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
      }

      .prg-plant {
          height: 45px;
          padding: 0;
          border: 2px solid transparent;
          border-radius: 10px;
          color: #fff;
          font-family: var(--pp-fuente);
          font-size: 14px;
          font-weight: 900;
          cursor: pointer;
      }

      .prg-plant.activo {
          border-color: var(--pp-texto);
          box-shadow: 0 0 0 2px var(--pp-superficie) inset;
      }

      .prg-link {
          align-self: flex-start;
          padding: 0;
          border: 0;
          background: none;
          color: var(--pp-acento-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          text-decoration: underline;
          cursor: pointer;
      }

      .prg-prods {
          display: flex;
          flex-direction: column;
          max-height: 260px;
          overflow-y: auto;
          border: 1px solid var(--pp-borde);
          border-radius: 12px;
      }

      .prg-prods>.prg-ayuda {
          margin: 0;
          padding: 10px 12px;
      }

      .prg-prod {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 12px;
          border-bottom: 1px solid var(--pp-borde);
          cursor: pointer;
      }

      .prg-prod:last-child {
          border-bottom: 0;
      }

      .prg-prod input {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          margin: 0;
          accent-color: var(--pp-acento);
      }

      .prg-prod span {
          min-width: 0;
      }

      .prg-prod b {
          display: block;
          overflow: hidden;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          text-overflow: ellipsis;
          color: var(--pp-texto);
      }

      .prg-prod small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      /* 🏷️ [f160] Filtros por stock de la familia, foto y stock en cada fila */
      .prg-filtros {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
      }

      .prg-fil-rot {
          width: 100%;
          font-size: var(--pp-fs-11);
          font-weight: 700;
          color: var(--pp-texto-3);
          text-transform: uppercase;
          letter-spacing: .04em;
      }

      .prg-fil {
          height: 32px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde);
          border-radius: 999px;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font: inherit;
          font-size: var(--pp-fs-13);
          font-weight: 600;
          cursor: pointer;
      }

      .prg-fil.activo {
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .prg-todos {
          margin-left: auto;
          height: 32px;
          padding: 0 4px;
          border: 0;
          background: none;
          font: inherit;
          font-size: var(--pp-fs-13);
          font-weight: 700;
          color: var(--pp-acento-texto);
          text-decoration: underline;
          cursor: pointer;
      }

      .prg-prod .prg-foto {
          flex-shrink: 0;
          display: grid;
          place-items: center;
          width: 44px;
          height: 44px;
          overflow: hidden;
          border-radius: 8px;
          border: 1px solid var(--pp-borde);
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .prg-prod .prg-foto img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .prg-prod .prg-foto svg {
          width: 20px;
          height: 20px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.8;
      }

      .prg-prod .prg-prod-t {
          flex: 1;
          min-width: 0;
      }

      .prg-st {
          flex-shrink: 0;
          font-size: var(--pp-fs-12);
          font-weight: 700;
          color: var(--pp-texto-2);
          font-variant-numeric: tabular-nums;
      }

      .prg-st--poco {
          color: var(--pp-aviso);
      }

      .prg-st--ag {
          color: var(--pp-texto-3);
          font-weight: 600;
      }


      .prg-prev {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 12px;
          border-radius: 14px;
          background: var(--pp-sutil);
      }

      .prg-prev>span {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .prg-prev .prc-pc {
          pointer-events: none;
          box-shadow: none;
      }

      .prg-pie {
          position: sticky;
          bottom: calc(-1 * (var(--pp-esp-5) + env(safe-area-inset-bottom, 0px)));
          margin: 0 calc(-1 * var(--pp-esp-4)) calc(-1 * (var(--pp-esp-5) + env(safe-area-inset-bottom, 0px)));
          padding: 12px var(--pp-esp-4) calc(var(--pp-esp-5) + env(safe-area-inset-bottom, 0px));
          background: var(--pp-superficie);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-btn.prg-btn-borrar {
          flex-shrink: 0;
          width: 52px;
          padding: 0;
          justify-content: center;
      }

      .prg-hoja [hidden] {
          display: none !important;
      }

      body.tema-black .prg-hoja input[type="date"] {
          color-scheme: dark;
      }

      /* ═══════════════════════════════════════════════════════════════
         🏷️ [PROMOS] Caja: promociones aplicadas y cupón
         ═══════════════════════════════════════════════════════════════ */
      .prp-zona {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 8px 0 4px;
      }

      .prp-l {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          padding: 8px 10px;
          border-radius: 10px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .prp-l>span {
          min-width: 0;
      }

      .prp-l small {
          display: block;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          opacity: .85;
      }

      .prp-l--aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .prp-l button,
      .prp-reponer {
          flex-shrink: 0;
          padding: 4px 0;
          border: 0;
          background: none;
          color: inherit;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          text-decoration: underline;
          cursor: pointer;
      }

      .prp-reponer {
          align-self: flex-start;
          color: var(--pp-acento-texto);
      }

      .prp-cupon {
          display: flex;
          gap: 6px;
      }

      .prp-cupon .pp-campo {
          flex: 1;
          min-width: 0;
          height: 40px;
          text-transform: uppercase;
      }

      .prp-cupon .pp-btn {
          height: 40px;
      }

      .prp-nota {
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      /* Configuración → Datos del negocio: horario de atención */
      .cfg-dias {
          display: flex;
          gap: 4px;
      }

      .cfg-dias button {
          flex: 1;
          height: 38px;
          padding: 0;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 9px;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          cursor: pointer;
      }

      .cfg-dias button.activo {
          border-color: transparent;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-weight: var(--pp-fw-fuerte);
      }

      .prp-cupon .pp-campo::placeholder,
      .prc-cup-in input::placeholder {
          text-transform: none;
      }

      /* ═══════════════════════════════════════════════════════════════
         🏷️ [ETIQUETAS] Etiquetas con código de barras (Inventario → Códigos)
         ═══════════════════════════════════════════════════════════════ */
      .etq-hoja .etq-panel {
          max-width: 560px;
      }

      /* El panel hace scroll: ningún bloque se aplasta */
      .etq-hoja .etq-panel>* {
          flex-shrink: 0;
      }

      .etq-hoja [hidden] {
          display: none !important;
      }

      .etq-imp {
          display: flex;
          align-items: center;
          gap: 12px;
          width: 100%;
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .etq-imp>.pp-icono {
          flex-shrink: 0;
          width: 22px;
          height: 22px;
          color: var(--pp-texto-2);
      }

      .etq-imp>span {
          flex: 1;
          min-width: 0;
      }

      .etq-imp b {
          display: block;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      .etq-imp small {
          display: block;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .etq-imp em {
          flex-shrink: 0;
          font-style: normal;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-acento-texto);
      }

      .etq-config {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .etq-perfiles {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 6px;
      }

      .etq-perfiles button {
          min-height: 40px;
          padding: 6px 10px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          text-align: left;
          cursor: pointer;
      }

      .etq-perfiles button.activo {
          border: 2px solid var(--pp-acento);
          padding: 5px 9px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      .etq-fila3 {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
      }

      .etq-tallas {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
      }

      .etq-t {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 64px 96px;
          align-items: center;
          gap: 8px;
          min-height: 46px;
          padding: 4px 12px;
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .etq-t>span:nth-child(2),
      .etq-t>span:nth-child(3) {
          text-align: right;
          font-variant-numeric: tabular-nums;
      }

      .etq-t b {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .etq-t small {
          display: block;
          font-family: var(--pp-fuente-mono);
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .etq-t .pp-campo {
          width: 80px;
          height: 38px;
          margin-left: auto;
          text-align: right;
      }

      .etq-t--cab {
          min-height: 34px;
          background: var(--pp-sutil);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          text-transform: uppercase;
          letter-spacing: .3px;
          color: var(--pp-texto-3);
      }

      .etq-total {
          padding: 10px 12px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .etq-total b {
          color: var(--pp-texto);
      }

      .etq-prev {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 12px;
          padding: 16px 12px;
          overflow-x: auto;
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .etq-prev-e {
          flex-shrink: 0;
          line-height: 0;
          border-radius: 3px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
          overflow: hidden;
      }

      .etq-n {
          font-style: normal;
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .etq-ayuda {
          margin: 0;
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-3);
      }

      .etq-nota,
      .etq-aviso,
      .etq-of-txt {
          display: flex;
          gap: 8px;
          margin: 0;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto);
      }

      .etq-aviso {
          background: var(--pp-aviso-suave);
      }

      .etq-nota .pp-icono,
      .etq-aviso .pp-icono,
      .etq-of-txt .pp-icono {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          margin-top: 1px;
          color: var(--pp-acento-texto);
      }

      .etq-aviso .pp-icono {
          color: var(--pp-aviso);
      }

      .etq-help {
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .etq-help summary {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          cursor: pointer;
      }

      .etq-help ol {
          margin: 8px 0 0;
          padding-left: 20px;
          line-height: 1.5;
      }

      .etq-help li+li {
          margin-top: 4px;
      }

      .etq-pie {
          position: sticky;
          bottom: calc(-1 * (var(--pp-esp-5) + env(safe-area-inset-bottom, 0px)));
          margin: 0 calc(-1 * var(--pp-esp-4)) calc(-1 * (var(--pp-esp-5) + env(safe-area-inset-bottom, 0px)));
          padding: 12px var(--pp-esp-4) calc(var(--pp-esp-5) + env(safe-area-inset-bottom, 0px));
          background: var(--pp-superficie);
          border-top: 1px solid var(--pp-borde);
      }

      .etq-oferta .pp-modal-panel {
          max-width: 420px;
      }

      @media (max-width: 380px) {
          .etq-perfiles {
              grid-template-columns: minmax(0, 1fr);
          }

          .etq-t {
              grid-template-columns: minmax(0, 1fr) 48px 88px;
          }
      }

      /* ═══════════════════════════════════════════════════════════════
         🔐 [GOOGLE] Acceso Equipo: Dueño (Google) / Equipo (nombre + PIN)
         ═══════════════════════════════════════════════════════════════ */
      #modalClave .acc-tabs {
          margin: 6px 0 20px;
      }

      #modalClave .acc-dueno,
      #modalClave .acc-campos,
      #modalClave .acc-volver-google {
          display: none;
      }

      #modalClave:not([data-modo]) .acc-dueno,
      #modalClave[data-modo="dueno"] .acc-dueno,
      #modalClave[data-modo="dueno-clave"] .acc-campos,
      #modalClave[data-modo="equipo"] .acc-campos,
      #modalClave[data-modo="dueno-clave"] .acc-volver-google {
          display: block;
      }

      #modalClave[data-modo="dueno-clave"] .acc-nombre {
          display: none;
      }

      .acc-google {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          width: 100%;
          min-height: 54px;
          padding: 0 18px;
          border: 1px solid #DADCE0;
          border-radius: 16px;
          background: #FFFFFF;
          color: #1F1F1F;
          font-family: inherit;
          font-size: 15px;
          font-weight: 700;
          cursor: pointer;
          transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
      }

      .acc-google:hover {
          background: #F8F9FA;
          box-shadow: 0 1px 3px rgba(60, 64, 67, .25);
      }

      .acc-google:active {
          transform: scale(.98);
      }

      .acc-google:focus-visible,
      .acc-enlace:focus-visible {
          outline: none;
          box-shadow: 0 0 0 4px var(--turquesa-light);
      }

      .acc-g {
          width: 20px;
          height: 20px;
          flex-shrink: 0;
      }

      .acc-enlace {
          display: block;
          width: 100%;
          margin-top: 16px;
          padding: 6px;
          border: none;
          background: none;
          color: var(--texto-medio);
          font-family: inherit;
          font-size: 12.5px;
          font-weight: 600;
          text-decoration: underline;
          text-underline-offset: 3px;
          cursor: pointer;
      }

      .acc-nombre {
          width: 100%;
          box-sizing: border-box;
          margin-bottom: 10px;
          padding: 14px 16px;
          border: 2px solid var(--borde);
          border-radius: 16px;
          background: var(--bg-subtle);
          color: var(--texto-oscuro);
          font-size: 16px;
          font-weight: 700;
          text-align: center;
          text-transform: uppercase;
          transition: border-color .2s ease, box-shadow .2s ease;
      }

      .acc-nombre:focus {
          outline: none;
          border-color: var(--turquesa);
          box-shadow: 0 0 0 4px var(--turquesa-light);
      }

      .acc-nombre::placeholder {
          text-transform: none;
          font-weight: 600;
      }

      /* Hojas del ingreso con Google: por encima del Acceso Equipo y de "Acceso no válido" */
      .pg-hoja {
          z-index: 10000001;
      }

      .pg-hoja .pp-modal-panel {
          max-width: 440px;
      }

      .pg-txt {
          margin: 0 0 10px;
          font-size: var(--pp-fs-15);
          line-height: 1.5;
          color: var(--pp-texto);
      }

      .pg-lista {
          margin: 0 0 6px;
          padding-left: 18px;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pg-lista li+li {
          margin-top: 6px;
      }

      .pg-invita-ico {
          display: flex;
          justify-content: center;
          margin: 4px 0 12px;
      }

      .pg-invita-ico .acc-g {
          width: 36px;
          height: 36px;
      }

      .pg-btns {
          flex-wrap: wrap;
      }

      .pg-btns>.pp-btn {
          flex: 1 1 140px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
      }

      /* Configuración → Seguridad */
      .pg-cfg {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 10px;
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .pg-cfg--ok {
          background: var(--pp-acento-suave);
      }

      .pg-cfg .acc-g {
          width: 22px;
          height: 22px;
          margin-top: 1px;
      }

      .pg-cfg b {
          display: block;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pg-cfg span {
          display: block;
          margin-top: 2px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          word-break: break-word;
      }

      .pg-btn-vincular {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin-bottom: 14px;
      }

      #cfg-clave-wrap[hidden],
      #pg-reset-nota[hidden],
      .pp-cfg-cuerpo [hidden],
      #modal-reset-nuclear [hidden] {
          display: none !important;
      }

      /* 🔐 [QUITAR-CLAVE] Botón para quedarse solo con Google */
      .pg-btn-quitar {
          margin: 4px 0 14px;
          color: var(--pp-negativo);
      }

      /* ═══════════════════════════════════════════════════════════════
         💳 [SUSCRIPCIÓN · PILAS PRO] Mi suscripción
         ═══════════════════════════════════════════════════════════════ */
      .sus-hoja {
          z-index: 10000;
      }

      .sus-panel>* {
          flex-shrink: 0;
      }

      .sus-plan {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 16px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .sus-plan--pro {
          background: var(--pp-acento-suave);
      }

      .sus-plan-fila {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
      }

      .sus-precio b {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          letter-spacing: -.5px;
      }

      .sus-precio span {
          margin-left: 4px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .sus-barra {
          height: 6px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-borde);
          overflow: hidden;
      }

      .sus-barra span {
          display: block;
          height: 100%;
          border-radius: inherit;
          background: var(--pp-acento);
      }

      .sus-barra--aviso span {
          background: var(--pp-aviso);
      }

      .sus-barra--vencido span {
          background: var(--pp-negativo);
      }

      .sus-vence {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .sus-vence b {
          color: var(--pp-texto);
      }

      .sus-aviso {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-aviso-suave);
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto);
      }

      .sus-aviso .pp-icono {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          margin-top: 1px;
          color: var(--pp-aviso);
      }

      .sus-pagar,
      .sus-ayuda {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          text-decoration: none;
      }

      .sus-pagar .pp-icono,
      .sus-ayuda .pp-icono {
          width: 18px;
          height: 18px;
      }

      .sus-nota {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin: -4px 0 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .sus-nota .pp-icono {
          width: 13px;
          height: 13px;
      }

      .sus-bloque {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .sus-sub {
          margin: 4px 0 0;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .sus-beneficios {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 6px 12px;
          margin: 0;
          padding: 0;
          list-style: none;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .sus-beneficios li {
          display: flex;
          align-items: flex-start;
          gap: 6px;
          line-height: 1.35;
      }

      .sus-beneficios .pp-icono {
          flex-shrink: 0;
          width: 15px;
          height: 15px;
          margin-top: 1px;
          color: var(--pp-acento);
      }

      .sus-pago {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
      }

      .sus-pago b,
      .sus-pago span {
          display: block;
      }

      .sus-pago b {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .sus-pago div span {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .sus-pago-monto {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .sus-vacio {
          margin: 0;
          padding: 12px;
          border: 1px dashed var(--pp-borde);
          border-radius: var(--pp-radio-l);
          font-size: var(--pp-fs-13);
          text-align: center;
          color: var(--pp-texto-3);
      }

      /* ⭐ [f199] Lo que tienes hoy, por temas plegables */
      .sus-temas {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .sus-tema {
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          overflow: hidden;
      }

      .sus-tema>summary {
          list-style: none;
          display: flex;
          align-items: center;
          gap: 10px;
          min-height: 48px;
          padding: 8px 12px;
          cursor: pointer;
          font-size: var(--pp-fs-14, 14px);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .sus-tema>summary::-webkit-details-marker {
          display: none;
      }

      .sus-tema>summary>.pp-icono:first-child {
          flex-shrink: 0;
          width: 30px;
          height: 30px;
          padding: 7px;
          box-sizing: border-box;
          border-radius: 8px;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .sus-tema>summary span {
          flex: 1;
          min-width: 0;
      }

      .sus-tema>summary small {
          flex-shrink: 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          font-variant-numeric: tabular-nums;
      }

      .sus-tema>summary>.pp-icono:last-child {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          color: var(--pp-texto-3);
          transition: transform .2s;
      }

      .sus-tema[open]>summary>.pp-icono:last-child {
          transform: rotate(180deg);
      }

      .sus-tema .sus-mi {
          border: 0;
          border-top: 1px solid var(--pp-borde);
          border-radius: 0;
      }

      /* 💳 [MI PLAN] Lo que tienes hoy / Se desbloquea con PRO */
      .sus-mi-base {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .sus-mi {
          margin: 0;
          padding: 0;
          list-style: none;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          overflow: hidden;
      }

      .sus-mi-fila {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          font-size: var(--pp-fs-13);
          line-height: 1.35;
          color: var(--pp-texto);
      }

      .sus-mi-fila+.sus-mi-fila {
          border-top: 1px solid var(--pp-borde);
      }

      .sus-mi-fila .pp-icono {
          flex-shrink: 0;
          width: 15px;
          height: 15px;
          color: var(--pp-acento);
      }

      .sus-mi-fila span {
          flex: 1;
          min-width: 0;
      }

      .sus-mi-fila b {
          flex-shrink: 0;
          max-width: 48%;
          text-align: right;
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .sus-mi-fila--bloq {
          color: var(--pp-texto-2);
      }

      .sus-mi-fila--bloq .pp-icono {
          color: var(--pp-texto-3);
      }

      .sus-mi-fila--bloq b {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-acento);
      }

      @media (max-width: 360px) {
          .sus-beneficios {
              grid-template-columns: minmax(0, 1fr);
          }
      }

      /* ═══════════════════════════════════════════════════════════════
         🧾 [CUADRE] E.R. ↔ Balance
         ═══════════════════════════════════════════════════════════════ */
      #er-periodo>button {
          padding: 0 6px;
          white-space: nowrap;
      }

      .pp-er-cuadre .pp-er-fila .pp-er-pct {
          min-width: 0;
          padding: 0;
      }

      .pp-er-cuadre .pp-er-nota {
          margin: var(--pp-esp-2) 0 0;
          line-height: 1.45;
      }

      .pp-gas-otro-imp {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .pp-gas-otro-imp input {
          width: 18px;
          height: 18px;
          margin: 0;
          accent-color: var(--pp-acento);
      }

      /* ═══════════════════════════════════════════════════════════════════
         💈 [AGENDA · FASE 0] Agenda de servicios (agenda.js)
         Módulo del dueño, hojas de edición, catálogo (cara A) y Mostrador.
         ═══════════════════════════════════════════════════════════════════ */
      .ag {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-3) var(--pp-esp-4) var(--pp-esp-5);
          max-width: 720px;
          margin: 0 auto;
          box-sizing: border-box;
          font-family: var(--pp-fuente);
          color: var(--pp-texto);
      }

      .ag-cargando,
      .ag-vacio p {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          line-height: 1.5;
          margin: 0;
      }

      .ag-cargando {
          padding: 32px 0;
          text-align: center;
      }

      .ag-vacio-tit,
      .ag-tarjeta-tit,
      .ag-bloque-tit {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .ag-vacio-tit {
          margin-bottom: 6px;
      }

      .ag-intro {
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      .ag-titulo {
          margin: 0;
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.01em;
      }

      .ag-sec {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .ag-tarjeta {
          gap: var(--pp-esp-3);
      }

      .ag-sec-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          min-height: 36px;
      }

      .ag-mini {
          height: 36px;
          padding: 0 10px;
          font-size: var(--pp-fs-13);
      }

      .ag-mini.pp-btn--fantasma {
          color: var(--pp-acento-texto);
      }

      .ag-nota {
          margin: 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          text-align: center;
      }

      .ag-panel {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .ag-nota--izq {
          text-align: left;
      }

      .ag-tabs {
          position: sticky;
          top: 0;
          z-index: 2;
      }

      .ag-grupo {
          margin-top: var(--pp-esp-2);
      }

      .ag-ayuda-arriba {
          margin: -2px 0 0;
      }

      /* Filas de lista (servicios, equipo) */
      .ag-fila {
          width: 100%;
          background: transparent;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
          font-family: inherit;
          text-align: left;
          cursor: pointer;
      }

      .ag-fila:hover {
          background: var(--pp-sutil);
      }

      .ag-fila-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .ag-fila-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .ag-fila-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .ag-fila-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          margin-top: 2px;
      }

      .ag-chev {
          flex-shrink: 0;
          color: var(--pp-texto-3);
      }

      .ag-avatar {
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          border-radius: 999px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      /* Plantilla de rubro */
      .ag-rubros {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
      }

      .ag-rubro {
          min-height: 64px;
          padding: 8px 6px;
          border: 1px solid var(--pp-borde);
          border-radius: 12px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          line-height: 1.3;
          cursor: pointer;
      }

      .ag-rubro.activo {
          border: 2px solid var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .ag-campo {
          display: flex;
          flex-direction: column;
          gap: 6px;
          min-width: 0;
      }

      .ag-campo-corto {
          width: 120px;
          flex-shrink: 0;
      }

      .ag-textarea {
          height: auto;
          min-height: 64px;
          padding-top: 10px;
          padding-bottom: 10px;
          resize: vertical;
          line-height: 1.4;
      }

      .ag-check {
          display: flex;
          align-items: center;
          gap: 10px;
          min-height: 40px;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
          cursor: pointer;
      }

      .ag-check input {
          width: 18px;
          height: 18px;
          margin: 0;
          flex-shrink: 0;
          accent-color: var(--pp-acento);
      }

      .ag-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .ag-chip-x,
      .ag-chip-sel,
      .ag-chip-mas {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          min-height: 36px;
          padding: 0 12px;
          border-radius: 999px;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          box-sizing: border-box;
      }

      .ag-chip-x {
          padding-right: 4px;
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .ag-chip-x button {
          width: 28px;
          height: 28px;
          padding: 0;
          border: 0;
          border-radius: 999px;
          background: transparent;
          color: var(--pp-texto-2);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
      }

      .ag-chip-x .pp-icono {
          width: 14px;
          height: 14px;
      }

      .ag-chip-mas {
          border: 1px dashed var(--pp-borde-fuerte);
          background: transparent;
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .ag-chip-sel {
          border: 1px solid var(--pp-borde-fuerte);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          cursor: pointer;
      }

      .ag-chip-sel.activo {
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-weight: var(--pp-fw-medio);
      }

      .ag-chip-nuevo {
          display: inline-flex;
          gap: 6px;
          align-items: center;
      }

      .ag-chip-nuevo .pp-campo {
          width: 160px;
          height: 36px;
      }

      .ag-pie {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: var(--pp-esp-2);
      }

      /* Hojas de edición */
      .ag-modal .pp-modal-panel {
          gap: var(--pp-esp-4);
      }

      .ag-hoja-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .ag-bloque {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-top: var(--pp-esp-3);
          border-top: 1px solid var(--pp-borde);
      }

      .ag-sub-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .ag-link {
          align-self: flex-start;
          min-height: 36px;
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--pp-acento-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          cursor: pointer;
      }

      .ag-fila-campo {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          font-size: var(--pp-fs-15);
      }

      .ag-seg-corto {
          flex-shrink: 0;
          width: 150px;
      }

      .ag-sangria {
          padding-left: 28px;
      }

      .ag-quitar {
          width: 36px;
          height: 36px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-3);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
      }

      .ag-quitar:hover {
          background: var(--pp-sutil);
          color: var(--pp-negativo);
      }

      /* Opciones del servicio: nombre · duración · precio · quitar */
      .ag-var {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 96px 92px 36px;
          gap: 6px;
          align-items: center;
      }

      .ag-var .pp-campo {
          padding: 0 8px;
      }

      .ag-var-cab {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .ag-var-precio {
          position: relative;
          display: block;
      }

      .ag-var-precio>span {
          position: absolute;
          left: 8px;
          top: 50%;
          transform: translateY(-50%);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      .ag-var-precio .pp-campo {
          padding-left: 20px;
          text-align: right;
      }

      .ag-preg {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 112px 36px;
          gap: 6px;
          align-items: center;
          padding-bottom: 6px;
          border-bottom: 1px dashed var(--pp-borde);
      }

      .ag-preg-ops,
      .ag-preg-obl {
          grid-column: 1 / -1;
      }

      .ag-preg-obl {
          min-height: 32px;
          font-size: var(--pp-fs-13);
      }

      /* Horario por día */
      .ag-dias {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .ag-dia {
          display: grid;
          grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
          gap: 8px;
          align-items: center;
      }

      .ag-dia .pp-campo {
          padding: 0 8px;
      }

      .ag-dia--off .ag-check span {
          color: var(--pp-texto-3);
      }

      /* Elegir opción (catálogo y Mostrador) */
      .ag-opciones {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .ag-opcion {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          min-height: 48px;
          padding: 8px 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 12px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          text-align: left;
          cursor: pointer;
      }

      .ag-opcion.activo {
          border: 2px solid var(--pp-acento);
          background: var(--pp-acento-suave);
      }

      .ag-opcion-der {
          flex-shrink: 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          font-variant-numeric: tabular-nums;
      }

      .ag-total {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-15);
      }

      .ag-total b {
          font-size: var(--pp-fs-17);
          font-variant-numeric: tabular-nums;
      }

      .ag-btn-wa .pp-icono,
      .ag-cat-btn .pp-icono {
          width: 18px;
          height: 18px;
      }

      /* Mostrador: sugerencias de servicios bajo el buscador de código */
      .ag-pos-sug {
          display: flex;
          flex-direction: column;
          margin-top: 8px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          overflow: hidden;
      }

      .ag-pos-op {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          min-height: 52px;
          padding: 8px 12px;
          border: 0;
          border-top: 1px solid var(--pp-borde);
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          text-align: left;
          cursor: pointer;
      }

      .ag-pos-op:first-child {
          border-top: 0;
      }

      .ag-pos-op:hover {
          background: var(--pp-sutil);
      }

      .ag-pos-op-txt {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      /* Catálogo digital (cara A): servicios arriba de los productos */
      .ag-cat {
          padding: 10px 10px 0;
          box-sizing: border-box;
          font-family: inherit;
      }

      .ag-cat-titulo {
          margin: 6px 0 8px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .ag-cat-titulo--prod {
          padding: 10px 10px 0;
          margin-bottom: 0;
      }

      .ag-cat-lista {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
      }

      @media (min-width: 600px) {
          .ag-cat-lista {
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          }
      }

      .ag-cat-srv {
          display: flex;
          gap: 12px;
          padding: 12px;
          background: #FFFFFF;
          border: 1px solid #E4E4E7;
          border-radius: 14px;
          color: #18181B;
      }

      .ag-cat-ico {
          flex-shrink: 0;
          width: 52px;
          height: 52px;
          border-radius: 12px;
          background: #F4F4F5;
          color: #71717A;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .ag-cat-cuerpo {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 3px;
      }

      .ag-cat-nombre {
          font-size: 15px;
          font-weight: 600;
      }

      .ag-cat-detalle,
      .ag-cat-desc {
          font-size: 12px;
          color: #52525B;
          line-height: 1.4;
      }

      .ag-cat-modos {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 2px;
      }

      .ag-cat-modos span {
          padding: 2px 8px;
          border-radius: 999px;
          background: #F4F4F5;
          font-size: 11px;
          color: #52525B;
      }

      .ag-cat-pie {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin-top: 6px;
      }

      .ag-cat-precio {
          font-size: 15px;
          font-weight: 600;
          font-variant-numeric: tabular-nums;
      }

      .ag-cat-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          height: 38px;
          padding: 0 14px;
          border: 0;
          border-radius: 10px;
          background: #047857;
          color: #FFFFFF;
          font-family: inherit;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
      }

      .ag-cat-btn:hover {
          background: #065F46;
      }

      @media (max-width: 380px) {
          .ag-var {
              grid-template-columns: minmax(0, 1fr) 84px 80px 32px;
          }

          .ag-rubros {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         💈 [AGENDA · FASE 1] Calendario (agenda-calendario.js)
         Día por persona, Mes con ocupación, Fila sin cita, hoja de la cita e Inicio.
         ═══════════════════════════════════════════════════════════════════ */
      .ag-volver {
          margin-bottom: -4px;
      }

      .agc-cab {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .agc-vistas {
          flex: 1;
      }

      .agc-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 18px;
          height: 18px;
          margin-left: 4px;
          padding: 0 5px;
          border-radius: 999px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          box-sizing: border-box;
      }

      .agc-nav {
          display: flex;
          align-items: center;
          gap: 4px;
      }

      .agc-titulo {
          flex: 1;
          min-width: 0;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .agc-hoy {
          min-height: 28px;
          margin-left: 6px;
          font-size: var(--pp-fs-13);
      }

      .agc-nueva {
          height: 40px;
          padding: 0 12px;
          font-size: var(--pp-fs-13);
          gap: 4px;
      }

      .agc-nueva .pp-icono {
          width: 18px;
          height: 18px;
      }

      #agc-cuerpo {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .agc-vacio {
          margin: 0;
      }

      /* Tira "2 esperando · siguiente ≈ 15:25 con Luis" */
      .agc-tira {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 100%;
          min-height: 44px;
          padding: 8px 12px;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          text-align: left;
          cursor: pointer;
          box-sizing: border-box;
      }

      .agc-tira>span {
          flex: 1;
          min-width: 0;
      }

      .agc-tira .pp-icono {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
      }

      /* Vista Día: columnas por persona */
      .agc-scroll {
          overflow: auto;
          max-height: max(360px, calc(100dvh - 300px));
          overscroll-behavior: contain;
          margin: 0 calc(var(--pp-esp-4) * -1);
          padding: 0 var(--pp-esp-4);
          -webkit-overflow-scrolling: touch;
      }

      .agc-tabla {
          min-width: calc(44px + var(--cols) * 116px);
      }

      .agc-cabs {
          display: grid;
          grid-template-columns: 44px repeat(var(--cols), minmax(116px, 1fr));
          position: sticky;
          top: 0;
          z-index: 3;
          background: var(--pp-fondo);
      }

      .agc-cab-col {
          padding: 6px 4px 8px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          border-bottom: 1px solid var(--pp-borde);
      }

      .agc-cuerpo-grid {
          position: relative;
          display: grid;
          grid-template-columns: 44px 1fr;
      }

      .agc-horas {
          position: relative;
      }

      .agc-horas span {
          position: absolute;
          right: 6px;
          transform: translateY(-50%);
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          font-variant-numeric: tabular-nums;
      }

      .agc-horas span:first-child {
          transform: none;
      }

      .agc-cols {
          position: relative;
          display: grid;
          grid-template-columns: repeat(var(--cols), minmax(116px, 1fr));
          background-image:
              linear-gradient(to bottom, var(--pp-borde) 1px, transparent 1px),
              linear-gradient(to bottom, var(--pp-sutil) 1px, transparent 1px);
          background-size: 100% var(--hora), 100% calc(var(--hora) / 2);
      }

      .agc-col {
          position: relative;
          border-left: 1px solid var(--pp-borde);
          cursor: copy;
      }

      .agc-fuera {
          position: absolute;
          left: 0;
          right: 0;
          background: repeating-linear-gradient(135deg, var(--pp-sutil) 0 6px, transparent 6px 12px);
          pointer-events: none;
      }

      .agc-libre {
          position: absolute;
          left: 4px;
          right: 4px;
          border-radius: 0 0 6px 6px;
          background: repeating-linear-gradient(135deg, var(--pp-sutil) 0 4px, transparent 4px 8px);
          border: 1px dashed var(--pp-borde-fuerte);
          border-top: 0;
          box-sizing: border-box;
          pointer-events: none;
      }

      .agc-cita {
          position: absolute;
          left: 4px;
          right: 4px;
          z-index: 1;
          display: flex;
          flex-direction: column;
          gap: 1px;
          padding: 4px 6px;
          overflow: hidden;
          border: 1px solid var(--pp-acento);
          border-left-width: 3px;
          border-radius: 8px;
          background: var(--pp-acento-suave);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
          box-sizing: border-box;
      }

      .agc-cita-l1 {
          font-size: var(--pp-fs-12);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .agc-cita-l2 {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-2);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .agc-cita--LLEGO {
          border-color: var(--pp-aviso);
          background: var(--pp-aviso-suave);
      }

      .agc-cita--EN_CURSO {
          background: var(--pp-acento);
          border-color: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      .agc-cita.agc-cita--EN_CURSO,
      .agc-cita.agc-cita--EN_CURSO * {
          color: var(--pp-sobre-acento) !important;
      }

      .agc-cita--EN_CURSO .agc-cita-l2 {
          opacity: .85;
      }

      /* Citas cortas (30 min o menos): todo en una línea */
      .agc-cita--corta {
          flex-direction: row;
          align-items: center;
          gap: 4px;
          padding-top: 2px;
          padding-bottom: 2px;
      }

      .agc-cita--corta .agc-cita-l1 {
          flex-shrink: 0;
          max-width: 60%;
      }

      .agc-cita--corta .agc-cita-l2 {
          min-width: 0;
      }

      .agc-cita--TERMINADA {
          border-color: var(--pp-borde-fuerte);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .agc-cita--cobrada {
          opacity: .7;
      }

      .agc-ahora {
          position: absolute;
          left: 0;
          right: 0;
          z-index: 2;
          height: 0;
          border-top: 2px solid var(--pp-negativo);
          pointer-events: none;
      }

      .agc-ahora span {
          position: absolute;
          left: -44px;
          top: -9px;
          width: 40px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-negativo);
          text-align: right;
      }

      .agc-canceladas summary {
          min-height: 40px;
          display: flex;
          align-items: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      /* Estado (chip) */
      .agc-est {
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          padding: 2px 8px;
          border-radius: 999px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .agc-est--LLEGO,
      .agc-est--ESPERANDO {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .agc-est--EN_CURSO {
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      .agc-est--TERMINADA,
      .agc-est--NO_VINO,
      .agc-est--CANCELADA {
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
      }

      .agc-hora-l {
          flex-shrink: 0;
          width: 44px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          font-variant-numeric: tabular-nums;
      }

      /* Vista Mes */
      .agc-mes {
          display: grid;
          grid-template-columns: repeat(7, minmax(0, 1fr));
          gap: 4px;
      }

      .agc-mes-sem {
          padding-bottom: 2px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .agc-dia {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;
          min-height: 58px;
          padding: 6px 2px 5px;
          border: 1px solid var(--pp-borde);
          border-radius: 10px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          cursor: pointer;
          box-sizing: border-box;
      }

      .agc-dia--vacio {
          border: 0;
          background: transparent;
          cursor: default;
      }

      .agc-dia--cerrado {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .agc-dia--hoy .agc-dia-n {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          border-radius: 999px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      .agc-dia.activo {
          border: 2px solid var(--pp-acento);
      }

      .agc-dia-n {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          line-height: 24px;
      }

      .agc-dia-c {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-2);
      }

      .agc-dia-barra {
          width: 80%;
          height: 4px;
          border-radius: 999px;
          background: var(--pp-sutil);
          overflow: hidden;
      }

      .agc-dia-barra i {
          display: block;
          height: 100%;
          border-radius: 999px;
          background: var(--pp-acento);
      }

      .agc-mes-det {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .agc-mes-det-cab,
      .agc-ini-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
      }

      /* Fila */
      .agc-sig {
          display: flex;
          flex-direction: column;
          gap: 6px;
          border-color: var(--pp-acento);
      }

      .agc-sig-nom {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
      }

      .agc-sig-est {
          display: flex;
          align-items: center;
          gap: 6px;
          margin: 4px 0 6px;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-acento-texto);
      }

      .agc-sig-est .pp-icono {
          width: 18px;
          height: 18px;
      }

      .agc-pos {
          flex-shrink: 0;
          width: 28px;
          height: 28px;
          border-radius: 999px;
          background: var(--pp-sutil);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .agc-aprende p {
          margin: 6px 0 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          line-height: 1.45;
      }

      .agc-aprende .pp-icono {
          width: 18px;
          height: 18px;
          color: var(--pp-acento-texto);
      }

      /* Hoja de la cita */
      .agc-dl {
          display: grid;
          grid-template-columns: 96px minmax(0, 1fr);
          gap: 8px 12px;
          margin: 0;
          font-size: var(--pp-fs-13);
      }

      .agc-dl dt {
          color: var(--pp-texto-3);
      }

      .agc-dl dd {
          margin: 0;
          color: var(--pp-texto);
          overflow-wrap: anywhere;
      }

      .agc-sec-btns {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .agc-sec-btns .pp-btn {
          flex: 1 1 140px;
          height: 40px;
          font-size: var(--pp-fs-13);
      }

      .agc-sec-btns .pp-icono {
          width: 16px;
          height: 16px;
      }

      .agc-fin {
          margin-top: -6px;
      }

      .agc-choque {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          font-size: var(--pp-fs-13);
          line-height: 1.4;
      }

      .agc-choque b {
          color: var(--pp-texto);
      }

      /* Inicio */
      #ag-inicio .agc-ini {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      /* ═══════════════════════════════════════════════════════════════════
         💈 [AGENDA · FASE 2] Reservas por internet (agenda-reservas.js) y "Por aprobar"
         ═══════════════════════════════════════════════════════════════════ */
      .agc-cita--POR_APROBAR {
          border-style: dashed;
          border-color: var(--pp-aviso);
          background: var(--pp-aviso-suave);
      }

      .agc-est--POR_APROBAR {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .agc-tira--aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      /* Catálogo: título "Servicios" con "Mis reservas" */
      .ag-cat-titulo {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
      }

      .ag-cat-mias {
          min-height: 32px;
          padding: 0 4px;
          border: 0;
          background: transparent;
          color: #047857;
          font-family: inherit;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0;
          text-transform: none;
          cursor: pointer;
      }

      /* Paso 1: días y horas */
      .agc-choque[hidden] {
          display: none;
      }

      .agr-dias {
          flex-shrink: 0;
          display: flex;
          gap: 8px;
          overflow-x: auto;
          padding-bottom: 4px;
          margin: 0 calc(var(--pp-esp-4) * -1);
          padding-left: var(--pp-esp-4);
          padding-right: var(--pp-esp-4);
          scrollbar-width: none;
      }

      .agr-dia {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1px;
          width: 56px;
          min-height: 64px;
          padding: 6px 0;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 12px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-11);
          cursor: pointer;
          box-sizing: border-box;
      }

      .agr-dia b {
          font-size: var(--pp-fs-17);
      }

      .agr-dia.activo {
          border: 2px solid var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .agr-dia:disabled {
          opacity: .45;
          cursor: not-allowed;
      }

      .agr-dia--mas {
          justify-content: center;
          border-style: dashed;
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-12);
      }

      .agr-horas {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 8px;
      }

      .agr-hora {
          height: 42px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: 10px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-variant-numeric: tabular-nums;
          cursor: pointer;
      }

      .agr-hora.activo {
          border: 2px solid var(--pp-acento);
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
          font-weight: var(--pp-fw-fuerte);
      }

      /* Paso 2: resumen y datos */
      .agr-resumen {
          display: flex;
          gap: 12px;
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: 14px;
          background: var(--pp-superficie);
      }

      .agr-badge {
          flex-shrink: 0;
          width: 44px;
          height: 48px;
          border-radius: 10px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          line-height: 1.1;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
      }

      .agr-badge b {
          font-size: var(--pp-fs-17);
      }

      .agr-badge--chico {
          width: 40px;
          height: 44px;
      }

      .agr-precio {
          margin-top: 2px;
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .agr-preguntas {
          margin: 0;
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: 14px;
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .agr-preguntas legend {
          padding: 0 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .agr-acepto {
          align-items: flex-start;
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .agr-acepto input {
          margin-top: 1px;
      }

      .agr-trampa {
          position: absolute !important;
          left: -9999px !important;
          width: 1px !important;
          height: 1px !important;
          opacity: 0 !important;
      }

      /* Paso 3 y "Mi reserva" */
      .agr-listo {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          padding-top: 8px;
          text-align: center;
      }

      .agr-listo p {
          margin: 0;
          max-width: 320px;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .agr-listo-ico {
          width: 60px;
          height: 60px;
          border-radius: 999px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .agr-listo-ico .pp-icono {
          width: 28px;
          height: 28px;
      }

      .agr-listo-ico--aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .agr-card {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 14px;
          border: 1px solid var(--pp-borde);
          border-radius: 14px;
          background: var(--pp-superficie);
      }

      .agr-card-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
      }

      .agr-est {
          flex-shrink: 0;
          padding: 3px 8px;
          border-radius: 999px;
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
      }

      .agr-est--ok {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .agr-est--aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .agr-est--mal {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      a.pp-btn,
      a.pp-btn:hover {
          text-decoration: none;
      }

      .ag-pie .pp-btn .pp-icono {
          width: 18px;
          height: 18px;
      }

      /* ════════ ⏳ [AGENDA · PASADO] Horas que ya pasaron (vista Día) ════════ */
      .agc-pasado {
          position: absolute;
          left: 0;
          right: 0;
          background: rgba(100, 110, 120, .10);
          background: color-mix(in srgb, var(--pp-texto) 7%, transparent);
          pointer-events: none;
      }

      /* ════════ 🧾 [IVA-CRUCE] Espejo Fiscal: cómo se cruzó tu IVA ════════ */
      #mod-sri-fiscal .sri-cruce {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-top: 8px;
      }

      #mod-sri-fiscal .sri-cruce-mes,
      #mod-sri-fiscal .sri-cruce-resumen {
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
      }

      #mod-sri-fiscal .sri-cruce-resumen {
          background: var(--pp-sutil);
      }

      #mod-sri-fiscal .sri-cruce-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 6px;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      #mod-sri-fiscal .sri-cruce-fila {
          display: flex;
          justify-content: space-between;
          gap: 12px;
          padding: 3px 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      #mod-sri-fiscal .sri-cruce-fila b {
          color: var(--pp-texto);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
      }

      #mod-sri-fiscal .sri-cruce-total {
          margin-top: 4px;
          padding-top: 6px;
          border-top: 1px solid var(--pp-borde);
          color: var(--pp-texto);
          font-weight: var(--pp-fw-medio);
      }

      #mod-sri-fiscal .sri-cruce-total b {
          font-weight: var(--pp-fw-fuerte);
      }

      #mod-sri-fiscal .sri-cruce-neg b {
          color: var(--pp-negativo);
      }

      /* ════════ 👥 [EQUIPO] Tu equipo (Vendedores) ════════ */
      .eq-resumen {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          flex-wrap: wrap;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .eq-lista .eq-fila,
      .eq-acciones .eq-accion {
          width: 100%;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
          background: transparent;
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .eq-lista .eq-fila:first-child,
      .eq-acciones .eq-accion:first-child {
          border-top: 0;
      }

      .eq-lista .eq-fila:hover,
      .eq-acciones .eq-accion:hover {
          background: var(--pp-sutil);
      }

      .eq-ini {
          width: 40px;
          height: 40px;
          font-size: var(--pp-fs-13);
      }

      .eq-fila--pausa .eq-ini {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .eq-fila-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .eq-fila-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .eq-fila-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .eq-fila-der {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 3px;
          flex-shrink: 0;
          min-width: 86px;
      }

      .eq-fila-monto {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .eq-fila-meta {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .eq-barra {
          display: block;
          width: 80px;
          height: 4px;
      }

      .eq-barra .pp-barra-relleno {
          display: block;
      }

      .eq-chev {
          flex-shrink: 0;
          color: var(--pp-texto-3);
          display: flex;
      }

      .eq-chev .pp-icono {
          width: 16px;
          height: 16px;
      }

      .eq-vacio {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: var(--pp-esp-2);
          padding: var(--pp-esp-4);
      }

      .eq-vacio p {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .eq-vacio-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      /* Anulaciones por aprobar */
      .eq-anul {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          border-color: var(--pp-aviso);
          background: var(--pp-aviso-suave);
      }

      .eq-anul-cab {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .eq-anul-fila {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-top: var(--pp-esp-3);
          border-top: 1px solid var(--pp-borde);
      }

      .eq-anul-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .eq-anul-sub,
      .eq-anul-motivo {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .eq-anul-motivo {
          font-style: italic;
      }

      .eq-anul-btns {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--pp-esp-2);
      }

      /* Hoja: ficha, editor, PIN, pago */
      .eq-modal .pp-modal-cab {
          align-items: flex-start;
      }

      .eq-cab-izq {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          min-width: 0;
      }

      .eq-cab-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .eq-bloque {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .eq-bloque-tit {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-medio);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .eq-hoy {
          display: flex;
          align-items: baseline;
          gap: 10px;
          flex-wrap: wrap;
      }

      .eq-hoy-monto {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          line-height: 1.1;
      }

      .eq-hoy-sub {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .eq-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 14px;
      }

      .eq-dato {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .eq-dato b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .eq-com {
          display: flex;
          flex-direction: column;
      }

      .eq-com-fila {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          padding: 8px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .eq-com-fila:first-child {
          border-top: 0;
          padding-top: 0;
      }

      .eq-com-txt {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .eq-com-txt b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      .eq-mini {
          height: 34px;
          padding: 0 12px;
          font-size: var(--pp-fs-13);
          flex-shrink: 0;
      }

      .eq-nota {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .eq-nota--perm {
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
      }

      .eq-accion--peligro .eq-fila-nombre,
      .eq-accion--peligro .pp-icono-caja {
          color: var(--pp-negativo);
      }

      .eq-ayuda {
          display: block;
          margin-top: 6px;
          line-height: 1.4;
      }

      .eq-pin-fila {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .eq-pin-fila .pp-campo {
          flex: 1;
          min-width: 0;
      }

      .eq-pin,
      .eq-pin-num {
          letter-spacing: .3em;
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
      }

      .eq-pin-fila .pp-btn .pp-icono,
      .eq-modal .pp-editor-dos>.pp-btn .pp-icono,
      .eq-modal .pp-editor-dos>a.pp-btn .pp-icono {
          width: 18px;
          height: 18px;
          margin-right: 6px;
      }

      .eq-modal a.pp-btn {
          text-decoration: none;
      }

      .eq-perm {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .eq-perm-desc {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .eq-perm-pct {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
          color: var(--pp-texto-2);
      }

      .eq-perm-pct .pp-campo {
          width: 76px;
          text-align: right;
      }

      .eq-check {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          min-height: 40px;
          padding-top: 8px;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
          cursor: pointer;
      }

      .eq-check input {
          width: 18px;
          height: 18px;
          margin: 2px 0 0;
          flex-shrink: 0;
          accent-color: var(--pp-acento);
      }

      .eq-check>span {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .eq-pin-listo {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: var(--pp-esp-3);
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .eq-pin-dato {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .eq-pin-dato b {
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .eq-pin-dato--total {
          padding-top: 6px;
          border-top: 1px solid var(--pp-borde);
      }

      .eq-pin-dato--total b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
      }

      .eq-btn-peligro {
          border: 1px solid var(--pp-negativo);
      }

      /* Corte de caja: pedir anulación */
      .pp-cie-recibo.eq-pedir {
          color: var(--pp-negativo);
      }

      .pp-chip.eq-chip-pedida {
          font-size: var(--pp-fs-11);
          white-space: nowrap;
      }

      /* ════════ 🏷️ [ETQ-PAGINA] Vista previa: 1 etiqueta dentro de su página ════════ */
      .etq-prev.etq-prev--una {
          flex-wrap: nowrap;
          align-items: center;
          gap: 10px;
          padding: 18px 8px;
      }

      .etq-pagina {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          background: #fff;
          outline: 1px dashed var(--pp-borde-fuerte);
          outline-offset: 4px;
      }

      .etq-pagina .etq-prev-e {
          box-shadow: none;
          border-radius: 0;
      }

      .etq-prev-nav {
          flex-shrink: 0;
          width: 32px;
          height: 32px;
          border: 1px solid var(--pp-borde);
          border-radius: 50%;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-size: 20px;
          line-height: 1;
          cursor: pointer;
      }

      .etq-prev-pie {
          margin-top: 6px;
          text-align: center;
      }

      .etq-help-p {
          margin: 8px 0 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .etq-help ul {
          margin: 6px 0 0;
          padding-left: 18px;
      }

      .etq-help ul li+li {
          margin-top: 4px;
      }

      /* ════════ 🏭 [PROVEEDORES] Selector único ════════ */
      .pvs-wrap {
          position: relative;
          display: block;
      }

      .pvs-wrap>.pp-campo {
          width: 100%;
      }

      .pvs-wrap>.pp-campo.pvs-ok {
          border-color: var(--pp-acento);
      }

      .pvs-drop {
          position: absolute;
          top: calc(100% + 4px);
          left: 0;
          right: 0;
          z-index: 40;
          max-height: 260px;
          overflow-y: auto;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          box-shadow: var(--pp-sombra-flotante);
      }

      .pvs-drop[hidden] {
          display: none;
      }

      .pvs-op {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          width: 100%;
          padding: 10px 12px;
          border: 0;
          border-top: 1px solid var(--pp-borde);
          background: transparent;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          text-align: left;
          cursor: pointer;
      }

      .pvs-op:first-child {
          border-top: 0;
      }

      .pvs-op:hover,
      .pvs-op:focus-visible {
          background: var(--pp-sutil);
      }

      .pvs-op small {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pvs-op.pvs-crear span {
          color: var(--pp-acento-texto, var(--pp-acento));
      }

      .pvs-vacio {
          padding: 12px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pvs-hint {
          margin-top: 6px;
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pvs-hint--suma {
          padding: 6px 8px;
          border-radius: var(--pp-radio-s, 6px);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto, var(--pp-texto));
          font-weight: var(--pp-fw-medio);
      }

      .pvs-hint[hidden] {
          display: none;
      }

      .pvs-fila-completa {
          grid-column: 1 / -1;
      }

      /* Hoja (crear, ficha, unir) */
      .pvs-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pvs-ayuda {
          margin-top: -4px;
      }

      .pvs-resumen {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 10px;
          padding: var(--pp-esp-3);
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .pvs-resumen>div {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .pvs-resumen b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pvs-datos {
          display: flex;
          flex-direction: column;
      }

      .pvs-dato {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 8px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pvs-dato:first-child {
          border-top: 0;
      }

      .pvs-dato b {
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          text-align: right;
          overflow-wrap: anywhere;
      }

      .pvs-dato a {
          color: var(--pp-acento-texto, var(--pp-acento));
      }

      .pvs-acciones {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pvs-acciones>.pp-btn {
          padding: 0 6px;
          font-size: var(--pp-fs-13);
      }

      .pvs-nota {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pvs-btn-peligro {
          border: 1px solid var(--pp-negativo);
      }

      /* Directorio */
      .pvd-cab {
          display: flex;
          gap: var(--pp-esp-2);
      }

      .pvd-cab .pp-campo {
          flex: 1;
          min-width: 0;
      }

      .pvd-importar {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          border-color: var(--pp-aviso);
          background: var(--pp-aviso-suave);
      }

      .pvd-importar>div {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 2px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pvd-importar b {
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pvd-vacio {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: var(--pp-esp-2);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pvd-vacio b {
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pvd-resumen {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          flex-wrap: wrap;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pvd-lista .pvd-fila {
          width: 100%;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
          background: transparent;
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .pvd-lista .pvd-fila:first-child {
          border-top: 0;
      }

      .pvd-lista .pvd-fila:hover {
          background: var(--pp-sutil);
      }

      .pvd-ini {
          width: 40px;
          height: 40px;
          font-size: var(--pp-fs-13);
      }

      .pvd-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pvd-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pvd-sub {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pvd-der {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 2px;
          flex-shrink: 0;
      }

      .pvd-der b {
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pvd-der small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pvd-chev {
          flex-shrink: 0;
          display: flex;
          color: var(--pp-texto-3);
      }

      .pvd-chev .pp-icono {
          width: 16px;
          height: 16px;
      }

      /* Por pagar por factura */
      .pvp-link {
          padding: 0;
          border: 0;
          background: none;
          color: var(--pp-acento-texto, var(--pp-acento));
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          text-decoration: underline;
          cursor: pointer;
      }

      .pvp-asignar {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pvp-asignar .pp-fia-accion[hidden] {
          display: none;
      }

      .pvp-lineas small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      /* ═══════════════════════════════════════════════════════════════════
   📈 [INTEL-CFO] INTELIGENCIA DEL NEGOCIO — Resultado + Caja, alertas,
   pestaña Resultado (cascada, punto de equilibrio, fiados, proveedores).
   Solo tokens --pp-* (claro y Black solos). Va AL FINAL de styles.css.
   ═══════════════════════════════════════════════════════════════════ */

      /* Resumen: dos bloques de 3 cifras */
      .pp-in-res-cab {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          margin-top: 6px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .pp-in-res-cab span {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          text-align: right;
      }

      .pp-in-res-grid.pp-in-res-grid--3 {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
          margin: 4px 0 var(--pp-esp-2);
      }

      .pp-in-res-grid--3 .pp-in-res-item {
          padding: 8px;
      }

      .pp-in-res-grid--3 .pp-in-res-val {
          font-size: var(--pp-fs-15);
      }

      .pp-in-res-nota {
          margin: 2px 0 0;
          font-size: var(--pp-fs-11);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      /* Alertas del director financiero */
      .pp-in-alertas {
          gap: var(--pp-esp-2);
      }

      .pp-in-alerta {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .pp-in-alerta--negativo {
          background: var(--pp-negativo-suave);
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pp-in-alerta--aviso {
          background: var(--pp-aviso-suave);
          box-shadow: inset 3px 0 0 var(--pp-aviso);
      }

      .pp-in-alerta-tit {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-in-alertas--ok {
          flex-direction: row;
          align-items: center;
          gap: var(--pp-esp-2);
          padding: 10px var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-in-alertas--ok .pp-icono {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          stroke: var(--pp-positivo);
      }

      /* Pestañas: 6 en dos filas de 3 en el teléfono */
      .pp-segmentado.pp-in-tabs {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      @media (min-width: 560px) {
          .pp-segmentado.pp-in-tabs {
              grid-template-columns: repeat(6, minmax(0, 1fr));
          }
      }

      /* Cascada del resultado */
      .pp-in-cascada {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: 4px;
      }

      .pp-in-cas-cab {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-in-cas-fila--total .pp-in-cas-cab {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-in-cas-pista {
          position: relative;
          height: 10px;
          margin-top: 3px;
          border-radius: 3px;
          background: var(--pp-sutil);
      }

      .pp-in-cas-barra {
          position: absolute;
          top: 0;
          bottom: 0;
          border-radius: 3px;
      }

      .pp-in-cas-barra--tot {
          background: var(--pp-dato-1);
      }

      .pp-in-cas-barra--suma {
          background: var(--pp-positivo);
      }

      .pp-in-cas-barra--resta {
          background: var(--pp-dato-3);
      }

      .pp-in-cas-barra--neg {
          background: var(--pp-negativo);
      }

      .pp-in-cas-cero {
          position: absolute;
          top: -3px;
          bottom: -3px;
          width: 1px;
          background: var(--pp-texto-3);
      }

      /* Filas concepto … valor */
      .pp-in-filas {
          display: flex;
          flex-direction: column;
          margin: 4px 0 var(--pp-esp-2);
      }

      .pp-in-fila {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          padding: 7px 0;
          border-bottom: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-in-fila:last-child {
          border-bottom: 0;
      }

      .pp-in-fila b {
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-in-fila--total span {
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto);
      }

      /* Punto de equilibrio */
      .pp-in-pe-ley {
          display: flex;
          justify-content: space-between;
          margin-top: 6px;
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-in-pe-txt {
          margin: var(--pp-esp-2) 0 0;
          font-size: var(--pp-fs-13);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .pp-in-pe-nota {
          margin: 6px 0 0;
          font-size: var(--pp-fs-11);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .pp-in-nota-vend {
          margin: 0;
          padding: 10px var(--pp-esp-4);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      /* ═══════════════════════════════════════════════════════════════════
   📊 [FLUJO-CFO] FLUJO DE CAJA — proyectado (tablero y escenarios) y
   Detalle del mes (por actividad, semanas/días, vs mes anterior).
   Solo tokens --pp-*. Va AL FINAL de styles.css.
   ═══════════════════════════════════════════════════════════════════ */
      .pp-cfo-tablero {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-cfo-det-ctrl {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-cfo-det-ctrl .pp-segmentado {
          flex: 0 1 220px;
      }

      .pp-cfo-det-pie {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .pp-cfo-det-pie:empty {
          display: none;
      }

      .fc-tabla th small {
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .fc-tabla tr.fc-out td:not(.fc-col1):not(.fc-total) {
          color: var(--pp-texto-2);
      }

      .fc-tabla tr.fc-sub td {
          background: var(--pp-sutil);
          font-weight: var(--pp-fw-medio);
      }

      .fc-tabla tr.fc-sub td.fc-col1 {
          font-weight: var(--pp-fw-fuerte);
      }

      .fc-tabla tr.fc-parcial td.fc-col1 {
          color: var(--pp-texto);
      }

      .fc-tabla tr.fc-aj td.fc-col1 {
          font-style: italic;
          color: var(--pp-texto-2);
      }

      .fc-tabla .fc-var {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      /* 🧠 [TURBO-v3] Diagnóstico de Pili Turbo (Configuración) */
      .pp-cfg-diag {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-top: var(--pp-esp-2);
      }

      .pp-cfg-diag-fila {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 8px 10px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .pp-cfg-diag-fila b {
          color: var(--pp-texto);
      }

      .pp-cfg-diag-fila--ok {
          box-shadow: inset 3px 0 0 var(--pp-positivo);
      }

      .pp-cfg-diag-fila--mal {
          background: var(--pp-negativo-suave);
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      /* ═══════════════════════════════════════════════════════════════════
   📸 [FOTOS-PEDIDO] Fotos en pedidos y en el Mostrador (fotos-producto.js)
   Visor · miniaturas de pedidos · hoja del pedido · ticket · verificación
   ═══════════════════════════════════════════════════════════════════ */

      html.pf-sin-scroll,
      html.pf-sin-scroll body {
          overflow: hidden !important;
      }

      /* ── Recuadro de foto genérico (img o iniciales) ── */
      .pf-mini,
      .pf-tk-foto,
      .pf-hoja-foto,
      .pf-verif-foto {
          position: relative;
          display: grid;
          place-items: center;
          flex-shrink: 0;
          margin: 0;
          padding: 0;
          overflow: hidden;
          border: 1px solid var(--pp-borde);
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
          cursor: zoom-in;
          -webkit-tap-highlight-color: transparent;
      }

      .pf-mini img,
      .pf-tk-foto img,
      .pf-hoja-foto img,
      .pf-verif-foto img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .pf-ini {
          font-family: var(--pp-fuente);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .02em;
          color: var(--pp-texto-3);
      }

      img~.pf-ini {
          display: none;
      }

      .pf-sin {
          cursor: default;
          background: repeating-linear-gradient(135deg, var(--pp-sutil) 0 6px, transparent 6px 12px), var(--pp-sutil);
      }

      .pf-mini:focus-visible,
      .pf-tk-foto:focus-visible,
      .pf-hoja-foto:focus-visible,
      .pf-verif-foto:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      /* Chip de variante (Talla 38) y código */
      .pf-var {
          display: inline-flex;
          align-items: baseline;
          gap: 4px;
          padding: 2px 8px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-12);
          line-height: 1.5;
          white-space: nowrap;
      }

      .pf-var b {
          font-weight: var(--pp-fw-fuerte);
      }

      .pf-cod {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      /* ═══ 1. VISOR ═══ */
      .pf-visor {
          position: fixed;
          inset: 0;
          z-index: 1000001;
          display: grid;
          grid-template-rows: auto 1fr auto;
          background: rgba(9, 9, 11, .97);
          color: #FAFAFA;
          font-family: var(--pp-fuente);
      }

      .pf-visor[hidden] {
          display: none;
      }

      .pf-visor-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: calc(10px + env(safe-area-inset-top)) 12px 8px 20px;
      }

      .pf-visor-txt {
          flex: 1;
          min-width: 0;
      }

      .pf-visor-tit {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pf-visor-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: rgba(250, 250, 250, .7);
      }

      .pf-visor-x,
      .pf-visor-nav {
          display: grid;
          place-items: center;
          width: 44px;
          height: 44px;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-full);
          background: rgba(255, 255, 255, .12);
          color: #FAFAFA;
          cursor: pointer;
      }

      .pf-visor-x:hover,
      .pf-visor-nav:hover {
          background: rgba(255, 255, 255, .2);
      }

      .pf-visor-x:focus-visible,
      .pf-visor-nav:focus-visible {
          outline: 2px solid #FAFAFA;
          outline-offset: 2px;
      }

      .pf-visor-escena {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 0;
          padding: 0 12px;
          overflow: hidden;
          touch-action: pan-y;
      }

      .pf-visor-img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          border-radius: var(--pp-radio-m);
          user-select: none;
          -webkit-user-drag: none;
          transition: opacity .18s ease;
      }

      .pf-visor--cargando .pf-visor-img {
          opacity: 0;
      }

      .pf-visor-carga {
          position: absolute;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 3px solid rgba(255, 255, 255, .2);
          border-top-color: #FAFAFA;
          animation: pf-gira .8s linear infinite;
          opacity: 0;
      }

      .pf-visor--cargando .pf-visor-carga {
          opacity: 1;
      }

      .pf-visor-error {
          position: absolute;
          font-size: var(--pp-fs-13);
          color: rgba(250, 250, 250, .75);
      }

      .pf-visor-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
      }

      .pf-visor-nav--izq {
          left: 12px;
      }

      .pf-visor-nav--der {
          right: 12px;
      }

      .pf-visor--una .pf-visor-nav {
          display: none;
      }

      .pf-visor-pie {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          min-height: 24px;
          padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
          font-size: var(--pp-fs-12);
          color: rgba(250, 250, 250, .7);
          font-variant-numeric: tabular-nums;
      }

      .pf-visor-puntos {
          display: flex;
          gap: 6px;
      }

      .pf-visor-puntos span {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: rgba(255, 255, 255, .3);
      }

      .pf-visor-puntos span.activo {
          background: #FAFAFA;
      }

      @keyframes pf-gira {
          to {
              transform: rotate(360deg);
          }
      }

      /* ═══ 2. PEDIDOS WEB (tarjeta de Inicio e historial) ═══ */
      .nc-pedido-items.pf-items {
          gap: 2px;
      }

      .nc-pedido-items.pf-items li {
          grid-template-columns: 44px 1fr auto;
          align-items: center;
          column-gap: 10px;
          row-gap: 1px;
          padding: 4px 0;
      }

      .pf-items .pf-mini {
          grid-column: 1;
          grid-row: 1 / span 2;
          width: 44px;
          height: 44px;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
      }

      .pf-items li> :nth-child(2) {
          grid-column: 2;
          grid-row: 1;
          align-self: end;
          min-width: 0;
      }

      .pf-items .nc-pedido-cod {
          grid-column: 2;
          grid-row: 2;
          align-self: start;
      }

      .pf-items .nc-pedido-precio {
          grid-column: 3;
          grid-row: 1 / span 2;
          align-self: center;
      }

      /* ═══ 3. HOJA DEL PEDIDO (enlace "Ver pedido con fotos") ═══ */
      .pf-hoja-capa {
          position: fixed;
          inset: 0;
          z-index: 1000000;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          background: var(--pp-velo);
          font-family: var(--pp-fuente);
          -webkit-font-smoothing: antialiased;
      }

      .pf-hoja {
          display: flex;
          flex-direction: column;
          width: 100%;
          max-width: 560px;
          max-height: 94vh;
          max-height: 94dvh;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          border-radius: 20px 20px 0 0;
          box-shadow: var(--pp-sombra-flotante);
          animation: pf-sube .24s cubic-bezier(.2, .8, .2, 1);
          outline: none;
      }

      @keyframes pf-sube {
          from {
              transform: translateY(24px);
              opacity: 0;
          }
      }

      .pf-hoja-cab {
          display: flex;
          align-items: flex-start;
          gap: var(--pp-esp-3);
          padding: 18px 14px 14px 20px;
          border-bottom: 1px solid var(--pp-borde);
      }

      .pf-hoja-cab-txt {
          flex: 1;
          min-width: 0;
      }

      .pf-hoja-tienda {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-3);
          text-transform: uppercase;
          letter-spacing: .05em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pf-hoja-tit {
          margin: 2px 0 0;
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.25;
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pf-hoja-x {
          display: grid;
          place-items: center;
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          margin: -4px 0 0;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pf-hoja-x:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pf-hoja-cuerpo {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          overscroll-behavior: contain;
          padding: 14px 20px 18px;
      }

      .pf-hoja-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px 10px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pf-hoja-meta>span:not(.pp-chip)+span:not(.pp-chip)::before {
          content: '·';
          margin-right: 10px;
      }

      .pf-hoja-cliente {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          margin-top: 14px;
          padding: 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
      }

      .pf-avatar {
          display: grid;
          place-items: center;
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          border-radius: 50%;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
      }

      .pf-hoja-cliente-txt {
          flex: 1;
          min-width: 0;
      }

      .pf-hoja-cliente-nom {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pf-hoja-cliente-sub {
          margin-top: 1px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          font-variant-numeric: tabular-nums;
      }

      .pf-hoja-wa {
          gap: 6px;
          flex-shrink: 0;
          text-decoration: none;
      }

      .pf-hoja-wa .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pf-hoja-rotulo {
          margin: 20px 0 4px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          text-transform: uppercase;
          letter-spacing: .06em;
          color: var(--pp-texto-3);
      }

      .pf-hoja-items {
          list-style: none;
          margin: 0;
          padding: 0;
      }

      .pf-hoja-item {
          display: grid;
          grid-template-columns: 76px 1fr auto;
          gap: 12px;
          align-items: start;
          padding: 12px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .pf-hoja-item:first-child {
          border-top: 0;
      }

      .pf-hoja-foto {
          width: 76px;
          height: 76px;
          border-radius: 12px;
          font-size: var(--pp-fs-17);
      }

      .pf-hoja-info {
          min-width: 0;
          padding-top: 1px;
      }

      .pf-hoja-nombre {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-medio);
          line-height: 1.3;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          word-break: break-word;
      }

      .pf-hoja-detalle {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
          margin-top: 6px;
      }

      .pf-hoja-cant {
          margin-top: 6px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pf-hoja-monto {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          padding-top: 1px;
      }

      .pf-hoja-totales {
          margin-top: 4px;
          padding-top: 12px;
          border-top: 1px solid var(--pp-borde);
      }

      .pf-tot-fila {
          display: flex;
          justify-content: space-between;
          gap: 12px;
          padding: 3px 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pf-tot-fila--desc,
      .pf-tot-fila--envio {
          color: var(--pp-positivo);
      }

      .pf-tot-fila>span:last-child {
          flex-shrink: 0;
          white-space: nowrap;
      }

      .pf-tot-fila--total {
          margin-top: 6px;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pf-hoja-pie {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
          border-top: 1px solid var(--pp-borde);
      }

      .pf-hoja-pie>.pp-btn {
          flex: 1;
      }

      .pf-hoja-nota {
          display: flex;
          align-items: center;
          gap: 6px;
          width: 100%;
          margin: 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pf-hoja-nota .pp-icono {
          width: 14px;
          height: 14px;
      }

      .pf-hoja-vacio p {
          margin: 8px 0;
          font-size: var(--pp-fs-15);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      /* Esqueleto mientras carga */
      .pf-esq {
          position: relative;
          overflow: hidden;
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .pf-esq::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
          transform: translateX(-100%);
          animation: pf-brillo 1.2s ease-in-out infinite;
      }

      body.tema-black .pf-esq::after {
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
      }

      .pf-esq--cliente {
          height: 66px;
          margin-bottom: 18px;
      }

      .pf-esq--item {
          height: 76px;
          margin-top: 12px;
          background: transparent;
          display: grid;
          grid-template-columns: 76px 1fr;
          gap: 12px;
      }

      .pf-esq--item span,
      .pf-esq--item i {
          border-radius: 12px;
          background: var(--pp-sutil);
      }

      .pf-esq--item i {
          height: 38px;
          align-self: center;
      }

      @keyframes pf-brillo {
          to {
              transform: translateX(100%);
          }
      }

      @media (min-width: 640px) {
          .pf-hoja-capa {
              align-items: center;
              padding: 24px;
          }

          .pf-hoja {
              max-height: 86vh;
              border-radius: 20px;
          }
      }

      /* ═══ 4. MOSTRADOR: miniatura del ticket ═══ */
      .pf-tk-foto {
          width: 44px;
          height: 44px;
          margin-left: -4px;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-13);
      }

      .pf-tk-foto--icono {
          cursor: default;
          border-style: dashed;
          background: transparent;
      }

      .pf-tk-foto--icono .pp-icono {
          width: 18px;
          height: 18px;
      }

      /* ═══ 4. MOSTRADOR: tarjeta de verificación ═══ */
      .pf-verif {
          position: relative;
          margin-bottom: var(--pp-esp-3);
          overflow: hidden;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          box-shadow: inset 3px 0 0 var(--pp-positivo), var(--pp-sombra-flotante);
          animation: pf-entra .2s cubic-bezier(.2, .8, .2, 1);
      }

      .pf-verif[hidden] {
          display: none;
      }

      .pf-verif--sinfoto {
          box-shadow: inset 3px 0 0 var(--pp-aviso), var(--pp-sombra-flotante);
      }

      @keyframes pf-entra {
          from {
              transform: translateY(-6px);
              opacity: 0;
          }
      }

      .pf-verif-cuerpo {
          display: grid;
          grid-template-columns: 96px 1fr auto;
          gap: 14px;
          padding: 14px 8px 10px 16px;
      }

      .pf-verif-foto {
          width: 96px;
          height: 96px;
          border-radius: 12px;
          font-size: var(--pp-fs-20);
      }

      .pf-verif-n {
          position: absolute;
          right: 5px;
          bottom: 5px;
          min-width: 20px;
          height: 20px;
          padding: 0 6px;
          border-radius: var(--pp-radio-full);
          background: rgba(9, 9, 11, .7);
          color: #FAFAFA;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          line-height: 20px;
          text-align: center;
      }

      .pf-verif-info {
          min-width: 0;
      }

      .pf-verif-ok {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-positivo);
      }

      .pf-verif-ok .pp-icono {
          width: 14px;
          height: 14px;
          stroke-width: 2.5;
      }

      .pf-verif-nombre {
          margin: 3px 0 7px;
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.25;
          color: var(--pp-texto);
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          word-break: break-word;
      }

      .pf-verif-det {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px 8px;
      }

      .pf-var--grande {
          padding: 3px 10px;
          font-size: var(--pp-fs-13);
      }

      .pf-var--grande b {
          font-size: var(--pp-fs-15);
      }

      .pf-verif-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 6px;
          margin-top: 7px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pf-verif-meta b {
          color: var(--pp-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      .pf-verif-ultima {
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-aviso);
      }

      .pf-verif-x {
          display: grid;
          place-items: center;
          width: 36px;
          height: 36px;
          margin: -6px 0 0;
          padding: 0;
          border: 0;
          border-radius: var(--pp-radio-full);
          background: transparent;
          color: var(--pp-texto-3);
          cursor: pointer;
      }

      .pf-verif-x:hover {
          background: var(--pp-sutil);
      }

      .pf-verif-x:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .pf-verif-pie {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          padding: 0 12px 14px 16px;
      }

      .pf-verif-ayuda {
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pf-verif--sinfoto .pf-verif-ayuda {
          color: var(--pp-aviso);
          font-weight: var(--pp-fw-medio);
      }

      .pf-verif-deshacer {
          flex-shrink: 0;
      }

      .pf-verif-barra {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 3px;
          background: var(--pp-sutil);
      }

      .pf-verif-barra span {
          display: block;
          height: 100%;
          background: var(--pp-positivo);
          transform-origin: left center;
          animation: pf-tiempo 6s linear forwards;
      }

      .pf-verif--sinfoto .pf-verif-barra span {
          background: var(--pp-aviso);
      }

      .pf-verif--fija .pf-verif-barra {
          display: none;
      }

      @keyframes pf-tiempo {
          from {
              transform: scaleX(1);
          }

          to {
              transform: scaleX(0);
          }
      }

      @media (max-width: 380px) {
          .pf-verif-cuerpo {
              grid-template-columns: 80px 1fr auto;
              gap: 12px;
          }

          .pf-verif-foto {
              width: 80px;
              height: 80px;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          .pf-hoja,
          .pf-verif,
          .pf-esq::after,
          .pf-visor-img {
              animation: none;
              transition: none;
          }

          .pf-verif-barra {
              display: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   📱 [CARRITO-PIE] Carrito de la cara A: el pie (total + botón) siempre visible
   · El panel mide el alto VISIBLE real (100vh en celulares incluye la zona
     tapada por las barras del navegador).
   · Solo la lista de productos hace scroll; el pie queda anclado abajo.
   · Pie compacto: cupón y factura en una línea plegable, datos en una fila.
   ═══════════════════════════════════════════════════════════════════ */
      #panel-carrito-cliente {
          top: 0;
          bottom: 0;
          height: auto;
          max-height: none;
      }

      #panel-carrito-cliente .carrito-header {
          flex-shrink: 0;
          min-height: 56px;
          padding: 12px 16px 12px 20px;
      }

      #panel-carrito-cliente .carrito-body {
          flex: 1 1 auto;
          min-height: 0;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;
      }

      #panel-carrito-cliente .carrito-footer {
          flex-shrink: 0;
          padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
          box-shadow: 0 -8px 24px rgba(31, 45, 61, .08);
      }

      /* Cupón y factura: una línea plegable */
      .carrito-extras {
          margin: 0 0 10px;
          border: 1px solid #E7EEF4;
          border-radius: 12px;
          background: #FAFBFD;
      }

      .carrito-extras[hidden] {
          display: none;
      }

      .carrito-extras>summary {
          display: flex;
          align-items: center;
          gap: 8px;
          min-height: 40px;
          padding: 0 12px;
          font-size: 14px;
          font-weight: 600;
          color: #475569;
          cursor: pointer;
          list-style: none;
          -webkit-tap-highlight-color: transparent;
      }

      .carrito-extras>summary::-webkit-details-marker {
          display: none;
      }

      .carrito-extras-txt {
          flex: 1;
          min-width: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .carrito-extras-flecha {
          font-size: 12px;
          color: #94A3B8;
          transition: transform .2s ease;
      }

      .carrito-extras[open] .carrito-extras-flecha {
          transform: rotate(180deg);
      }

      .carrito-extras--activo>summary {
          color: #047857;
      }

      .carrito-extras-cuerpo {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 2px 12px 12px;
      }

      .carrito-extras-cuerpo #carrito-iva-zona {
          margin: 0 !important;
      }

      #carrito-cupon-zona:empty {
          display: none;
      }

      /* Subtotal y ahorro de las promociones: compactos */
      #panel-carrito-cliente #carrito-promos-zona {
          gap: 2px;
          margin-bottom: 8px;
      }

      /* 📞 [f112] Nombre arriba y WhatsApp con país debajo (en una fila el número no cabía) */
      #panel-carrito-cliente .carrito-datos {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
          margin-bottom: 10px;
      }

      #panel-carrito-cliente .carrito-datos input {
          min-width: 0;
          height: 44px;
          padding: 0 12px;
          font-size: 16px;
          /* 16 px: el iPhone no hace zoom al escribir */
      }

      /* Total y botón */
      .carrito-total-fila {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          margin-bottom: 10px;
          font-size: 15px;
          font-weight: 800;
          color: #333;
      }

      .carrito-total-fila #carrito-total-ui {
          font-size: 22px;
      }

      #panel-carrito-cliente .btn-wsp-checkout {
          min-height: 52px;
          padding: 12px 16px;
      }

      /* Temas oscuros */
      body.tema-black .carrito-extras {
          background: #1A1A24;
          border-color: rgba(255, 255, 255, .10);
      }

      body.tema-black .carrito-extras>summary,
      body.tema-black .carrito-total-fila {
          color: #F0F0F5;
      }

      body.tema-orquidea .carrito-extras {
          background: #281C35;
          border-color: rgba(199, 125, 232, .2);
      }

      body.tema-orquidea .carrito-extras>summary,
      body.tema-orquidea .carrito-total-fila {
          color: #F3EAFB;
      }

      body.tema-black .carrito-extras--activo>summary,
      body.tema-orquidea .carrito-extras--activo>summary {
          color: #34D399;
      }

      @media (prefers-reduced-motion: reduce) {
          .carrito-extras-flecha {
              transition: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   🧾 [COMPRAS] Comprobante de compra + reporte "Compras del mes"
   ═══════════════════════════════════════════════════════════════════ */

      /* Tipo de comprobante + número en una fila */
      .pp-comp-fila {
          display: grid;
          grid-template-columns: minmax(118px, 40%) 1fr;
          gap: var(--pp-esp-2);
      }

      .pp-comp-fila .pp-campo {
          min-width: 0;
      }

      .pp-comp-fila input:disabled {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
          cursor: not-allowed;
      }

      .pp-campo.pp-comp-error {
          border-color: var(--pp-negativo) !important;
          box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
      }

      .pp-req {
          color: var(--pp-negativo);
          font-weight: var(--pp-fw-fuerte);
      }

      /* Editor de producto: datos de la compra (contado y crédito) y, dentro, los del crédito */
      #fc-campos-compra[hidden],
      #fc-campos-credito[hidden] {
          display: none !important;
      }

      #fc-campos-compra .pp-fc-credito-sub {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          margin-top: var(--pp-esp-1);
          padding-top: var(--pp-esp-3);
          border-top: 1px dashed var(--pp-borde);
      }

      /* ── Reporte ── */
      .rc-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          margin-bottom: var(--pp-esp-3);
      }

      .rc-mes {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-2);
          min-width: 0;
      }

      .rc-mes-btn {
          display: grid;
          place-items: center;
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          padding: 0;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .rc-mes-btn:disabled {
          opacity: .35;
          cursor: default;
      }

      .rc-mes-btn:focus-visible {
          outline: none;
          box-shadow: var(--pp-foco);
      }

      .rc-mes-txt {
          display: flex;
          flex-direction: column;
          min-width: 0;
          text-align: center;
      }

      .rc-mes-txt b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .rc-mes-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .rc-excel {
          gap: 6px;
          flex-shrink: 0;
      }

      .rc-excel .pp-icono {
          width: 18px;
          height: 18px;
      }

      .rc-kpis {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--pp-esp-2);
          margin-bottom: var(--pp-esp-3);
      }

      .rc-kpi {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
          padding: var(--pp-esp-3);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
      }

      .rc-kpi>span {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-3);
      }

      .rc-kpi>b {
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          line-height: 1.2;
      }

      .rc-kpi>small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .rc-kpi--total {
          border-color: var(--pp-acento);
          box-shadow: inset 3px 0 0 var(--pp-acento);
      }

      .rc-kpi--saldo>b {
          color: var(--pp-aviso);
      }

      .rc-aviso {
          display: flex;
          gap: var(--pp-esp-2);
          align-items: flex-start;
          margin-bottom: var(--pp-esp-2);
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-12);
          line-height: 1.45;
          color: var(--pp-texto-2);
      }

      .rc-aviso .pp-icono {
          width: 16px;
          height: 16px;
          margin-top: 1px;
      }

      .rc-aviso--sin {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .rc-provs {
          margin: var(--pp-esp-1) 0 var(--pp-esp-3);
          padding: 0;
          overflow: hidden;
      }

      .rc-provs>summary {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px var(--pp-esp-4);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          cursor: pointer;
          list-style: none;
      }

      .rc-provs>summary::-webkit-details-marker {
          display: none;
      }

      .rc-provs>summary small {
          min-width: 24px;
          padding: 1px 8px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          color: var(--pp-texto-2);
          font-size: var(--pp-fs-12);
          text-align: center;
      }

      .rc-provs-lista {
          padding: 0 var(--pp-esp-4) var(--pp-esp-3);
      }

      .rc-prov-fila {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          padding: 10px 0 12px;
          border-top: 1px solid var(--pp-borde);
      }

      .rc-prov-fila>div {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      .rc-prov-fila b {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .rc-prov-fila small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .rc-prov-fila>.pp-num {
          font-weight: var(--pp-fw-fuerte);
          font-size: var(--pp-fs-13);
      }

      .rc-barra {
          position: absolute;
          left: 0;
          bottom: 4px;
          height: 3px;
          width: var(--p);
          border-radius: 2px;
          background: var(--pp-acento);
          opacity: .5;
      }

      .rc-filtros {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
          margin-bottom: var(--pp-esp-3);
      }

      .rc-lista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-2);
      }

      .rc-fila {
          padding: var(--pp-esp-3) var(--pp-esp-4);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
      }

      .rc-fila--sin {
          box-shadow: inset 3px 0 0 var(--pp-aviso);
      }

      .rc-fila-top {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .rc-prov {
          min-width: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .rc-fila-top>b {
          flex-shrink: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      .rc-fila-comp {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 4px 6px;
          margin-top: 4px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .rc-fila-comp .pp-mono {
          font-size: var(--pp-fs-12);
      }

      .rc-comp {
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .rc-comp--sin {
          color: var(--pp-aviso);
          font-weight: var(--pp-fw-fuerte);
      }

      .rc-comp--vacio {
          color: var(--pp-texto-3);
      }

      .rc-fecha {
          margin-left: auto;
          color: var(--pp-texto-3);
          white-space: nowrap;
      }

      .rc-fila-det {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .rc-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: var(--pp-esp-2);
      }

      .rc-chip-ant {
          background: transparent;
          border: 1px dashed var(--pp-borde-fuerte);
          color: var(--pp-texto-3);
      }

      .rc-vacio {
          padding: var(--pp-esp-5) var(--pp-esp-4);
          text-align: center;
      }

      .rc-vacio p {
          margin: 0 0 var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .rc-vacio p:last-child {
          margin: 0;
      }

      .rc-esq {
          position: relative;
          overflow: hidden;
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
          min-height: 82px;
      }

      .rc-esq--fila {
          min-height: 96px;
          margin-bottom: var(--pp-esp-2);
      }

      .rc-esq::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
          transform: translateX(-100%);
          animation: rc-brillo 1.2s ease-in-out infinite;
      }

      body.tema-black .rc-esq::after {
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
      }

      @keyframes rc-brillo {
          to {
              transform: translateX(100%);
          }
      }

      @media (min-width: 700px) {
          .rc-kpis {
              grid-template-columns: repeat(4, 1fr);
          }

          .rc-filtros {
              flex-direction: row;
              align-items: center;
          }

          .rc-filtros .pp-campo {
              flex: 1;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .rc-esq::after {
              animation: none;
          }
      }

      /* Proveedores: 5 pestañas (Compra · Por pagar · Express · Directorio · Reporte) */
      #prov-tabs {
          overflow-x: auto;
          scrollbar-width: none;
      }

      #prov-tabs::-webkit-scrollbar {
          display: none;
      }

      #prov-tabs>button {
          flex: 1 0 auto;
          padding: 0 10px;
          white-space: nowrap;
      }

      /* ═══════════════════════════════════════════════════════════════════
   🏦 [BÓVEDA 2] Deudas: semáforo, capacidad de pago, dinero comprometido,
   próximos pagos, plan para salir de deudas, pagos con desglose
   ═══════════════════════════════════════════════════════════════════ */
      .pp-bov-res-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      .pp-bov-kpis {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--pp-esp-2);
          margin-top: 8px;
          padding-top: 12px;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-bov-kpi {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pp-bov-kpi>b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-kpi>small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      /* ── ¿Puedes con tus deudas? ── */
      .pp-bov-salud {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-4);
          padding: var(--pp-esp-4);
      }

      .pp-bov-medidor {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pp-bov-medidor+.pp-bov-medidor {
          padding-top: var(--pp-esp-4);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-bov-med-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
      }

      .pp-bov-med-valor {
          display: flex;
          align-items: baseline;
          flex-wrap: wrap;
          gap: 4px 8px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .pp-bov-med-valor>b {
          font-size: var(--pp-fs-28);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: -.02em;
          color: var(--pp-texto);
      }

      .pp-bov-med-valor>b.pp-bov-neg,
      .pp-bov-neg {
          color: var(--pp-negativo);
      }

      .pp-bov-med-barra {
          position: relative;
          height: 8px;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
      }

      .pp-bov-med-barra>div {
          height: 100%;
          max-width: 100%;
          border-radius: inherit;
          background: var(--pp-acento);
      }

      .pp-bov-med-barra[data-nivel="aviso"]>div {
          background: var(--pp-aviso);
      }

      .pp-bov-med-barra[data-nivel="peligro"]>div {
          background: var(--pp-negativo);
      }

      .pp-bov-med-barra>i {
          position: absolute;
          top: -3px;
          bottom: -3px;
          width: 2px;
          background: var(--pp-borde-fuerte);
      }

      .pp-bov-med-txt {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .pp-bov-med-txt b {
          color: var(--pp-texto);
      }

      .pp-bov-med-txt .pp-rep-spinner,
      .pp-bov-desg-nota .pp-rep-spinner {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin: 0 4px 0 0;
          vertical-align: -2px;
      }

      /* ── Tarjeta de deuda ── */
      .pp-bov-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
      }

      .pp-bov-cred[data-estado="VENCIDA"] {
          box-shadow: inset 3px 0 0 var(--pp-negativo);
      }

      .pp-bov-cred[data-estado="PRONTO"] {
          box-shadow: inset 3px 0 0 var(--pp-aviso);
      }

      .pp-bov-cred[data-estado="VENCIDA"] .pp-bov-cred-cuota .pp-num {
          color: var(--pp-negativo);
      }

      .pp-bov-cred-nota {
          margin: 0;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pp-bov-cred-acciones>.pp-btn .pp-icono {
          width: 16px;
          height: 16px;
      }

      /* ── Formulario ── */
      .pp-bov-tipos>button {
          font-size: var(--pp-fs-13);
      }

      .pp-bov-com {
          display: grid;
          grid-template-columns: 96px minmax(0, 1fr);
          gap: var(--pp-esp-2);
      }

      .pp-bov-form [hidden] {
          display: none !important;
      }

      /* ── Próximos pagos ── */
      .pp-bov-cal {
          display: flex;
          flex-direction: column;
          padding: 4px var(--pp-esp-4);
      }

      .pp-bov-cal-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: 10px 0;
      }

      .pp-bov-cal-fila+.pp-bov-cal-fila {
          border-top: 1px solid var(--pp-borde);
      }

      .pp-bov-cal-dia {
          flex-shrink: 0;
          width: 44px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 4px 0;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          line-height: 1.1;
      }

      .pp-bov-cal-dia>b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-cal-dia>span {
          font-size: var(--pp-fs-11);
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .pp-bov-cal-fila[data-estado="VENCIDA"] .pp-bov-cal-dia {
          background: var(--pp-negativo-suave);
      }

      .pp-bov-cal-fila[data-estado="VENCIDA"] .pp-bov-cal-dia>b {
          color: var(--pp-negativo);
      }

      .pp-bov-cal-fila[data-estado="PRONTO"] .pp-bov-cal-dia {
          background: var(--pp-aviso-suave);
      }

      .pp-bov-cal-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-bov-cal-fila>.pp-num {
          flex-shrink: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-cal-mas {
          margin: 0;
          padding: 10px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .pp-bov-hist-meta .pp-chip {
          padding: 0 6px;
          font-size: 10px;
      }

      /* ── Plan para salir de deudas ── */
      .pp-bov-estr {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4);
      }

      .pp-bov-estr-lista {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin: 0;
          padding: 0;
          list-style: none;
      }

      .pp-bov-estr-fila {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
      }

      .pp-bov-estr-primera {
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
      }

      .pp-bov-estr-pos {
          flex-shrink: 0;
          width: 26px;
          height: 26px;
          display: grid;
          place-items: center;
          border-radius: var(--pp-radio-full);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto-2);
      }

      .pp-bov-estr-primera .pp-bov-estr-pos {
          background: var(--pp-acento);
          color: var(--pp-sobre-acento);
      }

      .pp-bov-estr-txt {
          flex: 1;
          min-width: 0;
      }

      .pp-bov-estr-fila>.pp-num {
          flex-shrink: 0;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-estr-sim {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-top: var(--pp-esp-3);
          border-top: 1px solid var(--pp-borde);
      }

      .pp-bov-estr-sim[hidden],
      .pp-bov-estr [hidden] {
          display: none !important;
      }

      /* ── Terminadas y archivadas ── */
      .pp-bov-cerradas {
          padding: 0;
          overflow: hidden;
      }

      .pp-bov-cerradas>summary {
          padding: 14px var(--pp-esp-4);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-medio);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pp-bov-cerradas[open]>summary {
          border-bottom: 1px solid var(--pp-borde);
      }

      .pp-bov-cerradas .pp-chip .pp-icono {
          width: 12px;
          height: 12px;
      }

      .pp-bov-restaurar {
          height: 30px;
          padding: 0 10px;
          font-size: var(--pp-fs-12);
      }

      .pp-bov-hist-entra {
          color: var(--pp-positivo);
      }

      /* ── Ventana de pago: atajos y desglose ── */
      .pp-bov-atajos {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      .pp-bov-atajos:empty {
          display: none;
      }

      .pp-bov-atajo {
          flex: 1 1 120px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          padding: 8px 10px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          font: inherit;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          text-align: left;
          cursor: pointer;
      }

      .pp-bov-atajo>b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-atajo:hover {
          border-color: var(--pp-acento);
      }

      .pp-bov-desglose {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
      }

      .pp-bov-desglose:empty {
          display: none;
      }

      .pp-bov-desg-tit {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-bov-desg-fila {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pp-bov-desg-fila>b {
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .pp-bov-desg-total {
          margin-top: 2px;
          padding-top: 8px;
          border-top: 1px solid var(--pp-borde);
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-bov-desg-nota,
      .pp-bov-desg-bien,
      .pp-bov-desg-error {
          margin: 0;
          font-size: var(--pp-fs-12);
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .pp-bov-desg-bien {
          padding: 8px 10px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-bov-desg-error {
          padding: 8px 10px;
          border-radius: var(--pp-radio-s);
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      #modal-pago-boveda .pp-modal-panel,
      #modal-bov-liquidar .pp-modal-panel,
      #modal-bov-archivar .pp-modal-panel {
          gap: var(--pp-esp-3);
      }

      #pago-bloque-modo[hidden] {
          display: none;
      }

      #pago-bloque-modo .pp-segmentado>button {
          font-size: var(--pp-fs-13);
      }

      /* ── Cronograma ── */
      .pp-bov-minis {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--pp-esp-2);
      }

      .pp-bov-minis .pp-bov-mini {
          min-width: 0;
      }

      .pp-bov-minis .pp-bov-mini .pp-num {
          font-size: var(--pp-fs-15);
          white-space: nowrap;
      }

      .pp-bov-vencida td {
          background: var(--pp-negativo-suave);
      }

      .pp-bov-tabla td .pp-chip {
          margin-left: 2px;
          padding: 0 4px;
          font-size: 10px;
      }

      .pp-bov-ya {
          display: block;
          font-size: 10px;
          font-weight: var(--pp-fw-normal);
          color: var(--pp-positivo);
      }

      .pp-bov-crono-pagos {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pp-bov-crono-pagos[hidden] {
          display: none;
      }

      #sim-acciones-extra[hidden] {
          display: none;
      }

      .pp-bov-sim-fila {
          justify-content: center;
      }

      /* ═══════════════════════════════════════════════════════════════════
   🐷 [AHORRO] Bóveda → Ahorros: pestañas, disponible de verdad, apartados,
   metas, «Págate primero», cierre de caja e Inicio
   ═══════════════════════════════════════════════════════════════════ */
      .pp-bov-tabs>button {
          flex: 1;
          font-size: var(--pp-fs-14, 14px);
      }

      /* Los paneles conservan el mismo ritmo vertical que tenía la Bóveda */
      #bov-panel-ahorros>#aho-contenido>*+*,
      #bov-deudas-contenido>*+* {
          margin-top: var(--pp-esp-4);
      }

      #bov-panel-ahorros>#aho-contenido>.pp-bov-seccion,
      #bov-deudas-contenido>.pp-bov-seccion {
          margin-top: var(--pp-esp-6);
      }

      #bov-panel-ahorros>#aho-contenido>.pp-bov-seccion+*,
      #bov-deudas-contenido>.pp-bov-seccion+* {
          margin-top: var(--pp-esp-2);
      }

      #bov-panel-deudas[hidden],
      #bov-panel-ahorros[hidden],
      #bov-deudas-contenido[hidden],
      .pp-aho-lock[hidden],
      .pp-aho-cierre[hidden],
      .pp-aho-hud[hidden] {
          display: none !important;
      }

      .pp-aho-lock {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-5) var(--pp-esp-4);
      }

      .pp-aho-lock>.pp-icono {
          width: 28px;
          height: 28px;
          color: var(--pp-acento-texto);
      }

      /* ── Disponible de verdad ── */
      .pp-aho-disp {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: var(--pp-esp-4);
      }

      .pp-aho-ecu {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-top: 6px;
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
      }

      .pp-aho-ecu small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      /* ── Apartados ── */
      .pp-aho-ap {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
          padding: var(--pp-esp-4);
      }

      .pp-aho-ap>.pp-chip {
          align-self: flex-start;
      }

      .pp-aho-ap .pp-chip .pp-icono {
          width: 12px;
          height: 12px;
      }

      .pp-aho-ap-cab {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
      }

      .pp-aho-ico {
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          display: grid;
          place-items: center;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-aho-ico .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pp-aho-ap-tit {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
      }

      .pp-aho-ap-tit>b {
          max-width: 100%;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.25;
          color: var(--pp-texto);
          overflow-wrap: anywhere;
      }

      .pp-aho-saldo {
          flex-shrink: 0;
          font-size: var(--pp-fs-20);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          text-align: right;
      }

      .pp-aho-saldo small {
          display: block;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pp-aho-barra {
          margin-top: 2px;
      }

      .pp-aho-marcas {
          position: relative;
          height: 14px;
          margin-top: -4px;
          font-size: 10px;
          color: var(--pp-texto-3);
      }

      .pp-aho-marcas>span {
          position: absolute;
          top: 0;
          transform: translateX(-50%);
          white-space: nowrap;
      }

      .pp-aho-marcas>span[style*="right"] {
          transform: none;
      }

      .pp-aho-link {
          padding: 0;
          border: 0;
          background: none;
          font: inherit;
          font-weight: var(--pp-fw-medio);
          color: var(--pp-acento-texto);
          text-decoration: underline;
          text-underline-offset: 2px;
          cursor: pointer;
      }

      .pp-aho-acciones>.pp-btn {
          flex: 1;
          min-width: 0;
      }

      .pp-aho-acciones>.pp-aho-cuenta-btn:hover {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pp-aho-bloq {
          background: var(--pp-sutil);
      }

      .pp-aho-bloq .pp-aho-ico {
          background: var(--pp-superficie);
          color: var(--pp-texto-3);
      }

      /* ── Metas ── */
      .pp-aho-metas-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--pp-esp-2);
      }

      #aho-contenido>.pp-aho-metas-cab {
          margin-top: var(--pp-esp-6);
      }

      #aho-contenido>.pp-aho-metas-cab+* {
          margin-top: var(--pp-esp-2);
      }

      .pp-aho-nueva {
          height: 32px;
          padding: 0 10px;
          font-size: var(--pp-fs-13);
      }

      .pp-aho-nueva .pp-icono {
          width: 16px;
          height: 16px;
      }

      .pp-aho-sugs {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pp-aho-sug {
          flex: 1 1 140px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          padding: 8px 10px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: transparent;
          font: inherit;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          text-align: left;
          cursor: pointer;
      }

      .pp-aho-sug>b {
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .pp-aho-sug:hover {
          border-color: var(--pp-acento);
      }

      /* ── Págate primero ── */
      .pp-aho-pagate {
          display: flex;
          align-items: center;
          gap: var(--pp-esp-3);
          padding: var(--pp-esp-4);
      }

      .pp-aho-pagate>div {
          flex: 1;
          min-width: 0;
      }

      .pp-aho-pagate b {
          color: var(--pp-texto);
      }

      .pp-aho-pagate>.pp-btn {
          flex-shrink: 0;
      }

      /* ── Ventanas ── */
      .pp-aho-modal .pp-segmentado>button {
          min-width: 0;
          padding: 0 6px;
          font-size: var(--pp-fs-13);
          white-space: normal;
          line-height: 1.2;
      }

      .pp-aho-archivar {
          color: var(--pp-negativo);
      }

      /* ── Cierre de caja ── */
      .pp-aho-cierre {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .pp-aho-cierre .pp-chip {
          margin-left: 4px;
          padding: 0 6px;
          font-size: 10px;
      }

      .pp-aho-cierre-pag {
          margin-top: 4px;
      }

      .pp-aho-cierre-fila {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
          gap: var(--pp-esp-2);
      }

      /* ── Inicio: disponible de verdad ── */
      .pp-aho-hud {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          margin-top: var(--pp-esp-3);
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pp-aho-hud>b {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .pp-aho-hud>small {
          font-size: var(--pp-fs-11);
          color: var(--pp-texto-3);
      }

      .pp-aho-hud:hover {
          border-color: var(--pp-acento);
      }

      /* ════════ 👁️ [VER COMO CLIENTE] Franja fija arriba para volver al panel ════════ */
      .vc-franja {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1003;
          box-sizing: border-box;
          min-height: 44px;
          padding: env(safe-area-inset-top) 8px 0 14px;
          display: none;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          background: #18181B;
          color: #FAFAFA;
          font: 500 13px/1.25 'Inter', system-ui, sans-serif;
      }

      .vc-franja-txt {
          display: flex;
          align-items: center;
          gap: 8px;
          min-width: 0;
      }

      .vc-franja-txt span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .vc-franja-txt svg {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          fill: none;
          stroke: currentColor;
          stroke-width: 2;
          opacity: .75;
      }

      .vc-franja-btn {
          flex-shrink: 0;
          height: 32px;
          padding: 0 12px;
          border: 0;
          border-radius: 8px;
          background: #FFFFFF;
          color: #18181B;
          font: 600 13px 'Inter', system-ui, sans-serif;
          cursor: pointer;
      }

      .vc-franja-btn:focus-visible {
          outline: 2px solid #FFFFFF;
          outline-offset: 2px;
      }

      /* Con la franja visible, el catálogo baja 44 px */
      html body.vc-activa #vista-cliente .header-cliente-fijo {
          top: 44px !important;
      }

      html body.vc-activa #vista-cliente>.header-marca {
          padding-top: 108px !important;
      }

      html body.vc-activa #vista-cliente .zona-filtros-sticky {
          top: 108px !important;
      }

      body.vc-activa:not(.ct-base) #contenedor {
          padding-top: 208px !important;
      }

      @media (max-width: 420px) {
          html body.vc-activa #vista-cliente>.header-marca {
              padding-top: 104px !important;
          }

          html body.vc-activa #vista-cliente .zona-filtros-sticky {
              top: 104px !important;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
         🖥️ [f95] FLUJO DE CAJA E INTELIGENCIA EN PC Y TABLET
         Desde 768 px usan todo el ancho, como Números: las tarjetas se acomodan
         en 2 columnas (3 en pantallas grandes) y las gráficas y tablas van a lo
         ancho. En el celular no cambia nada.
         ═══════════════════════════════════════════════════════════════════ */
      @media (min-width: 768px) {

          #mod-cfo.pp-cfo,
          #mod-inteligencia.pp-in {
              max-width: none;
          }

          /* Flujo de caja › Hoy: veredicto | caja libre · escalera | caja en riesgo */
          #cfo-panel-hoy:not([hidden]),
          #cfo-panel-equilibrio:not([hidden]) {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: var(--pp-esp-4);
              align-items: stretch;
          }

          #cfo-panel-hoy>*,
          #cfo-panel-equilibrio>* {
              margin: 0 !important;
              min-width: 0;
          }

          #cfo-panel-hoy>*>.pp-tarjeta {
              height: 100%;
              box-sizing: border-box;
          }

          #cfo-panel-hoy>:empty {
              display: none;
          }

          /* Flujo de caja › Equilibrio: datos | resultados, y la gráfica a lo ancho */
          #cfo-panel-equilibrio>.pp-tarjeta:last-child {
              grid-column: 1 / -1;
          }

          /* Inteligencia: tarjetas en columnas; resumen, alertas, pestañas, gráficas y tablas a lo ancho */
          #intel-contenido.pp-in-contenido {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: var(--pp-esp-4);
              align-items: stretch;
          }

          #intel-contenido>* {
              margin: 0 !important;
              min-width: 0;
          }

          #intel-contenido>:not(.pp-in-card),
          #intel-contenido>.pp-in-resumen,
          #intel-contenido>.pp-in-alertas,
          #intel-contenido>.pp-in-card:has(> svg),
          #intel-contenido>.pp-in-card:has(canvas),
          #intel-contenido>.pp-in-card:has(table) {
              grid-column: 1 / -1;
          }
      }

      @media (min-width: 1280px) {
          #intel-contenido.pp-in-contenido {
              grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          #mod-cfo .pp-cfo-pe {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }
      }

      /* 📦 [f96] Catálogo · Para reponer (solo cara B) */
      .cat-rep {
          margin-top: 14px;
          padding: 12px;
          border: 1px dashed var(--pp-borde-fuerte, #D4D4D8);
          border-radius: 14px;
          background: var(--pp-sutil, #F4F4F5);
      }

      .cat-rep-cab {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 2px;
      }

      .cat-rep-cab b {
          font-size: 14px;
          color: var(--pp-texto, #18181B);
      }

      .cat-rep-cab span {
          font-size: 11px;
          font-weight: 700;
          color: var(--pp-texto-3, #71717A);
      }

      .cat-rep .cat-swatch {
          min-height: 36px;
          padding: 6px 14px;
      }

      .item-card-mini .mini-rep {
          display: inline-block;
          margin-top: 6px;
          padding: 3px 8px;
          border-radius: 999px;
          background: var(--pp-aviso-suave, #FFFBEB);
          color: var(--pp-aviso, #B45309);
          font-size: 11px;
          font-weight: 700;
          line-height: 1.3;
      }

      .cat-rep .cat-swatch.activo {
          border-color: var(--pp-acento, #047857);
          background: var(--pp-acento-suave, #ECFDF5);
          color: var(--pp-acento-texto, #047857);
      }

      /* 🔒 [f97] Tabla de inventario: stock solo de lectura + Agotados */
      .pp-tabla-stock--lectura {
          flex-direction: column;
          justify-content: center;
          gap: 4px;
      }

      .pp-tabla-stock .pp-tabla-comprar {
          width: auto;
          height: 24px;
          padding: 0 9px;
          border: 1px solid var(--pp-acento, #047857);
          border-radius: 999px;
          background: var(--pp-acento-suave, #ECFDF5);
          color: var(--pp-acento-texto, #047857);
          font-size: 11px;
          font-weight: 600;
          line-height: 22px;
          white-space: nowrap;
      }

      .pp-tabla-rot {
          font-size: 12px;
          color: var(--pp-texto-2, #52525B);
          white-space: nowrap;
      }

      .pp-tabla-nota {
          margin: 0 0 10px;
          font-size: 12px;
          line-height: 1.45;
          color: var(--pp-texto-3, #71717A);
      }

      /* ═══════════════════════════════════════════════════════════
   ⚡ [f102] SPLASH «VIDRIO NEÓN»: el ícono «P!» arriba y «Pilas!» que se arma en 3D,
   letra por letra, de derecha a izquierda. La animación dura ~1,4 s; el splash se queda
   solo lo necesario (máximo 3 s). Siempre oscuro: así brilla el neón.
   ═══════════════════════════════════════════════════════════ */
      html body #splash-screen.sp-f102 {
          gap: 26px;
          perspective: 900px;
          background: radial-gradient(circle at 50% 40%, #11241A 0%, #08110C 55%, #030605 100%) !important;
      }

      #splash-screen.sp-f102 .sp-icono {
          width: 132px;
          height: 132px;
          border-radius: 30px;
          overflow: hidden;
          box-shadow: 0 0 0 1px rgba(92, 255, 149, .18), 0 18px 48px rgba(57, 255, 122, .22);
          animation: sp102-icono .62s cubic-bezier(.2, 1.3, .45, 1) both;
      }

      #splash-screen.sp-f102 .sp-tienda {
          display: block;
          width: 100%;
          height: 100%;
      }

      #splash-screen.sp-f102 .sp-palabra {
          display: flex;
          align-items: flex-end;
          transform-style: preserve-3d;
      }

      #splash-screen.sp-f102 .sp-l {
          height: 82px;
          width: auto;
          overflow: visible;
          opacity: 0;
          transform-origin: 50% 70%;
          backface-visibility: hidden;
          animation: sp102-letra .6s cubic-bezier(.2, .9, .25, 1.12) both;
          animation-delay: calc(.28s + var(--i) * .1s);
      }

      #splash-screen.sp-f102 .sp-palabra {
          animation: sp102-encender .5s ease 1.05s both;
      }

      #splash-screen.sp-f102 .sp-progreso {
          background: rgba(92, 255, 149, .14);
          animation: sp-aparecer .3s ease 1.9s forwards;
      }

      #splash-screen.sp-f102 .sp-progreso span {
          background: #39FF7A;
      }

      html body #splash-screen.sp-f102.splash-saliendo {
          animation: sp102-salir .3s ease forwards !important;
      }

      /* Con sesión guardada la bienvenida no se ve: Pilas entra directo al sistema */
      body.arranque-sesion #pantalla-inicio,
      body.arranque-sesion #modalClave {
          visibility: hidden !important;
      }

      @keyframes sp102-icono {
          0% {
              opacity: 0;
              transform: translateY(18px) scale(.6);
          }

          100% {
              opacity: 1;
              transform: none;
          }
      }

      @keyframes sp102-letra {
          0% {
              opacity: 0;
              transform: translate3d(70px, 0, -170px) rotateY(-100deg);
          }

          55% {
              opacity: 1;
          }

          100% {
              opacity: 1;
              transform: none;
          }
      }

      @keyframes sp102-encender {

          0%,
          100% {
              filter: none;
          }

          45% {
              filter: brightness(1.45) drop-shadow(0 0 10px rgba(57, 255, 122, .55));
          }
      }

      @keyframes sp102-salir {
          to {
              opacity: 0;
              visibility: hidden;
              transform: scale(1.04);
          }
      }

      @media (prefers-reduced-motion: reduce) {

          #splash-screen.sp-f102 .sp-icono,
          #splash-screen.sp-f102 .sp-l,
          #splash-screen.sp-f102 .sp-palabra {
              animation: none;
              opacity: 1;
          }
      }

      /* ════════ 📐 [f104] ESPACIO BAJO EL ENCABEZADO — los módulos aprovechan la pantalla ════════
   Antes se sumaban 3 espacios vacíos: el relleno del contenedor (20 px), el margen de
   #pantalla-activa (20 px, ahora quitado del index.html) y el relleno propio de cada
   módulo (0 a 26 px). Ahora: 12 px de aire en todos los módulos. */
      .contenido-dinamico-erp {
          padding-top: 12px !important;
      }

      #pantalla-activa>[id^="mod-"],
      #pantalla-activa>[id^="modulo-"] {
          padding-top: 0 !important;
      }

      #pantalla-activa> :first-child {
          margin-top: 0 !important;
      }

      /* Módulos que traen el espacio en su envoltura interna */
      #mod-agenda>.ag,
      #mod-juego-flujo>#jf-contenido,
      #mod-sri-fiscal>.sri-wrap,
      #mod-proveedores>.pp-prv-cont {
          padding-top: 0 !important;
          margin-top: 0 !important;
      }

      /* ════════ ↩️ [f108] DESHACER — barra compacta con el diseño del sistema ════════ */
      #toast-deshacer.dsh {
          position: fixed;
          left: 50%;
          bottom: calc(88px + env(safe-area-inset-bottom, 0px));
          z-index: 3200;
          transform: translate(-50%, 12px);
          opacity: 0;
          display: flex;
          align-items: center;
          gap: 10px;
          width: min(440px, calc(100% - 24px));
          box-sizing: border-box;
          padding: 8px 8px 8px 14px;
          overflow: hidden;
          background: var(--pp-superficie, #fff);
          color: var(--pp-texto, #18181B);
          border: 1px solid var(--pp-borde, #E4E4E7);
          border-radius: var(--pp-radio-l, 16px);
          box-shadow: var(--pp-sombra-flotante, 0 12px 32px rgba(0, 0, 0, .14));
          font-family: var(--pp-fuente, system-ui, sans-serif);
          transition: transform .22s ease, opacity .22s ease, width .25s ease, padding .25s ease, left .25s ease, border-radius .25s ease;
      }

      #toast-deshacer.dsh.dsh--ver {
          transform: translate(-50%, 0);
          opacity: 1;
      }

      #toast-deshacer .dsh-ico {
          width: 30px;
          height: 30px;
          flex-shrink: 0;
          display: grid;
          place-items: center;
          border-radius: 50%;
          background: var(--pp-acento-suave, #ECFDF5);
          color: var(--pp-acento-texto, #047857);
      }

      #toast-deshacer .dsh-ico .pp-icono {
          width: 17px;
          height: 17px;
      }

      #toast-deshacer .dsh-txt {
          flex: 1;
          min-width: 0;
          font-size: var(--pp-fs-13, 13px);
          font-weight: var(--pp-fw-medio, 500);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      #toast-deshacer .dsh-btn {
          flex-shrink: 0;
          min-height: 36px;
          padding: 0 14px;
          border: 0;
          border-radius: var(--pp-radio-m, 10px);
          background: var(--pp-sutil, #F4F4F5);
          color: var(--pp-acento-texto, #047857);
          font: var(--pp-fw-fuerte, 600) 13px/1 var(--pp-fuente, system-ui, sans-serif);
          cursor: pointer;
      }

      #toast-deshacer .dsh-btn:hover {
          background: var(--pp-acento-suave, #ECFDF5);
      }

      #toast-deshacer .dsh-x {
          flex-shrink: 0;
          width: 32px;
          height: 32px;
          display: grid;
          place-items: center;
          border: 0;
          border-radius: 50%;
          background: transparent;
          color: var(--pp-texto-3, #71717A);
          cursor: pointer;
      }

      #toast-deshacer .dsh-x .pp-icono {
          width: 16px;
          height: 16px;
      }

      #toast-deshacer .dsh-tiempo {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 2px;
          width: 100%;
          background: var(--pp-acento, #047857);
          transform-origin: left;
          animation: dshTiempo 20s linear forwards;
      }

      @keyframes dshTiempo {
          from {
              transform: scaleX(1)
          }

          to {
              transform: scaleX(0)
          }
      }

      /* Encogido: botón redondo a la derecha, sigue disponible mientras se pueda anular */
      #toast-deshacer.dsh.dsh--mini {
          left: auto;
          right: 14px;
          width: 48px;
          height: 48px;
          padding: 0;
          justify-content: center;
          border-radius: 50%;
          transform: none;
          cursor: pointer;
      }

      #toast-deshacer.dsh--mini .dsh-txt,
      #toast-deshacer.dsh--mini .dsh-btn,
      #toast-deshacer.dsh--mini .dsh-x,
      #toast-deshacer.dsh--mini .dsh-tiempo {
          display: none;
      }

      #toast-deshacer.dsh--mini .dsh-ico {
          width: 48px;
          height: 48px;
          background: transparent;
      }

      @media (min-width:900px) {
          #toast-deshacer.dsh {
              bottom: 28px;
          }
      }

      .dsh-hoja .pp-modal-panel {
          max-width: 420px;
      }

      .dsh-hoja-p {
          margin: 0 0 12px;
          font-size: var(--pp-fs-14, 14px);
          color: var(--pp-texto-2, #3F3F46);
      }

      @media (prefers-reduced-motion:reduce) {
          #toast-deshacer.dsh {
              transition: none
          }

          #toast-deshacer .dsh-tiempo {
              animation: none
          }
      }

      /* ════════ 📷 [f108] ESCÁNER con el diseño del sistema ════════ */
      #bc-scan-modal.bc-modal-overlay {
          background: var(--pp-velo, rgba(9, 9, 11, .45));
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
          align-items: flex-end;
          padding: 0;
          z-index: 3400;
      }

      @media (min-width:640px) {
          #bc-scan-modal.bc-modal-overlay {
              align-items: center;
              padding: 16px;
          }
      }

      #bc-scan-modal .bcs {
          display: flex;
          flex-direction: column;
          gap: 14px;
          width: 100%;
          max-width: 440px;
          max-height: 94dvh;
          padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
          box-sizing: border-box;
          background: var(--pp-superficie, #fff);
          color: var(--pp-texto, #18181B);
          border: 1px solid var(--pp-borde, #E4E4E7);
          border-radius: 20px 20px 0 0;
          box-shadow: var(--pp-sombra-flotante, 0 12px 32px rgba(0, 0, 0, .18));
          font-family: var(--pp-fuente, system-ui, sans-serif);
          animation: bcsSube .26s cubic-bezier(.22, 1, .36, 1);
      }

      @media (min-width:640px) {
          #bc-scan-modal .bcs {
              border-radius: var(--pp-radio-l, 20px);
              animation: bc-pop .25s cubic-bezier(.2, .9, .3, 1.2);
          }
      }

      @keyframes bcsSube {
          from {
              transform: translateY(24px);
              opacity: 0
          }

          to {
              transform: none;
              opacity: 1
          }
      }

      #bc-scan-modal .bcs-cab {
          display: flex;
          align-items: center;
          gap: 12px;
      }

      #bc-scan-modal .bcs-cab-ico {
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          display: grid;
          place-items: center;
          border-radius: var(--pp-radio-m, 12px);
          background: var(--pp-acento-suave, #ECFDF5);
          color: var(--pp-acento-texto, #047857);
      }

      #bc-scan-modal .bcs-cab-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      #bc-scan-modal .bcs-cab-txt b {
          font-size: var(--pp-fs-17, 17px);
          font-weight: var(--pp-fw-fuerte, 600);
          font-family: var(--pp-fuente-titulo, inherit);
      }

      #bc-scan-modal .bcs-cab-txt small {
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-3, #71717A);
      }

      #bc-scan-modal .bcs-visor {
          position: relative;
          width: 100%;
          aspect-ratio: 4 / 3;
          border-radius: var(--pp-radio-l, 16px);
          overflow: hidden;
          background: #0B0B0E;
      }

      #bc-scan-modal .bcs-visor video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      #bc-scan-modal .bcs-visor .bc-scan-marco {
          display: none;
      }

      #bc-scan-modal .bcs-zona {
          position: absolute;
          left: 12%;
          right: 12%;
          top: 30%;
          bottom: 30%;
      }

      #bc-scan-modal .bcs-esq {
          position: absolute;
          width: 26px;
          height: 26px;
          border: 3px solid #fff;
          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
      }

      #bc-scan-modal .bcs-esq.e1 {
          top: 0;
          left: 0;
          border-right: 0;
          border-bottom: 0;
          border-radius: 10px 0 0 0;
      }

      #bc-scan-modal .bcs-esq.e2 {
          top: 0;
          right: 0;
          border-left: 0;
          border-bottom: 0;
          border-radius: 0 10px 0 0;
      }

      #bc-scan-modal .bcs-esq.e3 {
          bottom: 0;
          left: 0;
          border-right: 0;
          border-top: 0;
          border-radius: 0 0 0 10px;
      }

      #bc-scan-modal .bcs-esq.e4 {
          bottom: 0;
          right: 0;
          border-left: 0;
          border-top: 0;
          border-radius: 0 0 10px 0;
      }

      #bc-scan-modal .bcs-visor .bc-scan-laser {
          position: absolute;
          left: 14%;
          right: 14%;
          top: 50%;
          height: 2px;
          margin: 0;
          border-radius: 2px;
          background: var(--pp-acento, #10B981);
          box-shadow: 0 0 12px var(--pp-acento, #10B981);
          animation: bcsLaser 1.8s ease-in-out infinite;
      }

      @keyframes bcsLaser {

          0%,
          100% {
              transform: translateY(-34px);
              opacity: .55
          }

          50% {
              transform: translateY(34px);
              opacity: 1
          }
      }

      #bc-scan-modal .bcs-linterna {
          position: absolute;
          right: 10px;
          bottom: 10px;
          width: 42px;
          height: 42px;
          display: grid;
          place-items: center;
          border: 0;
          border-radius: 50%;
          background: rgba(0, 0, 0, .45);
          color: #fff;
          cursor: pointer;
      }

      #bc-scan-modal .bcs-linterna[aria-pressed="true"] {
          background: #fff;
          color: #18181B;
      }

      #bc-scan-modal .bcs-linterna[hidden] {
          display: none;
      }

      #bc-scan-modal .bcs-estado {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          margin: 0;
          min-height: 36px;
          padding: 8px 12px;
          border-radius: var(--pp-radio-m, 12px);
          background: var(--pp-sutil, #F4F4F5);
          color: var(--pp-texto-2, #3F3F46);
          font-size: var(--pp-fs-13, 13px);
          font-weight: var(--pp-fw-medio, 500);
          text-align: center;
      }

      #bc-scan-modal .bcs-estado.ok {
          background: var(--pp-acento-suave, #ECFDF5);
          color: var(--pp-acento-texto, #047857);
      }

      #bc-scan-modal .bcs-estado.error {
          background: var(--pp-negativo-suave, #FEF2F2);
          color: var(--pp-negativo, #B91C1C);
      }

      #bc-scan-modal .bcs-modo {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-3, #71717A);
      }

      #bc-scan-modal .bcs-modo b {
          color: var(--pp-texto, #18181B);
      }

      #bc-scan-modal .bcs-manual {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      #bc-scan-modal .bcs-manual label {
          font-size: var(--pp-fs-12, 12px);
          font-weight: var(--pp-fw-medio, 500);
          color: var(--pp-texto-3, #71717A);
      }

      #bc-scan-modal .bcs-fila {
          display: flex;
          gap: 8px;
      }

      #bc-scan-modal .bcs-fila .pp-campo {
          flex: 1;
          min-width: 0;
          text-transform: uppercase;
      }

      #bc-scan-modal .bcs-fila .pp-btn {
          flex-shrink: 0;
      }

      #bc-scan-modal .pp-icono {
          width: 20px;
          height: 20px;
      }

      @media (prefers-reduced-motion:reduce) {

          #bc-scan-modal .bc-scan-laser,
          #bc-scan-modal .bcs {
              animation: none
          }
      }

      /* ════════ 🔎 [f108] BUSCADOR DE PRODUCTOS en Códigos ════════ */
      .etq-prod-sel {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
      }

      .etq-prod-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .etq-prod-txt b {
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .etq-prod-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .etq-bus {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: 8px;
          padding: 10px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
      }

      .etq-bus-q {
          position: relative;
      }

      .etq-bus-q .pp-icono {
          position: absolute;
          left: 11px;
          top: 50%;
          width: 18px;
          height: 18px;
          transform: translateY(-50%);
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      .etq-bus-q .pp-campo {
          width: 100%;
          padding-left: 36px;
          box-sizing: border-box;
      }

      .etq-bus-f {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .etq-bus-f .pp-campo,
      .etq-bus-f2 .pp-campo {
          min-width: 0;
          width: 100%;
          box-sizing: border-box;
      }

      .etq-bus-f2 {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 8px;
          align-items: center;
      }

      .etq-bus-f2 .pp-campo {
          width: auto;
      }

      .etq-bus-cab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .etq-bus-limpiar {
          border: 0;
          background: none;
          color: var(--pp-acento-texto);
          font: inherit;
          font-weight: var(--pp-fw-fuerte);
          cursor: pointer;
          padding: 4px 0;
      }

      .etq-bus-res {
          display: flex;
          flex-direction: column;
          gap: 6px;
          max-height: min(46vh, 380px);
          overflow-y: auto;
          overscroll-behavior: contain;
      }

      .etq-bus-it {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          text-align: left;
          font: inherit;
          cursor: pointer;
      }

      .etq-bus-it:hover {
          border-color: var(--pp-borde-fuerte);
      }

      .etq-bus-it.sel {
          border-color: var(--pp-acento);
          box-shadow: inset 3px 0 0 var(--pp-acento);
      }

      .etq-bus-it-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .etq-bus-it-txt b {
          font-size: var(--pp-fs-14);
          font-weight: var(--pp-fw-medio);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .etq-bus-it-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .etq-bus-it-n {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 2px;
          flex-shrink: 0;
      }

      .etq-bus-it-n b {
          font-size: var(--pp-fs-15);
          font-variant-numeric: tabular-nums;
      }

      .etq-bus-it-n small {
          font-size: 11px;
          color: var(--pp-texto-3);
      }

      .etq-bus-vacio {
          margin: 6px 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .etq-bus-f2 .pp-segmentado button {
          white-space: nowrap;
          padding-left: 8px;
          padding-right: 8px;
      }


      /* ════════ ✏️ [f116] POR PAGAR · menú ⋯, corregir y anular facturas ════════ */
      .pvp-fac {
          position: relative;
      }

      .pvp-fac>.pp-prv-fac-cab {
          padding-right: 40px;
      }

      .pvp-mas {
          position: absolute;
          top: 8px;
          right: 8px;
          width: 32px;
          height: 32px;
          display: grid;
          place-items: center;
          margin: 0;
          padding: 0;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          cursor: pointer;
      }

      .pvp-mas:hover,
      .pvp-mas[aria-expanded="true"] {
          background: var(--pp-sutil);
          color: var(--pp-texto);
      }

      .pvp-mas .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pvp-mas .pp-icono circle {
          fill: currentColor;
          stroke: none;
      }

      .pvp-menu {
          position: absolute;
          top: 44px;
          right: 8px;
          z-index: 30;
          width: min(270px, calc(100% - 16px));
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 6px;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: var(--pp-sombra-flotante);
      }

      .pvp-menu-op {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          width: 100%;
          margin: 0;
          padding: 9px 10px;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: none;
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: 14px;
          font-weight: var(--pp-fw-fuerte);
          text-align: left;
          cursor: pointer;
      }

      .pvp-menu-op:hover,
      .pvp-menu-op:focus-visible {
          background: var(--pp-sutil);
          outline: none;
      }

      .pvp-menu-op .pp-icono {
          width: 16px;
          height: 16px;
          margin-top: 2px;
          stroke-width: 2;
      }

      .pvp-menu-op small {
          display: block;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      .pvp-menu-op--peligro {
          color: var(--pp-negativo);
      }

      .pvp-menu-op--off {
          opacity: .6;
      }

      .pvp-anulada {
          opacity: .72;
      }

      .pvp-anulada .pp-prv-fac-tit {
          text-decoration: line-through;
      }

      .pvf-anular {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pvf-ef {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
      }

      .pvf-ef>div {
          display: flex;
          justify-content: space-between;
          gap: 12px;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pvf-ef b {
          color: var(--pp-texto);
          font-weight: var(--pp-fw-fuerte);
      }

      .pvf-opc {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .pvf-op {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          width: 100%;
          margin: 0;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .pvf-op i {
          flex: 0 0 16px;
          height: 16px;
          margin-top: 2px;
          border: 2px solid var(--pp-borde-fuerte);
          border-radius: 50%;
          box-sizing: border-box;
      }

      .pvf-op[aria-checked="true"] {
          border-color: var(--pp-acento);
          box-shadow: inset 0 0 0 1px var(--pp-acento);
          background: var(--pp-acento-suave);
      }

      .pvf-op[aria-checked="true"] i {
          border: 5px solid var(--pp-acento);
      }

      .pvf-op b {
          display: block;
          font-size: 14px;
          font-weight: var(--pp-fw-fuerte);
      }

      .pvf-op small {
          display: block;
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          line-height: 1.4;
          color: var(--pp-texto-3);
      }

      .pvf-op:disabled {
          opacity: .5;
          cursor: not-allowed;
      }

      .pvf-nota-aviso {
          color: var(--pp-aviso);
      }

      .pvf-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: -4px;
      }

      .pvf-chips .pp-chip {
          border: 1px solid var(--pp-borde);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          cursor: pointer;
      }

      .pvf-aviso {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          padding: 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          font-size: var(--pp-fs-13);
          line-height: 1.5;
      }

      .pvf-aviso .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pvf-hint-error {
          color: var(--pp-negativo);
      }

      /* ════════ 🧾 [f117] MOSTRADOR COMPACTO + «COBRAR» SIEMPRE A LA VISTA ════════
   · Arriba: quién vende y canal en una línea, pestañas más bajas y el
     código sin título (todo en ~150 px en vez de ~300 px).
   · El ticket crece con la página; «Cobrar $…» queda siempre a la vista,
     flotando sobre el menú de abajo.
   · La tarjeta «Agregado al ticket» flota sobre «Cobrar» y no empuja la lista.
   Solo tokens --pp-* (sirve en Clásico, Black, Orquídea, Andes y Papel). */
      /* 🐞 [f118] La entrada de los módulos (pilas-fadein) movía el contenedor con «transform», y un
   contenedor con transform encierra a todo lo «fijo»: «Cobrar» quedaba al final de la lista.
   En el Mostrador la entrada es solo con opacidad. */
      @keyframes pilas-fadein-op {
          from {
              opacity: 0;
          }

          to {
              opacity: 1;
          }
      }

      .modulo-fadein:has(> #mod-mostrador[style*="display: block"]) {
          animation-name: pilas-fadein-op;
          transform: none !important;
      }

      .modulo-fadein:has(> #mod-gasto[style*="display: block"]) {
          animation-name: pilas-fadein-op;
          transform: none !important;
      }

      /* 🐞 [f197] Gastos, igual que el Mostrador */

      #mod-mostrador.pp-pos {
          --pos-barra-abajo: calc(96px + env(safe-area-inset-bottom, 0px));
          padding-top: var(--pp-esp-2);
          padding-bottom: calc(var(--pos-barra-abajo) + 80px);
      }

      #mod-mostrador.pp-pos>*+* {
          margin-top: 10px;
      }

      /* 1. Quién vende + canal: una sola línea */
      #mod-mostrador .pp-pos-cab {
          align-items: center;
          gap: 8px;
      }

      #mod-mostrador .pp-pos-usuario {
          gap: 8px;
          padding: 0;
          background: none;
          border: 0;
          border-radius: 0;
      }

      #mod-mostrador .pp-pos-avatar {
          width: 30px;
          height: 30px;
          font-size: 12px;
      }

      #mod-mostrador .pp-pos-avatar .pp-icono {
          width: 16px;
          height: 16px;
      }

      #mod-mostrador .pp-pos-usuario-txt {
          flex-direction: row;
          align-items: baseline;
          gap: 6px;
      }

      #mod-mostrador .pp-pos-nombre {
          font-size: 14px;
      }

      #mod-mostrador #header-usuario-rol.pp-pos-rol {
          font-size: 12px;
          white-space: nowrap;
      }

      #mod-mostrador .pp-pos-canal {
          flex: 0 1 auto;
          max-width: 52%;
          min-height: 36px;
          flex-direction: row;
          align-items: center;
          gap: 6px;
          padding: 4px 30px 4px 12px;
          border-radius: var(--pp-radio-full);
      }

      #mod-mostrador .pp-pos-canal .pp-num-mini-rotulo {
          flex: 0 0 auto;
          font-size: 11px;
      }

      #mod-mostrador .pp-pos-canal select {
          min-width: 0;
          font-size: 13px;
          font-weight: var(--pp-fw-fuerte);
      }

      #mod-mostrador .pp-pos-canal-flecha {
          width: 16px;
          height: 16px;
          margin-top: -8px;
      }

      /* 2. Pestañas más bajas */
      #mod-mostrador .pp-pos-pestanas {
          padding: 3px;
      }

      #mod-mostrador .pp-pos-pestanas>.sub-mostrador {
          min-height: 34px;
          height: 34px;
          font-size: 12.5px;
      }

      /* 3. Paneles de agregar: sin título y con menos aire */
      #mod-mostrador .pp-pos-panel {
          gap: 8px;
          padding: 8px !important;
      }

      #mod-mostrador #sub-codigo>.pp-rotulo {
          position: absolute;
          width: 1px;
          height: 1px;
          margin: -1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
      }

      #mod-mostrador .pp-pos-panel .pp-rotulo {
          margin: 0;
          font-size: 12px;
      }

      #mod-mostrador #sub-codigo .pp-campo,
      #mod-mostrador #sub-codigo .pp-btn {
          min-height: 44px;
          height: 44px;
      }

      /* 4. Ticket compacto (la lista crece con la página; ya no tiene su propio scroll) */
      #mod-mostrador .pp-tk-lista {
          max-height: none;
          overflow: visible;
      }

      #mod-mostrador #pos-comprobante-zona:not(:empty) {
          padding: 8px 8px 0;
      }

      #mod-mostrador .pp-comprobante>button {
          min-height: 32px;
          height: 32px;
          font-size: 12.5px;
      }

      #mod-mostrador .pp-comprobante-nota {
          padding: 6px 10px;
          font-size: 12px;
      }

      #mod-mostrador .pp-tk-cab {
          padding: 8px 12px 6px;
      }

      #mod-mostrador .pp-tk-fila {
          gap: 8px;
          padding: 6px 2px 6px 10px;
      }

      #mod-mostrador .pp-tk-fila .pf-tk-foto {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          font-size: 11px;
      }

      #mod-mostrador .pp-tk-nombre {
          font-size: 14px;
          line-height: 1.25;
      }

      #mod-mostrador .pp-tk-meta {
          margin-top: 1px;
          font-size: 11.5px;
      }

      #mod-mostrador .pp-tk-meta .pp-mono {
          font-size: 11.5px;
      }

      #mod-mostrador .pp-tk-precio {
          height: 32px;
          width: 72px;
          font-size: 14px;
      }

      #mod-mostrador .pp-tk-signo {
          font-size: 14px;
      }

      #mod-mostrador .pp-tk-quitar {
          width: 32px;
          height: 32px;
      }

      #mod-mostrador .pp-tk-desglose {
          padding: 8px 12px 10px;
      }

      /* 5. «Cobrar $…» flota siempre a la vista sobre el menú de abajo (vacío: no se muestra) */
      #mod-mostrador #btn-cobrar-ticket.pp-pos-cobrar {
          position: fixed;
          left: 12px;
          right: 12px;
          bottom: var(--pos-barra-abajo);
          z-index: 95;
          width: auto;
          max-width: 576px;
          min-height: 56px;
          margin: 0 auto !important;
          border-radius: 16px;
          font-size: 18px;
          box-shadow: 0 10px 28px color-mix(in srgb, var(--pp-acento) 35%, transparent), 0 2px 6px rgba(0, 0, 0, .12);
      }

      #mod-mostrador #btn-cobrar-ticket.pp-pos-cobrar:disabled {
          opacity: 1;
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
          border-color: var(--pp-borde);
          box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
          cursor: not-allowed;
      }

      /* 🐞 [f118] visible e inhabilitado */

      /* En el celular, mientras se corrige un precio del ticket, «Cobrar» se aparta del teclado */
      @media (hover: none) {
          #mod-mostrador:has(.pp-tk-precio:focus) #btn-cobrar-ticket.pp-pos-cobrar {
              visibility: hidden;
          }
      }

      /* 6. «Agregado al ticket» flota sobre «Cobrar» (no empuja la lista) */
      #mod-mostrador #pos-verif.pf-verif:not([hidden]) {
          position: fixed;
          left: 12px;
          right: 12px;
          bottom: calc(var(--pos-barra-abajo) + 68px);
          z-index: 1200;
          /* sobre la cámara y Pili mientras se ve */
          max-width: 576px;
          margin: 0 auto !important;
      }

      #mod-mostrador #pos-verif .pf-verif-cuerpo {
          grid-template-columns: 72px 1fr auto;
          gap: 12px;
          padding: 10px 6px 8px 12px;
      }

      #mod-mostrador #pos-verif .pf-verif-foto {
          width: 72px;
          height: 72px;
          border-radius: 10px;
      }

      /* 7. Cámara y Pili (si están en su lugar de siempre) suben sobre «Cobrar» mientras hay productos */
      /* 🎨 [f221] Antes: body:has(#vista-erp.view-active #mod-mostrador[style*="display: block"]) #bc-scan-btn.bc-scan-flotante, body:has(#vista-erp.view-active #mod-mostrador[style*="display: block"]) #pili-mini · la clase la pone estilos-estado.js (misma especificidad) */
      body:not(#pp-z0):not(#pp-z1).pp-mos-on.pp-mos-on #bc-scan-btn.bc-scan-flotante,
      body:not(#pp-z0):not(#pp-z1).pp-mos-on.pp-mos-on #pili-mini {
          bottom: calc(164px + env(safe-area-inset-bottom, 0px)) !important;
      }

      /* ════════ 🧾 [f120] MOVIMIENTOS POR TICKET ════════ */
      .mov-herr {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin: 0 0 6px;
      }

      .mov-bus {
          position: relative;
          display: block;
      }

      .mov-bus .pp-icono {
          position: absolute;
          left: 11px;
          top: 50%;
          width: 18px;
          height: 18px;
          transform: translateY(-50%);
          color: var(--pp-texto-3);
          pointer-events: none;
      }

      .mov-bus .pp-campo {
          width: 100%;
          padding-left: 36px;
          box-sizing: border-box;
      }

      .mov-tipos {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
      }

      .mov-tipo {
          height: 30px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .mov-tipo[aria-pressed="true"] {
          background: var(--pp-texto);
          border-color: var(--pp-texto);
          color: var(--pp-superficie);
      }

      .mov-ico-n {
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          font-variant-numeric: tabular-nums;
      }

      .mov-ico-anu {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .mov-resumen {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .mov-tach {
          text-decoration: line-through;
          color: var(--pp-texto-3) !important;
          font-size: var(--pp-fs-12);
      }

      .pp-cie-mov-monto.mov-tach {
          font-size: var(--pp-fs-15);
      }

      .mov-anulada .pp-cie-mov-accion {
          color: var(--pp-texto-2);
      }

      .mov-contra {
          opacity: .75;
      }

      .mov-otra-fecha {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 100%;
          margin-top: 6px;
          padding: 10px 12px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          text-align: left;
          cursor: pointer;
      }

      .mov-otra-fecha .pp-icono {
          width: 16px;
          height: 16px;
          flex: 0 0 auto;
      }

      .mov-vacio {
          padding: 18px 8px;
          text-align: center;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
      }

      .mov-panel {
          gap: 12px;
      }

      .mov-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .mov-cli {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
      }

      .mov-cli b {
          display: block;
          color: var(--pp-texto);
      }

      .mov-cli small {
          display: block;
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-12);
      }

      .mov-cli-ini {
          flex: 0 0 32px;
          height: 32px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-size: 11px;
          font-weight: var(--pp-fw-fuerte);
      }

      .mov-lins {
          display: flex;
          flex-direction: column;
      }

      .mov-lin {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 0;
          border-top: 1px solid var(--pp-borde);
      }

      .mov-lin:first-child {
          border-top: 0;
      }

      .mov-foto {
          width: 42px;
          height: 42px;
          border-radius: 8px;
          cursor: default;
          font-size: 11px;
      }

      .mov-lin-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
          align-items: flex-start;
      }

      .mov-lin-txt b {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .mov-lin-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .mov-lin-p {
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .mov-lin-anu .mov-lin-txt b,
      .mov-lin-anu .mov-lin-p {
          text-decoration: line-through;
          color: var(--pp-texto-3);
      }

      .mov-tot {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .mov-tot>div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
      }

      .mov-tot-g {
          font-size: var(--pp-fs-17);
          font-weight: var(--pp-fw-fuerte);
          color: var(--pp-texto);
      }

      .mov-acc {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .mov-acc .pp-btn {
          gap: 6px;
          padding: 0 8px;
          font-size: var(--pp-fs-13);
      }

      .mov-acc .pp-icono {
          width: 16px;
          height: 16px;
      }

      .mov-pronto .pp-chip {
          margin-left: 2px;
          font-size: 10px;
      }

      .mov-peligro {
          color: var(--pp-negativo) !important;
          border-color: color-mix(in srgb, var(--pp-negativo) 35%, var(--pp-borde)) !important;
      }

      .mov-nota {
          margin: 0;
          font-size: var(--pp-fs-13);
          line-height: 1.5;
          color: var(--pp-texto-2);
      }

      .mov-sels {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .mov-sel {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          cursor: pointer;
          font-size: var(--pp-fs-13);
      }

      .mov-sel input {
          width: 18px;
          height: 18px;
          accent-color: var(--pp-negativo);
          flex: 0 0 auto;
      }

      .mov-sel-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .mov-sel-txt b {
          color: var(--pp-texto);
      }

      .mov-sel-txt small {
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-12);
      }

      .mov-sel-todo {
          background: var(--pp-sutil);
      }

      .mov-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: -4px;
      }

      .mov-chip {
          border: 1px solid var(--pp-borde);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          cursor: pointer;
      }

      .mov-sel-res {
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
          text-align: right;
      }

      @media (max-width:380px) {
          .mov-acc {
              grid-template-columns: 1fr;
          }
      }

      /* ════════ 🔁 [f121] DEVOLUCIONES (Movimientos › Detalle › Devolver) ════════ */
      .mov-chip-dev {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .mov-chip-merma {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
      }

      .mov-lin-dev .mov-lin-p {
          color: var(--pp-texto-3);
      }

      .mov-acc .mov-btn-dev {
          gap: 6px;
      }

      .mov-aviso,
      .mov-ok {
          margin: 0;
          padding: 8px 10px;
          border-radius: var(--pp-radio-m);
          font-size: var(--pp-fs-12);
          line-height: 1.45;
      }

      .mov-aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          border: 1px solid color-mix(in srgb, var(--pp-aviso) 25%, transparent);
      }

      .mov-aviso-neg {
          background: var(--pp-negativo-suave);
          color: var(--pp-negativo);
          border-color: color-mix(in srgb, var(--pp-negativo) 25%, transparent);
      }

      .mov-ok {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto, var(--pp-acento));
          border: 1px solid color-mix(in srgb, var(--pp-acento) 25%, transparent);
      }

      .mov-pend {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 10px 12px;
          border: 1px solid color-mix(in srgb, var(--pp-aviso) 35%, var(--pp-borde));
          border-radius: var(--pp-radio-m);
          background: var(--pp-aviso-suave);
      }

      .mov-pend-txt b {
          display: block;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto);
      }

      .mov-pend-txt small,
      .mov-pend-esp {
          display: block;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
          line-height: 1.45;
      }

      .mov-pend-btns {
          display: grid;
          grid-template-columns: 1fr 1.4fr;
          gap: 8px;
      }

      .mov-devs {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .mov-devs-tit {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .mov-dev-fila {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          padding: 9px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-13);
          text-align: left;
          cursor: pointer;
      }

      .mov-dev-fila>.pp-num {
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
      }

      .mov-dev-fila-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .mov-dev-fila-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      /* Pasos */
      .mov-paso {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--pp-texto-2);
      }

      .mov-paso b {
          display: inline-grid;
          place-items: center;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: var(--pp-texto);
          color: var(--pp-superficie);
          font-size: 10px;
      }

      .mov-paso span {
          color: var(--pp-texto-3);
      }

      /* Paso 1: productos */
      .mov-dv {
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
      }

      .mov-dv.on {
          border-color: var(--pp-acento);
          box-shadow: 0 0 0 1px var(--pp-acento);
          background: color-mix(in srgb, var(--pp-acento-suave) 45%, var(--pp-superficie));
      }

      .mov-dv-cab {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          cursor: pointer;
          font-size: var(--pp-fs-13);
      }

      .mov-dv-cab input,
      .mov-dv-todo input,
      .mov-dv-fuera input {
          width: 18px;
          height: 18px;
          flex: 0 0 auto;
          accent-color: var(--pp-acento);
      }

      .mov-dv-p {
          font-weight: var(--pp-fw-fuerte);
          white-space: nowrap;
      }

      .mov-dv-op {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 8px;
          padding: 0 12px 10px 40px;
      }

      .mov-dv-q {
          display: inline-flex;
          align-items: center;
          gap: 4px;
      }

      .mov-dv-q button {
          width: 32px;
          height: 32px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-size: 16px;
          font-weight: var(--pp-fw-fuerte);
          cursor: pointer;
      }

      .mov-dv-q button:disabled {
          opacity: .4;
          cursor: default;
      }

      .mov-dv-q>.pp-num {
          min-width: 22px;
          text-align: center;
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      .mov-dv-q small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .mov-dv-est {
          display: inline-flex;
          gap: 4px;
          flex-wrap: wrap;
      }

      .mov-dv-est button {
          height: 32px;
          padding: 0 10px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      .mov-dv-est button[aria-pressed="true"] {
          background: var(--pp-texto);
          border-color: var(--pp-texto);
          color: var(--pp-superficie);
      }

      .mov-dv-est button.mer[aria-pressed="true"] {
          background: var(--pp-aviso);
          border-color: var(--pp-aviso);
          color: #fff;
      }

      .mov-chip[aria-pressed="true"] {
          background: var(--pp-texto);
          border-color: var(--pp-texto);
          color: var(--pp-superficie);
      }

      /* Paso 2: reembolso */
      .mov-opcs {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .mov-opc {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .mov-opc[aria-pressed="true"] {
          border-color: var(--pp-acento);
          box-shadow: 0 0 0 1px var(--pp-acento);
      }

      .mov-opc-rd {
          flex: 0 0 18px;
          height: 18px;
          border-radius: 50%;
          border: 2px solid var(--pp-borde-fuerte);
          box-sizing: border-box;
      }

      .mov-opc[aria-pressed="true"] .mov-opc-rd {
          border: 5px solid var(--pp-acento);
      }

      .mov-opc-txt {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      .mov-opc-txt b {
          font-size: var(--pp-fs-13);
          display: flex;
          align-items: center;
          gap: 6px;
      }

      .mov-opc-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .mov-opc-off {
          opacity: .55;
          border-style: dashed;
          cursor: default;
      }

      .mov-opc-off .pp-chip {
          font-size: 10px;
      }

      .mov-dv-banco {
          width: 100%;
          box-sizing: border-box;
      }

      .mov-asi {
          display: flex;
          flex-direction: column;
          gap: 5px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .mov-asi>div {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 10px;
      }

      .mov-asi b {
          color: var(--pp-texto);
          white-space: nowrap;
      }

      .mov-asi .mov-asi-tit {
          font-size: var(--pp-fs-11);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--pp-texto);
      }

      .mov-asi b.mov-neg {
          color: var(--pp-negativo);
      }

      .mov-asi b.mov-pos {
          color: var(--pp-positivo, var(--pp-acento));
      }

      .mov-dv-fuera {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          cursor: pointer;
      }

      /* Nota de devolución */
      .mov-papel {
          padding: 12px 14px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-s);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente-mono, ui-monospace, monospace);
          font-size: 12px;
          line-height: 1.55;
      }

      .mov-papel hr {
          border: 0;
          border-top: 1px dashed var(--pp-borde-fuerte);
          margin: 6px 0;
      }

      .mov-papel-c {
          text-align: center;
      }

      .mov-papel-r {
          display: flex;
          justify-content: space-between;
          gap: 10px;
      }

      .mov-dev .pp-cie-mov-monto {
          color: var(--pp-texto);
      }

      /* ════════ 🎁 [f122] SALDO A FAVOR ════════ */
      .mov-chip-saf {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto, var(--pp-acento));
      }

      .mov-link {
          border: 0;
          background: none;
          padding: 0;
          margin-left: 4px;
          color: inherit;
          font: inherit;
          font-weight: var(--pp-fw-fuerte);
          text-decoration: underline;
          cursor: pointer;
      }

      .mov-dv-saf-ayuda {
          display: block;
          margin-top: -2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      /* Mostrador › Cobrar */
      .pos-saf-zona {
          margin-top: 2px;
      }

      .pos-saf-btn {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          box-sizing: border-box;
          padding: 10px 12px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .pos-saf-btn .pp-icono {
          width: 20px;
          height: 20px;
          flex: 0 0 auto;
          color: var(--pp-acento);
      }

      .pos-saf-btn span {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      .pos-saf-btn b {
          font-size: var(--pp-fs-13);
      }

      .pos-saf-btn small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pos-saf-res {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-sutil);
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-2);
      }

      .pos-saf-res>div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
      }

      .pos-saf-res b {
          color: var(--pp-texto);
      }

      .pos-saf-menos span {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          min-width: 0;
      }

      .pos-saf-menos .pp-icono {
          width: 16px;
          height: 16px;
          flex: 0 0 auto;
          color: var(--pp-acento);
      }

      .pos-saf-menos b {
          color: var(--pp-acento-texto, var(--pp-acento));
      }

      .pos-saf-queda {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pos-saf-pie {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          margin-top: 6px;
      }

      .pos-saf-pie small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pos-saf-quitar {
          border: 0;
          background: none;
          padding: 4px 0;
          color: var(--pp-negativo);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          cursor: pointer;
      }

      .pp-cobro.pos-saf-todo .pp-cobro-campo:not(.pos-saf-zona),
      .pp-cobro.pos-saf-todo #zona-banco {
          display: none !important;
      }

      /* Hoja para buscar el saldo y lista del Balance */
      .pos-saf-modal {
          z-index: 100000 !important;
      }

      .pos-saf-panel {
          gap: 12px;
      }

      .pos-saf-sub {
          margin-top: 2px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      .pos-saf-lista,
      .bal-saf-lista {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pos-saf-fila {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .pos-saf-fila>.pp-num {
          color: var(--pp-acento-texto, var(--pp-acento));
          font-size: var(--pp-fs-15);
          white-space: nowrap;
      }

      .pos-saf-fila-txt,
      .bal-saf-cli-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .pos-saf-fila-txt b,
      .bal-saf-cli-txt b {
          font-size: var(--pp-fs-13);
      }

      .pos-saf-fila-txt small,
      .bal-saf-cli-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pos-saf-vacio {
          margin: 4px 0 0;
          font-size: var(--pp-fs-13);
          color: var(--pp-texto-3);
          text-align: center;
      }

      .bal-saf-cli {
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
      }

      .bal-saf-cli summary {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          cursor: pointer;
          list-style: none;
      }

      .bal-saf-cli summary::-webkit-details-marker {
          display: none;
      }

      .bal-saf-cli summary>.pp-num {
          font-size: var(--pp-fs-15);
          white-space: nowrap;
      }

      .bal-saf-movs {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 0 12px 10px;
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .bal-saf-movs>div {
          display: flex;
          justify-content: space-between;
          gap: 10px;
      }

      .bal-saf-mas {
          color: var(--pp-acento-texto, var(--pp-acento));
      }

      .bal-saf-total {
          display: flex;
          justify-content: space-between;
          padding: 10px 4px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-15);
          font-weight: var(--pp-fw-fuerte);
      }

      .bal-fila-saf {
          cursor: pointer;
      }

      .bal-fila-saf small {
          font-weight: var(--pp-fw-normal);
          color: var(--pp-texto-3);
      }

      /* ════════ ⇄ [f123] CAMBIO ════════ */
      .mov-acc .mov-btn-cambio {
          gap: 6px;
      }

      .mov-dv-credito {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          font-size: var(--pp-fs-15);
          color: var(--pp-texto);
      }

      .mov-dv-credito b {
          font-size: var(--pp-fs-17);
      }

      /* Aviso del Mostrador en modo cambio */
      .pos-cambio-aviso {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border: 1px solid color-mix(in srgb, var(--pp-acento) 35%, var(--pp-borde));
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          color: var(--pp-texto);
      }

      .pos-cambio-ico {
          flex: 0 0 32px;
          height: 32px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: var(--pp-superficie);
          color: var(--pp-acento);
      }

      .pos-cambio-ico .pp-icono {
          width: 18px;
          height: 18px;
      }

      .pos-cambio-txt {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          font-size: var(--pp-fs-13);
      }

      .pos-cambio-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pos-cambio-x {
          flex: 0 0 auto;
          height: 32px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto-2);
          font-family: var(--pp-fuente);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-medio);
          cursor: pointer;
      }

      /* Cobrar: qué hacer con lo que sobra */
      .pos-saf-sobra {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-top: 8px;
      }

      .pos-saf-op {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          box-sizing: border-box;
          padding: 9px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font-family: var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .pos-saf-op[aria-pressed="true"] {
          border-color: var(--pp-acento);
          box-shadow: 0 0 0 1px var(--pp-acento);
      }

      .pos-saf-rd {
          flex: 0 0 18px;
          height: 18px;
          border-radius: 50%;
          border: 2px solid var(--pp-borde-fuerte);
          box-sizing: border-box;
      }

      .pos-saf-op[aria-pressed="true"] .pos-saf-rd {
          border: 5px solid var(--pp-acento);
      }

      .pos-saf-op-txt {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      .pos-saf-op-txt b {
          font-size: var(--pp-fs-13);
      }

      .pos-saf-op-txt small {
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-3);
      }

      /* ═══════════════════════════════════════════════════════════
   📒 [f124] MAYOR DE CUENTAS (mayor-cuentas.js)
   ═══════════════════════════════════════════════════════════ */
      .myc {
          padding-bottom: 96px;
      }

      .myc .myc-barra {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
          margin: 4px 0 10px;
      }

      .myc .myc-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          min-height: 36px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-full);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: 600 13px var(--pp-fuente);
          cursor: pointer;
      }

      .myc .myc-pill .pp-icono {
          width: 16px;
          height: 16px;
      }

      .myc .myc-sello {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          min-height: 30px;
          padding: 0 10px;
          border-radius: var(--pp-radio-full);
          font: 700 12px var(--pp-fuente);
          border: 0;
          cursor: pointer;
      }

      .myc .myc-sello.ok {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .myc .myc-sello.av {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
      }

      .myc .myc-sello.esp {
          background: var(--pp-sutil);
          color: var(--pp-texto-3);
      }

      .myc .myc-bus {
          display: flex;
          align-items: center;
          gap: 8px;
          height: 42px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          padding: 0 12px;
          background: var(--pp-superficie);
      }

      .myc .myc-bus .pp-icono {
          width: 16px;
          height: 16px;
          color: var(--pp-texto-3);
          flex: 0 0 auto;
      }

      .myc .myc-bus input {
          flex: 1;
          min-width: 0;
          border: 0;
          outline: 0;
          background: transparent;
          color: var(--pp-texto);
          font: 14px var(--pp-fuente);
      }

      .myc .myc-grp {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          margin-top: 10px;
          overflow: hidden;
      }

      .myc .myc-gh {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
          padding: 11px 12px;
          background: var(--pp-sutil);
          border: 0;
          color: var(--pp-texto);
          font: 700 12.5px var(--pp-fuente);
          letter-spacing: .03em;
          text-align: left;
          cursor: pointer;
      }

      .myc .myc-gh .myc-car {
          display: inline-block;
          width: 14px;
          color: var(--pp-texto-3);
          font-size: 10px;
      }

      .myc .myc-gh .myc-num {
          font-variant-numeric: tabular-nums;
      }

      .myc .myc-cta {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 12px;
          border: 0;
          border-top: 1px solid var(--pp-sutil);
          background: transparent;
          color: var(--pp-texto);
          text-align: left;
          cursor: pointer;
          font-family: var(--pp-fuente);
      }

      .myc .myc-cta:active {
          background: var(--pp-sutil);
      }

      .myc .myc-cta.myc-fija {
          cursor: default;
          background: var(--pp-sutil);
      }

      .myc .myc-cta .myc-n {
          flex: 1;
          min-width: 0;
          font-size: 13.5px;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .myc .myc-cod {
          display: block;
          font: 400 11px var(--pp-fuente-mono);
          color: var(--pp-texto-3);
      }

      .myc .myc-s {
          font-weight: 700;
          font-size: 13.5px;
          font-variant-numeric: tabular-nums;
      }

      .myc .myc-s.neg {
          color: var(--pp-negativo);
      }

      .myc .myc-ch {
          color: var(--pp-texto-off);
          font-size: 15px;
      }

      .myc .myc-sub {
          padding: 6px 12px 2px 26px;
          font: 700 10.5px var(--pp-fuente);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          border-top: 1px solid var(--pp-sutil);
      }

      .myc .myc-vacio {
          padding: 28px 12px;
          text-align: center;
          color: var(--pp-texto-3);
          font-size: 13.5px;
          line-height: 1.5;
      }

      .myc .myc-nota {
          font-size: 12px;
          color: var(--pp-texto-3);
          line-height: 1.45;
          margin: 10px 2px 0;
      }

      /* Libro de la cuenta */
      .myc .myc-cab {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          margin-bottom: 8px;
      }

      .myc .myc-vol {
          width: 36px;
          height: 36px;
          flex: 0 0 36px;
          border-radius: var(--pp-radio-m);
          border: 1px solid var(--pp-borde);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          display: grid;
          place-items: center;
          cursor: pointer;
      }

      .myc .myc-vol .pp-icono {
          width: 18px;
          height: 18px;
      }

      .myc .myc-cab b {
          display: block;
          font: 700 17px var(--pp-fuente-marca);
          color: var(--pp-texto);
      }

      .myc .myc-ini {
          display: flex;
          justify-content: space-between;
          gap: 8px;
          background: var(--pp-sutil);
          border-radius: var(--pp-radio-m);
          padding: 9px 12px;
          font-size: 13px;
          color: var(--pp-texto-2);
          margin-bottom: 8px;
      }

      .myc .myc-ini b {
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .myc .myc-lista {
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          padding: 0 10px;
      }

      .myc .myc-dia {
          padding: 9px 2px 3px;
          font: 700 10.5px var(--pp-fuente);
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .myc .myc-led {
          width: 100%;
          display: flex;
          gap: 10px;
          align-items: flex-start;
          padding: 9px 2px;
          border: 0;
          border-top: 1px solid var(--pp-sutil);
          background: transparent;
          color: var(--pp-texto);
          text-align: left;
          cursor: pointer;
          font-family: var(--pp-fuente);
      }

      .myc .myc-dia+.myc-led {
          border-top: 0;
      }

      .myc .myc-led .myc-c {
          flex: 1;
          min-width: 0;
      }

      .myc .myc-led .myc-c b {
          display: block;
          font-size: 13px;
      }

      .myc .myc-led .myc-c span {
          display: block;
          font-size: 12px;
          color: var(--pp-texto-2);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .myc .myc-led .myc-v {
          text-align: right;
          font-variant-numeric: tabular-nums;
          flex: 0 0 auto;
      }

      .myc .myc-led .myc-v b {
          display: block;
          font-size: 13.5px;
      }

      .myc .myc-led .myc-v small {
          font-size: 11px;
          color: var(--pp-texto-3);
      }

      .myc .myc-led.anu {
          opacity: .55;
      }

      .myc .myc-led.anu .myc-v b {
          text-decoration: line-through;
      }

      .myc .myc-sube {
          color: var(--pp-positivo);
      }

      .myc .myc-baja {
          color: var(--pp-negativo);
      }

      .myc .myc-mas {
          width: 100%;
          margin: 8px 0;
      }

      .myc .myc-pie {
          position: sticky;
          bottom: 76px;
          z-index: 5;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 6px;
          margin-top: 10px;
          padding: 10px 12px;
          border-radius: var(--pp-radio-l);
          background: var(--pp-texto);
          color: var(--pp-fondo);
          font-size: 11px;
          box-shadow: var(--pp-sombra-flotante);
      }

      .myc .myc-pie b {
          display: block;
          font-size: 14px;
          font-variant-numeric: tabular-nums;
      }

      .myc .myc-pie div:last-child {
          text-align: right;
      }

      .myc .myc-aviso {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          border-radius: var(--pp-radio-m);
          padding: 9px 11px;
          font-size: 12.5px;
          line-height: 1.45;
          margin-bottom: 8px;
      }

      /* Hojas (período, asiento, cuadre) */
      .myc-velo {
          position: fixed;
          inset: 0;
          z-index: var(--pp-z-modal);
          background: var(--pp-velo);
          display: flex;
          align-items: flex-end;
          justify-content: center;
      }

      .myc-hoja {
          width: 100%;
          max-width: 560px;
          max-height: 92vh;
          overflow: auto;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          border-radius: 18px 18px 0 0;
          padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
          display: flex;
          flex-direction: column;
          gap: 12px;
          font-family: var(--pp-fuente);
      }

      @media (min-width: 700px) {
          .myc-velo {
              align-items: center;
          }

          .myc-hoja {
              border-radius: 18px;
          }
      }

      .myc-hoja .myc-hc {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
      }

      .myc-hoja .myc-hc b {
          font: 700 16px var(--pp-fuente-marca);
      }

      .myc-hoja .myc-hc small {
          display: block;
          font-size: 12px;
          color: var(--pp-texto-3);
          margin-top: 2px;
      }

      .myc-hoja .myc-x {
          width: 32px;
          height: 32px;
          flex: 0 0 32px;
          border-radius: 50%;
          border: 0;
          background: var(--pp-sutil);
          color: var(--pp-texto);
          display: grid;
          place-items: center;
          cursor: pointer;
      }

      .myc-hoja .myc-x .pp-icono {
          width: 16px;
          height: 16px;
      }

      .myc-hoja .myc-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
      }

      .myc-hoja .myc-chips button {
          min-height: 34px;
          padding: 0 12px;
          border-radius: var(--pp-radio-full);
          border: 1px solid var(--pp-borde-fuerte);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: 600 13px var(--pp-fuente);
          cursor: pointer;
      }

      .myc-hoja .myc-chips button.on {
          background: var(--pp-texto);
          color: var(--pp-fondo);
          border-color: var(--pp-texto);
      }

      .myc-hoja .myc-dos {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .myc-hoja label {
          display: flex;
          flex-direction: column;
          gap: 4px;
          font-size: 11.5px;
          color: var(--pp-texto-3);
          font-weight: 600;
      }

      .myc-hoja input[type=date],
      .myc-hoja input[type=search] {
          height: 42px;
          border: 1px solid var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m);
          padding: 0 10px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: 14px var(--pp-fuente);
      }

      .myc-hoja .myc-sw {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          font-size: 13.5px;
          font-weight: 600;
          color: var(--pp-texto);
      }

      .myc-hoja .myc-sw input {
          width: 20px;
          height: 20px;
          accent-color: var(--pp-acento);
      }

      .myc-hoja .myc-ok {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          border-radius: var(--pp-radio-m);
          padding: 9px 11px;
          font-size: 12.5px;
          line-height: 1.45;
      }

      .myc-hoja .myc-av {
          background: var(--pp-aviso-suave);
          color: var(--pp-aviso);
          border-radius: var(--pp-radio-m);
          padding: 9px 11px;
          font-size: 12.5px;
          line-height: 1.45;
      }

      .myc-hoja table {
          width: 100%;
          border-collapse: collapse;
          font-size: 12.5px;
      }

      .myc-hoja th {
          font-size: 10.5px;
          text-transform: uppercase;
          letter-spacing: .05em;
          color: var(--pp-texto-3);
          text-align: right;
          padding: 6px 4px;
          border-bottom: 1px solid var(--pp-borde);
      }

      .myc-hoja th:first-child,
      .myc-hoja td:first-child {
          text-align: left;
      }

      .myc-hoja td {
          padding: 7px 4px;
          border-bottom: 1px solid var(--pp-sutil);
          text-align: right;
          font-variant-numeric: tabular-nums;
          vertical-align: top;
      }

      .myc-hoja td .myc-cod {
          display: block;
          font: 400 10.5px var(--pp-fuente-mono);
          color: var(--pp-texto-3);
      }

      .myc-hoja tr.myc-t td {
          font-weight: 700;
          border-top: 2px solid var(--pp-texto);
          border-bottom: 0;
      }

      .myc-hoja .myc-acc {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .myc-hoja .myc-acc.uno {
          grid-template-columns: 1fr;
      }

      /* Enlaces › desde el Balance y el E.R. */
      .myc-enlace,
      .myc-er-enlace {
          cursor: pointer;
      }

      .myc-enlace .bal-fila-valor::after,
      .myc-er-enlace .pp-er-fila-valor::after {
          content: ' ›';
          color: var(--pp-acento-texto);
          font-weight: 700;
      }

      .myc-enlace:active,
      .myc-er-enlace:active {
          background: var(--pp-sutil);
      }

      /* ═══════════════════════════════════════════════════════════
   📒 [f125] MAYOR: pestañas, Balance de comprobación y Exportar (mayor-reportes.js)
   ═══════════════════════════════════════════════════════════ */
      .myc .myc-tabs {
          display: flex;
          align-items: center;
          gap: 8px;
          margin: 0 0 10px;
      }

      .myc .myc-tabs .pp-segmentado {
          flex: 1;
          min-width: 0;
      }

      .myc .myc-exp {
          flex: 0 0 auto;
      }

      .myc .myc-comp {
          padding: 4px 8px;
          overflow-x: auto;
      }

      .myc .myc-comp table {
          width: 100%;
          border-collapse: collapse;
          font-size: 12px;
      }

      .myc .myc-comp th {
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: .05em;
          color: var(--pp-texto-3);
          text-align: right;
          padding: 8px 4px 6px;
          border-bottom: 1px solid var(--pp-borde);
      }

      .myc .myc-comp th:first-child,
      .myc .myc-comp td:first-child {
          text-align: left;
      }

      .myc .myc-comp td {
          padding: 7px 4px;
          border-bottom: 1px solid var(--pp-sutil);
          text-align: right;
          font-variant-numeric: tabular-nums;
          vertical-align: top;
          color: var(--pp-texto);
      }

      .myc .myc-comp td:first-child {
          font-weight: 600;
          max-width: 150px;
      }

      .myc .myc-comp tbody tr {
          cursor: pointer;
      }

      .myc .myc-comp tbody tr:active td {
          background: var(--pp-sutil);
      }

      .myc .myc-comp tr.myc-t td {
          font-weight: 700;
          border-top: 2px solid var(--pp-texto);
          border-bottom: 0;
          cursor: default;
      }

      .myc-hoja .myc-opcs {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .myc-hoja .myc-opc {
          display: flex;
          gap: 10px;
          align-items: center;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: 600 14px var(--pp-fuente);
          text-align: left;
          cursor: pointer;
      }

      .myc-hoja .myc-opc small {
          display: block;
          font-weight: 400;
          font-size: 12px;
          color: var(--pp-texto-3);
          margin-top: 2px;
      }

      .myc-hoja .myc-opc .myc-rd {
          flex: 0 0 18px;
          height: 18px;
          border-radius: 50%;
          border: 2px solid var(--pp-borde-fuerte);
      }

      .myc-hoja .myc-opc.on {
          border: 2px solid var(--pp-acento);
          padding: 9px 11px;
      }

      .myc-hoja .myc-opc.on .myc-rd {
          border: 5px solid var(--pp-acento);
      }

      .myc-hoja .myc-nota {
          font-size: 12px;
          color: var(--pp-texto-3);
          line-height: 1.45;
      }

      .myc-hoja button:disabled {
          opacity: .55;
      }

      /* ═══════════════════════════════════════════════════════════
   📒 [f126] MAYOR · Fase 3: contador (solo lectura) y consolidado de sucursales
   ═══════════════════════════════════════════════════════════ */
      .myc .myc-alcance {
          margin: 0 0 8px;
      }

      .myc-nav {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 6px;
          margin: 0 0 12px;
          padding: 4px;
          border-radius: var(--pp-radio-l);
          background: var(--pp-sutil);
      }

      .myc-nav button {
          min-height: 38px;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-2);
          font: 600 13.5px var(--pp-fuente);
          cursor: pointer;
      }

      .myc-nav button.on {
          background: var(--pp-superficie);
          color: var(--pp-texto);
          box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
      }

      /* El contador solo ve Contabilidad: sin barra de abajo ni botones flotantes de venta */
      body.rol-contador .bottom-nav,
      body.rol-contador #btn-inicio-flotante,
      body.rol-contador #btn-red-pilas-fab,
      body.rol-contador #btn-pili-flotante,
      body.rol-contador #btn-camara-flotante,
      body.rol-contador .nav-app-container {
          display: none !important;
      }

      body.rol-contador .myc {
          padding-bottom: 24px;
      }

      body.rol-contador .myc .myc-pie {
          bottom: 8px;
      }

      /* ═══════════════════════════════════════════════════════════════════
   📱 [f127] iPHONE INSTALADO: el header deja espacio a la hora, la batería y la isla
   Con la barra de estado translúcida, el sistema dibuja la hora ENCIMA de la app.
   --pp-sat = alto de esa barra en cada iPhone (0 en Android, PC y navegador).
   ═══════════════════════════════════════════════════════════════════ */
      :root {
          --pp-sat: env(safe-area-inset-top, 0px);
      }

      #vista-erp .header-erp {
          height: calc(60px + var(--pp-sat));
          padding-top: var(--pp-sat);
      }

      #vista-erp .header-erp .hdr-logo-centro {
          top: calc(50% + var(--pp-sat) / 2);
      }

      /* logo o nombre del módulo, centrado bajo la hora */
      .contenido-dinamico-erp {
          top: calc(60px + var(--pp-sat));
      }

      #menu-lateral {
          padding-top: var(--pp-sat);
          box-sizing: border-box;
      }

      #vista-erp .alertas-panel,
      #bc-scan-btn.bc-scan-flotante {
          margin-top: var(--pp-sat);
      }

      @media (max-width: 640px) {
          #vista-erp #centro-alertas-panel.alertas-panel {
              margin-top: 0;
          }
      }

      /* Catálogo de clientes (también se instala) */
      .header-cliente-fijo {
          height: calc(50px + var(--pp-sat));
          padding-top: calc(5px + var(--pp-sat));
      }

      .header-cliente-fijo .btn-admin-config {
          margin-top: var(--pp-sat);
      }

      html body.ct-base:not(.vc-activa) #vista-cliente>.header-marca {
          padding-top: calc(64px + var(--pp-sat)) !important;
      }

      html body:not(.vc-activa):not(.ce-b-lupa):not(.ce-lado) #vista-cliente .zona-filtros-sticky {
          top: calc(64px + var(--pp-sat)) !important;
      }

      body:not(.ct-base) #vista-cliente #contenedor {
          margin-top: var(--pp-sat);
      }

      @media (max-width: 420px) {
          html body.ct-base:not(.vc-activa) #vista-cliente>.header-marca {
              padding-top: calc(60px + var(--pp-sat)) !important;
          }

          html body:not(.vc-activa):not(.ce-b-lupa):not(.ce-lado) #vista-cliente .zona-filtros-sticky {
              top: calc(60px + var(--pp-sat)) !important;
          }
      }

      /* «Ver como cliente»: la franja ocupa la barra de estado; el catálogo va debajo */
      .vc-franja {
          min-height: calc(44px + var(--pp-sat));
      }

      html body.vc-activa #vista-cliente .header-cliente-fijo {
          top: calc(44px + var(--pp-sat)) !important;
          height: 50px;
          padding-top: 5px;
      }

      html body.vc-activa #vista-cliente .header-cliente-fijo .btn-admin-config {
          margin-top: 0;
      }

      html body.vc-activa.ct-base #vista-cliente>.header-marca {
          padding-top: calc(108px + var(--pp-sat)) !important;
      }

      html body.vc-activa:not(.ce-b-lupa):not(.ce-lado) #vista-cliente .zona-filtros-sticky {
          top: calc(108px + var(--pp-sat)) !important;
      }

      @media (max-width: 420px) {
          html body.vc-activa.ct-base #vista-cliente>.header-marca {
              padding-top: calc(104px + var(--pp-sat)) !important;
          }

          html body.vc-activa:not(.ce-b-lupa):not(.ce-lado) #vista-cliente .zona-filtros-sticky {
              top: calc(104px + var(--pp-sat)) !important;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   🖥️ [f127] TABLET Y PC: Movimientos, Mostrador y Estado de Resultados a todo el ancho
   (como Números). En el celular no cambia nada.
   ═══════════════════════════════════════════════════════════════════ */
      /* Mostrador: ticket + Cobrar van juntos (en el celular el envoltorio no existe para el diseño) */
      #mod-mostrador .pp-pos-lado {
          display: contents;
      }

      #mod-mostrador .pp-pos-lado>.pp-tk {
          margin-top: 10px;
      }

      /* E.R.: las secciones del reporte (en el celular, una debajo de otra como siempre) */
      .pp-er-secs {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      @media (min-width: 768px) {

          /* ── Movimientos: resumen a la izquierda, lista del día a la derecha ── */
          #mod-cierre.pp-cie {
              max-width: none;
          }

          #dashboard-caja.pp-cie-dash[style*="block"] {
              display: grid !important;
              grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
              grid-template-rows: repeat(8, auto) 1fr;
              /* la última fila absorbe el alto de la lista */
              column-gap: var(--pp-esp-4);
              row-gap: var(--pp-esp-3);
              align-items: start;
          }

          #dashboard-caja.pp-cie-dash>* {
              grid-column: 1;
              margin: 0 !important;
              min-width: 0;
          }

          #dashboard-caja.pp-cie-dash>#zona-historial {
              grid-column: 2;
              grid-row: 1 / span 9;
          }

          #dashboard-caja .pp-cie-movs {
              max-height: none;
              overflow: visible;
          }

          /* ── Mostrador: productos a la izquierda; ticket y «Cobrar» fijos a la derecha ── */
          #mod-mostrador.pp-pos {
              max-width: none;
              padding-bottom: 120px;
          }

          #mod-mostrador.pp-pos[style*="block"] {
              display: grid !important;
              grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
              grid-template-rows: repeat(11, auto) 1fr;
              column-gap: var(--pp-esp-4);
              align-items: start;
          }

          #mod-mostrador.pp-pos>* {
              grid-column: 1;
              min-width: 0;
          }

          #mod-mostrador.pp-pos>.pp-pos-lado {
              grid-column: 2;
              grid-row: 1 / span 12;
              display: flex;
              flex-direction: column;
              gap: 10px;
              position: sticky;
              top: 8px;
              margin-top: 0 !important;
          }

          #mod-mostrador .pp-pos-lado>.pp-tk {
              margin-top: 0;
          }

          #mod-mostrador .pp-tk-lista {
              max-height: calc(100vh - var(--pp-sat) - 360px);
              min-height: 120px;
              overflow-y: auto;
          }

          #mod-mostrador #btn-cobrar-ticket.pp-pos-cobrar {
              position: static;
              width: 100%;
              max-width: none;
              box-shadow: none;
          }

          #mod-mostrador #pos-verif.pf-verif:not([hidden]) {
              position: static;
              max-width: none;
          }

          /* 🎨 [f221] Antes: body:has(#vista-erp.view-active #mod-mostrador[style*="display: block"]) #bc-scan-btn.bc-scan-flotante, body:has(#vista-erp.view-active #mod-mostrador[style*="display: block"]) #pili-mini · la clase la pone estilos-estado.js (misma especificidad) */
          body:not(#pp-z0):not(#pp-z1).pp-mos-on.pp-mos-on #bc-scan-btn.bc-scan-flotante,
          body:not(#pp-z0):not(#pp-z1).pp-mos-on.pp-mos-on #pili-mini {
              bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
          }

          /* ── Estado de Resultados: filtros | resultado arriba; secciones en 2 columnas ── */
          #mod-estado-resultados.pp-rep {
              max-width: none;
          }

          #mod-estado-resultados.pp-rep[style*="block"] {
              display: grid !important;
              grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
              column-gap: var(--pp-esp-4);
              row-gap: var(--pp-esp-4);
              align-items: start;
          }

          #mod-estado-resultados.pp-rep>* {
              margin: 0 !important;
              min-width: 0;
          }

          #mod-estado-resultados.pp-rep>.pp-rep-cab,
          #mod-estado-resultados.pp-rep>.myc-nav {
              grid-column: 1 / -1;
          }

          #mod-estado-resultados.pp-rep>.pp-er-controles {
              grid-column: 1;
          }

          #pantalla-reporte-financiero.pp-er-reporte,
          #pantalla-reporte-financiero .pp-er-cuerpo {
              display: contents;
          }

          #pantalla-reporte-financiero>*,
          #pantalla-reporte-financiero .pp-er-resumen {
              grid-column: 2;
          }

          #pantalla-reporte-financiero .pp-er-secs {
              grid-column: 1 / -1;
              display: block;
              columns: 2;
              column-gap: var(--pp-esp-4);
          }

          #pantalla-reporte-financiero .pp-er-secs>* {
              break-inside: avoid;
              margin: 0 0 var(--pp-esp-4);
          }
      }

      @media (min-width: 1280px) {
          #dashboard-caja.pp-cie-dash[style*="block"] {
              grid-template-columns: 400px minmax(0, 1fr);
          }

          #mod-mostrador.pp-pos[style*="block"] {
              grid-template-columns: minmax(0, 1fr) 380px;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   🧾 [f127] SALIDA DE DINERO: IVA por tarifa (0 · 5 · 8 · 15 · Otro)
   ═══════════════════════════════════════════════════════════════════ */
      .pp-gas-tarifa {
          display: flex;
          margin-top: 2px;
      }

      .pp-gas-tarifa>button {
          flex: 1;
          min-width: 0;
      }

      .pp-gas-otro {
          margin-top: 10px;
      }

      .pp-gas-otro[hidden] {
          display: none;
      }

      .pp-gas-ivares {
          display: flex;
          flex-direction: column;
          margin-top: 10px;
          padding: 4px 12px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          border: 1px solid color-mix(in srgb, var(--pp-acento) 22%, transparent);
      }

      .pp-gas-ivares:empty {
          display: none;
      }

      .pp-gas-ivares>div {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          padding: 7px 0;
          font-size: 13.5px;
          color: var(--pp-texto);
      }

      .pp-gas-ivares>div+div {
          border-top: 1px solid color-mix(in srgb, var(--pp-acento) 18%, transparent);
      }

      .pp-gas-ivares b {
          font-variant-numeric: tabular-nums;
      }

      .pp-gas-ayuda.pp-gas-error {
          color: var(--pp-negativo);
          font-weight: 600;
      }

      /* ═══════════════════════════════════════════════════════════════════
   📦 [f127] INVENTARIO: total de la familia (unidades × costo y con IVA)
   ═══════════════════════════════════════════════════════════════════ */
      .pp-pe-total {
          display: flex;
          flex-direction: column;
          margin-top: 10px;
          padding: 6px 12px 4px;
          border-radius: var(--pp-radio-m);
          background: var(--pp-acento-suave);
          border: 1px solid color-mix(in srgb, var(--pp-acento) 22%, transparent);
      }

      .pp-pe-total[hidden] {
          display: none;
      }

      .pp-pe-total-tit {
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--pp-acento-texto);
          padding: 2px 0 4px;
      }

      .pp-pe-total-fila {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          padding: 6px 0;
          font-size: 13.5px;
          color: var(--pp-texto);
          border-top: 1px solid color-mix(in srgb, var(--pp-acento) 18%, transparent);
      }

      .pp-pe-total-fila b {
          font-variant-numeric: tabular-nums;
      }

      /* ═══════════════════════════════════════════════════════════════════
   📑 [f127] EXPORTAR (E.R. y Balance) y BALANCE GENERAL POR FECHAS
   ═══════════════════════════════════════════════════════════════════ */
      .pp-rep-cab.pp-rf-cab {
          position: relative;
          padding-right: 112px;
      }

      .pp-rf-exp {
          position: absolute;
          top: 0;
          right: 0;
          min-height: 36px;
          height: 36px;
          padding: 0 14px;
      }

      .pp-bf-barra {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 8px;
      }

      .pp-bf-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          min-height: 36px;
          padding: 0 14px;
          border: 1px solid var(--pp-borde);
          border-radius: 999px;
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: 600 13px var(--pp-fuente);
          cursor: pointer;
      }

      .pp-bf-pill .pp-icono {
          width: 16px;
          height: 16px;
      }

      span.pp-bf-pill.on {
          padding: 0 4px 0 14px;
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      span.pp-bf-pill>button {
          border: 0;
          background: none;
          color: inherit;
          font: inherit;
          padding: 0;
          cursor: pointer;
      }

      span.pp-bf-pill>.pp-bf-x {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          font-size: 12px;
      }

      span.pp-bf-pill>.pp-bf-x:hover {
          background: color-mix(in srgb, var(--pp-acento) 14%, transparent);
      }

      .pp-bf-exp {
          margin-left: auto;
          min-height: 36px;
          height: 36px;
          padding: 0 14px;
      }

      #mod-balance-general.pp-bf-on> :not(.pp-rep-cab):not(.pp-bf-barra):not(.pp-bf-vista):not(.myc-nav) {
          display: none !important;
      }

      .pp-bf-vista {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-bf-vista[hidden] {
          display: none;
      }

      .pp-bf-tit {
          font: 600 15px var(--pp-fuente);
          color: var(--pp-texto);
      }

      .pp-bf-tabla {
          display: none;
          padding: 4px 14px 8px;
          overflow-x: auto;
      }

      .pp-bf-tabla table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13px;
          font-variant-numeric: tabular-nums;
          color: var(--pp-texto);
      }

      .pp-bf-tabla th {
          padding: 10px 8px;
          text-align: right;
          font-size: 11.5px;
          font-weight: 600;
          color: var(--pp-texto-3);
          border-bottom: 1px solid var(--pp-borde);
          white-space: nowrap;
      }

      .pp-bf-tabla td {
          padding: 8px;
          text-align: right;
          border-bottom: 1px solid var(--pp-sutil);
          white-space: nowrap;
      }

      .pp-bf-tabla th:first-child,
      .pp-bf-tabla td:first-child {
          text-align: left;
          white-space: normal;
      }

      .pp-bf-tabla .pp-bf-sec td {
          padding-top: 10px;
          background: var(--pp-sutil);
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .04em;
          text-align: left;
      }

      .pp-bf-tabla .pp-bf-sub td {
          padding-top: 12px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
          text-align: left;
      }

      .pp-bf-tabla .pp-bf-total td,
      .pp-bf-tabla .pp-bf-final td {
          font-weight: 700;
          border-top: 1px solid var(--pp-texto);
      }

      .pp-bf-tabla .pp-bf-final td {
          background: var(--pp-sutil);
      }

      .pp-bf-sube {
          color: var(--pp-positivo);
      }

      .pp-bf-baja {
          color: var(--pp-negativo);
      }

      .pp-bf-cards {
          display: flex;
          flex-direction: column;
          gap: var(--pp-esp-3);
      }

      .pp-bf-card {
          padding: 14px 16px;
      }

      .pp-bf-card-cab {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
      }

      .pp-bf-card-cab b {
          font-size: 15px;
          color: var(--pp-texto);
      }

      .pp-bf-card-cab small {
          font-size: 12px;
          color: var(--pp-texto-3);
      }

      .pp-bf-card-tot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
          margin: 4px 0 2px;
      }

      .pp-bf-card-tot .pp-num {
          font-size: 26px;
          font-weight: 700;
          color: var(--pp-texto);
      }

      .pp-bf-card-ant {
          font-size: 12px;
          color: var(--pp-texto-3);
          margin-bottom: 4px;
      }

      .pp-bf-fila {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          padding: 9px 0;
          border-top: 1px solid var(--pp-borde);
          font-size: 13.5px;
          color: var(--pp-texto);
      }

      .pp-bf-fila>span:last-child {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          text-align: right;
      }

      .pp-bf-fila small {
          font-size: 11.5px;
          font-weight: 600;
      }

      .pp-bf-nota {
          margin: 0;
          font-size: 12px;
          line-height: 1.5;
          color: var(--pp-texto-3);
      }

      .pp-bf-fecha {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin-top: 10px;
          font-size: 12.5px;
          font-weight: 600;
          color: var(--pp-texto-2);
      }

      .pp-bf-fecha input {
          min-height: 44px;
          padding: 0 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-m);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: 500 14px var(--pp-fuente);
      }

      #pp-bf-comp[hidden] {
          display: none;
      }

      .myc-chips button small {
          font-weight: 500;
          opacity: .7;
      }

      @media (min-width: 768px) {
          .pp-bf-tabla {
              display: block;
          }

          .pp-bf-cards {
              display: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   🛒 [f128] MOSTRADOR · buscador de la pestaña CÓDIGO
   ═══════════════════════════════════════════════════════════════════ */
      #sub-codigo {
          position: relative;
      }

      .pos-sug {
          position: absolute;
          left: 8px;
          right: 8px;
          top: calc(100% - 4px);
          z-index: 60;
          display: flex;
          flex-direction: column;
          max-height: min(430px, 60vh);
          overflow-y: auto;
          background: var(--pp-superficie);
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          box-shadow: var(--pp-sombra-flotante);
      }

      .pos-sug-op {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          min-height: 56px;
          padding: 8px 12px;
          border: 0;
          border-top: 1px solid var(--pp-borde);
          background: transparent;
          color: var(--pp-texto);
          font: inherit;
          text-align: left;
          cursor: pointer;
      }

      .pos-sug-op:first-child {
          border-top: 0;
      }

      .pos-sug-op.on,
      .pos-sug-op:hover {
          background: var(--pp-acento-suave);
      }

      .pos-sug-op.agotado {
          opacity: .62;
      }

      .pos-sug-foto {
          position: relative;
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          border-radius: 9px;
          overflow: hidden;
          background: var(--pp-sutil);
          display: grid;
          place-items: center;
          color: var(--pp-texto-3);
          font-size: 11px;
          font-weight: 700;
      }

      .pos-sug-foto img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .pos-sug-foto.pf-sin img {
          display: none;
      }

      .pos-sug-foto--serv {
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
      }

      .pos-sug-foto--serv .pp-icono {
          width: 20px;
          height: 20px;
      }

      .pos-sug-tx {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .pos-sug-tx b {
          font-size: 14px;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pos-sug-tx>span {
          font-size: 12px;
          color: var(--pp-texto-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .pos-sug-pr {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 2px;
          font-size: 12px;
      }

      .pos-sug-pr b {
          font-size: 14px;
      }

      .pos-sug-stock {
          color: var(--pp-acento-texto);
      }

      .pos-sug-agotado {
          color: var(--pp-negativo);
          font-weight: 600;
      }

      .pos-sug mark {
          background: color-mix(in srgb, var(--pp-aviso) 22%, transparent);
          color: inherit;
          border-radius: 2px;
          padding: 0 1px;
      }

      .pos-sug-pie,
      .pos-sug-vacio {
          padding: 8px 12px;
          font-size: 11.5px;
          color: var(--pp-texto-3);
          border-top: 1px solid var(--pp-borde);
      }

      .pos-sug-vacio {
          border-top: 0;
      }

      @media (hover: none) {
          .pos-sug-pie {
              display: none;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   🧾 [f128] MOSTRADOR · COTIZAR
   ═══════════════════════════════════════════════════════════════════ */
      .cot-panel {
          display: none;
          flex-direction: column;
          gap: 10px;
      }

      .cot-panel[style*="block"] {
          display: flex !important;
      }

      .cot-form {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .cot-res {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 8px;
          font-size: 13px;
          color: var(--pp-texto-2);
      }

      .cot-res b {
          font-size: 18px;
          color: var(--pp-texto);
      }

      .cot-validez {
          display: flex;
      }

      .cot-validez>button {
          flex: 1;
      }

      .cot-vacio {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          padding: 18px 12px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-l);
          font-size: 13px;
          color: var(--pp-texto-3);
          text-align: center;
      }

      .cot-lista-tit {
          margin-top: 6px;
          font-size: 11.5px;
          font-weight: 700;
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .cot-lista {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .cot-fila {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
      }

      .cot-fila.cot-nueva {
          border-color: var(--pp-acento);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-acento) 14%, transparent);
      }

      .cot-fila-cab {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
          font-size: 14px;
      }

      .cot-fila-cab small {
          display: block;
          margin-top: 2px;
          font-size: 12px;
          color: var(--pp-texto-3);
      }

      .cot-fila-cab>b {
          font-size: 15px;
          white-space: nowrap;
      }

      .cot-acc {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
      }

      .cot-acc .pp-btn {
          min-height: 34px;
          height: 34px;
          padding: 0 12px;
          font-size: 13px;
      }

      .cot-x {
          margin-left: auto;
          width: 34px;
          height: 34px;
          display: grid;
          place-items: center;
          border: 0;
          border-radius: var(--pp-radio-m);
          background: transparent;
          color: var(--pp-texto-3);
          cursor: pointer;
      }

      .cot-x:hover {
          background: var(--pp-sutil);
          color: var(--pp-negativo);
      }

      .cot-x .pp-icono {
          width: 18px;
          height: 18px;
      }

      .cot-fila.cot-vencida {
          border-style: dashed;
      }

      .cot-fila.cot-vencida .cot-fila-cab>b,
      .cot-fila.cot-vendida,
      .cot-fila.cot-anulada {
          opacity: .62;
      }

      .cot-fila.cot-anulada .cot-fila-cab>b {
          text-decoration: line-through;
      }

      /* ═══════════════════════════════════════════════════════════════════
   💳 [f128] MI SUSCRIPCIÓN · Mensual o Anual
   ═══════════════════════════════════════════════════════════════════ */
      .sus-cols,
      .sus-col {
          display: contents;
      }

      .sus-col>* {
          flex-shrink: 0;
      }

      /* el cuerpo del modal es flex: sin esto el botón Pagar se aplasta */
      .sus-planes {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .sus-op {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          width: 100%;
          min-height: 60px;
          padding: 12px 14px;
          border: 1.5px solid var(--pp-borde);
          border-radius: var(--pp-radio-l);
          background: var(--pp-superficie);
          color: var(--pp-texto);
          font: inherit;
          text-align: left;
          cursor: pointer;
      }

      .sus-op.on {
          border-color: var(--pp-acento);
          background: var(--pp-acento-suave);
      }

      .sus-op-n {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
      }

      .sus-op-n b {
          font-size: 15px;
      }

      .sus-op-n small {
          font-size: 12px;
          color: var(--pp-texto-3);
      }

      .sus-op-p {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          flex-shrink: 0;
      }

      .sus-op-p b {
          font-size: 18px;
      }

      .sus-op-p s {
          font-size: 12.5px;
          color: var(--pp-texto-3);
      }

      .sus-op-promo {
          position: absolute;
          top: -10px;
          right: 12px;
          padding: 2px 9px;
          border-radius: 999px;
          background: var(--pp-acento);
          color: var(--pp-sobre-acento, #fff);
          font-size: 11px;
          font-weight: 700;
      }

      @media (min-width: 768px) {
          #modal-suscripcion .sus-panel {
              max-width: 920px;
          }

          #modal-suscripcion .sus-cols {
              display: grid;
              grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
              gap: var(--pp-esp-5);
              align-items: start;
          }

          #modal-suscripcion .sus-col {
              display: flex;
              flex-direction: column;
              gap: var(--pp-esp-3);
              min-width: 0;
          }
      }

      /* ═══════════════════════════════════════════════════════════════════
   🖥️ [f128] TABLET Y PC: 13 módulos a todo el ancho (como Números)
   En el celular no cambia nada.
   ═══════════════════════════════════════════════════════════════════ */
      @media (min-width: 768px) {

          #mod-inventario.pp-inv,
          #inv-tabla-wrap.pp-inv,
          #mod-fiados.pp-fia,
          #mod-vendedores.pp-ven,
          #mod-crm.pp-crm,
          #mod-gasto.pp-gas,
          #mod-bancos.pp-ban,
          #mod-proveedores .pp-prv-cont,
          #mod-boveda.pp-bov,
          #mod-sri-fiscal .pp-sri,
          #mod-sri-fiscal .sri-wrap,
          #mod-potencial.pp-aca,
          #mod-academia.pp-tut {
              max-width: none;
          }

          #jf-contenido {
              max-width: none !important;
          }

          /* Listas de tarjetas en 2–3 columnas */
          #mod-fiados .pp-fia-lista,
          #mod-crm .pp-crm-lista,
          #mod-bancos .pp-ban-lista,
          #mod-boveda .pp-bov-lista,
          #mod-gasto .pp-gas-lista,
          #mod-proveedores .pp-prv-lista,
          #mod-academia .pp-tut-mapa {
              display: grid !important;
              grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
              gap: var(--pp-esp-3);
              align-items: start;
          }

          #mod-fiados .pp-fia-lista>.pp-fia-vacio,
          #mod-crm .pp-crm-lista>.pp-fia-vacio,
          #mod-crm .pp-crm-lista> :not(.pp-crm-cli):not(.pp-tarjeta),
          #mod-boveda .pp-bov-lista>.pp-fia-vacio {
              grid-column: 1 / -1;
          }

          /* Vendedores: cada persona en su tarjeta */
          #mod-vendedores .eq-lista.pp-lista {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              gap: var(--pp-esp-3);
              background: none;
              border: 0;
              overflow: visible;
          }

          #mod-vendedores .eq-lista>.eq-fila {
              border: 1px solid var(--pp-borde);
              border-radius: var(--pp-radio-l);
              background: var(--pp-superficie);
          }

          /* Formularios con dos bloques: lado a lado */
          #mod-gasto .pp-fia-form:has(> .pp-fia-sec + .pp-fia-sec),
          #mod-proveedores .pp-fia-form:has(> .pp-fia-sec + .pp-fia-sec),
          #mod-fiados .pp-fia-form:has(> .pp-fia-sec + .pp-fia-sec) {
              display: grid;
              grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
              column-gap: var(--pp-esp-5);
              row-gap: var(--pp-esp-3);
              align-items: start;
          }

          #mod-gasto .pp-fia-form> :not(.pp-fia-sec),
          #mod-proveedores .pp-fia-form> :not(.pp-fia-sec),
          #mod-fiados .pp-fia-form> :not(.pp-fia-sec) {
              grid-column: 1 / -1;
          }

          #mod-gasto .pp-fia-form>.pp-fia-sec,
          #mod-proveedores .pp-fia-form>.pp-fia-sec,
          #mod-fiados .pp-fia-form>.pp-fia-sec {
              margin: 0;
              min-width: 0;
          }

          /* ── Inventario: panel a la izquierda, editor a la derecha ── */
          #mod-inventario.pp-inv[style*="block"]:has(> .pp-editor) {
              display: grid !important;
              grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
              grid-template-rows: repeat(5, auto) 1fr;
              column-gap: var(--pp-esp-5);
              align-items: start;
          }

          #mod-inventario.pp-inv>* {
              grid-column: 1;
              min-width: 0;
          }

          #mod-inventario.pp-inv>.pp-editor {
              grid-column: 2;
              grid-row: 1 / span 6;
              margin-top: 0 !important;
          }

          #mod-inventario .pp-inv-kpis {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          #mod-inventario .pp-inv-herr {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          #mod-inventario .pp-inv-acciones,
          #mod-inventario #inv-kpi-wrap,
          #mod-inventario .pp-inv-herr {
              margin-top: var(--pp-esp-3) !important;
          }

          /* ── Apartados y cobros · Por cobrar: buscar y cobrar | lista ── */
          #mod-fiados #fia-panel-cobrar:not([hidden]) {
              display: grid;
              grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
              grid-template-rows: auto auto 1fr;
              column-gap: var(--pp-esp-5);
              row-gap: var(--pp-esp-3);
              align-items: start;
          }

          #mod-fiados #fia-panel-cobrar>* {
              grid-column: 1;
              margin: 0;
              min-width: 0;
          }

          #mod-fiados #fia-panel-cobrar>.pp-fia-lista {
              grid-column: 2;
              grid-row: 1 / span 3;
          }

          #mod-fiados #fia-panel-cobrar .pp-fia-buscar {
              flex-wrap: wrap;
          }

          /* ── Clientes: buscar y nuevo | lista ── */
          #mod-crm.pp-crm[style*="block"] {
              display: grid !important;
              grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
              grid-template-rows: auto auto 1fr;
              column-gap: var(--pp-esp-5);
              row-gap: var(--pp-esp-3);
              align-items: start;
          }

          #mod-crm.pp-crm>* {
              grid-column: 1;
              margin: 0 !important;
              min-width: 0;
          }

          #mod-crm.pp-crm>#crm-lista-clientes {
              grid-column: 2;
              grid-row: 1 / span 3;
          }

          #mod-crm.pp-crm>.pp-oculto-visual {
              position: absolute;
          }

          /* ── Bóveda · Ahorros: en dos columnas que se llenan de arriba abajo ── */
          #mod-boveda #aho-contenido {
              columns: 2;
              column-gap: var(--pp-esp-5);
          }

          #mod-boveda #aho-contenido>* {
              break-inside: avoid;
          }

          #mod-boveda #aho-contenido>.pp-bov-seccion,
          #mod-boveda #aho-contenido>.pp-aho-metas-cab {
              break-after: avoid;
          }

          #mod-boveda #aho-contenido>*+* {
              margin-top: var(--pp-esp-3);
          }

          /* ── Espejo fiscal SRI: ventas | IVA | compras ── */
          #mod-sri-fiscal .sri-wrap {
              columns: 3;
              column-gap: var(--pp-esp-4);
          }

          #mod-sri-fiscal .sri-wrap>.sri-header,
          #mod-sri-fiscal .sri-wrap>.sri-plegable,
          #mod-sri-fiscal .sri-wrap>.sri-disclaimer,
          #mod-sri-fiscal .sri-wrap>.sri-btn-compartir,
          #mod-sri-fiscal .sri-wrap> :not(.sri-seccion-tit):not(.sri-grid):not(.sri-total-linea):not(.sri-resultado) {
              column-span: all;
          }

          #mod-sri-fiscal .sri-wrap>.sri-seccion-tit~.sri-seccion-tit {
              break-before: column;
          }

          #mod-sri-fiscal .sri-wrap>* {
              break-inside: avoid;
          }

          #mod-sri-fiscal .sri-wrap .sri-grid {
              grid-template-columns: 1fr;
          }

          /* ── Juego Flujo Pilas: tu tienda | camino de niveles ── */
          #jf-contenido {
              columns: 2;
              column-gap: var(--pp-esp-5);
          }

          #jf-contenido>* {
              break-inside: avoid;
          }

          #jf-contenido>.jf-mundo {
              break-after: avoid;
          }

          /* ── Academia (Potencial): portada a lo ancho y el resto en 2–3 columnas ── */
          #mod-potencial .pp-aca-wrap {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              gap: var(--pp-esp-3);
              align-items: start;
          }

          #mod-potencial .pp-aca-wrap>.pp-aca-hero,
          #mod-potencial .pp-aca-wrap>.pp-fia-vacio,
          #mod-potencial .pp-aca-wrap> :not(.pp-tarjeta) {
              grid-column: 1 / -1;
          }
      }

      @media (min-width: 1280px) {
          #mod-sri-fiscal .sri-wrap .sri-grid {
              grid-template-columns: 1fr 1fr;
          }
      }

      @media (min-width: 1024px) {

          /* Inventario: el editor del producto en 2 columnas */
          #mod-inventario .pp-editor.pp-tarjeta {
              display: grid;
              grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
              column-gap: var(--pp-esp-5);
              row-gap: var(--pp-esp-3);
              align-items: start;
          }

          #mod-inventario .pp-editor>* {
              min-width: 0;
              margin: 0 !important;
          }

          #mod-inventario .pp-editor>.pp-editor-cab,
          #mod-inventario .pp-editor>.pp-editor-buscar,
          #mod-inventario .pp-editor>.pp-editor-voz,
          #mod-inventario .pp-editor>#bloque-forma-compra,
          #mod-inventario .pp-editor>.pp-editor-acciones,
          #mod-inventario .pp-editor> :not(.pp-editor-sec):not(.pp-editor-cab) {
              grid-column: 1 / -1;
          }
      }

      /* ════════════════════════════════════════════════════════════════════
   🧩 [f129] Detalle del producto, carrito y nombre largo de la tienda en iPhone
   ════════════════════════════════════════════════════════════════════ */
      /* La cabecera del detalle (volver, favorito, compartir) y la del carrito bajan bajo la hora y la batería */
      .panel-slide-header {
          padding-top: calc(15px + var(--pp-sat)) !important;
      }

      #panel-carrito-cliente .carrito-header {
          padding-top: calc(12px + var(--pp-sat));
          min-height: calc(56px + var(--pp-sat));
      }

      /* Nombre de la tienda: máximo 2 líneas; si es largo, la letra se achica (app.js) y nunca invade la barra del iPhone */
      .header-cliente-fijo>div:nth-child(2) {
          min-width: 0;
          overflow: hidden;
      }

      .header-cliente-fijo #tienda-titulo {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          overflow: hidden;
          overflow-wrap: anywhere;
          line-height: 1.12 !important;
          font-size: var(--tt-fs, 18px) !important;
      }

      .header-cliente-fijo #tienda-direccion {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      /* ── 🧾 [f129] IVA de compra: tarifa, resumen y a dónde va cada parte ── */
      .fcc-tarifas {
          margin: 4px 0 10px;
      }

      .fcc-tarifas button {
          flex: 1;
          min-width: 0;
      }

      .fcc-otro {
          margin-bottom: 8px;
      }

      .fcc-res {
          margin-top: 6px;
      }

      .fcc-fila {
          display: flex;
          justify-content: space-between;
          gap: 12px;
          padding: 4px 0;
          font-size: var(--pp-fs-14, 14px);
      }

      .fcc-fila b {
          font-variant-numeric: tabular-nums;
      }

      .fcc-tot {
          border-top: 1px solid var(--pp-borde, #E4E4E7);
          margin-top: 4px;
          padding-top: 8px;
          font-weight: 700;
          font-size: var(--pp-fs-15, 15px);
      }

      .fcc-efecto {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
          margin: 10px 0 6px;
      }

      .fcc-efecto>div {
          background: var(--pp-fondo, #F8FAFC);
          border-radius: var(--pp-radio-s, 10px);
          padding: 7px 8px;
          font-size: 11.5px;
          color: var(--pp-texto-2, #52525B);
          line-height: 1.25;
      }

      .fcc-efecto b {
          display: block;
          margin-top: 2px;
          font-size: 13.5px;
          color: var(--pp-texto, #18181B);
      }

      .fcc-error {
          color: var(--pp-negativo, #DC2626);
          font-size: 13px;
          font-weight: 600;
          padding: 4px 0;
      }

      .pp-pe-total-fila.pp-pe-total-fin {
          border-top: 1px solid var(--pp-borde, #E4E4E7);
          margin-top: 4px;
          padding-top: 6px;
          font-weight: 700;
      }

      /* ── 🎁 [f129] Apartados y cobros › A favor ── */
      .saf-panel {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .saf-res {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          background: var(--pp-positivo-suave, #ECFDF5);
          border: 1px solid color-mix(in srgb, var(--pp-positivo, #047857) 30%, transparent);
          border-radius: var(--pp-radio-m, 14px);
          padding: 12px 14px;
      }

      .saf-res small {
          display: block;
          font-size: 12px;
          color: var(--pp-positivo, #047857);
      }

      .saf-res b {
          font-size: 22px;
          color: var(--pp-positivo, #047857);
      }

      .saf-res>span {
          font-size: 12px;
          color: var(--pp-positivo, #047857);
          text-align: right;
          line-height: 1.3;
      }

      .saf-buscar {
          position: relative;
      }

      .saf-lista {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .saf-card {
          background: var(--pp-superficie, #fff);
          border: 1px solid var(--pp-borde, #E4E4E7);
          border-radius: var(--pp-radio-m, 14px);
          padding: 14px;
      }

      .saf-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
      }

      .saf-tit {
          min-width: 0;
      }

      .saf-tit b {
          font-size: 15px;
          overflow-wrap: anywhere;
      }

      .saf-tit small {
          display: block;
          margin-top: 3px;
          font-size: 12.5px;
          color: var(--pp-texto-3, #71717A);
      }

      .saf-monto {
          font-size: 18px;
          color: var(--pp-positivo, #047857);
          white-space: nowrap;
      }

      .saf-chip {
          display: inline-block;
          font-size: 11px;
          font-weight: 700;
          padding: 2px 8px;
          border-radius: 999px;
          margin-right: 6px;
          vertical-align: 1px;
      }

      .saf-chip--cambio {
          background: #FEF3C7;
          color: #92400E;
      }

      .saf-chip--dev {
          background: #EEF2FF;
          color: #3730A3;
      }

      .saf-hist {
          margin-top: 10px;
          border-top: 1px dashed var(--pp-borde, #E4E4E7);
          padding-top: 6px;
          font-size: 12.5px;
      }

      .saf-hist>div {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          padding: 3px 0;
          color: var(--pp-texto-2, #52525B);
      }

      .saf-acc {
          display: flex;
          gap: 8px;
          margin-top: 12px;
      }

      .saf-acc .pp-btn {
          flex: 1;
          min-width: 0;
          min-height: 42px;
          padding: 0 8px;
          font-size: 13.5px;
      }

      .saf-dev {
          margin-top: 12px;
          padding-top: 12px;
          border-top: 1px solid var(--pp-borde, #E4E4E7);
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .saf-dev-acc {
          display: flex;
          gap: 8px;
      }

      .saf-dev-acc .pp-btn {
          flex: 1;
      }

      .saf-vacio {
          text-align: center;
          padding: 22px 14px;
          border: 1px dashed var(--pp-borde, #E4E4E7);
          border-radius: var(--pp-radio-m, 14px);
          color: var(--pp-texto-3, #71717A);
          font-size: 14px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          align-items: center;
      }

      .saf-pie {
          font-size: 12px;
          color: var(--pp-texto-3, #71717A);
          margin: 0;
      }

      @media (min-width: 768px) {
          .saf-lista {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
              align-items: start;
          }

          #mod-fiados .saf-panel {
              max-width: none;
          }
      }

      .saf-dev-met button {
          flex: 1;
      }

      @media (max-width: 480px) {
          #mod-fiados .pp-fia-vista button {
              padding-left: 4px;
              padding-right: 4px;
              font-size: 13px;
              white-space: nowrap;
          }
      }

      /* 👥 [f149] Tu equipo › Qué puede hacer › Caja y cobros */
      .eq-perm-sub {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid var(--pp-borde);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: .02em;
          text-transform: uppercase;
          color: var(--pp-texto-3);
      }

      .eq-perm-pro {
          padding: 1px 7px;
          border-radius: 999px;
          background: var(--pp-texto);
          color: var(--pp-superficie);
          font-size: 10px;
          font-weight: 800;
          letter-spacing: .04em;
      }

      .eq-check--bloq {
          cursor: default;
          color: var(--pp-texto-2);
      }

      .eq-check--bloq input {
          opacity: .55;
      }

      .eq-perm-mas {
          align-self: flex-start;
          margin-top: 4px;
          padding: 6px 0;
          border: 0;
          background: none;
          font: inherit;
          font-size: 13px;
          font-weight: 700;
          color: var(--pp-acento-texto, var(--pp-acento));
          cursor: pointer;
          text-align: left;
      }

      /* ═══════════════════════════════════════════════════════════════════
   📊 [f163] ESTADO DE RESULTADOS en tablet y PC
   · Filtros en una barra (período, mes, comparar y Generar) y el cierre de mes debajo, a lo ancho.
   · Resumen a lo ancho: utilidad neta a la izquierda y las cifras a la derecha.
   · El Estado de Resultados como un solo documento.
   · Tablet: el análisis debajo, en 2 columnas. PC: el estado fijo a la izquierda
     mientras recorres el análisis a la derecha. En el celular no cambia nada.
   ═══════════════════════════════════════════════════════════════════ */
      @media (min-width: 768px) {
          #mod-estado-resultados.pp-rep[style*="block"] {
              display: grid !important;
              grid-template-columns: minmax(0, 1fr);
              row-gap: var(--pp-esp-3);
          }

          #mod-estado-resultados.pp-rep>.pp-er-controles {
              grid-column: 1 / -1;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: flex-end;
              gap: 12px 16px;
              padding: 14px 16px;
          }

          #mod-estado-resultados .pp-er-controles>#er-periodo {
              flex: 0 0 auto;
              align-self: flex-end;
          }

          #mod-estado-resultados .pp-er-controles>.pp-editor-dos {
              flex: 1 1 300px;
              margin: 0;
          }

          #mod-estado-resultados .pp-er-controles>.pp-btn {
              flex: 0 0 auto;
              width: auto;
              min-width: 150px;
          }

          #mod-estado-resultados.pp-rep>#cierre-er {
              grid-column: 1 / -1;
          }

          #mod-estado-resultados.pp-rep>#cierre-er:empty {
              display: none;
          }

          #mod-estado-resultados.pp-rep>#pantalla-reporte-financiero {
              grid-column: 1 / -1;
          }

          #pantalla-reporte-financiero.pp-er-reporte {
              display: block;
          }

          #pantalla-reporte-financiero .pp-er-cuerpo {
              display: grid;
              grid-template-columns: minmax(0, 1fr);
              gap: var(--pp-esp-4);
          }

          #pantalla-reporte-financiero>*,
          #pantalla-reporte-financiero .pp-er-resumen {
              grid-column: auto;
          }

          /* Resumen a lo ancho */
          #pantalla-reporte-financiero .pp-er-resumen {
              display: grid;
              grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
              grid-template-areas: "cab mini" "neta mini" "sub mini";
              column-gap: 28px;
              align-items: center;
              padding: 18px 20px;
          }

          #pantalla-reporte-financiero .pp-er-resumen-cab {
              grid-area: cab;
          }

          #pantalla-reporte-financiero .pp-er-neta {
              grid-area: neta;
          }

          #pantalla-reporte-financiero .pp-er-neta-sub {
              grid-area: sub;
          }

          #pantalla-reporte-financiero .pp-er-mini {
              grid-area: mini;
              margin-top: 0;
          }

          #pantalla-reporte-financiero .pp-er-mini>div {
              padding: 12px 14px;
          }

          /* El Estado de Resultados como un solo documento */
          #pantalla-reporte-financiero .pp-er-secs {
              display: flex;
              flex-direction: column;
              gap: 0;
              columns: auto;
              background: var(--pp-superficie);
              border: 1px solid var(--pp-borde);
              border-radius: var(--pp-radio-l);
              overflow: hidden;
          }

          #pantalla-reporte-financiero .pp-er-secs>* {
              margin: 0 !important;
              border: 0;
              border-radius: 0;
              break-inside: auto;
          }

          #pantalla-reporte-financiero .pp-er-secs>*+* {
              border-top: 1px solid var(--pp-borde);
          }

          #pantalla-reporte-financiero .pp-er-secs>.pp-er-sec {
              padding: 14px 20px;
          }

          #pantalla-reporte-financiero .pp-er-secs>.pp-er-sec:last-child .pp-er-total--final {
              background: var(--pp-sutil);
              margin: -14px -20px;
              padding: 0 20px;
              min-height: 60px;
          }

          /* Análisis debajo, en 2 columnas */
          #pantalla-reporte-financiero #er-analisis {
              margin-top: 0;
          }

          #er-analisis .af-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: var(--pp-esp-4);
          }

          #er-analisis .af-ancho {
              grid-column: 1 / -1;
          }
      }

      @media (min-width: 1100px) {

          /* PC: filtros en una sola fila */
          #mod-estado-resultados.pp-rep>.pp-er-controles {
              display: grid;
              grid-template-columns: auto minmax(0, 1fr) auto;
              align-items: end;
          }

          #mod-estado-resultados .pp-er-controles>.pp-btn {
              min-height: var(--pp-alto-control, 44px);
          }

          /* PC: el estado fijo a la izquierda, el análisis a la derecha */
          #pantalla-reporte-financiero .pp-er-cuerpo {
              grid-template-columns: minmax(400px, 5fr) minmax(0, 7fr);
              align-items: start;
              column-gap: 20px;
          }

          #pantalla-reporte-financiero .pp-er-resumen {
              grid-column: 1 / -1;
          }

          #pantalla-reporte-financiero .pp-er-secs {
              grid-column: 1;
              position: sticky;
              top: 12px;
              max-height: calc(100vh - 24px);
              overflow-y: auto;
          }

          #pantalla-reporte-financiero #er-analisis {
              grid-column: 2;
          }

          #er-analisis .af-grid {
              grid-template-columns: minmax(0, 1fr);
          }

          #er-analisis>.af-cab {
              margin-top: 0;
              min-height: 36px;
          }
      }

      @media (min-width: 1600px) {
          #er-analisis .af-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }
      }

      /* ══ 🏷️ [f165] Tipos de promociones ══ */
      .prg-tipo--regla {
          grid-column: 1 / -1;
      }

      @media (min-width: 960px) {
          .prg-hoja .prg-tipos {
              grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          .prg-tipo--regla {
              grid-column: auto;
          }
      }

      .prg-frase {
          padding: 10px 12px;
          border: 1px dashed var(--pp-acento);
          border-radius: 12px;
          background: var(--pp-acento-suave);
          color: var(--pp-acento-texto);
          font-size: var(--pp-fs-13);
          font-weight: var(--pp-fw-fuerte);
          line-height: 1.4;
      }

      .prg-prods2 {
          max-height: 260px;
      }

      .prg-hoja .pp-segmentado {
          flex-wrap: wrap;
      }

      .prg-hoja .pp-segmentado>button {
          flex: 1 0 auto;
          padding: 0 10px;
          white-space: nowrap;
      }

      .prg-paso {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 6px;
          padding-top: 12px;
          border-top: 1px solid var(--pp-borde);
          font-size: var(--pp-fs-12);
          font-weight: var(--pp-fw-fuerte);
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--pp-texto-2);
      }

      .prg-paso b {
          display: grid;
          place-items: center;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: var(--pp-acento);
          color: #fff;
          font-size: 12px;
          letter-spacing: 0;
      }

      .prc-bn-grande.prc-bn-grande--largo {
          top: 40px;
          font-size: 38px;
          letter-spacing: -1px;
      }

      .prc-linea--aviso,
      #panel-carrito-cliente .carrito-body>div.prc-linea--aviso {
          background: rgba(245, 158, 11, .14) !important;
          color: #B45309;
      }

      .prp-l--info {
          justify-content: flex-start;
          font-weight: var(--pp-fw-medio);
      }

      .prp-l--info .pp-icono {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
      }

      /* ══ 📲 [f166] Instructivo de instalación en iPhone/iPad ══ */
      #modal-pwa-ios .pwa-ios-pasos {
          margin: 0;
          padding-left: 22px;
          color: var(--pp-texto-2, #3F3F46);
          font-size: .9rem;
          line-height: 1.55;
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      #modal-pwa-ios .pwa-ios-pasos strong {
          color: var(--pp-texto, #18181B);
      }

      #modal-pwa-ios .pwa-ios-pasos small {
          display: block;
          margin-top: 2px;
          font-size: .78rem;
          color: var(--pp-texto-3, #71717A);
      }

      #modal-pwa-ios .pwa-ios-txt {
          margin: 0 0 12px;
          font-size: .9rem;
          line-height: 1.5;
          color: var(--pp-texto-2, #3F3F46);
      }

      #modal-pwa-ios .pwa-ios-nota {
          margin: 14px 0 0;
          padding: 10px 12px;
          border-radius: 10px;
          background: var(--pp-sutil, #F4F4F5);
          font-size: .8rem;
          line-height: 1.45;
          color: var(--pp-texto-2, #3F3F46);
      }

      #modal-pwa-ios .pwa-ios-copiar {
          width: 100%;
          margin-top: 14px;
          min-height: 44px;
      }

      /* ══ 🌎 [f167] Ajustes › País y moneda ══ */
      .pais-aj {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .pais-aj-ej {
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          gap: 6px 14px;
          padding: 12px 14px;
          border-radius: 12px;
          background: var(--pp-sutil, #F4F4F5);
      }

      .pais-aj-ej span {
          width: 100%;
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-3, #71717A);
      }

      .pais-aj-ej b {
          font-size: 20px;
          font-weight: 800;
          font-variant-numeric: tabular-nums;
          color: var(--pp-texto, #18181B);
      }

      .pais-aj-ej small {
          margin-left: auto;
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-3, #71717A);
      }

      /* ═══════════════════════════════════════════════════════════════════
   🧾 [f176] Compras por factura · borrar una familia con su motivo
   ═══════════════════════════════════════════════════════════════════ */
      .pp-comp-fecha {
          display: grid;
          grid-template-columns: minmax(118px, 40%) 1fr;
          gap: var(--pp-esp-2);
          align-items: center;
          margin-top: var(--pp-esp-2);
      }

      .pp-comp-fecha>span {
          font-size: var(--pp-fs-13, 13px);
          color: var(--pp-texto-2);
      }

      .pp-comp-fecha .pp-campo {
          min-width: 0;
      }

      .pp-comp-fecha[hidden] {
          display: none;
      }

      .fc-curso {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          margin-bottom: var(--pp-esp-3, 12px);
          border-radius: 12px;
          background: var(--pp-acento-suave, #E7F3EE);
          color: var(--pp-texto);
      }

      .fc-curso[hidden] {
          display: none;
      }

      .fc-curso>.pp-icono {
          flex: none;
          width: 20px;
          height: 20px;
          color: var(--pp-acento, #0F766E);
      }

      .fc-curso>span {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .fc-curso>span b {
          font-size: var(--pp-fs-14, 14px);
      }

      .fc-curso>span small {
          font-size: var(--pp-fs-12, 12px);
          color: var(--pp-texto-2);
          overflow-wrap: anywhere;
          font-variant-numeric: tabular-nums;
      }

      .fc-curso .fc-curso-fin {
          flex: none;
          min-height: 36px;
          padding: 0 12px;
      }

      .pvp-juntar {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          margin: 0 0 var(--pp-esp-3, 12px);
          padding: 10px 12px;
          border: 1px dashed var(--pp-borde-fuerte, #D4D4D8);
          border-radius: 12px;
          background: var(--pp-superficie, #fff);
          color: var(--pp-texto);
          text-align: left;
          cursor: pointer;
      }

      .pvp-juntar:hover {
          background: var(--pp-sutil, #F4F4F5);
      }

      .pvp-juntar .pp-icono {
          flex: none;
          width: 20px;
          height: 20px;
          color: var(--pp-acento, #0F766E);
      }

      .pvp-juntar span {
          display: flex;
          flex-direction: column;
          min-width: 0;
      }

      .pvp-juntar small {
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-12, 12px);
      }

      .pvj-lista {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .pvj-op {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border: 1px solid var(--pp-borde, #E4E4E7);
          border-radius: 12px;
          cursor: pointer;
      }

      .pvj-op input {
          width: 20px;
          height: 20px;
          flex: none;
          accent-color: var(--pp-acento, #0F766E);
      }

      .pvj-op>span {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .pvj-op>span small {
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-12, 12px);
      }

      .pvj-op:has(input:checked) {
          border-color: var(--pp-acento, #0F766E);
          background: var(--pp-acento-suave, #E7F3EE);
      }

      .pvj-tot {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          padding: 4px 2px;
          font-size: var(--pp-fs-14, 14px);
      }

      .pvj-tot b {
          font-size: 18px;
      }

      .fbo-ef {
          display: block;
          margin-top: 4px;
          font-style: normal;
          font-size: var(--pp-fs-12, 12px);
          font-weight: var(--pp-fw-medio, 600);
          color: var(--pp-texto);
          font-variant-numeric: tabular-nums;
      }

      .pvf-op[disabled] .fbo-ef {
          display: none;
      }

      /* ═══════════════════════════════════════════════════════════════════
   🧾 [f177] Estado de resultados: ventas por forma de pago, ventas netas y lo cobrado
   ═══════════════════════════════════════════════════════════════════ */
      .pp-er-fila--sub {
          min-height: 32px;
          border-top: 0;
          padding-left: 14px;
          font-size: var(--pp-fs-12);
      }

      .pp-er-fila--sub .pp-er-fila-label {
          color: var(--pp-texto-2);
      }

      .pp-er-fila--sub .pp-er-fila-label::before {
          content: '· ';
          color: var(--pp-texto-3);
      }

      .pp-er-fila--sub .pp-er-fila-valor {
          font-weight: var(--pp-fw-normal, 400);
          color: var(--pp-texto-2);
      }

      .pp-er-fila--neta .pp-er-fila-label,
      .pp-er-fila--neta .pp-er-fila-valor {
          font-weight: var(--pp-fw-fuerte);
      }

      .pp-er-memo {
          display: flex;
          flex-direction: column;
          gap: 2px;
          margin-top: var(--pp-esp-2);
          padding: 8px 10px;
          border: 1px dashed var(--pp-borde-fuerte);
          border-radius: var(--pp-radio-m, 10px);
          font-size: var(--pp-fs-12);
          color: var(--pp-texto-2);
      }

      .pp-er-memo div {
          display: flex;
          justify-content: space-between;
          gap: var(--pp-esp-3);
      }

      .pp-er-memo b {
          color: var(--pp-texto);
      }

      .pp-er-memo small {
          color: var(--pp-texto-3);
          font-size: var(--pp-fs-11);
          line-height: 1.35;
      }

      /* ═══════════════════════════════════════════════════════════════════
   🖥️ [f184] TABLET Y PC: Ajustes, Mi tienda online, Movimientos y ventanas
   En el celular no cambia nada (todo va dentro de @media de 768 px o más).
   ═══════════════════════════════════════════════════════════════════ */
      @media (min-width: 768px) {

          /* ── Ajustes: la portada en dos columnas ── */
          #mod-ajustes .pp-aj {
              max-width: 1120px;
              margin: 0 auto;
          }

          #mod-ajustes .pp-aj-grupos {
              columns: 2;
              column-gap: var(--pp-esp-4, 16px);
          }

          #mod-ajustes .pp-aj-grupos>section {
              display: block;
              break-inside: avoid;
              margin: 0 0 var(--pp-esp-4, 16px);
          }

          #mod-ajustes .pp-aj-grupos>section>.pp-neg-grupo-cab {
              margin-bottom: 8px;
          }

          /* ── Movimientos: «Cierra el día con ahorro» y «Movimientos de otras fechas» a todo el ancho ── */
          #dashboard-caja.pp-cie-dash>#cie-ahorro {
              grid-column: 1 / -1;
              order: 1;
          }

          #dashboard-caja.pp-cie-dash>#mov-hist {
              grid-column: 1 / -1;
              order: 2;
          }

          #cie-ahorro.pp-aho-cierre:not([hidden]) {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              column-gap: var(--pp-esp-4, 16px);
              row-gap: 12px;
              align-items: end;
          }

          #cie-ahorro.pp-aho-cierre>.pp-cie-tit,
          #cie-ahorro.pp-aho-cierre>.pp-bov-desg-bien,
          #cie-ahorro.pp-aho-cierre>.pp-bov-desg-nota {
              grid-column: 1 / -1;
              margin: 0;
          }

          #cie-ahorro.pp-aho-cierre>.pp-cie-fila {
              flex-direction: column;
              align-items: flex-start;
              justify-content: flex-end;
              gap: 2px;
              min-height: 0;
              padding: 10px 12px;
              border: 1px solid var(--pp-borde);
              border-radius: var(--pp-radio-m, 12px);
              font-size: var(--pp-fs-12, 12px);
              color: var(--pp-texto-2);
          }

          #cie-ahorro.pp-aho-cierre>.pp-cie-fila>.pp-num {
              font-size: 20px;
              font-weight: var(--pp-fw-fuerte, 700);
              color: var(--pp-texto);
          }

          #cie-ahorro.pp-aho-cierre>.pp-aho-cierre-pag {
              margin: 0;
              min-width: 0;
          }

          #cie-ahorro.pp-aho-cierre>.pp-bov-botones {
              margin: 0;
              display: flex;
              gap: 8px;
          }

          #cie-ahorro.pp-aho-cierre>.pp-bov-botones>.pp-btn {
              flex: 1;
          }

          #cie-ahorro.pp-aho-cierre>.pp-btn--bloque {
              grid-column: 1 / -1;
              justify-self: start;
              width: auto;
              padding: 0 20px;
          }

          #mov-hist.mvh {
              display: grid;
              grid-template-columns: minmax(0, 1fr) auto;
              column-gap: var(--pp-esp-4, 16px);
              row-gap: 8px;
              align-items: end;
              margin-top: 0;
          }

          #mov-hist.mvh>.pp-cie-tit {
              grid-column: 1 / -1;
          }

          #mov-hist .mvh-rango {
              grid-column: 1;
              grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) auto;
              justify-content: start;
          }

          #mov-hist .mvh-atajos {
              grid-column: 2;
              margin: 0;
              justify-content: flex-end;
          }

          #mov-hist .mvh-res {
              grid-column: 1 / -1;
          }

          #mov-hist .mvh-res>.mov-bus {
              max-width: 520px;
          }

          #mov-hist .mvh-res .mvh-filtros select {
              flex: 0 1 220px;
          }

          /* ── Ventanas de Ajustes más anchas ── */
          #ps-modal .ps-panel {
              max-width: 640px;
          }

          #ps-modal .ps-kpis {
              grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          .hoy-hoja.pp-modal-panel {
              max-width: 560px;
          }
      }

      @media (min-width: 900px) {

          /* Excel: el periodo a la izquierda y «Lo que trae» a la derecha */
          #mdx-h .mdx-hoja {
              max-width: 820px;
          }

          #mdx-h .mdx-cuerpo {
              display: grid;
              grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
              column-gap: 24px;
              row-gap: 10px;
              align-content: start;
          }

          #mdx-h .mdx-cuerpo>* {
              grid-column: 1;
          }

          #mdx-h .mdx-cuerpo>.mdx-per-txt~.mdx-rot {
              grid-column: 2;
              grid-row: 1;
          }

          #mdx-h .mdx-cuerpo>.mdx-lista {
              grid-column: 2;
              grid-row: 2 / span 5;
              align-self: start;
          }

          #mdx-h .mdx-cuerpo>.mdx-nota {
              grid-column: 2;
          }

          /* Pedidos web: más ancha, con los filtros en una fila */
          #modal-historial-pedidos .hp-panel {
              max-width: 960px;
          }

          #modal-historial-pedidos .hp-filtros {
              grid-template-columns: 200px 200px minmax(0, 1fr);
          }

          #modal-historial-pedidos .hp-buscar {
              grid-column: auto;
          }

          #modal-historial-pedidos .hp-estados {
              overflow: visible;
          }
      }

      @media (min-width: 1100px) {
          #cie-ahorro.pp-aho-cierre:not([hidden]) {
              grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(220px, .9fr);
          }
      }

      /* ── Mi tienda online: a todo el ancho en tablet horizontal y PC ── */
      @media (min-width: 1024px) {
          #mod-tienda-online .to {
              max-width: 1180px;
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              column-gap: 20px;
              row-gap: 14px;
              align-items: start;
          }

          #mod-tienda-online .to>* {
              grid-column: 1 / -1;
              min-width: 0;
              margin: 0;
          }

          /* Entregas y Horario: lo que editas a la izquierda, «Así lo ve tu cliente» fijo a la derecha */
          #mod-tienda-online .to:has(> .to-prev) {
              grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
          }

          #mod-tienda-online .to:has(> .to-prev)>.to-sec:not(.to-prev),
          #mod-tienda-online .to:has(> .to-prev)>.to-ayuda,
          #mod-tienda-online .to:has(> .to-prev)>.to-guardar {
              grid-column: 1;
          }

          #mod-tienda-online .to:has(> .to-prev)>.to-prev {
              grid-column: 2;
              grid-row: 2 / span 12;
              position: sticky;
              top: 64px;
          }

          /* Políticas: dos por fila */
          #mod-tienda-online .to:has(.to-pol-pie, .to-ayuda--pie)>.to-sec {
              grid-column: auto;
          }

          /* Resumen: los números arriba y los cuadros de dos en dos */
          #mod-tienda-online .to:has(> .to-kpis)>.to-sec {
              grid-column: auto;
          }

          #mod-tienda-online .to:has(> .to-kpis)>.to-sec:has(.to-barras) {
              grid-column: 1 / -1;
          }

          /* QR y enlaces: el cartel a la izquierda; enlaces y textos a la derecha */
          #mod-tienda-online .to:has(> .to-qr-card) {
              grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
          }

          #mod-tienda-online .to:has(> .to-qr-card)>.to-qr-card {
              grid-column: 1;
              grid-row: 2 / span 3;
              position: sticky;
              top: 64px;
          }

          #mod-tienda-online .to:has(> .to-qr-card)>.to-sec:not(.to-qr-card) {
              grid-column: 2;
          }

          #mod-tienda-online .to-guardar {
              bottom: 16px;
          }

          /* Contenido del catálogo, Datos de la tienda y Parámetros: un poco más anchos */
          #mod-configuracion.pp-cfg,
          #modulo-parametros.pp-par {
              max-width: 760px;
          }
      }