/* ERPReyna Vendedor - Dark Theme (from boceto) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  --primary: #E8734A;
  --primary-dark: #C75530;
  --bg-app: #141824;
  --bg-card: #1E2433;
  --bg-surface: #262D40;
  --bg-hover: #252B3D;
  --t-main: #F0F0F0;
  --t-sec: #A8B8CB;
  --t-muted: #8899AB;
  --border-c: rgba(255,255,255,0.08);
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; margin:0; padding:0; background:#0a0e17; overflow:hidden; height:100dvh; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
.fill-1 { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

/* Phone Frame */
.phone-wrapper { display:flex; align-items:center; justify-content:center; width:100%; height:100dvh; position:relative; z-index:1; }
.phone-frame { width:390px; height:844px; border-radius:50px; border:8px solid #2a2a3e; box-shadow:0 0 0 2px #444,0 30px 80px rgba(0,0,0,0.5),inset 0 0 0 2px #1a1a2e; overflow:hidden; position:relative; background:var(--bg-app); }
.phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:30px; background:#2a2a3e; border-radius:0 0 20px 20px; z-index:100; }
.phone-notch::after { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:60px; height:6px; background:#444; border-radius:3px; }
.phone-home-indicator { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:130px; height:5px; background:rgba(255,255,255,.15); border-radius:3px; z-index:100; }
.phone-screen { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.phone-screen::-webkit-scrollbar { display:none; }
.phone-screen { -ms-overflow-style:none; scrollbar-width:none; }

/* Desktop alert */
.desktop-alert { display:none; background:linear-gradient(135deg,#E8734A 0%,#C75530 100%); color:white; text-align:center; padding:14px 20px; font-size:14px; font-weight:500; box-shadow:0 4px 20px rgba(0,0,0,.3); position:relative; z-index:9999; flex-shrink:0; }
.desktop-alert .close-alert { position:absolute; right:16px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.8; background:none; border:none; color:white; font-size:20px; }

/* Desktop bg pattern */
.desktop-bg-pattern { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* Mobile full-screen */
@media (max-width:480px) {
  body { background:var(--bg-app); overflow:auto; }
  .phone-wrapper { display:contents !important; }
  .phone-frame { width:100% !important; height:100dvh !important; border-radius:0 !important; border:none !important; box-shadow:none !important; }
  .phone-notch,.phone-home-indicator { display:none !important; }
  .desktop-alert,.desktop-bg-pattern { display:none !important; }
}
@media (min-width:481px) {
  body { display:flex; flex-direction:column; }
  .desktop-alert { display:flex; align-items:center; justify-content:center; }
  .phone-wrapper { flex:1; min-height:0; }
}

/* Top Bar / Header */
.v-header { position:sticky; top:0; z-index:50; background:var(--bg-card); border-bottom:1px solid var(--border-c); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.v-header .logo-box { width:32px; height:32px; background:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.v-header .logo-box span { color:white; font-weight:800; font-size:12px; }
.v-header .vendor-info p:first-child { color:var(--t-main); font-size:14px; font-weight:700; line-height:1.2; }
.v-header .vendor-info p:last-child { color:var(--t-muted); font-size:10px; }
.v-header .header-right { display:flex; align-items:center; gap:8px; }
.v-header .header-right .clock { color:var(--t-sec); font-size:12px; font-weight:500; }

/* Buttons */
.btn-primary { background:var(--primary); color:white; border:none; border-radius:12px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-primary:active { transform:scale(0.98); }
.btn-success { background:var(--success); color:white; border:none; border-radius:12px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.btn-success:hover { background:#059669; }
.btn-success:active { transform:scale(0.98); }
.btn-ghost { background:none; border:1px solid var(--border-c); color:var(--t-sec); border-radius:12px; cursor:pointer; transition:all 0.2s; }
.btn-ghost:active { transform:scale(0.98); }
.btn-icon { background:none; border:none; color:var(--t-sec); cursor:pointer; padding:8px; border-radius:50%; }
.btn-icon:hover { color:var(--t-main); }

/* Form elements dark theme */
.v-input { width:100%; background:var(--bg-surface); border:1px solid var(--border-c); border-radius:12px; padding:12px 16px; color:var(--t-main); font-size:14px; font-weight:500; outline:none; transition:border-color 0.2s; }
.v-input:focus { border-color:var(--primary); }
.v-input::placeholder { color:var(--t-muted); }
.v-select { width:100%; background:var(--bg-surface); border:1px solid var(--border-c); border-radius:8px; padding:8px 12px; color:var(--t-main); font-size:12px; font-weight:500; outline:none; }
.v-select:focus { border-color:var(--primary); }

/* Cards */
.v-card { background:var(--bg-card); border:1px solid var(--border-c); border-radius:12px; overflow:hidden; }

/* Search results */
.search-results { background:var(--bg-card); border:1px solid var(--border-c); border-radius:12px; max-height:192px; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.search-result-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border-c); cursor:pointer; transition:background 0.15s; }
.search-result-item:hover { background:var(--bg-hover); }
.search-result-item:active { background:var(--bg-surface); }
.search-result-item .prod-name { color:var(--t-main); font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result-item .prod-meta { color:var(--t-muted); font-size:11px; }
.search-result-item .prod-price { color:var(--primary); font-size:14px; font-weight:700; white-space:nowrap; margin-left:8px; }
.stock-local { color:var(--success); font-weight:600; }
.stock-deposito { color:#3B82F6; font-weight:600; }

/* Cart table */
.cart-table { width:100%; font-size:12px; border-collapse:collapse; }
.cart-table thead tr { background:var(--bg-surface); }
.cart-table th { color:var(--t-muted); font-weight:600; padding:6px 4px; text-transform:uppercase; font-size:10px; letter-spacing:0.5px; }
.cart-table td { padding:6px 4px; border-bottom:1px solid var(--border-c); vertical-align:top; }
.cart-table .item-desc { color:var(--t-main); font-weight:600; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-table .item-code { color:var(--t-muted); font-size:9px; }
.cart-table .item-price { color:var(--t-sec); font-size:11px; text-align:right; white-space:nowrap; }
.cart-table .item-subtotal { color:var(--primary); font-weight:700; font-size:11px; text-align:right; white-space:nowrap; }
.cart-table .v-select { border-radius:4px; }

/* Qty controls */
.qty-btn-sm { width:24px; height:24px; background:var(--bg-surface); border:1px solid var(--border-c); border-radius:4px; color:var(--t-main); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.qty-btn-sm:active { background:var(--primary); color:white; }

.qty-btn-lg { width:56px; height:56px; background:var(--bg-surface); border:1px solid var(--border-c); border-radius:12px; color:var(--t-main); font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; }
.qty-btn-lg:active { background:var(--primary); color:white; }

/* Total bar */
.total-bar { display:flex; align-items:center; justify-content:space-between; background:var(--bg-card); border:1px solid var(--border-c); border-radius:12px; padding:12px 16px; }
.total-bar .label { color:var(--t-sec); font-size:14px; font-weight:600; }
.total-bar .amount { color:var(--primary); font-size:20px; font-weight:800; }

/* Client card */
.client-option-card { background:var(--bg-card); border:1px solid var(--border-c); border-radius:12px; padding:16px; }
.client-option-card .icon-circle { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.client-option-card h3 { color:var(--t-main); font-size:16px; font-weight:700; }
.client-option-card p { color:var(--t-muted); font-size:12px; }

.client-result { display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--bg-surface); border:1px solid var(--border-c); border-radius:8px; padding:10px 12px; cursor:pointer; transition:all 0.15s; margin-bottom:4px; }
.client-result:hover { background:var(--bg-hover); }
.client-result:active { transform:scale(0.98); }
.client-result .avatar { width:32px; height:32px; background:rgba(232,115,74,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:12px; font-weight:700; }

/* Confirm screen */
.confirm-item-row { display:flex; justify-content:space-between; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border-c); }
.confirm-item-row .item-name { color:var(--t-main); font-weight:600; font-size:14px; }
.confirm-item-row .item-detail { color:var(--t-muted); font-size:12px; margin-top:2px; }
.confirm-item-row .item-subtotal { color:var(--t-main); font-weight:600; font-size:14px; white-space:nowrap; }

/* Success overlay */
.success-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:200; flex-direction:column; }
.success-overlay.show { display:flex; }
.success-check { width:80px; height:80px; background:rgba(16,185,129,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

/* Splash animation */
@keyframes splashPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* Tab active indicator */
.tab-active { border-bottom:3px solid var(--primary); color:var(--primary); font-weight:700; }
.tab-inactive { border-bottom:3px solid transparent; color:var(--t-muted); }

/* Camera viewport */
.camera-viewport { background:#000; position:relative; overflow:hidden; }
.barcode-guide { border:2px solid rgba(232,115,74,0.6); border-radius:8px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:85%; height:30%; box-shadow:0 0 0 9999px rgba(0,0,0,0.65); z-index:10; }
.scan-line { position:absolute; top:0; left:5%; width:90%; height:2px; background:linear-gradient(90deg,transparent,#E8734A,transparent); animation:scanMove 2s ease-in-out infinite; z-index:11; }
@keyframes scanMove { 0%,100%{top:10%} 50%{top:90%} }

/* Custom scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Info box */
.info-box { display:flex; align-items:flex-start; gap:12px; background:var(--bg-card); border:1px solid var(--border-c); border-radius:12px; padding:16px; }
.info-box .material-symbols-outlined { color:var(--primary); flex-shrink:0; margin-top:2px; }
.info-box p { color:var(--t-sec); font-size:12px; line-height:1.5; }

/* Utility */
.text-primary { color:var(--primary); }
.text-main { color:var(--t-main); }
.text-sec { color:var(--t-sec); }
.text-muted { color:var(--t-muted); }
.text-success { color:var(--success); }
.text-danger { color:var(--danger); }
.font-bold { font-weight:700; }
.font-black { font-weight:800; }
.uppercase { text-transform:uppercase; }
.tracking-wider { letter-spacing:0.05em; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }