@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --bg: #f4f8fb;
  --bg-2: #ffffff;
  --surface: rgba(255, 255, 255, .84);
  --surface-solid: #ffffff;
  --surface-2: #f3f8ff;
  --ink: #202020;
  --muted: #686868;
  --muted-2: #8b8b8b;
  --line: rgba(30, 30, 30, .10);
  --line-strong: rgba(47, 128, 237, .34);
  --accent: #2f80ed;
  --accent-2: #1d4ed8;
  --blue: #00a6d6;
  --blue-2: #22d3ee;
  --mint: #00c2a8;
  --yellow: #ffc857;
  --purple: #7c3aed;
  --soft-blue: rgba(0,166,214,.12);
  --soft-primary: rgba(47,128,237,.14);
  --soft-mint: rgba(0,194,168,.13);
  --wa: #20c76b;
  --danger: #ef4444;
  --shadow: 0 22px 60px rgba(32, 32, 32, .10);
  --shadow-strong: 0 32px 95px rgba(47, 128, 237, .20), 0 18px 60px rgba(0, 194, 168, .12);
  --radius: 30px;
  --radius-sm: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(47,128,237,.18), transparent 28vw),
    radial-gradient(circle at 88% 12%, rgba(0,166,214,.16), transparent 26vw),
    radial-gradient(circle at 80% 78%, rgba(0,194,168,.13), transparent 32vw),
    linear-gradient(180deg, #f9fbff 0%, #f4f8fb 52%, #fff 100%);
  color: var(--ink);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(47,128,237,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,128,237,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.28), transparent);
}
body::after {
  content: "";
  position: fixed;
  width: 520px;
  height: 520px;
  right: -190px;
  top: 10vh;
  border-radius: 45% 55% 62% 38% / 45% 39% 61% 55%;
  background: linear-gradient(135deg, rgba(47,128,237,.15), rgba(0,194,168,.12));
  filter: blur(1px);
  z-index: -1;
  pointer-events: none;
  animation: blobFloat 12s ease-in-out infinite alternate;
}
@keyframes blobFloat {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-60px, 70px, 0) rotate(18deg); }
}

#logo-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .98;
}

main, .footer, .topbar { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 34px)); margin: 0 auto; }
.hidden { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(145%);
  border-bottom: 1px solid rgba(32,32,32,.08);
  box-shadow: 0 14px 40px rgba(32,32,32,.05);
}
.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 250px; }
.brand img { height: 48px; width: auto; object-fit: contain; }
.brand-text strong { display: block; letter-spacing: .095em; font-size: 12px; text-transform: uppercase; }
.brand-text small { display: block; color: var(--muted); font-size: 12px; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  padding: 11px 15px;
  border-radius: 999px;
  color: #333;
  font-weight: 800;
  font-size: 14px;
  transition: .18s ease;
  border: 1px solid transparent;
}
.nav-links a:hover,
.nav-links a.active {
  background: var(--soft-primary);
  color: var(--accent-2);
  border-color: rgba(47, 128, 237, .18);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn,
.icon-btn {
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn {
  min-height: 50px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 18px 34px rgba(47, 128, 237, .26);
  letter-spacing: .01em;
}
.btn:hover,
.icon-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 48px rgba(47, 128, 237, .24); }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid rgba(32,32,32,.10); box-shadow: 0 12px 30px rgba(32,32,32,.06); }
.btn.secondary:hover { border-color: rgba(47,128,237,.28); color: var(--accent-2); }
.btn.ghost { background: transparent; color: #555; border: 1px solid rgba(32,32,32,.12); box-shadow: none; }
.btn.whatsapp { background: linear-gradient(135deg, #20c76b, #36d399); color: #062915; box-shadow: 0 18px 34px rgba(32, 199, 107, .24); }
.btn.danger { background: linear-gradient(135deg, #ef4444, #fb7185); color: #fff; }
.btn.light { background: #fff; color: var(--accent-2); box-shadow: 0 18px 38px rgba(32,32,32,.12); }
.btn.block { width: 100%; }
.btn.small { min-height: 41px; padding: 0 15px; font-size: 13px; }
.icon-btn {
  height: 50px;
  min-width: 50px;
  padding: 0 15px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(32,32,32,.10);
  position: relative;
  box-shadow: 0 12px 28px rgba(32,32,32,.06);
}
.cart-badge {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 1000;
}
.mobile-toggle { display: none; }

.hero {
  min-height: calc(92vh - 82px);
  padding: 92px 0 86px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; gap: 28px; }
.hero-copy {
  width: min(1080px, 100%);
  text-align: center;
  padding: clamp(12px, 2.4vw, 24px) 0;
  position: relative;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -36px 4% -34px;
  border-radius: 48px;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.72), rgba(255,255,255,.36) 48%, rgba(255,255,255,0) 76%);
  filter: blur(.2px);
  z-index: -1;
  pointer-events: none;
}
.hero-single h1 { margin-left: auto; margin-right: auto; max-width: 940px; }
.hero-single .lead { margin-left: auto; margin-right: auto; max-width: 820px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(47,128,237,.22);
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  color: #444;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(32,32,32,.06);
}
.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 6px rgba(47,128,237,.13); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: .94;
  letter-spacing: -.045em;
  margin: 24px 0 20px;
  color: var(--ink);
}
h1::selection, h2::selection { background: rgba(47,128,237,.25); }
.word-accent { color: var(--blue); }
.lead { color: #555; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.58; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.hero-proof span { background: #fff; border: 1px solid rgba(32,32,32,.08); color: #555; border-radius: 999px; padding: 10px 13px; font-size: 13px; font-weight: 800; box-shadow: 0 10px 24px rgba(32,32,32,.05); }

.service-showcase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; text-align: left; }
.showcase-card {
  min-height: 164px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(32,32,32,.09);
  border-radius: 28px;
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.showcase-card::before { content:""; position:absolute; inset:auto -30px -55px auto; width:140px; height:140px; border-radius:50%; background:var(--soft-primary); }
.showcase-card.blue::before { background:var(--soft-blue); }
.showcase-card.soft::before { background:rgba(124,58,237,.11); }
.showcase-card.mint::before { background:var(--soft-mint); }
.showcase-icon { width: 56px; height: 56px; border-radius: 20px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-family: Fredoka, Poppins, sans-serif; font-weight:900; margin-bottom:16px; box-shadow:0 14px 30px rgba(47,128,237,.24); }
.showcase-card.blue .showcase-icon { background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow:0 14px 30px rgba(47,128,237,.22); }
.showcase-card.soft .showcase-icon { background: linear-gradient(135deg, var(--purple), var(--blue-2)); }
.showcase-card.mint .showcase-icon { background: linear-gradient(135deg, var(--mint), #35c997); }
.showcase-card strong { display:block; font-family: Fredoka, Poppins, sans-serif; font-size: 22px; letter-spacing:-.02em; margin-bottom:6px; }
.showcase-card span { display:block; color:var(--muted); font-size:14px; line-height:1.45; position:relative; z-index:1; }

.section { padding: 64px 0; }
.section-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:24px; }
.section-head h2,
.cart-card h2,
.panel-card h2,
.cta-band h2 { font-family: Fredoka, Poppins, sans-serif; font-size: clamp(31px, 4.2vw, 52px); line-height:1; letter-spacing:-.04em; margin:0 0 10px; }
.section-head p { color:var(--muted); max-width:760px; margin:0; line-height:1.55; }
.mini-title { display:inline-flex; align-items:center; color:var(--blue); font-weight:900; letter-spacing:.02em; margin-bottom:10px; }
.mini-title.light { color:#fff; opacity:.92; }

.grid-cards,
.catalog-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.product-card,
.cart-card,
.panel-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(32,32,32,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.product-card { display:flex; flex-direction:column; min-height:100%; transition:.18s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 30px 75px rgba(32,32,32,.13); border-color:rgba(47,128,237,.22); }
.product-media { position:relative; height:220px; background: linear-gradient(135deg, #eef7ff, #e8fbff); overflow:hidden; display:grid; place-items:center; }
.product-media img { width:100%; height:100%; object-fit:cover; transition:.22s ease; }
.product-card:hover .product-media img { transform: scale(1.035); }
.product-media .fallback-icon { position:absolute; width:88px; height:88px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--blue)); color:#fff; font-family:Fredoka, Poppins, sans-serif; font-size:27px; font-weight:900; box-shadow:0 18px 36px rgba(47,128,237,.18); z-index:0; }
.product-media img + .fallback-icon { display:none; }
.product-media.broken .fallback-icon,
.product-media.empty .fallback-icon { display:grid; }
.card-body { padding:20px; display:flex; flex-direction:column; gap:16px; flex:1; }
.badge { background:rgba(47,128,237,.12); color:var(--accent-2); border:1px solid rgba(47,128,237,.22); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:900; }
.badge.single { display:inline-flex; margin-bottom:12px; }
.product-card h3 { font-family:Fredoka, Poppins, sans-serif; font-size:25px; line-height:1.05; letter-spacing:-.03em; margin:0 0 8px; }
.card-text { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }
.feature-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.feature-list li { background:#f7f7f7; color:#555; border:1px solid rgba(32,32,32,.07); border-radius:999px; padding:7px 10px; font-size:12px; font-weight:700; }
.price-row { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:16px; }
.price { font-family:Fredoka, Poppins, sans-serif; font-size:25px; line-height:1; color:var(--accent-2); font-weight:900; letter-spacing:-.03em; }
.monthly { display:block; color:var(--muted-2); font-size:12px; font-weight:700; margin-top:5px; }

.trust-strip,
.catalog-benefits { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:34px; }
.trust-item,
.benefit-card { border:1px solid rgba(32,32,32,.08); border-radius:24px; background: rgba(255,255,255,.84); backdrop-filter:blur(12px); padding:18px; box-shadow: 0 16px 38px rgba(32,32,32,.07); position:relative; overflow:hidden; }
.trust-item::before,
.benefit-card::before { content:""; position:absolute; left:0; top:0; right:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--blue)); opacity:.9; }
.trust-item strong,
.benefit-card strong { display:block; font-family:Fredoka, Poppins, sans-serif; font-size:20px; letter-spacing:-.03em; }
.trust-item span,
.benefit-card span { display:block; margin-top:5px; color:var(--muted); font-size:13px; line-height:1.45; }

.cta-band { border-radius:38px; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.20), transparent 28%), linear-gradient(135deg, #2f80ed 0%, #00a6d6 52%, #00c2a8 115%); color:#fff; padding:42px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; overflow:hidden; position:relative; box-shadow:var(--shadow-strong); }
.cta-band::after { content:"✦"; position:absolute; right:35px; top:-58px; font-size:220px; opacity:.12; font-family: Fredoka, Poppins, sans-serif; font-weight:900; }
.cta-band h2 { color:#fff; margin-bottom:12px; }
.cta-band p { color:rgba(255,255,255,.86); margin:0; max-width:760px; line-height:1.56; position:relative; z-index:1; }
.cta-band .btn { position:relative; z-index:1; }

.page-title { padding: 64px 0 30px; text-align:left; }
.page-title h1 { font-size: clamp(45px, 5.7vw, 82px); margin-bottom: 15px; max-width:900px; }
.page-title p { color: var(--muted); font-size: 18px; line-height: 1.62; max-width: 850px; }
.toolbar { display:grid; grid-template-columns:minmax(260px, 1fr) auto; gap:14px; align-items:center; margin:26px 0 24px; }
.searchbox,
.form-control { width:100%; min-height:52px; border:1px solid rgba(32,32,32,.12); border-radius:18px; background: rgba(255,255,255,.90); color: var(--ink); padding:0 17px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.searchbox::placeholder,
.form-control::placeholder { color: #969696; }
textarea.form-control { padding:14px 17px; min-height:112px; resize:vertical; }
.searchbox:focus,
.form-control:focus { border-color: rgba(47,128,237,.60); box-shadow: 0 0 0 4px rgba(47,128,237,.13); }
.category-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.pill { min-height:43px; border:1px solid rgba(32,32,32,.10); border-radius:999px; background: #fff; color:#444; font-weight:900; padding:0 15px; box-shadow:0 10px 26px rgba(32,32,32,.05); }
.pill:hover { border-color: rgba(47,128,237,.28); color:var(--accent-2); }
.pill.active { background: var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 14px 28px rgba(47,128,237,.18); }
.catalog-grid { margin-bottom:64px; }

.cart-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; margin-bottom:64px; }
.cart-card,
.panel-card { padding:24px; }
.cart-line { display:grid; grid-template-columns:1fr auto; gap:14px; padding:17px 0; border-bottom:1px solid var(--line); }
.cart-line:last-child { border-bottom:0; }
.cart-line h3 { margin:0 0 6px; font-size:18px; }
.cart-line p { margin:0; color:var(--muted); }
.qty-row { display:flex; align-items:center; gap:8px; justify-content:end; }
.qty-row button { width:36px; height:36px; border-radius:13px; border:1px solid rgba(32,32,32,.10); background:#fff; color:#333; font-weight:1000; }
.qty-row button:hover { border-color:rgba(47,128,237,.38); color:var(--accent-2); }
.qty-row strong { min-width:28px; text-align:center; }
.summary-row { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:13px 0; gap:12px; }
.summary-row strong { font-size:18px; }
.summary-row.total strong { font-family:Fredoka, Poppins, sans-serif; font-size:30px; letter-spacing:-.045em; color:var(--accent-2); }
.empty-state { text-align:center; padding:50px 18px; color:var(--muted); grid-column:1 / -1; }
.empty-state strong { color:var(--ink); display:block; font-size:24px; margin-bottom:6px; }

.form-grid { display:grid; gap:13px; }
.form-label { display:grid; gap:8px; font-weight:800; font-size:13px; color:#333; }
.form-label span { color:#333; }
.checkbox-label { display:flex !important; align-items:center; gap:10px; }
.notice { border:1px solid rgba(32,199,107,.22); border-radius:18px; padding:14px; background:rgba(32,199,107,.08); color:#136236; line-height:1.55; font-size:14px; }
.admin-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:18px; align-items:start; margin-bottom:64px; }
.admin-list { display:grid; gap:12px; }
.admin-item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border:1px solid rgba(32,32,32,.08); background: rgba(255,255,255,.74); border-radius:22px; padding:15px; }
.admin-product-item { grid-template-columns:72px 1fr auto; }
.admin-item h3 { margin:0 0 4px; font-size:16px; }
.admin-item p { margin:0; color:var(--muted); font-size:13px; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:end; }
.admin-thumb { width:64px; height:64px; border-radius:18px; background:rgba(47,128,237,.12); color:var(--accent-2); border:1px solid rgba(47,128,237,.20); display:grid; place-items:center; overflow:hidden; font-family:Fredoka, Poppins, sans-serif; font-weight:1000; }
.admin-thumb img { width:100%; height:100%; object-fit:cover; }
.admin-thumb.empty { background:linear-gradient(135deg, rgba(47,128,237,.22), rgba(47,128,237,.18)); }
.image-path { font-size:12px !important; opacity:.75; }
.image-field small { color:var(--muted); line-height:1.45; font-weight:700; }
.image-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.image-preview { min-height:178px; border:1px dashed rgba(47,128,237,.36); border-radius:24px; background:rgba(238,247,255,.74); display:grid; place-items:center; text-align:center; padding:18px; color:var(--muted); overflow:hidden; }
.image-preview strong { display:block; color:var(--ink); font-size:18px; margin-bottom:5px; }
.image-preview span { color:var(--muted); font-size:13px; line-height:1.4; }
.image-preview.has-image { padding:0; border-style:solid; position:relative; }
.image-preview.has-image img { width:100%; height:178px; object-fit:cover; }
.image-preview.has-image span { position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.88); color:var(--accent-2); border:1px solid rgba(47,128,237,.22); border-radius:999px; padding:7px 10px; font-weight:900; }
.card-text b { color: var(--ink); }

.footer { background: #fff; color:#222; padding:44px 0; margin-top:36px; border-top:1px solid rgba(32,32,32,.08); }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.footer p { color:var(--muted); margin:8px 0 0; }
.footer img { height:46px; }
.footer-links { display:flex; gap:12px; flex-wrap:wrap; }
.footer-links a { color:#444; opacity:.88; font-weight:850; }
.footer-links a:hover { opacity:1; color:var(--accent-2); }
.toast { position:fixed; right:18px; bottom:18px; background:#fff; color:#222; border:1px solid rgba(47,128,237,.24); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow); z-index:100; transform:translateY(20px); opacity:0; pointer-events:none; transition:.2s ease; max-width:min(420px, calc(100vw - 36px)); }
.toast.show { transform:translateY(0); opacity:1; }

@media (max-width: 1080px) {
  .service-showcase, .trust-strip, .catalog-benefits { grid-template-columns: repeat(2, 1fr); }
  .grid-cards, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-layout, .admin-layout { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
  .category-pills { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .container { width: min(100% - 28px, 1180px); }
  .nav { min-height: 74px; }
  .brand { min-width: 0; }
  .brand img { height: 40px; }
  .brand-text small { display: none; }
  .nav-links { position: fixed; left: 14px; right: 14px; top: 78px; padding: 12px; border: 1px solid rgba(32,32,32,.10); border-radius: 24px; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); box-shadow: var(--shadow); display: none; flex-direction: column; align-items: stretch; }
  .nav-links.show { display: flex; }
  .nav-links a { text-align: center; }
  .mobile-toggle { display: inline-flex; }
  .nav-actions .btn { display: none; }
  .hero { padding: 58px 0 46px; min-height: auto; }
  h1 { font-size: clamp(43px, 13vw, 76px); }
  .lead { font-size: 17px; }
  .service-showcase, .trust-strip, .catalog-benefits, .grid-cards, .catalog-grid { grid-template-columns: 1fr; }
  .showcase-card { min-height: 132px; }
  .section { padding: 42px 0; }
  .section-head { align-items: start; flex-direction: column; }
  .cta-band { grid-template-columns: 1fr; padding: 30px; }
  .footer-grid { grid-template-columns: 1fr; }
  .admin-product-item { grid-template-columns: 62px 1fr; }
  .admin-product-item .admin-actions { grid-column: 1 / -1; justify-content: stretch; }
  .admin-product-item .admin-actions .btn { flex: 1; }
}
@media (max-width: 520px) {
  .brand-text strong { font-size: 10px; }
  .icon-btn { min-width: 44px; height: 44px; padding: 0 12px; }
  .hero-actions .btn { width: 100%; }
  .product-card { min-height: auto; }
  .product-media { height: 196px; }
  .cart-line { grid-template-columns: 1fr; }
  .qty-row { justify-content: flex-start; }
  .image-actions { grid-template-columns: 1fr; }
  .page-title { padding-top: 42px; }
}

/* Limpieza solicitada: se retiraron los bloques de beneficios/cuadrados del inicio */
.hero-proof, .service-showcase, .trust-strip, .catalog-benefits { display: none !important; }


/* Ajustes solicitados: ocultar el acceso admin en la vista pública y limpiar etiquetas duplicadas */
.nav-links a[href="/admin.html"] { display:none !important; }
.eyebrow { display:none !important; }
.media-label, .card-top, .category-mini { display:none !important; }





/* Redes en cabecera */
.social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(32,32,32,.10);
  box-shadow: 0 10px 24px rgba(32,32,32,.06);
  padding: 6px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.social-link img { width: 28px; height: 28px; object-fit: contain; display:block; }
.social-link:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(32,32,32,.10); border-color: rgba(47,128,237,.28) !important; }
@media (max-width: 820px) {
  .nav-links .social-link { margin: 4px auto 0; }
}


/* Ajuste final: menú superior normal y redes solo en el footer */
.social-footer {
  align-items: center;
  justify-content: flex-end;
}
.social-footer .social-link {
  width: 48px;
  height: 48px;
}
.social-footer .social-link img {
  width: 31px;
  height: 31px;
}
.nav-links .social-link {
  display: none !important;
}
@media (max-width: 820px) {
  .social-footer {
    justify-content: flex-start;
  }
}

/* Landing de oferta para campañas Meta Ads - mantiene el diseño base */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.card-actions .btn { white-space: nowrap; }
.offer-page .offer-title { padding-bottom: 12px; }
.offer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .55fr);
  gap: 18px;
  align-items: start;
  margin: 0 0 70px;
}
.offer-card,
.offer-form-card {
  border: 1px solid rgba(32,32,32,.08);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}
.offer-card {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) 1fr;
  min-height: 560px;
}
.offer-media {
  min-height: 100%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.90), transparent 30%),
    linear-gradient(135deg, rgba(47,128,237,.16), rgba(0,194,168,.11));
  border-right: 1px solid rgba(32,32,32,.08);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.offer-media::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 44px;
  border: 1px solid rgba(47,128,237,.16);
  pointer-events: none;
}
.offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-media.empty .fallback-icon,
.offer-media.broken .fallback-icon {
  display: grid;
}
.offer-media .fallback-icon {
  display: none;
  width: 160px;
  height: 160px;
  border-radius: 42px;
  place-items: center;
  background: linear-gradient(135deg, rgba(47,128,237,.22), rgba(0,194,168,.16));
  border: 1px solid rgba(47,128,237,.22);
  color: var(--accent-2);
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 56px;
  font-weight: 1000;
}
.offer-content {
  padding: clamp(24px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.offer-content h2 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: .98;
  letter-spacing: -.04em;
  margin: 14px 0 14px;
}
.offer-lead,
.offer-description {
  color: var(--muted);
  line-height: 1.62;
}
.offer-lead { font-size: 18px; margin-bottom: 20px; }
.offer-description { margin: 2px 0 18px; }
.offer-price-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 18px;
}
.offer-price-card {
  border: 1px solid rgba(47,128,237,.16);
  background: rgba(238,247,255,.76);
  border-radius: 22px;
  padding: 16px;
}
.offer-price-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.offer-price-card strong {
  display: block;
  color: var(--accent-2);
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -.03em;
}
.offer-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.offer-feature-list li {
  position: relative;
  padding: 12px 12px 12px 38px;
  border: 1px solid rgba(32,32,32,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  color: #3a3a3a;
  font-weight: 760;
  line-height: 1.35;
}
.offer-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 13px;
  top: 11px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(32,199,107,.16);
  color: #128347;
  font-size: 12px;
  font-weight: 1000;
}
.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.offer-form-card {
  padding: clamp(22px, 3vw, 30px);
  position: sticky;
  top: 104px;
}
.offer-form-head h2 {
  margin: 5px 0 7px;
  font-size: 28px;
}
.offer-form-head p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.55;
}
.admin-actions a.btn { text-decoration: none; }
@media (max-width: 1080px) {
  .offer-layout { grid-template-columns: 1fr; }
  .offer-form-card { position: static; }
}
@media (max-width: 820px) {
  .offer-card { grid-template-columns: 1fr; min-height: auto; }
  .offer-media { min-height: 310px; border-right: 0; border-bottom: 1px solid rgba(32,32,32,.08); }
  .offer-price-row, .offer-feature-list { grid-template-columns: 1fr; }
  .offer-actions .btn, .card-actions .btn { width: 100%; }
  .card-actions { width: 100%; justify-content: stretch; }
}

/* Ajuste desktop landing oferta: imagen completa y vista más compacta */
.offer-media img {
  object-fit: contain;
  padding: 18px;
  filter: drop-shadow(0 18px 30px rgba(32,32,32,.12));
}

@media (min-width: 1081px) {
  .offer-page .offer-title {
    padding: 34px 0 18px;
  }

  .offer-page .offer-title h1 {
    font-size: clamp(38px, 4vw, 62px);
    margin: 14px 0 10px;
  }

  .offer-page .offer-title p {
    max-width: 720px;
  }

  .offer-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 392px);
    gap: 24px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  .offer-card {
    grid-template-columns: minmax(300px, 42%) minmax(0, 58%);
    min-height: auto;
    align-items: stretch;
  }

  .offer-media {
    min-height: 470px;
    max-height: 560px;
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.92), transparent 34%),
      linear-gradient(135deg, rgba(47,128,237,.12), rgba(0,194,168,.09));
  }

  .offer-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
  }

  .offer-media::after {
    inset: 18px;
    border-radius: 34px;
  }

  .offer-content {
    padding: clamp(26px, 3vw, 38px);
    justify-content: flex-start;
  }

  .offer-content h2 {
    font-size: clamp(38px, 3.25vw, 54px);
    margin: 12px 0 12px;
  }

  .offer-lead {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .offer-description {
    margin-bottom: 16px;
  }

  .offer-price-row {
    gap: 10px;
    margin-bottom: 16px;
  }

  .offer-price-card {
    padding: 14px 15px;
    border-radius: 20px;
  }

  .offer-price-card strong {
    font-size: clamp(24px, 2vw, 31px);
  }

  .offer-feature-list {
    gap: 9px;
    margin-bottom: 18px;
  }

  .offer-feature-list li {
    padding: 11px 11px 11px 36px;
  }

  .offer-form-card {
    top: 98px;
    padding: 28px;
  }

  .offer-form-head h2 {
    font-size: 27px;
  }

  .offer-form-card .form-grid {
    gap: 12px;
  }

  .offer-form-card textarea.form-control {
    min-height: 96px;
  }
}

@media (max-width: 820px) {
  .offer-media img {
    object-fit: contain;
    padding: 14px;
  }
}

/* Oferta limpia sin mostrar imagen grande + promo Yape para POS */
.offer-card--clean {
  display: block;
  min-height: auto;
}
.offer-content--full {
  justify-content: flex-start;
}
.offer-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.offer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(47,128,237,.16);
  background: rgba(238,247,255,.8);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.offer-mini-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.offer-mini-benefit {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(32,32,32,.08);
  color: #3a3a3a;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}
.offer-mini-benefit--accent {
  background: linear-gradient(135deg, rgba(108,34,181,.12), rgba(32,199,107,.14));
  border-color: rgba(108,34,181,.18);
  color: #5f148c;
}
.offer-highlight {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  margin: 6px 0 18px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(108,34,181,.16);
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.85), transparent 28%),
    linear-gradient(135deg, rgba(108,34,181,.10), rgba(27,205,191,.12));
}
.offer-highlight-media {
  display: grid;
  place-items: center;
}
.offer-highlight-media img {
  width: 100%;
  max-width: 94px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(108,34,181,.18));
}
.offer-highlight-copy h3 {
  margin: 4px 0 8px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.offer-highlight-copy p {
  margin: 0 0 10px;
  color: #5f5f5f;
  line-height: 1.58;
}
.offer-highlight-tag {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(108,34,181,.12);
  color: #6c22b5;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.offer-highlight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.offer-highlight-list li {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(108,34,181,.14);
  color: #4e4e4e;
  font-weight: 800;
  font-size: 12px;
}
.notice.notice--pos {
  background: linear-gradient(135deg, rgba(108,34,181,.10), rgba(32,199,107,.10));
  border-color: rgba(108,34,181,.18);
  color: #4f256c;
}
.offer-form-card--pos {
  border-color: rgba(108,34,181,.14);
}
@media (min-width: 1081px) {
  .offer-card--clean .offer-content {
    padding: clamp(28px, 3vw, 42px);
  }
}
@media (max-width: 1080px) {
  .offer-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .offer-topline,
  .offer-mini-benefits,
  .offer-highlight-list {
    gap: 8px;
  }
  .offer-highlight {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 12px;
    padding: 16px;
  }
  .offer-highlight-media {
    justify-content: start;
  }
  .offer-highlight-media img {
    max-width: 82px;
  }
}


/* Oferta directa limpia: sin encabezado, sin título superior y sin footer */
.offer-clean-body .topbar,
.offer-clean-body .footer,
.offer-clean-body .offer-title,
.offer-clean-body .page-title {
  display: none !important;
}
.offer-page-clean {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px) 0;
  display: flex;
  align-items: center;
}
.offer-only-section {
  width: 100%;
}
.offer-page-clean .offer-layout {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.offer-clean-body .offer-card,
.offer-clean-body .offer-form-card {
  background: rgba(255,255,255,.90);
}
@media (max-width: 1080px) {
  .offer-page-clean {
    align-items: flex-start;
    padding: 18px 0 28px;
  }
}

/* Ajuste final: pills alineados + hero visual del POS */
.offer-topline {
  align-items: center;
  gap: 12px;
}
.offer-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  margin: 0 !important;
  line-height: 1;
  white-space: nowrap;
}
.offer-kicker.offer-pill {
  background: rgba(255,255,255,.9);
}
.offer-hero-visual {
  margin: 0 0 18px;
}
.offer-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  border: 1px solid rgba(47,128,237,.14);
  box-shadow: 0 24px 56px rgba(32,32,32,.12);
}
.offer-card--clean.offer-card--pos .offer-content {
  gap: 0;
}
@media (max-width: 820px) {
  .offer-topline {
    gap: 10px;
  }
  .offer-pill {
    min-height: 40px;
    padding: 0 16px;
    font-size: 12px;
  }
  .offer-hero-visual {
    margin-bottom: 16px;
  }
  .offer-hero-visual img {
    border-radius: 22px;
  }
}

/* Ajuste final oferta POS: chips alineados + hero visual con imagen del POS */
.offer-topline {
  align-items: stretch;
  gap: 12px;
}
.offer-topline .badge.single,
.offer-kicker {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  line-height: 1;
  white-space: nowrap;
}
.offer-card--pos {
  overflow: visible;
}
.offer-hero-visual {
  position: relative;
  padding: 24px 24px 10px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(135deg, rgba(47,128,237,.10), rgba(0,194,168,.08));
}
.offer-hero-frame {
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(47,128,237,.14);
  box-shadow: 0 20px 44px rgba(32,32,32,.10);
}
.offer-hero-main {
  width: 100%;
  height: auto;
  display: block;
}
.offer-hero-badge {
  position: absolute;
  right: 42px;
  bottom: -8px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(390px, calc(100% - 76px));
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(108,34,181,.16);
  box-shadow: 0 18px 38px rgba(32,32,32,.12);
}
.offer-hero-badge img {
  width: 52px;
  height: auto;
  flex: 0 0 auto;
}
.offer-hero-badge strong {
  display: block;
  color: #6c22b5;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2px;
}
.offer-hero-badge span {
  display: block;
  color: #555;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}
.offer-card--pos .offer-content {
  padding-top: 26px;
}
@media (max-width: 1080px) {
  .offer-hero-visual {
    padding: 18px 18px 8px;
  }
  .offer-hero-badge {
    right: 30px;
    max-width: calc(100% - 56px);
  }
}
@media (max-width: 820px) {
  .offer-topline {
    gap: 10px;
  }
  .offer-topline .badge.single,
  .offer-kicker {
    min-height: 42px;
    padding: 0 15px;
    font-size: 12px;
  }
  .offer-hero-visual {
    padding: 14px 14px 8px;
  }
  .offer-hero-frame {
    border-radius: 22px;
  }
  .offer-hero-badge {
    position: static;
    margin-top: 12px;
    max-width: 100%;
    border-radius: 18px;
    padding: 12px;
  }
  .offer-hero-badge img {
    width: 46px;
  }
}

/* Franja superior y botón fijo de oferta */
.offer-clean-body {
  padding-bottom: 96px;
}
.offer-marquee {
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden;
  background: linear-gradient(90deg, #ff8a00, #ff9d1e, #ff8a00);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 26px rgba(255,138,0,.18);
}
.offer-marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  min-width: 100%;
  padding: 10px 18px;
  animation: offerTicker 22s linear infinite;
}
.offer-marquee-track span {
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@keyframes offerTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.offer-page-clean {
  padding-top: 14px;
}
.offer-sticky-cta-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.offer-sticky-cta {
  pointer-events: auto;
  width: min(680px, 100%);
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #20c76b, #36d399);
  color: #fff;
  font-weight: 1000;
  font-size: 17px;
  letter-spacing: .02em;
  box-shadow: 0 20px 42px rgba(32, 199, 107, .26);
  transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
}
.offer-sticky-cta.hidden-by-scroll {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}
.offer-sticky-cta:hover {
  transform: translateY(-2px);
}
@media (max-width: 820px) {
  .offer-marquee-track {
    gap: 28px;
    padding: 9px 14px;
    animation-duration: 18s;
  }
  .offer-marquee-track span {
    font-size: 12px;
  }
  .offer-sticky-cta {
    min-height: 54px;
    border-radius: 14px;
    font-size: 16px;
  }
}

/* Barra superior en movimiento + CTA fijo inferior */
.offer-page-clean {
  padding-bottom: 92px;
}
.offer-announcement {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(90deg, #eb8d1b, #f2a53c, #eb8d1b);
  color: #fff;
  box-shadow: 0 14px 28px rgba(235,141,27,.24);
  margin-bottom: 14px;
}
.offer-announcement-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  animation: offerMarquee 20s linear infinite;
}
.offer-announcement-track span {
  display: inline-block;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@keyframes offerMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.offer-sticky-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 80;
  min-width: min(560px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #33cc5f, #5ad96f);
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 18px 34px rgba(51,204,95,.26);
  border: 1px solid rgba(255,255,255,.24);
}
.offer-sticky-cta:hover {
  transform: translateX(-50%) translateY(-2px);
  color: #fff;
}
@media (max-width: 820px) {
  .offer-page-clean {
    padding-bottom: 86px;
  }
  .offer-announcement {
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .offer-announcement-track span {
    padding: 10px 14px;
    font-size: 11px;
  }
  .offer-sticky-cta {
    bottom: 10px;
    min-width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 17px;
  }
}


/* Ajuste solicitado: una sola barra visible, badge Yape encima de la foto y CTA animado */
.offer-announcement {
  padding: 0;
}
.offer-announcement-track {
  display: block;
  min-width: 100%;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: offerMarqueeSingle 14s linear infinite;
}
.offer-announcement-track span {
  display: inline-block;
  padding-right: 42vw;
}
@keyframes offerMarqueeSingle {
  from { transform: translateX(0); }
  to { transform: translateX(-32%); }
}
.offer-hero-visual {
  overflow: visible;
}
.offer-hero-badge {
  z-index: 3;
}
.offer-sticky-cta {
  animation: ctaPulseMove 1.25s ease-in-out infinite;
}
@keyframes ctaPulseMove {
  0% { transform: translateX(-50%) scale(1); box-shadow: 0 18px 34px rgba(51,204,95,.26); }
  35% { transform: translateX(-50%) translateY(-2px) scale(1.03); box-shadow: 0 22px 36px rgba(51,204,95,.34); }
  70% { transform: translateX(-50%) scale(0.99); box-shadow: 0 14px 24px rgba(51,204,95,.22); }
  100% { transform: translateX(-50%) scale(1); box-shadow: 0 18px 34px rgba(51,204,95,.26); }
}
.offer-sticky-cta:hover {
  animation-play-state: paused;
}
@media (max-width: 820px) {
  .offer-announcement {
    margin-bottom: 10px;
  }
  .offer-announcement-track span {
    padding: 10px 18px 10px 10px;
    padding-right: 28vw;
  }
  .offer-hero-visual {
    padding-bottom: 18px;
  }
  .offer-hero-badge {
    position: absolute;
    right: 18px;
    bottom: 20px;
    margin-top: 0;
    max-width: min(230px, calc(100% - 36px));
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,.96);
  }
  .offer-hero-badge img {
    width: 40px;
  }
  .offer-hero-badge strong {
    font-size: 14px;
  }
  .offer-hero-badge span {
    font-size: 11px;
    line-height: 1.2;
  }
  .offer-sticky-cta {
    animation: ctaPulseMoveMobile 1.15s ease-in-out infinite;
  }
  @keyframes ctaPulseMoveMobile {
    0% { transform: translateX(-50%) scale(1); }
    35% { transform: translateX(-50%) translateY(-2px) scale(1.025); }
    70% { transform: translateX(-50%) scale(0.992); }
    100% { transform: translateX(-50%) scale(1); }
  }
}

/* Ajuste final solicitado: solo una barra naranja y promo Yape arriba de la imagen */
.offer-hero-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offer-hero-badge,
.offer-hero-badge.offer-hero-badge--top {
  position: static;
  right: auto;
  bottom: auto;
  margin: 0 0 2px;
  max-width: 100%;
  width: fit-content;
  align-self: flex-start;
  border-radius: 18px;
  padding: 10px 14px;
}
.offer-hero-frame {
  width: 100%;
}
.offer-announcement-track span {
  padding-right: 16vw;
}
@media (max-width: 820px) {
  .offer-hero-visual {
    gap: 10px;
    padding-bottom: 8px;
  }
  .offer-hero-badge,
  .offer-hero-badge.offer-hero-badge--top {
    position: static;
    margin: 0 0 2px;
    max-width: 100%;
    width: fit-content;
    align-self: flex-start;
    padding: 10px 12px;
    border-radius: 15px;
  }
  .offer-announcement-track span {
    padding-right: 18vw;
  }
}



/* Checkout oculto para landing de oferta POS */
.offer-layout.offer-layout--single {
  grid-template-columns: 1fr;
  max-width: min(900px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.offer-layout--single .offer-card {
  width: 100%;
}
.offer-layout--single .offer-actions .btn {
  width: auto;
}
body.modal-open {
  overflow: hidden;
}
.offer-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
}
.offer-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 18, .62);
  backdrop-filter: blur(5px);
}
.offer-checkout-card {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 28px));
  max-height: min(92vh, 820px);
  border-radius: 28px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(32,32,32,.12);
  box-shadow: 0 32px 90px rgba(0,0,0,.26);
  overflow: hidden;
}
.offer-checkout-scroll {
  max-height: min(92vh, 820px);
  overflow: auto;
  padding: 28px;
}
.offer-checkout-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(32,32,32,.10);
  background: #fff;
  color: #333;
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(32,32,32,.08);
}
.offer-checkout-head {
  text-align: center;
  padding: 4px 40px 16px;
}
.offer-checkout-head h2 {
  margin: 0 0 8px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.offer-checkout-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.offer-checkout-options {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.offer-checkout-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(32,32,32,.10);
  background: #fff;
}
.offer-checkout-thumb {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(47,128,237,.16), rgba(0,194,168,.14));
  color: var(--accent-2);
  font-weight: 1000;
  font-size: 16px;
}
.offer-checkout-thumb.fe {
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(0,194,168,.12));
  color: #6c22b5;
}
.offer-checkout-info strong {
  display: block;
  color: #202020;
  font-size: 15px;
  line-height: 1.18;
  margin-bottom: 4px;
}
.offer-checkout-info span,
.offer-checkout-info small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.offer-checkout-info small {
  color: #6b6b6b;
  font-weight: 800;
  margin-top: 3px;
}
.offer-checkout-price {
  min-width: 116px;
  text-align: right;
}
.offer-checkout-price > strong {
  display: block;
  color: #111;
  font-size: 15px;
  margin-bottom: 8px;
}
.qty-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(32,32,32,.12);
  background: rgba(248,250,252,.96);
  border-radius: 999px;
  padding: 5px;
}
.qty-control button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(32,32,32,.08);
}
.qty-control span {
  min-width: 18px;
  display: inline-block;
  text-align: center;
  font-weight: 1000;
}
.offer-checkout-summary {
  margin: 14px 0 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(248,250,252,.9);
  border: 1px solid rgba(32,32,32,.08);
}
.offer-checkout-summary .summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(32,32,32,.10);
}
.offer-checkout-summary .summary-row:last-child {
  border-bottom: 0;
}
.offer-checkout-summary .summary-row span {
  color: #4f4f4f;
  font-weight: 700;
}
.offer-checkout-summary .summary-row strong {
  color: #202020;
}
.offer-checkout-summary .summary-row.discount strong {
  color: #df2f2f;
}
.offer-checkout-summary .summary-row.total {
  font-size: 18px;
}
.offer-checkout-summary .summary-row.total strong {
  font-size: 20px;
  font-weight: 1000;
}
.offer-form-head.mini {
  text-align: center;
  margin: 18px 0 14px;
}
.offer-form-head.mini h2 {
  margin-bottom: 5px;
}
.offer-checkout-card .form-grid {
  gap: 12px;
}
.offer-checkout-card textarea.form-control {
  min-height: 86px;
}
.offer-sticky-cta {
  border: 0;
  cursor: pointer;
}
@media (max-width: 820px) {
  .offer-layout.offer-layout--single {
    max-width: 100%;
  }
  .offer-checkout-modal {
    align-items: start;
    padding: 12px;
  }
  .offer-checkout-card {
    width: min(430px, calc(100vw - 20px));
    max-height: calc(100vh - 24px);
    border-radius: 24px;
  }
  .offer-checkout-scroll {
    max-height: calc(100vh - 24px);
    padding: 24px 14px 18px;
  }
  .offer-checkout-head {
    padding: 0 42px 14px 10px;
    text-align: left;
  }
  .offer-checkout-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .offer-checkout-thumb {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 14px;
  }
  .offer-checkout-price {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding-top: 8px;
    border-top: 1px dashed rgba(32,32,32,.10);
  }
  .offer-checkout-price > strong {
    margin: 0;
  }
  .offer-checkout-summary {
    padding: 12px;
  }
  .offer-checkout-summary .summary-row.total {
    font-size: 16px;
  }
  .offer-checkout-summary .summary-row.total strong {
    font-size: 18px;
  }
}


/* Fix pedido directo: al abrir el checkout se oculta la franja naranja y el botón fijo */
body.modal-open .offer-marquee,
body.modal-open .offer-sticky-cta,
body.modal-open .offer-sticky-cta-wrap {
  display: none !important;
}
.offer-checkout-modal:not(.hidden) {
  display: grid !important;
}
.offer-checkout-modal.hidden {
  display: none !important;
}


/* Ajuste mobile: que el boton "Realizar mi pedido" se vea completo */
.offer-checkout-card .btn.block.whatsapp[type="submit"] {
  position: sticky;
  bottom: 0;
  z-index: 3;
  box-shadow: 0 14px 26px rgba(51, 204, 95, .24);
}
@media (max-width: 820px) {
  .offer-checkout-modal {
    padding: 10px;
  }
  .offer-checkout-card {
    max-height: calc(100dvh - 20px);
  }
  .offer-checkout-scroll {
    max-height: calc(100dvh - 20px);
    padding: 22px 14px calc(env(safe-area-inset-bottom, 0px) + 96px);
  }
  .offer-checkout-card .form-grid {
    padding-bottom: 8px;
  }
  .offer-checkout-card .btn.block.whatsapp[type="submit"] {
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    margin-top: 8px;
  }
}

/* Estado de pedidos en admin */
.admin-order-item {
  align-items: flex-start;
}
.admin-order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 120px;
}
.order-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 7px 0;
}
.order-contact-row span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(47,128,237,.08);
  border: 1px solid rgba(47,128,237,.14);
  color: #2b2b2b;
  font-size: 12px;
  font-weight: 800;
}
.badge.status-pendiente {
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .28);
  color: #a16207;
}
.badge.status-atendido {
  background: rgba(34, 197, 94, .13);
  border-color: rgba(34, 197, 94, .28);
  color: #15803d;
}
.admin-order-item.status-atendido {
  opacity: .78;
}
.admin-order-item.status-atendido h3 {
  color: #555;
}
.admin-order-side .btn[disabled] {
  opacity: .52;
  cursor: not-allowed;
  transform: none !important;
}
@media (max-width: 820px) {
  .admin-order-side {
    width: 100%;
    align-items: stretch;
  }
  .admin-order-side .badge,
  .admin-order-side .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ===== Módulo APIs / RENIEC ===== */
.api-title-section h1 { max-width: 920px; }
.api-section { padding-top: 22px; }
.api-single-layout {
  width: min(880px, calc(100% - 34px));
  margin: 0 auto;
}
.api-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  margin: 0 auto 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(32,32,32,.08);
  border-radius: 999px;
  box-shadow: 0 16px 38px rgba(32,32,32,.07);
  backdrop-filter: blur(14px);
}
.api-mode-btn {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #444;
  font-weight: 900;
  transition: .18s ease;
}
.api-mode-btn:hover {
  color: var(--accent-2);
  background: rgba(47,128,237,.08);
}
.api-mode-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 16px 32px rgba(47,128,237,.24);
}
.api-mode-panel {
  animation: apiPanelIn .18s ease both;
}
@keyframes apiPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.api-card { position: relative; overflow: hidden; }
.api-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -92px;
  bottom: -118px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(47,128,237,.13), rgba(0,194,168,.10));
  pointer-events: none;
}
.api-card-head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.api-card-head h2 { margin-bottom: 5px; }
.api-card-head p { margin: 0; color: var(--muted); line-height: 1.5; }
.api-icon {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: Fredoka, Poppins, sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: 0 16px 34px rgba(47,128,237,.22);
}
.api-icon.soft { background: linear-gradient(135deg, var(--blue), var(--mint)); }
.api-form { position: relative; z-index: 1; }
.api-mode-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.api-form .full-span { grid-column: 1 / -1; }
.api-big-input { font-size: 24px; font-weight: 900; letter-spacing: .12em; }
.api-results-section { padding-top: 18px; }
.api-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 62px;
}
.api-results.empty-state,
.api-loading-card {
  display: block;
  padding: 30px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(32,32,32,.08);
  box-shadow: var(--shadow);
  color: var(--muted);
}
.api-results.empty-state strong,
.api-loading-card strong {
  display: block;
  color: var(--ink);
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 26px;
  margin-bottom: 6px;
}
.api-loading-card span { display: block; color: var(--muted); }
.api-person-card {
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(32,32,32,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  overflow: hidden;
  position: relative;
}
.api-person-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--blue), var(--mint));
}
.api-person-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.api-person-top h3 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 8px;
}
.api-person-top p { margin: 0; color: var(--muted); }
.api-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.api-data-grid div {
  border: 1px solid rgba(32,32,32,.07);
  background: #f8fbff;
  border-radius: 17px;
  padding: 12px 13px;
  min-width: 0;
}
.api-data-grid .full-span { grid-column: 1 / -1; }
.api-data-grid span {
  display: block;
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.api-data-grid strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

@media (max-width: 940px) {
  .api-results { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .api-mode-tabs { grid-template-columns: 1fr; border-radius: 28px; }
  .api-mode-panel .form-grid { grid-template-columns: 1fr; }
  .api-card-head,
  .api-person-top { flex-direction: column; }
  .api-data-grid { grid-template-columns: 1fr; }
  .api-data-grid .full-span { grid-column: auto; }
  .api-big-input { font-size: 20px; }
}

/* ===== Ajuste solicitado APIs: formulario izquierda / resultados derecha ===== */
.api-title-section {
  padding-bottom: 12px;
}
.api-title-section h1 {
  max-width: 1180px;
  font-size: 42px !important;
  line-height: 1.05 !important;
}
.api-section {
  padding-top: 14px;
}
.api-workspace {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(310px, 430px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.api-left-column {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 104px;
  align-self: start;
}
.api-right-column {
  min-width: 0;
  padding-top: 0;
}
.api-mode-picker {
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(32,32,32,.08);
  box-shadow: 0 16px 38px rgba(32,32,32,.07);
  backdrop-filter: blur(14px);
}
.api-mode-select {
  min-height: 56px;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  border-color: rgba(47,128,237,.18);
  background:
    linear-gradient(45deg, transparent 50%, #fff 50%) calc(100% - 24px) 50% / 8px 8px no-repeat,
    linear-gradient(135deg, var(--accent), var(--accent-2));
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(47,128,237,.24);
}
.api-mode-select option {
  color: #202020;
  background: #fff;
  font-weight: 800;
}
.api-mode-tabs--compat {
  display: none !important;
}
.api-left-column .api-mode-panel .form-grid,
.api-form-stack {
  grid-template-columns: 1fr !important;
}
#dniSearchForm .btn,
#nameSearchForm .btn,
#rucSearchForm .btn {
  margin-top: 4px;
}
.api-results-head {
  align-items: center;
  padding: 22px 24px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(32,32,32,.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.api-results-head h2 {
  font-size: clamp(31px, 3.6vw, 48px);
}
.api-right-column .api-results {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
.api-right-column .api-person-card {
  width: 100%;
}
.api-right-column .api-results.empty-state,
.api-right-column .api-loading-card {
  min-height: 220px;
  display: grid;
  align-content: center;
  text-align: left;
}

@media (max-width: 1080px) {
  .api-workspace {
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: 18px;
  }
}
@media (max-width: 900px) {
  .api-workspace {
    grid-template-columns: 1fr;
  }
  .api-left-column {
    position: static;
  }
  .api-results-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .api-results-head .btn {
    width: 100%;
  }
}
@media (max-width: 620px) {
  .api-workspace {
    width: min(100% - 28px, 1180px);
  }
  .api-mode-picker {
    padding: 14px;
    border-radius: 22px;
  }
  .api-results-head {
    padding: 18px;
  }
}


/* ===== Mejora selector API: dropdown propio integrado al diseño ===== */
.api-mode-picker--custom {
  position: relative;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,251,255,.86));
  border: 1px solid rgba(47,128,237,.14);
  box-shadow: 0 20px 48px rgba(32,32,32,.08);
  backdrop-filter: blur(16px) saturate(145%);
  z-index: 20;
}
.api-picker-label {
  display: block;
  margin: 0 0 10px;
  color: #333;
  font-size: 13px;
  font-weight: 900;
}
.api-mode-dropdown-btn {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 22px;
  padding: 9px 12px 9px 10px;
  display: grid;
  grid-template-columns: 52px 1fr 34px;
  gap: 10px;
  align-items: center;
  text-align: left;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 17px 34px rgba(47,128,237,.24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.api-mode-dropdown-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(47,128,237,.30);
}
.api-mode-current-icon {
  width: 52px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  font-size: 12px;
  letter-spacing: .04em;
}
.api-mode-current-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.api-mode-current-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  transition: transform .18s ease;
}
.api-mode-picker--custom.open .api-mode-current-arrow {
  transform: rotate(180deg);
}
.api-mode-menu {
  position: absolute;
  left: 18px;
  right: 18px;
  top: calc(100% - 8px);
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(47,128,237,.16);
  box-shadow: 0 26px 58px rgba(32,32,32,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 25;
}
.api-mode-picker--custom.open .api-mode-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.api-mode-option {
  min-height: 58px;
  border: 1px solid rgba(32,32,32,.08);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 9px 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(32,32,32,.05);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.api-mode-option:hover {
  transform: translateY(-1px);
  border-color: rgba(47,128,237,.30);
  background: rgba(238,247,255,.92);
}
.api-mode-option span {
  width: 46px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(47,128,237,.12);
  color: var(--accent-2);
  font-size: 12px;
}
.api-mode-option strong {
  font-size: 14px;
  line-height: 1.1;
}
.api-mode-option.active {
  background: linear-gradient(135deg, rgba(47,128,237,.12), rgba(0,194,168,.10));
  border-color: rgba(47,128,237,.28);
  color: var(--accent-2);
}
.api-mode-option.active span {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

/* Oculta el texto: “1 resultado encontrado · Fuente: mysql.” */
#apiResultInfo {
  display: none !important;
}

@media (max-width: 620px) {
  .api-mode-picker--custom {
    padding: 14px;
    border-radius: 24px;
  }
  .api-mode-dropdown-btn {
    min-height: 58px;
    grid-template-columns: 48px 1fr 32px;
    border-radius: 20px;
  }
  .api-mode-current-icon {
    width: 48px;
    height: 40px;
  }
  .api-mode-menu {
    left: 14px;
    right: 14px;
    border-radius: 20px;
  }
}



/* Ajuste tamaño formulario API DNI */
.api-card-head h2 {
  font-size: 30px !important;   /* título Buscar por DNI */
  line-height: 1.05 !important;
}

#apiDniInput {
  font-size: 19px !important;   /* número que escribes */
  font-weight: 800 !important;
  min-height: 50px !important;
  padding: 0 18px !important;
}

/* También achica el botón */
#dniSearchForm .btn,
#rucSearchForm .btn {
  min-height: 46px !important;
  font-size: 15px !important;
}

#apiRucInput {
  font-size: 19px !important;
  font-weight: 800 !important;
  min-height: 50px !important;
  padding: 0 18px !important;
}



/* Ajuste solicitado: ocultar iconos DNI/NOM en la página APIs */
.api-icon,
.api-mode-current-icon,
.api-mode-option span {
  display: none !important;
}

/* Reacomoda el selector al ocultar los iconos */
.api-card-head {
  gap: 0 !important;
}

.api-mode-dropdown-btn {
  grid-template-columns: 1fr 34px !important;
  padding-left: 18px !important;
}

.api-mode-option {
  grid-template-columns: 1fr !important;
  padding-left: 16px !important;
}

@media (max-width: 620px) {
  .api-mode-dropdown-btn {
    grid-template-columns: 1fr 32px !important;
    padding-left: 16px !important;
  }
}

/* Achicar cabecera de resultados en APIs */
.api-results-head {
  padding: 22px 26px !important;
  margin-bottom: 16px !important;
}

.api-results-head .mini-title {
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.api-results-head h2 {
  font-size: 30px !important;   /* Datos encontrados */
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

#apiClearBtn {
  min-height: 44px !important;
  padding: 0 22px !important;
  font-size: 15px !important;
}


/* API RENIEC: resultados múltiples / homónimos */
.api-results-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(47,128,237,.18);
  border-radius: 22px;
  background: rgba(238,247,255,.82);
  box-shadow: 0 12px 28px rgba(47,128,237,.08);
}
.api-results-summary strong {
  display: block;
  color: var(--accent-2);
  font-size: 16px;
  margin-bottom: 4px;
}
.api-results-summary span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.api-results-multiple {
  display: grid;
  gap: 14px;
}
.api-person-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.api-person-badges .badge.single {
  margin-bottom: 0;
}
.api-person-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0,194,168,.13);
  color: #087d6d;
  border: 1px solid rgba(0,194,168,.24);
  font-size: 12px;
  font-weight: 900;
}
@media (max-width: 520px) {
  .api-results-summary {
    padding: 14px;
    border-radius: 18px;
  }
}


/* API SUNAT: tarjeta de RUC */
.api-ruc-card .api-data-grid .api-ruc-reps {
  display: grid;
  gap: 6px;
}
.api-ruc-card .api-data-grid .api-ruc-reps small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}


/* =========================
   FACTURACIÓN ELECTRÓNICA
   Integración MichemicalDataLAB
   ========================= */
.fe-title-section .fe-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.fe-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(32,32,32,.10);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(32,32,32,.06);
}
.fe-chip-soft { color: var(--accent-2); background: var(--soft-primary); border-color: rgba(47,128,237,.20); }
.fe-chip-ok { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.26); }
.fe-chip-danger { color: #b91c1c; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.24); }

.fe-dashboard-section { padding-top: 20px; }
.fe-notice { padding: 28px; }
.fe-notice p { color: var(--muted); line-height: 1.6; }

.fe-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.fe-kpi { padding: 22px; }
.fe-kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.fe-kpi strong {
  display: block;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.03em;
}
.fe-kpi small { display:block; color: var(--muted-2); margin-top: 8px; font-weight: 700; }

.fe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
}
.fe-tab {
  border: 1px solid rgba(47,128,237,.18);
  background: rgba(255,255,255,.86);
  color: var(--ink);
  min-height: 46px;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(32,32,32,.05);
  transition: .18s ease;
}
.fe-tab:hover { transform: translateY(-2px); color: var(--accent-2); }
.fe-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 18px 34px rgba(47,128,237,.22);
}

.fe-tab-panel { display: none; }
.fe-tab-panel.active { display: block; animation: feFade .22s ease; }
@keyframes feFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fe-form-card,
.fe-table-card,
.fe-filter-card {
  padding: clamp(18px, 2.6vw, 28px);
}
.fe-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.fe-form-grid .form-control {
  background: rgba(255,255,255,.92);
}
.fe-full { grid-column: 1 / -1; }
.fe-divider {
  height: 1px;
  background: rgba(32,32,32,.08);
  margin: 24px 0;
}
.fe-actions {
  justify-content: flex-start;
  margin-top: 24px;
}
.fe-check {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(32,32,32,.10);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.fe-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.fe-secret-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fe-secret-field .form-control {
  padding-right: 104px;
}
.fe-secret-field .fe-secret-edit {
  position: absolute;
  right: 8px;
  height: 38px;
  min-width: 82px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(47,128,237,.22);
}
.fe-secret-field .fe-secret-edit.cancel {
  background: #fff;
  color: var(--accent-2);
  border: 1px solid rgba(47,128,237,.22);
  box-shadow: 0 8px 18px rgba(32,32,32,.08);
}
.form-control.fe-secret-locked {
  background: rgba(246, 249, 255, .94);
  color: #555;
  letter-spacing: .16em;
  cursor: not-allowed;
}
.form-control.fe-secret-locked:focus {
  border-color: rgba(32,32,32,.12);
  box-shadow: none;
}

.fe-filters {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
}
.fe-filters .btn { min-height: 52px; }

.fe-table-wrap {
  overflow-x: auto;
  border-radius: 22px;
  border: 1px solid rgba(32,32,32,.07);
}
.fe-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: rgba(255,255,255,.74);
}
.fe-table th,
.fe-table td {
  padding: 14px 13px;
  text-align: left;
  border-bottom: 1px solid rgba(32,32,32,.07);
  vertical-align: middle;
  font-size: 13px;
}
.fe-table th {
  background: linear-gradient(135deg, rgba(47,128,237,.12), rgba(0,166,214,.10));
  color: var(--accent-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 1000;
}
.fe-table tr:hover td { background: rgba(47,128,237,.035); }
.fe-table code {
  display: inline-block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-size: 12px;
}
.fe-table a {
  color: var(--accent-2);
  font-weight: 900;
}
.fe-empty-cell {
  text-align: center !important;
  color: var(--muted);
  padding: 28px !important;
}
.fe-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(47,128,237,.10);
  color: var(--accent-2);
  border: 1px solid rgba(47,128,237,.16);
  font-weight: 900;
  font-size: 12px;
}
.fe-pill.ok {
  color: #047857;
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.20);
}
.fe-pill.warn {
  color: #92400e;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.20);
}

@media (max-width: 980px) {
  .fe-kpis { grid-template-columns: 1fr; }
  .fe-form-grid,
  .fe-filters { grid-template-columns: 1fr; }
  .fe-full { grid-column: auto; }
}


/* ===== Facturación: login integrado ===== */
.fe-login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 28px;
  align-items: start;
}
.fe-login-form {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(32,32,32,.08);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 14px 36px rgba(32,32,32,.06);
}
.fe-login-actions {
  justify-content: flex-start;
  margin-top: 14px;
}
.fe-login-remember {
  margin-top: 4px;
}
.fe-login-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);
  color: #b91c1c;
  font-weight: 800;
  font-size: 13px;
}
@media (max-width: 760px) {
  .fe-login-layout { grid-template-columns: 1fr; }
}

/* ===== Facturación: login compacto estilo MichemicalDataLAB ===== */
body.fe-auth-mode .fe-title-section {
  display: none;
}
body.fe-auth-mode .fe-dashboard-section {
  min-height: calc(100vh - 82px);
  display: flex;
  align-items: center;
  padding: clamp(36px, 6vw, 80px) 0;
}
body.fe-auth-mode .fe-dashboard-section > .container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fe-auth-card {
  width: min(500px, 100%);
  padding: 0;
  margin: 0 auto;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 0%, rgba(47,128,237,.12), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(0,194,168,.10), transparent 36%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 34px 95px rgba(32,32,32,.13), 0 18px 52px rgba(47,128,237,.10);
  overflow: hidden;
}
.fe-auth-card::before {
  display: none;
}
.fe-login-form--compact {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: clamp(24px, 4vw, 32px);
}
.fe-login-brand {
  display: block;
  text-align: center;
  margin-bottom: 22px;
}
.fe-login-brand .mini-title {
  justify-content: center;
}
.fe-login-brand h2 {
  margin: 4px 0 4px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(31px, 4vw, 42px);
  line-height: .96;
  letter-spacing: -.04em;
}
.fe-login-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.fe-login-mark {
  display: none !important;
}
.fe-login-form--compact .form-label {
  margin-bottom: 14px;
}
.fe-login-form--compact .form-label span {
  font-weight: 1000;
}
.fe-login-form--compact .form-control {
  min-height: 58px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border-color: rgba(32,32,32,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  font-weight: 850;
}
.fe-login-form--compact .form-control:focus {
  background: rgba(239,246,255,.98);
  border-color: rgba(47,128,237,.35);
  box-shadow: 0 0 0 5px rgba(47,128,237,.12);
}
.fe-login-form--compact .fe-login-remember {
  min-height: 58px;
  border-radius: 22px;
  margin: 2px 0 16px;
  background: rgba(255,255,255,.86);
}
.fe-login-form--compact .fe-login-actions {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.fe-login-form--compact .fe-login-actions .btn {
  min-height: 55px;
  width: 180px;
  min-width: 180px;
  white-space: nowrap;
}
.fe-login-form--compact .fe-login-error {
  margin-top: 16px;
}
body.fe-auth-mode #feLogoutBtn {
  display: none !important;
}
@media (max-width: 620px) {
  body.fe-auth-mode .fe-dashboard-section {
    align-items: flex-start;
    padding-top: 28px;
  }
  .fe-login-brand {
    text-align: center;
  }
  .fe-login-form--compact .fe-login-actions {
    display: flex;
    justify-content: center;
  }
  .fe-login-form--compact .fe-login-actions .btn {
    width: 100%;
    min-width: 0;
    max-width: 260px;
  }
}


/* ===== Facturación: animación Lottie al lado derecho del login ===== */
.fe-auth-card--animated {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.fe-auth-card--animated .fe-login-form {
  position: relative;
  z-index: 4;
}
.fe-welcome-character {
  position: absolute;
  right: -290px;
  top: 50%;
  width: 260px;
  min-height: 260px;
  transform: translateY(-50%) translateX(-80px) scale(.82);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  animation: feCharacterEnterRight 1.15s cubic-bezier(.2,.92,.22,1.08) .25s forwards,
             feCharacterFloat 3.1s ease-in-out 1.5s infinite alternate;
}
.fe-welcome-lottie {
  width: 260px;
  height: 260px;
  filter: drop-shadow(0 28px 42px rgba(15,23,42,.16));
}
.fe-welcome-bubble {
  position: absolute;
  left: 196px;
  top: -6px;
  width: 200px;
  padding: 12px 14px;
  border-radius: 22px 22px 22px 8px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(47,128,237,.20);
  box-shadow: 0 20px 44px rgba(32,32,32,.12);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.32;
  text-align: left;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  animation: feBubblePop .55s cubic-bezier(.2,.92,.22,1.12) 1.35s forwards;
}
.fe-welcome-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,.98);
  border-left: 1px solid rgba(47,128,237,.20);
  border-bottom: 1px solid rgba(47,128,237,.20);
  transform: rotate(45deg);
}
@keyframes feCharacterEnterRight {
  0% { opacity: 0; transform: translateY(-50%) translateX(-80px) scale(.82); }
  62% { opacity: 1; transform: translateY(-50%) translateX(10px) scale(1.03); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
@keyframes feCharacterFloat {
  from { transform: translateY(-50%) translateX(0) scale(1); }
  to { transform: translateY(calc(-50% - 8px)) translateX(0) scale(1); }
}
@keyframes feBubblePop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1120px) {
  .fe-welcome-character {
    right: -210px;
    width: 210px;
    min-height: 210px;
  }
  .fe-welcome-lottie {
    width: 210px;
    height: 210px;
  }
  .fe-welcome-bubble {
    left: 150px;
    top: 2px;
    width: 165px;
    font-size: 12px;
  }
}
@media (max-width: 900px) {
  body.fe-auth-mode .fe-dashboard-section > .container {
    padding-right: 0;
  }
  .fe-welcome-character {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fe-welcome-character,
  .fe-welcome-bubble,
  .fe-welcome-lottie * {
    animation: none !important;
  }
  .fe-welcome-character,
  .fe-welcome-bubble {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}


/* Página de recursos gratis */
.free-title-section h1 { max-width: 940px; }
.gratis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.gratis-card {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(32,32,32,.09);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: .18s ease;
}
.gratis-card:hover { transform: translateY(-5px); box-shadow: 0 30px 75px rgba(32,32,32,.13); border-color: rgba(47,128,237,.22); }
.gratis-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: linear-gradient(135deg, rgba(47,128,237,.16), rgba(0,194,168,.14));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.gratis-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gratis-media span,
.gratis-post-visual span {
  width: 92px;
  height: 92px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--accent-2);
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 22px 48px rgba(47,128,237,.18);
}
.gratis-card-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.gratis-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.gratis-meta span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--soft-primary);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 900;
}
.gratis-card h3 { font-family: Fredoka, Poppins, sans-serif; font-size: 25px; line-height: 1.05; letter-spacing: -.03em; margin: 0; }
.gratis-card p { color: var(--muted); line-height: 1.55; margin: 0 0 6px; }
.gratis-card .btn { margin-top: auto; align-self: flex-start; }
.gratis-post-page { padding-top: 28px; }
.gratis-post-card { position: relative; }
.gratis-post-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}
.gratis-post-copy,
.gratis-post-visual,
.gratis-post-content .panel-card {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(32,32,32,.09);
  border-radius: 34px;
  box-shadow: var(--shadow);
}
.gratis-post-copy { padding: clamp(24px, 4vw, 46px); }
.gratis-post-copy h1 { font-size: clamp(34px, 4.8vw, 62px); }
.gratis-post-visual {
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(47,128,237,.18), rgba(0,166,214,.13), rgba(0,194,168,.14));
}
.gratis-post-visual img { width: 100%; height: 100%; object-fit: cover; }
.gratis-post-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gratis-post-content .panel-card { padding: 26px; }
.gratis-download-box { grid-column: 1 / -1; }
.gratis-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gratis-list li {
  padding: 13px 14px 13px 42px;
  border-radius: 18px;
  background: rgba(47,128,237,.08);
  position: relative;
  color: #454545;
  font-weight: 700;
}
.gratis-list li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
}
@media (max-width: 920px) {
  .gratis-grid { grid-template-columns: repeat(2, 1fr); }
  .gratis-post-hero, .gratis-post-content { grid-template-columns: 1fr; }
  .gratis-post-visual { min-height: 300px; }
}
@media (max-width: 620px) {
  .gratis-grid { grid-template-columns: 1fr; }
  .gratis-post-copy .hero-actions .btn,
  .gratis-download-box .hero-actions .btn { width: 100%; }
}


/* Modal para pedir seguir Facebook antes de descargar */
body.gratis-modal-open { overflow: hidden; }
.gratis-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}
.gratis-modal.hidden { display: none !important; }
.gratis-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .54);
  backdrop-filter: blur(8px);
}
.gratis-modal-card {
  position: relative;
  width: min(520px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(47,128,237,.20);
  border-radius: 30px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .28);
  padding: clamp(24px, 4vw, 34px);
  display: grid;
  gap: 16px;
  text-align: center;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.gratis-modal-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.gratis-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(32,32,32,.10);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.gratis-modal-kicker {
  justify-self: center;
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--soft-primary);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 13px;
}
.gratis-modal-card h2 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
}
.gratis-modal-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.gratis-facebook-btn {
  justify-self: center;
  background: linear-gradient(135deg, #1877f2, #1d4ed8);
}
.gratis-follow-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(47,128,237,.08);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.gratis-follow-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
.gratis-modal-card small {
  color: var(--muted-2);
  line-height: 1.4;
}
#gratisFinalDownloadBtn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Contador para habilitar descarga gratis después de abrir Facebook */
.gratis-countdown-box {
  width: 100%;
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(47, 128, 237, .10);
  border: 1px solid rgba(47, 128, 237, .18);
  display: grid;
  gap: 4px;
  text-align: center;
}
.gratis-countdown-box strong {
  color: var(--accent-2);
  font-size: 18px;
}
.gratis-countdown-box span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* Carrusel automático de figuritas Panini en la página Gratis */
.gratis-figuras-section {
  margin: 8px 0 26px;
  padding: 8px 0 22px;
  border-bottom: 1px solid rgba(47, 128, 237, .14);
  overflow: hidden;
  position: relative;
}
.gratis-figuras-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 8px 0 12px;
  animation: gratisFigurasMove 38s linear infinite;
}
.gratis-figuras-section:hover .gratis-figuras-track { animation-play-state: paused; }
.gratis-figura-card {
  flex: 0 0 auto;
  width: clamp(118px, 12vw, 172px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(32,32,32,.10);
  box-shadow: 0 14px 34px rgba(32,32,32,.12);
  padding: 7px;
  overflow: hidden;
}
.gratis-figura-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 13px;
  background: #fff;
}
@keyframes gratisFigurasMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .gratis-figuras-track { animation-duration: 28s; }
  .gratis-figura-card { width: 112px; }
}


/* Ajustes adicionales para post Panini */
.gratis-whatsapp-box p { color: var(--muted); line-height: 1.58; margin: 0 0 18px; }
.gratis-whatsapp-box .btn.whatsapp { color: #062915; }
.gratis-scroll-hint {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 6px 0 2px;
}
.gratis-scroll-hint span {
  font-weight: 900;
  color: var(--accent-2);
  font-size: 14px;
  letter-spacing: .02em;
}
.gratis-scroll-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gratis-scroll-arrows i {
  width: 18px;
  height: 18px;
  display: block;
  border-right: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
  transform: rotate(45deg);
  border-radius: 2px;
  opacity: .35;
  animation: gratisArrowBounce 1.35s infinite;
}
.gratis-scroll-arrows i:nth-child(2) { animation-delay: .18s; }
.gratis-scroll-arrows i:nth-child(3) { animation-delay: .36s; }
@keyframes gratisArrowBounce {
  0% { transform: rotate(45deg) translate(-3px, -3px); opacity: .18; }
  50% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
  100% { transform: rotate(45deg) translate(3px, 3px); opacity: .18; }
}

.gratis-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
.gratis-paper-card,
.gratis-guide-card {
  border: 1px solid rgba(47,128,237,.16);
  background: rgba(238,247,255,.72);
  border-radius: 24px;
  padding: 18px;
}
.gratis-paper-card h3,
.gratis-guide-card h3 {
  margin: 0 0 10px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 28px;
  letter-spacing: -.03em;
}
.gratis-paper-card p,
.gratis-guide-card p,
.gratis-guide-list li { color: #555; line-height: 1.55; }
.gratis-paper-card img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
  margin-top: 14px;
}
.gratis-guide-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 12px;
}
.gratis-guide-list li {
  border: 1px solid rgba(47,128,237,.16);
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px;
}
.gratis-guide-list strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 6px;
}
@media (max-width: 820px) {
  .gratis-info-grid { grid-template-columns: 1fr; }
}


/* Ajustes página Gratis solicitados */
.nav-links a[href="/carrito.html"],
.nav-links .nav-cart-link {
  display: none !important;
}
.free-title-section h1 {
  font-size: clamp(36px, 5vw, 66px) !important;
  line-height: .98 !important;
  max-width: 900px;
}
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 42px) !important;
}
.nav-actions .social-link {
  flex: 0 0 auto;
}

/* Diseño interno del modal de papel recomendado */
.gratis-modal-card:has(.gratis-paper-layout) {
  width: min(760px, 100%);
  text-align: left;
}
.gratis-modal-card:has(.gratis-paper-layout) .gratis-modal-kicker,
.gratis-modal-card:has(.gratis-paper-layout) h2 {
  justify-self: center;
  text-align: center;
}
.gratis-paper-layout {
  display: grid;
  gap: 16px;
  margin-top: 6px;
}
.gratis-paper-option {
  display: grid;
  grid-template-columns: 1.25fr 210px;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(47,128,237,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,247,255,.82));
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(47,128,237,.08);
}
.gratis-paper-option--holo {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,240,255,.84));
}
.gratis-paper-copy h3 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}
.gratis-paper-copy p {
  color: #555;
  line-height: 1.5;
  margin: 0 0 12px;
}
.gratis-paper-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--soft-primary);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
}
.gratis-paper-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.gratis-paper-copy li {
  color: #333;
  font-weight: 700;
  font-size: 14px;
}
.gratis-paper-copy li::before {
  content: "✓";
  color: var(--accent-2);
  font-weight: 1000;
  margin-right: 7px;
}
.gratis-paper-option img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(32,32,32,.08);
}
@media (max-width: 720px) {
  .gratis-paper-option { grid-template-columns: 1fr; text-align: center; }
  .gratis-paper-badge { margin: 0 auto; }
  .gratis-paper-copy li { text-align: left; }
}


/* Modal guía de impresión mejorado */
.gratis-modal-card:has(.gratis-guide-wrap) {
  width: min(660px, 100%);
  text-align: left;
}
.gratis-modal-card:has(.gratis-guide-wrap) .gratis-modal-kicker,
.gratis-modal-card:has(.gratis-guide-wrap) h2 {
  justify-self: center;
  text-align: center;
}
.gratis-guide-wrap {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}
.gratis-guide-intro {
  display: grid;
  gap: 5px;
  text-align: center;
  padding: 15px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(47,128,237,.12), rgba(0,194,168,.10));
  border: 1px solid rgba(47,128,237,.16);
}
.gratis-guide-intro strong {
  color: var(--accent-2);
  font-weight: 1000;
}
.gratis-guide-intro span {
  color: #555;
  line-height: 1.45;
}
.gratis-guide-steps {
  display: grid;
  gap: 12px;
}
.gratis-guide-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(47,128,237,.18);
  box-shadow: 0 12px 28px rgba(47,128,237,.08);
}
.gratis-guide-num {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 25px;
  font-weight: 1000;
  box-shadow: 0 12px 24px rgba(47,128,237,.22);
}
.gratis-guide-step h3 {
  margin: 0 0 6px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(21px, 2.7vw, 27px);
  line-height: 1;
  letter-spacing: -.03em;
}
.gratis-guide-step p {
  margin: 0;
  color: #555;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .gratis-modal { padding: 12px; }
  .gratis-modal-card { max-height: calc(100vh - 24px); }
  .gratis-guide-step { grid-template-columns: 1fr; text-align: center; }
  .gratis-guide-num { margin: 0 auto; }
}


/* Diseño original restaurado para modales de Papel y Guía */
.gratis-info-modal-card {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  overflow: auto;
  padding: clamp(22px, 3vw, 36px);
}

.gratis-info-intro {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.gratis-paper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.gratis-paper-card {
  border: 1px solid rgba(47,128,237,.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(238,247,255,.82), rgba(255,255,255,.92));
  padding: 16px;
  box-shadow: 0 18px 40px rgba(32,32,32,.08);
  overflow: hidden;
}

.gratis-paper-card img {
  width: 100%;
  height: 330px;
  object-fit: contain;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(32,32,32,.07);
  margin-bottom: 16px;
}

.gratis-paper-card h3,
.gratis-guide-block h3 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0 0 10px;
  color: var(--ink);
}

.gratis-paper-card p,
.gratis-guide-block p,
.gratis-guide-block li {
  color: #5d5d5d;
  line-height: 1.55;
  font-weight: 650;
}

.gratis-guide-full {
  display: grid;
  gap: 14px;
}

.gratis-guide-block {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  border: 1px solid rgba(47,128,237,.18);
  border-radius: 26px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(238,247,255,.92), rgba(255,255,255,.86));
}

.gratis-guide-number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 28px;
  font-weight: 1000;
  box-shadow: 0 14px 28px rgba(47,128,237,.22);
}

.gratis-guide-block ul {
  margin: 10px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.gratis-guide-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.gratis-guide-checks span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(47,128,237,.12);
  color: var(--accent-2);
  border: 1px solid rgba(47,128,237,.20);
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
}


@media (max-width: 820px) {
  .gratis-paper-grid,
  .gratis-guide-block {
    grid-template-columns: 1fr;
  }

  .gratis-paper-card img {
    height: 260px;
  }

  .gratis-guide-number {
    width: 48px;
    height: 48px;
  }

}

/* Mantener scroll interno para poder ver todo el contenido de la guía */
.gratis-modal-card {
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Oculta la barra de scroll del modal, pero mantiene el desplazamiento interno */
.gratis-modal-card {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gratis-modal-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Corrección: los íconos de WhatsApp/Facebook no deben mostrarse en el menú superior */
.topbar .nav-actions .social-link,
.topbar .nav-links .social-link {
  display: none !important;
}

/* Bloqueo de datos de empresa: primero se registra, luego queda protegido hasta presionar Editar */
.fe-form-card.fe-company-locked .form-control,
.fe-form-card.fe-company-locked select.form-control,
.fe-form-card.fe-company-locked textarea.form-control,
.fe-form-card.fe-company-locked .form-control:disabled,
.fe-form-card.fe-company-locked select.form-control:disabled,
.fe-form-card.fe-company-locked textarea.form-control:disabled {
  background: rgba(248, 250, 252, .82);
  color: #222;
  -webkit-text-fill-color: #222;
  cursor: default;
  opacity: 1;
  box-shadow: none;
  border-color: rgba(32,32,32,.12);
}
.fe-form-card.fe-company-locked .form-control:focus,
.fe-form-card.fe-company-locked select.form-control:focus,
.fe-form-card.fe-company-locked textarea.form-control:focus {
  outline: none;
  border-color: rgba(32,32,32,.12);
  box-shadow: none;
}


/* En modo bloqueado no mostramos etiquetas "Bloqueado"; el color del campo indica que está protegido. */
.fe-form-card.fe-company-locked .form-label span::after,
.fe-form-card.fe-company-locked .fe-secret-field .form-label span::after,
.fe-form-card.fe-company-locked .fe-secret-field span::after {
  content: none !important;
}

.fe-form-card.fe-company-editing {
  border-color: rgba(47, 128, 237, .22);
  box-shadow: 0 24px 70px rgba(47, 128, 237, .12);
}

#feTestSunatBtn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}


/* FIX 20260524: campos bloqueados de empresa más visibles.
   El usuario debe notar que no se pueden editar hasta presionar Editar datos. */
.fe-form-card.fe-company-locked input.form-control:disabled,
.fe-form-card.fe-company-locked textarea.form-control:disabled,
.fe-form-card.fe-company-locked select.form-control:disabled,
.fe-form-card.fe-company-locked input.form-control[readonly],
.fe-form-card.fe-company-locked textarea.form-control[readonly],
.fe-form-card.fe-company-locked .fe-secret-locked {
  background: linear-gradient(180deg, #e9eff8 0%, #dfe8f5 100%) !important;
  border-color: #bdcbe1 !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.fe-form-card.fe-company-locked input.form-control:disabled:focus,
.fe-form-card.fe-company-locked textarea.form-control:disabled:focus,
.fe-form-card.fe-company-locked select.form-control:disabled:focus,
.fe-form-card.fe-company-locked input.form-control[readonly]:focus,
.fe-form-card.fe-company-locked textarea.form-control[readonly]:focus {
  outline: none !important;
  border-color: #bdcbe1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.fe-form-card.fe-company-editing input.form-control:not(:disabled),
.fe-form-card.fe-company-editing textarea.form-control:not(:disabled),
.fe-form-card.fe-company-editing select.form-control:not(:disabled) {
  background: #ffffff !important;
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
  cursor: text !important;
}

.fe-form-card.fe-company-editing select.form-control:not(:disabled) {
  cursor: pointer !important;
}

/* Oculta textos auxiliares vacíos de claves */
#feSolClaveHint:empty,
#feApiSecretHint:empty {
  display: none;
}


/* Certificado digital: no mostrar rutas reales; solo estado y ruta protegida */
.fe-cert-card .fe-form-grid {
  align-items: end;
}

.fe-cert-status {
  min-height: 52px;
  width: 100%;
  border-radius: 18px;
  border: 1px solid #bdcbe1;
  background: linear-gradient(180deg, #e9eff8 0%, #dfe8f5 100%);
  color: #4b5563;
  display: flex;
  align-items: center;
  padding: 0 17px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.fe-cert-status-ok::before,
.fe-cert-status-empty::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 10px;
  flex: 0 0 auto;
}

.fe-cert-status-ok::before {
  background: #20c76b;
  box-shadow: 0 0 0 5px rgba(32,199,107,.14);
}

.fe-cert-status-empty::before {
  background: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245,158,11,.14);
}

.form-control.fe-cert-masked {
  background: linear-gradient(180deg, #e9eff8 0%, #dfe8f5 100%) !important;
  border-color: #bdcbe1 !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  letter-spacing: .16em;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.form-control.fe-cert-masked:focus {
  outline: none !important;
  border-color: #bdcbe1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}


.fe-token-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fe-token-actions .btn.small {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  flex: 0 0 88px;
}
.fe-doc-download {
  display: inline-flex;
  align-items: center;
  font-weight: 1000;
  color: var(--accent-2);
  text-decoration: none;
}
.fe-doc-download:hover {
  text-decoration: underline;
}

.fe-token-actions .btn.danger {
  box-shadow: 0 12px 24px rgba(239, 68, 68, .18);
}
@media (max-width: 720px) {
  .fe-token-actions {
    justify-content: flex-start;
  }
}


/* ===== Ajustes finales facturación: login bloqueado y overlay de cierre ===== */
.fe-login-form.fe-login-loading .form-control,
.fe-login-form.fe-login-loading .fe-login-remember {
  opacity: .72;
  cursor: wait;
  background: #eaf2ff !important;
}
.fe-login-form.fe-login-loading input:disabled {
  -webkit-text-fill-color: #202020;
}
.fe-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(248, 251, 255, .62);
  backdrop-filter: blur(10px) saturate(140%);
}
.fe-session-overlay.hidden {
  display: none !important;
}
.fe-session-loader {
  min-width: min(340px, calc(100vw - 48px));
  border-radius: 30px;
  padding: 30px 28px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(47,128,237,.14), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(0,194,168,.12), transparent 38%),
    rgba(255,255,255,.94);
  border: 1px solid rgba(47,128,237,.16);
  box-shadow: 0 30px 90px rgba(32,32,32,.16), 0 18px 48px rgba(47,128,237,.14);
}
.fe-session-loader strong {
  display: block;
  margin-top: 14px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 26px;
  letter-spacing: -.03em;
}
.fe-session-loader small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}
.fe-spinner {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-block;
  border: 5px solid rgba(47,128,237,.16);
  border-top-color: var(--accent);
  animation: feSpin .85s linear infinite;
}
@keyframes feSpin {
  to { transform: rotate(360deg); }
}


/* Tutorial de instalación para el software gratis */
.gratis-install-box p {
  color: var(--muted);
  line-height: 1.58;
  margin: 0 0 18px;
}
.gratis-install-cta {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.gratis-attention-arrows {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.gratis-attention-arrows i {
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
  animation: gratisArrowBounce 1.15s infinite;
}
.gratis-attention-arrows i:nth-child(2) { animation-delay: .14s; }
.gratis-attention-arrows i:nth-child(3) { animation-delay: .28s; }
@keyframes gratisArrowBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: .46; }
  50% { transform: rotate(45deg) translateY(4px); opacity: 1; }
}

.gratis-install-modal-card {
  width: min(1120px, 100%);
  text-align: left;
}
.gratis-install-intro {
  display: none;
}
.gratis-install-steps {
  display: grid;
  gap: 20px;
}
.gratis-install-step {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(320px, 1.35fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(47,128,237,.18);
  background: linear-gradient(180deg, rgba(247,250,255,.95), rgba(255,255,255,.98));
}
.gratis-install-step-copy {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gratis-install-step-number {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 14px 28px rgba(47,128,237,.20);
}
.gratis-install-step h3 {
  margin: 0 0 8px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.gratis-install-step p {
  margin: 0;
}
.gratis-install-shot {
  margin: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(32,32,32,.08);
  background: #fff;
  box-shadow: 0 24px 48px rgba(15,23,42,.12);
}
.gratis-install-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.gratis-install-arrow {
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .16);
}

@media (max-width: 860px) {
  .gratis-install-step {
    grid-template-columns: 1fr;
  }
  .gratis-install-step-copy {
    align-items: center;
  }
}


/* Mejora del botón de tutorial de instalación */
.gratis-install-box {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.98));
}
.gratis-install-cta {
  display: grid;
  gap: 12px;
}
.gratis-install-open-btn {
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8 58%, #0ea5e9);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 18px 38px rgba(37, 99, 235, .28);
  border: 1px solid rgba(255,255,255,.18);
}
.gratis-install-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(37, 99, 235, .34);
}
.gratis-install-open-btn::before {
  content: '★';
  display: inline-block;
  margin-right: 10px;
  font-size: 17px;
}
.gratis-install-tip {
  display: block;
  text-align: center;
  color: var(--accent-2);
  font-weight: 800;
  line-height: 1.35;
}
.gratis-attention-arrows {
  display: none !important;
}


/* ===== Facturación: menú hamburguesa de módulos ===== */
.fe-module-menu {
  position: sticky;
  top: 96px;
  z-index: 30;
  width: fit-content;
  margin: 18px 0 28px auto;
}

.fe-module-menu-btn {
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(47,128,237,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(32,32,32,.10);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 1000;
  transition: .18s ease;
}
.fe-module-menu-btn:hover {
  transform: translateY(-2px);
  color: var(--accent-2);
  border-color: rgba(47,128,237,.34);
  box-shadow: 0 22px 48px rgba(47,128,237,.16);
}
.fe-hamb-lines {
  width: 26px;
  height: 20px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.fe-hamb-lines i {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transition: .18s ease;
}
.fe-module-menu.open .fe-hamb-lines i:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.fe-module-menu.open .fe-hamb-lines i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.fe-module-menu.open .fe-hamb-lines i:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.fe-module-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 235px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(32,32,32,.10);
  box-shadow: 0 26px 70px rgba(32,32,32,.16);
  display: grid;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transition: .18s ease;
}
.fe-module-menu.open .fe-module-menu-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.fe-module-menu .fe-tab {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  justify-content: flex-start;
  text-align: left;
  padding: 0 16px;
  box-shadow: none;
}
.fe-module-menu .fe-tab:hover { transform: none; background: var(--soft-primary); }
.fe-module-menu .fe-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

@media (max-width: 680px) {
  .fe-module-menu {
    position: relative;
    top: auto;
    width: 100%;
    margin: 16px 0 22px;
  }
  .fe-module-menu-btn { width: 100%; justify-content: center; }
  .fe-module-menu-list { left: 0; right: 0; min-width: 0; }
}

/* ===== Facturación: menú en esquina y encabezado limpio ===== */
.fe-title-section--compact {
  position: relative;
  min-height: 92px;
  padding: 18px 0 20px;
}
.fe-title-tools {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fe-title-section--compact .fe-status-row--top {
  margin: 0;
  justify-content: center;
}
.fe-title-section--compact .fe-module-menu {
  position: absolute;
  left: calc((100vw - min(1180px, calc(100vw - 34px))) / -2 + 18px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  width: fit-content;
  margin: 0;
}
.fe-title-section--compact .fe-module-menu-btn {
  min-height: 50px;
  padding: 0 16px;
}
.fe-title-section--compact .fe-module-menu-list {
  right: auto;
  left: 0;
}
.fe-title-section--compact + .fe-dashboard-section {
  padding-top: 10px;
}

@media (max-width: 680px) {
  .fe-title-section--compact {
    min-height: 150px;
    padding: 16px 0;
  }
  .fe-title-tools {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .fe-title-section--compact .fe-module-menu {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }
  .fe-title-section--compact .fe-status-row--top {
    justify-content: flex-start;
  }
}

/* ===== Facturación: panel lateral ordenado tipo dashboard ===== */
body.fe-panel-mode .topbar {
  box-shadow: 0 10px 28px rgba(32,32,32,.06);
}
body.fe-panel-mode .fe-title-section--compact {
  min-height: 86px;
  padding: 16px 0;
  background:
    linear-gradient(90deg, rgba(47,128,237,.13), rgba(0,194,168,.08)),
    rgba(255,255,255,.28);
  border-bottom: 1px solid rgba(47,128,237,.10);
}
body.fe-panel-mode .fe-title-tools {
  min-height: 52px;
  justify-content: flex-start;
  padding-left: 72px;
}
body.fe-panel-mode .fe-title-section--compact .fe-module-menu {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
}
body.fe-panel-mode .fe-module-menu-btn {
  min-width: 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(47,128,237,.22);
  box-shadow: 0 16px 36px rgba(47,128,237,.14);
}
body.fe-panel-mode #feModuleCurrentText { display: none; }
body.fe-panel-mode .fe-title-section--compact .fe-status-row--top {
  margin: 0;
  justify-content: flex-start;
}
body.fe-panel-mode .fe-chip {
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
}

.fe-panel-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.fe-side-menu {
  position: sticky;
  top: 104px;
  min-height: calc(100vh - 132px);
  padding: 20px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(2,6,23,.94), rgba(17,24,39,.90)),
    linear-gradient(135deg, rgba(47,128,237,.30), rgba(0,194,168,.18));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 70px rgba(2,6,23,.18);
  overflow: hidden;
}
.fe-side-menu::before {
  content: "";
  position: absolute;
  inset: -90px -110px auto auto;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  background: rgba(47,128,237,.28);
  filter: blur(4px);
  pointer-events: none;
}
.fe-side-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.13);
}
.fe-side-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  padding: 5px;
}
.fe-side-brand strong,
.fe-side-brand span { display: block; }
.fe-side-brand strong { color: #fff; font-weight: 1000; line-height: 1.1; }
.fe-side-brand span { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 800; margin-top: 3px; }
.fe-side-menu-title {
  position: relative;
  margin: 0 0 10px 8px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.fe-side-menu .fe-tab {
  position: relative;
  width: 100%;
  min-height: 54px;
  justify-content: flex-start;
  gap: 11px;
  margin: 8px 0;
  padding: 0 16px;
  border-radius: 17px;
  border: 1px solid transparent;
  color: rgba(255,255,255,.78);
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.fe-side-menu .fe-tab:hover {
  transform: translateX(3px);
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}
.fe-side-menu .fe-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 34px rgba(47,128,237,.30);
}
.fe-side-menu .fe-tab-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.fe-side-menu .fe-tab-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.fe-side-menu .fe-tab.active .fe-tab-icon {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.22);
}
.fe-side-menu .fe-tab > span:last-child {
  font-weight: 900;
  line-height: 1.15;
}
.fe-panel-content {
  min-width: 0;
}
.fe-panel-content .fe-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.fe-panel-content .fe-kpi {
  border-radius: 26px;
  min-height: 122px;
  background: rgba(255,255,255,.88);
}
.fe-panel-content .section-head {
  align-items: center;
  padding: 6px 0 4px;
}
.fe-panel-content .section-head h2 {
  font-size: clamp(30px, 3.2vw, 44px);
}
.fe-panel-content .panel-card,
.fe-panel-content .fe-table-card,
.fe-panel-content .fe-filter-card {
  border-radius: 28px;
}

@media (max-width: 980px) {
  .fe-panel-shell { grid-template-columns: 1fr; }
  .fe-side-menu { display: none; }
  body.fe-panel-mode .fe-title-tools { padding-left: 68px; }
  body.fe-panel-mode .fe-module-menu-list { min-width: 250px; }
}
@media (max-width: 680px) {
  body.fe-panel-mode .fe-title-section--compact { min-height: 112px; }
  body.fe-panel-mode .fe-title-tools {
    padding-left: 0;
    padding-top: 58px;
    align-items: flex-start;
  }
  body.fe-panel-mode .fe-title-section--compact .fe-module-menu {
    left: 18px;
    top: 18px;
    transform: none;
    width: auto;
  }
  .fe-panel-content .fe-kpis { grid-template-columns: 1fr; }
}

/* ===== Ajuste solicitado: sin hamburguesa superior, modo dentro del menú azul ===== */
body.fe-panel-mode .fe-title-section--compact {
  display: none !important;
}
body.fe-panel-mode .fe-dashboard-section {
  padding-top: 34px !important;
}
.fe-side-mode {
  position: relative;
  margin: -6px 0 18px;
  padding: 0 6px;
}
.fe-side-mode .fe-chip {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: none;
}
.fe-side-mode .fe-chip-soft {
  color: #dbeafe;
  background: rgba(37, 99, 235, .28);
  border-color: rgba(147, 197, 253, .34);
}
.fe-side-mode .fe-chip-danger {
  color: #fee2e2;
  background: rgba(239, 68, 68, .22);
  border-color: rgba(252, 165, 165, .34);
}
@media (max-width: 980px) {
  body.fe-panel-mode .fe-title-section--compact {
    display: block !important;
    min-height: 70px;
    padding: 14px 0;
  }
  body.fe-panel-mode .fe-title-tools {
    padding-left: 0 !important;
  }
  body.fe-panel-mode .fe-title-tools::before {
    content: "Módulos abajo";
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(47,128,237,.14);
    color: var(--accent-2);
    font-weight: 1000;
    font-size: 12px;
  }
}

/* ===== Mobile facturación: menú lateral azul por gesto ===== */
.fe-mobile-drawer-overlay,
.fe-mobile-drawer-handle { display: none; }

@media (max-width: 980px) {
  body.fe-panel-mode .fe-title-section--compact,
  body.fe-panel-mode .fe-title-tools,
  body.fe-panel-mode .fe-title-tools::before {
    display: none !important;
  }

  body.fe-panel-mode .fe-dashboard-section {
    padding-top: 18px !important;
  }

  .fe-panel-shell {
    display: block;
  }

  .fe-panel-content {
    width: 100%;
  }

  .fe-side-menu {
    display: block !important;
    position: fixed;
    z-index: 120;
    top: 88px;
    left: 0;
    width: min(84vw, 310px);
    height: calc(100vh - 102px);
    min-height: 0;
    overflow-y: auto;
    border-radius: 0 28px 28px 0;
    transform: translateX(calc(-100% - 14px));
    transition: transform .28s ease, box-shadow .28s ease;
    overscroll-behavior: contain;
  }

  .fe-side-menu.open {
    transform: translateX(0);
    box-shadow: 28px 0 70px rgba(2,6,23,.30);
  }

  .fe-mobile-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(2,6,23,.32);
    backdrop-filter: blur(2px);
  }

  .fe-mobile-drawer-overlay[hidden] {
    display: none !important;
  }

  .fe-mobile-drawer-handle {
    display: flex;
    position: fixed;
    z-index: 105;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    min-height: 112px;
    border: 0;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow: 0 18px 42px rgba(47,128,237,.30);
    align-items: center;
    justify-content: center;
    padding: 8px 0;
  }

  .fe-mobile-drawer-handle span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .05em;
  }

  body.fe-drawer-open .fe-mobile-drawer-handle {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  .fe-side-menu {
    top: 76px;
    height: calc(100vh - 84px);
    width: min(88vw, 300px);
    padding: 16px;
  }

  .fe-side-brand img {
    width: 42px;
    height: 42px;
  }
}


/* ===== Optimización móvil del drawer de módulos ===== */
@media (max-width: 980px) {
  .fe-side-menu {
    transform: translate3d(calc(-100% - 14px), 0, 0) !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint style;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
  }

  .fe-side-menu.open,
  body.fe-drawer-open .fe-side-menu {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 18px 0 42px rgba(2,6,23,.22) !important;
  }

  .fe-mobile-drawer-overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(2,6,23,.26);
    backdrop-filter: none !important;
    transition: opacity .18s ease;
    will-change: opacity;
  }

  body.fe-drawer-open .fe-mobile-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .fe-mobile-drawer-handle {
    transform: translate3d(0, -50%, 0);
    will-change: transform, opacity;
    transition: opacity .16s ease, transform .16s ease;
  }

  body.fe-drawer-open .fe-mobile-drawer-handle {
    opacity: 0;
    transform: translate3d(-10px, -50%, 0);
    pointer-events: none;
  }

  .fe-tab-panel.active {
    animation: none !important;
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .fe-side-menu,
  .fe-mobile-drawer-overlay,
  .fe-mobile-drawer-handle {
    transition: none !important;
  }
}


/* ===== Punto de Venta: pantalla base visual ===== */
.fe-pos-head .fe-pos-status {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(47,128,237,.12);
  border: 1px solid rgba(47,128,237,.18);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}
.fe-pos-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 22px;
  padding: 26px;
  margin-bottom: 22px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 82% 18%, rgba(34,211,238,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,248,255,.92));
}
.fe-pos-hero::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(47,128,237,.12);
  pointer-events: none;
}
.fe-pos-hero-copy,
.fe-pos-hero-icon { position: relative; z-index: 1; }
.fe-pos-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fe-pos-hero h3 {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 10px;
}
.fe-pos-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 660px;
}
.fe-pos-hero-icon {
  width: 132px;
  height: 132px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: #fff;
  border: 1px solid rgba(32,32,32,.08);
  box-shadow: 0 24px 54px rgba(47,128,237,.16);
}
.fe-pos-hero-icon img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}
.fe-pos-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.fe-pos-card {
  min-height: 172px;
  padding: 20px;
  text-align: left;
  border: 1px solid rgba(32,32,32,.09);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 48px rgba(32,32,32,.08);
  cursor: default;
  opacity: 1;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fe-pos-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47,128,237,.24);
  box-shadow: 0 24px 60px rgba(47,128,237,.13);
}
.fe-pos-card:disabled { color: inherit; }
.fe-pos-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(47,128,237,.16), rgba(34,211,238,.14));
  font-size: 25px;
}
.fe-pos-card strong {
  display: block;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 23px;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}
.fe-pos-card small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .fe-pos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .fe-pos-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .fe-pos-hero-icon {
    width: 104px;
    height: 104px;
    margin: 0;
    border-radius: 28px;
  }
  .fe-pos-hero-icon img { width: 70px; height: 70px; }
  .fe-pos-grid { grid-template-columns: 1fr; }
  .fe-pos-card { min-height: 132px; }
}

/* ===== POS Ventas: pantalla tipo EXE integrada ===== */
.fe-pos-card-ready { cursor: pointer; border-color: rgba(0,166,214,.28); }
.fe-pos-card-ready .fe-pos-card-icon { background: linear-gradient(135deg, #22d3ee, #1d4ed8); color: #fff; }
.fe-pos-sales { animation: feFade .18s ease; }
.fe-pos-terminal {
  --pos-blue: #16b8d1;
  --pos-dark: #05080d;
  --pos-panel: rgba(241,248,251,.98);
  width: 100%;
  border: 6px solid var(--pos-blue);
  border-radius: 10px;
  background: var(--pos-blue);
  box-shadow: 0 28px 70px rgba(0,166,214,.22);
  overflow: hidden;
}
.fe-pos-topbar {
  min-height: 50px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: rgba(238,248,252,.98);
  color: #111827;
}
.fe-pos-titlebox { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:900; }
.fe-pos-menu-btn {
  width: 34px; height: 34px; border:0; border-radius:8px;
  background: var(--pos-blue); color:#fff; font-size:20px; font-weight:900;
  display:grid; place-items:center;
}
.fe-pos-clock { text-align:center; font-size:18px; color:#111827; white-space:nowrap; }
.fe-pos-user { justify-self:end; display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.1; }
.fe-pos-user > span { width:25px; height:25px; border-radius:999px; background:var(--pos-blue); color:#fff; display:grid; place-items:center; font-weight:900; }
.fe-pos-user small { display:block; font-size:10px; margin-top:3px; }
.fe-pos-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(420px, .98fr);
  gap: 10px;
  padding: 10px 0 0;
}
.fe-pos-catalog,
.fe-pos-sale-panel {
  background: var(--pos-panel);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.fe-pos-sale-panel { display:flex; flex-direction:column; }
.fe-pos-search-row { display:grid; grid-template-columns: minmax(0,1fr) 98px 86px 116px; gap:6px; margin-bottom:10px; }
.fe-pos-input {
  height: 40px; border:1px solid #d6dee6; border-radius:4px; background:#fff; padding:0 10px; font-size:12px; outline:none;
}
.fe-pos-input:focus { border-color: var(--pos-blue); box-shadow:0 0 0 3px rgba(22,184,209,.13); }
.fe-pos-btn {
  height:40px; border:0; border-radius:4px; font-weight:900; color:#fff; background:var(--pos-blue); display:inline-flex; justify-content:center; align-items:center; gap:7px;
}
.fe-pos-btn span { font-size:21px; line-height:1; }
.fe-pos-category-panel { min-height:112px; border:1px solid #dbe4ec; border-radius:4px; background:#fff; padding:12px 8px; margin-bottom:10px; }
.fe-pos-category-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.fe-pos-category-head h3 { margin:0; font-size:19px; font-weight:900; }
.fe-pos-category-head span { font-size:12px; font-weight:900; color:#0f172a; }
.fe-pos-categories { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.fe-pos-categories button {
  min-height:38px; padding:0 11px; border:1px solid #dce4ee; border-radius:4px; background:#fff; color:#000; font-size:15px; font-weight:900;
}
.fe-pos-categories button.active { background:var(--pos-blue); color:#fff; border-color:var(--pos-blue); }
.fe-pos-products {
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:5px;
  min-height: 482px;
  max-height: 520px;
  overflow-y:auto;
  padding-right:4px;
}
.fe-pos-products::-webkit-scrollbar { width: 9px; }
.fe-pos-products::-webkit-scrollbar-thumb { background:#9aa8b8; border-radius:20px; }
.fe-pos-product-card {
  min-height: 168px;
  border:1px solid #e3e9ef;
  border-radius:6px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:9px;
  text-align:center;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.fe-pos-product-card:hover { transform:translateY(-1px); border-color:var(--pos-blue); box-shadow:0 8px 20px rgba(22,184,209,.16); }
.fe-pos-product-img { width:58px; height:48px; display:grid; place-items:center; color:#cbd5df; font-size:42px; }
.fe-pos-product-name { min-height:34px; display:flex; align-items:center; justify-content:center; color:#111827; font-size:12px; line-height:1.25; text-transform:uppercase; }
.fe-pos-product-price { color:#04b64b; font-size:13px; font-weight:1000; }
.fe-pos-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; }
.fe-pos-page-btn { min-height:30px; border:0; border-radius:4px; background:#cbd5e1; color:#fff; padding:0 12px; font-weight:900; }
.fe-pos-page-btn.active { background:var(--pos-blue); }
.fe-pos-page-btn:disabled { opacity:.55; cursor:not-allowed; }
.fe-pos-pagination span { font-size:12px; font-weight:900; }
.fe-pos-sale-head { font-size:13px; font-weight:800; color:#1f2937; margin:2px 0 8px; }
.fe-pos-payments { display:grid; grid-template-columns: 1.05fr 1fr 1fr 1fr 1fr; gap:6px; margin-bottom:8px; }
.fe-pos-payments button {
  min-height:32px; border:1px solid #dde5ee; border-radius:4px; background:#fff; color:#111827; font-size:16px; font-weight:900;
}
.fe-pos-payments button.active.cash,
.fe-pos-payments button.cash { background:#22c55e; color:#fff; border-color:#22c55e; }
.fe-pos-payments button.active:not(.cash) { border-color:#7c3aed; background:#eef2ff; color:#1d4ed8; }
.fe-pos-ticket {
  height: 362px;
  overflow:auto;
  background:var(--pos-dark);
  border-radius:4px;
  padding:8px;
  color:#fff;
  margin-bottom:10px;
}
.fe-pos-ticket table { width:100%; border-collapse:collapse; table-layout:fixed; }
.fe-pos-ticket th { color:#e5e7eb; font-size:14px; text-align:left; border-bottom:1px solid #374151; padding:8px 4px; }
.fe-pos-ticket th:nth-child(2), .fe-pos-ticket td:nth-child(2) { width:58px; text-align:center; }
.fe-pos-ticket th:nth-child(3), .fe-pos-ticket td:nth-child(3) { width:110px; text-align:right; }
.fe-pos-ticket th:nth-child(4), .fe-pos-ticket td:nth-child(4) { width:66px; text-align:center; }
.fe-pos-ticket td { font-size:13px; padding:8px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.fe-pos-ticket tr.selected td { background:rgba(22,184,209,.22); }
.fe-pos-ticket .empty { color:#aeb7c2; text-align:center !important; padding:34px 0; }
.fe-pos-remove { border:0; border-radius:4px; background:#c21d1d; color:#fff; font-weight:900; min-width:32px; min-height:24px; }
.fe-pos-control-area { display:grid; grid-template-columns: minmax(0,1fr) 80px; gap:6px; }
.fe-pos-keypad { display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; }
.fe-pos-keypad button,
.fe-pos-actions button {
  min-height:52px;
  border:0;
  border-radius:5px;
  font-size:20px;
  font-weight:1000;
  background:#070b11;
  color:#fff;
  box-shadow:0 3px 7px rgba(0,0,0,.18);
}
.fe-pos-keypad button.danger { background:#c51f21; }
.fe-pos-keypad button.price { background:linear-gradient(135deg, #17c0c5, #0c9da0); font-size:12px; }
.fe-pos-keypad button.mic { font-size:24px; }
.fe-pos-actions { display:grid; gap:6px; }
.fe-pos-actions button { min-height:40px; font-size:11px; background:#0b91bd; }
.fe-pos-actions .cancelar { background:#0b91bd; }
.fe-pos-actions .boleta { background:#078db8; }
.fe-pos-actions .nota { background:#078db8; }
.fe-pos-actions .factura { background:#52ef62; color:#001b05; }
.fe-pos-total {
  margin-top:8px;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 18px;
  border-radius:4px;
  background:#f59e0b;
  color:#000;
  font-size:28px;
  font-weight:1000;
}
.fe-pos-buffer { margin-top:7px; font-size:12px; color:#475569; font-weight:800; min-height:16px; text-align:right; }

@media (max-width: 1320px) {
  .fe-pos-body { grid-template-columns: 1fr; }
  .fe-pos-sale-panel { min-height: auto; }
  .fe-pos-ticket { height: 300px; }
}
@media (max-width: 980px) {
  .fe-pos-terminal { border-width: 4px; }
  .fe-pos-topbar { grid-template-columns: 1fr; text-align:left; }
  .fe-pos-clock { text-align:left; font-size:14px; }
  .fe-pos-user { justify-self:start; }
  .fe-pos-search-row { grid-template-columns: 1fr 96px; }
  .fe-pos-code, #fePosScannerBtn { grid-column:auto; }
  .fe-pos-products { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 420px; min-height: 330px; }
  .fe-pos-control-area { grid-template-columns: 1fr; }
  .fe-pos-actions { grid-template-columns: repeat(5, 1fr); }
  .fe-pos-actions button { min-height:42px; }
}
@media (max-width: 560px) {
  .fe-pos-catalog, .fe-pos-sale-panel { padding:7px; }
  .fe-pos-search-row { grid-template-columns: 1fr; }
  .fe-pos-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-pos-product-card { min-height: 145px; }
  .fe-pos-payments { grid-template-columns: repeat(2, 1fr); }
  .fe-pos-ticket { height: 255px; }
  .fe-pos-keypad button { min-height:46px; font-size:18px; }
  .fe-pos-actions { grid-template-columns: 1fr; }
  .fe-pos-total { font-size:22px; min-height:48px; }
}


/* ===== POS pantalla amplia: más espacio útil solo en Ventas ===== */
body.fe-pos-fullscreen {
  overflow-x: hidden;
}
body.fe-pos-fullscreen .topbar {
  display: none !important;
}
body.fe-pos-fullscreen .fe-dashboard-section {
  padding: 0 !important;
}
body.fe-pos-fullscreen .fe-dashboard-section > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.fe-pos-fullscreen .fe-panel-shell {
  display: block !important;
  width: 100% !important;
}
body.fe-pos-fullscreen #feSideMenu,
body.fe-pos-fullscreen #feMobileDrawerHandle,
body.fe-pos-fullscreen #feMobileDrawerOverlay {
  display: none !important;
}
body.fe-pos-fullscreen .fe-panel-content {
  width: 100% !important;
  min-width: 0;
}
body.fe-pos-fullscreen .fe-tab-panel.active {
  padding: 0 !important;
}
body.fe-pos-fullscreen .fe-pos-sales {
  min-height: 100vh;
}
body.fe-pos-fullscreen .fe-pos-terminal {
  min-height: 100vh;
  border-width: 5px;
  border-radius: 0;
  box-shadow: none;
}
body.fe-pos-fullscreen .fe-pos-topbar {
  min-height: 48px;
  padding: 6px 10px;
}
body.fe-pos-fullscreen .fe-pos-menu-btn {
  width: auto;
  min-width: 118px;
  padding: 0 12px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.fe-pos-fullscreen .fe-pos-menu-btn span {
  font-size: 13px;
  font-weight: 1000;
}
body.fe-pos-fullscreen .fe-pos-body {
  grid-template-columns: minmax(0, 1.58fr) minmax(430px, .92fr);
  gap: 6px;
  padding: 6px 0 0;
}
body.fe-pos-fullscreen .fe-pos-catalog,
body.fe-pos-fullscreen .fe-pos-sale-panel {
  border-radius: 5px;
  padding: 7px;
}
body.fe-pos-fullscreen .fe-pos-search-row {
  margin-bottom: 7px;
}
body.fe-pos-fullscreen .fe-pos-category-panel {
  min-height: 86px;
  padding: 8px;
  margin-bottom: 7px;
}
body.fe-pos-fullscreen .fe-pos-category-head {
  margin-bottom: 6px;
}
body.fe-pos-fullscreen .fe-pos-categories button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 14px;
}
body.fe-pos-fullscreen .fe-pos-products {
  min-height: calc(100vh - 278px);
  max-height: calc(100vh - 250px);
  gap: 4px;
}
body.fe-pos-fullscreen .fe-pos-product-card {
  min-height: 158px;
  border-radius: 4px;
  gap: 7px;
  padding: 7px;
}
body.fe-pos-fullscreen .fe-pos-ticket {
  height: calc(100vh - 390px);
  min-height: 300px;
  margin-bottom: 8px;
}
body.fe-pos-fullscreen .fe-pos-control-area,
body.fe-pos-fullscreen .fe-pos-keypad,
body.fe-pos-fullscreen .fe-pos-actions {
  gap: 5px;
}
body.fe-pos-fullscreen .fe-pos-keypad button,
body.fe-pos-fullscreen .fe-pos-actions button {
  min-height: 48px;
  border-radius: 4px;
}
body.fe-pos-fullscreen .fe-pos-total {
  min-height: 52px;
  margin-top: 7px;
  border-radius: 4px;
}
@media (max-width: 1320px) {
  body.fe-pos-fullscreen .fe-pos-body {
    grid-template-columns: 1fr;
  }
  body.fe-pos-fullscreen .fe-pos-products {
    min-height: 420px;
    max-height: 470px;
  }
  body.fe-pos-fullscreen .fe-pos-ticket {
    height: 300px;
    min-height: 260px;
  }
}
@media (max-width: 980px) {
  body.fe-pos-fullscreen .fe-pos-terminal {
    border-width: 4px;
  }
  body.fe-pos-fullscreen .fe-pos-menu-btn {
    min-width: 108px;
    min-height: 36px;
  }
  body.fe-pos-fullscreen .fe-pos-body {
    padding-top: 5px;
  }
}


/* ===== Ajuste POS: todo entra en la pantalla, sin bajar para ver total ===== */
body.fe-pos-fullscreen {
  height: 100vh;
  overflow: hidden !important;
}
body.fe-pos-fullscreen .fe-pos-sales,
body.fe-pos-fullscreen .fe-pos-terminal {
  height: 100vh;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.fe-pos-fullscreen .fe-pos-topbar {
  min-height: 48px;
  height: 48px;
  padding: 5px 10px;
}
body.fe-pos-fullscreen .fe-pos-menu-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 9px;
  font-size: 24px;
  line-height: 1;
}
body.fe-pos-fullscreen .fe-pos-menu-btn span { display: none !important; }
body.fe-pos-fullscreen .fe-pos-body {
  height: calc(100vh - 58px);
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}
body.fe-pos-fullscreen .fe-pos-catalog,
body.fe-pos-fullscreen .fe-pos-sale-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body.fe-pos-fullscreen .fe-pos-catalog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
body.fe-pos-fullscreen .fe-pos-sale-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  row-gap: 6px;
}
body.fe-pos-fullscreen .fe-pos-sale-head,
body.fe-pos-fullscreen .fe-pos-payments,
body.fe-pos-fullscreen .fe-pos-ticket,
body.fe-pos-fullscreen .fe-pos-total,
body.fe-pos-fullscreen .fe-pos-buffer {
  margin: 0 !important;
}
body.fe-pos-fullscreen .fe-pos-ticket {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto;
}
body.fe-pos-fullscreen .fe-pos-control-area {
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 5px;
  min-height: 0;
}
body.fe-pos-fullscreen .fe-pos-keypad,
body.fe-pos-fullscreen .fe-pos-actions {
  gap: 5px;
}
body.fe-pos-fullscreen .fe-pos-keypad button {
  min-height: 43px !important;
  height: 43px;
  font-size: 18px;
}
body.fe-pos-fullscreen .fe-pos-actions button {
  min-height: 34px !important;
  height: 34px;
  font-size: 10.5px;
  padding: 0 5px;
}
body.fe-pos-fullscreen .fe-pos-total {
  min-height: 50px !important;
  height: 50px;
  justify-content: center !important;
  text-align: center;
  padding: 0 10px;
  font-size: 29px;
}
body.fe-pos-fullscreen .fe-pos-buffer {
  min-height: 14px;
  height: 14px;
  line-height: 14px;
}
body.fe-pos-fullscreen .fe-pos-products {
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
  overflow-y: auto;
}
body.fe-pos-fullscreen .fe-pos-product-card {
  min-height: 150px;
}
body.fe-pos-fullscreen .fe-pos-pagination {
  padding-top: 6px;
  min-height: 34px;
}
@media (max-width: 1320px) {
  body.fe-pos-fullscreen {
    height: auto;
    overflow: auto !important;
  }
  body.fe-pos-fullscreen .fe-pos-sales,
  body.fe-pos-fullscreen .fe-pos-terminal,
  body.fe-pos-fullscreen .fe-pos-body,
  body.fe-pos-fullscreen .fe-pos-catalog,
  body.fe-pos-fullscreen .fe-pos-sale-panel {
    height: auto;
    overflow: visible;
  }
  body.fe-pos-fullscreen .fe-pos-sale-panel {
    display: flex;
  }
  body.fe-pos-fullscreen .fe-pos-ticket {
    height: 280px !important;
    min-height: 240px !important;
  }
}

/* POS: se quitó la etiqueta de cantidad inferior */
.fe-pos-buffer[hidden] { display: none !important; }


/* ===== POS móvil optimizado: buscador compacto, categorías en una línea y detalle como carrito ===== */
.fe-pos-close-cart,
.fe-pos-cart-bubble { display: none; }

@media (max-width: 700px) {
  body.fe-pos-fullscreen .fe-pos-terminal {
    border-width: 3px;
  }

  body.fe-pos-fullscreen .fe-pos-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    height: 42px;
    min-height: 42px;
    padding: 4px 6px;
    gap: 7px;
  }
  body.fe-pos-fullscreen .fe-pos-titlebox {
    gap: 6px;
    min-width: 0;
  }
  body.fe-pos-fullscreen .fe-pos-titlebox strong {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.fe-pos-fullscreen .fe-pos-menu-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    font-size: 21px;
    border-radius: 7px;
  }
  body.fe-pos-fullscreen .fe-pos-clock,
  body.fe-pos-fullscreen .fe-pos-user {
    display: none !important;
  }

  body.fe-pos-fullscreen .fe-pos-body {
    display: block;
    height: calc(100vh - 47px);
    padding: 3px 0 0;
    overflow: hidden;
  }

  body.fe-pos-fullscreen .fe-pos-catalog {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  /* Buscar/Escanear: iconos al costado para ahorrar espacio */
  body.fe-pos-fullscreen .fe-pos-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 4px;
    margin-bottom: 5px;
  }
  body.fe-pos-fullscreen .fe-pos-search-row .fe-pos-input {
    min-height: 33px;
    height: 33px;
    font-size: 10px;
    padding: 0 8px;
  }
  body.fe-pos-fullscreen .fe-pos-search-row .fe-pos-btn {
    min-height: 33px;
    width: 42px;
    padding: 0;
    gap: 0;
    font-size: 0;
    border-radius: 5px;
  }
  body.fe-pos-fullscreen .fe-pos-search-row .fe-pos-btn span {
    font-size: 21px;
  }
  body.fe-pos-fullscreen #fePosScannerBtn span {
    font-size: 18px;
  }

  /* Categorías en fila horizontal con scroll lateral */
  body.fe-pos-fullscreen .fe-pos-category-panel {
    min-height: 0;
    padding: 6px;
    margin-bottom: 5px;
    overflow: hidden;
  }
  body.fe-pos-fullscreen .fe-pos-category-head {
    margin-bottom: 5px;
  }
  body.fe-pos-fullscreen .fe-pos-category-head h3 {
    font-size: 15px;
  }
  body.fe-pos-fullscreen .fe-pos-category-head span {
    font-size: 9px;
  }
  body.fe-pos-fullscreen .fe-pos-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  body.fe-pos-fullscreen .fe-pos-categories::-webkit-scrollbar { display: none; }
  body.fe-pos-fullscreen .fe-pos-categories button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
    border-radius: 4px;
    scroll-snap-align: start;
  }

  body.fe-pos-fullscreen .fe-pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding-right: 2px;
  }
  body.fe-pos-fullscreen .fe-pos-product-card {
    min-height: 118px;
    padding: 6px;
    gap: 5px;
  }
  body.fe-pos-fullscreen .fe-pos-product-img {
    width: 38px;
    height: 32px;
    font-size: 28px;
  }
  body.fe-pos-fullscreen .fe-pos-product-name {
    font-size: 9.5px;
    min-height: 28px;
  }
  body.fe-pos-fullscreen .fe-pos-product-price {
    font-size: 11px;
  }
  body.fe-pos-fullscreen .fe-pos-pagination {
    min-height: 30px;
    padding-top: 5px;
  }
  body.fe-pos-fullscreen .fe-pos-page-btn {
    min-height: 29px;
    padding: 0 10px;
    font-size: 11px;
  }
  body.fe-pos-fullscreen .fe-pos-pagination span {
    font-size: 10px;
  }

  /* Detalle de venta como burbuja/carrito flotante */
  body.fe-pos-fullscreen .fe-pos-sale-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(94vw, 390px);
    height: 100vh;
    z-index: 9999;
    transform: translate3d(105%, 0, 0);
    transition: transform .22s ease;
    border-radius: 0;
    border-left: 4px solid var(--pos-blue);
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    box-shadow: -18px 0 45px rgba(2,6,23,.28);
    background: #eaf7fb;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    padding: 5px;
    overflow: hidden;
  }
  body.fe-pos-fullscreen.fe-pos-cart-open .fe-pos-sale-panel {
    transform: translate3d(0, 0, 0);
  }
  body.fe-pos-fullscreen.fe-pos-cart-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.30);
    z-index: 9998;
  }
  body.fe-pos-fullscreen .fe-pos-sale-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    font-size: 12px;
    margin: 0 !important;
  }
  .fe-pos-close-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 21px;
    font-weight: 1000;
  }
  body.fe-pos-fullscreen .fe-pos-payments {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 5px !important;
  }
  body.fe-pos-fullscreen .fe-pos-payments button {
    min-height: 26px;
    font-size: 12px;
  }
  body.fe-pos-fullscreen .fe-pos-ticket {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 5px !important;
    padding: 6px;
  }
  body.fe-pos-fullscreen .fe-pos-ticket th {
    font-size: 10px;
    padding: 6px 2px;
  }
  body.fe-pos-fullscreen .fe-pos-ticket td {
    font-size: 10px;
    padding: 6px 2px;
  }
  body.fe-pos-fullscreen .fe-pos-control-area {
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 4px;
  }
  body.fe-pos-fullscreen .fe-pos-keypad,
  body.fe-pos-fullscreen .fe-pos-actions {
    gap: 4px;
  }
  body.fe-pos-fullscreen .fe-pos-keypad button {
    min-height: 37px !important;
    height: 37px;
    font-size: 17px;
  }
  body.fe-pos-fullscreen .fe-pos-actions button {
    min-height: 28px !important;
    height: 28px;
    font-size: 9px;
    padding: 0 3px;
  }
  body.fe-pos-fullscreen .fe-pos-total {
    height: 42px;
    min-height: 42px !important;
    font-size: 24px;
    justify-content: center !important;
    text-align: center;
  }

  .fe-pos-cart-bubble {
    display: flex;
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 9997;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0fbad3, #0b86b7);
    color: #fff;
    box-shadow: 0 14px 34px rgba(2,6,23,.28);
    font-size: 27px;
  }
  .fe-pos-cart-bubble.has-items {
    animation: fePosCartPulse 1.6s ease-in-out infinite;
  }
  .fe-pos-cart-badge {
    position: absolute;
    right: -2px;
    top: -2px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 1000;
    border: 2px solid #fff;
  }
  body.fe-pos-fullscreen.fe-pos-cart-open .fe-pos-cart-bubble {
    display: none;
  }
}

@keyframes fePosCartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== Corrección móvil POS: sin footer, paginación arriba y carrito sin mancha ===== */
@media (max-width: 700px) {
  body.fe-pos-fullscreen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.fe-pos-fullscreen .footer,
  body.fe-pos-fullscreen footer {
    display: none !important;
  }

  body.fe-pos-fullscreen main,
  body.fe-pos-fullscreen .fe-dashboard-section,
  body.fe-pos-fullscreen .fe-dashboard-section > .container,
  body.fe-pos-fullscreen .fe-panel-shell,
  body.fe-pos-fullscreen .fe-panel-content,
  body.fe-pos-fullscreen .fe-tab-panel.active,
  body.fe-pos-fullscreen .fe-pos-sales,
  body.fe-pos-fullscreen .fe-pos-terminal {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.fe-pos-fullscreen .fe-pos-body {
    height: calc(100dvh - 42px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.fe-pos-fullscreen .fe-pos-catalog {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  body.fe-pos-fullscreen .fe-pos-search-row { order: 1; }
  body.fe-pos-fullscreen .fe-pos-category-panel { order: 2; }

  /* Paginación arriba, justo debajo de categorías */
  body.fe-pos-fullscreen .fe-pos-pagination {
    order: 3;
    padding: 4px 0 5px !important;
    min-height: 30px !important;
    background: #eaf7fb;
    position: relative;
    z-index: 2;
  }

  body.fe-pos-fullscreen .fe-pos-page-btn {
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  body.fe-pos-fullscreen .fe-pos-pagination span {
    font-size: 9.5px !important;
    white-space: nowrap;
  }

  body.fe-pos-fullscreen .fe-pos-products {
    order: 4;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Quitar la mancha/sombra oscura al abrir el carrito */
  body.fe-pos-fullscreen.fe-pos-cart-open::after {
    display: none !important;
    content: none !important;
  }

  body.fe-pos-fullscreen .fe-pos-sale-panel {
    box-shadow: none !important;
    width: min(96vw, 390px) !important;
    background: #eaf7fb !important;
  }

  .fe-pos-cart-bubble {
    box-shadow: none !important;
    filter: none !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 24px !important;
  }

  .fe-pos-cart-bubble.has-items {
    animation: none !important;
  }

  .fe-pos-cart-badge {
    box-shadow: none !important;
  }
}

/* ===== Corrección final móvil: detalle de venta completo y bordes limpios ===== */
@media (max-width: 700px) {
  body.fe-pos-fullscreen.fe-pos-cart-open {
    overflow: hidden !important;
  }

  body.fe-pos-fullscreen .fe-pos-sale-panel {
    top: 4px !important;
    right: 4px !important;
    bottom: auto !important;
    width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    border: 2px solid var(--pos-blue) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-rows: 28px auto minmax(126px, 1fr) auto 38px !important;
    gap: 4px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.fe-pos-fullscreen .fe-pos-sale-head {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 2px !important;
  }

  body.fe-pos-fullscreen .fe-pos-close-cart {
    width: 25px !important;
    height: 25px !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  body.fe-pos-fullscreen .fe-pos-payments {
    margin: 0 !important;
    gap: 4px !important;
  }

  body.fe-pos-fullscreen .fe-pos-payments button {
    min-height: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
  }

  body.fe-pos-fullscreen .fe-pos-ticket {
    height: auto !important;
    min-height: 126px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 5px !important;
    overflow: auto !important;
  }

  body.fe-pos-fullscreen .fe-pos-ticket th {
    font-size: 8.5px !important;
    padding: 5px 2px !important;
  }

  body.fe-pos-fullscreen .fe-pos-empty {
    padding-top: 14px !important;
    font-size: 10px !important;
  }

  body.fe-pos-fullscreen .fe-pos-control-area {
    grid-template-columns: minmax(0, 1fr) 60px !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  body.fe-pos-fullscreen .fe-pos-keypad {
    gap: 3px !important;
  }

  body.fe-pos-fullscreen .fe-pos-keypad button {
    min-height: 29px !important;
    height: 29px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }

  body.fe-pos-fullscreen .fe-pos-actions {
    gap: 3px !important;
  }

  body.fe-pos-fullscreen .fe-pos-actions button {
    min-height: 23px !important;
    height: 23px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    border-radius: 4px !important;
    padding: 0 2px !important;
  }

  body.fe-pos-fullscreen .fe-pos-total {
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
  }
}


/* ===== POS limpio: sin bloque informativo y con iconos enviados ===== */
.fe-pos-grid-clean {
  margin-top: 0;
}
.fe-pos-card-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.fe-pos-card-icon {
  overflow: hidden;
}
.fe-pos-action-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}
.fe-pos-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.fe-pos-cart-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
@media (max-width: 780px) {
  .fe-pos-grid-clean {
    gap: 10px;
  }
  .fe-pos-card-icon img {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 700px) {
  body.fe-pos-fullscreen .fe-pos-search-row .fe-pos-btn .fe-pos-action-icon {
    width: 23px;
    height: 23px;
  }
  body.fe-pos-fullscreen .fe-pos-search-row .fe-pos-btn span.fe-pos-action-icon img {
    width: 23px;
    height: 23px;
  }
  .fe-pos-cart-icon img {
    width: 24px;
    height: 24px;
  }
}

/* ===== Permisos por plan - Facturación / POS ===== */
.fe-chip-plan {
  margin-top: 8px;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
.fe-side-menu .fe-tab.fe-module-locked {
  opacity: .62;
  filter: grayscale(.15);
  position: relative;
}
.fe-side-menu .fe-tab.fe-module-locked::after {
  content: "🔒";
  margin-left: auto;
  font-size: 15px;
  opacity: .95;
}
.fe-side-menu .fe-tab.fe-module-locked:hover {
  transform: none;
  box-shadow: none;
}
.fe-pos-actions button.fe-pos-action-locked {
  opacity: .48;
  filter: grayscale(.25);
  position: relative;
}
.fe-pos-actions button.fe-pos-action-locked::after {
  content: "🔒";
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 12px;
}


/* ===== Admin SaaS restaurado ===== */
.admin-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(32,32,32,.08);
  box-shadow: 0 12px 28px rgba(32,32,32,.06);
}
.admin-tab {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 1000;
}
.admin-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 14px 28px rgba(47,128,237,.22);
}
.admin-page { display: none; }
.admin-page.active { display: block; animation: feFade .2s ease; }
.admin-saas-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.admin-saas-form .fe-full { grid-column: 1 / -1; }
.admin-saas-head { margin-bottom: 12px; }
.admin-saas-status {
  min-height: 20px;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 10px;
}
.admin-saas-status.error {
  color: #b91c1c;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.18);
  border-radius: 16px;
  padding: 12px;
}
.admin-saas-list {
  display: grid;
  gap: 12px;
}
.saas-client-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(32,32,32,.08);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(32,32,32,.06);
}
.saas-client-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.saas-client-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--accent), var(--mint));
}
.saas-client-item h3 {
  margin: 0 0 3px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 21px;
  line-height: 1.05;
}
.saas-client-item p,
.saas-client-item small {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}
.saas-client-meta {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}
.saas-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  background: var(--soft-primary);
  color: var(--accent-2);
}
.saas-badge.medio { background: rgba(0,194,168,.13); color: #047857; }
.saas-badge.premium { background: rgba(124,58,237,.13); color: #6d28d9; }
.saas-badge.estado.demo { background: rgba(245,158,11,.14); color: #92400e; }
.saas-badge.estado.activo { background: rgba(34,197,94,.14); color: #15803d; }
.saas-badge.estado.suspendido { background: rgba(239,68,68,.13); color: #b91c1c; }
.saas-expire {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.saas-client-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(130px, 180px) auto;
  gap: 8px;
  justify-content: end;
  align-items: center;
}
.saas-inline-plan,
.saas-inline-status,
.saas-inline-users { min-height: 42px; border-radius: 999px; }
@media (max-width: 880px) {
  .admin-saas-layout { grid-template-columns: 1fr; }
  .saas-client-item { grid-template-columns: 1fr; }
  .saas-client-meta { justify-content: flex-start; }
  .saas-client-actions { grid-template-columns: 1fr; justify-content: stretch; }
}
.saas-base-line {
  display: block;
  margin-top: 4px !important;
}
.saas-base-ok {
  color: #15803d;
}
.saas-base-pending {
  color: #b45309;
}
.saas-client-actions {
  grid-template-columns: minmax(140px, 210px) minmax(125px, 170px) minmax(130px, 170px) auto auto auto;
}
@media (max-width: 880px) {
  .saas-client-actions { grid-template-columns: 1fr; }
}


.saas-reset-btn {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(31, 186, 214, .22) !important;
}
.saas-reset-btn:hover { filter: brightness(1.04); }

/* ===== Ajuste: módulos bloqueados en una sola línea ===== */
.fe-side-menu .fe-tab {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}
.fe-side-menu .fe-tab .fe-tab-icon {
  flex: 0 0 42px;
}
.fe-side-menu .fe-tab > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-side-menu .fe-tab.fe-module-locked {
  padding-right: 42px;
}
.fe-side-menu .fe-tab.fe-module-locked::after {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  line-height: 1;
  flex: 0 0 auto;
}

/* Ajuste Clientes SaaS: límite de usuarios */
.saas-inline-users {
  max-width: 170px;
}
.saas-client-item small b {
  color: var(--accent-2);
}
@media (max-width: 880px) {
  .saas-inline-users { max-width: 100%; }
}

/* Usuarios internos y permisos por módulo */
.fe-users-layout {
  display: grid;
  gap: 18px;
}
.fe-user-form-card {
  overflow: visible;
}
.fe-user-form-head,
.fe-user-permission-head,
.fe-user-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.fe-user-form-head h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-family: Fredoka, Poppins, sans-serif;
}
.fe-user-permission-box {
  border: 1px solid rgba(47,128,237,.15);
  border-radius: 24px;
  background: rgba(247,251,255,.78);
  padding: 16px;
}
.fe-user-permission-head strong,
.fe-user-summary strong {
  display: block;
  font-size: 16px;
}
.fe-user-permission-head small,
.fe-user-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.fe-user-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.fe-user-permissions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fe-user-permission {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(32,32,32,.08);
  background: rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 900;
}
.fe-user-permission input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.fe-user-permission small {
  margin-left: auto;
  color: var(--danger);
  font-size: 11px;
  font-weight: 900;
}
.fe-user-permission.disabled {
  opacity: .58;
  background: rgba(240,242,245,.82);
}
.fe-users-list {
  display: grid;
  gap: 12px;
}
.fe-user-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(32,32,32,.08);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
}
.fe-user-item.inactive {
  opacity: .72;
}
.fe-user-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(47,128,237,.20), rgba(0,194,168,.14));
  color: var(--accent-2);
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 24px;
  font-weight: 1000;
}
.fe-user-info h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.fe-user-info p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.fe-user-perm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fe-user-perm-tags span,
.fe-user-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(47,128,237,.10);
  color: var(--accent-2);
  border: 1px solid rgba(47,128,237,.14);
}
.fe-user-status.ok {
  background: rgba(32,199,107,.12);
  color: #137a3f;
  border-color: rgba(32,199,107,.22);
}
.fe-user-status.off {
  background: rgba(239,68,68,.10);
  color: #b91c1c;
  border-color: rgba(239,68,68,.18);
}
.fe-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 820px) {
  .fe-user-permission-head,
  .fe-user-summary,
  .fe-user-form-head {
    flex-direction: column;
  }
  .fe-user-template-actions {
    justify-content: stretch;
    width: 100%;
  }
  .fe-user-template-actions .btn {
    flex: 1;
  }
  .fe-user-permissions {
    grid-template-columns: 1fr;
  }
  .fe-user-item {
    grid-template-columns: 48px 1fr;
  }
  .fe-user-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .fe-user-actions .btn {
    flex: 1;
  }
}


/* POS real: productos cargados desde BD */
.fe-pos-product-meta {
  display: block;
  color: rgba(15, 23, 42, .58);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 4px;
}
.fe-pos-product-card.out-stock {
  opacity: .55;
  filter: grayscale(.15);
}
.fe-pos-product-card.out-stock .fe-pos-product-price::after {
  content: " · SIN STOCK";
  font-size: 10px;
  font-weight: 900;
  color: var(--danger);
}
.fe-pos-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.fe-pos-cart-code {
  display: block;
  margin-top: 2px;
  color: rgba(15, 23, 42, .52);
  font-size: 10px;
  font-weight: 800;
}


/* ================= POS: Caja / Turno ================= */
.fe-pos-actions [data-pos-action].fe-pos-action-locked,
.fe-pos-actions [data-pos-action]:disabled {
  opacity: .52;
  cursor: not-allowed;
  filter: grayscale(.25);
}

.fe-pos-actions .caja.caja-open {
  background: linear-gradient(135deg, #10b981, #22c55e) !important;
  color: #fff !important;
}

.fe-pos-caja-modal[hidden] { display: none !important; }
.fe-pos-caja-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
}
.fe-pos-caja-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .62);
  backdrop-filter: blur(7px);
}
.fe-pos-caja-dialog {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  overflow: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,166,214,.50);
  border-top: 6px solid var(--blue);
  border-radius: 18px;
  box-shadow: 0 30px 95px rgba(2,6,23,.34);
}
.fe-pos-caja-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(32,32,32,.10);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fe-pos-caja-head h3 {
  margin: 0;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 22px;
  letter-spacing: -.02em;
}
.fe-caja-badge {
  display: inline-flex;
  margin-top: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.fe-caja-badge.open {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.fe-pos-caja-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(32,32,32,.13);
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}
.fe-pos-caja-body {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "apertura apertura"
    "movimientos arqueo"
    "reporte reporte";
  align-items: start;
  gap: 16px;
}
.fe-caja-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  border: 1px solid rgba(32,32,32,.10);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
}
.fe-caja-card h4 {
  margin: 0 0 12px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 20px;
}
.fe-caja-apertura { grid-area: apertura; }
.fe-caja-movimientos { grid-area: movimientos; }
.fe-caja-arqueo { grid-area: arqueo; }
.fe-caja-report { grid-area: reporte; }
.fe-caja-card label {
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
  font-weight: 800;
  font-size: 13px;
}
.fe-caja-card .form-control {
  min-height: 42px;
  border-radius: 10px;
  font-size: 14px;
}
.fe-caja-apertura small {
  display: inline-block;
  margin-left: 8px;
  color: #475569;
}
.fe-caja-apertura .btn.small,
.fe-caja-movimientos .btn.small,
.fe-caja-arqueo .btn.small {
  min-width: 120px;
}
.fe-caja-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 9px;
}
.fe-caja-arqueo-row {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fe-caja-arqueo-row span {
  font-weight: 900;
  font-size: 13px;
}
.fe-caja-arqueo-row input {
  text-align: right;
  font-weight: 800;
}
.fe-caja-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fe-caja-movimientos,
.fe-caja-arqueo {
  min-height: 374px;
  display: flex;
  flex-direction: column;
}
.fe-caja-movimientos .btn,
.fe-caja-arqueo .fe-caja-actions-row {
  margin-top: auto;
}
.fe-caja-apertura input:disabled,
.fe-caja-apertura textarea:disabled {
  background: #e8eef7;
  color: #475569;
  cursor: not-allowed;
  opacity: .9;
}

.fe-caja-report {
  overflow: hidden;
}
.fe-caja-report p {
  margin: 0 0 8px;
  font-size: 13px;
}
.fe-caja-report table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fe-caja-report th {
  background: rgba(0,166,214,.10);
  text-align: left;
}
.fe-caja-report th,
.fe-caja-report td {
  border-bottom: 1px solid rgba(32,32,32,.10);
  padding: 8px;
}
@media (max-width: 760px) {
  .fe-pos-caja-modal {
    padding: 8px;
    align-items: start;
  }
  .fe-pos-caja-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 18px);
    border-radius: 14px;
  }
  .fe-pos-caja-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "apertura"
      "movimientos"
      "arqueo"
      "reporte";
    padding: 10px;
  }
  .fe-caja-report {
    overflow-x: auto;
  }
  .fe-caja-grid-2 {
    grid-template-columns: 1fr;
  }
  .fe-caja-movimientos,
  .fe-caja-arqueo {
    min-height: auto;
  }
}



/* =========================================================
   POS: métodos de pago con color activo único + productos compactos
   ========================================================= */
.fe-pos-payments button {
  background: #fff !important;
  color: #111827 !important;
  border-color: #dde5ee !important;
  box-shadow: none !important;
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.fe-pos-payments button:hover {
  transform: translateY(-1px);
  border-color: #94a3b8 !important;
}
.fe-pos-payments button[data-payment="EFECTIVO"].active,
.fe-pos-payments button.cash.active {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  color: #fff !important;
  border-color: #16a34a !important;
  box-shadow: 0 8px 18px rgba(34, 197, 94, .28) !important;
}
.fe-pos-payments button[data-payment="TARJETA"].active {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  color: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .25) !important;
}
.fe-pos-payments button[data-payment="YAPE"].active {
  background: linear-gradient(135deg, #6d28d9, #a855f7) !important;
  color: #fff !important;
  border-color: #6d28d9 !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, .25) !important;
}
.fe-pos-payments button[data-payment="PLIN"].active {
  background: linear-gradient(135deg, #06b6d4, #67e8f9) !important;
  color: #083344 !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 8px 18px rgba(6, 182, 212, .24) !important;
}
.fe-pos-payments button[data-payment="MIXTO"].active {
  background:
    linear-gradient(135deg, #16a34a 0%, #16a34a 24%, #2563eb 24%, #2563eb 49%, #7c3aed 49%, #7c3aed 74%, #06b6d4 74%, #06b6d4 100%) !important;
  color: #fff !important;
  border-color: rgba(15, 23, 42, .18) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .20) !important;
}

.fe-pos-products {
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: 174px !important;
}
.fe-pos-product-card {
  height: 174px !important;
  min-height: 174px !important;
  max-height: 174px !important;
  align-self: start !important;
}
body.fe-pos-fullscreen .fe-pos-products {
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: 172px !important;
}
body.fe-pos-fullscreen .fe-pos-product-card {
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
}
@media (max-width: 1320px) {
  body.fe-pos-fullscreen .fe-pos-products {
    grid-auto-rows: 132px !important;
  }
  body.fe-pos-fullscreen .fe-pos-product-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
}
@media (max-width: 760px) {
  .fe-pos-products,
  body.fe-pos-fullscreen .fe-pos-products {
    grid-auto-rows: 124px !important;
  }
  .fe-pos-product-card,
  body.fe-pos-fullscreen .fe-pos-product-card {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
  }
}

/* Modal rápido POS: Factura / Boleta / Nota con datos */
.fe-pos-doc-modal[hidden] { display: none !important; }
.fe-pos-doc-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 18px;
}
.fe-pos-doc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .64);
  backdrop-filter: blur(7px);
}
.fe-pos-doc-dialog {
  position: relative;
  width: min(980px, calc(100vw - 28px));
  max-height: min(90vh, 820px);
  overflow: auto;
  background: rgba(255,255,255,.98);
  border-radius: 22px;
  border: 1px solid rgba(47,128,237,.22);
  box-shadow: 0 34px 100px rgba(2,6,23,.34);
}
.fe-pos-doc-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(32,32,32,.10);
}
.fe-pos-doc-head h3 {
  margin: 0;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: -.03em;
}
.fe-pos-doc-close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(32,32,32,.12);
  border-radius: 14px;
  background: #f8fafc;
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
}
.fe-pos-doc-body {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 16px;
  align-items: start;
}
.fe-pos-doc-card {
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(32,32,32,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
}
.fe-pos-doc-card h4 {
  margin: 0 0 12px;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 22px;
}
.fe-pos-doc-card label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 10px;
}
.fe-pos-doc-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}
.fe-pos-doc-total {
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.fe-pos-doc-total span { font-weight: 900; opacity: .85; }
.fe-pos-doc-total strong { font-family: Fredoka, Poppins, sans-serif; font-size: 34px; }
.fe-pos-doc-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fe-pos-doc-bills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}
.fe-pos-doc-bills button {
  min-height: 42px;
  border: 1px solid rgba(32,32,32,.12);
  border-radius: 13px;
  background: #fff;
  font-weight: 1000;
  box-shadow: 0 8px 20px rgba(32,32,32,.06);
}
.fe-pos-doc-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fe-pos-doc-actions .btn { min-height: 48px; padding: 0 12px; }
.fe-pos-doc-msg {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(47,128,237,.10);
  color: #1d4ed8;
}
.fe-pos-doc-msg.error {
  background: #fee2e2;
  color: #b91c1c;
}
@media (max-width: 820px) {
  .fe-pos-doc-modal { padding: 8px; place-items: start center; }
  .fe-pos-doc-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .fe-pos-doc-body,
  .fe-pos-doc-search-row,
  .fe-pos-doc-pay-grid,
  .fe-pos-doc-actions { grid-template-columns: 1fr; }
  .fe-pos-doc-bills { grid-template-columns: repeat(3, 1fr); }
}

/* ===== POS documento estilo EXE + pago mixto ===== */
.fe-pos-payments button[data-payment="EFECTIVO"].active,
.fe-pos-payments button[data-payment="EFECTIVO"]:hover { background:#22c55e; color:#fff; border-color:#16a34a; }
.fe-pos-payments button[data-payment="TARJETA"].active,
.fe-pos-payments button[data-payment="TARJETA"]:hover { background:#2563eb; color:#fff; border-color:#1d4ed8; }
.fe-pos-payments button[data-payment="YAPE"].active,
.fe-pos-payments button[data-payment="YAPE"]:hover { background:#7c3aed; color:#fff; border-color:#6d28d9; }
.fe-pos-payments button[data-payment="PLIN"].active,
.fe-pos-payments button[data-payment="PLIN"]:hover { background:#06b6d4; color:#fff; border-color:#0891b2; }
.fe-pos-payments button[data-payment="MIXTO"].active,
.fe-pos-payments button[data-payment="MIXTO"]:hover { background:#1fbad6; color:#fff; border-color:#0891b2; }
.fe-pos-payments button:not(.active):not(:hover) { background:#fff; color:#111827; border-color:#dde5ee; }
.fe-pos-products { align-content:start !important; align-items:start !important; }
.fe-pos-product-card { align-self:start !important; height:176px !important; min-height:176px !important; max-height:176px !important; }

.fe-pos-doc-modal-exe[hidden] { display:none !important; }
.fe-pos-doc-modal-exe { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:16px; }
.fe-pos-doc-modal-exe .fe-pos-doc-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.58); backdrop-filter:blur(4px); }
.fe-pos-doc-dialog-exe { position:relative; width:min(800px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:6px; box-shadow:0 22px 60px rgba(0,0,0,.35); border:6px solid rgba(255,255,255,.95); }
.fe-pos-doc-exe-title { min-height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; background:#020617; color:#fff; font-size:11px; font-weight:900; text-transform:uppercase; }
.fe-pos-doc-close-exe { width:28px; height:28px; border:0; background:transparent; color:#fff; font-size:22px; font-weight:900; line-height:1; }
.fe-pos-doc-exe-actions { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:5px; padding:12px 10px 8px; background:#fff; }
.fe-pos-doc-exe-actions .doc-top { min-height:24px; border:0; border-radius:3px; color:#fff; font-size:10px; font-weight:900; }
.fe-pos-doc-exe-actions .buscar,
.fe-pos-doc-exe-actions .limpiar,
.fe-pos-doc-exe-actions .nota { background:#16b8d1; }
.fe-pos-doc-exe-actions .factura { background:#22c55e; }
.fe-pos-doc-exe-actions .boleta { background:#f59e0b; }
.fe-pos-doc-exe-body { padding:0 10px 10px; }
.fe-pos-doc-exe-fields label,
.fe-pos-doc-exe-pay label,
.fe-pos-doc-mixto label { display:block; margin:8px 0 5px; color:#111827; font-size:13px; font-weight:900; }
.fe-pos-doc-exe-fields .doc-input,
.fe-pos-doc-exe-pay .doc-input,
.fe-pos-doc-mixto .doc-input { width:100%; min-height:24px; border:1px solid #cbd5e1; border-radius:2px; background:#fff; padding:0 8px; color:#111827; font-size:11px; font-weight:700; outline:none; }
.fe-pos-doc-exe-fields .doc-input:focus,
.fe-pos-doc-exe-pay .doc-input:focus,
.fe-pos-doc-mixto .doc-input:focus { border-color:#16b8d1; box-shadow:0 0 0 2px rgba(22,184,209,.18); }
.fe-pos-doc-exe-pay { margin-top:8px; }
.fe-pos-doc-exe-pay .pay-line { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.fe-pos-doc-exe-pay .pay-line.inputs { grid-template-columns:80px 1fr; }
.fe-pos-doc-bills.exe { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; margin:8px 0 10px 84px; }
.fe-pos-doc-bills.exe button { min-height:26px; border:1px solid #dbe2ea; border-radius:3px; background:#fff; color:#111827; font-weight:900; font-size:12px; }
.fe-pos-doc-mixto { margin:8px 0; padding:8px; border:1px solid rgba(124,58,237,.22); border-radius:6px; background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(37,99,235,.08),rgba(124,58,237,.08),rgba(6,182,212,.08)); }
.fe-pos-doc-mixto b { display:block; margin-bottom:5px; font-size:13px; color:#111827; }
.fe-pos-doc-mixto .mix-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.fe-pos-doc-mixto .mix-resumen { margin-top:7px; font-size:12px; font-weight:900; color:#16a34a; }
.fe-pos-doc-mixto .mix-resumen.error { color:#dc2626; }
.fe-pos-doc-keyboard { margin-top:8px; padding:8px; border-radius:3px; background:#050914; display:grid; grid-template-columns:repeat(11, minmax(0,1fr)); gap:4px; }
.fe-pos-doc-keyboard button { min-height:40px; border:0; border-radius:4px; background:#151a23; color:#f8fafc; font-size:15px; font-weight:1000; }
.fe-pos-doc-keyboard button.danger { background:#c91d23; }
.fe-pos-doc-keyboard button.space { grid-column:span 11; }
.fe-pos-doc-msg { margin:8px 0 0; padding:8px 10px; border-radius:5px; background:#eef2ff; color:#1d4ed8; font-size:12px; font-weight:800; }
.fe-pos-doc-msg.error { background:#fee2e2; color:#b91c1c; }
@media (max-width: 760px) {
  .fe-pos-doc-exe-actions { grid-template-columns:1fr 1fr; }
  .fe-pos-doc-exe-pay .pay-line.inputs { grid-template-columns:1fr; }
  .fe-pos-doc-bills.exe { margin-left:0; grid-template-columns:repeat(3,1fr); }
  .fe-pos-doc-mixto .mix-grid { grid-template-columns:1fr 1fr; }
  .fe-pos-doc-keyboard { grid-template-columns:repeat(5,1fr); }
  .fe-pos-doc-keyboard button.space { grid-column:span 5; }
}


/* ===== FIX modal POS tipo EXE: mixto bajo demanda + diseño más limpio ===== */
.fe-pos-doc-dialog-exe {
  width: min(760px, calc(100vw - 32px)) !important;
  border-radius: 8px !important;
  border: 4px solid rgba(255,255,255,.96) !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}
.fe-pos-doc-dialog-exe .fe-pos-doc-exe-title {
  min-height: 38px !important;
  padding: 0 14px !important;
  background: #050817 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.fe-pos-doc-dialog-exe .fe-pos-doc-close-exe {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  color: #fff !important;
}
.fe-pos-doc-dialog-exe .fe-pos-doc-close-exe:hover {
  background: rgba(255,255,255,.12) !important;
}
.fe-pos-doc-exe-actions {
  gap: 6px !important;
  padding: 10px 12px 8px !important;
  background: #f8fafc !important;
}
.fe-pos-doc-exe-actions .doc-top {
  min-height: 28px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 3px 8px rgba(15,23,42,.08) !important;
  letter-spacing: .01em !important;
}
.fe-pos-doc-exe-body {
  padding: 0 12px 12px !important;
  background: #f8fafc !important;
}
.fe-pos-doc-exe-fields,
.fe-pos-doc-exe-pay,
.fe-pos-doc-mixto {
  background: #fff !important;
  border: 1px solid #d7e1ec !important;
  border-radius: 7px !important;
  padding: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.fe-pos-doc-exe-pay { margin-top: 8px !important; }
.fe-pos-doc-exe-fields label,
.fe-pos-doc-exe-pay label,
.fe-pos-doc-mixto label {
  margin: 7px 0 4px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.fe-pos-doc-exe-fields .doc-input,
.fe-pos-doc-exe-pay .doc-input,
.fe-pos-doc-mixto .doc-input {
  min-height: 28px !important;
  border: 1px solid #b9c8d8 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #fff, #f9fbfd) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 0 8px !important;
}
.fe-pos-doc-exe-fields .doc-input:focus,
.fe-pos-doc-exe-pay .doc-input:focus,
.fe-pos-doc-mixto .doc-input:focus {
  border-color: #10b7d0 !important;
  box-shadow: 0 0 0 2px rgba(16,183,208,.18) !important;
}
.fe-pos-doc-exe-pay .pay-line.inputs {
  grid-template-columns: 88px 1fr !important;
  gap: 8px !important;
}
.fe-pos-doc-bills.exe {
  margin: 8px 0 0 92px !important;
  gap: 5px !important;
}
.fe-pos-doc-bills.exe button {
  min-height: 28px !important;
  border-radius: 4px !important;
  border: 1px solid #c9d5e1 !important;
  background: linear-gradient(180deg, #fff, #f3f7fb) !important;
  box-shadow: inset 0 1px 0 #fff !important;
  font-size: 12px !important;
}
.fe-pos-doc-mixto {
  margin: 8px 0 !important;
  background: linear-gradient(135deg, rgba(34,197,94,.09), rgba(37,99,235,.08), rgba(124,58,237,.08), rgba(6,182,212,.08)) !important;
}
.fe-pos-doc-mixto[hidden] { display: none !important; }
.fe-pos-doc-mixto b {
  margin-bottom: 8px !important;
  font-size: 13px !important;
}
.fe-pos-doc-mixto .mix-grid {
  gap: 7px !important;
}
.fe-pos-doc-keyboard {
  margin-top: 8px !important;
  padding: 7px !important;
  border-radius: 5px !important;
  background: #050914 !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  gap: 5px !important;
}
.fe-pos-doc-keyboard button {
  min-height: 38px !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #18202b, #101722) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  color: #f8fafc !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.fe-pos-doc-keyboard button:hover {
  filter: brightness(1.12) !important;
}
.fe-pos-doc-keyboard button.danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
}
.fe-pos-doc-keyboard button.space {
  min-height: 36px !important;
  background: linear-gradient(180deg, #1f2937, #111827) !important;
}
@media (max-width: 760px) {
  .fe-pos-doc-exe-actions { grid-template-columns: 1fr 1fr !important; }
  .fe-pos-doc-exe-pay .pay-line.inputs { grid-template-columns: 1fr !important; }
  .fe-pos-doc-bills.exe { margin-left: 0 !important; grid-template-columns: repeat(3,1fr) !important; }
  .fe-pos-doc-mixto .mix-grid { grid-template-columns: 1fr 1fr !important; }
  .fe-pos-doc-keyboard { grid-template-columns: repeat(5,1fr) !important; }
  .fe-pos-doc-keyboard button.space { grid-column: span 5 !important; }
}


/* ===== Ajuste final solicitado: Pago mixto separado, turquesa y más amigable ===== */
.fe-pos-payments button[data-payment="MIXTO"].active,
.fe-pos-payments button[data-payment="MIXTO"]:hover {
  background: linear-gradient(180deg, #22d3ee, #1fbad6) !important;
  color: #fff !important;
  border-color: #0891b2 !important;
  box-shadow: 0 12px 22px rgba(31, 186, 214, .28) !important;
}
.fe-pos-mixto-modal[hidden] { display: none !important; }
.fe-pos-mixto-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.fe-pos-mixto-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
}
.fe-pos-mixto-dialog {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  background: #fff;
  border: 4px solid rgba(255,255,255,.96);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.fe-pos-mixto-title {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #050817;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}
.fe-pos-mixto-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font-size: 23px;
  font-weight: 1000;
  line-height: 1;
}
.fe-pos-mixto-close:hover { background: rgba(255,255,255,.12); }
.fe-pos-mixto-body {
  padding: 12px;
  background: #f8fafc;
}
.fe-pos-mixto-total {
  min-height: 58px;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1fbad6, #22d3ee);
  color: #fff;
  box-shadow: 0 13px 24px rgba(31,186,214,.22);
}
.fe-pos-mixto-total span { font-weight: 1000; }
.fe-pos-mixto-total strong { font-family: Fredoka, Poppins, sans-serif; font-size: 30px; letter-spacing: -.03em; }
.fe-pos-mixto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.fe-pos-mixto-grid .mix-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 8px 20px rgba(15,23,42,.06);
}
.fe-pos-mixto-grid .mix-card span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 1000;
}
.fe-pos-mixto-grid .mix-card input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  padding: 0 10px;
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
  outline: none;
}
.fe-pos-mixto-grid .mix-card input:focus {
  border-color: #1fbad6;
  box-shadow: 0 0 0 3px rgba(31,186,214,.20);
}
.fe-pos-mixto-grid .mix-efectivo { background: linear-gradient(180deg, rgba(34,197,94,.24), rgba(34,197,94,.10)); border-color: rgba(34,197,94,.38); }
.fe-pos-mixto-grid .mix-tarjeta { background: linear-gradient(180deg, rgba(37,99,235,.24), rgba(37,99,235,.10)); border-color: rgba(37,99,235,.38); }
.fe-pos-mixto-grid .mix-yape { background: linear-gradient(180deg, rgba(124,58,237,.24), rgba(124,58,237,.10)); border-color: rgba(124,58,237,.38); }
.fe-pos-mixto-grid .mix-plin { background: linear-gradient(180deg, rgba(6,182,212,.24), rgba(6,182,212,.10)); border-color: rgba(6,182,212,.38); }
.fe-pos-mixto-resumen {
  margin-top: 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 9px;
  background: #dcfce7;
  color: #15803d;
  font-size: 14px;
  font-weight: 1000;
}
.fe-pos-mixto-resumen.error { background: #fee2e2; color: #dc2626; }
.fe-pos-mixto-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.btn-mixto-aceptar {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(135deg, #1fbad6, #0891b2);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 14px 26px rgba(31,186,214,.25);
}
.btn-mixto-aceptar:hover { transform: translateY(-1px); filter: brightness(1.04); }

/* Modal factura un poco más ancho */
.fe-pos-doc-dialog-exe {
  width: min(960px, calc(100vw - 32px)) !important;
}
/* Ya no se usa pago mixto dentro de factura */
#feDocMixtoBox { display: none !important; }
@media (max-width: 640px) {
  .fe-pos-mixto-grid { grid-template-columns: 1fr; }
  .fe-pos-mixto-total strong { font-size: 25px; }
}


/* ===== FIX final: fila efectivo/billetes/vuelto como EXE ===== */
.fe-pos-doc-dialog-exe {
  width: min(930px, calc(100vw - 34px)) !important;
}
.fe-pos-doc-exe-pay {
  padding: 9px 10px 10px !important;
}
.fe-pos-pay-compact-row {
  display: grid !important;
  grid-template-columns: 370px minmax(260px, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
}
.fe-pos-pay-left,
.fe-pos-pay-right {
  min-width: 0 !important;
}
.fe-pos-pay-left label,
.fe-pos-pay-right label {
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #111827 !important;
}
.fe-pos-pay-cash-line {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  gap: 5px !important;
  align-items: center !important;
}
.fe-pos-pay-cash-line #feDocEfectivo,
.fe-pos-pay-right #feDocVuelto {
  min-height: 26px !important;
  height: 26px !important;
}
.fe-pos-doc-bills.exe {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
.fe-pos-doc-bills.exe button {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ffffff, #f5f7fa) !important;
  box-shadow: 0 2px 5px rgba(15,23,42,.18) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.fe-pos-doc-keyboard {
  display: block !important;
  padding: 8px !important;
}
.fe-pos-doc-keyboard .kb-row {
  display: grid !important;
  gap: 5px !important;
  margin-bottom: 5px !important;
}
.fe-pos-doc-keyboard .kb-row:last-child { margin-bottom: 0 !important; }
.fe-pos-doc-keyboard .kb-row-numbers { grid-template-columns: repeat(10, minmax(0, 1fr)) 92px !important; }
.fe-pos-doc-keyboard .kb-row-qwerty { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.fe-pos-doc-keyboard .kb-row-home { grid-template-columns: repeat(9, minmax(0, 1fr)) 92px !important; }
.fe-pos-doc-keyboard .kb-row-bottom { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.fe-pos-doc-keyboard .kb-row-space { grid-template-columns: 1fr !important; }
.fe-pos-doc-keyboard button.space { grid-column: auto !important; }
.fe-pos-doc-msg { display: none !important; }
@media (max-width: 760px) {
  .fe-pos-pay-compact-row {
    grid-template-columns: 1fr !important;
  }
  .fe-pos-pay-cash-line {
    grid-template-columns: 80px 1fr !important;
  }
  .fe-pos-doc-bills.exe {
    grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
  }
  .fe-pos-doc-keyboard .kb-row-numbers,
  .fe-pos-doc-keyboard .kb-row-qwerty,
  .fe-pos-doc-keyboard .kb-row-home,
  .fe-pos-doc-keyboard .kb-row-bottom {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}


/* ===== FIX seguro: Pago mixto con cuadros iguales y blancos ===== */
.fe-pos-mixto-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}
.fe-pos-mixto-grid .mix-card,
.fe-pos-mixto-grid .mix-efectivo,
.fe-pos-mixto-grid .mix-tarjeta,
.fe-pos-mixto-grid .mix-yape,
.fe-pos-mixto-grid .mix-plin {
  height: 92px !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  background: #ffffff !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 10px !important;
  padding: 11px 12px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06) !important;
}
.fe-pos-mixto-grid .mix-card:focus-within {
  border-color: #16b8d1 !important;
  box-shadow: 0 0 0 3px rgba(22, 184, 209, .16), 0 8px 18px rgba(15, 23, 42, .07) !important;
}
.fe-pos-mixto-grid .mix-card span {
  min-height: 18px !important;
  line-height: 18px !important;
  margin: 0 !important;
}
.fe-pos-mixto-grid .mix-card input {
  align-self: end !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
}
@media (max-width: 520px) {
  .fe-pos-mixto-grid .mix-card,
  .fe-pos-mixto-grid .mix-efectivo,
  .fe-pos-mixto-grid .mix-tarjeta,
  .fe-pos-mixto-grid .mix-yape,
  .fe-pos-mixto-grid .mix-plin {
    height: 88px !important;
    min-height: 88px !important;
  }
}


/* ===== Corrección final: botón MIXTO limpio y factura con efectivo/billetes/vuelto en una sola fila ===== */
.fe-pos-payments button[data-payment="MIXTO"] {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #dde5ee !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.fe-pos-payments button[data-payment="MIXTO"].active,
.fe-pos-payments button[data-payment="MIXTO"]:hover {
  background: linear-gradient(180deg, #22d3ee, #06b6d4) !important;
  color: #083344 !important;
  border-color: #0891b2 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(6, 182, 212, .24) !important;
}

.fe-pos-doc-dialog-exe {
  width: min(930px, calc(100vw - 34px)) !important;
}
.fe-pos-doc-exe-pay {
  padding: 9px 10px 10px !important;
  border-radius: 6px !important;
}
.fe-pos-doc-exe-pay .pay-line { display: none !important; }
.fe-pos-pay-compact-row {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(240px, 1.05fr) !important;
  gap: 10px !important;
  align-items: end !important;
}
.fe-pos-pay-left,
.fe-pos-pay-right { min-width: 0 !important; }
.fe-pos-pay-left label,
.fe-pos-pay-right label {
  display: block !important;
  margin: 0 0 4px !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}
.fe-pos-pay-cash-line {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: center !important;
}
.fe-pos-pay-cash-line #feDocEfectivo,
.fe-pos-pay-right #feDocVuelto {
  min-height: 26px !important;
  height: 26px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.fe-pos-doc-bills.exe {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}
.fe-pos-doc-bills.exe button {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ffffff, #f5f7fa) !important;
  color: #111827 !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .18) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.fe-pos-mixto-grid .fe-mixto-card {
  height: 92px !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  background: #ffffff !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 10px !important;
  padding: 11px 12px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06) !important;
}
.fe-pos-mixto-grid .fe-mixto-card:focus-within {
  border-color: #16b8d1 !important;
  box-shadow: 0 0 0 3px rgba(22, 184, 209, .16), 0 8px 18px rgba(15, 23, 42, .07) !important;
}
.fe-pos-mixto-grid .fe-mixto-card span {
  min-height: 18px !important;
  line-height: 18px !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
}
.fe-pos-mixto-grid .fe-mixto-card input {
  align-self: end !important;
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  padding: 0 10px !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  outline: none !important;
}
@media (max-width: 760px) {
  .fe-pos-pay-compact-row { grid-template-columns: 1fr !important; }
  .fe-pos-pay-cash-line { grid-template-columns: 80px 1fr !important; }
  .fe-pos-doc-bills.exe { grid-template-columns: repeat(5, minmax(48px, 1fr)) !important; }
}

/* ===== FIX modal documento: botones reales, mensaje visible y cierre fluido ===== */
.toast {
  z-index: 12050 !important;
}
body.fe-pos-doc-open .toast,
body.fe-caja-modal-open .toast {
  z-index: 12050 !important;
  right: 24px !important;
  bottom: 24px !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .28) !important;
}
.fe-pos-doc-modal-exe {
  z-index: 11000 !important;
}
.fe-pos-doc-dialog-exe {
  max-height: calc(100vh - 28px) !important;
  overflow: auto !important;
}
.fe-pos-doc-exe-actions .doc-top {
  cursor: pointer !important;
  min-height: 31px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  box-shadow: 0 4px 0 rgba(15, 23, 42, .16), 0 8px 14px rgba(15, 23, 42, .10) !important;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease !important;
}
.fe-pos-doc-exe-actions .doc-top:hover {
  filter: brightness(1.06) saturate(1.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 rgba(15, 23, 42, .16), 0 11px 18px rgba(15, 23, 42, .14) !important;
}
.fe-pos-doc-exe-actions .doc-top:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .18), 0 4px 8px rgba(15, 23, 42, .10) !important;
}
.fe-pos-doc-exe-actions .doc-top:disabled,
.fe-pos-doc-dialog-exe.fe-doc-generating .doc-top,
.fe-doc-generating .doc-top {
  cursor: wait !important;
  opacity: .72 !important;
  filter: grayscale(.12) !important;
  transform: none !important;
}
.fe-pos-doc-bills.exe button,
.fe-pos-doc-keyboard button,
.fe-pos-doc-close-exe {
  cursor: pointer !important;
}
.fe-pos-doc-bills.exe button:active,
.fe-pos-doc-keyboard button:active,
.fe-pos-doc-close-exe:active {
  transform: translateY(1px) !important;
  filter: brightness(.95) !important;
}
.fe-pos-doc-msg[hidden] {
  display: none !important;
}
.fe-pos-doc-msg:not([hidden]) {
  display: block !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 8 !important;
  margin: 8px 0 0 !important;
  padding: 9px 11px !important;
  border-radius: 6px !important;
  background: #e0f2fe !important;
  border: 1px solid #7dd3fc !important;
  color: #075985 !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .10) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.fe-pos-doc-msg.error:not([hidden]) {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
.fe-doc-generating .fe-pos-doc-exe-body {
  pointer-events: none !important;
}
.fe-doc-generating .fe-pos-doc-exe-actions {
  pointer-events: auto !important;
}
.fe-doc-generating .fe-pos-doc-exe-actions .doc-top {
  pointer-events: none !important;
}

/* Ajuste final modal factura: los avisos ya no quedan dentro/abajo del modal */
#fePosFacturaModal #feDocMsg,
#fePosFacturaModal .fe-pos-doc-msg {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
#fePosFacturaModal.fe-doc-generating .fe-pos-doc-exe-actions .doc-top:disabled {
  opacity: .72;
  cursor: wait;
  transform: none !important;
}


/* POS: estado de carga bonito y centrado para productos */
.fe-pos-empty-products {
  grid-column: 1 / -1;
  min-height: 260px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(15, 23, 42, .14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
  color: #475569;
  font-weight: 900;
}
.fe-pos-loading-products {
  flex-direction: column;
  gap: 8px;
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 26px rgba(15,23,42,.07);
}
.fe-pos-loading-products strong {
  font-size: 16px;
  font-weight: 1000;
}
.fe-pos-loading-products small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.fe-pos-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid rgba(31,186,214,.20);
  border-top-color: #1fbad6;
  animation: fePosSpin .75s linear infinite;
}
@keyframes fePosSpin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .fe-pos-empty-products {
    min-height: 220px;
    margin: 4px 0;
  }
}


/* ================= POS: editar cantidad y precio en detalle ================= */
.fe-pos-ticket th:nth-child(2),
.fe-pos-ticket td:nth-child(2) {
  width: 112px;
  text-align: center;
}

.fe-pos-ticket th:nth-child(3),
.fe-pos-ticket td:nth-child(3) {
  width: 140px;
  text-align: right;
}

.fe-pos-ticket td.fe-pos-cart-product-cell {
  vertical-align: middle;
  word-break: break-word;
}

.fe-pos-cart-code {
  display: block;
  margin-top: 2px;
  color: rgba(148, 163, 184, .42);
  font-size: 10px;
  font-weight: 800;
}

.fe-pos-ticket tr.selected td {
  background: rgba(22,184,209,.25);
}

.fe-pos-cart-qty-editor,
.fe-pos-cart-price-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.fe-pos-cart-price-editor {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.fe-pos-cart-mini {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: #0b91bd;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  padding: 0;
}

.fe-pos-cart-editable {
  height: 28px;
  border: 1px solid rgba(148, 163, 184, .55);
  border-radius: 4px;
  background: #101827;
  color: #fff;
  outline: none;
  font-weight: 900;
  text-align: center;
  padding: 0 4px;
}

.fe-pos-cart-editable:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .20);
}

.fe-pos-cart-qty-input {
  width: 36px;
}

.fe-pos-cart-price-input {
  width: 54px;
  text-align: right;
}

.fe-pos-cart-line-total {
  min-width: 56px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

.fe-pos-cart-editable::-webkit-outer-spin-button,
.fe-pos-cart-editable::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fe-pos-cart-editable[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

@media (max-width: 980px) {
  .fe-pos-ticket th:nth-child(2),
  .fe-pos-ticket td:nth-child(2) {
    width: 98px;
  }

  .fe-pos-ticket th:nth-child(3),
  .fe-pos-ticket td:nth-child(3) {
    width: 120px;
  }

  .fe-pos-cart-mini {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }

  .fe-pos-cart-qty-input {
    width: 32px;
  }

  .fe-pos-cart-price-input {
    width: 48px;
  }

  .fe-pos-cart-line-total {
    min-width: 48px;
    font-size: 11px;
  }
}

/* ===== POS: micrófono y escáner con cámara ===== */
.fe-pos-keypad button.mic,
#fePosVoiceBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fe-pos-keypad button.mic img,
#fePosVoiceBtn img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.fe-pos-keypad button.mic.mic-active,
#fePosVoiceBtn.mic-active {
  background: linear-gradient(135deg, #f59e0b, #facc15) !important;
  color: #111827 !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .22), 0 10px 24px rgba(245, 158, 11, .24);
}
.fe-pos-product-card.voice-match {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .22), 0 12px 24px rgba(245, 158, 11, .16) !important;
}
.fe-pos-voice-btn {
  min-width: 48px;
  padding: 0 12px !important;
}

.fe-pos-scanner-modal[hidden] { display: none !important; }
.fe-pos-scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 16px;
}
.fe-pos-scanner-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, .72);
  backdrop-filter: blur(5px);
}
.fe-pos-scanner-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  border: 3px solid var(--pos-blue, #16b8d1);
}
.fe-pos-scanner-head {
  min-height: 48px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #030817;
  color: #fff;
  font-weight: 1000;
}
.fe-pos-scanner-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
}
#fePosScannerVideo {
  width: 100%;
  height: min(60vh, 420px);
  object-fit: cover;
  background: #000;
  display: block;
}
.fe-pos-scanner-dialog p {
  margin: 0;
  padding: 12px 16px 16px;
  font-size: 13px;
  font-weight: 800;
  color: #475569;
  text-align: center;
}

@media (max-width: 980px) {
  .fe-pos-search-row {
    grid-template-columns: minmax(0, 1fr) 52px 96px !important;
  }
  #fePosVoiceBtn {
    grid-column: auto !important;
    min-height: 42px;
    position: sticky;
    right: 6px;
    z-index: 4;
    border-radius: 10px;
  }
  .fe-pos-code,
  #fePosScannerBtn {
    grid-column: auto !important;
  }
}

@media (max-width: 560px) {
  .fe-pos-search-row {
    grid-template-columns: minmax(0, 1fr) 48px 50px 50px !important;
    align-items: center;
  }
  #fePosSearchBtn,
  #fePosScannerBtn,
  #fePosVoiceBtn {
    min-height: 42px;
    min-width: 48px;
    padding: 0 !important;
    border-radius: 10px;
  }
  #fePosSearchBtn span,
  #fePosScannerBtn span,
  #fePosVoiceBtn span {
    margin: 0;
  }
  #fePosSearchBtn,
  #fePosScannerBtn {
    font-size: 0 !important;
  }
  #fePosSearchBtn img,
  #fePosScannerBtn img,
  #fePosVoiceBtn img {
    width: 26px;
    height: 26px;
  }
  #fePosScanner {
    display: none !important;
  }
  .fe-pos-keypad button.mic img {
    width: 26px;
    height: 26px;
  }
}


/* ===== FIX: mantener escritorio como estaba; micrófono flotante solo en celular ===== */
#fePosVoiceBtn {
  display: none !important;
}

@media (max-width: 820px) {
  body.fe-pos-fullscreen #fePosVoiceBtn,
  #fePosVoiceBtn {
    display: inline-flex !important;
  }

  body.fe-pos-fullscreen .fe-pos-search-row {
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px !important;
    gap: 4px !important;
  }

  body.fe-pos-fullscreen #fePosSearchBtn,
  body.fe-pos-fullscreen #fePosVoiceBtn,
  body.fe-pos-fullscreen #fePosScannerBtn {
    min-height: 33px !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 5px !important;
  }

  body.fe-pos-fullscreen #fePosScanner {
    display: none !important;
  }

  body.fe-pos-fullscreen #fePosVoiceBtn img,
  body.fe-pos-fullscreen #fePosScannerBtn img,
  body.fe-pos-fullscreen #fePosSearchBtn img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
  }
}


/* ===== FIX tablet POS: botones laterales verticales como celular ===== */
@media (min-width: 561px) and (max-width: 700px) {
  body.fe-pos-fullscreen.fe-pos-cart-open .fe-pos-sale-panel,
  body.fe-pos-fullscreen .fe-pos-sale-panel {
    grid-template-rows: 28px auto minmax(126px, 1fr) auto 38px !important;
  }

  body.fe-pos-fullscreen .fe-pos-control-area {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    gap: 3px !important;
  }

  body.fe-pos-fullscreen .fe-pos-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 23px !important;
    align-content: stretch !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  body.fe-pos-fullscreen .fe-pos-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 23px !important;
    height: 23px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    padding: 0 2px !important;
    border-radius: 4px !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  body.fe-pos-fullscreen .fe-pos-keypad {
    min-width: 0 !important;
  }

  body.fe-pos-fullscreen .fe-pos-keypad button {
    min-width: 0 !important;
  }
}


/* POS velocidad: loading visible mientras el catálogo responde en dispositivos sin caché */
.fe-pos-loading-products {
  min-height: clamp(180px, 36vh, 320px);
}


/* ===== UX: cargadores para Empresa / Certificado ===== */
.fe-form-card,
.fe-cert-card {
  position: relative;
}

.fe-process-box {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: inherit;
  background: rgba(248, 252, 255, .76);
  backdrop-filter: blur(8px) saturate(130%);
}

.fe-process-box.show {
  display: flex;
}

.fe-process-card {
  width: min(390px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(47,128,237,.18);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
  padding: 20px;
  text-align: center;
}

.fe-process-card .fe-spinner {
  margin: 0 auto 10px;
}

.fe-process-title {
  display: block;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #0f172a;
  margin-bottom: 10px;
}

.fe-process-text {
  display: block;
  color: #64748b;
  font-weight: 800;
  line-height: 1.35;
}

.fe-process-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(47,128,237,.12);
  border: 1px solid rgba(47,128,237,.12);
  margin: 12px 0 10px;
}

.fe-process-bar span {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--accent), var(--mint));
  transition: width .22s ease;
}

.fe-panel-busy > *:not(.fe-process-box) {
  pointer-events: none;
}

.btn.is-loading {
  opacity: .86;
  cursor: wait;
}

@media (max-width: 820px) {
  .fe-process-box {
    padding: 12px;
  }
  .fe-process-card {
    border-radius: 20px;
    padding: 16px;
  }
  .fe-process-title {
    font-size: 19px;
  }
}