/* Estilo visual del Portal B2B Maxfishing -- EXACTAMENTE el mismo que
   se aprobó en las muestras (ver /tmp/build_mockup.py), portado aquí
   para que las páginas reales de Flask tengan el mismo aspecto. */

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; background: #FAF9F6; color: #16201C; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.navbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #E7E4DB; position: sticky; top: 0; z-index: 20; gap: 14px; }
.navbar img.logo { height: 26px; }
.navlinks { display: flex; gap: 32px; }
.navlink { font-size: 14px; font-weight: 600; color: #5B6B64; padding: 8px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.navlink.active { color: #16201C; border-bottom: 2px solid #1B8F6E; }
.userchip { display: flex; align-items: center; gap: 8px; border-left: 1px solid #E7E4DB; padding-left: 16px; }
.avatar { width: 32px; height: 32px; border-radius: 999px; background: #1B8F6E; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qbtn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #D8D5CC; background: #FFFFFF; font-size: 15px; font-weight: 700; cursor: pointer; color: #2A332E; flex-shrink: 0; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5B6B64; padding: 0 16px 10px; border-bottom: 1px solid #E7E4DB; white-space: nowrap; }
td { padding: 14px 16px; border-bottom: 1px solid #EEECE4; font-size: 14px; vertical-align: middle; }

/* Facturas / Pendiente de servir: filas desplegables con '<details>'
   nativo (sin JavaScript) -- pedido el 02/10/2026 ("que se puedan ver
   la linea de facturas, este plegada el cliente la despliege"). Mismo
   patron ya usado en 'arbol_categorias' de 'catalogo.html'. */
.lista-documentos { background: #FFFFFF; border: 1px solid #E7E4DB; border-radius: 14px; overflow: hidden; }
.fila-documento { display: grid; align-items: center; gap: 10px; padding: 14px 16px; }
.fila-documento-cabecera { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5B6B64; border-bottom: 1px solid #E7E4DB; }
.fila-documento-detalle { border-bottom: 1px solid #EEECE4; }
.fila-documento-detalle:last-child { border-bottom: none; }
summary.fila-documento { cursor: pointer; list-style: none; font-size: 14px; }
summary.fila-documento::-webkit-details-marker { display: none; }
summary.fila-documento:hover { background: #FAF9F6; }
.chevron { display: inline-block; transition: transform 0.15s ease; color: #5B6B64; }
details[open] > summary.fila-documento .chevron { transform: rotate(90deg); }
.lineas-documento { padding: 4px 16px 16px 44px; background: #FAF9F6; }
.linea-documento { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #EEECE4; font-size: 13px; }
.linea-documento:last-child { border-bottom: none; }
.linea-documento-vacia { padding: 10px 0; font-size: 13px; color: #5B6B64; }

/* --- Adaptacion a movil --- */
.hamburger { display: none; width: 34px; height: 34px; align-items: center; justify-content: center; background: none; border: 1px solid #D8D5CC; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid-productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 24px 40px 56px; }
.pagina { padding-left: 40px; padding-right: 40px; }
.pagina-margin { margin-left: 40px; margin-right: 40px; }

@media (max-width: 1100px) {
  .grid-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .navbar { padding: 0 16px; }
  .navlinks { display: none; flex-direction: column; gap: 0; position: absolute; top: 64px; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid #E7E4DB; box-shadow: 0 10px 18px rgba(22,32,28,0.08); }
  .navlinks.open { display: flex; }
  .navlinks .navlink { padding: 15px 20px; border-bottom: 1px solid #EEECE4; }
  .navlinks .navlink.active { background: #F2F7F4; }
  .hamburger { display: flex; }
  .userchip .username { display: none; }
  .pagina { padding-left: 16px; padding-right: 16px; }
  .pagina-margin { margin-left: 16px; margin-right: 16px; }
  .grid-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 16px 40px; }
  .producto-hero { flex-direction: column; }
  .producto-hero .producto-img { width: 100% !important; height: 220px !important; }
  .producto-hero .producto-img-sec { width: 100% !important; height: 110px !important; }
  .producto-galeria { position: static; top: auto; }
  .carrito-layout { flex-direction: column; }
  .carrito-layout > div { width: 100% !important; }
  .login-split { flex-direction: column; height: auto !important; min-height: 100vh; }
  .login-brand { flex: none !important; min-width: 0 !important; width: 100% !important; padding: 32px 24px !important; }
  .login-form-wrap { padding: 32px 20px !important; }

  /* Pedido el 02/10/2026 ("la adaptacion a diferentes pantallas desde
     movil a ordenador no sale bien"), confirmado con 5 capturas reales
     de la misma ficha a anchos de pantalla cada vez mas estrechos: la
     tabla de tallas tiene 11 columnas y en movil el 'scroll' horizontal
     de '.tabla-wrap' deja "Cantidad"/"Añadir" tan lejos a la derecha que
     el cliente apenas las encuentra. Se ocultan aqui las 2 columnas
     menos imprescindibles para comprar (4ª "Código de barras" y 8ª
     "Stock España" -- el dato que de verdad hace falta para decidir ya
     lo da el semaforo de "Disponibilidad"), asi la distancia de scroll
     hasta Cantidad/Añadir se reduce bastante. El 'scroll' horizontal de
     '.tabla-wrap' se deja intacto como red de seguridad para el resto. */
  .tabla-variantes th:nth-child(4), .tabla-variantes td:nth-child(4) { display: none; } /* Código de barras */
  .tabla-variantes th:nth-child(8), .tabla-variantes td:nth-child(8) { display: none; } /* Stock España */
}
@media (max-width: 480px) {
  .grid-productos { grid-template-columns: 1fr; }
}

/* --- Login / cambiar contraseña (pantalla partida con foto) --- */
input:focus, button:focus { outline: 2px solid #1B8F6E; outline-offset: 1px; }
.btn-primary { background: #1B8F6E; border: none; border-radius: 8px; color: #FFFFFF; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 13px; width: 100%; }
.btn-primary:hover { background: #136B52; }
a.link { color: #1B8F6E; }
a.link:hover { color: #136B52; text-decoration: underline; }
.campo-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo-input { width: 100%; padding: 12px 14px; border: 1px solid #D8D5CC; border-radius: 8px; font-size: 15px; font-family: inherit; }
.badge-primer-acceso { display: inline-block; background: #FDF0E3; color: #9A5B1E; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }

/* --- Mensajes flash --- */
.mensaje { padding: 11px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.mensaje.error { background: #FBE7E4; color: #9A3226; }
.mensaje.exito { background: #E6F4EC; color: #176B3F; }
.mensaje.info { background: #E9F1FB; color: #1D4E85; }

/* --- Catalogo --- */
.chip { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid #DEDBD2; background: #FFFFFF; color: #43504A; cursor: pointer; }
.chip.active { background: #1B8F6E; border-color: #1B8F6E; color: #FFFFFF; }
.card { background: #FFFFFF; border: 1px solid #E7E4DB; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.card-img { height: 160px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
/* Pedido el 02/10/2026 ("mejora visual mente el buscador"): antes era
   una caja rectangular con esquinas poco redondeadas y sin ningun
   boton -- ahora es una pildora con sombra suave, que resalta en verde
   de marca al enfocar (lupa incluida), con un boton "Buscar" visible y
   una "x" para vaciar la busqueda cuando ya hay texto. La logica de
   busqueda en si (parametro 'q') no cambia nada. */
.caja-buscador { box-sizing: border-box; position: relative; display: flex; align-items: center; width: 100%; background: #FFFFFF; border: 1px solid #D8D5CC; border-radius: 999px; box-shadow: 0 1px 3px rgba(22, 32, 28, 0.06); padding: 4px 4px 4px 18px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.caja-buscador:focus-within { border-color: #1B8F6E; box-shadow: 0 0 0 3px rgba(27, 143, 110, 0.15); }
.buscador-lupa { flex-shrink: 0; stroke: #9AA39D; margin-right: 10px; transition: stroke 0.15s ease; }
.caja-buscador:focus-within .buscador-lupa { stroke: #1B8F6E; }
/* Generico por clase (no por id): asi vale tanto para el buscador del
   catalogo como para el buscador de dentro de la ficha de producto,
   que tiene su propio '<input>' sin id -- pedido el 02/10/2026 ("el
   buscador que esta dentro de la ficha del producto es el que te dije
   que queria que lo mejorara visualmente"). */
.caja-buscador input[type="text"] { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; padding: 12px 4px; font-size: 15px; font-family: inherit; color: #16201C; }
.buscador-limpiar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9AA39D; font-size: 20px; line-height: 1; text-decoration: none; margin-right: 2px; }
.buscador-limpiar:hover { background: #F3F6F2; color: #5B6B64; }
.buscador-boton { flex-shrink: 0; background: #1B8F6E; color: #FFFFFF; border: none; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; }
.buscador-boton:hover { background: #136B52; }

/* --- Navegacion por categorias (barra lateral tipo arbol) --
   pedido el 02/10/2026 tras ver que la tienda web real navega
   categoria a categoria en vez de enseñar miles de productos de
   golpe en una sola pagina -- ver 'catalogo/servicio.listar_pagina_catalogo'. */
.catalogo-layout { display: flex; align-items: flex-start; gap: 28px; padding: 24px 40px 0; }
.catalogo-contenido { flex: 1; min-width: 0; }
.sidebar-categorias { width: 230px; flex-shrink: 0; background: #FFFFFF; border: 1px solid #E7E4DB; border-radius: 14px; padding: 18px 16px; max-height: calc(100vh - 100px); overflow-y: auto; position: sticky; top: 84px; }

/* Pedido el 02/10/2026 ("cuando se desplaze para ver las lineas de mas
   abajo la foto se siga viendo"): en fichas con muchas tallas la tabla
   de variantes es mas alta que la foto -- se queda fija al hacer scroll,
   mismo patron que '.sidebar-categorias' de arriba. Se desactiva en
   movil (ver el 'media query' de abajo), donde '.producto-hero' ya pasa
   a columna y una foto fija no tendria sentido ahi. */
.producto-galeria { position: sticky; top: 84px; align-self: flex-start; }
.sidebar-categorias ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.sidebar-categorias > ul { padding-left: 0; }
.enlace-raiz { display: block; padding: 8px 0; font-size: 13px; font-weight: 800; color: #16201C; }
.enlace-categoria { display: block; padding: 5px 0; font-size: 13px; font-weight: 600; color: #5B6B64; }
.enlace-categoria.activo, .enlace-raiz.activo { color: #1B8F6E; }

/* Pedido el 02/10/2026 ("la pestaña del desplegable por debajo de la
   categoria suprema asi da confucion"): el '<summary>' de cada rama con
   hijos pasa a fila flex -- el marcador nativo del navegador se oculta
   y se usa el '.chevron' propio (mismo que en "Tus facturas"), para que
   el triangulo quede SIEMPRE al lado del nombre, nunca en su propia
   linea por encima (lo que pasaba porque '.enlace-raiz'/'.enlace-categoria'
   son 'display:block'). */
.sidebar-categorias summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; padding: 6px 0; }
.sidebar-categorias summary::-webkit-details-marker { display: none; }
.sidebar-categorias summary .chevron { flex-shrink: 0; font-size: 15px; font-weight: 800; color: #1B8F6E; transition: transform 0.15s ease; }
.sidebar-categorias summary .enlace-raiz, .sidebar-categorias summary .enlace-categoria { padding: 0; }
.sidebar-categorias details[open] > summary .chevron { transform: rotate(90deg); }
.pildoras-subcategoria { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 20px; }
.paginacion { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 30px 0 50px; font-size: 13px; font-weight: 700; }
.paginacion a, .paginacion span.actual { padding: 9px 15px; border-radius: 8px; border: 1px solid #DEDBD2; background: #FFFFFF; }
.paginacion span.actual { background: #1B8F6E; color: #FFFFFF; border-color: #1B8F6E; }
.paginacion span.deshabilitado { padding: 9px 15px; color: #B9B2A3; }
@media (max-width: 860px) {
  .catalogo-layout { flex-direction: column; padding: 18px 16px 0; }
  .sidebar-categorias { width: 100%; max-height: 240px; position: static; }
}

/* --- Flechas Anterior/Siguiente de la ficha de producto (pedido el
   02/10/2026): pasar de producto sin volver al catalogo, pegadas a los
   margenes izquierdo/derecho de la pantalla. En movil se ocultan (no
   hay sitio: el 'producto-hero' ya pasa a columna) -- se puede volver
   al catalogo con el enlace de siempre. --- */
.flecha-navegacion { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E7E4DB; box-shadow: 0 4px 14px rgba(22,32,28,0.10); display: flex; align-items: center; justify-content: center; z-index: 15; color: #2A332E; }
.flecha-navegacion:hover { border-color: #1B8F6E; color: #1B8F6E; }
.flecha-anterior { left: 18px; }
.flecha-siguiente { right: 18px; }
@media (max-width: 860px) {
  .flecha-navegacion { display: none; }
}

/* --- Tabla de tallas/variantes de un producto agrupado (pedido el
   02/10/2026, "Agrupación de catálogo"/"Talla Catálogo" -- inspirada en
   la pagina de referencia que paso el usuario, drennan.online) --- */
.tabla-variantes { width: 100%; border-collapse: collapse; margin-top: 18px; }
.tabla-variantes th { text-align: left; font-size: 11px; font-weight: 700; color: #78847D; text-transform: uppercase; padding: 0 10px 10px; border-bottom: 1px solid #E7E4DB; }
.tabla-variantes td { padding: 12px 10px; border-bottom: 1px solid #F0EEE7; font-size: 13px; vertical-align: middle; }
.tabla-variantes tr:last-child td { border-bottom: none; }

/* --- Semaforo de disponibilidad (verde/naranja/naranja_fuerte/rojo) --
   pedido el 02/10/2026: verde = stock en España; naranja = sin stock
   pero con un pedido de compra confirmado en camino (~5 dias); rojo =
   sin stock ni pedido Y no se puede seguir vendiendo sin stock (~15
   dias). Ver 'catalogo/servicio.semaforo_disponibilidad'. --- */
.semaforo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.semaforo .punto { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.semaforo.verde .punto { background: #1B8F6E; }
.semaforo.verde { color: #176B3F; }
.semaforo.naranja .punto { background: #E08A2E; }
.semaforo.naranja { color: #9A5B1E; }
/* AÑADIDO el 02/10/2026 ("En reserva... en un color naranja fuerte"):
   "En reserva" -- sin stock en España pero se permite seguir vendiendo
   ('permite_venta_sin_stock') -- un naranja mas saturado/fuerte que el
   '.naranja' de arriba a proposito, para que no se confunda con
   "Pedido en camino". */
.semaforo.naranja_fuerte .punto { background: #F2730D; }
.semaforo.naranja_fuerte { color: #B8450A; }
.semaforo.rojo .punto { background: #C0392B; }
.semaforo.rojo { color: #9A3226; }

/* --- Tarjeta generica (paginas sencillas: inicio, proximamente) --- */
.tarjeta { background: #FFFFFF; border: 1px solid #E7E4DB; border-radius: 14px; padding: 28px; box-shadow: 0 1px 3px rgba(22, 32, 28, 0.05); }

/* Pedido el 02/10/2026 ("muy mal hecho quiero una estetica a holded"):
   el Panel de control pasa de tres tarjetas sueltas a un patron de
   panel de SaaS mas serio -- una fila de cifras clave (KPIs) con icono
   arriba del todo, y cada tarjeta de detalle con su propio icono junto
   al titulo. Mismos datos de siempre, ningun calculo nuevo salvo sumar
   lo que ya devuelve 'inicio/servicio.py' (ver 'inicio.html'). */
.panel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1400px; margin-bottom: 22px; }
.panel-kpi { display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1px solid #E7E4DB; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(22, 32, 28, 0.05); }
.panel-kpi-icono { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgba(27, 143, 110, 0.12); color: #1B8F6E; display: flex; align-items: center; justify-content: center; }
.panel-kpi-valor { font-size: 21px; font-weight: 800; color: #16201C; line-height: 1.25; }
.panel-kpi-etiqueta { font-size: 12px; font-weight: 600; color: #78847D; margin-top: 2px; }

.panel-tarjeta-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.panel-tarjeta-icono { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: rgba(27, 143, 110, 0.12); color: #1B8F6E; display: flex; align-items: center; justify-content: center; }
.panel-tarjeta-titulo { font-size: 15px; font-weight: 800; color: #16201C; }

/* Pedido el 02/10/2026 (la misma captura enseñaba "UNIDADESIMPORTE"
   pegado y numeros como "7593.24" sin espacio entre unidades e importe):
   las tablas del panel ahora SIEMPRE llevan un hueco horizontal real
   entre columnas y 'white-space:nowrap' en las numericas, para que dos
   numeros contiguos nunca se toquen visualmente sin importar lo larga
   que sea la primera columna (el nombre del producto). */
.tabla-panel { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla-panel th { font-weight: 700; color: #9AA39D; text-align: left; padding: 6px 14px 6px 0; white-space: nowrap; }
.tabla-panel th.num, .tabla-panel td.num { text-align: right; padding-left: 18px; white-space: nowrap; }
.tabla-panel td { padding: 9px 14px 9px 0; border-top: 1px solid #F0EEE7; vertical-align: top; }
.tabla-panel tbody tr:hover { background: #FAFAF8; }
/* AÑADIDO el 02/10/2026 ("no me has hecho ni puto caso con el panel de
   control... piensas que esta distribucion es normal?"): el nombre de
   producto de "Tus productos más comprados" se corta ahora SIEMPRE en
   una sola línea (con "..." si no cabe, el nombre completo se ve al
   dejar el raton encima via el atributo 'title') -- antes, un nombre
   largo (o, como se vio con una captura real, el EAN/PVP pegados al
   nombre en el texto que manda Odoo -- ver
   'inicio/servicio._primera_linea') hacia esa columna mucho mas alta
   que sus dos vecinas, "Facturación por año" y "Pedidos realizados". */
.tabla-panel td.nombre-producto { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Misma idea que '.nombre-producto' de arriba, para el numero de
   factura de la tarjeta "Vencimientos" (p.ej. "FC/2026/00050") -- el
   numero completo se ve al dejar el raton encima via 'title'. */
.tabla-panel td.numero-factura { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AÑADIDO el 02/10/2026 ("vwo que esta la mitad de pagina en blanco eso
   es un abuena distribucion?", con una captura real de "Facturación por
   año"/"Pedidos realizados" terminando a la mitad de la pantalla
   mientras "Tus productos más comprados" seguia bajando -- y una
   captura de referencia de Holded donde TODAS las tarjetas de una
   misma fila comparten exactamente la misma altura, con la lista larga
   ("Últimas transacciones") con scroll propio en vez de alargar la
   tarjeta): las tarjetas del panel ahora tienen todas la MISMA altura
   fija dentro de su fila, con su contenido largo (la tabla) en su
   propio scroll interno -- nunca vuelve a quedar hueco en blanco ni una
   tarjeta mucho mas alta que sus vecinas, sea cual sea la cantidad de
   datos de cada una. */
/* Pedido el 02/10/2026 ("lo puedes poner mas ancha pare que se lea
   buen los producto", con una captura real del panel ya desplegado:
   los nombres de producto de "Tus productos más comprados" se cortaban
   mucho antes de lo necesario): de 1100px a 1400px -- con 3 tarjetas
   por fila, cada una gana unos 100px extra de ancho, suficiente para
   que la columna de producto (ver '.nombre-producto' y
   '.numero-factura' mas abajo, tambien ensanchadas a la vez) enseñe
   bastante mas texto antes de cortar con "...". */
.panel-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; max-width: 1400px; align-items: stretch; }
/* En movil (una sola tarjeta por fila) el minimo de 420px de arriba no
   cabe entero y desbordaba la pagina unos pixeles -- se fuerza aqui
   una columna a ancho completo. Va DESPUES de la regla de arriba a
   proposito (misma especificidad -- si fuera antes, la de arriba la
   ganaria igualmente por ir despues en el CSS). */
@media (max-width: 860px) {
  .panel-fila { grid-template-columns: 1fr; }
}
.panel-fila .tarjeta { display: flex; flex-direction: column; height: 480px; min-width: 0; }
.panel-tarjeta-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; padding-right: 4px; margin-right: -4px; }
.panel-tarjeta-scroll::-webkit-scrollbar { width: 6px; }
.panel-tarjeta-scroll::-webkit-scrollbar-thumb { background: #D8D5CC; border-radius: 999px; }
.panel-tarjeta-scroll table.tabla-panel thead th { position: sticky; top: 0; background: #FFFFFF; }
/* Las tablas del panel viven en una tarjeta estrecha (3-4 por fila) --
   con menos aire por columna que '.tabla-panel' normal (pensada para
   el catálogo/facturas a ancho completo) para que quepan sin scroll
   horizontal ni recortar numeros importantes (visto en una captura
   real: la columna "Total"/"Pendiente" se quedaba cortada). */
.panel-tarjeta-scroll table.tabla-panel th,
.panel-tarjeta-scroll table.tabla-panel td { padding-right: 8px; }
.panel-tarjeta-scroll table.tabla-panel th.num,
.panel-tarjeta-scroll table.tabla-panel td.num { padding-left: 8px; }

/* Fila de una factura con algo pendiente de cobro, en la tarjeta
   "Vencimientos" -- "vencida" (ya paso su fecha de vencimiento) se
   enseña en el mismo rojo que el semáforo "Sin stock", para que
   destaque igual de claro. */
.etiqueta-vencida { display: inline-block; font-size: 11px; font-weight: 700; color: #9A3226; background: rgba(192, 57, 43, 0.10); border-radius: 999px; padding: 2px 9px; }
.etiqueta-en-plazo { display: inline-block; font-size: 11px; font-weight: 700; color: #78847D; }

/* Pedido el 02/10/2026 ("en la pantalla de scaner poner una foto
   decorativa"): solo se enseña en pantallas anchas, para no quitarle
   sitio al formulario (lo importante de la pantalla) en movil/tablet. */
@media (min-width: 860px) {
    .foto-decorativa-escaner { display: block !important; }
}

/* Pedido el 02/10/2026 ("triangulo muy pequeño ponerlo mas grande y
   comercial... o profesional de un B2B de empresa solida"): ver la
   declaracion de '.sidebar-categorias summary .chevron' mas arriba,
   ahora mas grande y con el verde de marca en negrita en vez de un
   marcador gris casi invisible. */