/* Sistema del Local — estilos propios sobre Bootstrap 5.3 */
:root {
  --loc-primary: #2563eb;
  --loc-bg: #f3f5f9;
  --loc-side: #0f172a;
  --loc-side-2: #1e293b;
  --loc-text: #1e293b;
  --loc-radius: 14px;
  --loc-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
}
[hidden] { display: none !important; }
body { background: var(--loc-bg); color: var(--loc-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* estructura */
.loc-shell { display: flex; min-height: 100vh; }
.loc-sidebar { width: 262px; background: var(--loc-side); color: #cbd5e1; position: fixed; inset: 0 auto 0 0; z-index: 1040; display: flex; flex-direction: column; overflow-y: auto; transition: transform .2s; }
.loc-main { margin-left: 262px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.loc-top { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid #e2e8f0; padding: .6rem 1.1rem; display: flex; align-items: center; gap: .75rem; }
.loc-content { padding: 1.25rem 1.25rem 3rem; max-width: 1500px; width: 100%; }

/* menú lateral */
.loc-brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.loc-brand img { height: 34px; max-width: 120px; object-fit: contain; border-radius: 6px; }
.loc-brand-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--loc-primary); display: grid; place-items: center; color: #fff; font-size: 1.15rem; }
.loc-nav { padding: .6rem .6rem 2rem; display: flex; flex-direction: column; gap: 2px; }
.loc-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; color: #cbd5e1; text-decoration: none; border-radius: 10px; font-size: .93rem; }
.loc-link i:first-child { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.loc-link:hover { background: var(--loc-side-2); color: #fff; }
.loc-link.active { background: var(--loc-primary); color: #fff; }
.loc-chev { margin-left: auto; font-size: .7rem; transition: transform .2s; }
.loc-parent:not(.collapsed) .loc-chev { transform: rotate(180deg); }
.loc-sublink { display: block; padding: .38rem .75rem .38rem 2.7rem; color: #94a3b8; text-decoration: none; font-size: .87rem; border-radius: 8px; }
.loc-sublink:hover { color: #fff; background: var(--loc-side-2); }
.loc-sublink.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.08); }
.loc-overlay { display: none; }

/* barra superior */
.loc-search { flex: 1; max-width: 640px; position: relative; }
.loc-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.loc-search .form-control { padding-left: 2.3rem; border-radius: 999px; background: #f1f5f9; border-color: transparent; }
.loc-search .form-control:focus { background: #fff; border-color: var(--loc-primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }
.loc-top-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.loc-chip { background: #ecfdf5; color: #047857; border-radius: 999px; padding: .3rem .75rem; font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.loc-chip.chip-warn { background: #fef3c7; color: #b45309; }
.loc-bell { position: absolute; top: -4px; right: -4px; font-size: .65rem; }

/* tarjetas y tablas */
.card { border: 0; border-radius: var(--loc-radius); box-shadow: var(--loc-shadow); }
.card-header { background: transparent; border-bottom: 1px solid #eef2f7; font-weight: 600; }
.kpi { border-radius: var(--loc-radius); background: #fff; box-shadow: var(--loc-shadow); padding: 1rem 1.1rem; height: 100%; }
.kpi .lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 600; }
.kpi .val { font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.kpi .sub { font-size: .8rem; color: #64748b; }
.kpi-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.kpi-link:hover .kpi { box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 8px 22px rgba(15,23,42,.1); }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.table-hover tbody tr:hover { background: #f8fafc; }
.btn { border-radius: 10px; }
.form-control, .form-select { border-radius: 10px; }
.badge { font-weight: 600; }
.text-money-in { color: #15803d; font-weight: 600; }
.text-money-out { color: #b91c1c; font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.clickable { cursor: pointer; }

/* POS */
.pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 1rem; align-items: start; }
.pos-sticky { position: sticky; top: 76px; }
.pos-step { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .6rem; }
.pos-step > span { width: 24px; height: 24px; border-radius: 50%; background: var(--loc-primary); color: #fff; display: inline-grid; place-items: center; font-size: .8rem; flex: none; }
.pos-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; }
.pos-chip { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 999px; padding: .3rem .85rem; font-size: .87rem; white-space: nowrap; }
.pos-chip.on { background: var(--loc-primary); border-color: var(--loc-primary); color: #fff; }
.pos-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .5rem; max-height: 330px; overflow-y: auto; padding: 2px; }
.pos-prod { text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .15rem; min-height: 92px; transition: border-color .1s, box-shadow .1s; }
.pos-prod:hover, .pos-prod.sel { border-color: var(--loc-primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }
.pos-prod .nom { font-weight: 600; font-size: .9rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-prod .pre { font-weight: 700; margin-top: auto; }
.pos-prod .stk { font-size: .75rem; color: #64748b; }
.pos-prod.agotado { opacity: .5; cursor: not-allowed; }
.pos-prod.agotado .stk { color: #dc2626; }
.pos-catalogo-msg { grid-column: 1 / -1; color: #64748b; text-align: center; padding: 1rem; }
.pos-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .75rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; }
.pos-item:last-child { border-bottom: 0; }
.pos-item.nuevo { animation: posFlash 1s ease-out; }
@keyframes posFlash { from { background: #dbeafe; } to { background: transparent; } }
.pos-item .sub { text-align: right; font-weight: 700; min-width: 92px; }
.pos-qty { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; }
.pos-qty button { border: 0; background: #f8fafc; width: 32px; height: 32px; font-size: 1.05rem; line-height: 1; }
.pos-qty button:hover:not(:disabled) { background: #e2e8f0; }
.pos-qty button:disabled { color: #cbd5e1; }
.pos-qty span { min-width: 34px; text-align: center; font-weight: 600; }
.pos-edit { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .4rem; max-width: 330px; }
.pos-vacio { text-align: center; color: #64748b; padding: 1.75rem 1rem; }
.pos-vacio > i { font-size: 2rem; color: #94a3b8; }
.pos-totcard { background: #0f172a; color: #fff; }
.pos-totcard .text-muted { color: #94a3b8 !important; }
.pos-totlbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; font-weight: 600; }
.pos-total { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pos-totcard .text-success { color: #4ade80 !important; }
.pos-cliente-sel { display: flex; align-items: center; gap: .5rem; background: #ecfdf5; color: #065f46; border-radius: 10px; padding: .5rem .75rem; font-weight: 500; }
.pos-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .4rem; }
.pos-medio { border: 1px solid #cbd5e1; background: #fff; border-radius: 10px; padding: .45rem .3rem; font-size: .82rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .1rem; color: #334155; line-height: 1.15; }
.pos-medio i { font-size: 1.2rem; }
.pos-medio.on { border-color: var(--loc-primary); background: #eff6ff; color: var(--loc-primary); box-shadow: 0 0 0 .15rem rgba(37,99,235,.2); }
.pos-pago { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border-radius: 10px; padding: .45rem .6rem; margin-bottom: .35rem; }
.pos-vuelto { background: #fef9c3; color: #713f12; border-radius: 10px; padding: .55rem .75rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.pos-vuelto b { font-size: 1.3rem; }
.pos-confirmar { min-height: 56px; }
.pos-mbar { display: none; }
kbd { background: #e2e8f0; color: #334155; font-size: .72rem; padding: .05rem .35rem; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .85rem; overflow-x: auto; padding-bottom: .75rem; align-items: start; }
.k-col { background: #e9eef5; border-radius: var(--loc-radius); padding: .6rem; min-height: 200px; }
.k-col.drag-over { outline: 2px dashed var(--loc-primary); background: #dbeafe; }
.k-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .85rem; padding: .2rem .35rem .55rem; }
.k-card { background: #fff; border-radius: 12px; padding: .65rem .75rem; margin-bottom: .55rem; box-shadow: var(--loc-shadow); cursor: grab; border-left: 4px solid #cbd5e1; font-size: .87rem; }
.k-card.demorada { border-left-color: #dc2626; }
.k-card.dragging { opacity: .45; }
.k-card a { text-decoration: none; color: inherit; }

/* firma */
.firma-pad { border: 1px dashed #94a3b8; border-radius: 12px; background: #fff; touch-action: none; width: 100%; height: 160px; }

/* impresión */
.print-doc { background: #fff; max-width: 820px; margin: 0 auto; padding: 1.5rem; }
@media print {
  .loc-sidebar, .loc-top, .no-print, .alert { display: none !important; }
  .loc-main { margin: 0 !important; }
  .loc-content { padding: 0 !important; }
  body { background: #fff !important; }
  .print-doc { box-shadow: none !important; padding: 0 !important; max-width: none; }
}

/* mobile */
@media (max-width: 991.98px) {
  .loc-sidebar { transform: translateX(-100%); }
  .loc-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .loc-overlay.show { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1035; }
  .loc-main { margin-left: 0; }
  .loc-content { padding: .9rem .75rem 3rem; }
  .pos-grid { grid-template-columns: minmax(0, 1fr); }
  .pos-sticky { position: static; }
  .pos-mbar { display: flex; justify-content: space-between; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: #fff; border-top: 1px solid #e2e8f0; padding: .55rem 1rem; box-shadow: 0 -4px 14px rgba(15,23,42,.08); }
  body:has(.pos-mbar) .loc-content { padding-bottom: 5.5rem; }
  .pos-item { grid-template-columns: minmax(0, 1fr) auto; }
  .pos-item .sub { grid-column: 1; text-align: left; }
  .pos-item .quitar { justify-self: end; }
  .pos-catalogo { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 280px; }
  .loc-search { max-width: none; }
}