/* =====================================================================
   FOOD LINK  ·  hoja de estilo unica
   Tema claro, tipografia del sistema, sin dependencias externas.
   El verde de la marca es acento, no fondo: manda el blanco.
   ===================================================================== */

@font-face{
  font-family:'Manrope';
  src:url('fuentes/manrope.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  /* marca */
  --marca:#22603a; --marca2:#2f7d4b; --marca-viva:#3f9c63;
  --marca-suave:#e4f2e9; --marca-linea:#cae3d3; --marca-tenue:#9cc6ab;
  --rojo:#b10d33; --rojo-suave:#fde9ee;
  --ok:#1c7a46;

  /* acentos de las tarjetas: fondo suave + tinta fuerte */
  --a1:#e4f4ea; --a1t:#1c7a46;      /* verde  */
  --a2:#fde9ee; --a2t:#b10d33;      /* carmesi */
  --a3:#fdf0da; --a3t:#9a6510;      /* ambar  */
  --a4:#e7eefc; --a4t:#2a5bb5;      /* azul   */

  /* superficies: tarjetas blancas sobre un fondo apenas tibio */
  --ink:#1b2a21; --ink2:#4c5b52; --muted:#7e8b82;
  --line:#e5eae3; --fondo:#f1f4ee; --blanco:#ffffff;
  --tinte:#f6f9f4;          /* cabeceras de panel y de tabla */

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);   /* los titulos ya no van en serif */

  --radio:14px;
  --sombra:0 1px 2px rgba(27,42,33,.05), 0 6px 16px rgba(27,42,33,.06);
  --sombra-alta:0 12px 28px rgba(27,42,33,.13);
}

*{box-sizing:border-box}
/* El hueco de la barra de desplazamiento se reserva siempre: si no, la
   pagina salta de lado al cambiar de pantalla.
   Ojo: no poner overflow-x:hidden aqui, rompe el position:sticky de la
   barra lateral. Si algun dia hay desborde, se arregla en el culpable. */
html{scrollbar-gutter:stable}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans);
  font-size:14px; color:var(--ink); background:var(--fondo);
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--marca)}
.oculto{display:none !important}

/* ---------------------------------------------------------- acceso */
/* 100dvh sigue el alto util real del navegador movil; 100vh queda de respaldo */
#acceso{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:20px}
.tarjeta-acceso{
  width:min(400px,100%); background:var(--blanco); border-radius:20px; padding:0 28px 30px;
  box-shadow:var(--sombra-alta); border:1px solid var(--line); overflow:hidden;
}
.tarjeta-acceso h1{margin:14px 0 4px; font-size:22px; font-weight:800; letter-spacing:-.4px}
.tarjeta-acceso p.sub{margin:0 0 22px; color:var(--muted); font-size:13px}

/* logo-claro.png es transparente y viene en tonos claros: va directo sobre el
   verde, sin recuadro blanco detras */

/* el verde solo aqui: hace de fondo para que la marca contraste */
.cabecera-marca{
  background:linear-gradient(135deg,#194829,#22603a 58%,#2d7847);
  margin:0 -28px 24px; padding:30px 22px; display:flex; justify-content:center;
}
.marco-logo{display:block}
.marco-logo img{display:block; width:196px; max-width:100%; height:auto}

/* ----------------------------------------------------------- shell */
#app{display:grid; grid-template-columns:240px 1fr; min-height:100vh; min-height:100dvh}

aside{
  background:linear-gradient(180deg,#17442a,#22603a 55%,#2f7d4b);
  color:#d7e8dd; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; height:100dvh;
}
aside .cabe{padding:22px 14px 20px; border-bottom:1px solid rgba(255,255,255,.13)}
aside .cabe .marco-logo{width:max-content; margin:0 auto}
aside .cabe img{display:block; width:152px; height:auto}

nav{padding:6px 10px; flex:1; overflow-y:auto}
.navi{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; margin:1px 0; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:#cfe3d7; font-weight:600; font-size:13.5px;
}
.navi:hover{background:rgba(255,255,255,.10); color:#fff}
.navi.on{background:rgba(255,255,255,.20); color:#fff; font-weight:700}
.navi .ic{width:18px; text-align:center; font-size:13px; opacity:.75}
.navi.on .ic{opacity:1}

aside .pie{padding:14px 18px; border-top:1px solid rgba(255,255,255,.14); font-size:11.5px; color:#a9c8b6}
aside .pie strong{display:block; color:#fff; font-size:13px}
aside .pie span{display:block; margin-top:2px}

main{padding:18px 20px 52px; min-width:0}
/* en monitores anchos el contenido se centra en vez de estirarse de borde a borde */
.topbar, .vista{max-width:1240px; margin-left:auto; margin-right:auto}

/* encabezado: una barra con superficie propia, no elementos sueltos */
/* El encabezado no se va: al bajar por una lista larga uno pierde de
   vista en que pantalla esta, que mes mira y donde estaban los botones.
   La banda de arriba tapa el hueco del padding de main. */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 18px; flex-wrap:wrap; margin:0 auto 14px; padding:13px 18px;
  background:var(--blanco); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--sombra);
}
.topbar::before{
  content:''; position:absolute; left:-20px; right:-20px; top:-19px;
  height:19px; background:var(--fondo);
}
.topbar h1{margin:0; font-size:26px; font-weight:800; letter-spacing:-.7px; color:var(--ink)}
.topbar .sub{font-size:13px; color:var(--muted); margin-top:3px}
.topbar .lado{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.topbar .sub{margin-top:2px}
.topbar .acc{display:flex; gap:8px; flex-wrap:wrap}

/* el selector de mes es UN control, no cuatro botones sueltos */
.periodo{
  display:inline-flex; align-items:stretch;
  background:var(--blanco); border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
}
.periodo input[type=month]{
  width:auto; min-width:148px; text-align:center; color-scheme:light;
  border:0; border-radius:0; background:transparent;
  color:var(--ink); font-weight:700; padding:8px 4px;
}
.periodo input[type=month]:focus{box-shadow:none; background:var(--marca-suave)}
.periodo .btn{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  color:var(--ink2); font-weight:700; padding:8px 11px;
}
.periodo .btn:hover{background:var(--marca-suave); color:var(--marca)}
.periodo .btn:disabled{background:transparent; color:#c6cfc8; opacity:1}
.periodo .btn.chico{min-width:34px; justify-content:center; font-size:16px; line-height:1}
#mes-hoy{border-left:1px solid var(--line)}

/* ------------------------------------------------- cifra principal */
.hero{
  background:linear-gradient(135deg,#1a4b2d,#22603a 52%,#2f7d4b);
  border:0; border-radius:18px; color:#fff;
  padding:20px 22px; box-shadow:0 12px 30px rgba(26,75,45,.28); margin-bottom:14px;
}
.saludo{font-size:13px; color:var(--muted); margin:0 0 5px; font-weight:600}

/* Todo lo de dentro va sobre verde: los colores claros van aqui, en un solo
   lugar, para que no los pise ninguna regla posterior. */
.hero .arriba{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.hero .rot{font-size:13px; font-weight:600; color:rgba(255,255,255,.80)}
.hero .cifra{font-size:44px; font-weight:800; letter-spacing:-2px; line-height:1.03; margin-top:4px; color:#fff}
.hero .meta{text-align:right; font-size:12.5px; color:rgba(255,255,255,.80)}
.hero .meta b{display:block; font-size:21px; color:#fff; font-weight:800; letter-spacing:-.6px; margin-top:3px}
.hero .pie-hero{margin:14px 0 0; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.85)}
.hero .pie-hero b{color:#fff}
.hero .delta{background:rgba(255,255,255,.20); color:#fff}
.hero .delta.baja{background:rgba(255,255,255,.20); color:#ffd9e1}
.hero .delta.sube{background:rgba(255,255,255,.20); color:#bff0cd}
.hero .medidor{background:rgba(255,255,255,.24)}
.hero .medidor > i{background:linear-gradient(90deg,#ffd166,#f6a625)}
.hero .medidor > i.lleno{background:linear-gradient(90deg,#9ae6a8,#4ecb72)}

/* medidor: el riel es un paso claro del mismo verde */
.medidor{height:11px; border-radius:999px; background:var(--marca-suave); overflow:hidden; margin-top:14px}
.medidor > i{display:block; height:100%; border-radius:999px; background:var(--marca); min-width:3px}

.chispa{display:block}

/* ------------------------------------------------------ stat tiles */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; margin-bottom:12px}
.kpi{
  background:var(--blanco);
  border:1px solid var(--line); border-radius:var(--radio);
  padding:14px 15px; box-shadow:var(--sombra);
  transition:box-shadow .14s ease, transform .14s ease;
}
.kpi-top{display:flex; align-items:center; gap:9px; margin-bottom:2px}
.chip-ico{
  width:30px; height:30px; border-radius:9px; flex:0 0 30px;
  display:grid; place-items:center; background:var(--a1); color:var(--a1t);
}
.chip-ico svg{width:17px; height:17px}
.kpi.c1 .chip-ico{background:var(--a1); color:var(--a1t)}
.kpi.c2 .chip-ico{background:var(--a2); color:var(--a2t)}
.kpi.c3 .chip-ico{background:var(--a3); color:var(--a3t)}
.kpi.c4 .chip-ico{background:var(--a4); color:var(--a4t)}
.kpi:hover{box-shadow:var(--sombra-alta); transform:translateY(-2px)}
.kpi .rot{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.25}
/* cifras grandes con las figuras proporcionales de la fuente, no tabulares */
.kpi .val{font-size:24px; font-weight:800; letter-spacing:-.9px; margin-top:6px; color:var(--ink)}
.kpi .note{font-size:12px; color:var(--muted); margin-top:5px}
.kpi.ok .val{color:var(--ok)}
.kpi.mal .val{color:var(--rojo)}

.delta{
  display:inline-flex; align-items:center; gap:4px; margin-top:7px;
  font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px;
}
.delta.sube{background:var(--marca-suave); color:var(--ok)}
.delta.baja{background:var(--rojo-suave); color:var(--rojo)}
.delta.plano{background:#f1ebdd; color:var(--muted)}

/* ---------------------------------------------------------- panel */
.panel{
  background:var(--blanco); border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:var(--sombra); margin-bottom:12px;
  /* 'clip' recorta como 'hidden' pero NO crea un contenedor de scroll:
     si no, los filtros de adentro no se pueden pegar al desplazarse.
     El 'hidden' queda de respaldo para navegadores viejos. */
  overflow:hidden;
  overflow:clip;
}
.panel > h2{
  margin:0; padding:12px 16px; border-bottom:1px solid var(--line);
  background:var(--tinte); border-radius:var(--radio) var(--radio) 0 0;
  font-size:15px; font-weight:800; letter-spacing:-.2px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.panel > h2 .ayuda{font-weight:400; font-size:12px}
.panel .cuerpo{padding:13px 16px}
.panel .cuerpo.pegado{padding:0}

.barra{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px}

/* Los filtros quedan justo debajo del encabezado. El alto del encabezado
   cambia (mes, botones, telefono), asi que lo mide el JS y lo deja en
   --alto-topbar; el 96px es solo el valor de arranque. */
/* Van pegados JUSTO debajo del encabezado, sin dejar rendija: si se
   separan aunque sea 10px, por ahi se ve pasar el contenido. El aire se
   consigue con el padding de la propia barra, que si tapa. */
.panel .cuerpo.fija{
  position:sticky; top:var(--alto-topbar, 96px); z-index:25;
  background:var(--blanco); border-bottom:1px solid var(--line);
}
.panel .cuerpo.fija .barra{margin-bottom:0}
.barra.fija-sola{
  position:sticky; top:var(--alto-topbar, 96px); z-index:25;
  background:var(--fondo); padding:12px 0; margin-bottom:0;
}
.barra .crece{flex:1; min-width:150px}

/* -------------------------------------------------------- botones */
.btn{
  border:1px solid var(--line); background:var(--blanco); color:var(--ink2);
  padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease;
}
.btn:hover{background:#f8f3e7; color:var(--ink)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.pri{background:var(--marca); border-color:var(--marca); color:#fff}
.btn.pri:hover{background:var(--marca2); color:#fff}
.btn.ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn.peligro{background:#fff; border-color:#eec3cf; color:var(--rojo)}
.btn.peligro:hover{background:var(--rojo-suave)}
.btn.claro{background:var(--blanco); border-color:var(--line); color:var(--ink2)}
/* accion de salida de plata: ambar, para distinguirla de la venta */
.btn.ambar{background:#d98c22; border-color:#d98c22; color:#fff}
.btn.ambar:hover{background:#c37a14; color:#fff}
.btn.pri, .btn.ambar, .btn.ok{box-shadow:0 2px 6px rgba(27,42,33,.16)}
.btn.chico{padding:5px 10px; font-size:12px; border-radius:8px}

/* --------------------------------------------------------- campos */
label.campo{display:block; margin-bottom:10px}
label.campo > span{display:block; font-size:12px; font-weight:600; color:var(--ink2); margin-bottom:5px}
input,select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--blanco); outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--marca2); box-shadow:0 0 0 3px var(--marca-suave)}
input[readonly]{background:#f7f2e6; color:var(--muted)}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0 14px}

/* --------------------------------------------------------- tablas */
.tabla-caja{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:8px 11px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
  background:var(--tinte); font-weight:700; position:sticky; top:0;
}
tbody tr:hover{background:#faf6ea}
/* cifras tabulares solo en columnas, para que alineen */
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.vacio{padding:26px; text-align:center; color:var(--muted)}
#t-aporte td:first-child{white-space:normal; min-width:178px}
#t-aporte th,#t-aporte td{padding:9px 10px; vertical-align:middle}
#t-aporte th{white-space:normal; line-height:1.25; vertical-align:bottom}
#t-aporte input{width:76px; text-align:right; padding:5px 7px}
#t-aporte tr.cambiado{background:#fbf0d6}
.sub-prod{font-size:11px; color:var(--muted); font-weight:400}
.resumen-plan{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; align-items:end}
.resumen-plan .rot{font-size:12.5px; color:var(--muted); font-weight:600}
.resumen-plan .cifra{font-size:26px; font-weight:700; letter-spacing:-.6px; margin-top:4px}
.resumen-plan .cifra.mal{color:var(--rojo)}
.resumen-plan .cifra.bien{color:var(--ok)}

/* separador de mes dentro de un listado */
tr.sep td{
  background:var(--marca-suave); border-bottom:1px solid var(--marca-linea); color:var(--marca);
  font-size:12px; font-weight:700; padding:8px 12px;
}
tr.sep td span{font-weight:500; color:#5b7a68}
tr.sep td span::before{content:'\0000B7'; margin:0 7px; color:var(--marca-tenue)}
tr.mes-fila{cursor:pointer}
tr.mes-fila.on td{background:var(--marca-suave); font-weight:700}

.chip{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; background:#f1ebdd; color:var(--ink2)}
.chip.verde{background:var(--marca-suave); color:var(--ok)}
.chip.rojo{background:var(--rojo-suave); color:var(--rojo)}
.chip.naranja{background:#fdf2e4; color:#9a6516}

/* ------------------------------------------------------ productos */
.grilla-prod{display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:14px}
.card-prod{
  background:var(--blanco); border:1px solid var(--line); border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column; cursor:pointer;
  transition:box-shadow .14s ease;
}
.card-prod:hover{box-shadow:var(--sombra-alta)}
.card-prod .foto{
  height:138px; background:#f1ebdd center/cover no-repeat; display:grid; place-items:center;
  color:#b5aa96; font-size:28px; border-bottom:1px solid var(--line);
}
.card-prod .info{padding:12px 13px; flex:1}
.card-prod .nom{font-weight:650; line-height:1.3; margin-bottom:3px}
.card-prod .sku{font-size:11px; color:var(--muted); font-family:ui-monospace,Consolas,monospace}
.card-prod .fila{display:flex; justify-content:space-between; align-items:center; margin-top:9px; font-size:12.5px}
.card-prod .precio{font-weight:700; font-size:14px}

.mini{width:32px; height:32px; border-radius:8px; object-fit:cover; background:#f1ebdd; vertical-align:middle}

/* ---------------------------------------------------------- modal */
.velo{position:fixed; inset:0; background:rgba(45,36,24,.44); display:grid; place-items:center; padding:16px; z-index:50}
.modal{
  background:var(--blanco); border-radius:18px; width:min(760px,100%); max-height:92vh; overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.modal h3{
  margin:0; padding:15px 20px; border-bottom:1px solid var(--line);
  font-size:16px; font-weight:800; letter-spacing:-.2px;
  background:var(--tinte); display:flex; justify-content:space-between; align-items:center;
}
.modal .cont{padding:18px 20px}
.modal .pie{padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.cerrar{background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--muted)}

/* --------------------------------------------------------- avisos */
#aviso{position:fixed; right:18px; bottom:18px; z-index:99; display:flex; flex-direction:column; gap:8px}
.toast{
  background:var(--ink); color:#fff; padding:11px 16px; border-radius:12px; font-size:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.22); max-width:340px;
}
.toast.err{background:var(--rojo)}
.toast.ok{background:var(--ok)}

/* ----------------------------------------------- grafico de barras */
.mini-graf{display:flex; align-items:flex-end; gap:6px; height:150px; padding:10px 4px 0}
.mini-graf .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; min-width:0}
/* barras delgadas, punta redondeada y base cuadrada */
.mini-graf .b{width:100%; max-width:24px; background:var(--marca-tenue); border-radius:4px 4px 0 0; min-height:2px}
.mini-graf .col.actual .b{background:var(--marca)}
.mini-graf .et{font-size:10.5px; color:var(--muted); white-space:nowrap}

.ayuda{font-size:12px; color:var(--muted); line-height:1.55}
.dato-grande{font-size:28px; font-weight:700; letter-spacing:-.6px}

/* ---------------------------------------------------------- movil */
#menu-movil{display:none}
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  aside{
    position:fixed; left:0; top:0; bottom:0; width:240px; z-index:60;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.18);
  }
  aside.abierta{transform:none}
  #velo-menu{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55}
  #menu-movil{display:inline-flex}
  main{padding:14px 14px 70px}
  .topbar{align-items:flex-start}
  .topbar .lado{justify-content:flex-start}
  .hero .cifra{font-size:38px}
  .hero .meta{text-align:left}
  th,td{padding:9px 10px}
}
@media print{
  aside,.topbar .lado,.barra,#menu-movil{display:none !important}
  #app{grid-template-columns:1fr}
  body{background:#fff}
  .panel,.kpi,.hero{box-shadow:none}
}

/* aviso al importar una factura */
.aviso-lectura{
  background:#fdf3e0; border:1px solid #f0d9a8; color:#8a5a10;
  border-radius:12px; padding:11px 14px; font-size:12.5px; line-height:1.55; margin-bottom:14px;
}

/* tabla del pedido al proveedor */
#t-catalogo th,#t-catalogo td{padding:8px 9px; vertical-align:middle}
#t-catalogo th:first-child,#t-catalogo td:first-child{width:42px}
#t-catalogo td:nth-child(2){white-space:normal; min-width:190px}
#t-catalogo input{width:72px}

/* tabla del pedido en curso */
#t-pedido th,#t-pedido td{padding:8px 9px; vertical-align:middle}
#t-pedido th:first-child,#t-pedido td:first-child{width:42px}
#t-pedido td:nth-child(2){white-space:normal; min-width:190px}
#panel-pedido{border-color:var(--marca-linea)}
#panel-pedido > h2{background:var(--marca-suave); color:var(--marca)}

/* la fila que acaba de entrar al pedido se destaca un momento */
@keyframes entra-fila{from{background:#fdf0cf} to{background:transparent}}
#t-pedido tr.recien td{animation:entra-fila 1.5s ease-out}
@media (prefers-reduced-motion: reduce){#t-pedido tr.recien td{animation:none}}

/* ------------------------------------------------- pedidos en movil */
.solo-movil{display:none}

@media (max-width:760px){
  .solo-movil{display:inline}

  /* la pantalla del telefono es corta: se queda el encabezado, que dice
     donde estas y trae los botones, pero los filtros se van con el scroll */
  .panel .cuerpo.fija, .barra.fija-sola{position:static}

  /* y el encabezado se aprieta: el boton de menu va al lado del titulo,
     no encima. De 166px baja a poco mas de 100 sin perder nada */
  .topbar{padding:10px 14px; gap:8px 12px}
  .topbar > div:first-child{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:2px}
  .topbar > div:first-child .sub{flex:1 0 100%}
  .topbar h1{font-size:21px}
  #menu-movil{margin-bottom:0 !important}
  .barra.fija-sola{padding:0; margin-bottom:12px}
  .panel .cuerpo.fija .barra{margin-bottom:0}

  /* las tres tablas de armado se convierten en tarjetas apiladas.
     La foto a la izquierda; arriba el nombre y el precio; abajo el stock
     junto a la casilla de cantidad, que es la decision que se toma aqui.
     El orden de las columnas manda: si se agrega una, hay que mover los
     nth-child de mas abajo. */
  #t-catalogo thead, #t-pedido thead, #t-mis-prod thead{display:none}
  #t-catalogo, #t-pedido, #t-mis-prod{display:block}
  #t-catalogo tbody, #t-pedido tbody, #t-mis-prod tbody{display:block}

  #t-catalogo tbody tr, #t-pedido tbody tr, #t-mis-prod tbody tr{
    display:grid; gap:4px 10px; align-items:center;
    grid-template-columns:46px 1fr auto auto;
    padding:11px 13px; border-bottom:1px solid var(--line);
  }
  #t-catalogo tbody tr{
    grid-template-areas:"foto nombre nombre precio" "foto tengo pedir total";}
  #t-pedido tbody tr{
    grid-template-areas:"foto nombre nombre quitar" "foto tengo cantidad total";}
  #t-mis-prod tbody tr{
    grid-template-areas:"foto nombre nombre precio" "foto tengo pedir pedir";}

  #t-catalogo td, #t-pedido td, #t-mis-prod td{
    border:0; padding:0; white-space:normal; text-align:left}

  /* foto | nombre | tengo (3ra) : igual en las tres */
  #t-catalogo td:nth-child(1), #t-pedido td:nth-child(1), #t-mis-prod td:nth-child(1){grid-area:foto}
  #t-catalogo td:nth-child(2), #t-pedido td:nth-child(2), #t-mis-prod td:nth-child(2){grid-area:nombre}
  #t-catalogo td:nth-child(3), #t-pedido td:nth-child(3), #t-mis-prod td:nth-child(3){grid-area:tengo}

  #t-catalogo td:nth-child(4){grid-area:precio; text-align:right; font-weight:700}
  #t-catalogo td:nth-child(5){grid-area:pedir; text-align:right}
  #t-catalogo td:nth-child(6){grid-area:total; text-align:right; font-weight:700}

  #t-pedido td:nth-child(4){display:none}          /* el precio va en la sublinea */
  #t-pedido td:nth-child(5){grid-area:cantidad; text-align:right}
  #t-pedido td:nth-child(6){grid-area:total; text-align:right; font-weight:700}
  #t-pedido td:nth-child(7){grid-area:quitar; text-align:right}

  #t-mis-prod td:nth-child(4){grid-area:precio; text-align:right; font-weight:700}
  #t-mis-prod td:nth-child(5){grid-area:pedir; text-align:right}

  /* la cifra del stock se lee sola, sin rotulo que la acompane */
  #t-catalogo .stock-cif, #t-pedido .stock-cif, #t-mis-prod .stock-cif{font-size:15px}

  /* dedos, no punteros */
  #t-catalogo input, #t-pedido input, #t-mis-prod input{
    width:88px !important; padding:9px 10px !important; font-size:16px}
  #t-pedido .btn.chico{padding:7px 11px}
  .mini{width:42px; height:42px}
}

/* ------------------------------------------------ foto en grande */
.mini{cursor:zoom-in}

.ver-foto{
  position:absolute; top:7px; right:7px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:0; cursor:zoom-in;
  background:rgba(255,255,255,.92); color:var(--ink2); font-size:14px; line-height:1;
  box-shadow:0 2px 6px rgba(20,35,28,.22);
}
.ver-foto:hover{background:#fff; transform:scale(1.08)}
.card-prod .foto, #mp-vista{position:relative}

.lupa{
  position:fixed; inset:0; z-index:120; background:rgba(14,22,17,.86);
  display:grid; place-items:center; padding:20px; cursor:zoom-out;
}
.lupa-marco{
  max-width:min(1100px,94vw); max-height:88vh; overflow:auto;
  background:#fff; border-radius:16px; padding:12px; box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.lupa-marco img{
  display:block; max-width:100%; max-height:76vh; margin:0 auto;
  object-fit:contain; cursor:zoom-in; border-radius:8px;
}
.lupa-marco.real img{max-width:none; max-height:none; cursor:zoom-out}
.lupa-pie{
  margin-top:10px; text-align:center; font-size:13px; font-weight:650; color:var(--ink);
}
.lupa-cerrar{
  position:fixed; top:14px; right:16px; z-index:121;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:24px; line-height:1;
}
.lupa-cerrar:hover{background:#fff}

@media (max-width:760px){
  .lupa{padding:10px}
  .lupa-marco{max-width:100%; padding:8px}
  .lupa-marco img{max-height:70vh}
  .ver-foto{width:34px; height:34px; font-size:15px}
}

/* ------------------------------------------- ajustes para iPhone */
@media (max-width:760px){
  /* Safari amplia la pagina al tocar un campo de menos de 16px y la deja
     asi: por eso "queda mas grande". Con 16px no hace zoom. */
  input, select, textarea{font-size:16px}

  /* el contenido respeta la muesca y la barra inferior */
  main{
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
    padding-bottom:max(70px, env(safe-area-inset-bottom));
  }
  aside{
    padding-left:env(safe-area-inset-left);
    padding-bottom:env(safe-area-inset-bottom);
  }
  #acceso{
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }

  /* sin destello azul al tocar y con desplazamiento suave */
  .btn, .navi, .card-prod, .mini, .ver-foto{-webkit-tap-highlight-color:transparent}
  .tabla-caja{-webkit-overflow-scrolling:touch}
}

/* ------------------------------ tablas apiladas en pantalla chica */
/* En el telefono una tabla ancha obliga a desplazar de lado y los numeros
   quedan fuera de vista. Cada fila pasa a ser una tarjeta y cada dato
   lleva delante el nombre de su columna. */
@media (max-width:760px){
  .apilable, .apilable tbody{display:block}
  .apilable thead{display:none}

  /* la foto queda a la izquierda y el nombre al lado, como titulo de la
     tarjeta; el resto de los datos va debajo, uno por linea */
  .apilable tbody tr{
    display:grid; grid-template-columns:auto 1fr; gap:2px 11px;
    padding:11px 13px; border-bottom:1px solid var(--line);
  }
  .apilable tbody td{grid-column:1 / -1}
  .apilable tbody td[data-rotulo=""]:first-child{grid-column:1; grid-row:1; align-self:center}
  .apilable tbody td[data-principal]{
    grid-column:2; grid-row:1; display:block; text-align:left;
    font-weight:650; font-size:14.5px; line-height:1.3; padding:0 0 4px;
  }
  .apilable tbody td[data-principal]::before{content:none}
  .apilable tbody tr:last-child{border-bottom:0}
  .apilable tbody tr.sep{padding:8px 13px}

  .apilable td{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    border:0; padding:3px 0; white-space:normal; text-align:right;
  }
  .apilable td::before{
    content:attr(data-rotulo);
    flex:0 0 42%; text-align:left; color:var(--muted);
    font-size:12px; font-weight:600; line-height:1.3;
  }
  /* la celda sin rotulo (la foto, los botones) va sola y a la izquierda */
  .apilable td[data-rotulo=""]::before,
  .apilable td:not([data-rotulo])::before{content:none}
  /* si la fila no trae foto, el titulo ocupa todo el ancho */
  .apilable tbody tr:not(:has(td[data-rotulo=""]:first-child)) td[data-principal]{grid-column:1 / -1}
  .apilable td[data-rotulo=""],
  .apilable td:not([data-rotulo]){justify-content:flex-start; text-align:left}

  .apilable td.num{font-variant-numeric:tabular-nums}
  .apilable input{max-width:110px}
  .apilable .mini{width:44px; height:44px}
}

/* linea que aclara para que sirve cada pantalla */
.pista{
  background:var(--marca-suave); border:1px solid var(--marca-linea);
  border-radius:12px; padding:10px 13px; margin:0 0 12px; color:var(--ink2);
}
.pista a{font-weight:700}

/* ---------------------------------------------------- cotizacion */
#panel-cotiza{border-color:var(--marca-linea)}
#panel-cotiza > h2{background:var(--marca-suave); color:var(--marca)}
#t-cotiza th,#t-cotiza td,#t-mis-prod th,#t-mis-prod td{padding:8px 9px; vertical-align:middle}
#t-cotiza th:first-child,#t-cotiza td:first-child,
#t-mis-prod th:first-child,#t-mis-prod td:first-child{width:42px}
#t-cotiza td:nth-child(2),#t-mis-prod td:nth-child(2){white-space:normal; min-width:180px}
/* una linea por debajo del costo se marca: se esta vendiendo a perdida */
#t-cotiza tr.bajo-costo{background:var(--rojo-suave)}
#t-cotiza tr.bajo-costo [data-margen]{color:var(--rojo); font-weight:700}
/* sin precio no es perdida: es un dato que falta */
#t-cotiza tr.sin-precio [data-margen]{color:var(--muted); font-style:italic}
#t-cotiza tr.sin-precio input.co-precio{border-color:var(--a3); background:#fffdf5}
.aviso-lectura.rojo{border-color:var(--rojo); background:var(--rojo-suave); color:var(--rojo)}

/* ------------------------------------------- el stock a la vista
   La cifra manda; debajo va el minimo o el aviso. Cero se marca en
   rojo y bajo el minimo en ambar, para verlo sin leer. */
.stock-cif{font-weight:700; font-variant-numeric:tabular-nums}
.stock-cif.stock-cero{color:var(--rojo)}
.stock-cif.stock-bajo{color:#9a6b12}
.sub-prod.falta{color:var(--rojo); font-weight:600}
#t-catalogo td:nth-child(3), #t-pedido td:nth-child(3),
#t-mis-prod td:nth-child(3){min-width:74px}