/* =========================================================================
   PORKY SELECT - Sistema de diseno movil-first
   ========================================================================= */
:root {
  --rojo: #B10F2E;
  --rojo-osc: #6D071A;
  --rojo-claro: #FFF1F4;
  --rosa: #E85D78;
  --vino: #3A0610;
  --oro: #C9972B;
  --oro-claro: #FFF7E5;
  --crema: #FFF9F4;
  --marfil: #FFFCFA;

  --tinta: #1D1117;
  --tinta-2: #493C43;
  --tinta-3: #786E75;
  --tinta-4: #AEA5AB;

  --fondo: #F8F2F4;
  --superficie: #FFFFFF;
  --superficie-2: #FFF8FA;
  --superficie-3: rgba(255,255,255,.82);
  --borde: #EADFE3;
  --borde-fuerte: #D8C6CC;

  --ok: #12855A;
  --ok-bg: #E6F6EF;
  --alerta: #B26A00;
  --alerta-bg: #FFF4E2;
  --peligro: #C42130;
  --peligro-bg: #FDECEE;
  --info: #1D4E89;
  --info-bg: #E8F0FA;

  --r-sm: 11px;
  --r: 15px;
  --r-lg: 20px;
  --r-xl: 30px;

  --sombra-1: 0 1px 2px rgba(52,13,24,.04), 0 10px 26px rgba(52,13,24,.06);
  --sombra-2: 0 16px 46px rgba(52,13,24,.12), 0 3px 10px rgba(52,13,24,.07);
  --sombra-3: 0 28px 78px rgba(62,8,22,.24);
  --sombra-inset: inset 0 1px 0 rgba(255,255,255,.82);
  --brillo: inset 0 1px 0 rgba(255,255,255,.75);

  --nav-alto: 62px;
  --top-alto: 56px;
  --sidebar: 248px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  background:
    radial-gradient(circle at top left, rgba(179,18,43,.12), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(215,166,66,.12), transparent 26rem),
    linear-gradient(180deg, #FFFDFD 0%, var(--fondo) 44%, #F3EEF0 100%);
  overscroll-behavior-y: none;
}

a { color: var(--rojo); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--rojo-osc); }
img { max-width: 100%; }

h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }

/* ---------- Layout ------------------------------------------------------ */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: calc(var(--top-alto) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex; align-items: center; gap: .6rem;
  padding-inline: 1rem;
  background:
    linear-gradient(135deg, rgba(59,7,16,.98), rgba(141,13,34,.98) 54%, rgba(179,18,43,.98)),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.2), transparent 20rem);
  color: #fff;
  box-shadow: 0 12px 30px rgba(80,6,21,.22);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .marca { display: flex; align-items: center; gap: .5rem; font-weight: 800;
  letter-spacing: .06em; font-size: .95rem; }
.topbar-acciones { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.topbar a, .topbar button { color: #fff; }

.icono-top {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.14); border-radius: 50%;
  color: #fff; cursor: pointer; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.icono-top:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.icono-top:active { background: rgba(255,255,255,.28); }

.contenido {
  flex: 1;
  padding: .9rem .8rem calc(var(--nav-alto) + var(--safe-b) + 1.2rem);
  max-width: 1360px; width: 100%; margin: 0 auto;
}

.sidebar { display: none; }

/* Navegacion inferior (movil) */
.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  height: calc(var(--nav-alto) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -12px 34px rgba(62,8,22,.1);
}
.navbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--tinta-3); font-size: .66rem; font-weight: 600;
  padding-top: 4px; position: relative;
}
.navbar a svg { width: 22px; height: 22px; }
.navbar a.activo { color: var(--rojo); }
.navbar a.activo::before {
  content: ""; position: absolute; top: 0; width: 26px; height: 3px;
  background: linear-gradient(90deg, var(--rojo), var(--oro)); border-radius: 0 0 3px 3px;
}
.navbar .punto {
  position: absolute; top: 6px; right: 50%; transform: translateX(16px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--peligro); color: #fff; font-size: .6rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------- Tarjetas ---------------------------------------------------- */
.tarjeta {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1), var(--brillo);
  overflow: visible;
}
.tarjeta + .tarjeta { margin-top: .85rem; }
.tarjeta-cuerpo { padding: .85rem .9rem; }
.tarjeta-titulo {
  display: flex; align-items: center; gap: .5rem;
  padding: .72rem .95rem;
  border-bottom: 1px solid rgba(107, 69, 8, .28);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .01em;
  color: #2E1E04;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.28), transparent 14rem),
    linear-gradient(135deg, #B07816 0%, #D4A017 42%, #E8C04A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(90, 55, 0, .12);
}
.tarjeta-titulo svg {
  flex: none;
  color: #3F2A06;
  opacity: .95;
}
.tarjeta-titulo .cont {
  margin-left: auto;
  font-weight: 700;
  font-size: .74rem;
  color: #3F2A06;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(90, 55, 0, .18);
  padding: .18rem .55rem;
  border-radius: 999px;
  letter-spacing: .02em;
}
.tarjeta-titulo.mal {
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.12), transparent 16rem),
    linear-gradient(135deg, #5a1018, #9b1628 55%, #c41e34);
  border-bottom-color: rgba(90, 16, 24, .35);
}
.tarjeta-titulo.mal svg { color: #fff; }
.tarjeta-titulo.mal .cont {
  color: #fff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.2);
}

/* Secciones del formulario de documento */
.tarjeta-seccion {
  border-left: 4px solid #C9972B;
  box-shadow: var(--sombra-1), var(--brillo);
}
.tarjeta-seccion .tarjeta-titulo {
  color: #2E1E04;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.28), transparent 14rem),
    linear-gradient(135deg, #B07816 0%, #D4A017 42%, #E8C04A 100%);
  border-bottom-color: rgba(107, 69, 8, .28);
}
.tarjeta-seccion-datos,
.tarjeta-seccion-lista,
.tarjeta-seccion-totales,
.tarjeta-seccion-adjuntos,
.tarjeta-seccion-notas,
.tarjeta-seccion-agregar {
  background: linear-gradient(180deg, #fff, rgba(255, 252, 245, .96));
}
.tarjeta-seccion-generar {
  background: linear-gradient(180deg, #fff, rgba(236, 250, 243, .96));
  border-left-color: #148A56;
}
.tarjeta-seccion-generar .tarjeta-titulo {
  color: #F3FFF8;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.2), transparent 14rem),
    linear-gradient(135deg, #0B5C3C 0%, #148A56 48%, #1EAD6C 100%);
  border-bottom-color: rgba(8, 50, 32, .35);
}
.tarjeta-seccion-generar .tarjeta-titulo svg { color: #E8FFF2; }
.tarjeta-seccion-generar .barra-botones {
  display: grid; gap: .55rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tarjeta-seccion-generar .barra-botones { grid-template-columns: 1fr 1fr; }
}
.btn-generar-pieza {
  justify-content: center;
  border: 0;
  font-weight: 800;
}
#panel-generar-pieza .panel-modos-pieza {
  display: grid;
  gap: .55rem;
  grid-template-columns: 1fr;
  padding-bottom: .35rem;
}
#panel-generar-pieza .panel-modos-pieza .btn {
  width: 100%;
}
.tarjeta-seccion-piezas {
  border-left-color: #A67A12;
  background: linear-gradient(180deg, #fff, rgba(255, 249, 232, .96));
}
.tarjeta-seccion-piezas .tarjeta-titulo {
  color: #2E1E04;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.32), transparent 14rem),
    linear-gradient(135deg, #9A6A10 0%, #C9972B 45%, #E8C04A 100%);
  border-bottom-color: rgba(107, 69, 8, .3);
}
.tarjeta-seccion-piezas .tarjeta-titulo svg { color: #3F2A06; }
.tarjeta-seccion-lista .tarjeta-titulo {
  color: #5A4210;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.42), transparent 14rem),
    linear-gradient(135deg, #C9A84A 0%, #DCC06A 48%, #EBD898 100%);
  border-bottom-color: rgba(154, 106, 18, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(90, 55, 0, .06);
}
.tarjeta-seccion-lista .tarjeta-titulo svg { color: #7A5A14; opacity: .88; }
.tarjeta-seccion-lista .tarjeta-titulo .cont {
  color: #5A4210;
  background: rgba(255,255,255,.38);
  border-color: rgba(90, 55, 0, .12);
}
.tarjeta-seccion-original {
  border-left-color: #7A5A14;
  background: linear-gradient(180deg, #fff, rgba(255, 249, 232, .96));
}
.tarjeta-seccion-original .tarjeta-titulo {
  color: #2E1E04;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.32), transparent 14rem),
    linear-gradient(135deg, #8A6A20 0%, #C9A84A 48%, #E8D090 100%);
}
.tarjeta-seccion-agregar {
  overflow: visible;
  position: relative;
  /* Por encima de la lista: el combo de costo (z-index 6) no debe tapar
     los resultados del buscador de productos. */
  z-index: 20;
}
.tarjeta-seccion-agregar .tarjeta-cuerpo {
  overflow: visible;
}
.tarjeta-seccion-lista {
  position: relative;
  z-index: 1;
}

.item-campo.col-tipo-peso {
  min-width: 0;
}
.item-campo.col-tipo-peso select.campo,
.item-campo.col-tipo-peso select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
  text-align-last: center;
  padding: 0 1.35rem 0 .4rem;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .32rem center;
  background-size: 12px;
}

.seccion { margin-bottom: 1rem; }
.seccion-titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3); font-weight: 700; margin: 1.1rem .2rem .5rem;
}
.seccion-titulo .linea { flex: 1; height: 1px; background: var(--borde); }

/* ---------- KPI --------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.kpi {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.82)),
    radial-gradient(circle at 100% 0, rgba(179,18,43,.09), transparent 52%);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: .85rem .9rem; box-shadow: var(--sombra-1), var(--brillo);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi:hover { transform: translateY(-2px); border-color: rgba(179,18,43,.22); box-shadow: var(--sombra-2); }
.kpi::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--rojo), var(--oro));
}
.kpi.ok::after { background: var(--ok); }
.kpi.alerta::after { background: var(--alerta); }
.kpi.peligro::after { background: var(--peligro); }
.kpi.info::after { background: var(--info); }
.kpi .etiqueta { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 700; }
.kpi .valor { font-size: 1.28rem; font-weight: 850; letter-spacing: -.035em; margin-top: .15rem;
  font-variant-numeric: tabular-nums; }
.kpi .valor:has(.unidad) {
  display: flex; align-items: baseline; flex-wrap: nowrap; gap: .22em;
}
.kpi .unidad {
  font-size: .55em; font-weight: 700; letter-spacing: .02em;
  color: var(--tinta-3);
}
.kpi .nota { font-size: .72rem; color: var(--tinta-3); margin-top: .12rem; }
.kpi .nota.mal { color: var(--peligro); font-weight: 600; }

/* ---------- Lista tipo tarjeta (movil) ---------------------------------- */
.lista { display: flex; flex-direction: column; gap: .45rem; }
.fila {
  display: block; background: rgba(255,255,255,.94); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: .68rem .78rem; box-shadow: var(--sombra-1), var(--brillo);
  color: inherit; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fila:hover { transform: translateY(-1px); border-color: rgba(179,18,43,.18); box-shadow: var(--sombra-2); }
.fila-comprometida { border-color: rgba(201,151,43,.45); background: rgba(201,151,43,.06); }
.fila:active { background: var(--superficie-2); }
.fila-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.fila-codigo { font-family: var(--mono); font-size: .75rem; font-weight: 700; color: var(--rojo); }
.fila-fecha { margin-left: auto; font-size: .72rem; color: var(--tinta-3); }
.fila-titulo { font-weight: 750; font-size: .95rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-sub { font-size: .76rem; color: var(--tinta-3); margin-top: .12rem;
  display: flex; flex-wrap: wrap; gap: .2rem .55rem; }
.fila-pie { display: flex; align-items: center; gap: .5rem; margin-top: .42rem;
  padding-top: .42rem; border-top: 1px dashed var(--borde); }
.fila-monto { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.fila-monto.mal { color: var(--peligro); }

/* Acciones rapidas dentro de la fila */
.acciones-fila {
  display: flex; gap: .24rem; flex-wrap: wrap; margin-top: .5rem;
  padding: .24rem; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.acciones-fila .btn { padding: .3rem .56rem; font-size: .72rem; min-height: 31px; border-radius: 999px; box-shadow: none; }
.acciones-fila .form-eliminar,
.acciones-tabla .form-eliminar {
  display: inline-flex;
  margin: 0;
  flex: none;
}
.acciones-fila .btn-eliminar,
.acciones-tabla .btn-eliminar,
.acciones-fila .btn.mal,
.acciones-tabla .btn.mal {
  color: #A60E25;
  background: #FFE7EC;
  border-color: #F4C3CD;
}
.acciones-fila .btn-eliminar:hover,
.acciones-tabla .btn-eliminar:hover,
.acciones-fila .btn.mal:hover,
.acciones-tabla .btn.mal:hover {
  background: linear-gradient(135deg, #8E0B1F, #D92342);
  color: #fff;
  border-color: #8E0B1F;
}

.lista-grid-compacta {
  max-width: 1180px;
  margin-inline: auto;
}

/* ---------- Tabla (escritorio) ------------------------------------------ */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
table.tabla th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 800; padding: .68rem .72rem;
  border-bottom: 1px solid var(--borde); background: linear-gradient(180deg, #fff, var(--superficie-2));
  white-space: nowrap; position: sticky; top: 0;
}
table.tabla td { padding: .7rem .72rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla tbody tr { transition: background .16s ease; }
table.tabla tbody tr:hover { background: linear-gradient(90deg, rgba(179,18,43,.045), rgba(215,166,66,.04)); }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla .cen { text-align: center; }
table.tabla tfoot td { font-weight: 800; background: var(--superficie-2); border-top: 2px solid var(--borde-fuerte); }
.solo-escritorio { display: none; }

.listado-compacto {
  max-width: 1180px;
  margin-inline: auto;
}
.listado-compacto .tabla-envoltura {
  border-radius: inherit;
}
table.tabla-compacta {
  font-size: .8rem;
}
table.tabla-compacta th {
  padding: .48rem .56rem;
}
table.tabla-compacta td {
  padding: .5rem .56rem;
  line-height: 1.28;
}
table.tabla-compacta td:first-child {
  width: 7.5rem;
}
table.tabla-compacta td:last-child,
table.tabla-compacta th:last-child {
  white-space: normal;
  min-width: 9.5rem;
}
table.tabla-compacta td a b {
  display: inline-block;
  max-width: 15rem;
  vertical-align: bottom;
}
.acciones-tabla {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  padding: .18rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--sombra-1), var(--brillo);
  max-width: 19.5rem;
}
.acciones-tabla form {
  display: inline-flex;
  margin: 0;
}
.acciones-tabla .btn-icono {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.acciones-tabla .btn-icono svg { width: 14px; height: 14px; }
.acciones-tabla .btn-icono:hover {
  background: var(--rojo-claro);
  color: var(--rojo-osc);
  box-shadow: none;
  transform: translateY(-1px);
}
.acciones-tabla .btn-icono.btn-wa:hover {
  background: #E9FBF1;
  color: #128C4A;
}
/* Cuantos pedidos arman la orden, junto al icono de la accion. */
.acciones-tabla .btn .cuenta-mini {
  font-size: .68rem;
  font-weight: 800;
  margin-left: .12rem;
  font-variant-numeric: tabular-nums;
}
.acciones-tabla .btn:not(.btn-icono) {
  min-height: 30px;
  padding: 0 .55rem;
  border-radius: 999px;
  box-shadow: none;
}

/* ---------- Botones ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .38rem;
  padding: .58rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--tinta); font-size: .84rem; font-weight: 650;
  cursor: pointer; font-family: inherit; text-align: center; min-height: 40px;
  box-shadow: var(--sombra-1), var(--brillo);
  transition: transform .16s ease, background .15s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(179,18,43,.26); box-shadow: var(--sombra-2); }
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primario { background: linear-gradient(135deg, var(--rojo-osc), var(--rojo)); border-color: rgba(179,18,43,.9); color: #fff; }
.btn-primario:active { background: var(--rojo-osc); }
.btn-oscuro { background: linear-gradient(135deg, var(--vino), var(--tinta)); border-color: var(--tinta); color: #fff; }
.btn-piezas {
  background: linear-gradient(135deg, var(--rojo-osc), var(--rojo) 70%, #C41E3A);
  border-color: rgba(109, 7, 26, .75);
  color: #fff;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(109, 7, 26, .22), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-piezas:hover {
  border-color: rgba(109, 7, 26, .9);
  box-shadow: 0 10px 22px rgba(109, 7, 26, .28), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-piezas:active {
  background: linear-gradient(135deg, var(--vino), var(--rojo-osc));
  color: #fff;
}
.btn-piezas svg { color: #fff; opacity: .95; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-suave { background: var(--rojo-claro); border-color: transparent; color: var(--rojo-osc); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn.btn-generar-imagen {
  background: #A8E8EE;
  border-color: #7ED6DF;
  color: #0A3D48;
}
.btn.btn-generar-imagen:hover { background: #C5F2F6; color: #0A3D48; border-color: #8FDEE6; }
.btn.btn-generar-manual {
  background: #B7F0CF;
  border-color: #82E0AA;
  color: #0B3D24;
}
.btn.btn-generar-manual:hover { background: #D2F7E2; color: #0B3D24; border-color: #9AEEC0; }
.btn.btn-generar-pieza[aria-expanded="true"] {
  box-shadow: inset 0 0 0 2px rgba(8, 50, 32, .35);
}
.btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn-bloque { width: 100%; }
.btn-chico { padding: .38rem .62rem; min-height: 32px; font-size: .76rem; }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-icono {
  width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: var(--r-sm);
  display: inline-grid; place-items: center;
}

.btn-reporte {
  min-height: 40px;
  padding: .58rem .92rem;
  border-radius: 999px;
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.24), transparent 5rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 48%, var(--rojo));
  box-shadow: 0 14px 28px rgba(177,15,46,.24), inset 0 1px 0 rgba(255,255,255,.22);
  font-size: .8rem;
  font-weight: 900;
}
.btn-reporte:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 18px 36px rgba(177,15,46,.3), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-reporte svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}

.barra-botones { display: flex; gap: .45rem; flex-wrap: wrap; }
.barra-botones .btn { flex: 1 1 auto; }

.fab {
  position: fixed; right: 14px; z-index: 65;
  bottom: calc(var(--nav-alto) + var(--safe-b) + 14px);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rojo-osc), var(--rojo) 70%, #D52E46); color: #fff; border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; box-shadow: var(--sombra-3); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab:hover { transform: translateY(-2px) scale(1.02); }
.fab svg { width: 26px; height: 26px; }
.fab:active { background: var(--rojo-osc); }

/* Barra de acciones fija abajo (formularios) */
.barra-fija {
  position: fixed; left: 0; right: 0; z-index: 68;
  bottom: 0; padding: .6rem .8rem calc(.6rem + var(--safe-b));
  background: var(--superficie); border-top: 1px solid var(--borde);
  display: flex; gap: .5rem; box-shadow: 0 -2px 12px rgba(16,16,26,.08);
}
.barra-fija .btn { flex: 1; }
body.con-barra-fija .contenido { padding-bottom: 110px; }
body.con-barra-fija .navbar { display: none; }

/* ---------- Insignias --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .56rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .015em; white-space: nowrap;
  background: #EFEFF3; color: var(--tinta-2);
  border: 1px solid rgba(255,255,255,.52);
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-alerta { background: var(--alerta-bg); color: var(--alerta); }
.badge-peligro { background: var(--peligro-bg); color: var(--peligro); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutro { background: #EFEFF3; color: var(--tinta-2); }
.badge-punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pastilla {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--borde); font-size: .72rem; color: var(--tinta-2);
}

/* ---------- Formularios ------------------------------------------------- */
.campo, .select, .textarea {
  width: 100%; padding: .68rem .78rem; font-size: 16px; /* 16px evita zoom en iOS */
  font-family: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm); min-height: 44px;
  appearance: none; -webkit-appearance: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.campo:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(179,18,43,.12), var(--sombra-1);
}
select.campo, .select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px;
  padding-right: 2rem;
}
textarea.campo { min-height: 76px; resize: vertical; }
.campo-archivo {
  width: 100%; padding: .55rem; font-size: .82rem; background: var(--superficie-2);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r-sm);
}
.zona-elegir {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 5.6rem;
  padding: .85rem 1rem;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--r);
  background: var(--superficie);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.zona-elegir:hover,
.zona-elegir:focus-within {
  border-color: rgba(177,15,46,.45);
  background: var(--rojo-claro);
}
.zona-elegir.con-archivos {
  justify-content: flex-start;
  min-height: 0;
  border-style: solid;
  border-color: rgba(177,15,46,.28);
  background: var(--rojo-claro);
}
.zona-elegir.arrastrando {
  border-style: solid;
  border-color: var(--rojo);
  background: var(--rojo-claro);
  box-shadow: 0 0 0 3px rgba(177,15,46,.14);
}
.zona-elegir-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.zona-elegir-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  text-align: center;
}
.zona-elegir.con-archivos .zona-elegir-cuerpo {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: .7rem;
}
.zona-elegir-icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFF7F9, var(--rojo-claro));
  border: 1px solid rgba(177,15,46,.14);
  color: var(--rojo-osc);
  box-shadow: var(--sombra-inset);
}
.zona-elegir-icono svg { width: 20px; height: 20px; }
.zona-elegir.con-archivos .zona-elegir-icono {
  background: var(--ok-bg);
  border-color: rgba(18,133,90,.22);
  color: var(--ok);
}
.zona-elegir-textos {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.zona-elegir-titulo {
  font-size: .9rem;
  font-weight: 750;
  color: var(--rojo-osc);
}
.zona-elegir-detalle {
  font-size: .74rem;
  color: var(--tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.zona-elegir-quitar {
  flex: none;
  color: var(--tinta-3);
}
.campo[readonly] { background: var(--superficie-2); color: var(--tinta-3); }

/* Fecha: icono visible y area de clic mas comoda */
input[type="date"].campo,
input.campo[type="date"] {
  min-height: 48px;
  padding-right: .55rem;
  color-scheme: light;
  font-variant-numeric: tabular-nums;
}
input[type="date"].campo::-webkit-datetime-edit {
  padding: .05rem 0;
}
input[type="date"].campo::-webkit-datetime-edit-fields-wrapper {
  padding: 0 .15rem;
}
input[type="date"].campo::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: .35rem;
  padding: .18rem;
  border-radius: 9px;
  background-color: var(--oro-claro);
  border: 1px solid rgba(201,151,43,.28);
  transition: background-color .15s ease, transform .12s ease;
}
input[type="date"].campo::-webkit-calendar-picker-indicator:hover {
  background-color: #FFE8A8;
  transform: scale(1.04);
}
input[type="date"].campo:disabled::-webkit-calendar-picker-indicator {
  cursor: not-allowed;
  opacity: .4;
  pointer-events: none;
  background-color: var(--superficie-2);
}
input[type="date"].campo:focus::-webkit-calendar-picker-indicator {
  background-color: #FFD978;
  border-color: rgba(201,151,43,.45);
}

.grupo { margin-bottom: .75rem; }
.grupo > label, .etiqueta {
  display: block; font-size: .74rem; font-weight: 700; color: var(--tinta-2);
  margin-bottom: .3rem; letter-spacing: .01em;
}
.grupo .ayuda { font-size: .72rem; color: var(--tinta-3); margin-top: .25rem; }
.grupo .error { font-size: .74rem; color: var(--peligro); margin-top: .25rem; font-weight: 600; }
.grupo.malo .campo, .grupo.malo .select { border-color: var(--peligro); }

.rejilla { display: grid; gap: .7rem; }
.rejilla-2 { grid-template-columns: 1fr 1fr; }
.rejilla-3 { grid-template-columns: 1fr; }

.check { width: 20px; height: 20px; accent-color: var(--rojo); }

.interruptor {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-sm);
  cursor: pointer; min-height: 46px;
}
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .pista {
  width: 44px; height: 25px; border-radius: 999px; background: var(--borde-fuerte);
  position: relative; flex: none; transition: background .18s ease;
}
.interruptor .pista::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform .18s ease;
}
.interruptor input:checked + .pista { background: var(--ok); }
.interruptor input:checked + .pista::after { transform: translateX(19px); }
.interruptor .texto { font-size: .84rem; font-weight: 650; }
.interruptor .texto small { display: block; font-weight: 500; color: var(--tinta-3); font-size: .72rem; }

/* Selector de segmentos */
.segmentos { display: flex; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.segmentos label { flex: 1; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos span {
  display: block; text-align: center; padding: .45rem .3rem; border-radius: 6px;
  font-size: .8rem; font-weight: 650; color: var(--tinta-3); cursor: pointer;
}
.segmentos input:checked + span { background: var(--superficie); color: var(--rojo); box-shadow: var(--sombra-1); }

/* ---------- Buscador y filtros ------------------------------------------ */
.buscador { position: relative; margin-bottom: .6rem; }
.buscador .campo {
  padding-left: 2.45rem; padding-right: 5.2rem;
  min-height: 50px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.92);
  box-shadow: var(--sombra-1), var(--brillo);
}
.buscador .lupa {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none;
}
.buscador .acciones-busq {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px;
}
.buscador .acciones-busq .btn { min-height: 34px; padding: .3rem .55rem; }

.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .55rem;
  scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: .4rem .76rem; border-radius: 999px; font-size: .78rem; font-weight: 750;
  background: rgba(255,255,255,.88); border: 1px solid var(--borde-fuerte); color: var(--tinta-2);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--sombra-1), var(--brillo);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.chip:hover { transform: translateY(-1px); border-color: rgba(179,18,43,.24); box-shadow: var(--sombra-2); }
.chip.on { background: linear-gradient(135deg, var(--rojo-osc), var(--rojo)); border-color: rgba(179,18,43,.9); color: #fff; }
.chip .x { margin-left: .25rem; opacity: .8; }

.resumen-lista {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .9rem; color: var(--tinta-3); margin-bottom: .65rem;
}
.resumen-lista b { color: var(--tinta); font-weight: 800; }
.resumen-lista .resumen-total {
  font-size: 1.28rem;
  font-weight: 900;
  color: var(--rojo-osc);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.resumen-lista.resumen-lista-cifras {
  gap: .85rem 1.25rem;
  margin-bottom: .85rem;
  padding: .55rem .75rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  flex-wrap: wrap;
  overflow: visible;
}
.resumen-lista-cifras .resumen-cifra {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  color: var(--tinta-3);
  white-space: nowrap;
  flex: 0 0 auto;
}
.resumen-lista-cifras .resumen-cifra b {
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.resumen-lista-cifras .resumen-etq {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.resumen-lista-cifras .resumen-cifra-total {
  margin-right: .15rem;
  padding-right: 1rem;
  border-right: 1px solid var(--borde);
}
.resumen-lista-cifras .resumen-cifra-total .resumen-total {
  font-size: 1.55rem;
}
.resumen-lista-cifras .resumen-cifra-cantidad {
  margin-left: .15rem;
  padding-left: 1rem;
  border-left: 1px solid var(--borde);
}
.resumen-lista-cifras .resumen-cifra-cantidad b {
  color: var(--tinta);
}

/* Panel deslizante de filtros */
.velo {
  position: fixed; inset: 0; background: rgba(16,16,26,.45); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.velo.abierto { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  max-height: 88vh; overflow-y: auto;
  background: rgba(255,255,255,.96); border-radius: var(--r-xl) var(--r-xl) 0 0;
  backdrop-filter: blur(20px);
  transform: translateY(101%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  padding: 0 .9rem calc(1rem + var(--safe-b));
  box-shadow: var(--sombra-3);
}
.panel.abierto { transform: translateY(0); }
.panel-asa { width: 40px; height: 4px; border-radius: 2px; background: var(--borde-fuerte);
  margin: .55rem auto .3rem; }
.panel-cabecera {
  position: sticky; top: 0; background: var(--superficie); z-index: 2;
  display: flex; align-items: center; gap: .5rem; padding: .35rem 0 .7rem;
  border-bottom: 1px solid var(--borde); margin-bottom: .8rem;
}
.panel-cabecera h2 { margin: 0; font-size: 1rem; }
.panel-cabecera .cerrar { margin-left: auto; }
.panel-pie { position: sticky; bottom: 0; background: var(--superficie); padding: .7rem 0 .2rem;
  border-top: 1px solid var(--borde); display: flex; gap: .5rem; }
.panel-pie .btn { flex: 1; }

/* ---------- Mensajes ---------------------------------------------------- */
.mensajes { position: fixed; top: calc(var(--top-alto) + var(--safe-t) + 8px); left: 8px; right: 8px;
  z-index: 100; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
/* Fondo claro y no un bloque de color solido: el aviso rojo entero tapaba
   la pantalla y se leia como una alarma. El color queda en la barra
   lateral y en el icono, y el texto se lee sobre fondo tenue. */
.mensaje {
  display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .8rem;
  border-radius: var(--r); font-size: .84rem;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--tinta-3);
  box-shadow: var(--sombra-3); pointer-events: auto;
  animation: entra .22s ease; font-weight: 600;
}
/* El icono nombra el tipo de aviso sin depender solo del color */
.mensaje::before { font-weight: 700; line-height: 1.35; flex: none; }
.mensaje.success { background: var(--ok-bg); color: #0B5C3E;
  border-color: #BFE6D5; border-left-color: var(--ok); }
.mensaje.success::before { content: "\2713"; }
.mensaje.error { background: var(--peligro-bg); color: #8C1622;
  border-color: #F5C4C9; border-left-color: var(--peligro); }
.mensaje.error::before { content: "\26A0"; }
.mensaje.warning { background: var(--alerta-bg); color: #7A4A00;
  border-color: #F2DCB4; border-left-color: var(--alerta); }
.mensaje.warning::before { content: "\26A0"; }
.mensaje.info { background: var(--info-bg); color: #163C6B;
  border-color: #C6DAF2; border-left-color: var(--info); }
.mensaje.info::before { content: "\2139"; }
.mensaje .x { margin-left: auto; background: none; border: 0; color: inherit; opacity: .55;
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.mensaje .x:hover { opacity: 1; }
@keyframes entra { from { opacity: 0; transform: translateY(-10px); } }

.aviso {
  display: flex; gap: .55rem; padding: .7rem .8rem; border-radius: var(--r);
  font-size: .82rem; border: 1px solid; margin-bottom: .7rem;
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso-info { background: var(--info-bg); border-color: #C6DAF2; color: #163C6B; }
.aviso-alerta { background: var(--alerta-bg); border-color: #F3DCB4; color: #7A4700; }
.aviso-peligro { background: var(--peligro-bg); border-color: #F5C4C9; color: #8C1622; }
.aviso-ok { background: var(--ok-bg); border-color: #BFE6D5; color: #0B5C3E; }

/* Compra corta al recibir. Es la razon de abrir el panel, asi que se lee
   antes que la explicacion y con el peso de un aviso, no como nota al pie:
   en rojo chico debajo del parrafo gris nadie la veia. */
.aviso-recibir { align-items: flex-start; margin-bottom: .8rem; }
.aviso-recibir strong { display: block; font-size: .95rem; line-height: 1.25; }
.aviso-recibir span { display: block; margin-top: .12rem; opacity: .92; }

/* ---------- Estados vacios ---------------------------------------------- */
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-3); }
.vacio svg { width: 52px; height: 52px; opacity: .3; margin-bottom: .6rem; }
.vacio h3 { color: var(--tinta-2); }
.vacio p { font-size: .85rem; margin: .2rem 0 1rem; }

/* ---------- Paginacion --------------------------------------------------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: 1rem; flex-wrap: wrap; }
.paginacion .btn { min-width: 40px; }
.paginacion .actual { padding: .5rem .8rem; font-size: .82rem; color: var(--tinta-3); font-weight: 600; }

/* ---------- Detalle ------------------------------------------------------ */
.encabezado-doc {
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.2), transparent 18rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 46%, var(--rojo));
  color: #fff; border-radius: var(--r-lg); padding: 1rem .95rem; margin-bottom: .8rem;
  box-shadow: var(--sombra-2);
  border: 1px solid rgba(255,255,255,.15);
}
.encabezado-doc .codigo { font-family: var(--mono); font-size: .8rem; opacity: .85; letter-spacing: .04em; }
.encabezado-doc .nombre { font-size: 1.24rem; font-weight: 800; margin: .1rem 0 .35rem; }
.encabezado-doc .monto { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.encabezado-cifras {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.15rem;
}
.encabezado-dato {
  display: inline-flex; align-items: baseline; gap: .35rem;
  opacity: .95;
}
.encabezado-dato b {
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.encabezado-dato span {
  font-size: .78rem; font-weight: 700; opacity: .82;
}
.encabezado-doc .meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.encabezado-doc .meta .pastilla { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); color: #fff; }
.encabezado-doc .badge { background: rgba(255,255,255,.9); color: var(--rojo-osc); }

.datos { display: grid; grid-template-columns: 1fr; }
.dato { display: flex; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--borde); }
.dato:last-child { border-bottom: 0; }
.dato .k { font-size: .8rem; color: var(--tinta-3); flex: none; width: 42%; }
.dato .v { font-size: .86rem; font-weight: 650; flex: 1; word-break: break-word; }
.dato .v.num { font-variant-numeric: tabular-nums; }
.dato.dato-clave {
  background: #FFE8A8;
  box-shadow: inset 4px 0 0 var(--oro);
  border-bottom-color: rgba(201,151,43,.28);
}
.dato.dato-clave .k { color: #8A5200; font-weight: 750; }
.dato.dato-clave .v { color: var(--tinta); font-weight: 800; }

.franja-cliente {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  padding: .7rem .95rem;
  background: #FFE8A8;
  border: 1px solid rgba(201,151,43,.45);
  box-shadow: inset 4px 0 0 var(--oro);
  border-radius: 8px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.franja-cliente .k {
  color: #8A5200;
  font-weight: 750;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.franja-cliente .v {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--tinta);
}
.franja-cliente .extra {
  color: var(--tinta-3);
  font-size: .85rem;
}
.franja-cliente.franja-en-tarjeta {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

/* Filtros compactos dentro de tarjetas (detalle de producto, etc.) */
.filtros-tarjeta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem .5rem;
  padding: .55rem .75rem .6rem;
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--superficie-2), rgba(255,255,255,.55));
}
.filtros-tarjeta .grupo { margin: 0; min-width: 0; }
.filtros-tarjeta .etiqueta {
  display: block;
  margin: 0 0 .15rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.filtros-tarjeta .campo-mini,
.campo.campo-mini {
  width: 100%;
  min-height: 0;
  height: auto;
  padding: .28rem .4rem;
  font-size: .76rem;
  line-height: 1.25;
  border-radius: 8px;
}

/* Boton de reporte en cabecera de tarjeta */
.btn-titulo-reporte {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  flex: none;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.32), transparent 3.5rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 48%, var(--rojo));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 8px rgba(90, 8, 22, .28), inset 0 1px 0 rgba(255,255,255,.28);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-titulo-reporte:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90, 8, 22, .36), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-titulo-reporte svg {
  width: 13px;
  height: 13px;
  opacity: 1;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Listas compactas con scroll (ventas/compras del producto) */
.lista-scroll {
  max-height: 14.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.lista-scroll::-webkit-scrollbar { width: 6px; }
.lista-scroll::-webkit-scrollbar-thumb {
  background: rgba(90, 55, 0, .28);
  border-radius: 999px;
}
.lista-scroll::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 480px) {
  .btn-titulo-reporte span { display: none; }
  .btn-titulo-reporte {
    padding: .28rem;
    border-radius: 50%;
    width: 1.85rem;
    height: 1.85rem;
    justify-content: center;
  }
}

.totales { padding: .3rem 0; }
.total-fila { display: flex; padding: .42rem .9rem; font-size: .87rem; }
.total-fila .k { color: var(--tinta-3); }
.total-fila .v { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.total-fila.grande { border-top: 2px solid var(--borde-fuerte); margin-top: .3rem; padding-top: .6rem;
  font-size: 1.05rem; }
.total-fila.grande .k, .total-fila.grande .v { font-weight: 800; color: var(--tinta); }

.resumen-detalle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .75rem;
  margin-top: .75rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(201, 151, 43, .28);
  border-radius: var(--r-sm);
  background: var(--oro-claro);
}
.tarjeta-seccion-totales .resumen-detalle {
  margin-top: 0;
  margin-bottom: .75rem;
}
@media (min-width: 40rem) {
  .resumen-detalle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.resumen-detalle .k {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-3);
  font-weight: 800;
}
.resumen-detalle b {
  display: block;
  margin-top: .12rem;
  font-size: .95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  line-height: 1.2;
}
.resumen-detalle .resumen-soles b { color: var(--rojo-osc); }

.resumen-cobertura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .7rem;
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0;
  padding: .5rem .75rem;
  border: 1px solid rgba(201, 151, 43, .42);
  border-radius: var(--r-sm);
  background: var(--oro-claro);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.resumen-cobertura .resumen-cob-falta,
.resumen-cobertura .resumen-cob-soles,
.resumen-cobertura .resumen-cob-margen { grid-column: auto; }
.resumen-cobertura:not(.con-12) .resumen-cob-margen { display: none; }
@media (min-width: 36rem) {
  .resumen-cobertura:not(.con-12) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .resumen-cobertura.con-12 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.resumen-cobertura .k {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-3);
  font-weight: 800;
}
.resumen-cobertura b {
  display: block;
  margin-top: .08rem;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  line-height: 1.15;
}
.resumen-cobertura .resumen-cob-peso {
  display: block;
  margin-top: .08rem;
  font-size: .78rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.resumen-cobertura.corto .resumen-cob-falta b { color: var(--alerta); }
.resumen-cobertura.completo .resumen-cob-falta b,
.resumen-cobertura.de-mas .resumen-cob-falta b { color: var(--ok); }
.resumen-cobertura .resumen-cob-soles b { color: var(--rojo-osc); font-size: 1.12rem; }
.resumen-cobertura .resumen-cob-margen b.ok { color: var(--ok); }
.resumen-cobertura .resumen-cob-margen b.mal { color: var(--peligro); }

.progreso { height: 7px; border-radius: 4px; background: var(--borde); overflow: hidden; margin: .45rem 0 .2rem; }
.progreso i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.progreso.mal i { background: var(--peligro); }

/* ---------- Editor de items (pedido / OC) ------------------------------- */
.items-lista-scroll {
  max-height: min(52vh, 26rem);
  overflow-y: auto;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.72);
  -webkit-overflow-scrolling: touch;
  padding: .2rem var(--item-pad-x, .5rem) .28rem;
  container-type: inline-size;
  container-name: items-lista;
}
.items-lista-scroll.lista-oc { container-name: oc-items; }
.items-lista-scroll.lista-venta { container-name: venta-items; }
.tarjeta-cuerpo-lista {
  padding-top: .65rem;
  --item-gap: .28rem;
  --item-pad-x: .4rem;
  --item-ctrl-h: 2.1rem;
  /* Mismas pistas para cabecera y filas */
  --item-cols-venta: 1.75rem minmax(7.5rem, 1.15fr) minmax(5rem, .85fr) minmax(5.25rem, .9fr) minmax(4rem, .65fr) minmax(5.5rem, .85fr) 2.25rem;
  --item-cols-oc: 1.75rem minmax(7.5rem, 1.05fr) minmax(3.4rem, .48fr) minmax(5rem, .85fr) minmax(5.25rem, .9fr) minmax(4rem, .65fr) minmax(5.5rem, .85fr) 2.25rem;
  /* Orden de compra: ademas de peso y bultos lleva el numero de pieza que
     trajo el romaneo, y eso son nueve columnas. */
  --item-cols-oc9: 1.75rem minmax(6.5rem, 1fr) minmax(3rem, .42fr) minmax(3.6rem, .5fr) minmax(3.6rem, .5fr) minmax(4.4rem, .68fr) minmax(3.4rem, .5fr) minmax(5.2rem, .8fr) 2.25rem;
  /* OC 10 cols: producto con techo (no 1fr ilimitado); numeros con
     minimos reales para escribir C/C, 12.00 e importe S/ 1,140.00.
     Si el contenedor no llega a 1100px la fila se parte en dos lineas. */
  --item-cols-oc10: 1.5rem minmax(8rem, 1.2fr) minmax(4.5rem, 5.5rem) minmax(5rem, 6rem) minmax(4.5rem, 5.5rem) minmax(5.5rem, 7rem) minmax(4.75rem, 6rem) minmax(4.5rem, 5.5rem) minmax(6.75rem, 8.5rem) 7rem;
  --item-cols-oc10-wrap: 1.5rem minmax(4.5rem, 1fr) minmax(5rem, 1.1fr) minmax(4.5rem, 1fr) minmax(5.5rem, 1.25fr) minmax(4.75rem, 1.1fr) minmax(4.5rem, 1fr) minmax(6.75rem, 1.4fr) 7rem;
  /* Pedido/venta: grilla propia. No reutiliza oc10/oc12: el pedido tiene
     P. compra y Margen, y el toggle no debe heredar el wrap de la OC. */
  --item-cols-venta10: 1.5rem minmax(8rem, 1.2fr) minmax(4.5rem, 5.5rem) minmax(5rem, 6rem) minmax(4.5rem, 5.5rem) minmax(5.5rem, 7rem) minmax(4.75rem, 6rem) minmax(4.5rem, 5.5rem) minmax(6.75rem, 8.5rem) 2.5rem;
  --item-cols-venta10-wrap: 1.5rem minmax(4.5rem, 1fr) minmax(5rem, 1.1fr) minmax(4.5rem, 1fr) minmax(5.5rem, 1.25fr) minmax(4.75rem, 1.1fr) minmax(4.5rem, 1fr) minmax(6.75rem, 1.4fr) 2.5rem;
  --item-cols-venta12: 1.5rem minmax(7rem, 1.05fr) minmax(4.2rem, 5rem) minmax(4.8rem, 5.8rem) minmax(4.2rem, 5.2rem) minmax(5rem, 6.2rem) minmax(4.6rem, 5.6rem) minmax(4.6rem, 5.6rem) minmax(4.2rem, 5rem) minmax(4.2rem, 5rem) minmax(6.4rem, 8rem) 2.5rem;
  --item-cols-venta12-wrap: 1.5rem minmax(4rem, .85fr) minmax(4.6rem, 1fr) minmax(4.2rem, .9fr) minmax(5rem, 1.1fr) minmax(4.5rem, .95fr) minmax(4.5rem, .95fr) minmax(4rem, .8fr) minmax(4rem, .8fr) minmax(6.2rem, 1.25fr) 2.5rem;
  --item-cols-gastos: minmax(4.8rem, .62fr) 6.6rem minmax(6.6rem, .85fr) minmax(5.8rem, 1fr) minmax(7.2rem, 1.15fr) 5.6rem minmax(5.6rem, .78fr) 2.25rem;
  --item-cols-gastos-menu: minmax(4.8rem, .62fr) 6.6rem minmax(6.6rem, .85fr) minmax(5.8rem, 1fr) minmax(7.2rem, 1.15fr) 5.6rem minmax(5.6rem, .78fr);
}
.items-lista-cab {
  display: none;
  gap: var(--item-gap);
  padding: .4rem 0 .35rem;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--borde);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  color: var(--tinta-3);
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 248, 250, .97);
  backdrop-filter: blur(4px);
}
.items-lista-cab > span {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
}
.items-lista-cab .col-num,
.items-lista-cab .col-prod,
.items-lista-cab .col-gasto-tipo,
.items-lista-cab .col-gasto-det,
.items-lista-cab .col-gasto-codigo,
.items-lista-cab .col-gasto-doc { justify-content: flex-start; text-align: left; }
.items-lista-cab .col-act,
.items-lista-cab .col-gasto-adjun,
.items-lista-cab .col-gasto-foto { justify-content: center; }
.items-lista-cab .col-gasto-monto { justify-content: flex-end; text-align: right; }

.items-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.item-fila {
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  padding: .45rem 0;
  position: relative;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: .35rem .4rem;
  align-items: center;
  /* Tres pistas servian al primer renglon -numero, producto, quitar- y los
     campos de abajo heredaban esas medidas: Pieza y Dscto. quedaban en
     28 px, imposibles de escribir. El medio se parte en cuatro pistas
     iguales, que suman lo mismo, y cada campo ocupa dos. */
  grid-template-columns: 1.75rem repeat(4, minmax(0, 1fr)) 2.25rem;
  grid-template-areas:
    "num prod prod prod prod act"
    "f1 f1 f2 f2 f3 f3"
    "f4 f4 pie pie pie pie";
}
.item-fila:last-child { border-bottom: 0; }
.item-fila.eliminada { display: none !important; }
/* Ocultos del formset: fuera del flujo del grid pero presentes en el POST */
.item-fila > .oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}
.item-fila > input[type="hidden"] {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
}
.item-quitar svg,
.item-quitar use,
.item-editar svg,
.item-editar use,
.item-generar-pieza svg,
.item-generar-pieza use { pointer-events: none; }

.item-num {
  grid-area: num;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rojo-claro); color: var(--rojo-osc);
  font-size: .66rem; font-weight: 800;
  display: grid; place-items: center;
  justify-self: start;
  align-self: center;
  flex: none;
  line-height: 1;
}
.item-prod {
  grid-area: prod;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  align-self: center;
}
.item-descripcion {
  width: 100%; border: 0; border-bottom: 1px solid transparent; background: transparent;
  font-family: inherit; font-weight: 650; font-size: 14px; color: var(--tinta);
  padding: 0; min-height: 0; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-descripcion:focus { outline: none; border-bottom-color: var(--rojo); white-space: normal; }
.item-cat {
  font-size: .66rem; color: var(--tinta-3); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.item-quitar {
  grid-area: act;
  border: 1px solid rgba(196,33,48,.42);
  background: linear-gradient(180deg, #FFF6F7, var(--peligro-bg));
  color: var(--peligro); cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; box-shadow: 0 1px 0 rgba(255,255,255,.85);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  justify-self: center;
  align-self: center;
  flex: none;
  padding: 0;
}
.item-quitar:hover, .item-quitar:focus-visible {
  background: var(--peligro); color: #fff; border-color: var(--peligro);
  outline: none; transform: scale(1.03);
}
.item-quitar:active { transform: scale(.97); background: var(--rojo-osc); }

.item-acciones {
  grid-area: act;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  justify-self: stretch;
  align-self: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.item-acciones .item-quitar,
.item-acciones .item-editar,
.item-acciones .item-generar-pieza {
  grid-area: auto;
}
.item-editar {
  border: 1px solid rgba(154, 92, 0, .38);
  background: linear-gradient(180deg, #FFFBF2, #FFF4D9);
  color: #8A5200;
  cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; box-shadow: 0 1px 0 rgba(255,255,255,.85);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  flex: none;
  padding: 0;
}
.item-editar:hover, .item-editar:focus-visible {
  background: linear-gradient(135deg, #9A5C00, #D6951B); color: #fff; border-color: #D6951B;
  outline: none; transform: scale(1.03);
}
.item-editar:active { transform: scale(.97); }
.item-editar svg,
.item-editar use { pointer-events: none; }
.item-generar-pieza {
  border: 1px solid rgba(11, 61, 36, .38);
  background: linear-gradient(180deg, #F3FFF8, #D2F7E2);
  color: #0B3D24;
  cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; box-shadow: 0 1px 0 rgba(255,255,255,.85);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  flex: none;
  padding: 0;
}
.item-generar-pieza:hover, .item-generar-pieza:focus-visible {
  background: #82E0AA; color: #08301C; border-color: #4BB87A;
  outline: none; transform: scale(1.03);
}
.item-generar-pieza:active { transform: scale(.97); }
.item-generar-pieza svg,
.item-generar-pieza use { pointer-events: none; }

/* Filas de 8 columnas: el pedido lleva PZ + Cantidad (con-pz). */
.item-fila > .col-pz { grid-area: f1; }
.item-fila > .col-cant { grid-area: f2; }
.item-fila > .col-pu { grid-area: f3; }
.item-fila > .col-dscto { grid-area: f4; }
.item-fila > .col-imp { grid-area: pie; }

/* Filas de 9 columnas (orden de compra): PZ + Peso + Cant. Unid. En el
   celular entran en tres filas de tres. */
.item-fila.con-9 > .col-pz { grid-area: pz; }
.item-fila.con-9 > .col-peso { grid-area: f1; }
.item-fila.con-9 > .col-und { grid-area: f2; }
.item-fila.con-9 > .col-pu { grid-area: f3; }
.item-fila.con-9 > .col-dscto { grid-area: f4; }
.item-fila.con-9 {
  grid-template-areas:
    "num prod prod prod prod act"
    "pz pz f1 f1 f2 f2"
    "f3 f3 f4 f4 pie pie";
}

/* Filas de 10 columnas (orden de compra con tipo peso) */
.item-fila.con-10 > .col-pz { grid-area: pz; }
.item-fila.con-10 > .col-peso { grid-area: f1; }
.item-fila.con-10 > .col-und { grid-area: f2; }
.item-fila.con-10 > .col-tipo-peso { grid-area: tp; }
.item-fila.con-10 > .col-pu { grid-area: f3; }
.item-fila.con-10 > .col-dscto { grid-area: f4; }
.item-fila.con-10 {
  grid-template-areas:
    "num prod prod prod prod act"
    "pz pz f1 f1 f2 f2"
    "tp tp f3 f3 f4 f4"
    "pie pie pie pie pie pie";
}

/* Pedido/venta: mismas columnas de la OC mas precio compra y margen.
   con-venta nunca comparte el wrap de .con-10 (eso es solo la OC). */
.item-fila.con-venta > .col-pz { grid-area: pz; }
.item-fila.con-venta > .col-peso { grid-area: f1; }
.item-fila.con-venta > .col-und { grid-area: f2; }
.item-fila.con-venta > .col-tipo-peso { grid-area: tp; }
.item-fila.con-venta > .col-pc { grid-area: pc; }
.item-fila.con-venta > .col-pu { grid-area: f3; }
.item-fila.con-venta > .col-margen { grid-area: mg; }
.item-fila.con-venta > .col-dscto { grid-area: f4; }
.item-fila.con-venta.con-12 {
  grid-template-areas:
    "num prod prod prod prod act"
    "pz pz f1 f1 f2 f2"
    "tp tp pc pc f3 f3"
    "mg mg f4 f4 pie pie";
}
.item-fila.con-venta:not(.con-12) {
  grid-template-areas:
    "num prod prod prod prod act"
    "pz pz f1 f1 f2 f2"
    "tp tp f3 f3 f4 f4"
    "pie pie pie pie pie pie";
}
.item-fila.con-10 > .col-pc,
.item-fila.con-10 > .col-margen,
.items-lista-cab.con-10 > .col-pc,
.items-lista-cab.con-10 > .col-margen,
.item-fila.con-venta:not(.con-12) > .col-pc,
.item-fila.con-venta:not(.con-12) > .col-margen,
.items-lista-cab.con-venta:not(.con-12) > .col-pc,
.items-lista-cab.con-venta:not(.con-12) > .col-margen {
  display: none !important;
}

/* Filas de 7 columnas (sin PZ ni unidades). Sin :not(.con-10) esta regla
   pisa la grilla de tipo peso y c/c-s/c queda fuera de lugar. */
.item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) {
  grid-template-areas:
    "num prod prod prod prod act"
    "f1 f1 f2 f2 f3 f3"
    "pie pie pie pie pie pie";
}
.item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-peso,
.item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-cant { grid-area: f1; }
.item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-pu { grid-area: f2; }
.item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-dscto { grid-area: f3; }
.item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-imp { grid-area: pie; }

/* Gastos: Codigo, Fecha, Tipo, Detalle, Documento, Monto, Adjun. + quitar. */
.item-fila.con-gastos {
  grid-template-columns: 1fr 6.6rem 2.25rem;
  grid-template-areas:
    "codigo fecha act"
    "tipo tipo tipo"
    "det det det"
    "doc doc monto"
    "adjun adjun adjun";
  align-items: start;
}
.item-fila.con-gastos.sin-quitar {
  grid-template-columns: 1fr 6.6rem;
  grid-template-areas:
    "codigo fecha"
    "tipo tipo"
    "det det"
    "doc monto"
    "adjun adjun";
}
.item-fila.con-gastos > .col-gasto-codigo { grid-area: codigo; }
.item-fila.con-gastos > .col-gasto-fecha { grid-area: fecha; }
.item-fila.con-gastos > .col-gasto-tipo { grid-area: tipo; }
.item-fila.con-gastos > .col-gasto-det { grid-area: det; }
.item-fila.con-gastos > .col-gasto-doc { grid-area: doc; }
.item-fila.con-gastos > .col-gasto-monto { grid-area: monto; }
.item-fila.con-gastos > .col-gasto-adjun { grid-area: adjun; }
.item-fila.con-gastos > .col-act { grid-area: act; align-self: start; }
.item-fila.con-gastos .col-gasto-tipo .campo,
.item-fila.con-gastos .col-gasto-det .campo,
.item-fila.con-gastos .col-gasto-doc .campo,
.item-fila.con-gastos .col-gasto-codigo .campo { text-align: left; }
.item-fila.con-gastos .col-gasto-adjun,
.item-fila.con-gastos .col-gasto-doc {
  height: auto;
  min-height: var(--item-ctrl-h, 2.25rem);
  overflow: visible;
}
.item-fila.con-gastos input[type="date"].campo,
.item-fila.con-gastos input.campo[type="date"] {
  min-height: var(--item-ctrl-h, 2.25rem);
  height: var(--item-ctrl-h, 2.25rem);
  max-height: var(--item-ctrl-h, 2.25rem);
  padding: 0 .35rem;
}
.gasto-doc-celda {
  display: grid;
  grid-template-columns: minmax(5.4rem, .9fr) minmax(0, 1.2fr);
  gap: .25rem;
  align-items: center;
  min-width: 0;
}
.gasto-doc-celda .select-combo { min-width: 0; }
.gasto-doc-oc {
  min-height: var(--item-ctrl-h, 2.25rem);
  display: flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gasto-foto-celda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem;
  min-height: var(--item-ctrl-h, 2.25rem);
}
.gasto-foto-btn {
  display: grid;
  place-items: center;
  width: var(--item-ctrl-h, 2.25rem);
  height: var(--item-ctrl-h, 2.25rem);
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--borde-fuerte);
  border-radius: 9px;
  background: var(--superficie-2);
  color: var(--tinta);
  position: relative;
  flex: none;
  overflow: hidden;
}
.gasto-foto-btn input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  display: block !important;
  z-index: 1;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}
.gasto-foto-btn:hover, .gasto-foto-btn:focus-within {
  border-color: var(--rojo);
  color: var(--rojo);
}
.gasto-foto-btn svg { width: 16px; height: 16px; pointer-events: none; }
.gasto-foto-n {
  position: absolute;
  top: 0; right: 0;
  min-width: 1rem; height: 1rem;
  padding: 0 .2rem;
  border-radius: 999px;
  background: var(--rojo); color: #fff;
  font-size: .58rem; font-weight: 800;
  display: grid; place-items: center;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}
.gasto-fotos-mini {
  display: flex;
  flex-wrap: wrap;
  gap: .22rem;
  align-items: center;
}
.gasto-fotos-mini a {
  width: 28px; height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  display: grid; place-items: center;
  flex: none;
}
.gasto-fotos-mini img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gasto-fotos-mini .icono-doc { width: 14px; height: 14px; opacity: .6; }

.gasto-adjuntos-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.gasto-adjuntos-grupo .gasto-foto-celda {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .28rem;
  padding: .2rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--sombra-1), var(--brillo);
  min-height: 0;
}
.gasto-adjuntos-grupo .gasto-foto-btn {
  width: 2.9rem;
  height: 2.9rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  overflow: visible;
}
.gasto-adjuntos-grupo .gasto-foto-btn svg {
  width: 22px;
  height: 22px;
}
.gasto-adjuntos-grupo .gasto-foto-n {
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: .65rem;
  top: -.12rem;
  right: -.12rem;
}
.gasto-doc-form {
  margin-top: .45rem;
}

.item-campo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.item-campo label,
.item-pie > label {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); font-weight: 700; display: block; margin-bottom: .08rem;
  line-height: 1.1;
}
.item-campo .campo,
.item-campo input.campo {
  min-height: var(--item-ctrl-h);
  height: var(--item-ctrl-h);
  max-height: var(--item-ctrl-h);
  padding: 0 .28rem;
  font-size: 13px;
  line-height: 1;
  text-align: right;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  margin: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.item-campo input.campo::-webkit-outer-spin-button,
.item-campo input.campo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.item-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .76rem;
  gap: .2rem;
  min-width: 0;
  min-height: var(--item-ctrl-h);
  align-self: center;
}
.item-pie .imp {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
}
.item-pie .desc-monto {
  color: var(--peligro); font-size: .68rem; white-space: nowrap;
}
.item-pie .desc-monto:empty { display: none; }
.item-pie .margen {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item-pie .margen.ok { color: var(--ok); }
.item-pie .margen.mal { color: var(--peligro); }

/* Item original del pedido: lo que se pidio a ojo antes de pesar. Se sigue
   editando, pero cuando su producto ya tiene piezas deja de cobrarse -las
   piezas son esa misma mercaderia- y la fila lo dice en vez de desaparecer. */
.tarjeta-seccion-estimado .items-lista-scroll { max-height: none; }
.item-fila.fila-cubierta { opacity: .72; }
/* En pantalla chica el importe es una fila: la etiqueta baja de linea en
   vez de comerse el monto -y de sacarle una barra de scroll al cuadro-. */
.item-pie.col-imp { flex-wrap: wrap; row-gap: .1rem; }
.item-pie .etq-cubierta { flex: none; }
.item-fila.fila-cubierta .imp { text-decoration: line-through; }
.etq-cubierta {
  align-self: center;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  line-height: 1.15;
  padding: .05rem .32rem;
  border-radius: 999px;
  color: var(--tinta-3);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.lista-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .65rem .85rem;
  margin: 0 0 .75rem;
}
.grupo-columnas-costo {
  flex: 0 1 16.5rem;
  max-width: 18rem;
  margin: 0;
  position: relative;
  z-index: 2;
}
.tarjeta-seccion-lista .select-combo { z-index: 1; }
.item-fila .error {
  grid-column: 1 / -1;
  grid-area: auto;
}

@media (min-width: 820px) {
  .items-lista-cab.solo-escritorio {
    display: grid;
    grid-template-columns: var(--item-cols-venta);
    align-items: end;
  }
  .items-lista-cab.solo-escritorio.con-pz {
    grid-template-columns: var(--item-cols-oc);
  }
  .items-lista-cab.solo-escritorio.con-9 {
    grid-template-columns: var(--item-cols-oc9);
  }
  .items-lista-cab.solo-escritorio.con-10,
  .items-lista-cab.solo-escritorio.con-venta {
    display: none;
  }
  .items-lista-cab.solo-escritorio.con-gastos {
    grid-template-columns: var(--item-cols-gastos);
  }
  .items-lista-cab.solo-escritorio.con-gastos.sin-quitar {
    grid-template-columns: var(--item-cols-gastos-menu);
  }

  .item-fila:not(.con-gastos):not(.con-10):not(.con-venta),
  .item-fila.con-pz,
  .item-fila.con-9,
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) {
    display: grid;
    grid-template-areas: none !important;
    grid-template-columns: var(--item-cols-venta);
    gap: 0 var(--item-gap);
    padding: .38rem 0;
    align-items: center;
    min-height: calc(var(--item-ctrl-h) + .5rem);
  }
  .item-fila.con-pz {
    grid-template-columns: var(--item-cols-oc);
  }
  .item-fila.con-9 {
    grid-template-columns: var(--item-cols-oc9);
  }
  .item-fila.con-gastos {
    display: grid;
    grid-template-areas: none !important;
    grid-template-columns: var(--item-cols-gastos);
    gap: 0 var(--item-gap);
    padding: .38rem 0;
    align-items: center;
    min-height: calc(var(--item-ctrl-h) + .5rem);
  }

  /* Una sola fila; limpia area names del layout movil.
     con-10 (OC) y con-venta (pedido) se parten en dos lineas hasta
     que el contenedor llega holgado. */
  .item-fila:not(.con-10):not(.con-venta) > .col-num,
  .item-fila:not(.con-10):not(.con-venta) > .col-prod,
  .item-fila:not(.con-10):not(.con-venta) > .col-pz,
  .item-fila:not(.con-10):not(.con-venta) > .col-peso,
  .item-fila:not(.con-10):not(.con-venta) > .col-cant,
  .item-fila:not(.con-10):not(.con-venta) > .col-und,
  .item-fila:not(.con-10):not(.con-venta) > .col-tipo-peso,
  .item-fila:not(.con-10):not(.con-venta) > .col-pc,
  .item-fila:not(.con-10):not(.con-venta) > .col-pu,
  .item-fila:not(.con-10):not(.con-venta) > .col-margen,
  .item-fila:not(.con-10):not(.con-venta) > .col-dscto,
  .item-fila:not(.con-10):not(.con-venta) > .col-imp,
  .item-fila:not(.con-10):not(.con-venta) > .col-act {
    grid-area: auto !important;
    grid-row: 1;
    align-self: center;
  }

  .item-fila:not(.con-10):not(.con-venta) > .col-num { grid-column: 1; justify-self: start; }
  .item-fila:not(.con-10):not(.con-venta) > .col-prod { grid-column: 2; min-width: 0; }
  .item-fila:not(.con-10):not(.con-venta) > .col-pz { grid-column: 3; }
  .item-fila:not(.con-10):not(.con-venta) > .col-cant { grid-column: 4; }
  .item-fila:not(.con-10):not(.con-venta) > .col-pu { grid-column: 5; }
  .item-fila:not(.con-10):not(.con-venta) > .col-dscto { grid-column: 6; }
  .item-fila:not(.con-10):not(.con-venta) > .col-imp { grid-column: 7; justify-self: stretch; }
  .item-fila:not(.con-10):not(.con-venta) > .col-act { grid-column: 8; justify-self: center; }

  /* Orden de compra: pieza, peso y bultos corren de la 3 a la 5, y lo
     demas se desplaza una posicion. Sin esto el peso caia sobre el precio
     unitario, la fila salia corrida y el descuento quedaba tapado. */
  .item-fila.con-9 > .col-pz { grid-column: 3; }
  .item-fila.con-9 > .col-peso { grid-column: 4; }
  .item-fila.con-9 > .col-und { grid-column: 5; }
  .item-fila.con-9 > .col-pu { grid-column: 6; }
  .item-fila.con-9 > .col-dscto { grid-column: 7; }
  .item-fila.con-9 > .col-imp { grid-column: 8; }
  .item-fila.con-9 > .col-act { grid-column: 9; }

  /* Filas de 7 columnas: corre todo una posicion a la izquierda */
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-peso,
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-cant { grid-column: 3; }
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-pu { grid-column: 4; }
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-dscto { grid-column: 5; }
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-imp { grid-column: 6; }
  .item-fila:not(.con-pz):not(.con-9):not(.con-10):not(.con-12):not(.con-venta):not(.con-gastos) > .col-act { grid-column: 7; }

  .item-fila.con-gastos > .col-gasto-codigo,
  .item-fila.con-gastos > .col-gasto-fecha,
  .item-fila.con-gastos > .col-gasto-tipo,
  .item-fila.con-gastos > .col-gasto-det,
  .item-fila.con-gastos > .col-gasto-doc,
  .item-fila.con-gastos > .col-gasto-monto,
  .item-fila.con-gastos > .col-gasto-adjun,
  .item-fila.con-gastos > .col-act {
    grid-area: auto !important;
    grid-row: 1;
    align-self: center;
  }
  .item-fila.con-gastos > .col-gasto-codigo { grid-column: 1; min-width: 0; }
  .item-fila.con-gastos > .col-gasto-fecha { grid-column: 2; }
  .item-fila.con-gastos > .col-gasto-tipo { grid-column: 3; min-width: 0; }
  .item-fila.con-gastos > .col-gasto-det { grid-column: 4; min-width: 0; }
  .item-fila.con-gastos > .col-gasto-doc { grid-column: 5; min-width: 0; height: auto; }
  .item-fila.con-gastos > .col-gasto-monto { grid-column: 6; }
  .item-fila.con-gastos > .col-gasto-adjun {
    grid-column: 7;
    height: auto !important;
    overflow: visible;
    justify-content: flex-start;
  }
  .item-fila.con-gastos > .col-act { grid-column: 8; justify-self: center; }
  .item-fila.con-gastos.sin-quitar {
    grid-template-columns: var(--item-cols-gastos-menu);
  }

  .item-campo label,
  .item-pie > label { display: none !important; }
  /* Adjun. usa <label> como boton de archivo; no es la etiqueta de columna. */
  .item-campo .gasto-foto-btn { display: grid !important; }
  .item-campo {
    height: var(--item-ctrl-h);
    justify-content: center;
  }
  .item-prod {
    min-height: var(--item-ctrl-h);
    justify-content: center;
  }
  .item-num {
    width: 22px;
    height: 22px;
  }
  .item-quitar {
    width: 32px;
    height: 32px;
  }
  .item-fila.con-10 .item-acciones .item-quitar,
  .item-fila.con-10 .item-acciones .item-editar,
  .item-fila.con-10 .item-acciones .item-generar-pieza,
  .item-fila.con-venta .item-acciones .item-quitar,
  .item-fila.con-venta .item-acciones .item-editar {
    width: 32px;
    height: 32px;
  }
  .item-fila.con-10 .item-campo label,
  .item-fila.con-venta .item-campo label,
  .item-fila.con-venta .item-pie > label { display: block !important; }
  .item-fila.con-10 .item-campo,
  .item-fila.con-10 .item-pie,
  .item-fila.con-venta .item-campo,
  .item-fila.con-venta .item-pie {
    height: auto;
    min-height: var(--item-ctrl-h);
  }
  .tarjeta-seccion-lista .items-lista-scroll:has(.con-10),
  .tarjeta-seccion-lista .items-lista-scroll:has(.con-venta) {
    overflow-x: auto;
  }
  .item-pie {
    min-height: var(--item-ctrl-h);
    height: var(--item-ctrl-h);
    justify-self: stretch;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
  }
  .item-pie .imp { margin-left: 0; text-align: center; width: 100%; }
  .item-fila:not(.con-10):not(.con-venta) > .error {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .item-fila.con-10 > .error,
  .item-fila.con-venta > .error {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* OC lista: dos lineas cuando el row no cabe holgado; una fila desde 1100px. */
@container oc-items (min-width: 42rem) {
  .item-fila.con-10 {
    display: grid;
    grid-template-columns: var(--item-cols-oc10-wrap);
    grid-template-areas:
      "num prod prod prod prod prod prod prod act"
      "num pz   f1   f2   tp   f3   f4   pie  act";
    gap: .32rem .38rem;
    padding: .42rem 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-10 > .col-num { grid-area: num; align-self: center; }
  .item-fila.con-10 > .col-prod { grid-area: prod; min-width: 0; }
  .item-fila.con-10 > .col-pz { grid-area: pz; }
  .item-fila.con-10 > .col-peso { grid-area: f1; }
  .item-fila.con-10 > .col-und { grid-area: f2; }
  .item-fila.con-10 > .col-tipo-peso { grid-area: tp; }
  .item-fila.con-10 > .col-pu { grid-area: f3; }
  .item-fila.con-10 > .col-dscto { grid-area: f4; }
  .item-fila.con-10 > .col-imp { grid-area: pie; }
  .item-fila.con-10 > .col-act { grid-area: act; justify-self: stretch; }
  .item-fila.con-10 .item-pie .imp { font-size: .8rem; }
}

@container oc-items (min-width: 68.75rem) {
  .items-lista-cab.solo-escritorio.con-10 {
    display: grid;
    grid-template-columns: var(--item-cols-oc10);
    font-size: .62rem;
    letter-spacing: .03em;
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-10 {
    display: grid;
    grid-template-areas: none;
    grid-template-columns: var(--item-cols-oc10);
    gap: 0 .38rem;
    padding: .42rem 0;
    align-items: center;
    min-height: calc(var(--item-ctrl-h) + .55rem);
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-10 > .col-num,
  .item-fila.con-10 > .col-prod,
  .item-fila.con-10 > .col-pz,
  .item-fila.con-10 > .col-peso,
  .item-fila.con-10 > .col-und,
  .item-fila.con-10 > .col-tipo-peso,
  .item-fila.con-10 > .col-pu,
  .item-fila.con-10 > .col-dscto,
  .item-fila.con-10 > .col-imp,
  .item-fila.con-10 > .col-act {
    grid-area: auto;
    grid-row: 1;
    align-self: center;
  }
  .item-fila.con-10 > .col-num { grid-column: 1; justify-self: start; }
  .item-fila.con-10 > .col-prod { grid-column: 2; min-width: 0; }
  .item-fila.con-10 > .col-pz { grid-column: 3; }
  .item-fila.con-10 > .col-peso { grid-column: 4; }
  .item-fila.con-10 > .col-und { grid-column: 5; }
  .item-fila.con-10 > .col-tipo-peso { grid-column: 6; }
  .item-fila.con-10 > .col-pu { grid-column: 7; }
  .item-fila.con-10 > .col-dscto { grid-column: 8; }
  .item-fila.con-10 > .col-imp { grid-column: 9; justify-self: stretch; }
  .item-fila.con-10 > .col-act { grid-column: 10; justify-self: stretch; }
  .item-fila.con-10 .item-campo label { display: none !important; }
  .item-fila.con-10 .item-campo {
    height: var(--item-ctrl-h);
    justify-content: center;
  }
  .item-fila.con-10 .item-pie {
    height: var(--item-ctrl-h);
    min-height: var(--item-ctrl-h);
  }
  .item-fila.con-10 .item-pie .imp { font-size: .82rem; }
  .item-fila.con-10 > .error {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .tarjeta-seccion-lista .items-lista-scroll:has(.con-10) {
    overflow-x: hidden;
  }
}

/* Pedido/venta: wrap propio, no hereda oc-items. Dos lineas con etiqueta
   por celda; una fila cuando el contenedor llega holgado. */
@container venta-items (min-width: 42rem) {
  .item-fila.con-venta:not(.con-12) {
    display: grid;
    grid-template-columns: var(--item-cols-venta10-wrap);
    grid-template-areas:
      "num prod prod prod prod prod prod prod act"
      "num pz   f1   f2   tp   f3   f4   pie  act";
    gap: .32rem .38rem;
    padding: .42rem 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-venta.con-12 {
    display: grid;
    grid-template-columns: var(--item-cols-venta12-wrap);
    grid-template-areas:
      "num prod prod prod prod prod prod prod prod prod act"
      "num pz   f1   f2   tp   pc   f3   mg   f4   pie  act";
    gap: .32rem .38rem;
    padding: .42rem 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-venta > .col-num { grid-area: num; align-self: center; }
  .item-fila.con-venta > .col-prod { grid-area: prod; min-width: 0; }
  .item-fila.con-venta > .col-pz { grid-area: pz; }
  .item-fila.con-venta > .col-peso { grid-area: f1; }
  .item-fila.con-venta > .col-und { grid-area: f2; }
  .item-fila.con-venta > .col-tipo-peso { grid-area: tp; }
  .item-fila.con-venta > .col-pc { grid-area: pc; }
  .item-fila.con-venta > .col-pu { grid-area: f3; }
  .item-fila.con-venta > .col-margen { grid-area: mg; }
  .item-fila.con-venta > .col-dscto { grid-area: f4; }
  .item-fila.con-venta > .col-imp { grid-area: pie; }
  .item-fila.con-venta > .col-act { grid-area: act; justify-self: stretch; }
  .item-fila.con-venta .item-pie .imp { font-size: .8rem; }
}

@container venta-items (min-width: 68.75rem) {
  .items-lista-cab.solo-escritorio.con-venta:not(.con-12) {
    display: grid;
    grid-template-columns: var(--item-cols-venta10);
    font-size: .62rem;
    letter-spacing: .03em;
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-venta:not(.con-12) {
    display: grid;
    grid-template-areas: none;
    grid-template-columns: var(--item-cols-venta10);
    gap: 0 .38rem;
    padding: .42rem 0;
    align-items: center;
    min-height: calc(var(--item-ctrl-h) + .55rem);
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-venta:not(.con-12) > .col-num,
  .item-fila.con-venta:not(.con-12) > .col-prod,
  .item-fila.con-venta:not(.con-12) > .col-pz,
  .item-fila.con-venta:not(.con-12) > .col-peso,
  .item-fila.con-venta:not(.con-12) > .col-und,
  .item-fila.con-venta:not(.con-12) > .col-tipo-peso,
  .item-fila.con-venta:not(.con-12) > .col-pu,
  .item-fila.con-venta:not(.con-12) > .col-dscto,
  .item-fila.con-venta:not(.con-12) > .col-imp,
  .item-fila.con-venta:not(.con-12) > .col-act {
    grid-area: auto;
    grid-row: 1;
    align-self: center;
  }
  .item-fila.con-venta:not(.con-12) > .col-num { grid-column: 1; justify-self: start; }
  .item-fila.con-venta:not(.con-12) > .col-prod { grid-column: 2; min-width: 0; }
  .item-fila.con-venta:not(.con-12) > .col-pz { grid-column: 3; }
  .item-fila.con-venta:not(.con-12) > .col-peso { grid-column: 4; }
  .item-fila.con-venta:not(.con-12) > .col-und { grid-column: 5; }
  .item-fila.con-venta:not(.con-12) > .col-tipo-peso { grid-column: 6; }
  .item-fila.con-venta:not(.con-12) > .col-pu { grid-column: 7; }
  .item-fila.con-venta:not(.con-12) > .col-dscto { grid-column: 8; }
  .item-fila.con-venta:not(.con-12) > .col-imp { grid-column: 9; justify-self: stretch; }
  .item-fila.con-venta:not(.con-12) > .col-act { grid-column: 10; justify-self: stretch; }
  .item-fila.con-venta:not(.con-12) .item-campo label,
  .item-fila.con-venta:not(.con-12) .item-pie > label { display: none !important; }
  .item-fila.con-venta:not(.con-12) .item-campo {
    height: var(--item-ctrl-h);
    justify-content: center;
  }
  .item-fila.con-venta:not(.con-12) .item-pie {
    height: var(--item-ctrl-h);
    min-height: var(--item-ctrl-h);
  }
  .item-fila.con-venta:not(.con-12) .item-pie .imp { font-size: .82rem; }
  .item-fila.con-venta:not(.con-12) > .error {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@container venta-items (min-width: 80rem) {
  .items-lista-cab.solo-escritorio.con-venta.con-12 {
    display: grid;
    grid-template-columns: var(--item-cols-venta12);
    font-size: .62rem;
    letter-spacing: .03em;
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-venta.con-12 {
    display: grid;
    grid-template-areas: none;
    grid-template-columns: var(--item-cols-venta12);
    gap: 0 .38rem;
    padding: .42rem 0;
    align-items: center;
    min-height: calc(var(--item-ctrl-h) + .55rem);
    width: 100%;
    max-width: 100%;
  }
  .item-fila.con-venta.con-12 > .col-num,
  .item-fila.con-venta.con-12 > .col-prod,
  .item-fila.con-venta.con-12 > .col-pz,
  .item-fila.con-venta.con-12 > .col-peso,
  .item-fila.con-venta.con-12 > .col-und,
  .item-fila.con-venta.con-12 > .col-tipo-peso,
  .item-fila.con-venta.con-12 > .col-pc,
  .item-fila.con-venta.con-12 > .col-pu,
  .item-fila.con-venta.con-12 > .col-margen,
  .item-fila.con-venta.con-12 > .col-dscto,
  .item-fila.con-venta.con-12 > .col-imp,
  .item-fila.con-venta.con-12 > .col-act {
    grid-area: auto;
    grid-row: 1;
    align-self: center;
  }
  .item-fila.con-venta.con-12 > .col-num { grid-column: 1; justify-self: start; }
  .item-fila.con-venta.con-12 > .col-prod { grid-column: 2; min-width: 0; }
  .item-fila.con-venta.con-12 > .col-pz { grid-column: 3; }
  .item-fila.con-venta.con-12 > .col-peso { grid-column: 4; }
  .item-fila.con-venta.con-12 > .col-und { grid-column: 5; }
  .item-fila.con-venta.con-12 > .col-tipo-peso { grid-column: 6; }
  .item-fila.con-venta.con-12 > .col-pc { grid-column: 7; }
  .item-fila.con-venta.con-12 > .col-pu { grid-column: 8; }
  .item-fila.con-venta.con-12 > .col-margen { grid-column: 9; }
  .item-fila.con-venta.con-12 > .col-dscto { grid-column: 10; }
  .item-fila.con-venta.con-12 > .col-imp { grid-column: 11; justify-self: stretch; }
  .item-fila.con-venta.con-12 > .col-act { grid-column: 12; justify-self: stretch; }
  .item-fila.con-venta.con-12 .item-campo label,
  .item-fila.con-venta.con-12 .item-pie > label { display: none !important; }
  .item-fila.con-venta.con-12 .item-campo {
    height: var(--item-ctrl-h);
    justify-content: center;
  }
  .item-fila.con-venta.con-12 .item-pie {
    height: var(--item-ctrl-h);
    min-height: var(--item-ctrl-h);
  }
  .item-fila.con-venta.con-12 .item-pie .imp { font-size: .82rem; }
  .item-fila.con-venta.con-12 > .error {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .tarjeta-seccion-lista .items-lista-scroll:has(.con-venta) {
    overflow-x: hidden;
  }
}

@media (max-width: 819px) {
  .items-lista-scroll { padding-left: .45rem; padding-right: .45rem; }
  .item-fila {
    padding: .45rem 0;
    border-bottom: 1px solid var(--borde);
  }
  .item-cat {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Buscador de productos. No usa .buscador: esa clase deja 5.2rem a la
   derecha para botones de lista y parece un segundo cuadro de busqueda. */
.buscador-prod { position: relative; z-index: 8; overflow: visible; }
.caja-busca-prod { position: relative; }
.caja-busca-prod .lupa {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none;
}
.caja-busca-prod .campo { padding-left: 2.45rem; }
.resultados-prod {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 400;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  box-shadow: var(--sombra-3); max-height: min(46vh, 20rem); overflow-y: auto; display: none;
}
.resultados-prod.abierto { display: block; }
.resultados-prod.modo-piezas { max-height: min(56vh, 28rem); }
/* Fuera de la tarjeta: el selector de costo (z-index 6) no puede taparlo. */
body > .resultados-prod {
  position: fixed;
  z-index: 500;
}
.resultado {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.resultado:last-child { border-bottom: 0; }
.resultado:hover, .resultado.marcado { background: var(--rojo-claro); }
.resultado .info { flex: 1; min-width: 0; }
.resultado .n { font-weight: 650; font-size: .86rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.resultado .c { font-size: .72rem; color: var(--tinta-3); }
.resultado .p { font-weight: 700; font-size: .84rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.resultado.deshabilitado { opacity: .55; cursor: default; }
.resultado.deshabilitado:hover, .resultado.deshabilitado.marcado {
  background: transparent;
}
.resultados-cab-piezas {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  position: sticky; top: 0; z-index: 1;
}
.resultados-cab-piezas .volver-prod {
  flex: none;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .72rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.resultados-cab-piezas .volver-prod:hover { border-color: var(--oro); }
.resultados-cab-piezas .info { flex: 1; min-width: 0; }
.resultados-cab-piezas .n {
  font-weight: 700; font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resultados-cab-piezas .c { font-size: .7rem; color: var(--tinta-3); }
.resultado.pieza .n { font-variant-numeric: tabular-nums; }

/* Panel de piezas */
.tabla-piezas { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla-piezas th { text-align: left; font-size: .68rem; text-transform: uppercase;
  color: var(--tinta-3); padding: .4rem .45rem; border-bottom: 1px solid var(--borde); }
.tabla-piezas th.cen, .tabla-piezas td.cen { text-align: center; }
.tabla-piezas td { padding: .3rem .45rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-piezas .item-n {
  width: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  font-size: .78rem;
}
.tabla-piezas input { width: 100%; padding: .35rem .4rem; min-height: 36px; font-size: 15px;
  border: 1px solid var(--borde); border-radius: 6px; text-align: right; }
.tabla-piezas .quitar { color: var(--peligro); background: none; border: 0; cursor: pointer;
  font-size: 1rem; padding: .2rem .35rem; }
.piezas-scroll { max-height: 44vh; overflow-y: auto; border: 1px solid var(--borde);
  border-radius: var(--r-sm); }
.piezas-resumen { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .8rem;
  padding: .55rem .1rem; }
.piezas-resumen b { font-variant-numeric: tabular-nums; }

/* Selector de producto del panel (sustituye al <select> nativo) */
.piezas-prod { position: relative; }
.piezas-prod-btn {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.piezas-prod-btn::after {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--tinta-3);
}
.piezas-prod-btn.elegido { font-weight: 650; color: var(--tinta); }
.piezas-prod-lista {
  margin-top: .4rem; border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  background: var(--superficie); box-shadow: var(--sombra-2);
  max-height: 42vh; overflow-y: auto; padding: .35rem;
}
.piezas-prod-filtro { margin-bottom: .35rem; position: sticky; top: 0; z-index: 1; }
.piezas-prod-item {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem;
  text-align: left; padding: .55rem .6rem; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.piezas-prod-item:hover, .piezas-prod-item:focus-visible {
  background: var(--rojo-claro); outline: none;
}
.piezas-prod-item .n {
  font-weight: 650; font-size: .86rem; grid-column: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.piezas-prod-item .c { font-size: .72rem; color: var(--tinta-3); grid-column: 1; }
.piezas-prod-item .p {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-weight: 700; font-size: .84rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.piezas-prod-vacio, .piezas-prod-sin {
  padding: .7rem .6rem; font-size: .8rem; color: var(--tinta-3); text-align: center;
}

/* Cargando */
.cargando { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: giro .7s linear infinite; }
.cargando.osc { border-color: rgba(0,0,0,.15); border-top-color: var(--rojo); }
@keyframes giro { to { transform: rotate(360deg); } }

.centro-carga { display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.6rem; color: var(--tinta-3); font-size: .84rem; }

/* Adjuntos */
.adjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.adjunto {
  border: 1px solid var(--borde); border-radius: var(--r-sm); overflow: hidden;
  background: var(--superficie-2); position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .68rem; color: var(--tinta-3); text-align: center; padding: .3rem;
}
.adjunto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.adjunto .etq { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);
  color: #fff; font-size: .62rem; padding: .15rem .25rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.adjunto .borrar { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: .75rem; z-index: 2; }
.adjunto .icono-doc { width: 30px; height: 30px; opacity: .5; }

.zona-archivo {
  border: 2px dashed var(--borde-fuerte); border-radius: var(--r); padding: 1rem .8rem;
  text-align: center; color: var(--tinta-3); font-size: .82rem; background: var(--superficie-2);
}
.zona-archivo svg { width: 26px; height: 26px; opacity: .5; margin-bottom: .3rem; }

/* Mini grafico de barras */
.grafico { display: flex; align-items: flex-end; gap: 3px; height: 76px; padding: .3rem 0; }
.grafico .barra { flex: 1; background: var(--rojo-claro); border-radius: 3px 3px 0 0; min-height: 3px;
  position: relative; }
.grafico .barra i { position: absolute; inset: auto 0 0 0; background: var(--rojo);
  border-radius: 3px 3px 0 0; }
.grafico-etq { display: flex; justify-content: space-between; font-size: .62rem; color: var(--tinta-4); }

/* Utilidades */
.txt-der { text-align: right; } .txt-cen { text-align: center; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-3); }
.chico { font-size: .78rem; }
.mini { font-size: .7rem; }
.negrita { font-weight: 700; }
.mal { color: var(--peligro); }
.bien { color: var(--ok); }
.oculto { display: none !important; }
/* El atributo hidden debe ocultar SIEMPRE. Sin esto, cualquier elemento
   con display propio (un .aviso, por ejemplo) se seguia viendo vacio. */
[hidden] { display: none !important; }
.mt { margin-top: .7rem; } .mt2 { margin-top: 1.2rem; }
.mb { margin-bottom: .7rem; }
.fila-flex { display: flex; align-items: center; gap: .5rem; }
.crece { flex: 1; }
.envuelve { flex-wrap: wrap; }

/* ---------- Hero dashboard ---------------------------------------------- */
.hero-dashboard {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1rem;
  margin-bottom: .9rem;
  color: #fff;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.25), transparent 18rem),
    radial-gradient(circle at 10% 90%, rgba(215,166,66,.26), transparent 16rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 52%, var(--rojo));
  box-shadow: var(--sombra-3);
  border: 1px solid rgba(255,255,255,.16);
}
.hero-dashboard::after {
  content: "";
  position: absolute;
  inset: 10% -8% auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.hero-dashboard h1 { margin: 0; font-size: clamp(1.35rem, 3.6vw, 2rem); letter-spacing: -.035em; }
.hero-dashboard .chico { color: rgba(255,255,255,.78); }
.hero-dashboard .hero-sello {
  position: relative;
  z-index: 1;
  flex: none;
  display: none;
  padding: .52rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------- Login ------------------------------------------------------- */
.login-pantalla {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(215,166,66,.28), transparent 24rem),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.16), transparent 20rem),
    linear-gradient(150deg, var(--rojo-osc) 0%, #4A0711 60%, #161116 100%);
}
.login-caja { width: 100%; max-width: 380px; }
.login-marca { text-align: center; color: #fff; margin-bottom: 1.3rem; }
.login-marca .logo { width: 82px; height: 82px; margin: 0 auto .7rem; border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24); box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25); }
.login-marca .logo svg { width: 44px; height: 44px; }
.login-marca h1 { font-size: 1.55rem; letter-spacing: .1em; font-weight: 800; margin: 0; }
.login-marca p { opacity: .75; font-size: .82rem; margin: .2rem 0 0; }
.login-tarjeta { background: rgba(255,255,255,.94); border-radius: var(--r-xl); padding: 1.45rem 1.15rem;
  box-shadow: var(--sombra-3), var(--brillo); border: 1px solid rgba(255,255,255,.58); backdrop-filter: blur(18px); }
.login-pie { text-align: center; color: rgba(255,255,255,.6); font-size: .72rem; margin-top: 1rem; }

/* ---------- Escritorio -------------------------------------------------- */
@media (min-width: 820px) {
  body { font-size: 15px; }
  .navbar { display: none; }
  .app { flex-direction: row; }
  .sidebar {
    display: flex; flex-direction: column; width: var(--sidebar); flex: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,250,.88)),
      radial-gradient(circle at top left, rgba(179,18,43,.1), transparent 20rem);
    border-right: 1px solid rgba(217,203,208,.8);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    box-shadow: 16px 0 46px rgba(62,8,22,.06);
  }
  .sidebar-marca {
    display: flex; align-items: center; gap: .6rem; padding: 1rem .95rem;
    font-weight: 900; letter-spacing: .08em; color: var(--rojo-osc);
    border-bottom: 1px solid var(--borde);
  }
  .sidebar-marca svg { width: 28px; height: 28px; filter: drop-shadow(0 6px 12px rgba(179,18,43,.18)); }
  .sidebar nav { padding: .6rem .55rem; display: flex; flex-direction: column; gap: 2px; }
  .sidebar nav .grupo-nav { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--tinta-4); font-weight: 700; padding: .8rem .6rem .3rem; }
  .sidebar nav a {
    display: flex; align-items: center; gap: .62rem; padding: .6rem .64rem;
    border-radius: var(--r); color: var(--tinta-2); font-size: .86rem; font-weight: 650;
    border: 1px solid transparent;
    transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .sidebar nav a svg { width: 19px; height: 19px; opacity: .7; }
  .sidebar nav a:hover { background: rgba(255,255,255,.76); border-color: var(--borde); transform: translateX(2px); }
  .sidebar nav a.activo {
    background: linear-gradient(135deg, rgba(179,18,43,.12), rgba(255,255,255,.86));
    color: var(--rojo-osc);
    border-color: rgba(179,18,43,.14);
    box-shadow: var(--sombra-1);
  }
  .sidebar nav a.activo svg { opacity: 1; }
  .sidebar nav a .cont { margin-left: auto; font-size: .7rem; background: var(--peligro);
    color: #fff; border-radius: 999px; padding: 0 .35rem; font-weight: 700; }
  .sidebar-pie { margin-top: auto; padding: .85rem; border-top: 1px solid var(--borde);
    font-size: .74rem; color: var(--tinta-3); }

  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar { border-radius: 0; }
  .contenido { padding: 1.25rem 1.45rem 2.7rem; }
  body.con-barra-fija .contenido { padding-bottom: 100px; }
  body.con-barra-fija .navbar { display: none; }

  .kpis { grid-template-columns: repeat(4, 1fr); }
  body.mostrar-costos .kpis { grid-template-columns: repeat(5, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .datos { grid-template-columns: 1fr 1fr; }
  .dato .k { width: 38%; }

  .solo-escritorio { display: block; }
  .solo-movil { display: none !important; }
  .fab { display: none; }

  .panel {
    left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -46%) scale(.98);
    width: min(680px, 94vw); max-height: 86vh; border-radius: var(--r-lg);
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
  }
  .panel.abierto { transform: translate(-50%, -50%); opacity: 1; }
  .panel-asa { display: none; }
  .barra-fija { left: var(--sidebar); }
  .mensajes { left: auto; right: 16px; width: 380px; }
  .dos-columnas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
  .hero-dashboard { padding: 1.25rem 1.35rem; margin-bottom: 1.1rem; }
  .hero-dashboard .hero-sello { display: inline-flex; }
  .lista-grid-compacta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .55rem;
  }
}

@media (min-width: 1200px) {
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   Premium refresh - capa visual integral
   ========================================================================= */
::selection { background: rgba(177,15,46,.16); color: var(--vino); }

:focus-visible {
  outline: 3px solid rgba(177,15,46,.18);
  outline-offset: 2px;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(177,15,46,.13), transparent 28rem),
    radial-gradient(circle at 92% 6%, rgba(201,151,43,.14), transparent 28rem),
    linear-gradient(135deg, var(--marfil) 0%, var(--crema) 34%, var(--fondo) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(109,7,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,7,26,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 58%);
}

.topbar {
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.2), transparent 16rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 48%, var(--rojo));
  box-shadow: 0 14px 36px rgba(58,6,16,.22);
}

.icono-top {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.22);
}
.icono-top svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }

.contenido {
  padding-top: 1rem;
}

.tarjeta,
.fila,
.kpi,
.login-tarjeta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,251,.9));
  border-color: rgba(216,198,204,.86);
  box-shadow: var(--sombra-1), var(--sombra-inset);
}

.tarjeta {
  position: relative;
}
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,151,43,.38), transparent);
  pointer-events: none;
}

.tarjeta-titulo {
  color: #2E1E04;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.28), transparent 14rem),
    linear-gradient(135deg, #B07816 0%, #D4A017 42%, #E8C04A 100%);
}
.panel-cabecera {
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.16), transparent 16rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 48%, var(--rojo));
}
table.tabla th {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,249,.94));
}

.seccion-titulo {
  color: var(--rojo-osc);
  letter-spacing: .11em;
}
.seccion-titulo .linea {
  background: linear-gradient(90deg, rgba(177,15,46,.26), transparent);
}

.kpis { gap: .75rem; }
.kpi {
  padding: .95rem 1rem;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(177,15,46,.05);
}
.kpi .etiqueta {
  color: var(--tinta-3);
  font-weight: 850;
}
.kpi .valor {
  color: var(--tinta);
  font-size: clamp(1.18rem, 2vw, 1.45rem);
}

table.tabla {
  background: rgba(255,255,255,.72);
}
table.tabla th {
  color: #6A5661;
  border-bottom-color: rgba(216,198,204,.86);
}
table.tabla td {
  border-bottom-color: rgba(234,223,227,.82);
}
table.tabla tbody tr:hover {
  background:
    linear-gradient(90deg, rgba(255,241,244,.92), rgba(255,247,229,.46));
}
table.tabla-compacta {
  letter-spacing: -.005em;
}
.listado-compacto {
  max-width: 1220px;
}

.acciones-tabla,
.acciones-fila {
  background: rgba(255,255,255,.72);
  border-color: rgba(216,198,204,.9);
  box-shadow: var(--sombra-inset), 0 6px 16px rgba(58,6,16,.05);
}
.acciones-tabla .btn-icono,
.acciones-fila .btn {
  color: var(--tinta-2);
}

.btn {
  border-color: rgba(216,198,204,.92);
  font-weight: 750;
}
.btn-primario {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 7rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 45%, var(--rojo));
  box-shadow: 0 12px 24px rgba(177,15,46,.22), var(--sombra-inset);
}
.btn-primario:hover {
  border-color: rgba(177,15,46,.95);
  box-shadow: 0 16px 34px rgba(177,15,46,.26), var(--sombra-inset);
}
.btn-suave {
  background: linear-gradient(180deg, #FFF7F9, var(--rojo-claro));
  color: var(--rojo-osc);
  border-color: rgba(177,15,46,.12);
}
.btn-ok {
  background: linear-gradient(135deg, #0F7651, var(--ok));
}
.btn-wa {
  background: linear-gradient(135deg, #128C4A, #25D366);
}

.badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}
.badge-ok { background: #EAF8F1; color: #0C6F4A; }
.badge-alerta { background: #FFF4D9; color: #8A5200; }
.badge-peligro { background: #FFF0F2; color: #A21727; }
.badge-info { background: #EAF2FF; color: #174B87; }
.badge-neutro { background: #F1EEF0; color: #625760; }

.campo, .select, .textarea {
  background: rgba(255,255,255,.92);
  border-color: rgba(216,198,204,.95);
  border-radius: var(--r);
}
.campo:hover, .select:hover, .textarea:hover {
  border-color: rgba(177,15,46,.28);
}
.grupo > label, .etiqueta {
  color: var(--tinta-2);
  font-weight: 820;
}

.buscador .campo {
  min-height: 52px;
  border-radius: 999px;
  border-color: rgba(216,198,204,.9);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,251,.92));
}
.buscador .lupa {
  left: .85rem;
  color: var(--rojo-osc);
  opacity: .72;
}
.chip {
  border-color: rgba(216,198,204,.96);
}
.chip.on {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 5rem),
    linear-gradient(135deg, var(--vino), var(--rojo));
  box-shadow: 0 10px 22px rgba(177,15,46,.18), var(--sombra-inset);
}

.panel {
  border: 1px solid rgba(255,255,255,.72);
}
.panel-cabecera {
  backdrop-filter: blur(18px);
}
.velo {
  background: rgba(29,17,23,.48);
}
.velo.abierto {
  backdrop-filter: blur(3px);
}

/* El borde del aviso ya lo pone cada tipo con su color; antes esta regla
   lo sobrescribia con un blanco translucido y los dejaba a todos iguales. */
.aviso {
  box-shadow: var(--sombra-1), var(--sombra-inset);
}
.vacio {
  border: 1px dashed rgba(216,198,204,.95);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.54);
}

.encabezado-doc,
.hero-dashboard {
  background:
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.22), transparent 17rem),
    radial-gradient(circle at 12% 86%, rgba(201,151,43,.3), transparent 18rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 50%, var(--rojo));
}

.grafico .barra {
  background: #F8DDE4;
}
.grafico .barra i {
  background: linear-gradient(180deg, var(--rojo), var(--rojo-osc));
}

.barra-fija {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 -18px 40px rgba(58,6,16,.12);
}

.navbar {
  background: rgba(255,255,255,.9);
}
.navbar a.activo {
  color: var(--rojo-osc);
}

@media (min-width: 820px) {
  .topbar {
    height: 58px;
    padding-inline: 1.25rem;
  }
  .topbar h1 {
    font-size: 1.08rem;
    font-weight: 800;
  }
  .sidebar {
    background:
      radial-gradient(circle at 0% 0%, rgba(177,15,46,.1), transparent 18rem),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,250,.92));
  }
  .sidebar-marca {
    min-height: 58px;
    background: rgba(255,255,255,.64);
    color: var(--vino);
  }
  .sidebar nav {
    gap: .18rem;
    padding: .75rem .65rem;
  }
  .sidebar nav .grupo-nav {
    color: #A18B94;
    font-weight: 850;
    letter-spacing: .12em;
  }
  .sidebar nav a {
    min-height: 40px;
  }
  .sidebar nav a:hover {
    background: rgba(255,255,255,.9);
    color: var(--rojo-osc);
  }
  .sidebar nav a.activo {
    background:
      linear-gradient(135deg, rgba(177,15,46,.13), rgba(255,255,255,.92));
    border-color: rgba(177,15,46,.18);
  }
  .contenido {
    padding: 1.35rem 1.55rem 2.8rem;
  }
  .panel {
    width: min(720px, 94vw);
    border-radius: var(--r-xl);
  }
}

@media (max-width: 819px) {
  .contenido {
    padding-inline: .75rem;
  }
  .topbar {
    min-height: calc(var(--top-alto) + var(--safe-t));
  }
  .kpis {
    gap: .55rem;
  }
  .kpi {
    padding: .78rem .82rem;
  }
  .navbar a {
    font-size: .64rem;
  }
}

/* =========================================================================
   Premium refresh v2 - cambio visual mas evidente
   ========================================================================= */
body {
  background:
    radial-gradient(circle at 0% 0%, rgba(177,15,46,.16), transparent 30rem),
    radial-gradient(circle at 100% 0%, rgba(201,151,43,.16), transparent 32rem),
    linear-gradient(135deg, #FFFDFC 0%, #FFF6F7 38%, #F3E9ED 100%);
}

.principal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 18rem);
}

.topbar {
  color: var(--vino);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,250,.9));
  border-bottom: 1px solid rgba(216,198,204,.85);
  box-shadow: 0 14px 34px rgba(58,6,16,.1);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--vino), var(--rojo), var(--oro));
}
.topbar h1 {
  color: var(--vino);
  font-weight: 900;
}
.topbar a,
.topbar button {
  color: var(--vino);
}
.topbar .marca {
  color: var(--vino);
}
.topbar-acciones {
  gap: .42rem;
}
.icono-top {
  color: var(--rojo-osc);
  background: linear-gradient(180deg, #fff, #FFF4F6);
  border-color: rgba(177,15,46,.14);
  box-shadow: 0 10px 22px rgba(58,6,16,.09), var(--sombra-inset);
}
.icono-top:hover {
  background: linear-gradient(180deg, #fff, var(--rojo-claro));
  border-color: rgba(177,15,46,.28);
}

.contenido {
  max-width: 1280px;
}

.tarjeta,
.listado-compacto {
  border-radius: 24px;
}
.tarjeta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,249,251,.94));
  border: 1px solid rgba(214,196,203,.9);
  box-shadow: 0 18px 42px rgba(58,6,16,.08), var(--sombra-inset);
}
.tarjeta-titulo {
  padding: .82rem 1rem;
  color: #2E1E04;
  font-weight: 900;
  border-bottom-color: rgba(107, 69, 8, .28);
}

.buscador {
  margin-bottom: .78rem;
}
.buscador .campo {
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(177,15,46,.13);
  box-shadow: 0 16px 34px rgba(58,6,16,.09), var(--sombra-inset);
}
.buscador .acciones-busq .btn {
  border-radius: 14px;
  background: var(--rojo-claro);
  color: var(--rojo-osc);
}

.chips {
  gap: .5rem;
  margin-bottom: .7rem;
}
.chip {
  padding: .44rem .82rem;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 7px 18px rgba(58,6,16,.06), var(--sombra-inset);
}
.chip.on {
  border-color: rgba(177,15,46,.75);
  transform: translateY(-1px);
}

.resumen-lista {
  padding-inline: .2rem;
  color: #7D6972;
}
.resumen-lista b {
  color: var(--vino);
  font-weight: 900;
}
.resumen-lista .resumen-total {
  color: var(--rojo-osc);
  font-size: 1.35rem;
}

.listado-compacto .tabla-envoltura {
  border-radius: 22px;
  overflow-x: auto;
  overflow-y: hidden;
}
table.tabla {
  border-radius: 22px;
  overflow: visible;
}
table.tabla th {
  padding-block: .62rem;
  color: #715862;
  font-size: .66rem;
  letter-spacing: .085em;
}
table.tabla td {
  padding-block: .58rem;
}
table.tabla-compacta td {
  padding-block: .52rem;
}
table.tabla tbody tr:nth-child(even) {
  background: rgba(255,249,251,.5);
}
table.tabla tbody tr:hover {
  background: linear-gradient(90deg, #FFF2F5, #FFF8EA);
}
table.tabla td a b {
  color: var(--rojo-osc);
}

.acciones-tabla {
  gap: .2rem;
  padding: .2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #FFF8FA);
}
.acciones-tabla .btn-icono {
  width: 31px;
  height: 31px;
  min-height: 31px;
}
.acciones-tabla .btn-icono:hover {
  background: var(--rojo);
  color: #fff;
}

.badge {
  border-radius: 10px;
  padding: .22rem .54rem;
}

.kpi {
  min-height: 86px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 14%, rgba(177,15,46,.09), transparent 8rem),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,249,251,.94));
}
.kpi .valor {
  font-weight: 950;
}

.btn {
  border-radius: 14px;
}
.btn-icono {
  border-radius: 14px;
}
.fab {
  width: 60px;
  height: 60px;
  right: 18px;
}

.fila {
  border-radius: 20px;
  border-color: rgba(216,198,204,.85);
}

.campo, .select, .textarea {
  border-radius: 15px;
}
.panel {
  border-radius: 28px 28px 0 0;
}

@media (min-width: 820px) {
  :root { --sidebar: 266px; }
  .app {
    background:
      linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,0) 18rem);
  }
  .sidebar {
    border-right: 0;
    box-shadow: 18px 0 45px rgba(58,6,16,.08);
  }
  .sidebar-marca {
    min-height: 64px;
    padding-inline: 1rem;
    border-bottom: 0;
    background:
      linear-gradient(135deg, rgba(58,6,16,.98), rgba(177,15,46,.92));
    color: #fff;
  }
  .sidebar-marca svg {
    color: #fff;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
  }
  .sidebar nav {
    padding: .9rem .75rem;
    gap: .24rem;
  }
  .sidebar nav a {
    border-radius: 16px;
    min-height: 43px;
    padding-inline: .78rem;
  }
  .sidebar nav a.activo {
    background: #fff;
    color: var(--rojo-osc);
    border-color: rgba(177,15,46,.18);
    box-shadow: 0 12px 28px rgba(58,6,16,.1), var(--sombra-inset);
  }
  .sidebar nav a.activo::before {
    content: "";
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rojo), var(--oro));
    margin-left: -.35rem;
  }
  .sidebar-pie {
    margin: .75rem;
    border: 1px solid rgba(216,198,204,.75);
    border-radius: 18px;
    background: rgba(255,255,255,.7);
  }
  .topbar {
    height: 64px;
    position: sticky;
  }
  .contenido {
    padding: 1.55rem 1.7rem 3rem;
  }
  .listado-compacto {
    max-width: 1240px;
  }
  .panel {
    border-radius: 28px;
  }
}

@media (max-width: 819px) {
  .topbar {
    color: #fff;
    background:
      radial-gradient(circle at 90% 8%, rgba(255,255,255,.22), transparent 12rem),
      linear-gradient(135deg, var(--vino), var(--rojo));
  }
  .topbar h1,
  .topbar a,
  .topbar button,
  .topbar .marca {
    color: #fff;
  }
  .icono-top {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.2);
  }
  .panel {
    border-radius: 28px 28px 0 0;
  }
}

/* =========================================================================
   Premium refresh v3 - listas tipo data cards y shell de alto contraste
   ========================================================================= */
.topbar {
  color: #fff;
  background:
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.22), transparent 18rem),
    linear-gradient(135deg, #2A040B 0%, #650717 48%, #B10F2E 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 42px rgba(58,6,16,.22);
}
.topbar::before {
  height: 3px;
  background: linear-gradient(90deg, var(--oro), #F3D27D, var(--rojo));
}
.topbar h1,
.topbar a,
.topbar button,
.topbar .marca {
  color: #fff;
}
.icono-top {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px rgba(0,0,0,.12);
}
.icono-top:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.34);
}

.contenido {
  padding-top: 1.65rem;
}

.buscador .campo {
  background: #fff;
  border: 0;
  box-shadow: 0 20px 55px rgba(58,6,16,.12), inset 0 0 0 1px rgba(216,198,204,.8);
}
.chips {
  padding: .08rem .08rem .5rem;
}
.chip {
  border-radius: 999px;
  background: #fff;
  border-color: rgba(216,198,204,.85);
}
.chip.on {
  background: linear-gradient(135deg, #2A040B, var(--rojo-osc) 48%, var(--rojo));
}

/* Convierte tablas de listados en filas-tarjeta sin cambiar el HTML. */
.listado-compacto {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.listado-compacto::before {
  display: none;
}
.listado-compacto .tabla-envoltura {
  overflow-x: auto;
  padding: .15rem .1rem .4rem;
}
.listado-compacto table.tabla {
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 .62rem;
  background: transparent;
}
.listado-compacto table.tabla thead th {
  position: static;
  padding: .35rem .72rem;
  background: transparent;
  border: 0;
  color: #8B7580;
}
/* El filter promueve cada fila a su propia capa: sin el, el scroll de listas
   largas pasa de ~17ms a ~47ms por frame. No sustituir por box-shadow. */
.listado-compacto table.tabla tbody tr {
  filter: drop-shadow(0 14px 24px rgba(58,6,16,.08));
}
.listado-compacto table.tabla tbody tr:hover {
  filter: drop-shadow(0 18px 30px rgba(58,6,16,.13));
}
.listado-compacto table.tabla td {
  background: rgba(255,255,255,.97);
  border-top: 1px solid rgba(216,198,204,.78);
  border-bottom: 1px solid rgba(216,198,204,.78);
  border-bottom-width: 1px;
}
.listado-compacto table.tabla td:first-child {
  border-left: 1px solid rgba(216,198,204,.78);
  border-radius: 18px 0 0 18px;
}
.listado-compacto table.tabla td:last-child {
  border-right: 1px solid rgba(216,198,204,.78);
  border-radius: 0 18px 18px 0;
}
.listado-compacto table.tabla tbody tr:hover td {
  background: linear-gradient(180deg, #fff, #FFF6F8);
  border-color: rgba(177,15,46,.2);
}
/* Al desplazar con la rueda el cursor queda quieto y el :hover recorre las
   filas, re-rasterizando la capa con filter de cada una: el frame sube de
   ~19ms a ~128ms. Mientras dura el desplazamiento se resuelve a los mismos
   valores del estado normal, asi no hay repintado. */
body.desplazando .listado-compacto table.tabla tbody tr:hover {
  filter: drop-shadow(0 14px 24px rgba(58,6,16,.08));
}
body.desplazando .listado-compacto table.tabla tbody tr:hover td {
  background: rgba(255,255,255,.97);
  border-color: rgba(216,198,204,.78);
}
.listado-compacto table.tabla tfoot td {
  background: #fff;
  border: 0;
}

.acciones-tabla {
  border-radius: 999px;
  background: #FFF8FA;
  border-color: rgba(177,15,46,.12);
}
.acciones-tabla .btn-icono {
  color: var(--vino);
}
.acciones-tabla .btn-icono:hover {
  background: linear-gradient(135deg, var(--vino), var(--rojo));
}

.badge {
  font-weight: 900;
  border: 0;
}
.badge-ok {
  background: #DFF7EC;
  color: #087047;
}
.badge-info {
  background: #E2F0FF;
  color: #075C9F;
}
.badge-alerta {
  background: #FFF0C8;
  color: #8E5600;
}
.badge-peligro {
  background: #FFE4E9;
  color: #A60E25;
}

.fila {
  border-radius: 24px;
  box-shadow: 0 16px 32px rgba(58,6,16,.09), var(--sombra-inset);
}

@media (min-width: 820px) {
  .sidebar {
    color: rgba(255,255,255,.78);
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.12), transparent 13rem),
      linear-gradient(180deg, #2A040B 0%, #4C0714 48%, #26040A 100%) !important;
    box-shadow: 24px 0 55px rgba(42,4,11,.2);
  }
  .sidebar-marca {
    background: transparent;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .sidebar nav .grupo-nav {
    color: rgba(255,255,255,.45);
  }
  .sidebar nav a {
    color: rgba(255,255,255,.76);
    border-color: transparent;
  }
  .sidebar nav a svg {
    opacity: .86;
  }
  .sidebar nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.08);
  }
  .sidebar nav a.activo {
    color: var(--vino);
    background: linear-gradient(135deg, #fff, #FFF0F4);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
  }
  .sidebar nav a.activo svg {
    color: var(--rojo);
  }
  .sidebar-pie {
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
  }
  .principal {
    background:
      radial-gradient(circle at 100% 0%, rgba(201,151,43,.12), transparent 24rem),
      linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,0) 18rem);
  }
}

@media (prefers-color-scheme: dark) {
  .listado-compacto table.tabla td {
    background: rgba(32,25,30,.98);
    border-color: rgba(72,56,64,.86);
  }
  .listado-compacto table.tabla tbody tr:hover td {
    background: rgba(177,15,46,.12);
    border-color: rgba(177,15,46,.28);
  }
  body.desplazando .listado-compacto table.tabla tbody tr:hover td {
    background: rgba(32,25,30,.98);
    border-color: rgba(72,56,64,.86);
  }
  .listado-compacto table.tabla thead th {
    color: var(--tinta-3);
  }
}

/* =========================================================================
   Premium icons - iconografia con mas presencia visual
   ========================================================================= */
svg {
  flex: none;
}
svg use {
  stroke-width: 2.25;
}

.sidebar nav a svg,
.navbar a svg {
  opacity: 1;
  color: currentColor;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar nav a svg {
  width: 31px;
  height: 31px;
}
.sidebar nav a:hover svg {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.sidebar nav a.activo svg {
  color: #fff;
  background: linear-gradient(135deg, var(--vino), var(--rojo));
  border-color: rgba(177,15,46,.22);
  box-shadow: 0 10px 18px rgba(177,15,46,.22), inset 0 1px 0 rgba(255,255,255,.2);
}

.navbar a svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  background: rgba(177,15,46,.06);
  border-color: rgba(177,15,46,.08);
}
.navbar a.activo svg {
  color: #fff;
  background: linear-gradient(135deg, var(--vino), var(--rojo));
  border-color: rgba(177,15,46,.3);
  box-shadow: 0 8px 18px rgba(177,15,46,.22);
}

.icono-top,
.btn-icono {
  overflow: hidden;
}
.icono-top svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.btn-icono svg {
  width: 17px;
  height: 17px;
}

.acciones-tabla {
  gap: .28rem;
  padding: .24rem;
}
.acciones-tabla .btn-icono {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 12px;
  background: #F7F1F4;
  border: 1px solid rgba(216,198,204,.9);
  color: var(--tinta-2);
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.acciones-tabla .btn-icono:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 10px 20px rgba(58,6,16,.16);
}
.acciones-tabla .btn-icono[title*="Ver"] {
  background: #EAF2FF;
  color: #165BA3;
  border-color: #CFE2FF;
}
.acciones-tabla .btn-icono[title*="Ver"]:hover {
  background: linear-gradient(135deg, #0D4D91, #2376D1);
}
.acciones-tabla .btn-icono[title*="Editar"] {
  background: #FFF4D9;
  color: #8A5200;
  border-color: #F2DCAB;
}
.acciones-tabla .btn-icono[title*="Editar"]:hover {
  background: linear-gradient(135deg, #9A5C00, #D6951B);
}
.acciones-tabla .btn-icono[title*="PDF"] {
  background: #FFE7EC;
  color: #A60E25;
  border-color: #F4C3CD;
}
.acciones-tabla .btn-icono[title*="PDF"]:hover {
  background: linear-gradient(135deg, #8E0B1F, #D92342);
}
.acciones-tabla .btn-icono[title*="Adjuntos"] {
  background: #F0ECFF;
  color: #5B3BB4;
  border-color: #DCD2FF;
}
.acciones-tabla .btn-icono[title*="Adjuntos"]:hover {
  background: linear-gradient(135deg, #4A2DA0, #7D5DE8);
}
.acciones-tabla .btn-icono[title*="estado"],
.acciones-tabla .btn-icono[title*="Estado"] {
  background: #EEF9F3;
  color: #0C6F4A;
  border-color: #CDEDDD;
}
.acciones-tabla .btn-icono[title*="estado"]:hover,
.acciones-tabla .btn-icono[title*="Estado"]:hover {
  background: linear-gradient(135deg, #0C6F4A, #18A06D);
}
.acciones-tabla .btn-icono[title*="Eliminar"],
.acciones-tabla .btn-eliminar,
.acciones-tabla .btn-icono.btn-eliminar {
  background: #FFE7EC !important;
  color: #A60E25 !important;
  border-color: #F4C3CD !important;
}
.acciones-tabla .btn-icono[title*="Eliminar"]:hover,
.acciones-tabla .btn-eliminar:hover,
.acciones-tabla .btn-icono.btn-eliminar:hover {
  background: linear-gradient(135deg, #8E0B1F, #D92342) !important;
  color: #fff !important;
}
.acciones-fila .btn-eliminar {
  background: #FFE7EC;
  color: #A60E25;
  border-color: #F4C3CD;
  font-weight: 750;
}
.acciones-fila .btn-eliminar:hover {
  background: linear-gradient(135deg, #8E0B1F, #D92342);
  color: #fff;
}
.acciones-tabla .btn-wa {
  background: #E6FAF0;
  color: #128C4A;
  border-color: #C5F0D9;
}
.acciones-tabla .btn-wa:hover {
  background: linear-gradient(135deg, #128C4A, #25D366);
  color: #fff;
}

.btn svg,
.chip svg,
.pastilla svg,
.aviso svg,
.fila svg {
  opacity: 1;
}
.vacio svg {
  opacity: .46;
  color: var(--rojo-osc);
  filter: drop-shadow(0 10px 18px rgba(177,15,46,.16));
}
.login-marca .logo svg,
.sidebar-marca svg {
  opacity: 1;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.24));
}

@media (prefers-color-scheme: dark) {
  .acciones-tabla .btn-icono {
    border-color: rgba(255,255,255,.08);
  }
  .sidebar nav a svg,
  .navbar a svg {
    border-color: rgba(255,255,255,.08);
  }
  .vacio svg {
    color: var(--rosa);
  }
}

/* ---------- Impresion ---------------------------------------------------- */
@media print {
  .topbar, .navbar, .sidebar, .fab, .barra-fija, .filtros-barra, .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  table.tabla th { background: #eee !important; -webkit-print-color-adjust: exact; }
  a { color: #000; }
}

/* ---------- Modo oscuro del sistema -------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F2F2F5; --tinta-2: #C9C9D2; --tinta-3: #9A9AA6; --tinta-4: #74747F;
    --fondo: #110D10; --superficie: #1A1519; --superficie-2: #241B21;
    --superficie-3: rgba(32,25,30,.82);
    --borde: #2E2E38; --borde-fuerte: #3C3C48;
    --rojo-claro: #34151C;
    --ok-bg: #10291F; --alerta-bg: #2C2110; --peligro-bg: #2E1418; --info-bg: #14213A;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 8px rgba(0,0,0,.45);
    --sombra-3: 0 8px 28px rgba(0,0,0,.6);
    --sombra-inset: inset 0 1px 0 rgba(255,255,255,.06);
  }
  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(177,15,46,.18), transparent 28rem),
      radial-gradient(circle at 92% 6%, rgba(201,151,43,.1), transparent 28rem),
      linear-gradient(135deg, #120D10 0%, #171116 48%, #0E0B0D 100%);
  }
  body::before { opacity: .25; }
  .tarjeta,
  .fila,
  .kpi,
  .login-tarjeta,
  .acciones-tabla,
  .acciones-fila,
  .campo,
  .select,
  .textarea,
  .panel,
  .navbar,
  .barra-fija {
    background: linear-gradient(180deg, rgba(32,25,30,.96), rgba(26,21,25,.9));
    border-color: rgba(72,56,64,.9);
  }
  .resumen-detalle,
  .resumen-cobertura {
    background: rgba(201, 151, 43, .14);
    border-color: rgba(201, 151, 43, .32);
  }
  .tarjeta-titulo {
    color: #F8E2A0;
    background:
      radial-gradient(circle at 92% 18%, rgba(255,255,255,.08), transparent 14rem),
      linear-gradient(135deg, #6B4508 0%, #9A6A12 45%, #C9972B 100%);
    border-bottom-color: rgba(232, 192, 74, .22);
  }
  .tarjeta-titulo svg { color: #F8E2A0; filter: none; }
  .tarjeta-titulo .cont {
    color: #F8E2A0;
    background: rgba(0,0,0,.22);
    border-color: rgba(248, 226, 160, .2);
  }
  .panel-cabecera {
    background:
      radial-gradient(circle at 92% 12%, rgba(255,255,255,.1), transparent 16rem),
      linear-gradient(135deg, #2a040c, #6d071a 50%, #9b1229);
    color: #fff;
    border-bottom-color: rgba(0,0,0,.35);
  }
  table.tabla th {
    background: linear-gradient(180deg, rgba(36,27,33,.98), rgba(29,22,27,.96));
  }
  .tarjeta-seccion-datos,
  .tarjeta-seccion-piezas,
  .tarjeta-seccion-agregar,
  .tarjeta-seccion-original,
  .tarjeta-seccion-generar,
  .tarjeta-seccion-lista,
  .tarjeta-seccion-totales,
  .tarjeta-seccion-adjuntos,
  .tarjeta-seccion-notas {
    background: linear-gradient(180deg, rgba(32,25,30,.96), rgba(26,21,25,.9));
  }
  .tarjeta-seccion .tarjeta-titulo {
    color: #F8E2A0;
    background:
      radial-gradient(circle at 92% 18%, rgba(255,255,255,.08), transparent 14rem),
      linear-gradient(135deg, #6B4508 0%, #9A6A12 45%, #C9972B 100%);
  }
  .tarjeta-seccion-piezas .tarjeta-titulo {
    color: #F8E2A0;
    background:
      radial-gradient(circle at 92% 18%, rgba(255,255,255,.1), transparent 14rem),
      linear-gradient(135deg, #5A3A06 0%, #8A5F10 45%, #D4A017 100%);
  }
  .tarjeta-seccion-piezas .tarjeta-titulo svg { color: #F8E2A0; }
  .tarjeta-seccion-generar .tarjeta-titulo {
    color: #E8FFF2;
    background:
      radial-gradient(circle at 92% 18%, rgba(255,255,255,.1), transparent 14rem),
      linear-gradient(135deg, #083F2A 0%, #0F6B45 48%, #148A56 100%);
  }
  .tarjeta-seccion-generar .tarjeta-titulo svg { color: #D6F5E4; }
  .btn.btn-generar-imagen { background: #7ED6DF; color: #062830; }
  .btn.btn-generar-manual { background: #82E0AA; color: #08301C; }
  .tarjeta-seccion-lista .tarjeta-titulo {
    color: #E8D4A0;
    background:
      radial-gradient(circle at 92% 18%, rgba(255,255,255,.08), transparent 14rem),
      linear-gradient(135deg, #5A4520 0%, #7A6230 50%, #A88840 100%);
  }
  .tarjeta-seccion-lista .tarjeta-titulo svg { color: #E8D4A0; opacity: .9; }
  .items-lista-scroll { background: rgba(20,16,19,.55); }
  .item-fila { background: rgba(26,21,25,.88); }
  .item-quitar {
    background: linear-gradient(180deg, rgba(46,20,24,.95), rgba(62,20,28,.9));
    border-color: rgba(244,120,130,.35);
    color: #FF8A96;
  }
  .item-quitar:hover { background: var(--peligro); color: #fff; }
  .item-editar {
    background: linear-gradient(180deg, rgba(52,38,12,.95), rgba(62,46,16,.9));
    border-color: rgba(214,149,27,.4);
    color: #F2DCAB;
  }
  .item-editar:hover { background: linear-gradient(135deg, #9A5C00, #D6951B); color: #fff; }
  input[type="date"].campo { color-scheme: dark; }
  input[type="date"].campo::-webkit-calendar-picker-indicator {
    background-color: rgba(201,151,43,.18);
    border-color: rgba(201,151,43,.35);
  }
  table.tabla { background: rgba(26,21,25,.74); }
  table.tabla td { border-bottom-color: rgba(72,56,64,.64); }
  table.tabla tbody tr:hover { background: rgba(177,15,46,.1); }
  .sidebar {
    background:
      radial-gradient(circle at 0% 0%, rgba(177,15,46,.16), transparent 18rem),
      linear-gradient(180deg, rgba(31,23,28,.98), rgba(22,17,21,.94)) !important;
    border-right-color: rgba(72,56,64,.85);
  }
  .sidebar-marca { background: rgba(255,255,255,.03); color: #fff; }
  .sidebar nav a:hover { background: rgba(255,255,255,.06); }
  .sidebar nav a.activo {
    background: linear-gradient(135deg, rgba(177,15,46,.26), rgba(255,255,255,.05));
    color: #fff;
  }
  .topbar {
    color: #fff;
    background:
      radial-gradient(circle at 92% 10%, rgba(255,255,255,.08), transparent 16rem),
      linear-gradient(135deg, #1A0E13, #2B111A 48%, #4B1020);
    border-bottom-color: rgba(72,56,64,.9);
  }
  .topbar h1,
  .topbar a,
  .topbar button,
  .topbar .marca {
    color: #fff;
  }
  .icono-top {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
  }
  .sidebar-marca {
    background: linear-gradient(135deg, #1A0E13, #4B1020);
  }
  .principal {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 18rem);
  }
  .buscador .campo { background: rgba(32,25,30,.96); }
  .buscador .lupa { color: var(--rosa); }
  .chip { background: rgba(32,25,30,.86); border-color: rgba(72,56,64,.9); }
  .badge { background: #2A2A33; color: var(--tinta-2); }
  .badge-ok { background: var(--ok-bg); color: #74E0B2; }
  .badge-alerta { background: var(--alerta-bg); color: #F5C56A; }
  .badge-peligro { background: var(--peligro-bg); color: #F58A99; }
  .badge-info { background: var(--info-bg); color: #8DB9F2; }
  /* En oscuro los fondos tenues ya son oscuros: lo que se aclara es el texto */
  .mensaje { background: #2A2A33; color: var(--tinta); border-color: #3A3A45; }
  .mensaje.success { color: #74E0B2; border-color: #1E4A3A; border-left-color: #35C98D; }
  .mensaje.error { color: #F58A99; border-color: #5A2028; border-left-color: #E4566B; }
  .mensaje.warning { color: #F5C56A; border-color: #55401A; border-left-color: #D89A2E; }
  .mensaje.info { color: #8DB9F2; border-color: #22406E; border-left-color: #4E86D4; }
  .vacio { background: rgba(32,25,30,.54); border-color: rgba(72,56,64,.9); }
  select.campo, .select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA6' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  }
  .tabla-piezas input { background: var(--superficie-2); color: var(--tinta); }
}

/* =========================================================================
   BARRA LATERAL EN RIEL - se despliega al acercar el cursor
   Solo aplica en escritorio; en movil sigue mandando la barra inferior.
   ========================================================================= */
@media (min-width: 820px) {
  :root {
    --riel: 76px;              /* ancho colapsado (solo iconos) */
    --riel-pad: .75rem;        /* padding lateral del <nav> */
    --riel-icono: 36px;
    /* Centra el icono dentro del riel */
    --riel-hueco: calc((var(--riel) - var(--riel-pad) * 2 - var(--riel-icono)) / 2);
  }

  /* La barra flota sobre el contenido: al expandirse no recorre la pagina */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--riel);
    z-index: 80;
    overflow-x: hidden; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.32) transparent;
    transition:
      width .26s cubic-bezier(.32,.72,0,1) .22s,
      box-shadow .26s ease .22s;
  }

  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.expandida {
    width: var(--sidebar);
    box-shadow: 30px 0 72px rgba(42,4,11,.34);
    transition-delay: .06s;    /* expande rapido, colapsa con calma */
  }

  /* El contenido reserva solo el ancho del riel */
  .principal { margin-left: var(--riel); }
  .barra-fija { left: var(--riel); }

  /* ---- Etiquetas: ocultas en riel, visibles al desplegar ---- */
  .sidebar .etq-nav {
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .16s ease, transform .22s cubic-bezier(.32,.72,0,1);
  }
  .sidebar:hover .etq-nav,
  .sidebar:focus-within .etq-nav,
  .sidebar.expandida .etq-nav {
    opacity: 1;
    transform: none;
    transition-delay: .1s;
  }

  /* ---- Marca ---- */
  .sidebar-marca {
    gap: 0;
    padding: 0 var(--riel-pad);
    min-height: 64px;
    overflow: hidden;
  }
  .sidebar-marca svg {
    flex: none;
    width: 36px; height: 36px;
    margin-inline: var(--riel-hueco);
    transition: margin .26s cubic-bezier(.32,.72,0,1);
  }
  .sidebar:hover .sidebar-marca svg,
  .sidebar:focus-within .sidebar-marca svg,
  .sidebar.expandida .sidebar-marca svg { margin-right: .6rem; }

  /* ---- Items de navegacion ---- */
  .sidebar nav { padding: .9rem var(--riel-pad); gap: .24rem; }
  .sidebar nav a {
    position: relative;
    gap: .68rem;
    /* -1px por el borde del item, para que el icono quede centrado exacto */
    padding: 0 calc(var(--riel-hueco) - 1px);
    min-height: 44px;
    overflow: hidden;
  }
  .sidebar nav a svg {
    width: var(--riel-icono); height: var(--riel-icono);
    flex: none;
    padding: 7px;
  }
  /* La barra del item activo estorba en modo riel */
  .sidebar nav a.activo::before { display: none; }
  .sidebar:hover nav a.activo::before,
  .sidebar:focus-within nav a.activo::before,
  .sidebar.expandida nav a.activo::before {
    display: block;
    position: absolute; left: 5px; top: 50%;
    width: 3px; height: 20px; margin: 0;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rojo), var(--oro));
  }
  .sidebar nav a:hover { transform: none; }

  /* Contador: punto sobre el icono en riel, insignia al desplegar */
  .sidebar nav a .cont {
    position: absolute;
    top: 8px; left: calc(var(--riel-hueco) + 11px);
    min-width: 16px; padding: 0 4px;
    font-size: .62rem; line-height: 16px;
    text-align: center;
    transition: none;
  }
  .sidebar:hover nav a .cont,
  .sidebar:focus-within nav a .cont,
  .sidebar.expandida nav a .cont {
    position: static;
    margin-left: auto;
    font-size: .7rem; line-height: 1.5;
  }

  /* ---- Separadores de grupo ---- */
  /* Colapsado: una linea fina. Desplegado: el titulo del grupo. */
  .sidebar nav .grupo-nav {
    height: 1px;
    padding: 0;
    margin: .55rem var(--riel-hueco);
    background: rgba(255,255,255,.14);
    border-radius: 1px;
    overflow: hidden;
    transition: height .2s ease, margin .2s ease, padding .2s ease, background .2s ease;
  }
  .sidebar:hover nav .grupo-nav,
  .sidebar:focus-within nav .grupo-nav,
  .sidebar.expandida nav .grupo-nav {
    height: 26px;
    padding: .55rem .6rem .2rem;
    margin: 0;
    background: transparent;
  }

  /* ---- Pie: avatar siempre visible, datos al desplegar ---- */
  .sidebar-pie {
    display: flex; align-items: center; gap: .6rem;
    margin: .75rem calc(var(--riel-pad) - .1rem);
    padding: .6rem calc(var(--riel-hueco) - .15rem);
    overflow: hidden;
    line-height: 1.35;
  }
  .avatar-usuario {
    flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--rojo), var(--oro));
    color: #fff; font-weight: 800; font-size: .8rem;
  }

  /* Quien no soporta :has() usa el ancho del riel: nada se rompe */
  .app:has(.sidebar:hover) .principal,
  .app:has(.sidebar:focus-within) .principal,
  .app:has(.sidebar.expandida) .principal { margin-left: var(--riel); }
}

/* Si el usuario pidio menos animacion, se despliega sin transiciones */
@media (min-width: 820px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .etq-nav,
  .sidebar-marca svg,
  .sidebar nav .grupo-nav { transition: none; }
}

/* ---------- Dashboard ejecutivo ----------------------------------------- */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.dashboard-hero {
  min-height: 0;
  align-items: stretch;
  padding: 1rem 1.1rem;
  margin-bottom: 0;
}
.dashboard-hero .hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dashboard-hero h1 {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.08;
}
.dashboard-hero .chico {
  margin-top: .22rem;
  font-size: .8rem;
  color: rgba(255,255,255,.82);
}
.hero-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: .65rem;
  min-width: 168px;
}
.hero-mini {
  min-width: 158px;
  padding: .55rem .75rem;
  border-radius: 16px;
  color: #fff;
  text-align: right;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-mini span {
  display: block;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .72;
  font-weight: 800;
}
.hero-mini b {
  display: block;
  margin-top: .1rem;
  font-size: 1.12rem;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.dashboard-kpis {
  margin-top: 0;
}
.dashboard-kpis .kpi,
.dashboard-maestros .kpi {
  min-height: 0;
  padding: .78rem .9rem .7rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,250,251,.94));
}
.dashboard-kpis .kpi::before,
.dashboard-maestros .kpi::before {
  display: none;
}
.dashboard-kpis .kpi .etiqueta,
.dashboard-kpis .kpi .valor,
.dashboard-kpis .kpi .nota,
.dashboard-maestros .kpi .etiqueta,
.dashboard-maestros .kpi .valor,
.dashboard-maestros .kpi .nota {
  position: relative;
  z-index: 1;
}
.dashboard-kpis .kpi .valor,
.dashboard-maestros .kpi .valor {
  font-size: clamp(1.12rem, 2.1vw, 1.48rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.dashboard-section-title {
  margin: .15rem 0 0;
  color: var(--tinta-3);
  font-size: .66rem;
  letter-spacing: .07em;
  font-weight: 700;
}
.dashboard-section-title a {
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rojo);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.dashboard-section-title a:hover {
  color: var(--rojo-osc);
}

.acciones-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
  padding: .28rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--borde);
  border-radius: 14px;
}
.acciones-dashboard .accion-rapida {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: .32rem .58rem;
  justify-content: center;
  border-radius: 10px;
  font-size: .8rem;
  box-shadow: none;
}
.acciones-dashboard .accion-rapida svg {
  width: 16px;
  height: 16px;
}

.dashboard-chart {
  border-radius: 22px;
}
.dashboard-chart .tarjeta-cuerpo {
  padding: .85rem .9rem .7rem;
}
.dashboard-chart .grafico {
  align-items: stretch;
  height: 108px;
  gap: 5px;
  padding: .15rem .05rem .35rem;
}
.dashboard-chart .grafico .barra {
  height: auto;
  min-height: 0;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(to top, var(--borde) 2px, transparent 2px);
  overflow: hidden;
}
.dashboard-chart .grafico .barra i {
  position: absolute;
  inset: auto 0 0;
  height: var(--alto, 0%);
  min-height: 0;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #D92342, #8E0B1F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.dashboard-chart .grafico .barra:not(.barra-cero) i {
  min-height: 4px;
}
.dashboard-chart .grafico-etq {
  padding-inline: .1rem;
  font-weight: 700;
}

.dashboard-vacio {
  padding: .62rem .8rem;
  font-size: .8rem;
  color: var(--tinta-3);
  text-align: center;
  background: rgba(255,255,255,.45);
  border: 1px dashed var(--borde);
  border-radius: 14px;
}

.dashboard-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  margin-top: .15rem;
}
.dashboard-columnas .lista,
.dashboard-recientes {
  gap: .5rem;
}
.dashboard-columnas .fila,
.dashboard-recientes .fila {
  padding: .7rem .82rem;
}

.dashboard-maestros .kpi {
  min-height: 0;
}

@media (min-width: 820px) {
  .dashboard-columnas {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .dashboard {
    gap: .8rem;
  }
  .dashboard-hero {
    padding: 1.15rem 1.35rem;
  }
}

@media (max-width: 819px) {
  .dashboard {
    gap: .62rem;
  }
  .dashboard-hero {
    flex-direction: column;
    min-height: auto;
    padding: .95rem 1rem;
  }
  .hero-panel {
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .hero-mini {
    text-align: left;
    width: 100%;
    min-width: 0;
  }
  .acciones-dashboard {
    padding: .22rem;
    gap: .28rem;
  }
  .acciones-dashboard .accion-rapida {
    flex: 1 1 calc(50% - .28rem);
    min-height: 34px;
  }
  .dashboard-kpis {
    gap: .5rem;
  }
  .dashboard-chart .grafico {
    height: 88px;
    gap: 3px;
  }
}

@media (prefers-color-scheme: dark) {
  .dashboard-vacio {
    background: rgba(32,25,30,.54);
    border-color: rgba(72,56,64,.9);
  }
  .acciones-dashboard {
    background: rgba(32,25,30,.54);
    border-color: rgba(72,56,64,.9);
  }
  .dashboard-kpis .kpi,
  .dashboard-maestros .kpi {
    background: var(--superficie);
  }
}

/* ---------- Cabecera premium de pagina ---------------------------------- */
.topbar {
  isolation: isolate;
  min-height: calc(68px + var(--safe-t));
  padding-inline: 1.35rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% -40%, rgba(255,255,255,.3), transparent 18rem),
    radial-gradient(circle at 18% 130%, rgba(201,151,43,.26), transparent 18rem),
    linear-gradient(125deg, #2A040B 0%, #5B0715 42%, #A70E2A 78%, #C9972B 145%);
}
.topbar::before {
  height: 4px;
  background: linear-gradient(90deg, #F1C45D, #FFF0A6, #B10F2E);
  z-index: 2;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  pointer-events: none;
}
.topbar h1 {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 950;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.topbar h1::before {
  content: "";
  width: 10px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFF1A8, var(--oro), var(--rojo));
  box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.2);
}
.topbar-acciones {
  position: relative;
  z-index: 1;
  gap: .5rem;
}
/* Acciones de cabecera con texto. .btn-suave es crema y .topbar a/button
   pinta el texto de blanco: queda un boton fantasma sobre el rojo. */
.topbar-acciones .btn,
.topbar .btn-cabecera {
  background: #fff;
  color: var(--rojo-osc);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 #fff;
  font-weight: 750;
  white-space: nowrap;
}
.topbar-acciones .btn:hover,
.topbar .btn-cabecera:hover {
  background: #FFF6F8;
  color: var(--vino);
  border-color: rgba(255,255,255,.9);
}
.topbar-acciones .btn svg,
.topbar .btn-cabecera svg {
  color: inherit;
}
.topbar .icono-top {
  width: 42px;
  height: 42px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.09));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(0,0,0,.18);
}
.topbar .icono-top:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.16));
  border-color: rgba(255,255,255,.4);
}

@media (min-width: 820px) {
  .topbar {
    height: 68px;
    padding-left: 1.55rem;
    padding-right: 1.2rem;
  }
}

@media (max-width: 819px) {
  .topbar {
    min-height: calc(60px + var(--safe-t));
    padding-inline: .9rem;
  }
  .topbar h1::before {
    height: 24px;
    width: 7px;
  }
  .topbar .icono-top {
    width: 38px;
    height: 38px;
  }
}


/* =========================================================================
   PANELES CERRADOS: inertes
   Un panel cerrado seguia siendo "position: fixed" con opacity 0 pero
   activo, formando una caja invisible en medio de la pantalla que se
   tragaba clics, rueda del raton y seleccion de texto. Tampoco se usa
   "visibility: hidden" aqui porque cortaria la animacion de cierre: el
   tabulador se resuelve con el atributo inert desde JavaScript.
   ========================================================================= */
.panel:not(.abierto) { pointer-events: none; }
.panel.abierto { pointer-events: auto; }

/* El velo ya era inerte al estar cerrado; se deja explicito por simetria */
.velo:not(.abierto) { pointer-events: none; }

/* Bloquea el scroll del fondo solo mientras hay un panel abierto.
   Se usa una clase en vez de estilo en linea para que una restauracion
   desde el cache del navegador no deje la pagina sin scroll. */
body.panel-abierto { overflow: hidden; }

/* =========================================================================
   BUSCADOR DE PRODUCTOS - confirmacion de lo agregado
   Al elegir un producto el buscador se limpia solo, asi que sin una
   confirmacion visible no queda rastro de que se agrego.
   ========================================================================= */
#ultimo-agregado {
  display: none;
  align-items: center;
  gap: .6rem;
  margin: .5rem 0 .1rem;
  padding: .55rem .7rem;
  border-radius: var(--r);
  border: 1px solid rgba(18,133,90,.28);
  background: linear-gradient(135deg, var(--ok-bg), rgba(255,255,255,.6));
  color: #0B5C3E;
}
#ultimo-agregado.visible {
  display: flex;
  animation: aparece-agregado .28s cubic-bezier(.32,.72,0,1);
}
#ultimo-agregado .marca-ok {
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok); color: #fff;
  font-size: .82rem; font-weight: 800;
}
#ultimo-agregado .detalle { flex: 1; min-width: 0; }
#ultimo-agregado .nombre {
  font-weight: 700; font-size: .87rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ultimo-agregado .meta { font-size: .72rem; opacity: .85; }
#ultimo-agregado .deshacer {
  flex: none;
  border: 1px solid rgba(18,133,90,.35);
  background: rgba(255,255,255,.7);
  color: #0B5C3E;
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .74rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
#ultimo-agregado .deshacer:hover { background: #fff; }

@keyframes aparece-agregado {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Marca en los resultados: el producto ya esta en el detalle */
.resultado.ya-agregado { background: rgba(179,18,43,.045); }
.resultado .insignia-lista {
  display: inline-block;
  margin-top: .18rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--alerta-bg);
  color: var(--alerta);
  font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}

/* La fila recien agregada parpadea para ubicarla de un vistazo */
.item-fila.recien-agregada {
  animation: destaca-fila 1.6s ease-out;
}
@keyframes destaca-fila {
  0%   { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(18,133,90,.22); }
  70%  { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(18,133,90,.10); }
  100% { border-color: var(--borde); box-shadow: var(--sombra-1); }
}

@media (prefers-reduced-motion: reduce) {
  #ultimo-agregado.visible, .item-fila.recien-agregada { animation: none; }
}

@media (prefers-color-scheme: dark) {
  #ultimo-agregado { color: #74E0B2; background: rgba(18,133,90,.14); }
  #ultimo-agregado .deshacer { background: rgba(255,255,255,.06); color: #74E0B2; }
}

/* =========================================================================
   FOCO vs ERROR: no pueden verse igual
   El foco usaba el rojo de la marca y el error el rojo de peligro. Con el
   autofocus del primer campo, cualquier envio fallido hacia parecer que el
   error estaba ahi, aunque estuviera mas abajo en el formulario.
   ========================================================================= */
.campo:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 4px rgba(215,166,66,.28), var(--sombra-1);
}

/* El error se distingue por color, grosor y fondo, no solo por el borde */
.grupo.malo .campo,
.grupo.malo .select,
.grupo.malo .textarea {
  border-color: var(--peligro);
  border-width: 2px;
  background-color: var(--peligro-bg);
}
/* Si el campo con error recibe el foco, sigue mandando el rojo de error */
.grupo.malo .campo:focus,
.grupo.malo .select:focus,
.grupo.malo .textarea:focus {
  border-color: var(--peligro);
  box-shadow: 0 0 0 4px rgba(196,33,48,.20);
}
.grupo.malo > label { color: var(--peligro); }
.grupo .error::before { content: "\26A0  "; }

@media (prefers-color-scheme: dark) {
  .campo:focus, .select:focus, .textarea:focus {
    box-shadow: 0 0 0 4px rgba(215,166,66,.22);
  }
  .grupo.malo .campo,
  .grupo.malo .select,
  .grupo.malo .textarea { background-color: rgba(196,33,48,.10); }
}

/* =========================================================================
   AUTOMATIZACION COMPRA/VENTA
   ========================================================================= */
/* Cada socio lleva un buscador, un desplegable y el detalle del documento.
   En movil, media pantalla no alcanza: se apilan. */
.rejilla-socios { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 780px) {
  .rejilla-socios { grid-template-columns: 1fr 1fr; }
}

/* Documento elegido: lo que trae dentro, sin salir de la pantalla */
.detalle-doc {
  margin: -.2rem 0 .7rem; padding: .6rem .7rem;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--superficie-2);
}
.detalle-doc-cab {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .4rem; font-size: .86rem;
}
/* Resumen del documento elegido: un vistazo con enlace a la ficha real */
.detalle-doc-cab .doc-codigo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 800; color: var(--rojo); text-decoration: none;
}
.detalle-doc-cab .doc-codigo:hover { text-decoration: underline; }

.doc-datos {
  display: grid; grid-template-columns: auto 1fr; gap: .12rem .6rem;
  margin: .5rem 0 .1rem; font-size: .78rem;
}
.doc-datos dt { color: var(--tinta-3); }
.doc-datos dd { margin: 0; font-weight: 600; text-align: right; }

.doc-productos {
  list-style: none; margin: .55rem 0 0; padding: .45rem 0 0;
  max-height: 9rem; overflow-y: auto; border-top: 1px solid var(--borde);
}
.doc-productos li {
  display: grid; grid-template-columns: 1fr auto auto; gap: .5rem;
  padding: .28rem 0; font-size: .78rem;
}
.doc-productos .prod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-productos .cant { color: var(--tinta-3); white-space: nowrap; }
.doc-productos .imp { font-weight: 600; white-space: nowrap; }
.doc-productos .sin-prod { color: var(--tinta-3); font-style: italic; }

.doc-totales {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--borde-fuerte);
  font-size: .8rem;
}
.doc-totales strong { font-size: 1rem; color: var(--rojo-osc); }
.detalle-doc .btn-bloque { margin-top: .55rem; }

/* Los dos cuadros de toma de piezas: separados a proposito, cada uno con
   su propio boton de guardar. */
.cuadro-piezas {
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg);
  padding: .8rem; margin-bottom: .9rem; background: var(--superficie-2);
}
.cuadro-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .6rem;
}
.cuadro-cabecera h3 { margin: 0; font-size: .95rem; }
.generador { align-items: end; }
.grupo-boton { display: flex; align-items: flex-end; }
.grupo-boton .btn { width: 100%; }

.tabla-piezas .campo-chico { padding: .35rem .5rem; font-size: .85rem; }
.vacio-piezas {
  padding: .9rem; text-align: center; font-size: .82rem; color: var(--tinta-3);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r);
  margin-top: .4rem;
}
.acciones-cuadro {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem;
  align-items: center;
}
.acciones-cuadro [data-guardar] { margin-left: auto; }

.zona-imagen { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.previa-imagen {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem;
  padding: .5rem; border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--superficie);
}
.previa-marco {
  width: 64px; height: 64px; flex: none; border-radius: var(--r-sm);
  overflow: hidden; background: var(--fondo);
  display: flex; align-items: center; justify-content: center;
}
.previa-marco img { max-width: 100%; max-height: 100%; object-fit: cover; }
.previa-imagen.es-pdf .previa-marco::after {
  content: "PDF"; font-weight: 700; font-size: .8rem; color: var(--tinta-3);
}
.previa-datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.previa-datos strong {
  font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.previa-imagen .btn-icono { margin-left: auto; flex: none; }

/* Varias hojas del mismo romaneo: una fila por documento elegido */
.lista-previas { display: grid; gap: .4rem; margin-bottom: .6rem; }
.lista-previas .previa-imagen { margin-bottom: 0; }
.previa-resultado { font-size: .74rem; }
.previa-resultado:empty { display: none; }
.acciones-previas {
  display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 .6rem;
}
.acciones-previas .btn { margin-left: auto; }

/* Resumen de la sincronizacion */
.tarjeta-sincronizar { border: 2px solid var(--oro); }
.resumen-sync {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .5rem; margin-bottom: .7rem;
}
.resumen-dato {
  padding: .5rem .6rem; border-radius: var(--r);
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.resumen-dato span {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-3); font-weight: 700;
}
.resumen-dato strong { font-size: 1.02rem; }
.resumen-margen { border-color: var(--oro); background: var(--oro-claro); }

.btn-grande { padding: .8rem 1rem; font-size: .95rem; }
.titulo-bloque {
  margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cuadro-piezas,
  :root:not([data-theme="light"]) .detalle-doc,
  :root:not([data-theme="light"]) .resumen-dato { background: rgba(32,25,30,.5); }
  :root:not([data-theme="light"]) .resumen-margen {
    background: rgba(201,151,43,.14); border-color: var(--oro);
  }
  :root:not([data-theme="light"]) .dato.dato-clave {
    background: rgba(201,151,43,.14);
  }
  :root:not([data-theme="light"]) .franja-cliente {
    background: rgba(201,151,43,.14);
    border-color: rgba(201,151,43,.4);
  }
  :root:not([data-theme="light"]) .previa-imagen { background: rgba(32,25,30,.7); }
  :root:not([data-theme="light"]) .zona-elegir { background: rgba(32,25,30,.5); }
  :root:not([data-theme="light"]) .zona-elegir:hover,
  :root:not([data-theme="light"]) .zona-elegir:focus-within,
  :root:not([data-theme="light"]) .zona-elegir.con-archivos,
  :root:not([data-theme="light"]) .zona-elegir.arrastrando {
    background: rgba(177,15,46,.16);
  }
}

/* Campo con un boton pegado al lado (buscar DNI / RUC) */
.campo-con-boton { display: flex; gap: .4rem; align-items: stretch; }
.campo-con-boton .campo { flex: 1; min-width: 0; }
.campo-con-boton .btn { flex: none; white-space: nowrap; }
.campo-con-boton .btn:disabled { opacity: .5; cursor: not-allowed; }
.ayuda.bien { color: var(--ok); font-weight: 600; }
.ayuda.mal { color: var(--peligro); font-weight: 600; }

/* Tipo y numero de documento: con el boton de buscar al lado, media
   pantalla deja el campo en ~100px y un RUC son 11 digitos. */
.rejilla-doc { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .rejilla-doc { grid-template-columns: 1fr 1fr; }
}

/* ---------- Panel con formulario ----------------------------------------
   El panel normal es una caja con scroll y pie pegajoso, y el contenido se
   metia por debajo del pie: la ultima linea de ayuda quedaba tapada. Aqui
   la cabecera y el pie son fijos y solo el cuerpo se desplaza. */
.panel-form {
  display: flex; flex-direction: column;
  overflow: hidden; padding-bottom: 0;
}
.panel-form .panel-asa { flex: none; }
.panel-form .panel-cabecera { flex: none; margin-bottom: 0; position: static; }
.panel-form .panel-cuerpo {
  flex: 1 1 auto; overflow-y: auto;
  padding: .85rem 0 .5rem; min-height: 0;
}
.panel-form .panel-pie {
  flex: none; position: static;
  padding: .7rem 0 calc(.7rem + var(--safe-b));
}
/* Separa visualmente los bloques del formulario */
.panel-form .bloque-campos + .bloque-campos {
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--borde);
}
.panel-form .nota-pie {
  margin-top: .8rem; font-size: .76rem; color: var(--tinta-3); line-height: 1.4;
}

/* En el panel de editar linea, los resultados no pueden ir flotando:
   el cuerpo tiene scroll y recortaria el desplegable. */
#panel-editar-item .resultados-prod {
  position: static;
  margin-top: .4rem;
  max-height: 12rem;
}

/* El formulario de gasto ya trae su tarjeta: en el panel sobra el marco. */
#panel-gasto .tarjeta {
  background: none; box-shadow: none; border: 0; margin: 0;
}
#panel-gasto .tarjeta-titulo { display: none; }
#panel-gasto .tarjeta-cuerpo { padding: 0; }

/* Un campo apagado tiene que parecerlo: antes se veia igual que uno activo
   y se intentaba escribir en el. */
.campo:disabled, .select:disabled, .textarea:disabled {
  background-color: var(--fondo); color: var(--tinta-4);
  cursor: not-allowed; opacity: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .campo:disabled,
  :root:not([data-theme="light"]) .select:disabled {
    background-color: rgba(32,25,30,.6); color: var(--tinta-4);
  }
}

/* Cuando el producto viene de una orden ya existente, el bloque de compra
   se oculta entero y la tarjeta se tine para que se note que parte de sus
   datos no se estan eligiendo aqui. */
.tarjeta-seccion.heredado .tarjeta-cuerpo { background: var(--superficie-2); }

/* ---------- Almacen ------------------------------------------------------ */
.marca-pieza { display: flex; align-items: center; flex: none; padding: .2rem; }
.check-lista { width: 20px; height: 20px; accent-color: var(--rojo); }

/* Barra al marcar piezas: resumen y venta, sin recortar el contenido.
   Borde y sombra cercana la separan de las filas blancas; las cifras van
   mas grandes y en tinta oscura para no perderse en gris lavado. */
.barra-salida {
  position: sticky; bottom: calc(var(--nav-alto, 0px) + var(--safe-b));
  z-index: 60; display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  margin-top: .8rem; padding: .85rem 1rem;
  border: 2px solid rgba(141, 13, 34, .4); border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow:
    0 1px 2px rgba(62, 8, 22, .16),
    0 8px 20px rgba(62, 8, 22, .2),
    0 22px 48px rgba(62, 8, 22, .16);
  overflow: visible;
}
.barra-salida .btn { flex: none; }
.resumen-marcadas {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .65rem;
  margin-right: auto; min-width: 0;
}
#cuenta-marcadas {
  font-weight: 800; font-size: .95rem; color: var(--tinta); white-space: nowrap;
}
.resumen-marcadas-cifras {
  display: inline-flex; flex-wrap: wrap; gap: .15rem .5rem;
  font-size: .92rem; font-weight: 650; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.resumen-marcadas-cifras span + span::before {
  content: "·"; margin-right: .5rem; color: var(--tinta-3);
}
#marcadas-unid, #marcadas-kg, #marcadas-monto {
  font-weight: 800; font-size: 1rem; color: var(--tinta);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .barra-salida { background: #23202a; }
}

/* Bloque por proveedor: el almacen se lee por quien trajo la mercaderia */
.grupo-proveedor {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); margin-bottom: .8rem; overflow: hidden;
}
.grupo-cabecera {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 3;
  cursor: pointer;
}
.grupo-cabecera:hover { background: var(--fondo); }
.grupo-titulo {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 800; font-size: .92rem; line-height: 1.2;
}
.grupo-titulo a { color: inherit; }
/* Resumen de la compra: piezas, kilos, granja, camara y su orden. Se
   separan con un punto puesto por CSS y no en la plantilla, porque cada
   dato puede faltar y quedarian puntos sueltos. */
.grupo-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem;
  font-size: .7rem; color: var(--tinta-3);
}
.grupo-sub > * + *::before {
  content: "·"; margin-right: .35rem; color: var(--tinta-4);
}
/* Se deja con el color de enlace del resto de la pantalla: es un atajo a
   la orden, no un dato mas del resumen. */
.grupo-oc {
  display: inline-flex; align-items: center; gap: .22rem; font-weight: 800;
}
.grupo-oc:hover { text-decoration: underline; }
.grupo-montos {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; flex: none;
}
.grupo-venta { font-weight: 800; font-variant-numeric: tabular-nums; }
.grupo-costo { font-size: .68rem; color: var(--tinta-3); white-space: nowrap; }
.grupo-proveedor .lista { padding: .45rem .2rem 0; }
.grupo-proveedor .fila:last-child { border-bottom: 0; }

/* La flecha dice si el bloque esta abierto: apunta abajo cerrado y arriba
   cuando ya se ven las piezas. */
.grupo-abrir {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie); color: var(--tinta-2); cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.grupo-abrir:hover { border-color: var(--borde-fuerte); }
.grupo-proveedor.abierto .grupo-abrir { transform: rotate(180deg); }

/* Lista plana por producto: mismas filas, sin el bloque del proveedor. */
.lista-almacen { gap: .55rem; }

/* Precio de compra y margen: se muestran solo si el usuario lo pide.
   No es un dato para tener a la vista con un cliente delante.

   Se esconde desde el padre y no con `display` propio: asi, al mostrarlos,
   cada elemento conserva el display que le toca (el chip sigue siendo
   inline-flex, la tarjeta sigue siendo grid) en vez de volver a inline. */
body:not(.mostrar-costos) .solo-costo { display: none !important; }

.chip.chip-venta { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.chip-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.chip-peligro { background: var(--peligro-bg); color: var(--peligro); border-color: transparent; }

/* Filtros de proveedor y de pieza, siempre a la vista */
.filtros-rapidos {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
  margin-bottom: .7rem;
}
.filtro-busca { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 13rem; min-width: 0; }
.filtro-busca.filtro-nro { flex: 0 1 8.5rem; }
.filtro-busca label {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 800; color: var(--tinta-3);
}
.campo-chico { min-height: 2rem; height: 2rem; padding: 0 .5rem; font-size: 13px; }
.interruptor-en-linea {
  display: flex; align-items: center; gap: .4rem; flex: none;
  min-height: 2.25rem; padding: 0 .2rem; font-size: .8rem;
}
.interruptor-en-linea .texto { font-weight: 600; }

/* ---------- Generar piezas (romaneo de la orden de compra) --------------- */
.pieza-cab,
.pieza-fila {
  display: grid;
  grid-template-columns: 2.4rem minmax(9rem, 1fr) minmax(9rem, 1fr) 2.75rem;
  gap: .7rem;
  align-items: center;
}
.pieza-cab {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 800; color: var(--tinta-3);
  padding-bottom: .45rem; border-bottom: 1px solid var(--borde);
}
.pieza-cab > span:nth-child(2),
.pieza-cab > span:nth-child(3) { text-align: right; }
.pieza-fila { padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.pieza-fila:last-child { border-bottom: 0; }
.pieza-orden {
  font-size: .95rem; font-weight: 800; color: var(--tinta-3); text-align: center;
}
.pieza-fila .campo {
  min-height: 2.85rem; height: 2.85rem; padding: 0 .75rem;
  font-size: 16px; text-align: right; font-weight: 650;
}
.pieza-quitar {
  width: 36px; height: 36px; font-size: 1.2rem; line-height: 1; padding: 0;
}
/* La lista puede traer 80 piezas: se desplaza sola en vez de estirar la
   pagina hasta que el boton de insertar quede a tres pantallas. */
#piezas-cuerpo { max-height: 32rem; overflow-y: auto; }

.tabla-romaneo { width: 100%; max-width: none; }
.pieza-cab > span:first-child { text-align: center; }

/* La fila que se esta pesando es la ultima: se destaca para no perderla de
   vista mientras se carga el lote. */
.pieza-fila:last-child .pieza-peso:focus {
  border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(177,15,46,.14);
}

/* `.item-quitar` trae `grid-area: act` de la grilla del detalle. Aqui no
   hay areas con nombre, asi que el boton caia en una columna implicita y
   dejaba un hueco muerto entre el peso y la equis. */
.pieza-fila .pieza-quitar { grid-area: auto; }

/* Dos cuadros anchos, uno debajo del otro en el celular. Con `rejilla-2`
   quedaban de 155 px y no entraba ni el nombre del archivo elegido. */
.rejilla-romaneo { display: grid; gap: .7rem; grid-template-columns: 1fr; }
.rejilla-romaneo-3 { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .rejilla-romaneo { grid-template-columns: 1fr 1fr; }
  .rejilla-romaneo-3 { grid-template-columns: 1fr; }
}
@media (min-width: 980px) {
  .rejilla-romaneo-3 { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}
.select-combo { position: relative; flex: 1; min-width: 0; width: 100%; z-index: 6; }
.select-combo-input { width: 100%; }
.select-nativo-oculto {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.select-combo-lista {
  position: fixed; z-index: 400;
  max-height: 16rem; overflow-y: auto;
  background: var(--superficie, #fff);
  border: 1px solid var(--borde-fuerte, var(--borde));
  border-radius: .55rem;
  box-shadow: 0 .6rem 1.4rem rgba(20, 8, 12, .18);
  padding: .25rem;
}
.select-combo-lista[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.select-combo-opcion {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  padding: .45rem .6rem; border-radius: .4rem;
  font: inherit; color: inherit;
}
.select-combo-opcion:hover,
.select-combo-opcion.marcada { background: var(--rojo-bg, #fdecee); }
.select-combo-opcion.elegida { font-weight: 700; }
.select-combo-vacio {
  padding: .55rem .65rem; color: var(--tinta-3); font-size: .85rem;
}
.select-combo-nuevo {
  margin-top: .2rem;
  border-top: 1px solid var(--borde, #e8dce0);
  font-weight: 700;
  color: var(--rojo, #B10F2E);
}
.campo-con-boton .select-combo { flex: 1; }

#zona-romaneo .cuadro-piezas { margin-bottom: 0; }
#zona-romaneo .cuadro-cabecera h3 { margin: 0; font-size: .86rem; }
#zona-romaneo .rejilla { margin-top: .75rem; }
#zona-romaneo .tarjeta-titulo { align-items: center; }

/* Stock del almacen en el buscador de productos (venta por menudeo) */
.insignia-stock {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  border-radius: 999px; font-size: .66rem; font-weight: 700;
  background: var(--ok-bg); color: var(--ok);
}
.insignia-stock.sin-stock { background: var(--peligro-bg); color: var(--peligro); }
/* Agotado se puede vender igual, asi que la fila no se pinta como
   deshabilitada: apagarla y tachar el precio decian "no se puede" y nadie
   llegaba a pulsarla. La insignia roja ya avisa de que no queda. */

/* ---------- Consolidado de pedidos --------------------------------------
   Dos niveles en una sola tabla: el bloque -el producto, o el cliente- y
   las filas que lo reparten. La sangria y el tono dicen cual es cual, sin
   repetir la cabecera ni partir el consolidado en una tabla por bloque. */
.consolidado-alcance { margin: .1rem .25rem .7rem; }
.consolidado-pie { margin: .55rem .85rem .8rem; }

table.tabla-consolidado tbody tr.fila-bloque > td {
  background: var(--superficie-2);
  border-top: 1px solid var(--borde-fuerte);
}
table.tabla-consolidado tbody tr.fila-bloque:first-child > td { border-top: 0; }
table.tabla-consolidado tbody tr.fila-hija > td {
  color: var(--tinta-2);
  border-bottom-style: dashed;
}
table.tabla-consolidado tbody tr.fila-hija > td:first-child {
  position: relative;
  padding-left: 1.75rem;
}
table.tabla-consolidado tbody tr.fila-hija > td:first-child::before {
  content: ""; position: absolute; left: .85rem; top: 50%;
  width: .5rem; height: 1px; background: var(--borde-fuerte);
}
.fila-nota {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem;
  margin-top: .2rem; font-size: .7rem; color: var(--tinta-3);
}
.fila-nota .pastilla { font-size: .66rem; padding: .08rem .42rem; }
.reparto-pct { display: block; font-size: .74rem; color: var(--tinta-3); }
table.tabla-consolidado .progreso {
  display: block; width: 3.2rem; margin: .16rem 0 0 auto;
}
.listado-compacto table.tabla-consolidado tfoot td {
  background: var(--superficie-2);
  border-top: 2px solid var(--borde-fuerte);
}
@media print {
  table.tabla-consolidado .progreso { display: none; }
}

/* Generar la compra desde los pedidos: la tabla del consolidado, pero con
   casillas. Un producto puesto en cero se apaga en vez de desaparecer: si
   se fuera de la lista no habria como volver a pedirlo sin recargar. */
table.tabla-consolidado input.campo {
  text-align: right;
  min-width: 5.5rem;
  padding: .3rem .4rem;
  min-height: 34px;
}
table.tabla-consolidado tbody tr.fila-apagada > td { opacity: .45; }
/* En pantalla tactil las casillas suben a 16px: por debajo, iOS hace zoom al
   enfocarlas, y esta pantalla se usa escribiendo cantidades en el celular. */
@media (pointer: coarse) {
  table.tabla-consolidado input.campo { font-size: 16px; min-height: 38px; }
}
table.tabla-consolidado tbody tr.fila-apagada input.campo { opacity: 1; }
.tarjeta-titulo .btn-chico { margin-left: auto; }

/* Aviso de descuadre entre la compra y los pedidos que la cubren. El .aviso
   base es una fila con el icono al lado; este necesita apilar una linea por
   producto, cada una con su boton y sus pedidos. */
.aviso.descuadre { flex-direction: column; gap: .5rem; }
.descuadre-cab { display: flex; align-items: center; gap: .45rem; }
.descuadre-cab svg { margin-top: 0; }
.aviso.descuadre p { margin: 0; opacity: .85; }
.descuadre-linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem;
  padding: .5rem .6rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.06);
}
.descuadre-linea > span:first-child { flex: 1 1 16rem; min-width: 0; }
.descuadre-acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.descuadre-acciones .btn {
  min-height: 40px; padding: .5rem .9rem; font-weight: 800;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.btn-ajustar-compra {
  background: linear-gradient(135deg, var(--rojo-osc), var(--rojo));
  border-color: rgba(109, 7, 26, .7); color: #fff;
}
.btn-ajustar-compra:hover {
  color: #fff; border-color: rgba(109, 7, 26, .9);
  box-shadow: 0 8px 16px rgba(177,15,46,.22);
}
.btn-ajustar-pedidos {
  background: linear-gradient(180deg, #FFE59A, #F0C24B);
  border-color: var(--oro); color: #5A3A00;
}
.btn-ajustar-pedidos:hover {
  color: #3D2700; border-color: #A67A16;
  box-shadow: 0 8px 16px rgba(201,151,43,.28);
}
.descuadre-pedidos { display: flex; flex-wrap: wrap; gap: .3rem; }
.descuadre-pedidos .pastilla { font-size: .68rem; padding: .1rem .45rem; }

/* Columna Cant.: es lo que se ajusta a mano y tiene que verse de un vistazo. */
table.tabla-consolidado thead th.col-cant {
  color: #6B4A08; background: #FFE8A8;
  box-shadow: inset 0 -2px 0 var(--oro);
}
table.tabla-consolidado tbody tr.fila-bloque > td.col-cant,
table.tabla-consolidado tfoot td.col-cant {
  background: #FFF4CC;
}
table.tabla-consolidado .entrada-unidades {
  font-weight: 800; border-color: var(--oro);
  background: #fffdf5;
  box-shadow: inset 0 0 0 1px rgba(201,151,43,.28);
}
.listado-compacto table.tabla-consolidado thead th.col-cant {
  background: #FFE8A8; color: #6B4A08; border-radius: 10px 10px 0 0;
}
.listado-compacto table.tabla-consolidado tbody tr.fila-bloque > td.col-cant,
.listado-compacto table.tabla-consolidado tbody tr.fila-bloque:hover > td.col-cant {
  background: #FFF4CC;
}
.listado-compacto table.tabla-consolidado tfoot td.col-cant {
  background: #FFE8A8; border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.tabla-consolidado thead th.col-cant,
  :root:not([data-theme="light"]) .listado-compacto table.tabla-consolidado thead th.col-cant {
    background: rgba(201,151,43,.28); color: #F5C56A;
  }
  :root:not([data-theme="light"]) table.tabla-consolidado tbody tr.fila-bloque > td.col-cant,
  :root:not([data-theme="light"]) table.tabla-consolidado tfoot td.col-cant,
  :root:not([data-theme="light"]) .listado-compacto table.tabla-consolidado tbody tr.fila-bloque > td.col-cant,
  :root:not([data-theme="light"]) .listado-compacto table.tabla-consolidado tbody tr.fila-bloque:hover > td.col-cant,
  :root:not([data-theme="light"]) .listado-compacto table.tabla-consolidado tfoot td.col-cant {
    background: rgba(201,151,43,.16);
  }
  :root:not([data-theme="light"]) table.tabla-consolidado .entrada-unidades {
    background: rgba(32,25,30,.9); border-color: var(--oro);
  }
}

/* Ajustar los pedidos: recortar lo que esta compra le cubre a cada uno y
   dejar el resto pendiente. La fila recortada se marca para que no pase
   inadvertido que ese pedido queda a medias. */
.hija-recorte {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
  border-radius: 999px; font-size: .66rem;
  background: var(--alerta-bg); color: #7A4700;
}
table.tabla-consolidado tbody tr.hija-recortada > td:first-child {
  border-left: 2px solid var(--alerta);
}

/* El panel de ajuste es una hoja de reparto, no un formulario suelto: se le
   da ancho propio -con seis columnas en 680px el codigo del pedido salia
   partido en tres lineas- y cada casilla dice en que unidad esta, que era lo
   que obligaba a subir la vista a la cabecera en cada fila. */
@media (min-width: 820px) {
  .panel-ajuste { width: min(940px, 96vw); }
  .panel-ajuste .ajuste-tabla { max-height: 42vh; overflow-y: auto; }
}
.panel-ajuste .ajuste-trae {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  padding: .5rem .65rem; margin-bottom: .5rem;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--oro-claro), var(--superficie-2));
}
.panel-ajuste .ajuste-trae-que {
  display: flex; flex-direction: column; margin-right: auto; min-width: 0;
}
.panel-ajuste .ajuste-trae-que b { font-size: .95rem; line-height: 1.2; }
.panel-ajuste .pastilla-cifra {
  background: var(--superficie); border-color: var(--oro);
  font-variant-numeric: tabular-nums; gap: .18rem;
}
.panel-ajuste .pastilla-cifra b { font-size: .82rem; color: var(--tinta); }
.panel-ajuste #ajuste-repartir { white-space: nowrap; }
.panel-ajuste .ajuste-ayuda { margin: 0 .15rem .6rem; }

/* Columnas: la casilla de atender no necesita ancho de nombre -lo heredaba
   de la tabla de atras- y el codigo del pedido nunca se parte. */
table.tabla-ajuste td:first-child,
table.tabla-ajuste th:first-child { width: 5.2rem; }
table.tabla-ajuste td.ajuste-col-pedido { width: auto; min-width: 10rem; }
table.tabla-ajuste td.ajuste-col-pedido b.mono {
  font-size: .8rem; white-space: nowrap;
}
table.tabla-ajuste .fila-nota { margin-top: .1rem; }
table.tabla-ajuste td:last-child,
table.tabla-ajuste th:last-child { min-width: 6.4rem; white-space: nowrap; }
table.tabla-ajuste .reparto-pct { font-size: .68rem; }
table.tabla-ajuste .reparto-pct.mal { color: var(--peligro); }

table.tabla-ajuste .campo-sufijo {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: .28rem;
}
table.tabla-ajuste .campo-sufijo i {
  font-style: normal; font-size: .64rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3);
}
table.tabla-ajuste input.campo {
  text-align: right; padding: .3rem .4rem; min-height: 34px;
}
table.tabla-ajuste .ajuste-kilos { min-width: 5.4rem; }
table.tabla-ajuste .ajuste-unidades { min-width: 4.2rem; }
table.tabla-ajuste tbody tr.fila-apagada > td { opacity: .5; }
table.tabla-ajuste tbody tr.fila-apagada input.campo { opacity: 1; }
/* Sombra y no borde: un borde de verdad corre la fila entera medio pixel
   cada vez que el reparto cambia. */
table.tabla-ajuste tbody tr.fila-recortada > td:first-child {
  box-shadow: inset 3px 0 0 var(--alerta);
}

.panel-ajuste .ajuste-cierre {
  margin-top: .7rem; padding: .55rem .7rem .1rem;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--superficie-2);
}
.panel-ajuste .ajuste-cierre .progreso { margin: .1rem 0 .5rem; height: 8px; }
.panel-ajuste .progreso.parcial i { background: var(--alerta); }
.panel-ajuste .ajuste-cierre .total-fila { padding: .28rem 0; }
.panel-ajuste .ajuste-cierre .total-fila.grande {
  margin-top: .25rem; padding-top: .45rem;
}
.panel-ajuste #ajuste-aviso { margin: .6rem 0; }
.panel-ajuste .panel-pie { margin-top: .2rem; }

@media (pointer: coarse) {
  table.tabla-ajuste input.campo { font-size: 16px; min-height: 38px; }
}
/* En el celular las seis columnas no entran de ninguna forma y la tabla se
   corre de lado, como el resto de la app. Se aprietan los anchos para que ese
   recorrido sea corto y las dos casillas queden a la vista casi enseguida. */
@media (max-width: 560px) {
  table.tabla-ajuste td:first-child,
  table.tabla-ajuste th:first-child { width: 3.2rem; }
  table.tabla-ajuste th { font-size: .6rem; letter-spacing: .04em; }
  table.tabla-ajuste td,
  table.tabla-ajuste th { padding-inline: .4rem; }
  table.tabla-ajuste td.ajuste-col-pedido { min-width: 8rem; }
  table.tabla-ajuste .ajuste-kilos { min-width: 4.6rem; }
  table.tabla-ajuste .ajuste-unidades { min-width: 3.6rem; }
  table.tabla-ajuste td:last-child,
  table.tabla-ajuste th:last-child { min-width: 5rem; }
  /* El total no se parte por la mitad: la cifra baja entera a su renglon. */
  .panel-ajuste .ajuste-cierre .total-fila { flex-wrap: wrap; }
  .panel-ajuste .ajuste-cierre .total-fila .v { flex: 1 0 100%; text-align: right; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-ajuste .ajuste-trae {
    background: linear-gradient(135deg, rgba(201,151,43,.16), var(--superficie-2));
  }
  :root:not([data-theme="light"]) .panel-ajuste .pastilla-cifra {
    background: rgba(32,25,30,.9);
  }
  /* La franja de las filas pares venia en claro y en el panel oscuro salia
     una banda blanca con el nombre del cliente encima. */
  :root:not([data-theme="light"]) .panel-ajuste table.tabla tbody tr:nth-child(even) {
    background: rgba(255,255,255,.035);
  }
  :root:not([data-theme="light"]) .panel-ajuste table.tabla tbody tr:hover {
    background: rgba(177,15,46,.14);
  }
  /* Los avisos traen su color de texto pensado para fondo claro. */
  :root:not([data-theme="light"]) .panel-ajuste .aviso-ok {
    color: #7FD9B4; border-color: rgba(18,133,90,.5);
  }
  :root:not([data-theme="light"]) .panel-ajuste .aviso-alerta {
    color: #F0C078; border-color: rgba(178,106,0,.5);
  }
  /* Lo mismo para el aviso de compra corta: el marron sobre fondo oscuro
     no se lee, y este aviso esta justo para que se lea. */
  :root:not([data-theme="light"]) .aviso-recibir {
    color: #F0C078; border-color: rgba(178,106,0,.5);
  }
  :root:not([data-theme="light"]) .panel-ajuste .aviso-peligro {
    color: #F09AA4; border-color: rgba(196,33,48,.5);
  }
  :root:not([data-theme="light"]) .panel-ajuste .aviso-info {
    color: #9CC2F0; border-color: rgba(29,78,137,.55);
  }
}