/* ============================================================================
   SISTEMA DE DISEÑO — Lujos Antioquia
   ----------------------------------------------------------------------------
   UN solo archivo con toda la identidad visual del aplicativo.
   Para cambiar el look de TODA la app, se cambian las variables de :root.
   Estilo "SaaS limpio" (Opción A, patrones de Tabler): fondo gris azulado,
   contenido en tarjetas blancas, barra lateral, verde corporativo + lima acento.
   Lineamientos vinculantes: docs/superpowers/specs/2026-07-13-lineamientos-diseno-erp.md
   ============================================================================ */

/* ============ Tipografía Inter (autoalojada, sin internet) ============
   Descargada una vez a estaticos/fuentes/ (subset latino, formato woff2).
   Fallback a la fuente del sistema para que nunca quede sin texto. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fuentes/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fuentes/inter-700.woff2") format("woff2");
}

:root {
  /* --- Colores de marca (extraídos del logo oficial) ---
     Lima #73CF00 = ACENTO (bordes activos, iconos, detalles): NO para texto sobre
     blanco (contraste insuficiente). Verde #006623 = PRIMARIO (botones, énfasis). */
  --marca-lima: #73CF00;
  --marca-lima-oscuro: #5CA800;   /* hover de elementos lima */
  --marca-verde: #006623;         /* color primario corporativo */
  --marca-verde-oscuro: #00541D;  /* hover de botones/enlaces primarios */
  --verde-suave: #F2FAE8;         /* fondo del ítem activo en la barra lateral */

  /* --- Superficies y texto (SaaS limpio) --- */
  --fondo: #F5F7FA;             /* fondo general gris azulado muy claro */
  --tarjeta: #FFFFFF;
  --borde: #E4E8EE;
  --texto: #21242B;
  --texto-suave: #58595B;       /* texto secundario (gris del eslogan del logo) */
  --texto-tenue: #77828D;       /* encabezados de tabla y etiquetas menores */

  /* --- Semáforo de estados (mismos significados del tablero contable) ---
     Pastilla: fondo suave + texto oscuro del mismo tono, siempre con texto. */
  --verde: #2C6606;  --verde-fondo: #E3F5D2;
  --ambar: #8A5A00;  --ambar-fondo: #FBF0D3;
  --rojo:  #B3261E;  --rojo-fondo:  #FBE7E5;

  /* --- Alias heredados ---
     Las pantallas viejas usan estos nombres; se re-apuntan a la marca nueva
     para no reescribir cada regla. El primario pasó de azul a verde. */
  --azul-marca: var(--marca-verde);
  --azul-oscuro: var(--marca-verde-oscuro);
  --acento: var(--marca-lima);
  --acento-oscuro: var(--marca-lima-oscuro);

  /* --- Forma --- */
  --radio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* ============ Base ============ */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
}

/* Cifras alineadas en columnas de dinero/cantidad (kardex, carrito, KPIs).
   Aplicar la clase .num a la celda/elemento que muestra números. */
.num { font-variant-numeric: tabular-nums; }
main { padding: 20px; max-width: 1040px; margin: auto; }
h2 { font-size: 22px; margin: 4px 0 16px; color: var(--texto); font-weight: 700; }
a { color: var(--marca-verde); }

/* ============ Disposición: barra lateral + contenido (Opción A) ============
   Solo aparece cuando hay usuario en sesión (el login va sin barra). */
.disposicion { display: flex; min-height: 100vh; }
.contenido { flex: 1; min-width: 0; }

/* ------ Barra lateral blanca fija ------ */
.lateral {
  width: 214px;
  flex-shrink: 0;
  background: var(--tarjeta);
  border-right: 1px solid var(--borde);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Logo arriba */
.lateral .marca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--borde);
}
.lateral .marca img { height: 34px; width: 34px; border-radius: 7px; }
.lateral .marca .nombre {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--marca-verde);
  line-height: 1.1;
}
.lateral .marca .nombre .punto { color: var(--marca-lima); }

/* Menú de secciones */
.lateral .menu { display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.lateral .menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  color: var(--texto);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;   /* el activo lo pinta de lima */
}
.lateral .menu a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--texto-tenue); }
.lateral .menu a:hover { background: #F6F8FB; }
.lateral .menu a.activo {
  border-left-color: var(--marca-lima);
  color: var(--marca-verde);
  background: var(--verde-suave);
  font-weight: 600;
}
.lateral .menu a.activo svg { color: var(--marca-verde); }

/* Usuario al pie */
.lateral .pie-usuario {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
}
.lateral .pie-usuario .quien { font-weight: 600; color: var(--texto); }
.lateral .pie-usuario .rol {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-tenue);
  margin-top: 1px;
}
.lateral .pie-usuario .acciones { margin-top: 8px; display: flex; gap: 10px; }
.lateral .pie-usuario .acciones a { font-size: 12px; color: var(--texto-suave); text-decoration: none; }
.lateral .pie-usuario .acciones a:hover { color: var(--marca-verde); text-decoration: underline; }

/* ============ Tarjetas ============ */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  margin-bottom: 12px;
}

/* ============ Buscador gigante (la herramienta #1 del vendedor) ============
   Pantalla POS: el buscador se queda FIJO arriba (sticky) mientras la
   cuadrícula de productos rueda debajo, para que el vendedor nunca lo pierda. */
.buscador {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  background: var(--fondo);   /* tapa las tarjetas que ruedan por debajo */
}
.buscador input {
  flex: 1;
  font-size: 18px;
  padding: 16px 18px;         /* alto táctil ~56px */
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
}
.buscador input:focus { outline: none; border-color: var(--azul-marca); }
.buscador button { min-width: 120px; }

/* ============ Botones ============
   Primario = verde corporativo (§2). El de acción del mostrador usa lima como
   acento llamativo, con texto verde oscuro para contraste. */
button, .boton {
  font-size: 16px;
  font-weight: 600;
  padding: 13px 22px;
  border: none;
  border-radius: 7px;
  background: var(--marca-verde);
  color: #fff;
  cursor: pointer;
}
button:hover, .boton:hover { background: var(--marca-verde-oscuro); }
button:active { transform: scale(0.98); }
.boton-accion { background: var(--marca-lima); color: #143300; }  /* acción del mostrador (acento) */
.boton-accion:hover { background: var(--marca-lima-oscuro); color: #143300; }
/* Un enlace vestido de botón debe verse IGUAL que el botón: en línea con los
   demás controles, sin subrayado y con el texto centrado. Sin esto, un <a>
   con solo .boton-accion queda como texto resaltado (pasó con "Aprobar y
   facturar" en el detalle del pedido). */
a.boton, a.boton-accion {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* ============ Formularios ============ */
label { display: block; font-size: 13px; color: var(--texto-suave); margin: 10px 0 4px; }
input, select, textarea {
  font-size: 16px;              /* 16px evita el zoom automático en celulares */
  padding: 11px 12px;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--azul-marca); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }

/* ============ Tablas ============ */
table { width: 100%; border-collapse: collapse; }
th { font-size: 13px; color: var(--texto-suave); text-align: left; padding: 8px; }
td { border-top: 1px solid var(--borde); padding: 8px; }

/* ============ Tarjeta de producto (patrón Odoo POS / Square) ============
   Base = tarjeta horizontal (la usa el detalle de producto como banner).
   En la cuadrícula POS se vuelve vertical (ver .rejilla-productos abajo). */
.tarjeta-producto {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.foto-producto {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 30px;
  color: var(--texto-suave);
  font-weight: 700;
}
/* ⭐ LA FOTO SE VE COMPLETA (reporte de Juan Pablo con pantallazo, 2026-08-11:
   "Ajusta los tamaños para que la imagen se vea completa. Están quedando
   cortadas"). Antes era `cover`, que llena el marco recortando lo que sobra:
   en una farola alta se perdía la parte de arriba y el vendedor no podía
   confirmar la pieza. `contain` mete la foto ENTERA dentro del marco.

   El marco conserva su alto fijo (la cuadrícula no baila) y lo que sobra a los
   lados se pinta BLANCO —no gris— porque las fotos del catálogo vienen con
   fondo blanco: así el relleno se funde con la foto en vez de dibujarle un
   recuadro. ⚠️ El 2026-09-08 se probó GRIS TENUE (#EEF0F2) para que los
   cromados no se fundieran, pero como las fotos traen su PROPIO fondo blanco
   quedaba un parche blanco dentro del marco gris (reporte de Juan Pablo con
   pantallazo: "no queda estético, volvamos al blanco estándar"). Para retomar
   el gris habría que quitar primero el fondo blanco DE LAS FOTOS (PNG con
   transparencia), no solo pintar el marco. */
.foto-producto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FFFFFF;
}

/* Miniatura de producto en tablas (detalle de una entrada). Misma regla: la
   foto se ve completa. Vive aquí y no en un `style=` de la plantilla porque el
   diseño del aplicativo se decide en UN solo archivo (guía §5). */
.foto-miniatura {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: #FFFFFF; /* blanco estándar (el gris tenue se probó y revirtió, ver .foto-producto img) */
  flex-shrink: 0;
}
.info-producto { flex: 1; min-width: 0; }

/* ============ Cuadrícula POS (§6 — LA pantalla del vendedor) ============
   Resultados como MOSAICO de tarjetas grandes: foto arriba, precio grande,
   semáforo de stock en pastilla. Tarjetas ≥120px, táctiles, se leen a un metro.
   El buscador vive fijo arriba y estas tarjetas ruedan debajo. */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
/* Cada resultado es un enlace que envuelve toda la tarjeta. */
.rejilla-productos > a { display: block; text-decoration: none; color: inherit; height: 100%; }

/* Dentro de la rejilla la tarjeta pasa a vertical y llena su celda. */
.rejilla-productos .tarjeta-producto {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  height: 100%;
  margin-bottom: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rejilla-productos > a:hover .tarjeta-producto {
  border-color: var(--marca-lima);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.10);
}
/* Tarjeta seleccionada en la búsqueda en vivo (su detalle se abre debajo). */
.rejilla-productos .tarjeta-producto.activa {
  border-color: var(--marca-lima);
  border-width: 2px;
}
/* Foto grande arriba (placeholder gris con el código si no hay imagen). */
.rejilla-productos .foto-producto {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  font-size: 20px;
  letter-spacing: 0.5px;
  padding: 6px;
  text-align: center;
}
/* Precio del canal grande y legible. */
.rejilla-productos .precios { gap: 12px; margin-top: 2px; }
.rejilla-productos .precio strong { font-size: 22px; }
.rejilla-productos .nombre-producto { font-size: 15px; line-height: 1.25; }
.codigo-producto {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--azul-marca);
  background: #E9EEF7;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 4px;
}
.nombre-producto { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.modelo-producto { font-size: 13px; color: var(--texto-suave); margin: 0 0 8px; }
.precios { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.precio { font-size: 13px; color: var(--texto-suave); }
.precio strong { font-size: 19px; color: var(--azul-oscuro); display: block; }
/* Dato secundario de la tarjeta/ficha, en letra chica al lado de los precios.
   Dos clases con el MISMO aspecto pero distinto público, para que el HTML diga
   la verdad de un vistazo: `.dato-admin` = solo el administrador (el costo);
   `.dato-ficha` = lo ven todos los roles (el proveedor, abierto por directiva
   de JP 2026-08-13). Quien lea la plantilla no tiene que adivinar cuál es cuál. */
.dato-admin, .dato-ficha { font-size: 13px; color: var(--texto-suave); }
.dato-admin strong, .dato-ficha strong { font-size: 15px; color: var(--texto); }

/* ============ Semáforo de estados (pastilla §5) ============
   Fondo suave + texto oscuro del mismo tono, radio completo, SIEMPRE con texto.
   Lo usan el chip de stock y el chip de estado de remisión (componentes.html). */
.stocks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
          align-items: center; }
/* Rótulo del grupo de chips del buscador: dice que la cifra es el DISPONIBLE
   (stock menos lo apartado), no el conteo físico. Va visible y no como tooltip
   porque el vendedor trabaja desde el celular, donde no hay hover. Discreto a
   propósito: el protagonista sigue siendo el número. */
.etiqueta-disponible {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chip-stock {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-stock.verde  { background: var(--verde-fondo);  color: var(--verde); }
.chip-stock.ambar  { background: var(--ambar-fondo);  color: var(--ambar); }
.chip-stock.rojo   { background: var(--rojo-fondo);   color: var(--rojo); }
/* Stock NEGATIVO (el sistema debe menos de cero: producto por contar).
   Mismo rojo de la paleta pero SÓLIDO e invertido: se distingue de un golpe de
   vista del rojo suave del "0 / no hay", sin inventar un color nuevo. */
.chip-stock.negativo {
  background: var(--rojo);
  color: #FFFFFF;
}
/* Factura EN_PROCESO: la cola de emisión automática la está trabajando. Ámbar
   SÓLIDO e invertido — tiene que verse "vivo" y no confundirse ni con el ámbar
   suave de SIMULADA ni con el rojo de ERROR: aquí no hay nada que hacer, solo
   esperar. */
.chip-stock.proceso {
  background: var(--ambar);
  color: #FFFFFF;
}
/* Factura CANCELADA: el documento existe y quedó con su motivo, pero no pasó
   nada con él. Gris apagado: ni error ni éxito. */
.chip-stock.gris {
  background: #ECEFF3;
  color: var(--texto-suave);
}

/* Insignia LISTA VIEJA: producto de la lista de precios vieja, precio por
   verificar. Ámbar (advertencia, no error) y bien visible junto al código. */
.insignia-lista-vieja {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--ambar-fondo);
  color: var(--ambar);
  border: 1px solid #E8D08A;
  margin-left: 6px;
  white-space: nowrap;
}

/* ============ Búsqueda en vivo (lista + detalle con precios) ============ */
.fila-viva {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
}
.fila-viva:hover { border-color: var(--azul-marca); }
.fila-viva.activa { border-color: var(--acento); border-width: 2px; }
.fila-viva .fila-nombre { font-weight: 600; }
.fila-viva .fila-modelo { font-size: 13px; color: var(--texto-suave); }
.fila-viva.sin-resultados { color: var(--texto-suave); cursor: default; justify-content: center; }
.detalle-seleccion { border: 2px solid var(--acento); }
.detalle-precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.precio-caja {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.precio-caja.resaltada { background: var(--ambar-fondo); border-color: var(--acento); }
.precio-etiqueta { font-size: 12px; color: var(--texto-suave); }
.precio-valor { font-size: 24px; font-weight: 800; color: var(--azul-oscuro); }

/* ============ Mensajes (flash) ============ */
.mensaje {
  padding: 12px 16px;
  border-radius: var(--radio);
  margin-bottom: 10px;
  font-weight: 600;
  background: var(--ambar-fondo);
  color: var(--ambar);
  border: 1px solid #EDD9A3;
}
.mensaje.exito { background: var(--verde-fondo); color: var(--verde); border-color: #BEE3CC; }

/* ============ Pantalla de login ============ */
.login-caja { max-width: 380px; margin: 9vh auto 0; }
.login-caja .logo-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.login-caja .logo-grande img {
  height: 88px;
  width: 88px;
  border-radius: 16px;
  display: block;
  margin-bottom: 12px;
}
.login-caja .logo-grande .titulo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--marca-verde);
}
.login-caja .logo-grande .punto { color: var(--marca-lima); }
.login-caja button { width: 100%; margin-top: 14px; }
.login-caja input { margin-bottom: 10px; }

/* ============ Tarjetas de métrica (panel admin, se usan en Fase 2) ============ */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.metrica { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.metrica .etiqueta { font-size: 12px; color: var(--texto-suave); }
.metrica .valor { font-size: 22px; font-weight: 700; color: var(--azul-oscuro); }

/* ============ Remisiones (lista, carrito y detalle) ============ */
/* Cabecera con título a la izquierda y botón de acción a la derecha. */
.cabecera-lista, .cabecera-detalle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cabecera-detalle { gap: 12px; justify-content: flex-start; }

/* Filtros por estado (pestañas simples). */
.filtros-estado { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.filtros-estado a {
  font-size: 14px;
  text-decoration: none;
  color: var(--texto-suave);
  padding: 7px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
}
.filtros-estado a.activo {
  background: var(--azul-marca);
  color: #fff;
  border-color: var(--azul-marca);
}

/* La factura a la que llegó un enlace con #factura-<id> (por ejemplo desde la
   bandeja de comodines): se resalta para que el ojo la encuentre sola. */
.tarjeta:target {
  outline: 2px solid var(--acento, #73CF00);
  outline-offset: 2px;
}

/* Tarjeta de remisión en la lista (es un enlace a todo el bloque). */
.remision-tarjeta { display: block; text-decoration: none; color: var(--texto); }
.remision-tarjeta:hover { border-color: var(--azul-marca); }
.remision-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.numero-remision { font-weight: 800; color: var(--azul-oscuro); font-size: 16px; }
.remision-cliente { font-size: 15px; font-weight: 600; margin: 8px 0 6px; }
.remision-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.remision-pie strong { font-size: 18px; color: var(--azul-oscuro); }

/* Lista de resultados en vivo dentro del carrito (misma estética de fila-viva).
   ⚠️ HOTFIX (reporte de Juan Pablo: "agregaba un producto y no había opción de
   agregar más"). Antes esta lista crecía hasta 20 filas EN EL FLUJO de la
   página: empujaba el formulario una pantalla entera hacia abajo. El usuario
   bajaba hasta el resultado, lo tocaba, la lista se colapsaba y la página se
   encogía de golpe — quedaba mirando el carrito y el botón Guardar, con el
   campo de búsqueda arriba, fuera de vista. De ahí la conclusión "no se pueden
   agregar más". En celular era peor.

   Ahora la lista tiene su propio alto máximo (unas 5 filas y media, para que se
   vea que hay más y se pueda rodar) y su propio scroll: la página YA NO cambia
   de tamaño al buscar ni al elegir. */
.lista-viva-caja {
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
  /* Un pelo de padding a la derecha para que la barra de scroll no se monte
     sobre el borde de las filas. */
  padding-right: 2px;
  /* En táctil, que el dedo ruede suave dentro de la lista. */
  -webkit-overflow-scrolling: touch;
  /* El scroll de la lista no se "contagia" a la página cuando se llega al
     final: sin esto, seguir deslizando mueve la pantalla y desorienta igual. */
  overscroll-behavior: contain;
}
/* Texto guía permanente bajo el campo de búsqueda: los usuarios nuevos no
   saben que el carrito acepta cuantos productos quieran. */
.ayuda-campo {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--texto-suave);
}

/* Cliente elegido (chip grande con botón cambiar). */
.cliente-caja {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--verde-fondo);
  border: 1px solid #BEE3CC;
  border-radius: 10px;
}
.cliente-caja strong { font-size: 15px; }

/* Datos de envío del pedido (con lo que se rotula la caja). Se separa del
   resto del encabezado con una línea a la izquierda para que se lea como un
   bloque aparte: es una dirección, no un dato más del cliente. */
.caja-envio {
  margin-top: 12px;
  padding: 10px 0 2px 12px;
  border-left: 3px solid var(--borde);
}
.caja-envio strong { font-size: 15px; display: block; margin-top: 2px; }
.caja-envio .fila-modelo { margin: 2px 0; }

/* Tabla del carrito. */
.tabla-carrito { margin-top: 12px; }
.col-num { max-width: 120px; }

/* Chips de precio de referencia (May / Most) bajo el input de precio.
   Tocar uno pone ese valor en el input; el activo se resalta en ámbar suave. */
.chips-precio { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip-precio {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.chip-precio:hover { border-color: var(--azul-marca); color: var(--azul-marca); }
.chip-precio.activo {
  background: var(--ambar-fondo);
  border-color: var(--acento);
  color: var(--ambar);
}
.col-sub { font-weight: 700; color: var(--azul-oscuro); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* Encabezado de las columnas numéricas del carrito (Cantidad/Vr. unitario/
   Subtotal) alineado a la derecha, igual que su columna (§4). Se limita al
   carrito de remisión/venta directa (.carrito-pos) para no alinear mal los
   encabezados de texto de las tablas de facturación, que también son
   .tabla-carrito. */
.carrito-pos th:nth-child(2), .carrito-pos th:nth-child(3),
.carrito-pos th:nth-child(4) { text-align: right; }
/* Campos de cantidad y precio del carrito: táctiles y con cifras alineadas. */
.tabla-carrito .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  padding: 10px 12px;
}
/* Bloque de totales abajo: el TOTAL es el número MÁS GRANDE de la pantalla
   (se lee a un metro, §6). Fondo suave y separación clara del carrito. */
.carrito-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 18px;
  border-top: 2px solid var(--borde);
  font-size: 17px;
  font-weight: 600;
  color: var(--texto-suave);
}
.carrito-total strong {
  font-size: 36px;
  font-weight: 700;
  color: var(--azul-oscuro);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Línea de un pedido que salió CORTA (se empacó menos de lo que se pidió).
   Se pinta con el ámbar de "ojo con esto" y una barra a la izquierda, para que
   bodega y el vendedor la ubiquen de un vistazo en vez de tener que comparar
   número por número las columnas "Pedido" y "Cantidad". */
.fila-incompleta > td { background: var(--ambar-fondo); }
.fila-incompleta > td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
.aviso-faltan {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ambar);
}

/* ============ Ajustes de inventario y traslados entre bodegas ============
   El carrito de ajustes lleva más columnas que el de remisión (bodega, sumar/
   restar, nota). En el celular del bodeguero eso no cabe: la tabla rueda de
   lado DENTRO de su caja, en vez de desbordar la página entera. */
.envoltura-tabla {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tabla-ajuste th, .tabla-ajuste td { vertical-align: top; }
.tabla-ajuste select { min-width: 140px; }
/* Los campos de una misma celda (sumar/restar + cantidad) uno debajo del otro. */
.tabla-ajuste td select + input { margin-top: 6px; }
/* "Hay: BODEGA AUXILIAR 10 · PUNTO DE VENTA 0" — cuánto hay ANTES del ajuste.
   Quien resta 5 donde hay 3 tiene que verlo; el sistema avisa, no impide. */
.stock-linea {
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.stock-linea.negativo { color: var(--rojo); font-weight: 700; }

/* En el celular del bodeguero, cada línea del ajuste deja de ser una fila de
   tabla y pasa a ser una TARJETA con sus campos apilados y su etiqueta encima
   (el nombre de la columna, que en esta vista no se ve). Es la diferencia
   entre rodar la tabla de lado con el pulgar y leerlo todo de una. */
@media (max-width: 720px) {
  .envoltura-tabla { overflow-x: visible; }
  .tabla-ajuste thead { display: none; }
  .tabla-ajuste, .tabla-ajuste tbody, .tabla-ajuste tr, .tabla-ajuste td {
    display: block;
    width: 100%;
  }
  .tabla-ajuste tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--tarjeta);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .tabla-ajuste td { border: none; padding: 6px 0; }
  .tabla-ajuste td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-suave);
    margin-bottom: 4px;
  }
  .tabla-ajuste select, .tabla-ajuste input,
  .tabla-ajuste .col-num { width: 100%; max-width: none; }
  /* "Quitar" no es la acción principal de la tarjeta: se queda pequeño en vez
     de volverse un botón de ancho completo (la regla general de móvil).
     La especificidad manda aquí, no el orden del archivo. */
  .tabla-ajuste td .boton-menor { width: auto; }
}

/* Botón pequeño (cambiar cliente, quitar fila). */
.boton-menor {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  width: auto;
  background: #E9EEF7;
  color: var(--azul-marca);
}
.boton-menor:hover { background: #D8E2F2; }

/* Los botones de envío/acción de un documento, lado a lado (carrito de
   remisión y acciones de la orden de pedido). */
.botones-remision, .acciones-documento { display: flex; gap: 10px; flex-wrap: wrap;
                                         align-items: flex-start; }
/* Los enlaces-botón (`<a class="boton">`) reparten la fila igual que los
   botones de verdad: en la lista de remisiones las dos entradas son enlaces. */
.botones-remision button, .botones-remision > .boton { flex: 1; min-width: 160px; }
/* En la orden de pedido cada acción es un formulario propio (cada una con su
   token CSRF), así que se alinean los formularios, no solo los botones. */
.acciones-documento form { display: flex; gap: 8px; flex-wrap: wrap;
                           align-items: center; }
.acciones-documento input { width: auto; min-width: 150px; margin: 0; }
/* Acción en formulario propio (token CSRF aparte). El margen SUPERIOR importa
   tanto como el inferior: sin él, "Despachar" salía pegado encima del botón
   "Guardar cambios" del formulario anterior (pantallazo de JP, 2026-09-01). */
.accion-suelta { margin: 18px 0; }

/* ============ Tablas ANCHAS que ruedan de lado (celular) ============
   Envoltura para las tablas que tienen demasiadas columnas para una pantalla
   angosta: el detalle de una remisión DESPACHADA llegó a 7-8 columnas al
   agregarle "Vigente" (2026-09-05) y el resumen de una factura por bloques trae
   filas anchas ("Subtotal de la remisión REM-00012"). Con esto la tabla se rueda
   con el pulgar en vez de comprimirse hasta ser ilegible.

   ⚠️ NO se reusó `.envoltura-tabla` a propósito: esa clase, por debajo de 720px,
   pone `overflow-x: visible` porque va de la mano con las tablas que a ese ancho
   se convierten en TARJETAS (`.tabla-ajuste`). Estas no se convierten en
   tarjetas —son de lectura, con cifras que se comparan entre columnas—, así que
   con esa clase quedarían apretadas justo en el celular, que es el problema que
   se venía a resolver. Cambiarle el comportamiento a `.envoltura-tabla` habría
   roto las pantallas de ajustes y traslados. */
.tabla-que-rueda {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Factura de VARIAS remisiones: cada remisión encabeza su bloque de líneas y
   cierra con su subtotal (directiva de JP 2026-09-05, para que el cliente cruce
   la factura contra sus órdenes de compra). */
.fila-bloque-remision th {
  text-align: left;
  background: var(--verde-suave);
  color: var(--azul-oscuro);
  font-size: 13px;
}
.fila-subtotal-remision td {
  color: var(--texto-suave);
  font-size: 13px;
  border-bottom: 2px solid var(--borde);
}
.fila-subtotal-remision td:last-child { text-align: left; color: var(--texto); }

/* Detalle: etiqueta pequeña sobre el dato. */
.etiqueta-dato { display: block; font-size: 12px; color: var(--texto-suave); }
.fila-total th { font-size: 15px; color: var(--azul-oscuro); text-align: left; }
.remision-detalle h3 { font-size: 16px; color: var(--azul-oscuro); margin: 0 0 8px; }
h3 { font-size: 16px; color: var(--azul-oscuro); margin: 0 0 10px; }

/* ============ Ajustes para celular (bodega y mostrador) ============
   En pantallas angostas la barra lateral pasa a ser una tira superior:
   logo + menú desplazable en horizontal, y el usuario debajo. */
@media (max-width: 720px) {
  .disposicion { flex-direction: column; }
  .lateral {
    width: auto;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--borde);
  }
  .lateral .menu { flex-direction: row; overflow-x: auto; padding: 4px 6px; }
  .lateral .menu a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 10px 12px; }
  .lateral .menu a.activo { border-left: none; border-bottom-color: var(--marca-lima); }
  .lateral .pie-usuario { margin-top: 0; }
  main { padding: 12px; }
  .buscador { flex-direction: column; }
  .buscador button { width: 100%; }
  .precios { gap: 12px; }
  button, .boton { width: 100%; }
}

/* ============================================================================
   FACTURACIÓN (Fase 3)
   ============================================================================ */

/* --- Banner GRANDE del modo actual (siempre visible en facturación) ---
   SIMULACIÓN en verde tranquilizador; REAL en ámbar de alerta (se emite de
   verdad en la DIAN). Grande y con borde para que nadie lo pase por alto. */
.banner-modo {
  padding: 14px 18px;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 14px;
  border: 2px solid transparent;
}
.banner-modo.simulacion {
  background: var(--verde-fondo); color: var(--verde); border-color: #BEE3CC;
}
.banner-modo.real {
  background: var(--ambar-fondo); color: var(--ambar); border-color: #E8D08A;
}

/* --- CERROJO: banner rojo bloqueante (salto de consecutivo / error) --- */
.banner-cerrojo {
  padding: 14px 18px;
  border-radius: var(--radio);
  background: var(--rojo-fondo);
  color: var(--rojo);
  border: 2px solid #E8B4B0;
  margin-bottom: 14px;
  font-size: 15px;
}
.banner-cerrojo a { color: var(--rojo); font-weight: 600; }

/* --- Grupo de facturación por cliente --- */
.grupo-facturacion { margin-bottom: 16px; }

/* --- Fila de emitir/resolver: select + botón alineados --- */
.fila-emitir {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.fila-emitir label { margin: 0; font-weight: 600; }
.fila-emitir select { width: auto; }

/* --- Desglose fiscal del resumen (base + IVA = total) --- */
.desglose-fiscal {
  margin-top: 14px;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}
.desglose-fiscal > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--texto-suave);
}
.desglose-fiscal .total-grande {
  border-top: 1px solid var(--borde);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 20px;
  color: var(--texto);
}
.desglose-fiscal .total-grande strong { color: var(--azul-oscuro); }

/* --- Opción "enviar al correo del cliente": checkbox alineado con su texto,
   ancho de contenido (no del bloque) para que se lea como una casilla. --- */
.opcion-correo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--texto-suave);
  cursor: pointer;
}
.opcion-correo input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }

/* --- Opción con radio (a nombre de quién sale la factura de una remisión 222).
   Hace falta por lo mismo que la de arriba: los inputs del formulario son de
   ANCHO COMPLETO por defecto, así que sin esto el circulito se estira a lo
   ancho de la tarjeta y se despega de su texto. --- */
.opcion-radio {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0;
  font-size: 15px;
  color: var(--texto);
  cursor: pointer;
}
.opcion-radio input[type="radio"] {
  width: 18px; height: 18px; margin: 0; flex: none;
}

/* Valor vigente de cada remisión (columna de plata) alineado a la derecha. */
.grupo-facturacion .tabla-carrito td:last-child { text-align: right; white-space: nowrap; }
.grupo-facturacion .tabla-carrito th:last-child { text-align: right; }

/* En móvil, el banner de modo se ajusta sin desbordar. */
@media (max-width: 720px) {
  .banner-modo { font-size: 15px; }
  .fila-emitir select, .fila-emitir button { width: 100%; }
  /* En pantalla angosta la cuadrícula POS baja a 2 columnas mínimas cómodas. */
  .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .rejilla-productos .foto-producto { height: 110px; }
  .rejilla-productos .precio strong { font-size: 19px; }
  /* El total del carrito sigue siendo grande pero cabe en el ancho del celular. */
  .carrito-total { font-size: 15px; padding: 14px 12px; }
  .carrito-total strong { font-size: 30px; }
}

/* ============================================================================
   CARTERA Y COMISIONES
   ============================================================================ */

/* --- Semáforo de vencimiento de la fila de una factura ---
   Los MISMOS significados y colores de la cartera en Excel, para que Juan
   Pablo no tenga que reaprenderlos (spec §7.1):
     rojo    VENCIDA     ya se pasó del plazo
     ámbar   POR_VENCER  faltan 6 días o menos
     verde   AL_DIA      todavía hay tiempo
   El color va como una barra a la izquierda de la fila más un fondo muy
   suave: pintar la fila entera de rojo dejaría las cifras ilegibles, y una
   tabla de 80 facturas se vuelve un semáforo de discoteca. */
.tabla-cartera tr.vencida > td { background: var(--rojo-fondo); }
.tabla-cartera tr.vencida > td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.tabla-cartera tr.por-vencer > td { background: var(--ambar-fondo); }
.tabla-cartera tr.por-vencer > td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
.tabla-cartera tr.al-dia > td:first-child { box-shadow: inset 3px 0 0 var(--verde); }

/* Columnas de plata y de días: pegadas a la derecha y con las cifras
   alineadas, que es como se comparan de un vistazo. */
.col-derecha { text-align: right; white-space: nowrap; }

/* El total de vencido del tablero en rojo, para que salte a la vista.
   La plantilla solo lo pone cuando la cifra es mayor que cero: un cero en rojo
   haría ver un problema donde no lo hay. */
.texto-vencido { color: var(--rojo); font-weight: 700; }

/* --- Lo que NO se imprime ---
   La cartera de un cliente se imprime y se le manda A ÉL. Los botones, la
   navegación y la ficha interna (donde está el vendedor) llevan la clase
   `no-imprimir` y desaparecen en el papel. Regla dura de la spec §7.2: en ese
   documento no aparece el vendedor ni ninguna cifra de comisión.

   ⚠️ Este bloque aplica a TODA pantalla que herede de base.html, no solo a las
   de cartera: imprimir cualquiera de ellas ahora sale sin la barra lateral,
   que es lo que uno espera. Las hojas imprimibles que ya existían (la remisión
   en rollo, la carta de bodega, la hoja de la entrada) NO se ven afectadas:
   son páginas sueltas que ni siquiera cargan esta hoja de estilos. */
@media print {
  .no-imprimir, .lateral { display: none !important; }
  main { padding: 0; max-width: none; }
  .tarjeta { border: none; box-shadow: none; padding: 0 0 12px; }
}

/* ---- Ficha web del producto (tienda online, fase T1) --------------------
   Pantalla solo de admin: a la izquierda la vista previa de la tarjeta como
   la verá el comprador, a la derecha el estado de publicación. En celular las
   dos rejillas (previa y formulario) se vuelven una sola columna. */
.ficha-web-previa { display: grid; grid-template-columns: 260px 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 720px) { .ficha-web-previa { grid-template-columns: 1fr; } }
.tarjeta-tienda { text-align: center; }
.tarjeta-tienda .foto-tienda { width: 100%; aspect-ratio: 1 / 1; background: #fff;
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.tarjeta-tienda .foto-tienda img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-tienda .sin-foto { color: var(--texto-suave); }
.tarjeta-tienda .nombre-tienda { font-weight: 700; margin: 10px 0 2px; }
.tarjeta-tienda .modelos-tienda { color: var(--texto-suave); font-size: 13px; margin: 0; }
.tarjeta-tienda .precio-tienda { font-size: 20px; font-weight: 800; margin: 6px 0; }
.tarjeta-tienda .boton-tienda { display: inline-block; padding: 6px 12px; border-radius: 6px;
  background: var(--marca-verde); color: #fff; font-size: 13px; }
.tarjeta-tienda .direccion-tienda { font-size: 11px; color: var(--texto-suave); margin: 8px 0 0;
  word-break: break-all; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .dos-columnas { grid-template-columns: 1fr; } }
.galeria-web { display: flex; flex-wrap: wrap; gap: 12px; }
.foto-galeria { width: 150px; }
.foto-galeria img { width: 150px; height: 150px; object-fit: contain; background: #fff;
  border: 1px solid var(--borde); border-radius: 6px; }
.acciones-foto { display: flex; gap: 4px; margin-top: 4px; }
.acciones-foto form { margin: 0; }
/* Video propio de la ficha web (JP 2026-09-18): se muestra a su proporción
   real (vertical 9:16 u horizontal 16:9), sin recortar, y chico: es para
   confirmar qué quedó publicado, no para verlo en grande. */
.video-propio { display: block; max-width: 320px; max-height: 420px; width: auto; height: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: 6px; }

/* ---- Pantalla "Tienda web" (lista de qué sale en la tienda, fase T1) ----
   Solo admin. Filtros arriba, tabla con casillas y acciones en lote abajo.
   El chip de estado usa el mismo semáforo del resto del sistema: verde =
   publicado, ámbar = listo (falta el clic), rojo = le falta un dato. */
.filtros-tienda { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px; }
.miniatura-tienda { width: 40px; height: 40px; object-fit: contain; background: #fff;
  border: 1px solid var(--borde); border-radius: var(--radio); }
.chip-tienda { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.chip-tienda.publicado  { background: var(--verde-fondo); color: var(--verde); }
.chip-tienda.listo      { background: var(--ambar-fondo); color: var(--ambar); }
.chip-tienda.incompleto { background: var(--rojo-fondo);  color: var(--rojo); }
.acciones-lote { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }

/* Campos de una línea de COMODÍN en el carrito (diseño 2026-09-11): se ven
   distintos para que nadie confunda una línea descrita a mano con un
   producto del catálogo. Los usan remision.js (carrito nuevo) y
   remision_detalle.html (edición). */
.campos-comodin {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.campos-comodin input {
  flex: 1 1 140px;
  min-width: 120px;
}

/* ============ Tareas (diseño 2026-09-17) ============ */
/* Contador de pendientes junto a "Mis tareas" y "Tareas" en la barra lateral.
   ÚNICA definición: la usan los dos ítems. Lima de acento sobre la pastilla
   (no es texto sobre blanco), texto verde oscuro como el botón de acción. */
.contador {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--marca-lima);
  color: #143300;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* "Terminadas" plegadas en Mis tareas: <details> nativo, sin JavaScript. */
.plegable summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--texto-suave);
  margin: 14px 0 8px;
}
/* Un comentario en el detalle de la tarea: quién y cuándo, y el texto. */
.comentario { border-top: 1px solid var(--borde); padding: 10px 0; }
.comentario .quien { font-size: 13px; color: var(--texto-suave); }

/* ============ Tarea de FOTOS (diseño 2026-09-17, Entrega 3) ============ */
/* "12 de 40 con fotos" al lado del título y en la pantalla del producto. */
.avance-texto { font-size: 14px; font-weight: 600; color: var(--texto-suave); margin-left: 8px; }
/* Barra de avance nativa (<progress>), en el lima de la marca. */
.progreso-tarea { width: 100%; height: 12px; accent-color: var(--marca-lima); margin: 6px 0 12px; }
/* La lista de productos de la tarea: filas tocables de 44 px. */
.lista-productos-tarea { list-style: none; padding: 0; margin: 0; }
.lista-productos-tarea li { display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--borde); padding: 8px 0; }
.lista-productos-tarea li > a { flex: 1; display: flex; align-items: center; gap: 10px;
  min-height: 44px; text-decoration: none; color: inherit; }
/* Producto que YA tiene fotos: tachado (el avance se ve sin leer números). */
.lista-productos-tarea li.hecho .nombre-tarea-producto { text-decoration: line-through;
  color: var(--texto-suave); }
.nombre-tarea-producto { font-weight: 600; }
/* La foto interna chiquita, de referencia (estaticos/fotos). */
.foto-interna-mini { width: 44px; height: 44px; object-fit: contain; background: #fff;
  border: 1px solid var(--borde); border-radius: 6px; }
.foto-interna-mini.grande { width: 120px; height: 120px; }
/* Miniaturas de las fotos crudas subidas (máximo las de UN producto). */
.miniaturas-tarea { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.miniaturas-tarea img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radio); border: 1px solid var(--borde); }
.miniaturas-tarea .toma { font-size: 12px; color: var(--texto-suave); margin: 4px 0; }
/* El bloque de la cámara: el input de archivo grande para el dedo. */
.bloque-camara input[type="file"] { font-size: 16px; min-height: 44px; width: 100%; }
#estado-subida { margin-top: 8px; min-height: 20px; font-size: 14px; }
#estado-subida.error { color: var(--rojo); white-space: pre-line; }
/* El formulario "Quitar" de un producto sin fotos (solo admin), pegado a la derecha. */
.quitar-producto { margin: 0; }