/* ============================================================
   POS Portal — Identidad visual Datawork®
   Verde primario : #93d500
   Verde oscuro   : #76bc21
   Azul marino    : #042b49
   Gris azulado   : #63788e
   ============================================================ */

:root {
  /* Marca */
  --dw-green:        #93d500;
  --dw-green-dark:   #76bc21;
  --dw-green-dim:    rgba(147, 213, 0, 0.12);
  --dw-green-glow:   rgba(147, 213, 0, 0.25);
  --dw-navy:         #042b49;
  --dw-navy-mid:     #073660;
  --dw-navy-light:   #0b4478;
  --dw-gray:         #63788e;
  --dw-gray-light:   #8fa3b5;

  /* Semánticos */
  --color-bg:        #031f36;
  --color-surface:   #042b49;
  --color-surface2:  #073660;
  --color-surface3:  #0b4478;
  --color-border:    rgba(99, 120, 142, 0.30);
  --color-border-h:  rgba(147, 213, 0, 0.50);
  --color-primary:   #93d500;
  --color-primary-h: #76bc21;
  --color-success:   #93d500;
  --color-danger:    #f05252;
  --color-warning:   #f59e0b;
  --color-text:      #e8f4ff;
  --color-muted:     #63788e;
  --color-muted-l:   #8fa3b5;

  --radius-sm:  4px;
  --radius:     6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --font:       'Segoe UI', system-ui, -apple-system, sans-serif;

  --shadow-sm:  0 1px 3px rgba(2, 15, 30, 0.4);
  --shadow-md:  0 4px 16px rgba(2, 15, 30, 0.5);
  --shadow-lg:  0 8px 32px rgba(2, 15, 30, 0.6);
  --shadow-green: 0 0 20px rgba(147, 213, 0, 0.20);
}

/* ============================================================
   TEMA OSCURO (por defecto)
   ============================================================ */
[data-theme="dark"] {
  --color-bg:        #031f36;
  --color-surface:   #042b49;
  --color-surface2:  #073660;
  --color-surface3:  #0b4478;
  --color-border:    rgba(99, 120, 142, 0.30);
  --color-border-h:  rgba(147, 213, 0, 0.50);
  --color-primary:   #93d500;
  --color-primary-h: #76bc21;
  --color-danger:    #f05252;
  --color-text:      #e8f4ff;
  --color-muted:     #63788e;
  --color-muted-l:   #8fa3b5;
  --dw-green-dim:    rgba(147, 213, 0, 0.12);
  --dw-green-glow:   rgba(147, 213, 0, 0.25);
  --shadow-sm:       0 1px 3px rgba(2, 15, 30, 0.40);
  --shadow-md:       0 4px 16px rgba(2, 15, 30, 0.50);
  --shadow-lg:       0 8px 32px rgba(2, 15, 30, 0.60);
  --shadow-green:    0 0 20px rgba(147, 213, 0, 0.20);
  /* Toggle icon visible en oscuro */
  --theme-icon-sun:  block;
  --theme-icon-moon: none;
}

/* ============================================================
   TEMA CLARO
   ============================================================ */
[data-theme="light"] {
  --color-bg:        #eef2f7;
  --color-surface:   #ffffff;
  --color-surface2:  #f4f7fb;
  --color-surface3:  #e8eef6;
  --color-border:    rgba(99, 120, 142, 0.18);
  --color-border-h:  rgba(118, 188, 33, 0.55);
  --color-primary:   #76bc21;   /* verde más oscuro = mejor contraste en claro */
  --color-primary-h: #5fa018;
  --color-danger:    #dc2626;
  --color-text:      #042b49;
  --color-muted:     #63788e;
  --color-muted-l:   #4a6278;
  --dw-navy:         #042b49;   /* texto sobre botones verdes */
  --dw-green-dim:    rgba(118, 188, 33, 0.10);
  --dw-green-glow:   rgba(118, 188, 33, 0.20);
  --shadow-sm:       0 1px 4px rgba(4, 43, 73, 0.08);
  --shadow-md:       0 4px 16px rgba(4, 43, 73, 0.10);
  --shadow-lg:       0 8px 32px rgba(4, 43, 73, 0.14);
  --shadow-green:    0 0 18px rgba(118, 188, 33, 0.18);
  /* Toggle icon visible en claro */
  --theme-icon-sun:  none;
  --theme-icon-moon: block;
}

/* Transición suave al cambiar de tema */
body,
.pos-header,
.pos-carrito-section,
.pos-aside,
.login-card,
.modal-box,
.pos-busqueda-bar,
.pos-tabla-header,
.carrito-fila,
.pos-totales,
.pos-metodo-pago,
.pos-atajos,
.pos-cobrar-wrap,
.pos-resultados,
.pos-reloj {
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .2s ease,
    box-shadow .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LOGIN
   ============================================================ */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(147,213,0,0.08) 0%, transparent 60%),
    var(--color-bg);
}

.login-container { width: 100%; max-width: 400px; padding: 1.25rem; }

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(147,213,0,0.04);
}

/* Logo Datawork dentro del login */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
}

.login-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--dw-green-dim);
  border: 1.5px solid rgba(147,213,0,0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-green);
}

.login-logo-mark svg {
  width: 30px;
  height: 30px;
}

.login-brand {
  text-align: center;
}

.login-brand-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -.01em;
}

.login-brand-name span {
  color: var(--dw-green);
}

.login-brand-sub {
  font-size: .78rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-top: .15rem;
}

/* Separador */
.login-divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: 1.5rem;
}

.login-form { display: flex; flex-direction: column; gap: .9rem; }

.field-group { display: flex; flex-direction: column; gap: .3rem; }

.field-group label {
  font-size: .72rem;
  color: var(--color-muted-l);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}

.form-input {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: .65rem .85rem;
  font-size: .95rem;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-input::placeholder { color: var(--color-muted); }
.form-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface3);
  box-shadow: 0 0 0 3px var(--dw-green-dim);
}

.field-error { color: var(--color-danger); font-size: .78rem; margin-top: .15rem; }

.btn-login {
  background: var(--color-primary);
  color: var(--dw-navy);
  border: none;
  border-radius: var(--radius);
  padding: .78rem;
  font-size: .95rem;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s, box-shadow .15s, transform .1s;
  margin-top: .4rem;
  box-shadow: 0 2px 12px rgba(147,213,0,0.30);
}
.btn-login:hover {
  background: var(--color-primary-h);
  box-shadow: 0 4px 20px rgba(147,213,0,0.40);
  transform: translateY(-1px);
}
.btn-login:active { transform: translateY(0); }

/* ── OAuth botones ── */
.oauth-btns {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .75rem;
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface2);
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  cursor: pointer;
}
.btn-oauth:hover {
  background: var(--color-surface3);
  border-color: var(--color-border-h);
  box-shadow: var(--shadow-sm);
}
.btn-oauth svg { flex-shrink: 0; }

.oauth-sep {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0 .75rem;
  color: var(--color-muted);
  font-size: .75rem;
}
.oauth-sep::before,
.oauth-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Identidad OAuth verificada */
.oauth-identidad {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--color-surface2);
  border: 1.5px solid var(--color-border-h);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.oauth-identidad-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oauth-identidad-nombre {
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-text);
}
.oauth-identidad-email {
  font-size: .75rem;
  color: var(--color-muted);
}
.oauth-identidad-check {
  margin-left: auto;
  flex-shrink: 0;
}

.login-footer {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--color-muted);
  font-size: .75rem;
}

/* ============================================================
   SELECTOR DE EMPRESA
   ============================================================ */

.empresa-container {
  width: 100%;
  max-width: 520px;
  padding: 1.25rem;
}

.empresa-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem 2rem 1.5rem;
  box-shadow: var(--shadow-lg);
}

.empresa-bienvenida {
  font-size: .875rem;
  color: var(--color-muted-l);
  margin-bottom: 1rem;
}
.empresa-bienvenida strong { color: var(--color-text); }

/* Lista */
.empresa-lista {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: .2rem;
}

.empresa-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem .85rem;
  background: var(--color-surface2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.empresa-item:hover {
  background: var(--color-surface3);
  border-color: var(--color-border-h);
}
.empresa-item.activa {
  border-color: var(--color-primary);
  background: var(--dw-green-dim);
  box-shadow: 0 0 0 3px var(--dw-green-dim);
}

/* Logo de empresa */
.empresa-logo-wrap {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empresa-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.empresa-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--dw-green-dim);
  letter-spacing: .02em;
}

/* Info de empresa */
.empresa-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.empresa-nombre {
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empresa-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.empresa-vigencia {
  font-size: .72rem;
  color: var(--color-muted);
}
.empresa-ref {
  font-size: .68rem;
  font-family: monospace;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .04em;
}

/* Badge gray para Colaborador */
.badge-gray {
  background: rgba(99,120,142,0.12);
  color: var(--color-muted-l);
  border: 1px solid rgba(99,120,142,0.25);
}

/* Check icon */
.empresa-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color .15s, background .15s, color .15s;
}
.empresa-item.activa .empresa-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--dw-navy);
}

/* Botón ingresar */
.btn-ingresar {
  width: 100%;
}
.btn-ingresar:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Link cambiar cuenta */
.empresa-cambiar-cuenta {
  color: var(--color-muted);
  font-size: .78rem;
  text-decoration: none;
  transition: color .15s;
}
.empresa-cambiar-cuenta:hover { color: var(--color-primary); }

/* Modo claro — empresa */
[data-theme="light"] .empresa-item:hover {
  background: var(--color-surface3);
}
[data-theme="light"] .empresa-item.activa {
  background: rgba(118,188,33,0.08);
  border-color: #76bc21;
  box-shadow: 0 0 0 3px rgba(118,188,33,0.10);
}
[data-theme="light"] .empresa-item.activa .empresa-check {
  background: #76bc21;
  border-color: #76bc21;
}

.alert {
  border-radius: var(--radius);
  padding: .65rem .85rem;
  margin-bottom: .75rem;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.alert-error {
  background: rgba(240, 82, 82, .1);
  border: 1px solid rgba(240, 82, 82, .35);
  color: #fca5a5;
}

/* ============================================================
   LAYOUT POS
   ============================================================ */

.pos-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Header ── */
.pos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 1rem;
  height: 52px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.pos-header-left { display: flex; align-items: center; gap: .65rem; }

/* Isotipo mini en el header */
.pos-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--dw-green-dim);
  border: 1px solid rgba(147,213,0,0.30);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.pos-logo-mark svg { width: 18px; height: 18px; }

.pos-header-brand { display: flex; flex-direction: column; line-height: 1.1; }
.pos-brand-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-text);
}
.pos-brand-name span { color: var(--dw-green); }
.pos-brand-module {
  font-size: .68rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pos-header-sep {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 .5rem;
}

.pos-cajero {
  color: var(--color-muted);
  font-size: .82rem;
}
.pos-cajero strong { color: var(--color-text); font-weight: 600; }

.pos-header-right { display: flex; align-items: center; gap: .85rem; }

.pos-reloj {
  color: var(--dw-green);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--dw-green-dim);
  border: 1px solid rgba(147,213,0,0.20);
  border-radius: var(--radius-sm);
  padding: .2rem .55rem;
}

.btn-logout {
  color: var(--color-muted);
  text-decoration: none;
  font-size: .78rem;
  padding: .3rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color .15s, border-color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.btn-logout:hover {
  color: var(--color-danger);
  border-color: rgba(240,82,82,.4);
  background: rgba(240,82,82,.06);
}

/* ── Main ── */
.pos-main {
  display: grid;
  grid-template-columns: 1fr 270px;
  flex: 1;
  overflow: hidden;
}

/* ============================================================
   SECCIÓN CARRITO (izquierda)
   ============================================================ */

.pos-carrito-section {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}

/* Barra búsqueda */
.pos-busqueda-bar {
  display: flex;
  gap: .5rem;
  padding: .75rem;
  background: var(--color-surface2);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.pos-input-busqueda {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.pos-input-busqueda::placeholder { color: var(--color-muted); }
.pos-input-busqueda:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--dw-green-dim);
}

.btn-accion {
  background: var(--color-primary);
  color: var(--dw-navy);
  border: none;
  border-radius: var(--radius);
  padding: .7rem 1.2rem;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn-accion:hover {
  background: var(--color-primary-h);
  box-shadow: 0 2px 10px rgba(147,213,0,0.35);
}

/* Resultados dropdown */
.pos-resultados {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow-y: auto;
  max-height: 220px;
  flex-shrink: 0;
  margin: 0 .75rem;
  box-shadow: var(--shadow-md);
  z-index: 10;
}
.pos-resultados.hidden { display: none; }

.resultado-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .8rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background .1s;
  gap: .5rem;
  touch-action: manipulation;
}
.resultado-item:last-child { border-bottom: none; }
.resultado-item:hover,
.resultado-item.activo {
  background: var(--color-surface2);
  border-left: 2px solid var(--color-primary);
  padding-left: calc(.7rem - 2px);
}

.resultado-item-foto {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.resultado-item-nombre { font-weight: 500; font-size: .875rem; }
.resultado-item-sku {
  color: var(--color-muted);
  font-size: .75rem;
  font-family: monospace;
  margin-top: .1rem;
}
.resultado-item-precio {
  color: var(--dw-green);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.resultado-vacio {
  padding: .85rem;
  color: var(--color-muted);
  text-align: center;
  font-size: .85rem;
}

/* Cabecera tabla carrito */
.pos-tabla-header,
.carrito-fila {
  grid-template-columns: 110px 1fr 95px 148px 100px 36px !important;
}
.pos-tabla-header {
  display: grid;
  padding: .4rem .85rem;
  background: var(--color-surface2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  flex-shrink: 0;
}

/* Lista carrito */
.pos-carrito-lista { flex: 1; overflow-y: auto; position: relative; }

.pos-carrito-vacio {
  text-align: center;
  color: var(--color-muted);
  padding: 3.5rem 1rem;
  line-height: 2;
}
.pos-carrito-vacio svg {
  opacity: .2;
  margin-bottom: .5rem;
}

.carrito-fila {
  display: grid;
  align-items: center;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--color-border);
  transition: background .1s;
  cursor: pointer;
  /* Evita que Safari iOS cancele el tap al detectar micro-scroll */
  touch-action: manipulation;
}
.carrito-fila:hover { background: rgba(7,54,96,0.5); }
.carrito-fila.seleccionada {
  background: var(--dw-green-dim);
  border-left: 2px solid var(--dw-green);
}
.carrito-fila.seleccionada .col-clave    { font-size: .88rem; }
.carrito-fila.seleccionada .col-producto { font-size: 1rem; font-weight: 600; }
.carrito-fila.seleccionada .col-precio   { font-size: .95rem; }
.carrito-fila.seleccionada .col-subtotal { font-size: 1rem; }

.col-clave {
  font-size: .75rem;
  font-family: monospace;
  color: var(--color-muted-l);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: .4rem;
}
.col-producto {
  font-weight: 500;
  font-size: .875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: .5rem;
}
.col-precio  { text-align: right; color: var(--color-muted-l); font-size: .85rem; }
.col-cant {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.cant-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-cant-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background .1s, color .1s;
}
.btn-cant-step:hover {
  background: var(--color-primary);
  color: var(--dw-navy);
  border-color: transparent;
}
.btn-cant-step:active { opacity: .7; }
.cant-input {
  width: 44px;
  height: 38px;
  text-align: center;
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: .95rem;
  font-weight: 600;
  padding: 0 2px;
}
.cant-input:focus { outline: 1px solid var(--color-primary); border-color: var(--color-primary); }

/* Qty selector en resultados de búsqueda */
.resultado-qty {
  width: 48px;
  text-align: center;
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: .8rem;
  padding: 2px 4px;
  flex-shrink: 0;
}
.resultado-qty:focus { outline: 1px solid var(--color-primary); border-color: var(--color-primary); }
.resultado-add {
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--dw-navy);
  border: none;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .15s;
}
.resultado-add:hover { background: var(--color-primary-h); }
.col-subtotal {
  text-align: right;
  color: var(--dw-green);
  font-weight: 700;
  font-size: .9rem;
}
.col-accion { display: flex; justify-content: center; }

.btn-eliminar-fila {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1;
  transition: color .15s, background .15s;
}
.btn-eliminar-fila:hover {
  color: var(--color-danger);
  background: rgba(240,82,82,.12);
}

/* Cliente seleccionado */
.pos-cliente {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  background: var(--dw-green-dim);
  border-top: 1px solid rgba(147,213,0,0.20);
  font-size: .82rem;
  flex-shrink: 0;
}
.pos-cliente.hidden { display: none; }
.pos-cliente .etiqueta { color: var(--color-muted-l); }
.pos-cliente strong { color: var(--dw-green); }
.btn-quitar {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: .75rem;
  padding: 0 .25rem;
  margin-left: auto;
}
.btn-quitar:hover { color: var(--color-danger); }

/* ============================================================
   ASIDE — Totales y acciones (derecha)
   ============================================================ */

.pos-aside {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  overflow-y: auto;
}

/* Totales */
.pos-totales {
  border-bottom: 1px solid var(--color-border);
  padding: .85rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pos-totales-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: .35rem;
}

.total-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  font-size: .875rem;
  color: var(--color-muted-l);
}
.total-fila span:last-child { font-variant-numeric: tabular-nums; }

.total-separator {
  height: 1px;
  background: var(--color-border);
  margin: .3rem 0;
}

.total-grande {
  padding: .55rem 0 .2rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dw-green);
  letter-spacing: -.02em;
}
.total-grande span:first-child {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-muted-l);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Método de pago */
.pos-metodo-pago {
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--color-border);
}
.pos-metodo-pago label {
  display: block;
  font-size: .7rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  margin-bottom: .4rem;
}
.pos-select {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: .5rem .65rem;
  font-size: .875rem;
  outline: none;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s;
}
.pos-select:focus { border-color: var(--color-primary); }

/* Atajos de teclado */
.pos-atajos {
  padding: .65rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}

.pos-atajos-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: .2rem;
}

.btn-atajo {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: .75rem 1rem;
  cursor: pointer;
  font-size: .95rem;
  text-align: left;
  width: 100%;
  transition: background .12s, border-color .12s;
}
.btn-atajo:hover {
  background: var(--color-surface3);
  border-color: var(--color-border-h);
}
.btn-atajo.btn-cancelar:hover {
  border-color: rgba(240,82,82,.4);
  color: #fca5a5;
}

kbd {
  background: rgba(147,213,0,0.12);
  border: 1px solid rgba(147,213,0,0.25);
  border-radius: 3px;
  padding: .05rem .35rem;
  font-size: .7rem;
  font-family: monospace;
  color: var(--dw-green);
  white-space: nowrap;
}

/* Botón cobrar */
.pos-cobrar-wrap {
  padding: .75rem .85rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.btn-cobrar {
  background: var(--color-primary);
  color: var(--dw-navy);
  border: none;
  border-radius: var(--radius);
  padding: 1.1rem;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  letter-spacing: .02em;
  transition: background .15s, box-shadow .15s, transform .1s;
  box-shadow: 0 2px 14px rgba(147,213,0,0.30);
}
.btn-cobrar:hover {
  background: var(--color-primary-h);
  box-shadow: 0 4px 22px rgba(147,213,0,0.45);
  transform: translateY(-1px);
}
.btn-cobrar:active { transform: translateY(0); }
.btn-cobrar:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.btn-cobrar kbd {
  background: rgba(4,43,73,0.30);
  border-color: rgba(4,43,73,0.25);
  color: var(--dw-navy);
}

/* ============================================================
   MODALES
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 24, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  box-shadow: var(--shadow-lg);
  animation: modalIn .18s ease-out;
}
.modal-box-sm { max-width: 340px; }

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-header h3 { font-size: .95rem; font-weight: 700; }

.modal-icon {
  width: 30px; height: 30px;
  background: var(--dw-green-dim);
  border: 1px solid rgba(147,213,0,0.25);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--dw-green);
  font-size: .85rem;
  flex-shrink: 0;
}

.modal-producto-nombre { color: var(--color-muted); font-size: .85rem; }

/* ── Ocultar flechas nativas de input[type=number] ─────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Stepper: [ − ] [ input ] [ + ] ────────────────────────────────── */
.stepper-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.stepper-wrap input[type="number"] {
  flex: 1;
  min-width: 0;
}
.btn-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  /* Elimina el delay de 300ms en Safari/iOS */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background .12s, color .12s;
}
.btn-step:hover {
  background: var(--color-primary, #0057b8);
  color: #fff;
  border-color: transparent;
}
.btn-step:active {
  opacity: .75;
}

.input-cantidad {
  width: 100%;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.modal-botones { display: flex; gap: .5rem; }
.modal-botones > * { flex: 1; }

.btn-modal-cerrar {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted-l);
  padding: .65rem;
  cursor: pointer;
  font-size: .875rem;
  transition: background .15s, color .15s;
}
.btn-modal-cerrar:hover { background: var(--color-surface3); color: var(--color-text); }

/* Modal éxito */
.modal-exito-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  text-align: center;
}
.exito-icono {
  width: 64px; height: 64px;
  background: var(--dw-green-dim);
  border: 2px solid rgba(147,213,0,0.40);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--dw-green);
  box-shadow: var(--shadow-green);
}
.exito-folio {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dw-green);
  letter-spacing: .02em;
}
.exito-mensaje {
  color: var(--color-muted-l);
  font-size: .875rem;
}
.exito-acciones {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
  margin-top: .25rem;
}
.btn-ticket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface2);
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn-ticket:hover {
  background: var(--color-surface3);
  border-color: var(--color-primary);
}

/* ============================================================
   BADGE / CHIP ESTADO
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.badge-green {
  background: var(--dw-green-dim);
  color: var(--dw-green);
  border: 1px solid rgba(147,213,0,0.25);
}
.badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-danger);
  color: #fff;
  padding: .65rem 1.35rem;
  border-radius: 30px;
  font-size: .85rem;
  font-weight: 500;
  z-index: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  transition: opacity .3s;
  white-space: nowrap;
}
.toast.hidden { display: none; }
.toast.info {
  background: var(--color-surface3);
  border: 1px solid var(--color-border-h);
  color: var(--dw-green);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dw-gray); }

/* ============================================================
   ESTADO VACÍO
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--color-muted);
  padding: 2rem 1rem;
  text-align: center;
  flex: 1;
  width: 100%;
}
.empty-state-icon {
  width: 96px; height: 96px;
  background: var(--color-surface2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  opacity: .6;
  margin-bottom: .25rem;
}
.empty-state p { font-size: .95rem; line-height: 1.7; font-weight: 500; }
.empty-state small { font-size: .82rem; opacity: .7; }

/* ============================================================
   MODAL COBRO EN EFECTIVO
   ============================================================ */

.modal-efectivo { max-width: 400px; gap: 1rem; }

.modal-atajo-hint {
  margin-left: auto;
  font-size: .72rem;
  color: var(--color-muted);
}

/* Total */
.efectivo-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
}
.efectivo-total-label {
  font-size: .75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.efectivo-total-monto {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Input monto */
.efectivo-input-wrap { display: flex; flex-direction: column; gap: .35rem; }
.efectivo-input-label {
  font-size: .72rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}
.efectivo-input-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--color-surface2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.efectivo-input-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--dw-green-dim);
}
.efectivo-peso {
  padding: 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-muted);
  border-right: 1px solid var(--color-border);
}
.efectivo-input {
  flex: 1;
  min-width: 0;
  width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: 800;
  padding: .45rem .7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* Ocultar spin buttons del input number */
.efectivo-input::-webkit-outer-spin-button,
.efectivo-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.efectivo-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.efectivo-input::placeholder { color: var(--color-muted); font-weight: 400; font-size: 1.2rem; }

/* Label billetes */
.efectivo-billetes-label {
  font-size: .72rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.efectivo-billetes-label small { text-transform: none; letter-spacing: 0; opacity: .7; }

/* Cambio */
.efectivo-cambio-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dw-green-dim);
  border: 1.5px solid rgba(147,213,0,.30);
  border-radius: var(--radius);
  padding: .6rem .85rem;
}
.efectivo-cambio-wrap.hidden { display: none; }
.efectivo-cambio-label {
  font-size: .75rem;
  color: var(--color-muted-l);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.efectivo-cambio-monto {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Billetes rápidos */
.pos-billetes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3rem;
}
.btn-billete {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted-l);
  padding: .4rem .25rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.btn-billete kbd {
  font-size: .62rem;
  opacity: .6;
  padding: .05rem .28rem;
}
.btn-billete:hover {
  background: var(--color-surface3);
  border-color: var(--color-border-h);
  color: var(--color-primary);
}
.btn-billete.activo {
  background: var(--dw-green-dim);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Resultado cambio */
.pos-cambio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dw-green-dim);
  border: 1px solid rgba(147,213,0,.25);
  border-radius: var(--radius);
  padding: .45rem .7rem;
}
.pos-cambio.hidden { display: none; }
.cambio-label {
  font-size: .75rem;
  color: var(--color-muted-l);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.cambio-monto {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Alerta monto insuficiente */
.pos-alerta-insuficiente {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(240,82,82,.1);
  border: 1px solid rgba(240,82,82,.3);
  border-radius: var(--radius);
  padding: .4rem .7rem;
  color: #fca5a5;
  font-size: .8rem;
  font-weight: 500;
}
.pos-alerta-insuficiente.hidden { display: none; }

/* Cambio en modal éxito */
.exito-cambio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: var(--dw-green-dim);
  border: 1px solid rgba(147,213,0,.25);
  border-radius: var(--radius);
  padding: .6rem 1.5rem;
  width: 100%;
}
.exito-cambio-wrap.hidden { display: none; }
.exito-cambio-label {
  font-size: .7rem;
  color: var(--color-muted-l);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}
.exito-cambio-monto {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Modo claro */
[data-theme="light"] .cambio-monto,
[data-theme="light"] .exito-cambio-monto { color: #5fa018; }
[data-theme="light"] .pos-cambio,
[data-theme="light"] .exito-cambio-wrap { border-color: rgba(118,188,33,.3); }

/* ============================================================
   BOTÓN TOGGLE DE TEMA (sol / luna)
   ============================================================ */

.btn-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-muted);
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.btn-theme:hover {
  background: var(--color-surface3);
  border-color: var(--color-border-h);
  color: var(--color-primary);
}

/* Muestra el ícono correcto según el tema activo */
.btn-theme .icon-sun  { display: var(--theme-icon-sun,  block); }
.btn-theme .icon-moon { display: var(--theme-icon-moon, none);  }

/* ============================================================
   AJUSTES MODO CLARO — overrides puntuales
   ============================================================ */

/* Botón de logout en modo claro */
[data-theme="light"] .btn-logout:hover {
  background: rgba(220, 38, 38, 0.07);
}

/* Carrito vacío en modo claro */
[data-theme="light"] .pos-carrito-vacio,
[data-theme="light"] .empty-state {
  color: var(--color-muted);
}

/* Login page en modo claro */
[data-theme="light"] .login-page {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(118,188,33,0.07) 0%, transparent 60%),
    var(--color-bg);
}

[data-theme="light"] .login-card {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(118,188,33,0.04);
}

/* Reloj en modo claro */
[data-theme="light"] .pos-reloj {
  border-color: rgba(118,188,33,0.25);
  background: rgba(118,188,33,0.08);
  color: #5fa018;
}

/* kbd en modo claro */
[data-theme="light"] kbd {
  background: rgba(118,188,33,0.10);
  border-color: rgba(118,188,33,0.30);
  color: #5fa018;
}

/* Toast info en modo claro */
[data-theme="light"] .toast.info {
  background: #f4f7fb;
  border-color: rgba(118,188,33,0.40);
  color: #5fa018;
}

/* Fila seleccionada en modo claro */
[data-theme="light"] .carrito-fila.seleccionada {
  background: rgba(118,188,33,0.08);
  border-left-color: #76bc21;
}

/* Exito icono en modo claro */
[data-theme="light"] .exito-icono {
  background: rgba(118,188,33,0.10);
  border-color: rgba(118,188,33,0.35);
  color: #76bc21;
}

/* Subtotal en modo claro */
[data-theme="light"] .col-subtotal,
[data-theme="light"] .total-grande,
[data-theme="light"] .exito-folio,
[data-theme="light"] .resultado-item-precio {
  color: #5fa018;
}

/* Ícono modal en modo claro */
[data-theme="light"] .modal-icon {
  border-color: rgba(118,188,33,0.25);
  color: #76bc21;
}

/* Badge en modo claro */
[data-theme="light"] .badge-green {
  background: rgba(118,188,33,0.10);
  color: #5fa018;
  border-color: rgba(118,188,33,0.30);
}

/* Cobrar btn en modo claro */
[data-theme="light"] .btn-cobrar {
  box-shadow: 0 2px 14px rgba(118,188,33,0.28);
}
[data-theme="light"] .btn-cobrar:hover {
  box-shadow: 0 4px 22px rgba(118,188,33,0.40);
}
[data-theme="light"] .btn-accion {
  box-shadow: none;
}
[data-theme="light"] .btn-oauth {
  background: #fff;
  border-color: #d0d7de;
  color: #1a2533;
}
[data-theme="light"] .btn-oauth:hover {
  background: #f6f8fa;
  border-color: #76bc21;
}
[data-theme="light"] .oauth-identidad {
  background: #f0f7e6;
  border-color: rgba(118,188,33,0.4);
}
[data-theme="light"] .oauth-identidad-icon { background: #e8f4d6; }

[data-theme="light"] .btn-login {
  box-shadow: 0 2px 12px rgba(118,188,33,0.25);
}

/* Input foco en modo claro */
[data-theme="light"] .form-input:focus,
[data-theme="light"] .pos-input-busqueda:focus {
  box-shadow: 0 0 0 3px rgba(118,188,33,0.14);
}

/* Modal overlay en modo claro */
[data-theme="light"] .modal-overlay {
  background: rgba(4, 43, 73, 0.45);
}

/* Header logo mark en modo claro */
[data-theme="light"] .pos-logo-mark,
[data-theme="light"] .login-logo-mark {
  background: rgba(118,188,33,0.10);
  border-color: rgba(118,188,33,0.28);
}

/* ============================================================
   BÚSQUEDA AVANZADA MODAL
   ============================================================ */
.modal-busqueda-avanzada {
  width: min(680px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}

/* ============================================================
   MENÚ DE OPCIONES
   ============================================================ */
.menu-opciones {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .25rem 0;
}

.btn-menu-opcion {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .8rem 1rem;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}

.btn-menu-opcion:hover,
.btn-menu-opcion:focus {
  background: var(--color-surface3);
  border-color: var(--color-border-h);
  outline: none;
}

/* ============================================================
   MOVIMIENTOS MODAL
   ============================================================ */
.modal-movimientos {
  width: min(960px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.movimientos-wrap {
  overflow-y: auto;
  max-height: 620px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.movimientos-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.movimientos-tabla thead {
  position: sticky;
  top: 0;
  background: var(--color-surface2);
}

.movimientos-tabla th {
  padding: .6rem .85rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted-l);
  border-bottom: 1px solid var(--color-border);
}

.movimientos-tabla th:not(:first-child),
.movimientos-tabla td:not(:first-child) {
  text-align: right;
}

.movimientos-tabla td {
  padding: .55rem .85rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.movimientos-tabla tbody tr:last-child td {
  border-bottom: none;
}

.movimientos-tabla tbody tr:hover td {
  background: var(--color-surface2);
}

/* ============================================================
   BOTÓN HAMBURGUESA
   ============================================================ */

.btn-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  padding: .35rem .5rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}

.btn-hamburger:hover,
.btn-hamburger.activo {
  color: var(--color-primary);
  border-color: var(--color-border-h);
  background: var(--color-surface3);
}

[data-theme="light"] .btn-hamburger {
  background: #f0f4f8;
  border-color: #d0dae3;
  color: #63788e;
}

[data-theme="light"] .btn-hamburger:hover,
[data-theme="light"] .btn-hamburger.activo {
  color: var(--dw-navy);
  border-color: var(--color-primary);
  background: #e4ecf4;
}

/* ============================================================
   SIDEBAR LATERAL
   ============================================================ */

/* Overlay oscuro detrás del sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 24, 0.55);
  backdrop-filter: blur(2px);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.sidebar-overlay.abierto {
  opacity: 1;
  pointer-events: auto;
}

/* Panel lateral */
.pos-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: 4px 0 24px rgba(2, 12, 24, 0.5);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
}

.pos-sidebar.abierto {
  transform: translateX(0);
}

/* Cabecera del sidebar */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .02em;
}

.btn-sidebar-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  padding: .3rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.btn-sidebar-cerrar:hover {
  color: var(--color-danger);
  border-color: rgba(240,82,82,.35);
  background: rgba(240,82,82,.07);
}

.sidebar-divider {
  height: 1px;
  background: var(--color-border);
  margin: .35rem 0;
  flex-shrink: 0;
}

/* Lista de navegación */
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: .3rem 0;
  flex: 1;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1.1rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: .9rem;
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}

.sidebar-nav-item svg {
  flex-shrink: 0;
  color: var(--color-muted);
  transition: color .12s;
}

.sidebar-nav-item:hover {
  background: var(--color-surface2);
  color: var(--color-primary);
}

.sidebar-nav-item:hover svg {
  color: var(--color-primary);
}

/* Tema claro */
[data-theme="light"] .pos-sidebar {
  background: #fff;
  border-color: #d0dae3;
  box-shadow: 4px 0 24px rgba(4,43,73,.12);
}

[data-theme="light"] .sidebar-header {
  border-color: #d0dae3;
}

[data-theme="light"] .sidebar-divider {
  background: #e4ecf4;
}

[data-theme="light"] .sidebar-nav-item:hover {
  background: #f0f4f8;
}

[data-theme="light"] .sidebar-overlay {
  background: rgba(4, 43, 73, 0.35);
}