:root {
  --primary: #315CFF;
  --pos-primary: #6C63FF;
  --pos-primary-dark: #5148E5;
  --dark: #07111F;
  --success: #00C48C;
  --bg: #F3F6FE;
  --white: #FFFFFF;
  --muted: #6B7280;
  --line: #D9DEEF;
  --ink: #202443;
  --side: #0D1633;
  --side-active: #303A78;
  --soft-panel: #F7F8FE;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
.btn { border-radius: 9px; font-weight: 800; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: #2448D2; --bs-btn-hover-border-color: #2448D2; box-shadow: 0 10px 24px rgba(49, 92, 255, .18); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: #C8D1FF; --bs-btn-hover-bg: #EEF2FF; --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--primary); }
.form-control, .form-select { border-color: #D9E0F0; border-radius: 10px; min-height: 46px; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(49, 92, 255, .12); }
.table { --bs-table-color: var(--ink); --bs-table-border-color: #E7EBF5; }
.table thead th { color: #969ABE; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.table tbody tr { vertical-align: middle; }
.public-body { min-height: 100vh; background: linear-gradient(135deg, #F5F8FF 0%, #FFFFFF 52%, #EAF1FF 100%); }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-page.wide { place-items: start center; }
.auth-card { width: min(100%, 440px); background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 18px 50px rgba(7, 17, 31, .08); }
.register-card { width: min(100%, 980px); }
.auth-logo { height: 44px; margin-bottom: 24px; }
.auth-card h1, .hero-panel h1, .section-title h1 { font-size: 28px; font-weight: 800; margin: 0 0 8px; }
.auth-card p, .hero-panel p { color: var(--muted); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 278px; position: fixed; inset: 0 auto 0 0; background: var(--side); color: var(--white); padding: 16px 8px; }
.sidebar-brand { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 18px; margin-bottom: 16px; }
.sidebar-brand::before { content: ""; width: 28px; height: 20px; display: block; border-top: 3px solid #DDE6FF; border-bottom: 3px solid #DDE6FF; }
.sidebar-brand img { max-width: 166px; max-height: 38px; background: transparent; border-radius: 0; padding: 0; margin: 0; filter: brightness(0) invert(1); object-fit: contain; }
.sidebar-account { margin: 0 0 12px; background: #13256C; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 18px 20px; }
.sidebar-account span { display: block; color: #FFFFFF; font-weight: 850; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-account strong { display: block; color: #FF526B; font-size: 18px; margin-top: 8px; }
.sidebar-account small { color: #B8C3E6; }
.sidebar-nav { display: grid; gap: 6px; }
.sidebar-nav a { display: flex; align-items: center; gap: 14px; color: #D7DEF4; padding: 12px 18px; border-radius: 5px; font-size: 17px; font-weight: 600; }
.sidebar-nav a.active, .sidebar-nav a:hover { background: var(--side-active); color: var(--white); }
.nav-icon { width: 26px; display: inline-grid; place-items: center; color: #E1E8FF; font-size: 20px; }
.app-main { margin-left: 278px; width: calc(100% - 278px); min-height: 100vh; }
.pos-shell .app-main { margin-left: 0; width: 100%; }
.topbar { position: sticky; top: 0; z-index: 10; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(12px); }
.topbar-left { display: flex; align-items: center; gap: 18px; }
.menu-icon { width: 30px; display: grid; gap: 5px; }
.menu-icon span { display: block; height: 3px; border-radius: 999px; background: #2C63D6; }
.menu-icon span:nth-child(2) { width: 22px; }
.breadcrumb-pro { display: flex; align-items: center; gap: 14px; color: #999DC0; font-size: 15px; font-weight: 850; letter-spacing: .02em; }
.breadcrumb-pro a { color: #999DC0; }
.breadcrumb-pro strong { color: #343858; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.balance-pill { color: #2C63D6; background: transparent; border-radius: 999px; padding: 8px 10px; font-size: 20px; font-weight: 850; }
.topbar-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; color: #586189; border-radius: 50%; font-size: 20px; font-weight: 800; }
.topbar-icon:hover { background: #EDF4FF; }
.avatar-pill { width: 44px; height: 44px; flex: 0 0 44px; display: inline-grid; place-items: center; border-radius: 50%; background: #3146A5; color: #FFFFFF; border: 1px solid #D5E2F6; font-size: 16px; font-weight: 850; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.profile-chip { display: flex; align-items: center; gap: 12px; color: #11152B; }
.profile-chip strong { display: block; line-height: 1.1; }
.profile-chip small { display: block; color: #747990; font-weight: 650; text-transform: capitalize; }
.app-content { padding: 54px 32px 92px; }
.pos-body .app-content { padding: 54px 3vw 90px; background: linear-gradient(180deg, #F7FAFF 0%, #EEF3FC 100%); min-height: calc(100vh - 76px); }
.pos-body .topbar-title,
.pos-body .copy-btn { display: none; }
.muted-label { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.hero-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(135deg, var(--primary), #0738B9); color: var(--white); border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.hero-panel .muted-label, .hero-panel p { color: rgba(255,255,255,.78); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dashboard-tabs { display: flex; gap: 34px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.dashboard-tabs a { color: #9498C0; text-transform: uppercase; letter-spacing: .06em; font-weight: 850; padding: 0 0 16px; border-bottom: 4px solid transparent; }
.dashboard-tabs a.active { color: #262A48; border-color: #262A48; }
.dashboard-panel { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 42px rgba(66, 82, 130, .08); margin-bottom: 22px; }
.dashboard-panel header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.dashboard-panel h1 { font-size: 20px; text-transform: uppercase; letter-spacing: .06em; font-weight: 850; margin: 0; }
.dashboard-balance-grid { padding: 28px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.dashboard-balance-grid .kpi-card { background: #F7F8FE; box-shadow: none; border-color: transparent; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.kpi-card, .panel-card, .service-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 18px 42px rgba(66, 82, 130, .06); }
.kpi-card span { color: var(--muted); font-weight: 700; display: block; margin-bottom: 8px; }
.kpi-card strong { font-size: 32px; line-height: 1.1; font-weight: 850; color: #171A36; }
.kpi-card.big { min-height: 150px; display: grid; align-content: center; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-title > div span { color: #969ABE; }
.section-title h1 { color: #242846; text-transform: uppercase; letter-spacing: .04em; font-size: 22px; }
.section-title h2, .panel-card h2 { font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.clabe-card h2 { font-size: 26px; letter-spacing: .02em; margin: 10px 0 16px; word-break: break-word; }
.info-strip { background: #F4F7FF; border: 1px solid #DDE5F7; color: #343858; border-radius: 14px; padding: 16px 18px; font-weight: 650; }
.list-row, .receipt-line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child, .receipt-line:last-child { border-bottom: 0; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.category-pills { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 14px; margin-bottom: 12px; }
.category-pills a { flex: 0 0 auto; border: 1px solid var(--line); background: var(--white); color: var(--dark); border-radius: 999px; padding: 9px 14px; font-weight: 800; box-shadow: 0 6px 18px rgba(7, 17, 31, .04); }
.category-pills a.active, .category-pills a:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.service-card h2 { font-size: 19px; font-weight: 800; margin: 8px 0; }
.service-card p { min-height: 48px; color: var(--muted); }
.service-category { display: inline-flex; border-radius: 999px; background: #EEF4FF; color: var(--primary); padding: 5px 10px; font-size: 12px; font-weight: 800; }
.service-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.summary-box { background: #F8FAFF; border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 6px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; background: var(--primary); }
.status-dot.deposito, .status-dot.devolucion { background: var(--success); }
.status-dot.cargo { background: #FF6B6B; }
.badge-status { background: #EEF4FF; color: var(--dark); border-radius: 999px; padding: 7px 10px; }
.badge-status.completado { background: #DDF8EF; color: #006F50; }
.badge-status.fallido { background: #FFE5E5; color: #B42318; }
.badge-status.pendiente_confirmacion { background: #FFF3CD; color: #8A5A00; }

.receipt { width: min(100%, 680px); margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: 0 18px 42px rgba(66, 82, 130, .08); }
.receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.receipt-head img { height: 42px; }
.receipt-head span { display: block; color: var(--muted); font-size: 13px; text-align: right; }
.receipt-status { text-align: center; padding: 10px; border-radius: 8px; font-weight: 850; background: #EEF4FF; margin-bottom: 12px; }
.receipt-status.completado { background: #DDF8EF; color: #006F50; }
.receipt-line.total { font-size: 20px; font-weight: 850; }
.receipt-note { text-align: center; color: var(--muted); margin: 22px 0 0; }
.mobile-nav { display: none; }
.pos-categories { background: var(--white); border: 1px solid #DFE7F6; border-radius: 10px; padding: 30px 7vw; box-shadow: 0 22px 50px rgba(91, 110, 160, .12); margin-bottom: 28px; }
.pos-pills { justify-content: center; margin: 0; padding: 0; gap: 8px; }
.pos-pills a { color: var(--pos-primary); border: 2px solid var(--pos-primary); border-radius: 8px; padding: 14px 28px; font-size: 17px; background: var(--white); box-shadow: none; }
.pos-pills a.active, .pos-pills a:hover { background: var(--pos-primary); color: var(--white); border-color: var(--pos-primary); }
.pos-search { display: flex; gap: 12px; margin: 0 0 28px; }
.pos-search .form-control { height: 52px; border-radius: 12px; border-color: #D9E2F2; }
.pos-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, .95fr); gap: 36px; align-items: start; }
.pos-products { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 42px 34px; }
.pos-product-card { min-height: 126px; display: grid; align-content: center; justify-items: center; text-align: center; gap: 8px; color: var(--pos-primary); background: var(--white); border: 1px solid #E0E7F4; border-radius: 8px; padding: 18px 20px; box-shadow: 0 12px 0 #FFFFFF, 0 22px 45px rgba(80, 98, 150, .11); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pos-product-card:hover, .pos-product-card.active { color: var(--pos-primary-dark); border-color: var(--pos-primary); transform: translateY(-2px); box-shadow: 0 12px 0 #FFFFFF, 0 28px 55px rgba(80, 98, 150, .16); }
.pos-product-card strong { font-size: clamp(24px, 2vw, 34px); line-height: 1.08; font-weight: 850; }
.pos-product-card span { color: #8E91B4; font-size: 13px; font-weight: 700; }
.pos-product-panel { min-height: 280px; position: sticky; top: 104px; background: var(--white); border: 1px solid #E0E7F4; border-radius: 10px; padding: 30px; box-shadow: 0 24px 55px rgba(80, 98, 150, .12); }
.choose-product { min-height: 120px; display: grid; place-items: center; text-align: center; font-size: clamp(34px, 3vw, 54px); color: #252943; font-weight: 400; }
.product-brand { color: var(--pos-primary); font-weight: 850; font-size: 22px; margin-bottom: 4px; }
.pos-product-panel h1 { font-size: 28px; font-weight: 850; margin-bottom: 8px; }
.pos-product-panel p { color: #7A809E; }
.pos-price-box { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #F6F8FD; border-radius: 12px; padding: 14px 16px; color: #7A809E; font-weight: 750; }
.pos-price-box strong { color: #242846; }
.pos-page-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.pos-page-title span { color: var(--pos-primary); font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.pos-page-title h1 { margin: 0; font-size: 44px; font-weight: 850; }
.pos-form-card { max-width: 980px; margin: 0 auto; border-radius: 16px; }
.empty-panel { grid-column: 1 / -1; background: var(--white); border: 1px solid #E0E7F4; border-radius: 12px; padding: 28px; color: #7A809E; text-align: center; }
.chat-bubble { position: fixed; right: 48px; bottom: 42px; z-index: 30; background: var(--white); color: #161A2F; border-radius: 16px; padding: 16px 24px; font-size: 20px; box-shadow: 0 12px 28px rgba(25, 36, 70, .18); }
.chat-bubble::after { content: ""; position: absolute; right: -70px; top: 50%; width: 60px; height: 60px; transform: translateY(-50%); border-radius: 50%; background: #E43062; box-shadow: 0 10px 24px rgba(228, 48, 98, .35); }
.install-heading { font-size: 18px; font-weight: 850; color: var(--primary); margin: 18px 0 0; }

@media (max-width: 992px) {
  .sidebar { display: none; }
  .app-main { margin-left: 0; width: 100%; }
  .topbar { padding: 12px 16px; height: auto; align-items: center; }
  .app-content { padding: 18px; padding-bottom: 86px; }
  .hero-panel, .section-title { align-items: flex-start; flex-direction: column; }
  .kpi-grid, .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pos-categories { padding: 22px; }
  .pos-pills { justify-content: flex-start; }
  .pos-layout { grid-template-columns: 1fr; }
  .pos-products { grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 20px; }
  .pos-product-panel { position: static; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; background: var(--side); border-radius: 14px; padding: 8px; box-shadow: 0 18px 45px rgba(7,17,31,.28); }
  .mobile-nav a { color: #D7E1F5; text-align: center; font-size: 12px; font-weight: 800; padding: 10px 4px; border-radius: 9px; }
  .mobile-nav a.active { background: var(--primary); color: var(--white); }
}

@media (max-width: 640px) {
  .auth-card { padding: 22px; border-radius: 12px; }
  .topbar { display: flex; }
  .breadcrumb-pro { font-size: 12px; gap: 8px; }
  .balance-pill { display: none; }
  .profile-chip div, .topbar-icon, .copy-btn { display: none; }
  .topbar-actions { justify-content: flex-start; margin-top: 10px; }
  .kpi-grid, .service-grid, .dashboard-balance-grid { grid-template-columns: 1fr; }
  .dashboard-panel header { display: block; }
  .dashboard-panel header .hero-actions { margin-top: 14px; }
  .pos-body .app-content { padding: 22px 14px 86px; }
  .pos-search { flex-direction: column; }
  .pos-products { grid-template-columns: 1fr; }
  .pos-product-card strong { font-size: 26px; }
  .pos-page-title { display: block; }
  .pos-page-title h1 { font-size: 34px; margin-bottom: 12px; }
  .chat-bubble { display: none; }
  .list-row, .receipt-line { display: block; }
  .receipt-head { display: block; text-align: center; }
  .receipt-head span { text-align: center; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .mobile-nav, .no-print { display: none !important; }
  .app-main { margin: 0; width: 100%; }
  .app-content { padding: 0; }
  .receipt { box-shadow: none; border: 0; width: 100%; }
}