/* ============================================================
   components.css — Botones, Cards, Forms, Skeletons, Modales
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Reset base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); transition: background var(--transition), color var(--transition); }
img  { max-width: 100%; }
a    { color: var(--primary); text-decoration: none; }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  font-family: var(--font); font-size: .9rem; font-weight: 600;
  transition: all var(--transition); line-height: 1;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.btn:active { transform: scale(0.96); }
.btn-primary  { background: var(--primary);  color: #fff; }
.btn-primary:hover  { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(37,99,235,.4); }
.btn-secondary{ background: var(--secondary); color: #fff; }
.btn-secondary:hover{ background: var(--secondary-light); }
.btn-ghost    { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-ghost:hover    { background: var(--primary); color: #fff; }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-success  { background: var(--success); color: #fff; }
.btn-icon     { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.btn-lg       { padding: 14px 28px; font-size: 1rem; }
.btn-sm       { padding: 6px 12px; font-size: .8rem; }
.btn-block    { width: 100%; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem; animation: fadeIn .3s ease;
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: .75rem; }
.card-title  { font-size: 1rem; font-weight: 600; color: var(--text); }

/* KPI Cards */
.kpi-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
  animation: slideUp .35s ease;
}
.kpi-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.kpi-label{ font-size:.78rem; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.kpi-value{ font-size:1.6rem; font-weight:700; color:var(--text); line-height:1.1; }
.kpi-sub  { font-size:.75rem; color:var(--text-muted); }

/* ── Forms ───────────────────────────────────────────────── */
.form-group  { display:flex; flex-direction:column; gap:5px; }
.form-label  { font-size:.85rem; font-weight:600; color:var(--text-muted); }
.form-control {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-family: var(--font); font-size: .95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.form-control::placeholder { color: var(--text-muted); opacity: .7; }
.form-error  { font-size:.78rem; color: var(--danger); margin-top:2px; }

/* Search Bar */
.search-bar { position:relative; }
.search-bar input  { padding-left: 40px; }
.search-bar .icon  { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1rem; }

/* ── Skeleton Screens ────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
.skel-text  { height:14px; margin-bottom:8px; }
.skel-title { height:20px; width:60%; margin-bottom:12px; }
.skel-card  { height:80px; border-radius:var(--radius); margin-bottom:12px; }
.skel-circle{ border-radius:50%; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:20px; font-size:.72rem; font-weight:600; }
.badge-success { background:rgba(16,185,129,.15); color:var(--success); }
.badge-warning { background:rgba(245,158,11,.15); color:var(--warning); }
.badge-danger  { background:rgba(239,68,68,.15);  color:var(--danger);  }
.badge-info    { background:rgba(59,130,246,.15);  color:var(--info);    }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.88rem; display:flex; gap:.5rem; align-items:flex-start; animation:fadeIn .3s ease; }
.alert-success { background:rgba(16,185,129,.12); color:#065F46; border-left:3px solid var(--success); }
.alert-warning { background:rgba(245,158,11,.12); color:#92400E; border-left:3px solid var(--warning); }
.alert-danger  { background:rgba(239,68,68,.12); color:#991B1B;  border-left:3px solid var(--danger); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  display: none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  align-items:flex-end; justify-content:center; backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
.modal {
  background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  padding:1.5rem; animation:slideUp .25s ease;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.modal-title  { font-size:1.1rem; font-weight:700; }
.modal-close  { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:1.5rem; line-height:1; padding:4px; }
.modal-footer { display:flex; gap:.75rem; margin-top:1.25rem; }
.modal-footer .btn { flex:1; }

/* ── Toast ───────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:calc(var(--nav-height) + 1rem); left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; }
.toast { background:var(--gray-800); color:#fff; padding:.65rem 1.25rem; border-radius:24px; font-size:.88rem; font-weight:500; white-space:nowrap; animation:slideUp .25s ease; box-shadow:var(--shadow-lg); }
.toast.success { background:#065F46; }
.toast.error   { background:#991B1B; }

/* ── Item List ───────────────────────────────────────────── */
.list-item {
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem;
  background:var(--surface); border-bottom:1px solid var(--border);
  transition:background var(--transition);
}
.list-item:last-child { border-bottom:none; }
.list-item:active { background:var(--surface2); }
.list-item-img { width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; background:var(--surface2); flex-shrink:0; }
.list-item-body { flex:1; min-width:0; }
.list-item-title{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item-sub  { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
.list-item-end  { text-align:right; flex-shrink:0; }

/* ── Carrito / POS ───────────────────────────────────────── */
.cart-qty-badge { background:var(--danger); color:#fff; border-radius:50%; width:18px; height:18px; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; position:absolute; top:-4px; right:-4px; }
.product-grid   { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.product-card   {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; cursor:pointer; transition:transform var(--transition), box-shadow var(--transition);
  animation:scaleIn .25s ease;
}
.product-card:active { transform:scale(.97); }
.product-card img   { width:100%; height:100px; object-fit:cover; background:var(--surface2); }
.product-card-body  { padding:.6rem .75rem; }
.product-card-name  { font-size:.82rem; font-weight:600; line-height:1.2; margin-bottom:4px; }
.product-card-price { font-size:1rem; font-weight:700; color:var(--primary); }
.product-card-stock { font-size:.72rem; color:var(--text-muted); }

/* Indicador offline */
.offline-indicator { background:var(--warning); color:#fff; font-size:.75rem; font-weight:600; text-align:center; padding:4px; display:none; }
body.is-offline .offline-indicator { display:block; }

/* Chip seleccionado */
.chip { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:20px; font-size:.8rem; font-weight:500; border:1.5px solid var(--border); cursor:pointer; transition:all var(--transition); }
.chip.active, .chip:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Divider */
.divider { border:none; border-top:1px solid var(--border); margin:.75rem 0; }

/* Floating Action Button */
.fab {
  position:fixed; bottom:calc(var(--nav-height) + 16px); right:1rem;
  width:56px; height:56px; border-radius:50%; background:var(--primary); color:#fff;
  border:none; cursor:pointer; box-shadow:0 4px 20px rgba(37,99,235,.5);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  transition:all var(--transition); z-index:100;
}
.fab:hover   { transform:scale(1.08); }
.fab:active  { transform:scale(.95); }