/* =============================================================================
   PayPymes ERP V7 — assets/css/login_verticales.css
   Login según el TIPO DE EMPRESA (.pp-auth.lv[data-vertical="…"]).
   Solo aspecto: paleta, textura del panel, tarjeta ilustrativa y chip del tipo.
   El "ERP General" (default) no carga nada de esto y queda como siempre.
   ============================================================================= */

/* ── Paletas: --pp-* (botón, foco, enlaces) + --lv-* (panel) ── */
.pp-auth.lv[data-vertical="gym"] {
  --pp-primary:#F59E0B; --pp-primary-rgb:245,158,11; --pp-secondary:#D9480F; --pp-secondary-rgb:217,72,15;
  --lv-ink:#130C05; --lv-accent:#FDE68A; --lv-accent-rgb:253,230,138;
  --lv-tex: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px);
  --lv-tex-size: auto;
}
.pp-auth.lv[data-vertical="restaurante"] {
  --pp-primary:#EF4444; --pp-primary-rgb:239,68,68; --pp-secondary:#9F1239; --pp-secondary-rgb:159,18,57;
  --lv-ink:#1A0807; --lv-accent:#FDBA74; --lv-accent-rgb:253,186,116;
  /* mantel a cuadros */
  --lv-tex: repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
  --lv-tex-size: auto;
}
.pp-auth.lv[data-vertical="ferreteria"] {
  --pp-primary:#F97316; --pp-primary-rgb:249,115,22; --pp-secondary:#C2410C; --pp-secondary-rgb:194,65,12;
  --lv-ink:#14110E; --lv-accent:#FACC15; --lv-accent-rgb:250,204,21;
  /* plano técnico */
  --lv-tex: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  --lv-tex-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.pp-auth.lv[data-vertical="minisuper"] {
  --pp-primary:#10B981; --pp-primary-rgb:16,185,129; --pp-secondary:#047857; --pp-secondary-rgb:4,120,87;
  --lv-ink:#04130C; --lv-accent:#BEF264; --lv-accent-rgb:190,242,100;
  /* código de barras */
  --lv-tex: repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 2px, transparent 2px 6px, rgba(255,255,255,.075) 6px 10px,
            transparent 10px 13px, rgba(255,255,255,.075) 13px 14px, transparent 14px 22px);
  --lv-tex-size: auto;
}
.pp-auth.lv[data-vertical="farmacia"] {
  --pp-primary:#14B8A6; --pp-primary-rgb:20,184,166; --pp-secondary:#0F766E; --pp-secondary-rgb:15,118,110;
  --lv-ink:#021715; --lv-accent:#67E8F9; --lv-accent-rgb:103,232,249;
  /* cruces de farmacia */
  --lv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M17 11h4v6h6v4h-6v6h-4v-6h-6v-4h6z' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E");
  --lv-tex-size: 38px 38px;
}
.pp-auth.lv[data-vertical="parqueo"] {
  --pp-primary:#3B82F6; --pp-primary-rgb:59,130,246; --pp-secondary:#1D4ED8; --pp-secondary-rgb:29,78,216;
  --lv-ink:#0A0F1A; --lv-accent:#FACC15; --lv-accent-rgb:250,204,21;
  /* líneas de estacionamiento */
  --lv-tex: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, transparent 3px 72px);
  --lv-tex-size: auto;
}
/* El degradado del ERP se resuelve en :root: hay que recalcularlo con la paleta nueva */
.pp-auth.lv {
  --pp-grad: linear-gradient(135deg, var(--pp-primary), var(--pp-secondary));
  --pp-grad-soft: linear-gradient(135deg, rgba(var(--pp-primary-rgb),.12), rgba(var(--pp-secondary-rgb),.08));
  --pp-sh-brand: 0 10px 24px -8px rgba(var(--pp-primary-rgb),.5);
}

/* ── Panel izquierdo ── */
.pp-auth.lv .pp-auth-art {
  background:
    radial-gradient(70% 55% at 12% 18%, rgba(var(--pp-primary-rgb),.5), transparent 62%),
    radial-gradient(60% 60% at 92% 88%, rgba(var(--pp-secondary-rgb),.55), transparent 62%),
    var(--lv-ink);
  gap: 22px;
}
.pp-auth.lv .pp-auth-art::before {
  background-image: var(--lv-tex);
  background-size: var(--lv-tex-size);
  -webkit-mask-image: radial-gradient(ellipse at 62% 42%, #000 22%, transparent 74%);
          mask-image: radial-gradient(ellipse at 62% 42%, #000 22%, transparent 74%);
}
/* Firma visual en el borde inferior: cinta de seguridad / carril */
.pp-auth.lv[data-vertical="ferreteria"] .pp-auth-art::after,
.pp-auth.lv[data-vertical="parqueo"] .pp-auth-art::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:10px; z-index:0; pointer-events:none;
}
.pp-auth.lv[data-vertical="ferreteria"] .pp-auth-art::after { background:repeating-linear-gradient(-45deg, #FACC15 0 14px, #111 14px 28px); opacity:.9; }
.pp-auth.lv[data-vertical="parqueo"] .pp-auth-art::after { bottom:22px; height:6px; background:repeating-linear-gradient(90deg, #FACC15 0 30px, transparent 30px 56px); opacity:.75; }

.lv-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:6px 12px; border-radius:999px;
              font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
              color:var(--lv-accent); background:rgba(var(--lv-accent-rgb),.1); border:1px solid rgba(var(--lv-accent-rgb),.25); }
.pp-auth.lv .pp-auth-pitch h1 { text-wrap:balance; }
.lv-acento { background:linear-gradient(135deg, var(--lv-accent), #fff 140%); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; }
.pp-auth.lv[data-vertical="gym"] .lv-acento { font-style:italic; padding-right:.08em; }
.pp-auth.lv .pp-auth-feat i { color:var(--lv-accent); background:rgba(var(--lv-accent-rgb),.12); }

/* ── Tarjeta ilustrativa + íconos flotantes ── */
.lv-scene { position:relative; z-index:1; width:min(100%, 380px); padding:26px 34px 10px 0; }
.lv-widget {
  position:relative; z-index:1; padding:16px 18px; border-radius:18px; color:#fff;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:lvFlota 7s ease-in-out infinite;
}
.lv-w-head { display:flex; align-items:center; gap:12px; }
.lv-w-ico { width:40px; height:40px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; font-size:17px; color:#fff; background:var(--pp-grad); box-shadow:0 8px 18px -8px rgba(var(--pp-primary-rgb),.8); }
.lv-w-tit { display:flex; flex-direction:column; min-width:0; flex:1; }
.lv-w-tit small { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.lv-w-tit b { font-size:15.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-w-pill { flex-shrink:0; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; }
.lv-w-pill.is-ok   { color:#052E1B; background:#6EE7B7; }
.lv-w-pill.is-warn { color:#451A03; background:#FCD34D; }
.lv-w-pill.is-info { color:#0B1B3F; background:#BAE6FD; }
.lv-w-rows { display:grid; gap:2px; margin-top:12px; }
.lv-w-rows > div, .lv-w-total { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13px; border-top:1px dashed rgba(255,255,255,.14); }
.lv-w-rows span { color:rgba(255,255,255,.66); }
.lv-w-rows b, .lv-w-total b { font-weight:700; font-variant-numeric:tabular-nums; }
.lv-w-total { margin-top:2px; border-top:1px solid rgba(255,255,255,.3); font-size:14px; font-weight:800; }
.lv-w-total b { color:var(--lv-accent); }
.lv-w-bar { height:6px; margin-top:12px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.lv-w-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--lv-accent), var(--pp-primary)); }
.lv-w-barcode { height:34px; margin-top:12px; border-radius:8px; background:#fff repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 7px, transparent 7px 9px, #111 9px 10px, transparent 10px 14px) content-box; padding:6px 10px; }

.lv-tile { position:absolute; z-index:2; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:19px;
           color:var(--lv-accent); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
           -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
.lv-tile-1 { top:0; right:4px; animation:lvFlota 6s ease-in-out infinite -1s; }
.lv-tile-2 { top:44%; right:-18px; width:40px; height:40px; font-size:16px; animation:lvFlota 8s ease-in-out infinite -3s; }
.lv-tile-3 { bottom:-8px; left:-14px; animation:lvFlota 7s ease-in-out infinite -5s; }
@keyframes lvFlota { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }

/* ── Lado del formulario ── */
.pp-auth.lv .pp-auth-form {
  background:
    radial-gradient(55% 45% at 100% 0%, rgba(var(--pp-primary-rgb),.10), transparent 62%),
    radial-gradient(45% 40% at 0% 100%, rgba(var(--pp-secondary-rgb),.08), transparent 62%),
    var(--pp-bg);
}
.lv-chip { display:flex; justify-content:center; margin-bottom:14px; }
.lv-chip span { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
                font-size:12px; font-weight:700; color:var(--pp-secondary);
                background:rgba(var(--pp-primary-rgb),.1); border:1px solid rgba(var(--pp-primary-rgb),.22); }

/* Pantallas bajas: la tarjeta ilustrativa no entra sin apretar el panel */
@media (max-height: 760px) { .lv-scene { display:none; } }
@media (prefers-reduced-motion: reduce) { .lv-widget, .lv-tile { animation:none !important; } }