/* ============================================================
   FerreTech - tema profesional (Bootstrap 5.3 + ajustes propios)
   ============================================================ */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../lib/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../lib/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ft-primary: #2563eb;
  --ft-primary-dark: #1d4ed8;
  --ft-primary-soft: #eff4ff;
  --ft-accent: #f59e0b;
  --ft-ink: #0f172a;
  --ft-muted: #64748b;
  --ft-line: #e2e8f0;
  --ft-bg: #f4f6fb;
  --ft-card: #ffffff;
  --ft-sidebar: #0f172a;
  --ft-sidebar-2: #1e293b;
  --ft-radius: 14px;
  --ft-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
  --ft-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ft-safe-top: env(safe-area-inset-top, 0px);
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-font-family: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--ft-bg);
  --bs-body-color: var(--ft-ink);
  --bs-border-color: var(--ft-line);
  --bs-link-color: var(--ft-primary);
  --bs-link-hover-color: var(--ft-primary-dark);
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--ft-bg); font-feature-settings: "cv11", "ss01"; -webkit-tap-highlight-color: transparent; }
.tabular, .money, td.num, th.num { font-variant-numeric: tabular-nums; }
.money { white-space: nowrap; }
.text-muted, .text-secondary { color: var(--ft-muted) !important; }

/* ---------- Botones y formularios ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .5rem 1rem; }
.btn-sm { padding: .3rem .65rem; border-radius: 8px; }
.btn-lg { padding: .75rem 1.25rem; border-radius: 12px; }
.btn-primary { --bs-btn-bg: var(--ft-primary); --bs-btn-border-color: var(--ft-primary); --bs-btn-hover-bg: var(--ft-primary-dark); --bs-btn-hover-border-color: var(--ft-primary-dark); --bs-btn-active-bg: var(--ft-primary-dark); --bs-btn-active-border-color: var(--ft-primary-dark); }
.btn-soft { background: var(--ft-primary-soft); color: var(--ft-primary); border: 0; }
.btn-soft:hover { background: #dbe7ff; color: var(--ft-primary-dark); }
.form-control, .form-select { border-radius: 10px; border-color: #cbd5e1; padding: .55rem .8rem; background-color: #fff; }
.form-control:disabled, .form-select:disabled { background-color: #f1f5f9; }
.form-control:focus, .form-select:focus { border-color: var(--ft-primary); box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .16); }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; margin-bottom: .3rem; }
.input-group-text { border-radius: 10px; background: #f8fafc; border-color: #cbd5e1; }
.form-control-lg, .form-select-lg { border-radius: 12px; }
@media (max-width: 991.98px) {
  .form-control, .form-select { font-size: 16px; } /* evita el zoom automático en iPhone */
  .btn { min-height: 42px; }
}
.field-validation-error, .invalid-feedback.d-block { color: #dc2626; font-size: .82rem; margin-top: .25rem; display: block; }
.input-validation-error { border-color: #dc2626 !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Estructura ---------- */
.app-shell { min-height: 100vh; }
.app-sidebar {
  background: linear-gradient(180deg, var(--ft-sidebar), #0b1222);
  color: #cbd5e1;
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-bg: transparent;
  --bs-offcanvas-color: #cbd5e1;
}
@media (min-width: 992px) {
  .app-sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 1030; overflow-y: auto; }
  .app-main { margin-left: 260px; }
}
.brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; text-decoration: none; color: #fff; }
.brand-logo { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #2563eb, #1d4ed8); display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .45); flex-shrink: 0; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { font-size: .72rem; color: #94a3b8; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #64748b; padding: 1rem 1.4rem .35rem; font-weight: 700; }
.side-link { display: flex; align-items: center; gap: .8rem; padding: .62rem 1.1rem; margin: .1rem .75rem; border-radius: 10px; color: #cbd5e1; text-decoration: none; font-weight: 500; font-size: .93rem; transition: background .15s, color .15s; }
.side-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; color: #94a3b8; }
.side-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side-link.active { background: var(--ft-primary); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .35); }
.side-link.active i { color: #fff; }
.side-user { margin: 1rem .75rem 1.25rem; padding: .85rem; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.side-user .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ft-accent); color: #1f2937; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }

.topbar { position: sticky; top: 0; z-index: 1020; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ft-line); padding: calc(.6rem + var(--ft-safe-top)) 1rem .6rem; display: flex; align-items: center; gap: .75rem; }
.topbar .title { font-weight: 700; font-size: 1.02rem; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page { padding: 1.25rem 1rem calc(5.5rem + var(--ft-safe-bottom)); max-width: 1400px; margin: 0 auto; }
@media (min-width: 992px) { .page { padding: 1.75rem 2rem 2.5rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.page-head .sub { color: var(--ft-muted); font-size: .9rem; margin-top: .15rem; }

/* ---------- Tarjetas ---------- */
.card-ft { background: var(--ft-card); border: 1px solid var(--ft-line); border-radius: var(--ft-radius); box-shadow: var(--ft-shadow); }
.card-ft > .card-head { padding: .95rem 1.15rem; border-bottom: 1px solid var(--ft-line); display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; }
.card-ft > .card-body-ft { padding: 1.15rem; }
.stat { padding: 1.1rem 1.2rem; display: flex; gap: .9rem; align-items: center; height: 100%; }
.stat .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; }
.stat .lbl { font-size: .78rem; color: var(--ft-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .val { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stat .hint { font-size: .78rem; color: var(--ft-muted); }
.ico-blue { background: #e0ebff; color: #1d4ed8; }
.ico-green { background: #dcfce7; color: #15803d; }
.ico-amber { background: #fef3c7; color: #b45309; }
.ico-red { background: #fee2e2; color: #b91c1c; }
.ico-violet { background: #ede9fe; color: #6d28d9; }
.ico-slate { background: #e2e8f0; color: #334155; }

/* ---------- Tablas ---------- */
.table-ft { margin: 0; --bs-table-bg: transparent; }
.table-ft thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ft-muted); font-weight: 700; background: #f8fafc; border-bottom: 1px solid var(--ft-line); padding: .75rem 1rem; white-space: nowrap; }
.table-ft tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: #eef2f7; }
.table-ft tbody tr:hover { background: #fafbff; }
.table-ft .num { text-align: right; }
.table-ft tfoot td { padding: .8rem 1rem; vertical-align: middle; background: #f8fafc; border-top: 1px solid var(--ft-line); border-bottom: 0; }
.table-responsive.rounded-bottom { border-radius: 0 0 var(--ft-radius) var(--ft-radius); }

/* En celular las tablas pasan a tarjetas apiladas */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: .85rem 1rem; border-bottom: 1px solid var(--ft-line); position: relative; }
  .table-stack tbody tr:hover { background: transparent; }
  .table-stack tfoot td { background: transparent; }
  .table-stack td.vacio { display: none; }
  .table-stack tfoot tr { background: #f8fafc; }
  .table-stack td { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0 !important; border: 0 !important; text-align: right; }
  .table-stack td::before { content: attr(data-label); color: var(--ft-muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex-shrink: 0; padding-top: .1rem; }
  .table-stack td.titulo { font-weight: 700; font-size: 1rem; text-align: left; justify-content: flex-start; padding-bottom: .35rem !important; }
  .table-stack td.titulo::before { display: none; }
  .table-stack td.acciones { justify-content: flex-end; padding-top: .5rem !important; flex-wrap: wrap; }
  .table-stack td.acciones::before { display: none; }
  .table-stack td.num { text-align: right; }
}

/* ---------- Insignias ---------- */
.badge-soft { padding: .35em .7em; border-radius: 999px; font-weight: 600; font-size: .74rem; }
.b-green { background: #dcfce7; color: #166534; }
.b-red { background: #fee2e2; color: #991b1b; }
.b-amber { background: #fef3c7; color: #92400e; }
.b-blue { background: #dbeafe; color: #1e40af; }
.b-slate { background: #e2e8f0; color: #334155; }

/* ---------- Filtros ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.filters .grow { flex: 1 1 220px; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--ft-line); background: #fff; color: #334155; font-size: .84rem; font-weight: 600; text-decoration: none; }
.chip:hover { border-color: var(--ft-primary); color: var(--ft-primary); }
.chip.active { background: var(--ft-primary); border-color: var(--ft-primary); color: #fff; }

/* ---------- Paginación ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.15rem; border-top: 1px solid var(--ft-line); flex-wrap: wrap; font-size: .88rem; color: var(--ft-muted); }

/* ---------- Navegación inferior (celular) ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: #fff; border-top: 1px solid var(--ft-line); display: grid; grid-template-columns: repeat(5, 1fr); padding: .3rem .25rem calc(.3rem + var(--ft-safe-bottom)); box-shadow: 0 -6px 20px rgba(15, 23, 42, .06); }
.bottom-nav a, .bottom-nav button { border: 0; background: none; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .1rem; color: var(--ft-muted); font-size: .68rem; font-weight: 600; padding: .35rem 0; }
.bottom-nav i { font-size: 1.3rem; line-height: 1; }
.bottom-nav .active { color: var(--ft-primary); }
.bottom-nav .fab { position: relative; }
.bottom-nav .fab span.circle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; display: grid; place-items: center; margin-top: -26px; box-shadow: 0 8px 20px rgba(37, 99, 235, .45); border: 4px solid var(--ft-bg); }
.bottom-nav .fab i { font-size: 1.5rem; }
.bottom-nav .fab small { margin-top: -.05rem; }

/* ---------- Punto de venta ---------- */
.pos-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .pos-grid { grid-template-columns: minmax(0, 1.55fr) minmax(380px, 1fr); align-items: start; } .pos-side { position: sticky; top: 1rem; } }
.pos-search { position: relative; }
.pos-results { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin-top: .35rem; background: #fff; border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 23, 42, .18); max-height: 58vh; overflow-y: auto; }
.pos-result { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem .95rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.pos-result:last-child { border-bottom: 0; }
.pos-result:hover, .pos-result.sel { background: var(--ft-primary-soft); }
.pos-result.sin-stock { opacity: .55; }
.pos-result .nm { font-weight: 600; }
.pos-result .cd { font-size: .78rem; color: var(--ft-muted); }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid #eef2f7; }
.cart-line .nm { font-weight: 600; line-height: 1.25; }
.cart-line .meta { font-size: .78rem; color: var(--ft-muted); }
.qty { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #fff; }
.qty button { border: 0; background: #f8fafc; width: 36px; height: 36px; font-size: 1.1rem; line-height: 1; color: #334155; }
.qty button:active { background: #e2e8f0; }
.qty input { width: 52px; height: 36px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; background: var(--ft-primary-soft); }
.totals .row-t { display: flex; justify-content: space-between; padding: .3rem 0; color: #475569; }
.totals .grand { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--ft-ink); padding-top: .55rem; margin-top: .35rem; border-top: 2px dashed var(--ft-line); }
.pay-opt { display: flex; gap: .5rem; }
.pay-opt input { display: none; }
.pay-opt label { flex: 1; text-align: center; padding: .6rem .3rem; border: 1.5px solid #cbd5e1; border-radius: 10px; font-weight: 600; font-size: .86rem; cursor: pointer; background: #fff; }
.pay-opt input:checked + label { border-color: var(--ft-primary); background: var(--ft-primary-soft); color: var(--ft-primary-dark); }
.change-box { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 12px; padding: .65rem .9rem; display: flex; justify-content: space-between; font-weight: 700; }
.change-box.falta { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.empty { text-align: center; color: var(--ft-muted); padding: 2.2rem 1rem; }
.empty i { font-size: 2.4rem; display: block; margin-bottom: .4rem; opacity: .5; }
.pos-mobile-bar { display: none; }
@media (max-width: 1099.98px) {
  .pos-mobile-bar { display: flex; position: fixed; left: .75rem; right: .75rem; bottom: calc(4.9rem + var(--ft-safe-bottom)); z-index: 1035; background: var(--ft-ink); color: #fff; border-radius: 14px; padding: .65rem .9rem; align-items: center; justify-content: space-between; box-shadow: 0 10px 30px rgba(15, 23, 42, .35); }
  .pos-mobile-bar .t { font-size: 1.2rem; font-weight: 800; }
  .pos-mobile-bar.d-none { display: none !important; }
}

/* ---------- Acceso ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(1200px 600px at 10% -10%, #1e3a8a 0, transparent 60%), radial-gradient(900px 500px at 100% 110%, #1d4ed8 0, transparent 55%), #0b1222; }
.login-card { width: 100%; max-width: 410px; background: #fff; border-radius: 20px; padding: 2rem 1.75rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.login-card .brand-logo { width: 54px; height: 54px; font-size: 1.6rem; margin: 0 auto 1rem; border-radius: 15px; }
.code-input { font-size: 1.8rem; letter-spacing: .5em; text-align: center; font-weight: 800; }

/* ---------- Otros ---------- */
.toast-wrap { z-index: 2000; }
.scanner-view { width: 100%; min-height: 260px; background: #000; border-radius: 12px; overflow: hidden; position: relative; }
.scanner-view video { width: 100%; display: block; }
.scan-line { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: rgba(239, 68, 68, .85); box-shadow: 0 0 10px rgba(239, 68, 68, .9); animation: scan 2s ease-in-out infinite; pointer-events: none; }
@keyframes scan { 0%, 100% { top: 30%; } 50% { top: 70%; } }
.install-banner { display: none; }
.install-banner.show { display: flex; }
.chart-box { position: relative; height: 260px; }
.offline-pill { display: none; background: #fef3c7; color: #92400e; font-weight: 600; font-size: .82rem; text-align: center; padding: .35rem; }
body.is-offline .offline-pill { display: block; }
.sticky-actions { position: sticky; bottom: 0; background: rgba(244, 246, 251, .95); backdrop-filter: blur(6px); padding: .75rem 0; }
.kbd { font-size: .72rem; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 5px; padding: 0 .35rem; color: #475569; background: #fff; }
.swal2-popup { border-radius: 16px !important; font-family: var(--bs-body-font-family) !important; }

/* ---------- Impresión (ticket y documentos) ---------- */
.print-doc { background: #fff; color: #000; }
@media print {
  .no-print, .app-sidebar, .topbar, .bottom-nav, .pos-mobile-bar { display: none !important; }
  .app-main { margin: 0 !important; }
  .page { padding: 0 !important; }
  body { background: #fff !important; }
}
.es-app .ocultar-en-app { display: none !important; }

/* Selector de tipo de precio en el carrito */
.cart-line select[data-tipo] { min-width: 7.5rem; padding-right: 2rem; padding-top: .1rem; padding-bottom: .1rem; height: auto; line-height: 1.4; }

/* Tarjetas de resumen en pantallas pequeñas: icono arriba, cifras sin recortar */
.stat > div:last-child { min-width: 0; }
.stat .val { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .stat { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem; }
  .stat .ico { width: 38px; height: 38px; font-size: 1.1rem; }
  .stat .val { font-size: 1.15rem; }
  .stat .lbl { font-size: .7rem; }
}

/* Contador de ventas guardadas sin conexión */
.ft-sync { white-space: nowrap; font-weight: 600; }
.ft-sync.subiendo i { animation: ft-giro 1s linear infinite; }
@keyframes ft-giro { 50% { transform: translateY(-3px); } }
.aviso-local { display: none; }
.aviso-local.show { display: block; }