/* Panel de la integración — sistema de diseño de La Electrónica (v2, 2026-10).
   Tokens copiados de tokens/colors.css, typography.css y spacing.css del sistema; fuentes Inter
   (OFL, fuentes/). Fondo blanco, líneas de 1 px en gris 200 en vez de sombras, azul solo en
   acciones; verde y rojo solo en estados y mensajes. */

@font-face { font-family: "Inter"; src: url("fuentes/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fuentes/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fuentes/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fuentes/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fuentes/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --le-azul: #0057B8; --le-azul-700: #00468F; --le-azul-100: #E6EEF8; --le-azul-050: #F3F7FC;
  --le-gris: #647573; --le-gris-300: #C5CDCC; --le-gris-200: #DEE3E2; --le-gris-100: #EEF1F1; --le-gris-050: #F7F8F8;
  --le-negro: #000000; --le-blanco: #FFFFFF; --le-oferta: #12A03B; --le-agotado: #E00000;
  /* Estados: tintes de los avisos del sistema (le-alert--ok / --error), texto oscurecido para 4.5:1 */
  --ok-fondo: #F0F9F2; --ok-borde: #CBEBD3; --ok-texto: #0B6B27;
  --error-fondo: #FFF2F2; --error-borde: #FFD1D1; --error-texto: #B00000;
  --text: var(--le-negro); --text-muted: #56625F; --border: var(--le-gris-200); --border-strong: var(--le-gris-300);
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --focus-ring: 0 0 0 3px rgba(0, 87, 184, 0.28);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --gutter: 40px; --control-h: 44px;
  --alto-menu: 48px; /* pestañas fijas de escritorio; en móvil no hay */
}
@media (max-width: 749px) { :root { --gutter: 16px; --alto-menu: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--le-blanco); color: var(--text);
  font: 400 15px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--le-azul); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--le-azul-100); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Encabezado y navegación ---------- */
/* Logo de El Grupo Electrónico (isotipos de LE y LI): su guía pide no usarlo a menos de 64 px. */
.barra { background: var(--le-blanco); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 12px var(--gutter); }
.marca { display: flex; align-items: center; gap: 16px; color: var(--text); min-width: 0; }
.marca:hover { text-decoration: none; }
.marca__logo { width: 64px; height: 64px; flex: none; }
.marca__titulo { font: 700 18px/1.25 var(--font-sans); letter-spacing: -0.01em; }
.marca__titulo small { display: block; margin-top: 2px; font: 400 13px/1.3 var(--font-sans); letter-spacing: 0; color: var(--text-muted); }
.usuario { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.usuario #quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-icono] { display: inline-flex; flex: none; }
[data-icono] svg { width: 20px; height: 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Escritorio: pestañas fijas arriba al bajar */
.menu { position: sticky; top: 0; z-index: 20; display: flex; gap: 28px; padding: 0 max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); background: var(--le-blanco); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu button {
  flex: none; height: 48px; padding: 0; gap: 8px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font: 500 14px/1 var(--font-sans); color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.menu button svg { width: 18px; height: 18px; }
.menu button:hover, .menu button:active { color: var(--text); background: none; border-color: transparent; transform: none; }
.menu button[aria-current="page"], .menu button[aria-current="page"]:hover { color: var(--text); font-weight: 600; border-bottom-color: var(--le-azul); }

/* Móvil: barra inferior con íconos; lo que no cabe va en "Más" */
.menu-movil { display: none; }
.hoja[hidden] { display: none; }
@media (max-width: 749px) {
  .barra__fila { padding: 12px var(--gutter); }
  .marca { gap: 12px; }
  .marca__titulo { font-size: 16px; }
  .usuario #quien { display: none; }
  .menu { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .menu-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--le-blanco); border-top: 1px solid var(--border);
  }
  .menu-movil button {
    height: 56px; padding: 0 2px; flex-direction: column; gap: 4px; background: none; border: 0; border-radius: var(--radius-md);
    font: 500 11px/1.1 var(--font-sans); color: var(--text-muted); white-space: nowrap;
  }
  .menu-movil button svg { width: 24px; height: 24px; stroke-width: 1.75; }
  .menu-movil button:hover, .menu-movil button:active { background: none; color: var(--text); border: 0; }
  .menu-movil button[aria-current="page"] { color: var(--le-azul); font-weight: 600; }
  .hoja { position: fixed; inset: 0; z-index: 40; }
  .hoja__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
  .hoja__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--le-blanco); border-radius: 20px 20px 0 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); }
  .hoja__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .hoja__cabeza h2 { margin: 0; font-size: 18px; }
  .hoja__lista { display: grid; }
  .hoja__lista button { justify-content: flex-start; height: 56px; gap: 14px; padding: 0 8px; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--text); font: 500 16px/1 var(--font-sans); }
  .hoja__lista button:hover { background: var(--le-azul-050); }
  .hoja__lista button svg { width: 22px; height: 22px; color: var(--le-azul); }
}
button.icono { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); background: none; border: 0; color: var(--text); }
button.icono:hover { background: var(--le-gris-100); }
button.icono svg { width: 22px; height: 22px; }

/* ---------- Contenido ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 28px var(--gutter) 64px; }
@media (max-width: 749px) { main { padding-top: 20px; padding-bottom: 48px; } }
h1 { margin: 0; font: 700 30px/1.2 var(--font-display); letter-spacing: -0.02em; }
h2 { margin: 40px 0 12px; font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
h3 { margin: 0; font: 600 17px/1.33 var(--font-sans); }
@media (max-width: 749px) { h1 { font-size: 24px; } h2 { font-size: 18px; margin-top: 32px; } }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.encabezado > div:first-child { min-width: 0; }
.intro { margin: 6px 0 0; max-width: 720px; color: var(--text-muted); font-size: 14px; }
.nota { color: var(--text-muted); font-size: 13px; max-width: 720px; }
.cargando { color: var(--text-muted); padding: 24px 0; }
.mono { font-family: var(--font-mono); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Controles ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label { display: inline-flex; flex-direction: column; gap: 6px; font: 500 13px/1.3 var(--font-sans); color: var(--text); }
label.check { flex-direction: row; align-items: center; gap: 8px; height: var(--control-h); font-weight: 400; font-size: 14px; }
input, select {
  height: var(--control-h); padding: 0 14px; font: 400 15px/1.2 var(--font-sans); color: var(--text);
  background: var(--le-blanco); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
input::placeholder { color: var(--le-gris); }
input:hover, select:hover { border-color: var(--le-gris); }
input:focus, select:focus { outline: none; border-color: var(--le-azul); box-shadow: var(--focus-ring); }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--le-azul); }
select { padding-right: 32px; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 20px;
  font: 600 14px/1 var(--font-sans); border-radius: var(--radius-md); border: 1px solid var(--le-azul);
  background: var(--le-azul); color: var(--le-blanco); cursor: pointer; white-space: nowrap;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 120ms var(--ease);
}
button svg { width: 20px; height: 20px; flex: none; }
button:hover { background: var(--le-azul-700); border-color: var(--le-azul-700); }
button:active { transform: scale(0.98); }
button.secundario { background: var(--le-blanco); color: var(--le-azul); }
button.secundario:hover { background: var(--le-azul-100); border-color: var(--le-azul); }
button.fantasma { background: transparent; color: var(--text); border-color: var(--border-strong); }
button.fantasma:hover { border-color: var(--text); background: transparent; }
button.enlace { height: auto; padding: 0; border: 0; background: none; color: var(--le-azul); font-weight: 500; }
button.enlace:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }
button.chico { height: 36px; padding: 0 14px; font-size: 13px; }
button:disabled { background: var(--le-gris-100); color: var(--le-gris); border-color: transparent; cursor: not-allowed; transform: none; }
.busqueda { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.busqueda input { flex: 1 1 200px; min-width: 0; }
.busqueda input[type="checkbox"] { flex: none; }
@media (max-width: 749px) {
  .filtros, .busqueda { width: 100%; }
  .filtros label:not(.check) { flex: 1 1 140px; }
  .filtros select, .filtros input:not([type="checkbox"]) { width: 100%; }
}

/* ---------- Superficies ---------- */
.caja { background: var(--le-blanco); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.caja > .encabezado { margin-bottom: 12px; }
.vacio { margin: 0; padding: 28px 20px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.formulario { display: grid; gap: 16px; max-width: 560px; }
.formulario h2 { margin: 0; }
.formulario label { width: 100%; }
.formulario input, .formulario select { width: 100%; }
.formulario label.check { width: auto; }
.formulario input[type="checkbox"] { width: 18px; }

/* ---------- Resumen del día ---------- */
.tiendas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
@media (max-width: 749px) { .tiendas { grid-template-columns: 1fr; } }
.tienda { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: grid; gap: 16px; }
.tienda__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tienda__codigo { font: 600 12px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--le-azul); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.kpi { margin: 0; padding: 14px; background: var(--le-gris-050); border-radius: var(--radius-md); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; }
.kpi dt { font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.kpi dd { margin: 0; font: 700 28px/1.1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi.alerta { background: var(--error-fondo); }
.kpi.alerta dd, .kpi.alerta dt { color: var(--error-texto); }
.kpi.atencion { background: var(--le-azul-050); }
.kpi.atencion dd { color: var(--le-azul-700); }
.kpis--secundarios .kpi { background: transparent; border: 1px solid var(--border); padding: 12px 14px; }
.kpis--secundarios .kpi dd { font-size: 20px; }
@media (max-width: 420px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi dd { font-size: 24px; } }
.grupo-titulo { margin: 0 0 -6px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.leyenda { display: grid; gap: 6px; margin: 24px 0 0; padding: 16px 20px; background: var(--le-gris-050); border-radius: var(--radius-lg); font-size: 13px; color: var(--text-muted); }
.leyenda strong { color: var(--text); font-weight: 600; }

/* ---------- Tablas (en móvil cada fila es una tarjeta) ---------- */
.envoltura { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; padding: 12px 14px; font: 600 12px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--le-gris-050); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tr.clic { cursor: pointer; transition: background 120ms var(--ease); }
.tabla tr.clic:hover td { background: var(--le-azul-050); }
@media (max-width: 749px) {
  .envoltura { border: 0; border-radius: 0; overflow: visible; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px 0; margin-bottom: 10px; }
  .tabla td { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 12px; padding: 6px 14px; border: 0; }
  .tabla td::before { content: attr(data-label); font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-muted); padding-top: 2px; }
  .tabla td[data-label=""] { grid-template-columns: 1fr; }
  .tabla td[data-label=""]::before { display: none; }
  .tabla td:empty { display: none; }
  .tabla td > * { justify-self: start; }
  .tabla td.m-ocultar { display: none; }
  .tabla td.m-titulo { grid-template-columns: 1fr; font-size: 16px; padding-top: 8px; padding-bottom: 4px; }
  .tabla td.m-titulo::before { display: none; }
  .tabla td { padding: 4px 14px; font-size: 14px; }
}

/* ---------- Estados, tareas y mensajes ---------- */
.estado { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font: 600 12px/1 var(--font-sans); white-space: nowrap; background: var(--le-gris-100); color: #3E4948; }
.estado.sincronizada, .estado.procesado, .estado.ok { background: var(--ok-fondo); color: var(--ok-texto); }
.estado.error { background: var(--error-fondo); color: var(--error-texto); }
.estado.reintentar, .estado.pendiente, .estado.recibido, .estado.sim { background: var(--le-azul-100); color: var(--le-azul-700); }
.tareas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tareas li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; line-height: 1.3; background: var(--le-azul-050); color: var(--le-azul-700); border: 1px solid var(--le-azul-100); }
.tareas li.error { background: var(--error-fondo); color: var(--error-texto); border-color: var(--error-borde); }
.mensaje { display: block; padding: 12px 16px; margin: 12px 0; border-radius: var(--radius-md); border: 1px solid var(--le-azul-100); background: var(--le-azul-050); font-size: 14px; }
.mensaje.error { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error-texto); }
.mensaje.ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
#p-estado .mensaje, #a-estado .mensaje { margin: 0; }

/* ---------- Detalle de una orden ---------- */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos dd button { display: flex; margin-top: 10px; }

/* ---------- Órdenes: buscador, filtros y listado ---------- */
.buscador { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.buscador__campo { position: relative; flex: 1 1 320px; min-width: 0; display: block; }
.buscador__campo input { width: 100%; height: 48px; padding-left: 44px; border-radius: var(--radius-full); background: var(--le-gris-050); border-color: var(--le-gris-200); font-size: 16px; }
.buscador__campo input:focus { background: var(--le-blanco); }
.buscador__icono { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--le-gris); pointer-events: none; }
.buscador > button { height: 48px; }
.contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--le-azul); color: var(--le-blanco); font-size: 12px; }
@media (max-width: 749px) {
  .buscador > button[type="submit"] { flex: 1; }
  .buscador > button.fantasma { flex: 1; }
}
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; height: 36px; padding: 0 14px; border-radius: var(--radius-full); background: var(--le-blanco); color: var(--text);
  border: 1px solid var(--border-strong); font: 500 14px/1 var(--font-sans);
}
.chips button:hover { background: var(--le-blanco); border-color: var(--text); }
.chips button[aria-pressed="true"] { background: var(--le-azul-100); border-color: var(--le-azul); color: var(--le-azul-700); }
.avanzada h2 { margin: 0 0 16px; font-size: 18px; }
.avanzada__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.avanzada__grilla label, .avanzada__grilla input, .avanzada__grilla select { width: 100%; }
.activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); }
.activos button { height: 30px; padding: 0 6px 0 12px; gap: 4px; border-radius: var(--radius-full); background: var(--le-azul-050); border: 1px solid var(--le-azul-100); color: var(--le-azul-700); font: 500 13px/1 var(--font-sans); }
.activos button:hover { background: var(--le-azul-100); border-color: var(--le-azul-100); }
.activos button svg { width: 16px; height: 16px; }
.activos button.enlace { background: none; border: 0; padding: 0; }

.lista-ordenes { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lista-ordenes__cabeza, .orden-item {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) 128px minmax(160px, 2fr) 120px 110px 20px; align-items: center; gap: 16px; padding: 12px 16px;
}
.lista-ordenes__cabeza { position: sticky; top: calc(var(--alto-menu) + var(--alto-herr, 0px)); z-index: 5; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--le-gris-050); border-bottom: 1px solid var(--border); font: 600 12px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.orden-item { color: var(--text); border-bottom: 1px solid var(--border); transition: background 120ms var(--ease); }
.orden-item:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.orden-item:hover { background: var(--le-azul-050); text-decoration: none; }
.orden-item__num { display: grid; gap: 2px; min-width: 0; }
.orden-item__num strong { font-size: 15px; }
.orden-item__cliente { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orden-item__tareas { min-width: 0; font-size: 13px; color: var(--text-muted); }
.orden-item__so, .orden-item__fecha { font-size: 13px; font-variant-numeric: tabular-nums; }
.orden-item__ir { color: var(--le-gris); }
.orden-item__ir svg { width: 18px; height: 18px; }
@container principal (max-width: 760px) {
  .lista-ordenes { border: 0; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
  .lista-ordenes__cabeza { display: none; }
  .orden-item {
    grid-template-columns: 1fr auto 20px; grid-template-areas: "num estado ir" "tareas tareas ir" "meta meta ir";
    gap: 8px 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  .orden-item:last-child { border-bottom: 1px solid var(--border); }
  .orden-item__num { grid-area: num; }
  .orden-item__estado { grid-area: estado; }
  .orden-item__tareas { grid-area: tareas; }
  .orden-item__tareas:empty { display: none; }
  .orden-item__so { display: none; }
  .orden-item__fecha { grid-area: meta; color: var(--text-muted); }
  .orden-item__ir { grid-area: ir; align-self: center; }
}

/* ---------- Detalle de una orden ---------- */
.detalle__volver { margin-bottom: 16px; gap: 6px; }
.detalle__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.detalle__titulo h1 { margin: 0; }

/* ---------- Página con panel lateral de filtros (Órdenes, Productos, Marcas) ---------- */
.con-lateral { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
.con-lateral__principal { min-width: 0; container: principal / inline-size; }
.lateral { position: sticky; top: calc(var(--alto-menu) + 16px); max-height: calc(100vh - var(--alto-menu) - 24px); overflow-y: auto; overflow-x: hidden; padding: 4px 4px 16px 4px; scrollbar-width: thin; }
.lateral input, .lateral select { min-width: 0; max-width: 100%; }
.lateral__titulo { margin: 0 0 8px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.lateral__opciones { display: grid; gap: 2px; margin-bottom: 20px; }
.lateral__opciones button {
  justify-content: space-between; height: 34px; padding: 0 12px; background: none; border: 0; border-radius: var(--radius-md);
  color: var(--text); font: 500 14px/1 var(--font-sans);
}
.lateral__opciones button:hover { background: var(--le-gris-050); border: 0; }
.lateral__opciones button[aria-pressed="true"] { background: var(--le-azul-100); color: var(--le-azul-700); font-weight: 600; }
.lateral__form { display: grid; gap: 12px; }
.lateral label { gap: 4px; font-size: 12px; }
.lateral input:not([type="checkbox"]), .lateral select { height: 38px; padding: 0 10px; font-size: 14px; }
.lateral select { padding-right: 24px; }
.lateral label.check { font-size: 14px; }
.lateral__botones { position: sticky; bottom: -16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px 0 16px; background: var(--le-blanco); }
.lateral__form--separado { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
h2.primero { margin-top: 0; }

/* Barra de búsqueda y acciones: queda fija al bajar; el encabezado de la lista va justo debajo
   (--alto-herr lo mide app.js). */
.herramientas { position: sticky; top: var(--alto-menu); z-index: 8; margin-top: -8px; padding: 8px 0 4px; background: var(--le-blanco); }
.herramientas .buscador { margin-bottom: 8px; }
.herramientas .activos:empty, .herramientas #p-estado:empty { display: none; }
.herramientas__fila { justify-content: flex-end; align-items: center; margin-bottom: 8px; }
.herramientas__cuenta { margin-right: auto; font-size: 14px; color: var(--text-muted); }
.con-lateral__principal .envoltura:not(.envoltura--ancha) { overflow: visible; }
.con-lateral__principal .envoltura:not(.envoltura--ancha) .tabla thead th { position: sticky; top: calc(var(--alto-menu) + var(--alto-herr, 0px)); z-index: 4; }
.con-lateral__principal .tabla thead th:first-child { border-top-left-radius: var(--radius-lg); }
.con-lateral__principal .tabla thead th:last-child { border-top-right-radius: var(--radius-lg); }
.lateral__form label:not(.check), .lateral__form input:not([type="checkbox"]), .lateral__form select { width: 100%; }
.lateral__form label.check { height: auto; }
.lateral__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.lateral__form > *, .lateral__par > * { min-width: 0; }
.lateral label:not(.check) { display: flex; width: 100%; }
.lateral input:not([type="checkbox"]), .lateral select { width: 100%; }
.lateral__par input[type="date"] { padding: 0 6px; font-size: 13px; }
.solo-movil { display: none; }
@media (max-width: 999px) {
  .con-lateral { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lateral { position: static; max-height: none; overflow: visible; display: none; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .lateral.abierta, .lateral--siempre { display: block; }
  .solo-movil { display: inline-flex; }
  .chips.solo-movil { display: flex; }
  #o-rapidos, #o-lateral > .lateral__titulo:first-child { display: none; }
}

/* ---------- Productos ---------- */
.barra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 12px; background: var(--le-azul-050); border: 1px solid var(--le-azul-100); border-radius: var(--radius-lg); font-size: 14px; }
.barra-acciones #p-contador { font-weight: 600; margin-right: auto; }
.lista-productos { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lista-productos__cabeza, .producto-item {
  display: grid; grid-template-columns: 24px 48px minmax(0, 1fr) 120px 96px 64px 116px; align-items: center; gap: 14px; padding: 10px 16px;
}
.lista-productos__cabeza { position: sticky; top: calc(var(--alto-menu) + var(--alto-herr, 0px)); z-index: 5; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--le-gris-050); border-bottom: 1px solid var(--border); font: 600 12px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.producto-item { border-bottom: 1px solid var(--border); }
.producto-item:last-child { border-bottom: 0; }
.producto-item.elegido { background: var(--le-azul-050); }
.producto-item__foto { width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--le-blanco); object-fit: contain; }
.producto-item__foto--vacia { display: grid; place-items: center; color: var(--le-gris-300); }
.producto-item__foto--vacia svg { width: 22px; height: 22px; }
.producto-item__nombre { display: grid; gap: 2px; min-width: 0; }
.producto-item__nombre strong { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producto-item__nombre .mono { color: var(--text-muted); font-size: 12px; }
.producto-item__resultado { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producto-item__precio { font-variant-numeric: tabular-nums; font-weight: 600; }
.producto-item__marca, .producto-item__tienda { font-size: 13px; color: var(--text-muted); }
@container principal (max-width: 760px) {
  .lista-productos { border: 0; display: grid; gap: 10px; }
  .lista-productos__cabeza { display: none; }
  .producto-item {
    grid-template-columns: 24px 56px minmax(0, 1fr); grid-template-areas: "check foto nombre" "check foto precio" "check foto zoho";
    gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  .producto-item:last-child { border-bottom: 1px solid var(--border); }
  .producto-item > :nth-child(1) { grid-area: check; align-self: start; margin-top: 4px; }
  .producto-item__foto { grid-area: foto; width: 56px; height: 56px; align-self: start; }
  .producto-item__nombre { grid-area: nombre; }
  .producto-item__precio { grid-area: precio; }
  .producto-item__zoho { grid-area: zoho; }
  .producto-item__marca, .producto-item__tienda { display: none; }
}

/* Permisos por rol: permisos en filas, un rol por columna */
.tabla--permisos td.centro, .tabla--permisos th.centro { text-align: center; }
.tabla--permisos tr.grupo td { padding-top: 16px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--le-blanco); }
.tabla--permisos tfoot td { border-bottom: 0; border-top: 1px solid var(--border); }
@media (max-width: 749px) {
  .tabla--permisos tfoot, .tabla--permisos tfoot tr, .tabla--permisos tfoot td { display: block; width: 100%; }
  .tabla--permisos tr.grupo { border: 0; margin: 8px 0 0; padding: 0; }
  .tabla--permisos tr.grupo td::before { display: none; }
  .tabla--permisos td.centro { text-align: left; }
}