/* ==========================================================================
   Cloti — tema "Cloti Azul" (v96, 20/10/2026)
   Reskin sobre SB Admin 2 / Bootstrap 4: paleta, tipografía, radios y
   sombras. No reemplaza sb-admin-2.min.css, se carga después para
   sobrescribirlo.

   REBRANDING COMPLETO (pedido de Guillermo, 20/10/2026, "PROMPT MAESTRO
   — LOOK & FEEL CLOTI WEB"): reemplaza la paleta celeste/turquesa "Cielo
   Cloti" (20/10/2026, entrega anterior) por la paleta oficial de marca
   que Guillermo definió con hex exactos (azul #1769FF, azul oscuro
   #0F2347, celeste #22C3EE, turquesa #10B981, etc.). Antes de aplicarla
   se verificó contra el logo real (`static/assets/img/cloti-logo.png`):
   es un degradé azul → celeste → verde turquesa, prácticamente idéntico
   a esta paleta — confirma que es la correcta, y que la paleta "Cielo
   Cloti" anterior (pensada a partir del tema de la app móvil, no del
   logo) era la que en realidad no combinaba con la marca real.

   Se mantienen los MISMOS NOMBRES de variable de siempre (--cloti-primary,
   --cloti-success, etc. — ningún selector de más abajo necesita tocarse
   por nombre) y se agregan unos pocos tokens nuevos (ver bloque :root)
   para los pares fondo-pastel/texto que antes no existían. Varios valores
   NO son el hex literal que dio Guillermo tal cual: varios de los
   colores de su tabla (turquesa, celeste, naranja) fallan el contraste
   mínimo de accesibilidad (WCAG AA, 4.5:1 para texto) si se usan tal
   cual como texto o como fondo sólido con texto blanco encima — turquesa
   #10B981 con texto blanco da 2.54:1, celeste #22C3EE da 2.08:1, por
   ejemplo. Se mantiene el HUE exacto que dio Guillermo pero se ajusta el
   brillo donde hace falta (ej. `--cloti-info` es un celeste oscurecido,
   no el celeste puro — el celeste puro queda disponible como
   `--cloti-accent` para usos decorativos sin texto encima, como
   degradés, barras de progreso o fondos pastel de íconos). Verificado
   programáticamente (fórmula de contraste WCAG) para cada combinación
   fondo/texto nueva — ver la 116va entrega en `estado-proyecto-cloti.md`
   para la tabla completa de contrastes.

   Tipografía: Inter (pedido explícito del prompt maestro) en vez de
   Nunito/Quicksand — se carga vía <link> a Google Fonts en cada base.html
   (base.html, superadmin/base_superadmin.html, login.html), no por
   @import acá, a propósito: un <link> en el template se sirve en cada
   request (inmune al bug de collectstatic/Whitenoise ya documentado en
   base.html), mientras que este archivo .css si depende de
   collectstatic. Nunito queda como fallback por si ese archivo estático
   no llegara a actualizarse en algún deploy. */

:root{
  --cloti-bg:        #F5F8FC;
  --cloti-surface:   #FFFFFF;
  --cloti-ink:       #0F2347;
  --cloti-ink-soft:  #64748B;
  --cloti-line:      #E5EBF3;

  --cloti-primary:        #1769FF;
  --cloti-primary-dark:   #1252C7;
  --cloti-primary-ink:    #FFFFFF;
  --cloti-primary-pastel: #DFEAFF;

  --cloti-secondary:        #10B981;
  --cloti-secondary-dark:   #0A7854;
  --cloti-secondary-ink:    #FFFFFF;
  --cloti-secondary-pastel: #DEF5ED;

  /* Celeste puro de marca — solo para usos decorativos sin texto encima
     (degradés, barras, fondos pastel de ícono): no pasa contraste AA
     como texto ni como fondo sólido con blanco, ver nota de arriba. */
  --cloti-accent:        #22C3EE;
  --cloti-accent-pastel: #E0F7FD;

  --cloti-success:      #059669;
  --cloti-success-bg:   #E6F4F0;
  --cloti-success-text: #04704F;

  --cloti-danger:      #DC4C59;
  --cloti-danger-bg:   #FCEDEE;
  --cloti-danger-text: #A53943;

  /* "Info" usa un celeste oscurecido (no el --cloti-accent puro) para
     poder servir de texto/fondo-sólido con buen contraste — ver nota de
     arriba. */
  --cloti-info:      #167F9B;
  --cloti-info-bg:   #E8F2F5;
  --cloti-info-text: #105F74;

  --cloti-warning:      #EA8B23;
  --cloti-warning-bg:   #FDF3E9;
  --cloti-warning-text: #985A17;

  --cloti-dark: #0F2347;
}

/* ---- base ---- */
body{
  background-color: var(--cloti-bg);
  color: var(--cloti-ink);
  font-family: "Inter", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1, h2, h3, h4, h5, h6{
  font-family: "Inter", "Nunito", sans-serif;
  font-weight: 700;
  color: var(--cloti-ink);
}
/* Cifras financieras (montos, saldos, KPIs) — tabulares, para que se
   alineen prolijo en listas/tablas/comparaciones (pedido explícito del
   prompt maestro, sección 3). `.cloti-monto`/`.valor-monetario` quedan
   como clase utilitaria puntual para usar en templates nuevos; además
   (Etapa 5, 20/10/2026) se aplica de forma global a toda celda
   `.text-right` de `.table` — en Cloti esa clase se usa casi siempre
   para alinear columnas de monto (Ventas/Compras/Gastos/Reportes/etc.),
   así que alcanza para cubrir la enorme mayoría de las tablas del
   sistema sin tener que tocar cada template uno por uno; aplicarla a una
   celda que no sea numérica no tiene ningún efecto visual negativo
   (tabular-nums solo afecta el ancho de los dígitos). */
.cloti-monto, .valor-monetario,
.table td.text-right, .table th.text-right{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
a{ color: var(--cloti-secondary-dark); }
a:hover{ color: var(--cloti-primary-dark); }

/* ---- sidebar ---- */
#accordionSidebar.sidebar{
  background: var(--cloti-surface) !important;
  border-right: 1px solid var(--cloti-line);
  box-shadow: 2px 0 12px -8px rgba(15,35,71,.12);
}
#accordionSidebar .sidebar-brand-text{
  color: var(--cloti-ink) !important;
  font-family: "Inter", sans-serif;
  font-weight: 800;
}
#accordionSidebar .sidebar-brand-icon img{ filter: none; }
#accordionSidebar .sidebar-divider{ border-top: 1px solid var(--cloti-line) !important; }
#accordionSidebar .sidebar-heading{
  color: var(--cloti-ink-soft) !important;
  opacity: 1 !important;
  font-weight: 800;
}

#accordionSidebar.sidebar .nav-item .nav-link{
  color: var(--cloti-ink) !important;
  font-weight: 700;
  border-radius: 12px;
  margin: 2px 10px;
  padding: .7rem .9rem;
}
#accordionSidebar.sidebar .nav-item .nav-link i{
  color: var(--cloti-secondary-dark);
}
#accordionSidebar.sidebar .nav-item .nav-link:hover{
  background: rgba(23,105,255,.18);
}
#accordionSidebar.sidebar .nav-item.active .nav-link,
#accordionSidebar.sidebar .nav-item .nav-link[aria-expanded="true"]{
  background: var(--cloti-primary) !important;
  color: var(--cloti-primary-ink) !important;
}
#accordionSidebar.sidebar .nav-item.active .nav-link i{ color: var(--cloti-primary-ink); }

#accordionSidebar .nav-item .collapse .collapse-inner,
#accordionSidebar .nav-item .collapsing .collapse-inner{
  background: var(--cloti-surface) !important;
  border: 1px solid var(--cloti-line);
  box-shadow: 0 8px 18px -12px rgba(15,35,71,.22);
  border-radius: 14px !important;
}
#accordionSidebar .collapse-item{
  color: var(--cloti-ink) !important;
  border-radius: 8px;
  font-weight: 600;
  /* 94va entrega (08/10/2026): el theme vendorizado fuerza
     `white-space: nowrap` en `.collapse-item` (los links de los
     submenús del sidebar, ej. "Compras"/"Reportes"/"Configuración") —
     con un texto más largo que el ancho del panel ("Cuenta Corriente
     Proveedores", "Comparativo por Sucursal", "Configuración
     Financiera"), el texto no se recorta ni ajusta: directamente se
     desborda por encima del contenido principal. Se deja que envuelva
     en 2 líneas en vez de pisar la línea de arriba uno por uno con un
     ancho fijo por ítem — con esto alcanza para cualquier texto largo,
     actual o futuro, sin tener que acortar cada uno a mano. */
  white-space: normal;
  line-height: 1.25;
}
#accordionSidebar .collapse-item:hover,
#accordionSidebar .collapse-item:active{
  background: rgba(23,105,255,.22) !important;
  color: var(--cloti-ink) !important;
}
#sidebarToggle{ background-color: var(--cloti-primary); }
#sidebarToggle::after{ color: var(--cloti-primary-ink); }

/* ---- topbar ---- */
.topbar{
  background: var(--cloti-surface) !important;
  border-bottom: 1px solid var(--cloti-line);
  box-shadow: 0 4px 14px -12px rgba(15,35,71,.28) !important;
}
.topbar .nav-link{ color: var(--cloti-ink) !important; }

/* ---- cards & surfaces ---- */
.card{
  border: 1px solid var(--cloti-line);
  border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(15,35,71,.32) !important;
}
.card.shadow, .shadow{ box-shadow: 0 10px 24px -18px rgba(15,35,71,.32) !important; }
.card-header{
  background-color: var(--cloti-surface);
  border-bottom: 1px solid var(--cloti-line);
  border-radius: 16px 16px 0 0 !important;
}
/* Títulos de tarjetas (card-header h6) — pedido de Guillermo (20/10/2026,
   sobre el Balance ya en producción): "los titulos favor poner en color
   negro y con la letra un poco mas grande". Antes estos títulos usaban
   `text-primary` (celeste oscuro, ver más abajo); acá se sobreescribe
   puntualmente para que vayan en negro/tinta y un toque más grandes que
   el tamaño por defecto de SB Admin 2 (.85rem). Es una regla global (no
   un cambio solo en inicio.html) para que valga en todas las pantallas
   del sistema que usan el mismo patrón de título, sin tener que editar
   cada template uno por uno — mismo criterio de "todo el sistema" ya
   usado para el resto de la paleta.
   (`.card-header h6` tiene más especificidad que `.text-primary` solo,
   así que gana incluso siendo ambas reglas `!important`.) */
.card-header h6{
  color: var(--cloti-ink) !important;
  font-size: .95rem;
}

.border-left-primary{ border-left: .28rem solid var(--cloti-primary) !important; }
.border-left-success{ border-left: .28rem solid var(--cloti-success) !important; }
.border-left-danger{  border-left: .28rem solid var(--cloti-danger) !important; }
.border-left-info{    border-left: .28rem solid var(--cloti-info) !important; }
.border-left-warning{ border-left: .28rem solid var(--cloti-warning) !important; }

/* Ícono de las tarjetas de "menú"/resumen con borde de color (Reportes,
   Panel de Administración, Migraciones) — Etapa 6 del rebranding
   (20/10/2026): reemplaza el ícono grande desvanecido (`fa-2x
   text-gray-300`, look viejo de SB Admin 2) por un ícono con fondo
   pastel, mismo criterio que ya tienen las tarjetas KPI del Balance
   (`.balance-kpi .kpi-icono` en inicio.html) — uno por cada variante de
   `border-left-X` de arriba, reusando los mismos tokens pastel-bg/
   texto-de-marca. Pedido explícito de Guillermo tras ver la v97
   ("unificar las tarjetas de menú con el estilo del Balance"). */
.menu-tile-icono{
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex: 0 0 auto;
}
.menu-tile-icono.icono-primary{   background: var(--cloti-primary-pastel);   color: var(--cloti-primary); }
.menu-tile-icono.icono-secondary{ background: var(--cloti-secondary-pastel); color: var(--cloti-secondary-dark); }
.menu-tile-icono.icono-success{   background: var(--cloti-success-bg);       color: var(--cloti-success-text); }
.menu-tile-icono.icono-danger{    background: var(--cloti-danger-bg);        color: var(--cloti-danger-text); }
.menu-tile-icono.icono-info{      background: var(--cloti-info-bg);          color: var(--cloti-info); }
.menu-tile-icono.icono-warning{   background: var(--cloti-warning-bg);       color: var(--cloti-warning-text); }

/* ---- buttons ---- */
.btn{ border-radius: 999px; font-weight: 700; }
.btn-sm{ border-radius: 999px; }
.btn-primary{
  background-color: var(--cloti-primary) !important;
  border-color: var(--cloti-primary) !important;
  color: var(--cloti-primary-ink) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--cloti-primary-dark) !important;
  border-color: var(--cloti-primary-dark) !important;
  color: #fff !important;
}
.btn-secondary{
  background-color: var(--cloti-secondary-pastel) !important;
  border-color: var(--cloti-secondary-pastel) !important;
  color: var(--cloti-ink) !important;
}
.btn-secondary:hover{ background-color: #CFF1E6 !important; border-color:#CFF1E6 !important; }
.btn-success{ background-color: var(--cloti-success) !important; border-color: var(--cloti-success) !important; }
.btn-danger{  background-color: var(--cloti-danger) !important;  border-color: var(--cloti-danger) !important; }
.btn-info{    background-color: var(--cloti-info) !important;    border-color: var(--cloti-info) !important; }
.btn-warning{ background-color: var(--cloti-warning) !important; border-color: var(--cloti-warning) !important; color: var(--cloti-ink) !important; }
.btn-link{ color: var(--cloti-secondary-dark); }

/* ---- badges & text utilities ---- */
.badge{ border-radius: 999px; font-weight: 700; }
.badge-primary{ background-color: var(--cloti-primary) !important; color: var(--cloti-primary-ink) !important; }
.badge-success{ background-color: var(--cloti-success) !important; }
.badge-danger{  background-color: var(--cloti-danger) !important; }
.badge-info{    background-color: var(--cloti-info) !important; }
.badge-warning{ background-color: var(--cloti-warning) !important; color: var(--cloti-ink) !important; }
.badge-secondary{ background-color: var(--cloti-secondary-pastel) !important; color: var(--cloti-ink) !important; }
.badge-light{ background-color: #F0F1F3 !important; color: var(--cloti-ink-soft) !important; }

.text-primary{ color: var(--cloti-primary-dark) !important; }
.text-success{ color: var(--cloti-success-text) !important; }
.text-danger{  color: var(--cloti-danger) !important; }
.text-info{    color: var(--cloti-info) !important; }
.text-warning{ color: var(--cloti-warning-text) !important; }
.text-gray-800, .text-gray-900{ color: var(--cloti-ink) !important; }
.text-gray-600{ color: var(--cloti-ink-soft) !important; }
.text-gray-400, .text-gray-300{ color: #A9B4C6 !important; }
.text-muted{ color: var(--cloti-ink-soft) !important; }

/* ---- tables ---- */
/* Pedido de Guillermo (20/10/2026): TODAS las tablas del sistema pasan a
   verse como la de Inventario/Productos (`.tabla-inventario`, inline en
   `listarArticulos.html`, 113va/114va entrega) — encabezado CLARO, texto
   chico en mayúsculas, sin bordes redondeados — en vez del encabezado
   oscuro/negro que tenían la mayoría de las demás tablas hasta ahora
   (incluida "Movimientos del Período" del Balance nuevo). Esta regla pisa
   a `.table-dark`/`thead.table-dark` (clase que siguen usando decenas de
   templates) para que todas queden iguales sin tener que ir plantilla por
   plantilla sacando esa clase. Texto un poco más grande (12.5px vs. los
   11px originales de Inventario) y más oscuro (`--cloti-ink` en vez de
   `--cloti-ink-soft`) que el original, a pedido explícito de Guillermo
   ("con el texto un poco mas grande y oscuro para mejor lectura"). El
   mismo ajuste de tamaño/color se replicó en el `<style>` inline de
   `listarArticulos.html` para que la propia tabla de Inventario, que es
   la referencia, también se vea así. */
.table{ color: var(--cloti-ink); }
.table thead th,
.table thead.table-dark th, table thead.table-dark th, .table-dark, .table-dark th, .table-dark td{
  background-color: var(--cloti-bg) !important;
  color: var(--cloti-ink) !important;
  border: none !important;
  border-bottom: 2px solid var(--cloti-line) !important;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;
  padding: 10px 12px;
  white-space: nowrap;
}
.table-bordered{ border-color: var(--cloti-line); }
.table-bordered td, .table-bordered th{ border-color: var(--cloti-line); }
.table-striped tbody tr:nth-of-type(odd){ background-color: #F3F8FF; }
.table-hover tbody tr:hover{ background-color: #EAF2FF; }

/* ---- Inventario rediseñado (113va entrega, 19/10/2026) ----
   El CSS de `.tabla-inventario` se movió a un <style> inline dentro de
   templates/inventario/listarArticulos.html (114va entrega, 19/10/2026):
   dos entregas seguidas el CSS nuevo de este archivo no se reflejaba en
   producción aunque el HTML sí (clásico síntoma de que no se corrió
   `collectstatic` tras copiar los archivos) — al estar inline en el
   template, esta pantalla queda inmune a ese problema de deploy. Si en el
   futuro se necesita tocar el look de Inventario, editar ese <style>, no
   acá. (Desde el 20/10/2026 esta pantalla ya NO es la única con este
   look: ver la regla `.table thead th` de la sección "tables" de más
   arriba, que ahora lo aplica a toda la web.) */

/* ---- forms ---- */
.form-control{
  border-radius: 12px;
  border-color: var(--cloti-line);
  background-color: #F8FAFE;
}
.form-control:focus{
  border-color: var(--cloti-primary);
  box-shadow: 0 0 0 .18rem rgba(23,105,255,.28);
}
select.form-control{ border-radius: 12px; }

/* Etapa 6 del rebranding (20/10/2026, pasada de responsividad): un
   `<select class="form-control">` dentro de un `.col-auto` (ancho por
   contenido, no por fracción de 12) puede colapsar a un ancho casi nulo
   en pantallas chicas — Chrome calcula el ancho mínimo del flex-item sin
   tener en cuenta el texto de las opciones, y el `width: 100%` de
   `.form-control` no alcanza a corregirlo. Detectado en "Agrupar por" de
   Reportes > Balance por Período (se veía solo una letra cortada del
   select en celular). Ancho mínimo fijo para que siempre se alcance a
   leer la opción elegida. */
.form-row .col-auto select.form-control{ min-width: 110px; }

/* ---- alerts ---- */
.alert{ border-radius: 14px; border: none; }
.alert-success{ background-color: var(--cloti-success-bg); color: var(--cloti-success-text); }
.alert-danger{  background-color: var(--cloti-danger-bg);  color: var(--cloti-danger-text); }
.alert-warning{ background-color: var(--cloti-warning-bg); color: var(--cloti-warning-text); }
.alert-info{    background-color: var(--cloti-info-bg);    color: var(--cloti-info-text); }

/* ---- login (bg-gradient-primary usado en body de login.html) ---- */
.bg-gradient-primary{
  background: linear-gradient(180deg, var(--cloti-secondary) 0%, var(--cloti-primary) 100%) !important;
}
.form-control-user{ border-radius: 14px !important; }
.btn-user{ border-radius: 999px !important; }

/* Contenedor de gráficos Chart.js (Balance, Reportes) — Etapa 6 del
   rebranding (20/10/2026): se detectó en la pasada de responsividad que
   los gráficos de barras/línea (Evolución del Balance, y los de
   Reportes > Balance/Canal/Sucursales/Ticket Promedio) quedaban MUY
   aplastados en celular — todos usaban `responsive: true` solo, sin
   `maintainAspectRatio: false`, y el `<canvas height="90">` fijaba una
   proporción ancho:alto pensada para escritorio (~9:1) que Chart.js
   mantenía incluso en una tarjeta angosta de 345px, dejando casi sin
   alto al gráfico y superpuestos la leyenda/los ejes. Envolviendo el
   `<canvas>` en este contenedor de alto fijo + `maintainAspectRatio:
   false` en las opciones de cada gráfico, el gráfico sencillamente
   ocupa el ancho disponible y mantiene un alto legible en cualquier
   pantalla. (Los gráficos de dona —Distribución de Gastos, etc.— no
   tenían este problema, no se tocaron.) ---- */
.cloti-chart-wrap{ position: relative; height: 280px; }

/* ---- misc ---- */
.dropdown-menu{ border-radius: 14px; border-color: var(--cloti-line); }
.scroll-to-top{ background: var(--cloti-ink); }
.scroll-to-top:hover{ background: var(--cloti-secondary); }
footer.sticky-footer{ background-color: var(--cloti-surface) !important; border-top: 1px solid var(--cloti-line); }

/* ---- combo buscable (cliente/proveedor) — ítem 9 del checklist de
   pendientes: select2 (reemplaza al buscador-combo.js hecho a mano de
   entregas anteriores), con un retoque mínimo para que combine con el
   resto de los inputs redondeados de Cloti. ---- */
.select2-container--bootstrap4 .select2-selection{
  border-radius: 12px;
  border-color: var(--cloti-line);
  background-color: #F8FAFE;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection{
  border-color: var(--cloti-primary);
  box-shadow: 0 0 0 .18rem rgba(23,105,255,.28);
}
.select2-container--bootstrap4 .select2-dropdown{
  border-color: var(--cloti-line);
  border-radius: 10px;
  overflow: hidden;
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected]{
  background-color: var(--cloti-primary-pastel);
  color: inherit;
}
/* El combo de Cliente en Nueva Venta usa form-control-sm (panel angosto
   del carrito) — select2 no copia ese modificador solo, así que se ajusta
   la altura/tipografía a mano para que combine con los demás campos chicos
   de ese panel. */
#clienteSelect + .select2-container .select2-selection--single{
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem;
  font-size: .875rem;
}
#clienteSelect + .select2-container .select2-selection__rendered{
  line-height: 1.5;
  padding-left: 0;
  padding-right: 20px;
}
#clienteSelect + .select2-container .select2-selection__arrow{
  height: calc(1.5em + .5rem);
}

/* ---- mosaico de artículos (Nueva Venta) ---- */
/* v97 (20/10/2026, Etapa 5 del rebranding): estos colores quedaron
   afuera a propósito en la v96 (acentos chicos y puntuales, no "la cara"
   del sistema) — ahora que Ventas/Compras entran en esta etapa, se
   actualizan al mismo criterio del resto: precio/ícono en azul de marca,
   selección en verde de éxito (antes eran restos de la paleta ámbar
   "Cálido Almacén", de antes de la 20/10/2026). */
.mosaico-articulo{
  cursor: pointer; border: 1px solid var(--cloti-line); border-radius: 12px;
  padding: 8px; text-align: center; background: #fff; transition: box-shadow .15s, transform .15s;
  height: 100%; position: relative;
}
.mosaico-articulo:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-2px); }
.mosaico-articulo img, .mosaico-articulo .sin-imagen{
  width: 100%; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; background: var(--cloti-bg);
}
.mosaico-articulo .sin-imagen{ display: flex; align-items: center; justify-content: center; color: var(--cloti-ink-soft); font-size: 22px; }
.mosaico-articulo .nombre-art{ font-size: 12px; font-weight: 600; line-height: 1.2; height: 30px; overflow: hidden; }
.mosaico-articulo .precio-art{ font-size: 12px; color: var(--cloti-primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.mosaico-articulo .stock-art{ font-size: 10px; color: var(--cloti-ink-soft); }
.mosaico-articulo .check-seleccionado{
  display: none; position: absolute; top: 4px; right: 4px; background: #fff;
  border-radius: 50%; line-height: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.mosaico-articulo .check-seleccionado i{ color: var(--cloti-success); font-size: 20px; }
.mosaico-articulo.seleccionado{ border-color: var(--cloti-success); box-shadow: 0 0 0 2px rgba(5,150,105,.35); }
.mosaico-articulo.seleccionado .check-seleccionado{ display: block; }

/* ---- tabla de carrito (Nueva Venta): columnas angostas necesitan ancho
   fijo y sin flechas de spinner, si no el precio/cantidad no se alcanza a
   ver dentro del input ---- */
/* Ajuste 07/10/2026: Guillermo reportó los campos de Precio/Cantidad del
   carrito "muy chicos y apretados" al cargar una venta. Los anchos fijos
   en px de las columnas 2 y 3 (ver `crearVenta.html`, ahí es donde
   realmente se define el ancho de esas columnas porque la tabla usa
   table-layout:fixed) se ensancharon (90px→115px, 65px→80px) y la
   tipografía/padding de los inputs se agrandó para que se vean más
   cómodos — sin tocar el ancho de columna 1 (Art., se sigue recortando
   con "…" si el nombre no entra) ni el layout general de la pantalla. */
#carritoTable{ table-layout: fixed; }
#carritoTable td{ padding: 6px 4px; }
#carritoTable input.form-control-sm{ padding: 5px 6px; font-size: 14px; width: 100%; min-width: 0; text-align: right; }
#carritoTable select.promo-select{ font-size: 12px !important; padding: 3px 4px; }
#carritoTable input[type=number]::-webkit-outer-spin-button,
#carritoTable input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#carritoTable input[type=number]{ -moz-appearance: textfield; }

/* Fix 08/10/2026 (reportado por Guillermo): el carrito de Nueva Venta
   (5 columnas: Art./Precio/Cant./Subt./papelera) y el de Nueva Compra
   (6 columnas: Art./Precio Costo/Cant./Unidad/Subt./papelera) comparten
   el mismo id `#carritoTable`, pero hasta este fix tenían las MISMAS 5
   reglas de ancho por columna (`th:nth-child(n)`) — pensadas solo para
   Ventas. En Compras eso corría todo un lugar: "Subt." heredaba el 7%
   pensado para la papelera, y la papelera (la 6ta columna real) se
   quedaba sin ningún ancho declarado. Con `table-layout:fixed`, una
   columna sin ancho en la fila de encabezado rompe el cálculo de toda la
   tabla — el navegador la ensancha según su contenido mínimo y el resto
   se desacomoda, viéndose "muy grande"/mal recortado. Se separan las
   reglas por tabla con una clase propia para cada una (`carrito-ventas`/
   `carrito-compras`, agregadas al `<table>` de cada template), en vez de
   depender solo del id compartido.

   Segunda vuelta del mismo fix, mismo día: el primer intento (solo
   porcentajes + los dos anchos en px de Precio/Cant.) se veía bien en una
   ventana ancha, pero Guillermo lo probó en una ventana/resolución más
   angosta y volvió a aparecer el mismo síntoma ("Subt." recortado letra
   por letra) — reproducido acá achicando el viewport de Playwright. El
   intento de esa segunda vuelta fue agregar un `min-width` grande a cada
   tabla (460/540px) para que no se achicara más allá de un piso legible.

   Tercera vuelta (mismo día): Guillermo reportó que la columna Subtotal
   de Compras seguía viéndose "muy chica, entra un carácter por línea" —
   pero esta vez el carrito de Ventas ya estaba bien. Investigando con el
   navegador real (Playwright, inspeccionando anchos calculados) se
   encontró el verdadero problema: el panel "Carrito de la Compra" es una
   columna Bootstrap `col-md-5` (41.6% del contenedor) junto al mosaico de
   artículos en `col-md-7` — en un escritorio normal eso da un panel de
   apenas ~400-450px de ancho real, bastante MENOS que el `min-width:
   540px` que se le había puesto a `.carrito-compras` en la segunda
   vuelta. Como la tabla nunca entraba en su panel, SIEMPRE quedaba
   recortada por el scroll horizontal de `.table-responsive` — y lo que
   Guillermo veía al intentar mirar la columna Subtotal era solo una
   tira angosta de esa columna en el borde del scroll (de ahí "entra un
   carácter por línea"), no la columna completa. El `min-width` de la
   segunda vuelta, pensado como piso de seguridad para ventanas angostas,
   terminó siendo más ancho que el panel real incluso en una ventana
   ancha/normal — el problema no era que la tabla se achicara de más,
   sino que se le pedía ser más ancha de lo que su panel permite casi
   siempre.

   Fix real (tercera vuelta): se baja el `min-width` a un piso mucho más
   chico (300px), muy por debajo del ancho real del panel en cualquier
   resolución de escritorio normal — ya no fuerza un ancho que no entra.
   La protección contra el texto partido letra por letra la dan el
   `white-space: nowrap` + recorte con "…" (de la segunda vuelta, esto sí
   funcionaba bien y se mantiene sin cambios) en TODAS las columnas
   angostas, que ya alcanza por sí solo para que, sea cual sea el ancho
   real del panel, el texto se recorte prolijo en vez de partirse —
   sin necesitar que la tabla sea más ancha que su contenedor. El
   `min-width: 300px` que queda es solo una red de seguridad para que
   ninguna columna llegue a 0px en un caso extremo, no un ancho que la
   tabla deba alcanzar sí o sí. El `<select>` de "Unidad" (cuando el
   artículo tiene unidades alternativas) se sigue forzando a `width:100%`
   dentro de su celda, igual que ya hacían los `<input>` — sin esto, un
   `<select>` puede imponer su propio ancho mínimo y empujar la tabla más
   ancha de lo declarado. */
.carrito-ventas{ min-width: 300px; }
.carrito-ventas th:nth-child(1), .carrito-ventas td:nth-child(1){ width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-ventas th:nth-child(2), .carrito-ventas td:nth-child(2){ width: 15%; overflow: hidden; white-space: nowrap; }
.carrito-ventas th:nth-child(3), .carrito-ventas td:nth-child(3){ width: 11%; overflow: hidden; white-space: nowrap; }
.carrito-ventas th:nth-child(4), .carrito-ventas td:nth-child(4){ width: 25%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-ventas th:nth-child(5), .carrito-ventas td:nth-child(5){ width: 7%; overflow: hidden; white-space: nowrap; }

.carrito-compras{ min-width: 300px; }
/* v99 hotfix (20/10/2026): el encabezado "Precio Costo" (2 palabras)
   se cortaba a "PRECIO C" en el carrito de Nueva Compra — reportado por
   Guillermo con captura de pantalla ya con la v99 desplegada. El texto
   se acortó a "Costo" (templates/compras/crearCompra.html, mismo
   criterio que "Todas las categorías"→"Todas" en Nueva Venta), y acá se
   le da un poco más de ancho a esta columna (14%→16%) a costa de la
   columna de Art. (30%→28%) para que "COSTO" entre en una sola línea
   también en celular, sin depender de que el texto quede más corto. */
.carrito-compras th:nth-child(1), .carrito-compras td:nth-child(1){ width: 28%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-compras th:nth-child(2), .carrito-compras td:nth-child(2){ width: 16%; overflow: hidden; white-space: nowrap; }
.carrito-compras th:nth-child(3), .carrito-compras td:nth-child(3){ width: 12%; overflow: hidden; white-space: nowrap; }
.carrito-compras th:nth-child(4), .carrito-compras td:nth-child(4){ width: 17%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-compras th:nth-child(5), .carrito-compras td:nth-child(5){ width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-compras th:nth-child(6), .carrito-compras td:nth-child(6){ width: 7%; overflow: hidden; white-space: nowrap; }
#carritoTable select.unidad-linea{ width: 100%; min-width: 0; font-size: 12px; padding: 3px 2px; }

/* Fix (reportado por Guillermo, 18/10/2026): el encabezado "Precio Costo"
   del carrito de Nueva Compra se veía recortado a mitad de palabra
   ("Precio C"), sin los "…" que sí tienen las celdas de datos. Causa
   real: las reglas de ancho de más arriba (`th:nth-child(n)`) usan
   `overflow:hidden; white-space:nowrap` para TODAS las celdas de la
   columna — pensado para que un precio o una cantidad (textos cortos, de
   largo variable) no empujen la tabla — pero el ENCABEZADO es un texto
   fijo más largo ("Precio Costo", "Unidad") que nunca entra en el 14%/17%
   de una columna angosta, sea cual sea el ancho real del panel (se
   confirmó midiendo con Playwright en desktop y en mobile: el `scrollWidth`
   del `<th>` es siempre mayor que su ancho real). Se le permite partir en
   2 líneas, solo a los encabezados (`thead th`) y solo con tipografía más
   chica — el contenido de cada fila (`tbody td`) no se toca, sigue en una
   sola línea recortada con "…" si hiciera falta, que es lo que corresponde
   para datos de largo variable. Mismo criterio aplicado también al
   carrito de Ventas, como prevención (hoy sus encabezados entran bien,
   pero por las mismas reglas de ancho podrían dejar de entrar si el panel
   se angosta más en el futuro). */
/* Etapa 6 del rebranding (20/10/2026, pasada de responsividad): esta
   regla usaba el selector por clase `.carrito-compras thead th,
   .carrito-ventas thead th` — misma especificidad CSS que la regla
   general `.table thead th{ white-space: nowrap !important }` de más
   abajo (1 clase + 2 elementos en ambos casos), así que con las dos en
   `!important` terminaba ganando la que apareciera después en el
   documento. Eso no era un problema en este archivo (esta regla ya
   viene después), pero la copia defensiva de esta misma regla general
   que vive inline en `base.html` (ver ese archivo, bug de
   collectstatic) SÍ aparece después de TODO `cloti-theme.css` en la
   página — así que, aunque acá se gane el empate, en el documento
   completo volvía a ganar "nowrap", y los encabezados "PRECIO"/"CANT."/
   "SUBT." quedaban pegados unos con otros en pantallas angostas. Se
   pasa a `#carritoTable thead th` (selector por ID — Ventas y Compras
   comparten el mismo id en su carrito) para que la especificidad por sí
   sola decida el empate sin depender del orden en el documento. */
#carritoTable thead th{
  white-space: normal !important;
  overflow-wrap: break-word;
  overflow: visible !important;
  /* `font-size`/`padding` acá también necesitan `!important`: la copia
     defensiva de base.html (ver ese archivo) pone `font-size: 12.5px
     !important; padding: 10px 12px !important;` en la regla general de
     encabezados — 12px de padding de cada lado es más de la mitad de
     una columna de 45px en celular (Precio/Cant.), así que aunque el
     texto ya pueda partirse en 2 líneas (arriba), con esa fuente/relleno
     tan grandes terminaba partiéndose letra por letra ("C"/"A"/"N"/"T").
     Detectado en la pasada de responsividad de la Etapa 6, probando en
     viewport de celular real (375px) con Playwright. */
  font-size: 11px !important;
  line-height: 1.15;
  vertical-align: middle;
  padding: 6px 4px !important;
}

/* 94va entrega (08/10/2026): Precio/Cant. (Ventas) y Precio Costo/Cant.
   (Compras) tenían un ancho fijo en px (115/80px y 100/65px) pensado
   "por las dudas", bastante más de lo que un precio o una cantidad
   necesitan de verdad — Guillermo reportó que terminaban viéndose más
   grandes que la columna Artículo. Se pasaron las 5 columnas de Ventas y
   las 6 de Compras a un único esquema de porcentajes (ya no se mezcla
   % y px, para que el cálculo de `table-layout:fixed` sea predecible),
   dándole más del doble de ancho relativo a Artículo frente a cada
   columna numérica. Verificado con Playwright, midiendo el ancho real
   renderizado de cada columna. */

/* ---- filtro rápido de categorías (Nueva Venta) ---- */
.categoria-btn{ margin: 0 4px 6px 0; }
.categoria-btn.activa{ font-weight: 700; }

/* ---- selector de Canal de Venta (Ítem 20, Física/Online) ---- */
.canal-venta-btn.activo{ font-weight: 700; }

/* ---- mosaico de métodos de pago (Nueva Venta), mismo lenguaje visual
   que el mosaico de artículos ---- */
.metodo-pago-card{
  cursor: pointer; border: 1px solid var(--cloti-line); border-radius: 12px;
  padding: 10px 4px; text-align: center; background: #fff; transition: box-shadow .15s, transform .15s;
  position: relative;
}
.metodo-pago-card:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-2px); }
.metodo-pago-card i{ font-size: 20px; color: var(--cloti-primary-dark); display: block; margin-bottom: 4px; }
.metodo-pago-card .metodo-label{ font-size: 11px; font-weight: 600; line-height: 1.2; }
.metodo-pago-card .check-seleccionado{
  display: none; position: absolute; top: 4px; right: 4px; background: #fff;
  border-radius: 50%; line-height: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.metodo-pago-card .check-seleccionado i{ color: var(--cloti-success); font-size: 16px; margin: 0; }
.metodo-pago-card.seleccionado{ border-color: var(--cloti-success); box-shadow: 0 0 0 2px rgba(5,150,105,.35); background: var(--cloti-success-bg); }
.metodo-pago-card.seleccionado .check-seleccionado{ display: block; }

/* ---- paneles con scroll propio de Nueva Venta (productos / carrito) ---- */
#panelProductos, #panelCarrito{ scrollbar-width: thin; }

/* ---- tarjetas KPI clicables del Balance (antes Dashboard) ---- */
a.dashboard-card-link, a.dashboard-card-link:hover{ color: inherit; text-decoration: none; display: block; }
a.dashboard-card-link:hover .card,
a.dashboard-card-link .card{ transition: box-shadow .15s, transform .15s; }
a.dashboard-card-link:hover .card{ box-shadow: 0 4px 14px rgba(0,0,0,.15); transform: translateY(-2px); }

/* ---- filas de variantes de producto (Nuevo Producto) ---- */
.fila-variante{ background: var(--cloti-bg); }
.fila-variante input.variante-numero{ min-width: 90px; font-size: 14px; padding: 6px 8px; text-align: right; }
.fila-variante input[type=number]::-webkit-outer-spin-button,
.fila-variante input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.fila-variante input[type=number]{ -moz-appearance: textfield; }

/* ---- grilla de edición masiva de variantes (89va entrega, 08/10/2026) ----
   Guillermo reportó que los campos editables quedaban más angostos que su
   columna, con un hueco a la derecha dentro de la celda. Esta tabla
   (`#variantesTable`, editarVariantesGrupo.html) es nueva de esta entrega
   y no tenía ninguna regla propia de ancho/padding para sus inputs — se
   agrega acá, mismo criterio ya usado para `#carritoTable`. De paso,
   Guillermo pidió sacarle las flechas de +/- a los campos numéricos: se
   resolvió de raíz cambiando esos 3 inputs (precio costo/venta, stock
   mínimo) de `type="number"` a `type="text" inputmode="decimal"` en el
   template (un input de texto nunca tiene flechas), así que esta regla de
   ocultar spinners queda solo como red de seguridad por si algún
   navegador igual los mostrara. */
#variantesTable input.form-control-sm{ width: 100%; min-width: 0; padding: 5px 8px; font-size: 14px; }
#variantesTable input.campo-precio_costo,
#variantesTable input.campo-precio_venta,
#variantesTable input.campo-stock_minimo{ text-align: right; }
#variantesTable input[type=number]::-webkit-outer-spin-button,
#variantesTable input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#variantesTable input[type=number]{ -moz-appearance: textfield; }

/* ---- selectores de "Cuentas por defecto para pagos" (91va entrega,
   fix puntual, 08/10/2026) ----
   Guillermo reportó que los 3 selects de esta tarjeta (Configuración de
   Cuentas Bancarias) se veían angostos, con el texto de la cuenta
   cortado. Causa raíz encontrada: `.form-control` en el theme base
   vendorizado (`sb-admin-2.min.css`) define `width: 50%` (no 100%, a
   diferencia del Bootstrap estándar) — cada pantalla que necesitó un
   campo a todo el ancho de su columna tuvo que pisar esto a mano con su
   propia regla scopeada (mismo patrón ya usado para `#carritoTable` y
   `#variantesTable`, ver más arriba); esta tarjeta en particular nunca
   había tenido la suya. No se tocó la regla global `.form-control` del
   vendor por el alcance/riesgo de un cambio así (afectaría a todos los
   formularios del sistema a la vez) — se resuelve acá puntualmente, con
   el mismo criterio ya establecido. Dato para el futuro: cualquier
   formulario nuevo fuera de una tabla con columnas Bootstrap probablemente
   tenga este mismo problema si no se le agrega su propio override. */
#formCuentasDefault select.form-control{ width: 100%; }

/* ---- Nuevo Producto: Nombre/Categoría/Descripción angostos (94va
   entrega, 08/10/2026) ----
   Mismo `.form-control{width:50%}` del theme vendorizado (ver la nota de
   la 91va entrega, justo arriba) — esta pantalla tampoco tenía su propio
   override todavía. El select de Proveedor queda afuera de esta regla a
   propósito: se convirtió a select2 en esta misma entrega (ver el script
   de `crearArticulo.html`), que maneja su propio ancho vía la opción
   `width:'100%'` pasada al inicializarlo, no por CSS. */
#productoForm input.form-control,
#productoForm select.form-control{ width: 100%; }

/* ---- Nueva Compra: campo Nro. Factura angosto (94va entrega,
   08/10/2026) ---- mismo motivo que arriba; acotado solo a este campo
   puntual (Guillermo no pidió ensanchar el resto del formulario acá). */
#compraForm input[name="nro_factura"]{ width: 100%; }

/* ---- Nueva Venta: columnas Cuenta y Monto angostas en la tabla de
   Método de Pago (106va entrega, 15/10/2026; fix insuficiente, corregido
   en la 107va entrega, 16/10/2026) ----
   El primer intento (solo `width:100%` en el select/input, mismo patrón
   que `#carritoTable`/`#variantesTable`) no alcanzó acá: con
   `table-layout: auto` (el default de esta tabla), el ancho de cada
   columna lo decide el navegador mirando el contenido "intrínseco" de
   cada celda — un `<select>`/`<input>` al 100% termina siendo 100% de
   una columna que el navegador ya decidió angosta, sin ensancharla.
   Se pasa `#pagosTable` a `table-layout: fixed` con un ancho explícito
   por columna (y "Método de Pago" un poco más ancho que las demás, a
   pedido de Guillermo, para que el texto no corte en dos líneas como
   pasaba antes) — recién con anchos de columna fijos, el 100% del
   select/input adentro sí ocupa el espacio real de su celda. */
#pagosTable{ table-layout: fixed; }
#pagosTable th:nth-child(1), #pagosTable td:nth-child(1){ width: 36%; }
#pagosTable th:nth-child(2), #pagosTable td:nth-child(2){ width: 32%; }
#pagosTable th:nth-child(3), #pagosTable td:nth-child(3){ width: 22%; }
#pagosTable th:nth-child(4), #pagosTable td:nth-child(4){ width: 10%; }

/* ---- Nueva Venta: mini-formulario de Ítem libre, campos "chicos"
   (115va entrega, 22/10/2026 — causa real encontrada recién ahora) ----
   Guillermo venía reportando esto por TERCERA vez (113va: form-control-sm
   -> form-control; 114va: Descripción a su propia fila) y el síntoma
   persistía porque ninguna de esas dos vueltas había tocado la causa de
   fondo: el mismo `.form-control{width:50%}` (y, peor acá, un
   `.form-control{width:auto}` posterior en el theme vendorizado, ver la
   nota de la 91va entrega más arriba) nunca tuvo su override puntual para
   este formulario — a diferencia de los inputs de texto (cuyo ancho
   intrínseco en `auto` por lo menos se acerca a algo usable), el
   `<select>` de IVA con `width:auto` se encoge al tamaño de la opción
   elegida, mostrando "10%" cortado a un solo caracter ("1"). Con este
   override, Monto/Cantidad/IVA pasan a ocupar el 100% real de su columna
   Bootstrap (ya ensanchada en la 114va/115va entrega), en vez de su ancho
   intrínseco roto. */
#formLibre input.form-control,
#formLibre select.form-control{ width: 100%; }
#pagosTable select.form-control,
#pagosTable input.form-control{ width: 100%; min-width: 0; box-sizing: border-box; }

/* ---- Cobrar Pedido: "Método"/"Cuenta" de Formas de pago, mismo bug
   de fondo (120va entrega, 23/10/2026) ----
   Guillermo reportó "los campos de metodo y cuenta son muy chicos" en
   `pedidos/templates/pedidos/cobrarPedido.html` — exactamente el mismo
   `.form-control{width:auto}` del theme vendorizado (ver la nota de
   arriba, Ítem libre de Nueva Venta): el `<select>` se encoge al ancho
   de la opción elegida y recorta el texto ("Transferencia" -> "Transfe-
   renc", el nombre de la cuenta a una sola letra). Esta pantalla nunca
   había tenido su propio override porque sus filas de pago se arman por
   JS (clonando `<template id="filaPagoTpl">` en modo simple, o armando
   el HTML a mano en `construirFilaPagoHtml`/`crearBloqueCuenta` en modo
   dividido) — ninguna pasaba por `#pagosTable`, que es el id puntual de
   Nueva Venta. Se cubren acá las 3: `.fila-pago`/`.fila-pago-grupo` (la
   fila de Método/Monto/Cuenta), `.bloque-cuenta` (Cliente/Descuento de
   cada sub-cuenta en modo dividido) y `#tablaAsignacion` (el selector de
   cuenta por ítem, también en modo dividido) — mismo encogimiento en
   las 3. Además, en `cobrarPedido.html` se reordenó Método/Monto/Cuenta
   en 2 filas (Método+Cuenta arriba, Monto abajo) en vez de 3 campos
   apretados en una sola fila — mismo criterio ya usado para Ítem Libre
   (nota de arriba): el ancho real ya no alcanzaba para mostrar bien un
   método de pago largo ("Tarjeta de Crédito") y una cuenta a la vez. */
.fila-pago select.form-control,
.fila-pago input.form-control,
.fila-pago-grupo select.form-control,
.fila-pago-grupo input.form-control,
.bloque-cuenta select.form-control,
.bloque-cuenta input.form-control,
#tablaAsignacion select.form-control{ width: 100%; min-width: 0; box-sizing: border-box; }

/* Insignia numerada de la tarjeta "Top Vendedores" del Balance (pedido
   de Guillermo, 21/10/2026) — mismo círculo pastel ya usado en otros
   íconos de tarjeta (ver `.menu-tile-icono`), pero con un número en vez
   de un ícono. */
.rango-badge{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--cloti-primary-pastel);
  color: var(--cloti-primary-dark);
  flex: 0 0 auto;
}

/* ---- Portal: Crear Tienda, campos angostos (v157, 31/10/2026) ----
   Guillermo: "los campos de los datos de la tienda salen muy chicos".
   Es la NOVENA vez que aparece el mismo bug de fondo: el theme
   vendorizado (`sb-admin-2.min.css`) define `.form-control{width:50%}`
   donde el Bootstrap estándar tiene `100%`, así que todo campo que no
   esté dentro de un `.input-group` (que sí lo pisa con `flex:1 1 auto`)
   sale a la mitad del ancho de su columna. Por eso en esta pantalla el
   "Nombre de la tienda" se veía bien —está en un input-group con el
   ícono de la tienda— y RUC/Dirección/Teléfono/Moneda/Ciudad/Email no.

   Se resuelve puntualmente, como las ocho veces anteriores (ver las notas
   de la 91va entrega y siguientes, más arriba), por decisión de Guillermo
   del 31/10/2026: tocar la regla global arreglaría los nueve casos de una
   vez pero cambiaría el ancho de los campos de TODOS los formularios del
   sistema a la vez, y prefirió no mezclar ese cambio con esta entrega.
   Queda anotado como pendiente en `claude/planes-pendientes-cloti.md`.

   OJO con el combinador `>`: tiene que ser hijo DIRECTO de `.form-group`.
   El primer intento fue `#formCrearTienda input.form-control` a secas y
   rompió el campo "Nombre de la tienda": su input vive dentro de un
   `.input-group` (con el ícono de la tienda al lado), y ahí Bootstrap lo
   dimensiona con `flex:1 1 auto; width:1%` — un `width:100%` con más
   especificidad lo desborda y tira el ícono a una línea aparte. Con el
   `>` quedan afuera los inputs de cualquier input-group, que ya se
   estiran solos. */
#formCrearTienda .form-group > input.form-control,
#formCrearTienda .form-group > select.form-control{ width: 100%; }

/* ---- Ítem libre → "Agregar al Inventario": campos angostos (v160,
   31/10/2026) ----
   Guillermo: "los campos para cargar precio venta, costo son muy chicos".
   DÉCIMA aparición del mismo `.form-control{width:50%}` del theme
   vendorizado (ver la nota de la 91va entrega, más arriba): este
   formulario —el que aparece en el detalle de una venta y de una compra
   para dar de alta un ítem libre— tampoco tenía su override.
   Va por clase y no por id porque hay UN formulario por cada ítem libre
   pendiente, así que el id es dinámico. */
.form-alta-libre .form-group > input.form-control,
.form-alta-libre .form-group > select.form-control,
.form-alta-libre > .d-flex input.form-control,
.form-alta-libre > .d-flex select.form-control{ width: 100%; }

/* ---- Zona horaria en Datos de la Tienda (v162, 31/10/2026) ----
   ONCEAVA aparición del `.form-control{width:50%}` del theme vendorizado
   (ver la nota de la 91va entrega, más arriba). Acá se arregla SOLO el
   select de la zona horaria, no todo el formulario: los demás campos de
   esta pantalla ya se ven así desde siempre y Guillermo pidió
   expresamente no tocar anchos que ya funcionan. El select sí lo necesita
   porque a la mitad de ancho "Argentina (Buenos Aires)" queda cortado. */
#formDatosTienda .form-group > select.form-control{ width: 100%; }

/* ---- Despiece: fichas y registro (v163, 01/11/2026) ----
   Doceava aparición del `.form-control{width:50%}` del theme vendorizado
   (ver la nota de la 91va entrega, más arriba). Mismo override acotado de
   siempre, con `>` desde `.form-group` para no romper los input-group. */
#formFichaDespiece .form-group > input.form-control,
#formFichaDespiece .form-group > select.form-control,
#formDespiece .form-group > input.form-control,
#formDespiece .form-group > select.form-control{ width: 100%; }

/* Sin flechitas de spinner en los campos numéricos del despiece (v163).
   Guillermo ya lo pidió para el carrito y las variantes ("tienen las
   flechitas de arriba y abajo, favor modificar", 31/10/2026): se tapan
   igual acá. Se mantiene type="number" a propósito — pasar estos campos a
   texto con separadores de miles obligaría a parsear "40.000" en el
   servidor, y hoy `parsear_valor` lo leería como 40. */
#formDespiece input[type=number]::-webkit-outer-spin-button,
#formDespiece input[type=number]::-webkit-inner-spin-button,
#formFichaDespiece input[type=number]::-webkit-outer-spin-button,
#formFichaDespiece input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#formDespiece input[type=number],
#formFichaDespiece input[type=number]{ -moz-appearance: textfield; }