/* Marca del artículo: siempre en mayúsculas, aunque en la base haya quedado
   guardada distinto (dato viejo, importado, etc.) — evita confusiones al leer.
   overflow-wrap: si algún día queda un valor rarísimo o sin espacios, baja de
   línea ahí mismo en vez de estirar la columna. */
.marca { text-transform: uppercase; overflow-wrap: anywhere; }

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #94a3b8;
  --line: #e7ecf3;
  --brand: #2563eb;
  --brand-dark: #1e40af;
  --brand-soft: #dbeafe;
  --verde: #2fa36b;
  --verde-soft: #d8f3e4;
  --ok: #059669;
  --ok-soft: #d1fae5;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ===== Layout con barra lateral ===== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
  color: #e0ecff;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 16px;
}
.brand .logo {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.16);
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand .logo svg { width: 22px; height: 22px; }
.brand .name { font-weight: 700; font-size: 16px; line-height: 1.1; }
.brand .sub { font-size: 11px; color: #b9d0f5; letter-spacing: .04em; text-transform: uppercase; }

.menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 11px;
  color: #cfe0fb;
  text-decoration: none;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.menu a svg { width: 18px; height: 18px; opacity: .85; }
.menu a:hover { background: rgba(255,255,255,.10); color: #fff; }
.menu a.activo { background: #fff; color: var(--brand-dark); font-weight: 600; }
.menu a.activo svg { opacity: 1; }

.usuario-box {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 14px;
  margin-top: 8px;
}
.usuario-box .quien { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.usuario-box .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff;
}
.usuario-box .datos { line-height: 1.2; }
.usuario-box .datos b { font-size: 13px; }
.usuario-box .datos small { font-size: 11px; color: #b9d0f5; text-transform: capitalize; }
.usuario-box form { margin: 0; }
.btn-salir {
  width: 100%;
  background: rgba(255,255,255,.12);
  color: #fff; border: none;
  padding: 9px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: background .15s;
}
.btn-salir:hover { background: rgba(255,255,255,.22); }

/* ===== "Ver como empleado" (vista previa de rol) ===== */
.aviso-vista {
  background: #ffd166; color: #4a3400;
  font-size: 11px; font-weight: 700; text-align: center;
  padding: 5px; border-radius: 7px; margin-bottom: 10px;
}
.btn-vista {
  width: 100%;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px dashed rgba(255,255,255,.5);
  padding: 8px; border-radius: 9px; cursor: pointer;
  font-size: 12px; font-weight: 500; margin-bottom: 8px;
  transition: background .15s;
}
.btn-vista:hover { background: rgba(255,255,255,.22); }
.btn-vista-salir { border-style: solid; border-color: #ffd166; color: #ffd166; }

/* ===== Menú retráctil (para dar más espacio al panel de ventas) ===== */
.nav-toggle {
  margin-left: auto;
  width: 30px; height: 30px; flex-shrink: 0;
  padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: none; border-radius: 8px;
  color: #fff; cursor: pointer;
  transition: background .15s;
}
.nav-toggle:hover { background: rgba(255,255,255,.28); }
.nav-toggle svg { width: 16px; height: 16px; transition: transform .2s; }

/* Franja invisible pegada al borde izquierdo (solo activa con el menú oculto). */
.nav-hotzone { position: fixed; left: 0; top: 0; width: 32px; height: 100vh; z-index: 40; display: none; }

/* Botoncito flotante para reabrir el menú de un toque (celular/tablet sin
   mouse). Oculto por defecto; solo aparece con el menú oculto, y se esconde
   mientras el menú está asomado (ahí ya está el botón de siempre, adentro). */
.nav-reabrir {
  display: none;
  position: fixed; top: 16px; left: 16px; z-index: 55;
  width: 38px; height: 38px;
  padding: 0;
  align-items: center; justify-content: center;
  background: var(--surface); color: var(--brand);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.nav-reabrir svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-reabrir:hover { background: var(--brand-soft); }

@media (min-width: 761px) {
  .layout.nav-oculta .nav-hotzone { display: block; }
  .layout.nav-oculta .nav-reabrir { display: flex; }
  .layout.nav-oculta.nav-peek .nav-reabrir { display: none; }

  /* El título se corre a la derecha para no quedar tapado por el botoncito
     flotante (que vive arriba a la izquierda mientras el menú está oculto). */
  .layout.nav-oculta .topbar { padding-left: 70px; }
  .layout.nav-oculta.nav-peek .topbar { padding-left: 32px; }

  /* Menú oculto: sale del flujo y se vuelve un panel que entra/sale deslizando;
     el contenido (.main) pasa a ocupar todo el ancho de la pantalla. */
  .layout.nav-oculta .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
  }
  .layout.nav-oculta.nav-peek .sidebar { transform: translateX(0); }

  /* La flechita apunta a la izquierda para ocultar; a la derecha para volver. */
  .layout.nav-oculta .nav-toggle svg { transform: rotate(180deg); }
}

/* ===== Contenido ===== */
.main { flex: 1; min-width: 0; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 32px;
  position: sticky; top: 0; z-index: 5;
  transition: padding-left .15s ease;
}
.topbar h1 { font-size: 20px; margin: 0; font-weight: 700; }
.topbar p { margin: 3px 0 0; color: var(--ink-soft); font-size: 13px; }
.content { padding: 26px 32px 60px; max-width: none; width: 100%; }

/* ===== Tarjetas de estadística ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
}
.stat .ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
}
.stat .ico svg { width: 22px; height: 22px; }
.stat .num { font-size: 24px; font-weight: 700; line-height: 1; }
.stat .lbl { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.ico.t-brand { background: var(--brand-soft); color: var(--brand-dark); }
.ico.t-ok { background: var(--ok-soft); color: var(--ok); }
.ico.t-warn { background: var(--warn-soft); color: var(--warn); }
.ico.t-danger { background: var(--danger-soft); color: var(--danger); }
.ico.t-money { background: #e0e7ff; color: #4338ca; }

/* ===== Tarjetas ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 16px; margin: 0; font-weight: 650; }
.card-head .sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.card-body { padding: 18px 20px; }
.card-body.tight { padding: 6px 8px; }

/* ===== Buscador ===== */
.buscador {
  position: relative; min-width: 240px;
}
.buscador svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted);
}
.buscador input { padding-left: 36px !important; width: 100%; }

/* ===== Formularios ===== */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
input[type=text], input[type=number], input[type=password], select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.divisor { flex-basis: 100%; height: 1px; background: var(--line); margin: 4px 0; }

/* Recuadro de UNA talla del artículo nuevo (ya cargada, o el de "agregar
   talla" mientras se completa una): cantidad y precio quedan editables ahí
   mismo, sin tener que abrir nada aparte. Se apilan una debajo de otra. */
.recuadro-talla-nv {
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin-top: 8px;
}
.talla-nv-nombre {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: #f8fafc; font-weight: 700; min-width: 20px; text-align: center;
}

/* Filtros de la bitácora (Seguimiento): pastillas para ver solo un tipo de
   cambio. La elegida va en azul. */
.filtros-bitacora { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-filtro {
  background: #eef2f7; color: var(--ink-soft);
  border: none; border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.chip-filtro:hover { background: #e2e8f0; }
.chip-filtro.activo { background: var(--brand); color: #fff; }

button, .btn {
  background: var(--brand);
  color: #fff; border: none;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, transform .05s;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--brand-dark); }
button:active { transform: translateY(1px); }
button svg, .btn svg { width: 16px; height: 16px; }
.btn-ghost { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }
.btn-ghost:hover { background: #f8fafc; color: var(--ink); }
button.danger, .btn.danger { background: #fff; color: var(--danger); border: 1px solid var(--danger-soft); padding: 7px 11px; }
button.danger:hover { background: var(--danger-soft); }
button.mini { padding: 7px 11px; font-size: 13px; }
select.mini { padding: 6px 9px; font-size: 13px; width: 100%; }

/* ===== Tablas ===== */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  position: sticky; top: 0;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: none; }

/* Precios: sin las flechitas de subir/bajar (el precio es un valor libre,
   no algo que se ajuste de a un paso; en cantidad sí se dejan, ahí ayudan). */
.precio-input::-webkit-outer-spin-button,
.precio-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.precio-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Nombres muy largos (o sin espacios) bajan de línea PERO nunca estiran la
   tabla ni corren las demás columnas: ancho tope + corte de palabra si hace falta. */
td.material { font-weight: 600; color: var(--ink); min-width: 200px; max-width: 300px; overflow-wrap: anywhere; text-transform: uppercase; }

/* Fila "foto + nombre" (Vender): la foto queda fija a la izquierda; el nombre
   se acomoda al lado y, si es largo, baja de línea ahí mismo (alineado con el
   propio texto, no debajo de la foto ni corriendo el resto de la fila). */
.fila-articulo { display: flex; align-items: flex-start; gap: 8px; }
.fila-articulo .nombre-wrap { min-width: 0; overflow-wrap: anywhere; }

/* Búsqueda de Vender: columnas de ancho FIJO (no dependen del contenido). Cada
   <th> trae su ancho puesto en la vista; acá solo se define que la tabla
   respete esos anchos siempre, así ninguna columna se corre por un nombre,
   marca o precio más largo de lo normal — solo cambia por el tamaño real de
   la pantalla o el zoom del navegador. */
#tabla-buscar { table-layout: fixed; width: 100%; min-width: 922px; }
#tabla-buscar th, #tabla-buscar td { padding-left: 8px; padding-right: 8px; }
#tabla-buscar td.material { min-width: 0; max-width: none; width: auto; }

/* Carrito de Vender: mismo tope de ancho en el nombre, así nunca se sale de
   la tarjeta ni empuja el resto de las columnas fuera de la ventana. Padding
   más chico para que las columnas angostas alcancen a los campos que llevan
   adentro (si no, se pasan del ancho fijo y aparece un scroll de sobra). */
#tabla-carrito { table-layout: fixed; width: 100%; }
#tabla-carrito th, #tabla-carrito td { padding-left: 8px; padding-right: 8px; }
#tabla-carrito td.material { min-width: 0; max-width: none; width: auto; }
#tabla-carrito td.num { white-space: nowrap; }

/* Nombre editable (panel Artículos): en vez de cortar el texto, crece hacia
   abajo a medida que hace falta (ver autoAltura() en el script de la vista). */
.area-nombre {
  font-family: inherit; font-size: 14px; line-height: 1.35;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  resize: none; overflow: hidden; min-height: 34px;
}
.area-nombre:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.acciones { display: flex; gap: 7px; }
.fila-oculta { display: none; }

/* ===== Badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-danger { background: var(--danger-soft); color: var(--danger); }
.b-neutral { background: #eef2f7; color: var(--ink-soft); }
.b-brand { background: var(--brand-soft); color: var(--brand-dark); }
.unidad-chip { background: #eef2f7; color: var(--ink-soft); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }

/* ===== Tallas =====
   Chips por talla: verde = hay stock, rojo tachado = agotada. En Vender son
   botones (tocás la talla que se vende); en los listados son solo lectura.
   El chip elegido se pinta verde lleno para que no queden dudas. */
.tallas-fila { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.talla-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.45;
  background: #eef2f7; color: var(--ink-soft);
  white-space: nowrap;
}
.talla-chip small { font-size: 10.5px; font-weight: 600; opacity: .8; }
.talla-chip.t-hay { background: #eef2f7; color: var(--ink-soft); }   /* con stock: plomo, tranquilo */
.talla-chip.t-agotada { background: var(--danger-soft); color: var(--danger); }  /* 0 stock: rojo, sin tachar */
button.talla-chip { cursor: pointer; }
button.talla-chip.t-hay:hover { border-color: var(--ink-soft); }
button.talla-chip.t-agotada { cursor: not-allowed; }
button.talla-chip.t-sel { background: var(--ok); color: #fff; }   /* elegida: verde (marca) */
button.talla-chip.t-sel small { opacity: .9; }
/* Chip de talla editable (línea pendiente en la hoja, o talla recién cargada
   en el mini-panel de artículo nuevo): se puede tocar para cambiarle la
   cantidad y el precio. El color al presionar es la señal de que se puede
   editar. No siempre es un <button> (en el mini-panel es un <span>, porque
   ya lleva adentro el link de quitar), por eso el selector es genérico. */
.talla-chip-editable { cursor: pointer; }
.talla-chip-editable:hover { border-color: var(--ink-soft); }
.talla-chip-editable:active { background: var(--brand); color: #fff; border-color: var(--brand); }
/* "+" para sumar otra talla a una línea de la hoja, debajo de sus chips. */
.talla-chip-mas {
  cursor: pointer; font-weight: 800; padding: 2px 10px;
  background: var(--brand-soft); color: var(--brand-dark);
}
.talla-chip-mas:hover { background: var(--brand); color: #fff; }

/* Etiqueta de talla ya elegida (carrito, ticket, historiales): azul como el código. */
.talla-tag { background: var(--brand-soft); color: var(--brand-dark); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Editor de tallas del panel Artículos (una filita por talla). */
.tallas-editor { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.tallas-editor .fila-talla { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tallas-editor .fila-talla input[type="text"] { width: 54px; text-transform: uppercase; padding: 5px 5px; font-size: 12px; }
.tallas-editor .fila-talla input[type="number"] { width: 52px; text-align: right; padding: 5px 5px; font-size: 12px; }
.tallas-editor .fila-talla .mini-lbl { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tallas-editor .total-tallas { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ===== Buscador con desplegable (Artículo existente en Ingresos) ===== */
.combo-lista {
  position: absolute; top: 100%; left: 0; z-index: 30;
  min-width: 300px; max-width: 460px; max-height: 300px; overflow-y: auto;
  margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.combo-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; cursor: pointer; font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.activo { background: var(--brand-soft); }
.combo-nuevo { font-weight: 600; color: var(--brand-dark); }
.combo-nom { font-weight: 600; color: var(--ink); }
.combo-marca { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; }
.combo-saldo { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.combo-vacio { padding: 10px 12px; color: var(--muted); font-size: 13px; }

/* ===== Avisos ===== */
.alerta {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 11px;
  margin-bottom: 20px; font-size: 14px; font-weight: 500;
}
.alerta svg { width: 18px; height: 18px; flex-shrink: 0; }
.alerta-ok { background: var(--ok-soft); color: #065f46; }
.alerta-err { background: var(--danger-soft); color: #991b1b; }
.vacio { color: var(--muted); font-size: 14px; padding: 26px; text-align: center; }
.precio::before { content: "S/ "; color: var(--muted); font-weight: 400; }

/* ===== Login ===== */
.login-page {
  min-height: 100vh;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 55%, #14275f 100%);
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
  width: 100%; max-width: 380px;
}
.login-card .brand-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-card .brand-top .logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: grid; place-items: center;
}
.login-card .brand-top .logo svg { width: 24px; height: 24px; }
.login-card h1 { font-size: 20px; margin: 0; }
.login-card .hint { color: var(--ink-soft); font-size: 13px; margin: 4px 0 22px; }
.login-card .campo { margin-bottom: 14px; }
.login-card button { width: 100%; justify-content: center; padding: 11px; margin-top: 6px; }

/* ===== Punto de venta ===== */
/* `minmax(0, 1fr)` y no `1fr` a secas: la tabla de búsqueda tiene muchas
   columnas y con `1fr` la columna izquierda no podía achicarse por debajo del
   ancho de esa tabla, así que en pantallas no tan anchas la página entera se
   corría para el costado. Con `minmax(0, ...)` la columna sí se achica y es la
   tabla la que se desplaza sola adentro de su marco (.tabla-wrap). */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pos-cart-empty { color: var(--muted); text-align: center; padding: 30px 10px; font-size: 14px; }
.qty-input { width: 64px; text-align: center; padding: 6px; }
.precio-input { width: 84px; text-align: right; padding: 6px; }
.btn-quitar {
  background: var(--danger-soft); color: var(--danger); border: none;
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 16px;
  display: grid; place-items: center; padding: 0;
}
.btn-quitar:hover { background: #fbcaca; }
.resumen { position: sticky; top: 90px; }
.resumen .linea { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--ink-soft); }
.resumen .linea.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; font-size: 20px; font-weight: 700; color: var(--ink); }
.resumen .vuelto { color: var(--verde); font-weight: 700; }
.btn-cobrar {
  width: 100%; justify-content: center; padding: 13px; font-size: 16px; margin-top: 14px;
  background: var(--verde);
}
.btn-cobrar:hover { background: #268a59; }
.btn-cobrar:disabled { background: #cbd5e1; cursor: not-allowed; }
.add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.unidad-chip.verde { background: var(--verde-soft); color: #1c7a4d; }

/* Misma razón que arriba para el `minmax(0, ...)`: si no, la tabla de búsqueda
   le fija un ancho mínimo a la columna y la página se corre para el costado. */
@media (max-width: 860px) { .pos { grid-template-columns: minmax(0, 1fr); } .resumen { position: static; } }
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 16px; }
  /* El logo se queda; el nombre "ORTOPEDIA OLAM" se saca (quien ya inició
     sesión sabe en qué sistema está) para dejarle todo ese ancho al menú,
     que es lo que de verdad hace falta usar en el celular. */
  .brand { border: none; margin: 0; padding: 0 10px 0 0; }
  .brand .sub, .brand .name { display: none; }
  .nav-toggle { display: none; }
  /* En fila, un admin tiene hasta 9 links y no entran en el ancho de un
     celular. `min-width: 0` deja que el menú SÍ se achique (por defecto un
     hijo flex no se achica más allá del ancho de su contenido, y eso empujaba
     TODA la página de costado); `overflow-x: auto` convierte lo que sobra en
     un deslizamiento propio del menú, con `flex-shrink: 0` en cada link para
     que no se aplasten unos contra otros. */
  .menu { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .menu a { flex-shrink: 0; }
  .usuario-box { border: none; padding: 0; margin: 0; flex-shrink: 0; }
  .usuario-box .quien { display: none; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ===========================================================================
   MODO INVENTARIO  (carga rápida, pensada para el celular)
   ---------------------------------------------------------------------------
   Reglas de esta pantalla, distintas al resto del sistema a propósito:
     - Todo lo que se toca mide al menos 46 px de alto (el dedo no acierta a
       un botón de 28 px como el mouse).
     - Los campos de texto van en 16 px: por debajo de eso, el navegador del
       iPhone hace zoom solo al tocarlos y descuadra la pantalla.
     - Lo que se elige aparece en una "hoja" que sube desde abajo, que es donde
       llega el pulgar — no en un cuadro centrado.
   =========================================================================== */
.inv-content { padding-bottom: 20px; }
body.con-barra .inv-content { padding-bottom: 96px; }

.inv-buscador { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; flex-wrap: wrap; }
.inv-buscador-campo { flex: 1; min-width: 200px; }
.inv-buscador-campo input { font-size: 16px; padding: 13px 13px 13px 38px; width: 100%; }
.inv-btn-nuevo { white-space: nowrap; padding: 13px 18px; font-size: 15px; }

/* --- Resultados de la búsqueda --- */
.inv-lista { display: flex; flex-direction: column; gap: 10px; }
.inv-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; text-align: left; cursor: pointer; color: var(--ink);
  box-shadow: var(--shadow); transition: border-color .15s, background .15s;
}
.inv-item:hover { background: #f8fafc; border-color: var(--brand); }
.inv-item .foto-mini { width: 52px; height: 52px; flex-shrink: 0; }
.inv-item-datos { flex: 1; min-width: 0; display: block; }
.inv-item-datos b { display: block; font-size: 14.5px; line-height: 1.25; }
.inv-item-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.inv-item-mas {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: grid; place-items: center; font-size: 22px; font-weight: 700;
}

/* --- Lo que está por guardarse --- */
.inv-pendiente {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.inv-pendiente:last-child { border-bottom: none; }

/* --- Hoja que sube desde abajo --- */
.inv-sheet-fondo {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 23, 42, .45); align-items: flex-end; justify-content: center;
}
.inv-sheet-fondo.abierta { display: flex; }
.inv-sheet {
  background: var(--card); width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  animation: inv-subir .18s ease-out;
}
@keyframes inv-subir { from { transform: translateY(100%); } to { transform: translateY(0); } }
.inv-sheet-tirador {
  width: 42px; height: 4px; border-radius: 3px; background: #cbd5e1;
  margin: 10px auto 4px; flex-shrink: 0;
}
.inv-sheet-cabeza {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.inv-sheet-cabeza .foto-mini { width: 46px; height: 46px; flex-shrink: 0; }
.inv-sheet-cuerpo { padding: 16px 18px; overflow-y: auto; flex: 1; }
.inv-sheet-pie {
  display: flex; gap: 10px; padding: 14px 18px;
  border-top: 1px solid var(--line); flex-shrink: 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.inv-sheet-pie > * { flex: 1; padding: 14px; font-size: 15px; }

.inv-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.inv-sheet-cuerpo > .inv-label:first-child { margin-top: 0; }
.inv-opcional { font-weight: 400; color: var(--muted); }
/* Va con `input.` adelante a propósito: la regla general de más arriba
   (`input[type=text], input[type=number]...`) pesa más que una clase suelta y
   dejaba estos campos en 14 px — y por debajo de 16 px el iPhone hace zoom
   solo al tocarlos y descuadra la pantalla. */
input.inv-input { width: 100%; font-size: 16px; padding: 12px 13px; }
/* Mismo motivo que arriba: con `1fr` a secas, los campos numéricos no dejan
   que las columnas se achiquen y la fila se sale de la pantalla. */
.inv-fila-doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* --- Contador de cantidad (− valor +) --- */
.inv-stepper { display: flex; align-items: stretch; gap: 8px; }
.inv-stepper button {
  width: 52px; flex-shrink: 0; font-size: 24px; font-weight: 700; padding: 0;
  background: var(--brand-soft); color: var(--brand-dark); border-radius: 11px;
}
.inv-stepper button:hover { background: #c7dbfd; }
.inv-stepper input {
  flex: 1; min-width: 0; text-align: center; font-size: 20px; font-weight: 700; padding: 12px;
}
.inv-stepper.chico button { width: 42px; font-size: 20px; }
.inv-stepper.chico input { font-size: 16px; padding: 9px; }

/* Bloque para sumar una talla, DENTRO de la misma hoja (antes esto abría otro
   cuadro encima y quedaba tapado). Dos renglones: arriba talla + cantidad,
   abajo el botón a lo ancho, que es lo cómodo con el pulgar. */
/* minmax(0, 1fr) y no 1fr a secas: una columna `1fr` NO se achica por debajo
   del contenido mínimo de lo que lleva adentro, y el contador de cantidad
   (que tiene un campo numérico) la empujaba más ancha que la pantalla del
   celular. Con minmax(0, …) la columna puede encogerse y todo entra. */
.inv-agregar-talla {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center;
  margin-top: 12px; padding: 12px; border-radius: 12px;
  background: #f8fafc; border: 1px dashed var(--line);
}
.inv-agregar-talla .inv-stepper { min-width: 0; }
.inv-agregar-titulo {
  grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted);
}
input.inv-talla-input { text-align: center; font-weight: 700; padding: 11px 6px; }
.inv-btn-agregar-talla { grid-column: 1 / -1; margin-top: 2px; }

.inv-talla-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.inv-talla-nombre {
  min-width: 56px; font-weight: 700; font-size: 14px;
  background: #eef2f7; border-radius: 8px; padding: 9px 10px; text-align: center;
}
.inv-talla-fila .inv-stepper { flex: 1; min-width: 0; }

.inv-btn-secundario {
  width: 100%; background: #fff; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 11px;
  padding: 13px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  margin-top: 6px; font-family: inherit;
}
.inv-btn-secundario:hover { background: #f8fafc; color: var(--ink); }
.inv-btn-quitar {
  width: 100%; background: #fff; color: var(--danger);
  border: 1px solid var(--danger-soft); border-radius: 11px;
  padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  margin-top: 8px; font-family: inherit;
}
.inv-btn-principal { font-weight: 600; }
.inv-foto-zona { display: flex; gap: 12px; align-items: flex-start; }
.inv-foto-zona .foto-mini { width: 74px; height: 74px; flex-shrink: 0; }

/* --- Sí/No de tallas --- */
.inv-toggle-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.inv-toggle {
  background: #fff; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.inv-toggle.activo { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }

/* --- Barra fija de abajo con el botón de guardar --- */
.inv-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
}
.inv-barra-info { font-size: 13px; color: var(--ink-soft); line-height: 1.25; }
.inv-barra-info b { font-size: 19px; color: var(--ink); display: block; }
.inv-barra-btn { flex: 1; padding: 15px; font-size: 15.5px; font-weight: 600; }

@media (max-width: 560px) {
  .inv-buscador { flex-direction: column; }
  .inv-btn-nuevo { width: 100%; }
  .inv-fila-doble { grid-template-columns: 1fr; }
  .inv-sheet { max-height: 96vh; }
}

/* ===== Mini-código correlativo ===== */
.cod-chip {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Miniatura de foto del producto =====
   Vacía: muestra un ícono de cámara (embebido, sin archivos). Con foto: se le
   pone la imagen como fondo (cover) por estilo en línea, que tapa el ícono. */
.foto-mini {
  display: inline-block;
  vertical-align: middle;
  width: 44px; height: 44px;
  border-radius: 9px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background: #f1f5f9 center/22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.foto-mini.sm { width: 36px; height: 36px; border-radius: 8px; margin-right: 8px; background-size: 18px; }
.foto-mini.editable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.foto-mini.editable:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Subir foto en la página de ingresos (producto nuevo) */
.foto-uploader { display: flex; align-items: center; gap: 12px; }
.foto-uploader .foto-mini { width: 64px; height: 64px; border-radius: 12px; background-size: 28px; }
.foto-acciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.foto-acciones .btn { cursor: pointer; }

/* ===== Vender: fila seleccionada con flechas / clic ===== */
.fila-sel { background: var(--brand-soft) !important; outline: 2px solid var(--brand); outline-offset: -2px; }
.fila-click { cursor: pointer; }

/* Columna derecha del POS: cobro + vista previa, fijas al hacer scroll.
   Si no entra entera en la pantalla, se desplaza ella sola: antes lo que
   sobraba quedaba cortado abajo y no había forma de llegar. */
.pos-right {
  position: sticky; top: 90px; align-self: start;
  max-height: calc(100vh - 102px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.pos-right .resumen { position: static; }
/* Dos campos a la par dentro del cuadro de Cobro. Cada par ahorra el alto de
   una fila entera, y ese alto se lo lleva la foto de la Vista previa. */
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/* El Vuelto no es un campo que se escriba, pero se muestra con la misma caja
   que el de al lado para que el par quede parejo. */
.vuelto-caja {
  padding: 9px 11px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--verde-soft, #ecfdf5);
  font-size: 14px;
  text-align: right;
}
/* Columna derecha más compacta: el cuadro de Cobro ocupa menos alto, así la
   Vista previa (que va arriba) puede mostrar la foto más grande y el Cobro
   entero sigue entrando en pantalla sin tener que bajar la página. */
.pos-right .card { margin-bottom: 12px; }
.pos-right #form-venta .card-body { padding-top: 12px; padding-bottom: 14px; }
.pos-right #form-venta .campo { margin-bottom: 10px !important; }
.pos-right .resumen .linea { padding: 3px 0; }

/* ===== Vista previa grande del artículo ===== */
/* Recuadro compacto: poco relleno alrededor para que la foto sea la protagonista. */
.preview-art .card-head { padding: 10px 14px; }
.preview-art .card-body { padding: 10px 14px 12px; }
/* Medidas de arranque. El JS (partials/foto-cuadro) le da después el tamaño
   exacto de la foto, para que la llene de borde a borde sin franjas blancas;
   `margin: 0 auto` la deja centrada cuando queda más angosta que la tarjeta. */
.preview-art .preview-foto {
  width: 100%; height: 250px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.preview-art .preview-foto.sin-foto {
  background-color: #f1f5f9;
  background-size: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.preview-datos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Sin tallas no se deja el hueco reservado: ese alto se lo lleva la foto. */
.preview-art #pv-tallas:empty { display: none; }
.preview-art .preview-foto:not(.sin-foto) { cursor: zoom-in; }

/* ===== Foto ampliada (lightbox) ===== */
.lightbox-caja { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-caja img { display: block; max-width: 90vw; max-height: 90vh; border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); }
.lightbox-cerrar { position: absolute; top: -14px; right: -14px; }

/* ===== Cuadro emergente (seguimiento) ===== */
/* z-index alto a propósito: un aviso o una confirmación SIEMPRE va arriba de
   todo lo demás. En Modo inventario los avisos salen con la hoja de abajo ya
   abierta (z-index 90) — con un número menor quedaban tapados detrás de ella. */
.modal-fondo {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  display: none; place-items: center;
  z-index: 120; padding: 20px;
}
.modal-fondo.abierto { display: grid; }
.modal-card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 780px;
  max-height: 88vh; overflow: auto;
}
.modal-card .card-head { position: sticky; top: 0; background: var(--surface); z-index: 2; }

/* Editor de un artículo (panel Artículos): la tabla queda solo de lectura y
   todo se cambia acá adentro. El pie se queda pegado abajo para tener siempre
   a mano Guardar, aunque el artículo tenga muchas tallas. */
.modal-art-card { max-width: 620px; }
.modal-pie {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--surface); z-index: 2;
}
.ma-nota { font-weight: 400; color: var(--muted); }
#ma-tallas .recuadro-talla-nv:first-child { margin-top: 0; }
/* El nombre es un textarea (crece con el texto): que se vea igual que los
   demás campos del cuadro. */
#ma-nombre { padding: 9px 11px; border-radius: 9px; }

/* ===== Aviso (reemplaza al alert() nativo del navegador) ===== */
.aviso-card { width: auto; max-width: 380px; }
/* Cuadro de talla con varios campos: se ensancha para que entren todos en
   una sola fila (talla, cantidad, p. sug. y p. mín. alineados). */
.aviso-card.aviso-ancho { max-width: 520px; }
.aviso-body {
  padding: 22px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.aviso-icono {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger-soft); color: var(--danger);
  display: grid; place-items: center;
}
.aviso-icono svg { width: 22px; height: 22px; }
.aviso-texto { margin: 0; max-width: 300px; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; }
.aviso-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#aviso-input { width: 140px; text-align: center; font-size: 20px; font-weight: 700; padding: 10px; }
.aviso-btn { width: auto; min-width: 120px; justify-content: center; margin-top: 0; padding: 9px 16px; font-size: 14px; }

/* ===== Hoja de ingreso: línea ya descargada (su stock ya entró) ===== */
.fila-descargada { background: #fafcfe; }
.fila-descargada .material, .fila-descargada .marca { color: var(--ink-soft); }
.fila-descargada input { background: #f1f5f9; color: var(--muted); cursor: not-allowed; }
.bloqueado { opacity: .55; pointer-events: none; }

/* ===== Hoja de ingreso: mini recuadro para crear un artículo nuevo ===== */
.recuadro-nuevo {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg);
}

/* Aviso de artículos parecidos (Ingresos → "+ Artículo nuevo"). Mientras se
   escribe el Nombre, avisa si eso que se está por crear ya existe. Es la
   defensa contra crear el mismo artículo dos veces. */
.similares-barra {
  margin: 0 16px 12px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line);
}
/* Ninguno parecido: verde, seguí tranquilo. */
.similares-barra.ok { background: var(--ok-soft); color: #065f46; border-color: transparent; }
/* Hay parecidos: ámbar, frená y mirá la lista de abajo. */
.similares-barra.alerta { background: #fef3c7; color: #92400e; border-color: transparent; font-weight: 600; }

/* ===== Impresión (cierre de caja) ===== */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .solo-print { display: block !important; }
  body { background: #fff; }
  .layout { display: block; }
  .content { padding: 0; }
  .card, .stat { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .grid-cierre { display: block !important; }
  .grid-cierre .card { margin-bottom: 14px; }
}

/* ===== Ventas anuladas ===== */
.fila-anulada { opacity: .55; }
.fila-anulada td.num b { text-decoration: line-through; }