:root{
  --bg:#0b1220;
  --panel:#121b2e;
  --panel2:#0f1728;
  --border:rgba(255,255,255,.08);
  --text:#e9eefc;
  --muted:rgba(233,238,252,.7);
  --accent:#4aa3ff;
  --ok:#2ecc71;
  --err:#ff5c5c;
  --shadow:0 10px 35px rgba(0,0,0,.35);
  --radius:14px;
  --radius2:18px;
  --gap:14px;
  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --border:rgba(0,0,0,.08);
  --text:#101827;
  --muted:rgba(16,24,39,.65);
  --accent:#1f7ae0;
  --shadow:0 10px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}

html, body{
  min-height:100%;
}

body{
  margin:0;
  font-family:var(--font);
  background:linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 70%, #000 30%));
  color:var(--text);
}

a{color:inherit}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:18px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.brand__title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
}

.brand__sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.userpill{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--panel2) 92%, transparent);
}

.footer{
  padding:22px 18px;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
}

.card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel2));
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}

.card-pad{padding:16px}

.row{
  display:flex;
  gap:var(--gap);
  align-items:center;
}

.row-between{
  display:flex;
  gap:var(--gap);
  align-items:center;
  justify-content:space-between;
}

.grid{
  display:grid;
  gap:var(--gap);
}

.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.grid-4{grid-template-columns:1fr 1fr 1fr 1fr}

@media (max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .row{flex-wrap:wrap}
}

.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:2px 0 6px;
}

.input, select, textarea{
  width:100%;
  padding:12px 12px;
  background:color-mix(in srgb, var(--panel2) 88%, transparent);
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  color:var(--text);
}

textarea{min-height:90px}

.input:focus, select:focus, textarea:focus{
  border-color:color-mix(in srgb, var(--accent) 70%, var(--border));
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 18%, var(--panel));
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
  user-select:none;
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:color-mix(in srgb, var(--accent) 35%, var(--panel));
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
}

.btn-ghost{background:transparent}

.btn-danger{
  background:color-mix(in srgb, var(--err) 20%, var(--panel));
  border-color:color-mix(in srgb, var(--err) 55%, var(--border));
}

.btn-xs{
  padding:7px 10px;
  border-radius:11px;
  font-size:13px;
  line-height:1.1;
}

.table .btn-xs{margin:0}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel2) 85%, transparent);
}

.alert{
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
  border:1px solid var(--border);
}

.alert.ok,
.alert-ok{
  background:color-mix(in srgb, var(--ok) 10%, var(--panel));
}

.alert.err,
.alert-err{
  background:color-mix(in srgb, var(--err) 10%, var(--panel));
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}

.table th{
  font-size:12px;
  color:var(--muted);
  text-align:left;
  padding:0 10px;
}

.table td{
  background:color-mix(in srgb, var(--panel2) 88%, transparent);
  border:1px solid var(--border);
  padding:12px 10px;
  vertical-align:middle;
}

.table tr td:first-child{
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}

.table tr td:last-child{
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}

.pos-shell{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap);
}

@media (max-width:1050px){
  .pos-shell{grid-template-columns:1fr}
}

.pos-searchbar{
  display:flex;
  gap:10px;
  align-items:center;
}

.pos-searchbar .input{flex:1}

.pos-compat{margin-top:14px}
.pos-results{margin-top:14px}

.product-card{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:var(--radius2);
  background:color-mix(in srgb, var(--panel2) 88%, transparent);
  border:1px solid var(--border);
}

.product-card img{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
}

.product-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.product-meta .name{font-weight:700}

.product-meta .line{
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.product-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.price{
  font-weight:800;
  font-size:18px;
}

.kv{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.kv .pill{
  font-size:12px;
  color:var(--muted);
  border:1px dashed var(--border);
  padding:6px 8px;
  border-radius:999px;
}

.cart{padding:16px}

.cart-items{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.cart-item{
  display:grid;
  grid-template-columns:1fr 90px 30px;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:color-mix(in srgb, var(--panel2) 90%, transparent);
}

.qty{
  display:flex;
  align-items:center;
  gap:8px;
}

.qty input{
  width:56px;
  text-align:center;
}

hr.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:14px 0;
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(0);
}

/* Layout general con sidebar fijo */
.app-shell{
  display:flex;
  min-height:calc(100vh - 64px);
}

.sidebar{
  width:260px;
  padding:14px 12px;
  border-right:1px solid var(--border);
  background:color-mix(in srgb, var(--panel2) 92%, transparent);
  position:sticky;
  top:64px;
  align-self:flex-start;
  height:calc(100vh - 64px);
  overflow:auto;
}

.main{
  flex:1;
  min-width:0;
}

/* Sidebar nav */
.snav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.snav__label{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 45%, transparent);
  margin:10px 8px 0;
}

.snav__section{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.snav__item{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  color:color-mix(in srgb, var(--text) 92%, transparent);
}

.snav__item:hover{
  background:color-mix(in srgb, var(--panel) 60%, transparent);
  border-color:var(--border);
}

.snav__item.active{
  background:color-mix(in srgb, var(--accent) 20%, var(--panel) 80%);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}

/* Responsive sidebar */
@media (max-width:880px){
  .app-shell{display:block}
  .sidebar{
    width:auto;
    height:auto;
    position:relative;
    top:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
}

/* Dashboard */
.dash-alertbar{
  position:sticky;
  top:64px;
  z-index:40;
  margin:-6px 0 14px;
  padding:12px !important;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}

.dash-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.dash-tab{
  padding:7px 11px;
  border-radius:14px;
  border:1px solid var(--border);
  background:transparent;
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 70%, transparent);
}

.dash-tab.active{
  background:color-mix(in srgb, var(--text) 10%, transparent);
  color:var(--text);
}

.dash-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

@media (max-width:880px){
  .dash-cards{grid-template-columns:1fr}
}

.dash-card{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel2) 85%, transparent), color-mix(in srgb, var(--panel) 85%, transparent));
  padding:12px;
}

.dash-bubble{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid color-mix(in srgb, #ff8a3d 70%, transparent);
  color:var(--text);
  font-weight:900;
  margin-bottom:8px;
  font-size:18px;
}

.dash-pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, #ff2e7a 80%, transparent);
  background:color-mix(in srgb, #ff2e7a 10%, transparent);
  font-weight:900;
  font-size:13px;
  margin-bottom:8px;
}

.dash-alert-note{
  margin-top:10px;
  font-size:12px;
}

/* Stock alerts */
.badge.badge-low{
  border-color:rgba(255,107,107,.9);
  color:rgba(255,179,179,1);
  box-shadow:0 0 0 2px rgba(255,107,107,.18) inset;
}

.badge.badge-zero{
  border-color:rgba(255,107,107,1);
  color:rgba(255,179,179,1);
  box-shadow:0 0 0 2px rgba(255,107,107,.24) inset;
}

/* Ticket */
.ticket-success{
  font-size:14px;
}

.ticket-wrap{
  max-width:420px;
  margin:0 auto;
}

.ticket-head{
  text-align:center;
  margin-bottom:10px;
}

.ticket-business{
  font-weight:900;
  font-size:18px;
  line-height:1.2;
}

.ticket-line{
  font-size:13px;
  margin-top:2px;
}

.ticket-meta{
  font-size:13px;
  line-height:1.5;
  margin-top:10px;
}

.ticket-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.ticket-table th,
.ticket-table td{
  padding:6px 4px;
  text-align:left;
  vertical-align:top;
}

.ticket-table th:last-child,
.ticket-table td:last-child{
  text-align:right;
}

.ticket-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:18px;
  margin-top:8px;
}

.ticket-total strong{
  font-size:32px;
  font-weight:900;
}

.ticket-thanks{
  margin-top:14px;
  text-align:center;
  font-size:13px;
}

.no-print{}

@page{
  size:auto;
  margin:10mm;
}

@media print{
  html, body{
    background:#fff !important;
    color:#000 !important;
    overflow:visible !important;
  }

  .topbar,
  .sidebar,
  .no-print,
  .alert{
    display:none !important;
  }

  .app-shell,
  .main,
  .container{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .card,
  .card-pad{
    box-shadow:none !important;
    background:#fff !important;
    color:#000 !important;
  }

  *{
    overflow:visible !important;
  }
}
/* ===== FOOTER DIGO MARKETING ===== */
#dm-premium-footer{
  width:100%;
  margin-top:28px;
  padding:26px 18px 30px;
  border-top:1px solid rgba(74,163,255,.22);
  background:linear-gradient(180deg, #02102d 0%, #03163d 100%);
  box-shadow:inset 0 1px 0 rgba(80,180,255,.10);
}

#dm-premium-footer .dm-footer-content{
  width:100%;
  max-width:none;
  margin:0 auto;
  text-align:center;
}

#dm-premium-footer .dm-footer-logo{
  margin-bottom:14px;
}

#dm-premium-footer .dm-footer-logo img{
  max-width:220px;
  width:auto;
  height:auto;
  display:block;
  margin:0 auto;
  filter:
    drop-shadow(0 0 8px rgba(0,212,255,.18))
    drop-shadow(0 0 22px rgba(0,132,255,.12));
}

#dm-premium-footer .dm-footer-text{
  color:#bfcbe3;
  font-size:18px;
  line-height:1.5;
  margin-bottom:10px;
}

#dm-premium-footer .dm-footer-text a{
  color:#dfe8fb;
  font-weight:800;
  text-decoration:none;
}

#dm-premium-footer .dm-footer-text a:hover{
  text-decoration:underline;
}

#dm-premium-footer .dm-footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:16px;
  line-height:1.5;
}

#dm-premium-footer .dm-footer-links a{
  color:#6ec6ff;
  text-decoration:none;
  font-weight:500;
}

#dm-premium-footer .dm-footer-links a:hover{
  text-decoration:underline;
}

#dm-premium-footer .dm-sep{
  color:#d8e4ff;
}

/* En modo claro se queda igual azul oscuro */
html[data-theme="light"] #dm-premium-footer{
  border-top:1px solid rgba(74,163,255,.22);
  background:linear-gradient(180deg, #02102d 0%, #03163d 100%);
}

html[data-theme="light"] #dm-premium-footer .dm-footer-text{
  color:#bfcbe3;
}

html[data-theme="light"] #dm-premium-footer .dm-footer-text a{
  color:#dfe8fb;
}

html[data-theme="light"] #dm-premium-footer .dm-footer-links a{
  color:#6ec6ff;
}

html[data-theme="light"] #dm-premium-footer .dm-sep{
  color:#d8e4ff;
}

@media (max-width:768px){
  #dm-premium-footer{
    padding:22px 14px 26px;
  }

  #dm-premium-footer .dm-footer-logo img{
    max-width:170px;
  }

  #dm-premium-footer .dm-footer-text{
    font-size:14px;
  }

  #dm-premium-footer .dm-footer-links{
    gap:10px;
    font-size:14px;
  }
}