/* Fichas (producto, cliente, proveedor) con el estándar de diseño (8-nov-2026, pedido por el dueño: «un contenedor dentro de otro contenedor, campos mal hechos»).
   Las tres comparten el mismo armado (ventana con encabezado + pestañas `.ft-barra` + `.ft-panel` por pestaña), así que se arreglan juntas.
   Va al final de todas las hojas. Esquinas de 8 px, sin cajas con borde dentro de la ventana, pestañas en una fila y campos alineados. */

/* 1. Sin contenedor doble: el contenido de cada pestaña va directo, sin caja con borde, fondo y esquinas de 16 px */
html body #panel .ft-panel > .bloque, html body #panel .ft-panel > form.bloque, html body #panel .ft-panel > section.bloque {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 18px; }
html body #panel .ft-panel > .bloque.ficha-acciones { margin-bottom: 8px; padding: 0 !important; }

/* 2. Pestañas: una sola fila, ancho natural (la última se estiraba a todo el ancho al pasar de renglón), 8 px de esquina */
html body #panel .ft-barra { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
html body #panel .ft-barra > button { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border-radius: 8px; font-size: .9rem; box-shadow: none; transform: none; }
@media (max-width: 760px) { html body #panel .ft-barra > button { min-height: 44px; } }

/* 3. Encabezado de la ficha más bajo: la foto de 104 px dejaba un bloque de 134 px antes de empezar */
html body #panel > header .foto.grande { width: 72px; height: 72px; border-radius: 8px; font-size: 1.4rem; }
html body #panel > header .btn.chico { border-radius: 8px; }

/* 4. Campos: la etiqueta y su explicación arriba, la caja siempre abajo y a la misma altura que sus vecinas; esquinas de 8 px */
html body #panel .ft-panel .f76-rej { align-items: stretch; }
html body #panel .ft-panel label.campo { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; margin: 0; min-width: 0; }
html body #panel .ft-panel label.campo > :is(input, select, textarea, .bs) { margin-top: auto; }
html body #panel .ft-panel label.campo > small { font-size: .78rem; line-height: 1.3; color: var(--tinta-suave); }
html body #panel .ft-panel :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border-radius: 8px; }
html body #panel .ft-panel :is(input:not([type=checkbox]):not([type=radio]), select) { height: 38px; min-height: 38px; }
@media (max-width: 760px) { html body #panel .ft-panel :is(input:not([type=checkbox]):not([type=radio]), select) { height: 44px; min-height: 44px; } html body #panel .ficha-acciones .btn, html body #panel .ft-panel .f76-fila-url > .btn { min-height: 44px; } }
html body #panel .ft-panel .f76-fila-url > .btn { min-height: 38px; border-radius: 8px; }

/* 5. Las tarjetas de cada proveedor y de cada sucursal (una por renglón de la lista): borde fino y 8 px, no 12 px con fondo */
html body #panel .ft-panel :is(.f76-prov, .f76-suc) { border: 0; border-top: 1px solid var(--linea, rgba(255,255,255,.1)); border-radius: 0; background: transparent; padding: 12px 0; box-shadow: none; }

/* 6. Los tres botones de arriba de «Precios y existencias» (Editar datos, Estadísticas, Cambiar código): del tamaño de su texto, no tres píldoras estiradas a todo el ancho */
html body #panel .ficha-acciones { gap: 10px; padding: 0 !important; margin-bottom: 14px; }
html body #panel .ficha-acciones .btn { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border-radius: 8px; }
html body #panel .bloque.ficha-acciones { border: 0; background: none; box-shadow: none; border-radius: 0; margin: 0 0 12px; }
html body #panel .ficha-acciones .btn { min-height: 40px; }

/* 7. Opción de Fichas abierta desde Herramientas: solo su sección. Sin la tira de pestañas de las demás y sin lo que no es de esa opción */
html body #panel.ft-solo .ft-barra { display: none; }
html body #panel .ft-fuera { display: none !important; }
html body #panel.ft-solo .ft-panel { padding-top: 4px; }
html body #panel > header #ft-ver-todo { margin-right: 8px; border-radius: 8px; }

/* 7b. La ficha se arma OCULTA mientras se recorta a la sección pedida (nada de ver la ficha completa un segundo y luego recortarla). La pantalla del selector se ve con «Abriendo…». */
body.ficha-solo-pendiente #panel:not(.er-pagina):not(.ft-solo) { visibility: hidden !important; }
/* Las flechas «anterior / siguiente» recorren la última lista de Productos y abrirían la ficha completa: en la vista de una sola sección se ocultan (vuelven con «Ver toda la ficha») */
html body #panel.ft-solo .ft-nav { display: none; }

/* 8. «Elija el producto / cliente / proveedor»: es la PANTALLA de la opción del menú (página junto al menú, sin tarjeta encima): su título, el campo de búsqueda y la lista, todo plano */
html body #panel.er-pagina .er-pag { max-width: 1100px; display: flex; flex-direction: column; gap: 12px; }
html body #panel.er-pagina .er-sub { margin: 0; }
html body #panel.er-pagina .er-tabs { display: flex; gap: 4px; margin: 0; }
html body #panel.er-pagina .er-tabs button { min-height: 38px; border-radius: 8px; }
html body #panel.er-pagina .er-q { width: 100%; min-height: 44px; height: 44px; border-radius: 8px; padding: 0 14px; font-size: 1rem; }
html body #panel.er-pagina .er-lista table { width: 100%; border-collapse: collapse; border: 0; background: none; box-shadow: none; }
html body #panel.er-pagina .er-lista tr { cursor: pointer; }
html body #panel.er-pagina .er-lista td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--linea, rgba(255,255,255,.08)); }
html body #panel.er-pagina .er-lista tr.sel td { background: var(--acento-suave, rgba(255,255,255,.07)); }
html body #panel.er-pagina .er-lista td small { display: block; opacity: .7; margin-top: 2px; }
html body #panel.er-pagina .er-lista tr.abriendo td { background: var(--acento-suave, rgba(255,255,255,.07)); }
html body #panel.er-pagina .er-esp { float: right; font-size: .85rem; opacity: .8; }
html body #panel.er-pagina.er-abriendo { cursor: progress; }
html body #panel.er-pagina .er-pie { margin: 8px 12px 0; }

/* 8b. Una sección sola ocupa poco: la marca de agua de SOL & LUNA va UNA vez, al centro de la pantalla y detrás del contenido (regla de la sección 3, «marca de agua») */
html body #panel.panel-pagina.ft-solo { isolation: isolate; }
html body #panel.panel-pagina.ft-solo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("vacio-marca.svg") center / min(340px, 46%) auto no-repeat; }

html body #panel.er-pagina .er-accion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 0 12px; border-bottom: 1px solid var(--linea, rgba(255,255,255,.1)); }
html body #panel.er-pagina .er-accion .nota { margin: 0; flex: 1 1 280px; }

/* 8c. Elegir un PRODUCTO: tabla (foto, nombre y código, familia, precio, existencia) a todo el ancho + vista previa del renglón marcado a la derecha (pedido el 8-nov-2026: la lista angosta dejaba media pantalla vacía).
   Con la vista previa visible (≥1200 px) un clic marca y el botón, Enter o doble clic abren; más angosto, no hay vista previa y un clic abre. */
html body #panel.er-pagina .er-pag.er-split { max-width: 2000px; }
html body #panel.er-pagina .er-barra { display: flex; gap: 12px; align-items: center; }
html body #panel.er-pagina .er-barra .er-q { flex: 0 1 380px; min-width: 0; }       /* el buscador es corto (nombre o código se escriben en pocas letras); el ancho sobrante queda libre */
html body #panel.er-pagina .er-famwrap { flex: 0 0 min(280px, 40%); margin: 0; }
html body #panel.er-pagina > header > h2 { margin-right: 0; }
html body #panel.er-pagina > header > .ayuda-i { margin: 0 auto 0 14px; }          /* el «?» queda junto al título y «Cerrar» se va a la derecha */
html body #panel.er-pagina .er-gr .foto:not(img) { width: min(260px, 100%); height: min(260px, 40vh); font-size: 4rem; }
html body #panel.er-pagina .er-famwrap[hidden], html body #panel.er-pagina .er-det[hidden] { display: none; }
html body #panel.er-pagina .er-cuerpo { display: block; }
html body #panel.er-pagina .er-split .er-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
html body #panel.er-pagina .er-tabla th { font-weight: 600; font-size: .85rem; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--regla, rgba(255,255,255,.12)); background: var(--blanco, var(--papel)); color: var(--tinta-suave, inherit); }
/* la caja de la tabla toma TODO el alto que le queda (lo calcula fichas99.js: «ajustarCaja»); sin tope fijo ni espacio muerto debajo */
html body #panel.er-pagina .er-lista .tabla-scroll { max-height: none; }
html body #panel.er-pagina .er-lista .tabla-scroll thead th { position: sticky; top: 0; z-index: 3; }
html body #panel.er-pagina .er-tabla th.er-num, html body #panel.er-pagina .er-tabla td.er-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body #panel.er-pagina .er-tabla td.er-fam { opacity: .75; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
html body #panel.er-pagina .er-prod { display: flex; align-items: center; gap: 14px; }
html body #panel.er-pagina .er-prod .foto { width: 44px; height: 44px; font-size: .95rem; }
html body #panel.er-pagina .er-prod .nombre { min-width: 0; font-weight: 600; flex: 1 1 auto; }
html body #panel.er-pagina .er-prod .nombre small { font-weight: 400; font-family: var(--f-cifra, ui-monospace, monospace); }
html body #panel.er-pagina .er-tabla td { height: 60px; }
/* sin la columna «N°» automática de las tablas largas: aquí el avatar identifica al renglón y el número se encimaba */
html body #panel.er-pagina .er-tabla.con-num :is(thead th, tbody td)::before { content: none; }
html body #panel.er-pagina .er-tabla.con-num :is(thead th, tbody td):first-child { padding-left: 12px; }
html body #panel.er-pagina .er-tabla tr:hover td { background: var(--acento-suave, rgba(255,255,255,.05)); }
html body #panel.er-pagina .er-tabla tr.sel td { background: var(--acento-suave, rgba(255,255,255,.08)); }
html body #panel.er-pagina .er-pto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; background: var(--hoja, #4bbf86); vertical-align: middle; }
html body #panel.er-pagina .er-datos .er-pto { margin: 0 8px 0 0; }
html body #panel.er-pagina .er-pto.b { background: var(--ambar, #efb45b); }
html body #panel.er-pagina .er-pto.c { background: var(--jitomate, #ff8277); }
html body #panel.er-pagina .er-det { border-left: 1px solid var(--linea, rgba(255,255,255,.12)); padding-left: 40px; position: sticky; top: 8px; }
html body #panel.er-pagina .er-gr .foto { width: min(260px, 100%); height: min(260px, 40vh); border-radius: 8px; font-size: 4rem; }
html body #panel.er-pagina .er-det h2 { margin: 18px 0 2px; font-size: 1.6rem; overflow-wrap: anywhere; }
html body #panel.er-pagina .er-d-sub { margin: 0; }
html body #panel.er-pagina .er-datos { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 18px; margin: 20px 0; }
html body #panel.er-pagina .er-datos dt { opacity: .7; }
html body #panel.er-pagina .er-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
html body #panel.er-pagina .er-det .btn { min-height: 44px; padding: 0 22px; border-radius: 8px; }
html body #panel.er-pagina.er-abriendo .er-det .btn { pointer-events: none; opacity: .6; }
@media (min-width: 1200px) { html body #panel.er-pagina .er-split .er-cuerpo { grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 520px); } }
@media (max-width: 1199px) { html body #panel.er-pagina .er-det { display: none; } }
@media (max-width: 900px) { html body #panel.er-pagina .er-tabla .er-fam { display: none; } }
@media (max-width: 700px) {
  html body #panel.er-pagina .er-barra { flex-direction: column; align-items: stretch; }
  html body #panel.er-pagina .er-barra .er-q { flex: 0 0 auto; }               /* en columna, el «ancho» de arriba se volvía alto */
  html body #panel.er-pagina .er-famwrap { flex-basis: auto; }
  html body #panel.er-pagina .er-tabla td { height: 56px; padding: 8px 6px; }
  html body #panel.er-pagina .er-tabla th.er-num:last-child, html body #panel.er-pagina .er-tabla td.er-ex { display: none; }
}

/* 9. Menú lateral: «Abre Cobranza» en las opciones que salen a otra pantalla */
html body .lat-fn .lat-sale { display: block; font-size: .72rem; opacity: .65; margin-top: 2px; font-weight: 400; }

/* 10. Estadísticas del producto: plana, en columnas y con gráficas. Sin tarjetas con borde; secciones separadas por una línea fina recta. Esquinas de 8 px. */
html body #panel.est-panel .est-pag { max-width: 1600px; }
html body #panel.est-panel .est-filtros { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; }
html body #panel.est-panel .est-filtros .campo { flex: 0 1 260px; min-width: 200px; margin: 0; }
html body #panel.est-panel .est-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); border: 0; border-top: 1px solid var(--regla, rgba(255,255,255,.12)); border-bottom: 1px solid var(--regla, rgba(255,255,255,.12)); background: none; padding: 0; border-radius: 0; box-shadow: none; gap: 0; }
html body #panel.est-panel .est-kpi { padding: 14px 18px; border-left: 1px solid var(--regla, rgba(255,255,255,.12)); min-width: 0; }
html body #panel.est-panel .est-kpi:first-child { border-left: 0; padding-left: 0; }
html body #panel.est-panel .est-kpi .rotulo { font-size: .82rem; color: var(--tinta-suave); }
html body #panel.est-panel .est-kpi .cifra { font-size: 1.7rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
html body #panel.est-panel .est-kpi .nota { margin: 4px 0 0; font-size: .78rem; line-height: 1.3; }
html body #panel.est-panel .est-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 36px; margin: 24px 0; align-items: start; }
html body #panel.est-panel .est-grid section, html body #panel.est-panel .est-hechos section { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
html body #panel.est-panel .est-grid h3, html body #panel.est-panel .est-hechos h3 { margin: 0 0 10px; font-size: 1.05rem; }
html body #panel.est-panel .est-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
html body #panel.est-panel .est-cab h3 { margin: 0; }
html body #panel.est-panel .est-tog { display: inline-flex; gap: 4px; }
html body #panel.est-panel .est-tog button { min-height: 40px; padding: 0 16px; border-radius: 8px; }
@media (max-width: 760px) { html body #panel.est-panel .est-tog button { min-height: 44px; } }
html body #panel.est-panel .est-lado section + section { border-top: 1px solid var(--regla, rgba(255,255,255,.12)); padding-top: 18px; margin-top: 22px; }
html body #panel.est-panel .est-svg { width: 100%; height: auto; display: block; }
html body #panel.est-panel .est-guia { stroke: var(--regla, rgba(255,255,255,.14)); stroke-width: 1; }
html body #panel.est-panel .est-eje { fill: var(--tinta-suave); font-size: 11px; }
html body #panel.est-panel .est-barra { fill: var(--hoja, #2e7d5b); opacity: .75; }
html body #panel.est-panel .est-barra.mejor { opacity: 1; }
html body #panel.est-panel .est-barra.vacia { opacity: .25; }
html body #panel.est-panel .est-prom { stroke: var(--ambar, #eeb052); stroke-width: 1.5; stroke-dasharray: 5 4; }
html body #panel.est-panel .est-prom-t { fill: var(--ambar, #eeb052); }
html body #panel.est-panel .est-pie { margin: 8px 0 0; }
html body #panel.est-panel .est-sin { padding: 28px 0; }
html body #panel.est-panel .est-exis { display: flex; flex-direction: column; gap: 12px; }
html body #panel.est-panel .est-exis-f { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 12px; align-items: center; }
html body #panel.est-panel .est-exis-n { font-weight: 600; overflow-wrap: anywhere; }
html body #panel.est-panel .est-exis-b { position: relative; height: 14px; border-radius: 8px; background: var(--regla, rgba(255,255,255,.1)); overflow: visible; }
html body #panel.est-panel .est-exis-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--hoja, #2e7d5b); }
html body #panel.est-panel .est-exis-b i.bajo { background: var(--jitomate, #c8442f); }
html body #panel.est-panel .est-exis-b u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ambar, #eeb052); text-decoration: none; }
html body #panel.est-panel .est-exis-v { font-weight: 800; }
html body #panel.est-panel .est-exis-v.bajo { color: var(--jitomate, #c8442f); }
html body #panel.est-panel .est-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body #panel.est-panel .est-par .cifra { font-size: 1.6rem; font-weight: 800; }
html body #panel.est-panel .est-hechos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; border-top: 1px solid var(--regla, rgba(255,255,255,.12)); padding-top: 20px; }
html body #panel.est-panel .est-hechos p { margin: 0 0 4px; }
@media (max-width: 1000px) { html body #panel.est-panel .est-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 520px) { html body #panel.est-panel .est-kpi { border-left: 0; padding-left: 0; } html body #panel.est-panel .est-par { grid-template-columns: 1fr; } }

/* los enlaces «Abrir» de la ficha: 44 px en pantallas táctiles chicas (esta regla va al final para ganarle a la de 38 px) */
@media (max-width: 760px) { html body #panel .ft-panel .f76-fila-url > :is(.btn, button, a) { min-height: 44px; } }