/* Nutre Natura — sistema de diseño */
:root {
  --franja: 64px;  /* alto del bloque del logo y de la barra superior: sus bordes forman una sola línea */
  --verde-50: #eef8f0;
  --verde-100: #d7efdc;
  --verde-500: #39b54a;
  --verde-600: #2e9a3f;
  --verde-700: #237a33;
  --naranja-50: #fff4ec;
  --naranja-100: #ffe3cf;
  --naranja-500: #ff8438;
  --naranja-600: #e86a1e;
  --naranja-700: #a65a00;
  --rojo-50: #fdf0ef;
  --rojo-600: #c9372c;
  --rojo-700: #a12a21;
  --azul-50: #eef4fb;
  --azul-600: #2f6db5;

  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #fafbf9;
  --border: #e3e6e0;
  --border-strong: #cfd4cb;
  --text: #1d2620;
  --text-2: #4a554d;
  --muted: #76817a;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 22, .06);
  --shadow: 0 1px 3px rgba(20, 30, 22, .07), 0 6px 20px -8px rgba(20, 30, 22, .10);
  --sidebar: 248px;

  /* Espaciado: una sola escala para todo el sistema (no usar números sueltos) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --inset: var(--s-5);        /* margen interno de tarjetas, tablas y barras */
  --inset-form: var(--s-8);   /* margen interno de los formularios */
  /* Controles */
  --control-h: 36px; --control-h-sm: 30px;
  --focus-ring: 0 0 0 3px var(--verde-100);
  /* Anchos de contenido */
  --w-form: 760px;     /* formularios simples */
  --w-content: 1120px; /* operaciones administrativas */
  --w-wide: 1360px;    /* tablas y tableros */
  /* Ventanas (modales) */
  --modal-sm: 440px; --modal-md: 640px; --modal-lg: 880px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--verde-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt { margin-top: var(--s-5); }
.mb { margin-bottom: var(--s-5); }
.hidden { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.i-sm { width: 15px; height: 15px; }

/* ---------- Layout ---------- */
/* La pantalla no se desplaza entera: el menú y el contenido se desplazan cada uno en su panel, bajo la franja */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar); flex: none; background: var(--surface);
  border-right: 1px solid var(--border); position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column; z-index: 30;
}
.sidebar .brand { display: flex; align-items: center; justify-content: center; height: var(--franja); padding: 0 24px; flex: none;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 1; background: var(--surface); transition: box-shadow .2s; }
.sidebar .brand img { width: 118px; height: auto; display: block; transition: opacity .15s; }
.sidebar .brand .brand-hojas { display: none; width: 34px; }
.sidebar .brand:hover img { opacity: .85; }
/* Menú con medida base de 8 px: opciones de 36, 16 entre secciones y el mismo aire arriba de Inicio */
.nav { --nav-alto: 36px; --nav-hueco: 16px; padding: var(--nav-hueco) 12px var(--nav-hueco); overflow-y: auto; flex: 1; }
/* Títulos de sección del mismo tamaño que las opciones: se distinguen por el peso, no por ser más chicos.
   La flecha aparece al pasar el mouse (o si está cerrada) */
.nav-section { font-size: 14px; font-weight: 650; letter-spacing: 0; color: var(--text); padding: 13px 10px 4px; }
.nav-grupo { margin-top: var(--nav-hueco); }
.nav-suelto { margin-top: var(--nav-hueco); }
/* El título de cada sección queda alineado con los íconos de sus opciones */
button.nav-section { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; margin: 0 0 2px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; font-family: var(--font); border-radius: var(--radius-sm); text-align: left; }
button.nav-section:hover { color: var(--text); background: var(--surface-2); }
button.nav-section:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--verde-100); }
button.nav-section span:first-child { flex: 1; }
.nav-section .chevron { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: 0; transition: opacity .15s; }
button.nav-section:hover .chevron, button.nav-section:focus-visible .chevron, .nav-grupo.cerrado .chevron { opacity: 1; }
.nav.animado .chevron { transition: transform .18s; }
.nav-grupo.cerrado .chevron { transform: rotate(-90deg); }
.nav-section .resumen { display: none; text-transform: none; letter-spacing: 0; }
.nav-grupo.cerrado .nav-section .resumen { display: inline-block; }
.nav-items { display: grid; grid-template-rows: 1fr; }
.nav.animado .nav-items { transition: grid-template-rows .2s ease; }
.nav-items > div { overflow: hidden; min-height: 0; }
.nav-grupo.cerrado .nav-items { grid-template-rows: 0fr; }
.nav-grupo.cerrado .nav-items a, .nav-grupo.cerrado .nav-items .disabled { visibility: hidden; }
.nav-grupo.activo > .nav-section { color: var(--text); }
/* Sistema: abajo de todo, separado del trabajo diario */
.nav-grupo-sistema { margin-top: var(--nav-hueco); padding-top: var(--nav-hueco); border-top: 1px solid var(--border); }
.nav a, .nav .disabled {
  display: flex; align-items: center; gap: 12px; height: var(--nav-alto); padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500; position: relative;
}
.nav .nav-items > div { display: flex; flex-direction: column; gap: 2px; }
/* Una opción del menú nunca se parte en dos líneas (al marcarla, la negrita ocupa un poco más) */
.nav a { white-space: nowrap; overflow: hidden; }
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--verde-50); color: var(--verde-700); font-weight: 600; }
.nav .disabled { color: #a6aea8; cursor: default; }
.nav .pill { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--naranja-50); color: var(--naranja-700); }
.sidebar-foot { padding: 10px 12px; display: flex; align-items: center; gap: 6px; flex: none;
  position: relative; z-index: 1; background: var(--surface); transition: box-shadow .2s; }
/* Sombra sutil solo cuando el menú tiene contenido por arriba o por abajo */
.sidebar.hay-arriba .brand { box-shadow: 0 8px 14px -12px rgba(20, 30, 22, .28); }
.sidebar.hay-abajo .sidebar-foot { box-shadow: 0 -8px 14px -12px rgba(20, 30, 22, .28); }
.sidebar-foot .quien { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); }
.sidebar-foot .quien:hover, .sidebar-foot .quien.active { background: var(--surface-2); text-decoration: none; }
.sidebar-foot .datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar-foot .datos strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .datos span { font-size: 11.5px; color: var(--muted); }
/* Tu cuenta: al tocarla se abre Mi cuenta y Cerrar sesión */
.menu-usuario { flex: 1; min-width: 0; display: block; }
.menu-usuario > summary.quien { cursor: pointer; font-size: 14px; line-height: 1.4; letter-spacing: 0; }
.menu-usuario[open] > summary.quien { background: var(--surface-2); }
.quien-flecha { margin-left: auto; color: var(--muted); }
.menu-usuario .menu-mas-panel { min-width: 0; width: 224px; box-shadow: 0 12px 32px -8px rgba(20, 30, 22, .28), 0 2px 6px rgba(20, 30, 22, .08); }
html.nav-angosto .menu-usuario .menu-mas-panel { width: 200px; }
.menu-usuario .menu-mas-panel .i { color: var(--muted); }
.menu-usuario .menu-mas-panel .peligro .i { color: currentColor; }
.menu-version { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.copia-version { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--verde-50); color: var(--verde-700); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--verde-100); vertical-align: middle; }
.table .avatar { width: 24px; height: 24px; font-size: 10px; margin-right: 4px; }

.main { margin-left: var(--sidebar); flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.area { flex: 1; min-height: 0; overflow-y: auto; outline: none; }
.topbar {
  height: var(--franja); background: var(--surface); flex: none;
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; transition: box-shadow .2s;
  padding: 0 28px; position: relative; z-index: 20;
}
.topbar .menu-btn { display: none; }
.global-search { position: relative; flex: 1; max-width: 460px; }
.global-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.global-search input { width: 100%; padding-left: 36px; background: var(--surface-2); }
.global-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
kbd { font-family: var(--font); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: var(--surface); }
.content { padding: var(--s-6) var(--s-8) 60px; max-width: var(--w-wide); width: 100%; }

/* ---------- Encabezado de página ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.page-header h1 { font-size: 23px; font-weight: 700; }
.page-header p { margin: 4px 0 0; color: var(--muted); }
/* Título con ruta: «Usuarios › Editar (Carlos)». La sección conserva el título (igual que en su lista);
   lo que viene después del › es secundario: más chico, sin negrita. */
.h1-ruta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.h1-ruta a { color: var(--text); font-weight: 700; text-decoration: none; transition: color .15s; }
.h1-ruta a:hover { color: var(--verde-700); }
.h1-ruta .sep { width: 15px; height: 15px; flex: none; align-self: center; fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.h1-ruta .actual { color: var(--text-2); font-size: 17px; font-weight: 500; }
.h1-ruta .detalle { color: var(--muted); font-weight: 400; }
/* Pasos intermedios (Proveedores › Natufarma › Precios a mano): links con el peso de lo secundario */
.h1-ruta a ~ a { color: var(--text-2); font-size: 17px; font-weight: 500; }
.h1-ruta a ~ a:hover { color: var(--verde-700); }
.h1-ruta .h1-extra { display: inline-flex; gap: 6px; align-self: center; margin-left: 2px; }

/* Ficha de usuario: cabecera con el perfil y la actividad como línea de tiempo */
.link-sutil { font-size: 12.5px; font-weight: 600; color: var(--verde-700); }
.actividad-reciente { align-self: start; }
.usr-parte { border-top: 1px solid var(--border); }
/* Usuarios: la tarjeta del costado (actividad o roles) termina a la misma altura que la del formulario */
.usr-grid { align-items: stretch; }
.usr-grid > aside.card { align-self: stretch; }
.usr-grid > .card { display: flex; flex-direction: column; }
.usr-grid > .card > .card-footer { margin-top: auto; }
/* Copias de seguridad */
.bk-pie { justify-content: flex-start; }
.bk-elegir { max-width: 100%; cursor: pointer; }
.bk-elegir [data-archivo-nombre] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.bk-elegir:focus-within { box-shadow: var(--focus-ring); }
/* Filtros como botones (vistas previas): sin el aspecto de botón del navegador */
button.chip { background: none; border-width: 0 0 2px; border-style: solid; border-color: transparent; font: inherit; color: var(--text-2); cursor: pointer; }
/* Importar: vista previa */
.imp-chips { justify-content: space-between; }
.imp-total { font-size: 13px; color: var(--muted); padding: 13px 0 11px; }
.imp-filtros { display: flex; gap: 0 var(--s-6); flex-wrap: wrap; }
.imp-tabla { max-height: calc(100vh - 300px); min-height: 220px; overflow: auto; }
.imp-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.imp-fila { width: 56px; }
.imp-estado { width: 1%; white-space: nowrap; }
.imp-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.imp-linea { font-size: 12px; margin-top: 2px; line-height: 1.4; }
.imp-linea.imp-error { color: var(--rojo-600); }
.imp-linea.imp-aviso { color: var(--naranja-700); }
td.imp-mal { cursor: help; font-weight: 500; }
td.imp-mal s { text-decoration-thickness: 1px; }
td.imp-aviso { background: var(--naranja-50, #fff4ea); color: var(--naranja-700); }
td.imp-error { background: var(--rojo-50); color: var(--rojo-600); }
.imp-nota { white-space: normal; }
.imp-resubir { cursor: pointer; }
.imp-resubir:focus-within { box-shadow: var(--focus-ring); }
/* Importar: inicio (2 y 2), con más aire entre filas */
.imp-inicio .cfg-fila { padding-top: 18px; padding-bottom: 18px; }
.imp-inicio .cfg-fila-txt { gap: 4px; }
.imp-inicio .card-header { padding-top: 20px; padding-bottom: 20px; }
.imp-inicio .card-header p { margin-top: 4px; line-height: 1.5; }
/* Importar: elegir columnas de la lista del proveedor (se elige sobre la muestra del archivo) */
.col-tabla { overflow-x: auto; }
.col-otra-fila { padding: 12px var(--inset); border-top: 1px solid var(--border); font-size: 13px; }
.col-otra-fila > summary { display: inline-block; list-style: none; cursor: pointer; }
.col-otra-fila > summary::-webkit-details-marker { display: none; }
.col-otra-fila-cuerpo { display: grid; gap: 8px; max-width: 640px; margin-top: 12px; }
.col-otra-fila-cuerpo label { font-weight: 600; color: var(--text); }
.col-muestra th, .col-muestra td { white-space: nowrap; }
.col-muestra thead th { background: var(--surface-2); padding-top: 10px; padding-bottom: 10px; text-transform: none; letter-spacing: 0; }
.col-sel { height: 32px; min-width: 190px; font-weight: 600; }
.col-muestra .col-num { width: 70px; color: var(--muted); font-size: 12px; }
.col-muestra .col-titulos td { font-weight: 600; background: var(--surface-2); }
.col-muestra td.col-elegida { background: var(--verde-50); }
.col-muestra td.col-precio { background: var(--naranja-50); }
.col-muestra td.col-codigo, .col-muestra td.col-ean { background: #eef3fa; }
.col-muestra th.col-elegida .col-sel { border-color: var(--verde-600); color: var(--verde-700); }
.col-muestra th.col-precio .col-sel { border-color: var(--naranja-500); color: var(--naranja-700); }
.col-muestra th.col-codigo .col-sel, .col-muestra th.col-ean .col-sel { border-color: var(--azul-600); color: var(--azul-600); }
/* Inteligencia artificial */
.ia-saber { margin: 0; padding: var(--s-4) var(--inset) var(--s-5) calc(var(--inset) + 18px); display: grid; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ia-saber strong { color: var(--text); font-weight: 600; }
.ia-funcion > .cfg-filas { border-bottom: 1px solid var(--border); }
/* Acordeón de una función con IA: cerrado muestra el título y cuántos usos están activos */
.ia-acordeon > summary { list-style: none; cursor: pointer; }
.ia-acordeon > summary::-webkit-details-marker { display: none; }
.ia-acordeon:not([open]) > summary { border-bottom: 0; }
.ia-acordeon > summary:hover h2 { color: var(--verde-700); }
.ia-acordeon > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--verde-100); }
.ia-acordeon-estado { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; }
.ia-chevron { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: -4px; transition: transform .15s; }
.ia-acordeon[open] .ia-chevron { transform: rotate(-135deg); margin-top: 4px; }
.cfg-panel .cfg-columna > .card.ia-acordeon:not([open]) { flex: none; }
.ia-sub { display: flex; align-items: center; gap: 4px; margin: var(--s-4) 0 var(--s-1); font-size: 14px; font-weight: 650; }
.ia-funcion-cuerpo { display: flex; flex-direction: column; gap: var(--s-2); padding: 0 var(--inset) var(--s-5); }
.ia-parte { display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ia-parte > summary::-webkit-details-marker { display: none; }
.ia-parte > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13.5px; }
.ia-parte > summary::before { content: "›"; color: var(--muted); font-weight: 700; transition: transform .15s; display: inline-block; }
.ia-parte[open] > summary::before { transform: rotate(90deg); }
.ia-parte > summary strong { flex: none; }
.ia-parte > summary span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); }
.ia-cuando { margin: 0; padding: 0 14px 6px 30px; font-size: 12.5px; color: var(--muted); }
.ia-texto { margin: 0; padding: 4px 14px 14px 30px; white-space: pre-wrap; font: 12.5px/1.6 var(--font); color: var(--text-2); }
.ia-propias { margin-top: var(--s-3); }
.imp-error-lista { display: flex; gap: 10px; align-items: flex-start; padding: 12px var(--inset); background: var(--naranja-50); color: var(--naranja-700);
  border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; }
.imp-error-lista .i { flex: none; margin-top: 2px; }
.imp-error-acciones { margin-top: 2px; color: var(--text-2); }
.imp-error-acciones a { font-weight: 600; }
.ia-marca { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--verde-50); color: var(--verde-700); font-size: 12px; font-weight: 600; }
.ia-motivo { display: block; margin-top: 2px; }
.ia-aviso-acciones { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
/* La ayuda: el «?» de la barra de arriba (abre la pestaña de Ayuda) y la página de cada instructivo */
.guia-btn { text-decoration: none; line-height: 1; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1.5px solid var(--verde-600);
  background: var(--verde-50); color: var(--verde-700); font: 700 14px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.guia-btn:hover { background: var(--verde-600); color: #fff; }
.guia-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.guia-btn:hover { text-decoration: none; }
.ayuda-pagina { background: var(--bg); min-height: 100vh; }
.ayuda-cab { display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ayuda-cab img { height: 34px; }
.ayuda-cab span { font-size: 15px; font-weight: 650; color: var(--text-2); padding-left: 14px; border-left: 1px solid var(--border); }
.ayuda-cuerpo { display: grid; grid-template-columns: 190px minmax(0, 900px); gap: 28px; padding: 28px; justify-content: center; align-items: start; }
/* El índice queda quieto al costado mientras se lee la hoja; si no entra en la pantalla, se desliza aparte */
.ayuda-indice { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.ayuda-indice-titulo { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 6px 10px; }
.ayuda-indice-grupo { font-size: 14px; font-weight: 650; color: var(--text); margin: 10px 0 2px 10px; }
.ayuda-indice a { padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; font-weight: 500; }
.ayuda-indice a.en-grupo { padding-left: 20px; }
.ayuda-indice a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.ayuda-indice a.on { background: var(--verde-50); color: var(--verde-700); font-weight: 600; }
.ayuda-nota { margin: 14px 10px 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.5; }
.ayuda-hoja { margin: 0; padding: 32px 40px 40px; }
/* La hoja: el nombre del módulo, una frase, y cada parte como una sección bien separada */
.ayuda-hoja .guia > h1 { font-size: 28px; font-weight: 750; margin: 0; letter-spacing: -.01em; }
/* «Preguntale a la ayuda» (solo si está prendida): la pregunta arriba de la hoja y la respuesta en un aviso */
.ayuda-ia { margin: 20px 0 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.ayuda-ia > form { display: grid; gap: 6px; padding: 16px 18px 14px; }
.ayuda-ia-cab { display: flex; align-items: center; gap: 8px; }
.ayuda-ia-cab label { font-size: 15px; font-weight: 650; color: var(--text); }
/* Que es pago se ve antes de preguntar: la etiqueta arriba a la derecha y el aviso debajo del casillero */
.ayuda-ia-pago { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: var(--naranja-50); color: var(--naranja-700); font-size: 12.5px; font-weight: 650; }
.ayuda-ia-costo { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--naranja-100, #fde3cc);
  border-radius: var(--radius-sm); background: var(--naranja-50); color: var(--naranja-700); }
.ayuda-ia-costo .i { flex: none; margin-top: 1px; }
.ayuda-ia-costo p { margin: 0; font-size: 13px; line-height: 1.55; }
.ayuda-ia-costo strong { font-weight: 700; }
.ayuda-ia-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ayuda-ia-bajada { margin: 0; font-size: 13.5px; color: var(--text-2); }
.ayuda-ia-fila { display: flex; gap: 8px; margin-top: 4px; }
.ayuda-ia-fila .input { flex: 1; min-width: 0; background: var(--surface); }
/* La respuesta: en blanco, con una línea verde a la izquierda (naranja si la ayuda no lo explica o hubo un problema) */
.ayuda-ia-respuesta { display: grid; gap: 10px; margin: 0 18px 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--verde-600); border-radius: var(--radius-sm); }
.ayuda-ia-respuesta.ayuda-ia-aviso { border-left-color: var(--naranja-500); }
.ayuda-ia-respuesta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 78ch; }
.ayuda-ia-respuesta .guia-pasos li { color: var(--text); }
.ayuda-ia-respuesta .ayuda-ia-pregunta { font-size: 13px; color: var(--muted); }
.ayuda-ia-respuesta .ayuda-ia-titulo { font-weight: 650; color: var(--naranja-700); }
.ayuda-ia-respuesta .ayuda-ia-ver { font-size: 13.5px; color: var(--text-2); }
.ayuda-ia-respuesta .ayuda-ia-nota { font-size: 12px; color: var(--muted); }
.ayuda-ia-guardada { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.ayuda-ia-guardada form { flex-shrink: 0; }
.guia-contenido > p:first-child, .guia-bajada { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 70ch; }
.guia-contenido section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.guia-contenido h2 { font-size: 20px; font-weight: 700; margin: 0; color: var(--text); }
.guia-contenido h3 { font-size: 15.5px; font-weight: 650; margin: 14px 0 0; color: var(--text); }
.guia-contenido section > p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); max-width: 78ch; }
.guia-contenido section > p b, .guia-contenido section > p strong { color: var(--text); }
/* Las tablas, en un recuadro: el nombre a la izquierda, la explicación a la derecha */
.tabla-ayuda { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  font-size: 14px; line-height: 1.6; background: var(--surface); }
.tabla-ayuda th, .tabla-ayuda td { padding: 11px 16px; border-top: 1px solid var(--border); vertical-align: top; text-align: left; }
.tabla-ayuda tr:first-child th, .tabla-ayuda tr:first-child td { border-top: 0; }
.tabla-ayuda th { width: 210px; font-weight: 600; color: var(--text); background: var(--surface-2); }
.tabla-ayuda td { color: var(--text-2); }
.tabla-ayuda td b { color: var(--text); font-weight: 600; }
.guia-preguntas { margin: 0; display: grid; gap: 0; }
.guia-preguntas > div { padding: 12px 0; border-top: 1px solid var(--border); }
.guia-preguntas > div:first-child { border-top: 0; }
.guia-preguntas dt { font-size: 15px; font-weight: 600; color: var(--text); }
.guia-preguntas dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 75ch; }
.guia-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 10px; }
.guia-pasos li { counter-increment: paso; position: relative; padding-left: 38px; min-height: 26px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.guia-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde-50); color: var(--verde-700); font-weight: 700; font-size: 12.5px; }
.guia-pasos strong { color: var(--text); }
/* Importar: revisar la lista del proveedor */
.imp-check { width: 36px; }
.imp-producto { min-width: 240px; }
.imp-producto .input { height: 32px; }
.ia-sugerido { color: var(--text-2); }
.ia-sugerido .ia-marca { font-size: 11px; padding: 0 6px; margin-right: 4px; }
.usr-casillas { border-top: 1px solid var(--border); }
.usr-mi-cuenta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 38px; }
.roles-ayuda { margin: 0; padding: var(--s-3) var(--inset, 18px) var(--s-4); display: grid; gap: 4px; }
.roles-ayuda dt { font-size: 13.5px; font-weight: 600; color: var(--text); }
.roles-ayuda dt + dd + dt { margin-top: var(--s-3); }
.roles-ayuda dd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.linea-tiempo { list-style: none; margin: 0; padding: 14px 18px 16px; }
.linea-tiempo li { position: relative; padding: 0 0 14px 20px; display: flex; flex-direction: column; gap: 1px; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--verde-600); }
.linea-tiempo li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 2px; width: 1px; background: var(--border); }
.linea-tiempo li:first-child::before { background: var(--verde-600); }
.linea-tiempo .t { font-size: 13.5px; font-weight: 400; color: var(--text); }
.linea-tiempo .t a { color: inherit; }
.linea-tiempo time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 600 13.5px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s;
  text-decoration: none !important;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--verde-100); }
.btn-primary { background: var(--verde-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--verde-700); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-2); border-color: #b9c0b4; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: rgba(0,0,0,.04); }
.btn-danger { background: var(--surface); color: var(--rojo-600); border-color: #efc9c5; }
.btn-danger:hover { background: var(--rojo-50); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-icon { width: 32px; padding: 0; }
form.inline { display: inline; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: var(--s-5); }
.grid > .card + .card { margin-top: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--inset); border-bottom: 1px solid var(--border); }
.card-header h2 { font-size: 15px; font-weight: 650; }
.card-header p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.card-body { padding: var(--inset); }
.card-footer { padding: var(--s-3) var(--inset); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.grid { display: grid; gap: var(--s-5); }
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }

/* ---------- Pizarra: cuatro tarjetas por fila, todas del mismo tamaño ---------- */
.pizarra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.pizarra .card + .card { margin-top: 0; }
.nota { display: flex; flex-direction: column; gap: var(--s-2); height: 212px; padding: var(--s-4); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.nota:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }
.nota.moviendo { opacity: .4; }
.nota-cabeza { display: flex; align-items: center; gap: var(--s-2); }
.nota-abrir { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 650; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nota-mover { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -6px -2px 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: grab; }
.nota-mover:hover { background: var(--surface-2); color: var(--text); }
.nota-mover:active { cursor: grabbing; }
.nota-texto { flex: none; margin: 0; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.nota-pie { margin: auto 0 0; padding-top: var(--s-2); border-top: 1px solid var(--border); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nota-leer h3 { overflow-wrap: anywhere; }
.nota-leer-texto { margin: var(--s-4) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.modal .foot .nota-eliminar { margin-right: auto; color: var(--rojo-600); }
@media (max-width: 1100px) { .pizarra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pizarra { grid-template-columns: minmax(0, 1fr); } .nota { height: auto; } .nota-pie { margin-top: var(--s-2); } }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 10px var(--s-3); border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap;
}
.table th a { color: inherit; }
.table th.right, .lineas th.right { text-align: right; }
.lineas .input-group .addon { padding: 0 8px; }
.table td { padding: 10px var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #fbfcfa; }
.table tr[data-href] { cursor: pointer; }
.table .producto-nombre { font-weight: 550; color: var(--text); }
.table .sub { color: var(--muted); font-size: 12.5px; }
.table th:first-child, .table td:first-child { padding-left: var(--inset); }
.table th:last-child, .table td:last-child { padding-right: var(--inset); }
.table tr.excluido td { opacity: .45; }
/* Lista de datos (.tabla-datos): una fila por elemento, columnas alineadas, el ancho se usa para información.
   Las columnas de apoyo tienen prioridad: .col-p3 se esconde primero (pantallas medianas), .col-p2 después (angostas) */
.tabla-datos td { padding-top: 12px; padding-bottom: 12px; }
.tabla-datos td strong { font-weight: 600; }
.tabla-datos .sub { margin-top: 2px; }
.tabla-datos .estados { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.tabla-datos td.acciones { white-space: nowrap; width: 1%; }
.tabla-datos .col-casilla { width: 1%; padding-right: 0; }
.tabla-datos td .cfg-ctrl-chico { width: 104px; margin-left: auto; }
.tabla-datos td.cfg-minimo .input { margin-left: auto; display: block; }
.tabla-datos .cfg-campo-precio { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tabla-datos .cfg-campo-precio .input-group { width: 140px; }
/* Filas de grupo (por ejemplo, el cliente de varios remitos): el encabezado de sus filas */
.tabla-datos tr.fila-grupo td { background: var(--surface-2); }
.tabla-datos tr.fila-grupo .sub { display: inline; margin-left: 8px; }
.tabla-datos tr.fila-grupo .badge { margin-left: 10px; }
.tabla-datos tbody + tbody tr.fila-grupo td { border-top: 1px solid var(--border); }
/* Un resumen de pocos números en columnas parejas (por ejemplo, el período de Remitos) */
.tabla-resumen { table-layout: fixed; }
.tabla-resumen tbody tr:hover td { background: none; }
/* Cada número con su título arriba, alineados a la izquierda; el detalle corta en renglones y nunca pisa la columna de al lado */
.table.tabla-resumen th, .table.tabla-resumen td { text-align: left; vertical-align: top; white-space: normal; }
.table.tabla-resumen td strong, .table.tabla-resumen td > a { font-size: 15px; white-space: nowrap; }
.tabla-resumen .sub { line-height: 1.5; }
.tabla-datos td.acciones form + form { margin-left: 6px; }
.tabla-datos a.producto-nombre:hover { text-decoration: underline; }
/* Ordenar tocando el encabezado (macro th_orden) */
.tabla-datos .th-orden { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tabla-datos .th-orden:hover { color: var(--text); text-decoration: none; }
.tabla-datos .th-flecha { font-size: 9px; opacity: .35; }
.tabla-datos th.ordenada { color: var(--text); }
.tabla-datos th.ordenada .th-flecha { opacity: 1; color: var(--verde-700); }
/* Agrandar o achicar columnas (columnas.js): el borde de cada encabezado se arrastra */
.tabla-datos[data-columnas] th { position: relative; }
.tabla-datos .col-borde { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 1; }
.tabla-datos .col-borde::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 0; width: 1px; background: var(--border); }
.tabla-datos th:hover .col-borde::after, .arrastrando-columna .col-borde::after { background: var(--verde-500); top: 0; bottom: 0; }
.tabla-datos.anchos-fijos { table-layout: fixed; }
.tabla-datos.anchos-fijos td, .tabla-datos.anchos-fijos th { overflow: hidden; text-overflow: ellipsis; }
.arrastrando-columna, .arrastrando-columna * { cursor: col-resize !important; user-select: none; }
/* Mientras llega la lista ordenada (sin recargar la página) */
.actualizando { opacity: .6; transition: opacity .15s; pointer-events: none; }
/* La barra para deslizar la tabla de costado, fija al pie de la ventana (la de la tabla se esconde) */
.scroll-pie { position: sticky; bottom: 0; z-index: 4; overflow-x: auto; overflow-y: hidden; height: 14px; background: var(--surface); border-top: 1px solid var(--border); }
.scroll-pie > div { height: 1px; }
.table-wrap.con-scroll-pie { scrollbar-width: none; }
.table-wrap.con-scroll-pie::-webkit-scrollbar { display: none; }
@media (max-width: 1280px) { .tabla-datos .col-p3 { display: none; } }
@media (max-width: 1100px) { .tabla-datos .col-p2 { display: none; } }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty .ico { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px; display: grid; place-items: center; background: var(--verde-50); color: var(--verde-700); }
.empty h3 { color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* ---------- Estados ----------
   Un estado se comunica con un punto de color y su texto (nunca solo con el color).
   Sin relleno ni borde: informan sin competir con los datos. Gris = dato neutro, sin punto. */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--text-2); background: none; border: 0; padding: 0; border-radius: 0; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge-verde { color: var(--verde-700); }
.badge-naranja { color: var(--naranja-700); }
.badge-rojo { color: var(--rojo-700); }
.badge-azul { color: var(--azul-600); }
.badge-gris { color: var(--muted); font-weight: 500; }
.badge-gris::before { display: none; }
.badge-gris.badge-punto { color: var(--text-2); font-weight: 600; }
.badge-gris.badge-punto::before { display: block; background: var(--muted); }
.up { color: var(--rojo-600); }
.down { color: var(--verde-700); }

/* ---------- Formularios ---------- */
.input, .select, textarea.input {
  height: 36px; width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 11px; font: 14px var(--font); color: var(--text); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; }
.input:disabled, .select:disabled { background-color: var(--surface-2); color: var(--text-2); cursor: not-allowed; }
.select:disabled { background-image: none; }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376817a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.input:focus, .select:focus { outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); }
.input.error, .select.error { border-color: var(--rojo-600); }
.input-group { display: flex; align-items: stretch; }
.input-group .addon { display: grid; place-items: center; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); font-weight: 600; font-size: 13px; }
.input-group .addon:first-child { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon:last-child { border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .input { border-radius: 0; }
.input-group .input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .addon:first-child + .input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input.num-input { text-align: right; font-variant-numeric: tabular-nums; }

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
.field { grid-column: span 6; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field.s4 { grid-column: span 4; } .field.s8 { grid-column: span 8; }
.field.s12 { grid-column: span 12; }
.field label, .label-txt { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field .help { font-size: 12px; color: var(--muted); }
.form-grid > .help { grid-column: 1 / -1; margin: calc(-1 * var(--s-3)) 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; max-width: 90ch; }
.field .err, .err { font-size: 12px; color: var(--rojo-600); font-weight: 500; }
/* En un panel angosto (lateral, celular) los campos van uno debajo del otro y con menos margen */
@container (max-width: 560px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .form-grid > .field, .form-grid > .field.s4, .form-grid > .field.s8, .form-grid > .field.s12 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --inset-form: var(--s-5); }
}
/* En el celular, el menú solo muestra lo de la calle (consultas y cargas básicas); lo demás es para la computadora.
   Las pantallas siguen andando si se entra por un enlace. */
@media (max-width: 760px) {
  .nav a[data-escritorio], .nav-grupo-escritorio, .nav-suelto:has(> a[data-escritorio]) { display: none; }
}
.card:has(.form-grid) { container-type: inline-size; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--verde-600); width: 16px; height: 16px; }
.check strong { display: block; font-size: 13.5px; }
.check span { font-size: 12.5px; color: var(--muted); font-weight: 400; }
input[type=checkbox] { accent-color: var(--verde-600); }

.toolbar { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; padding: var(--s-4) var(--inset); border-bottom: 1px solid var(--border); }
.toolbar .input, .toolbar .select { width: auto; min-width: 150px; }
.toolbar .search { flex: 1; min-width: 220px; position: relative; }
.toolbar .search .input { width: 100%; padding-left: 34px; }
.toolbar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.chips { display: flex; gap: 0 var(--s-6); flex-wrap: wrap; padding: 0 var(--inset); border-bottom: 1px solid var(--border); background: var(--surface); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 13px 0 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.chip:hover { text-decoration: none; color: var(--text); border-bottom-color: var(--border-strong); }
.chip.on { color: var(--verde-700); font-weight: 600; border-bottom-color: var(--verde-600); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.chip .n { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.on .n { color: var(--verde-700); }
/* Períodos (Este mes, Mes anterior…): botones de selección, el elegido marcado como un filtro con valor */

.segmented { align-self: flex-start; display: inline-flex; background: #eceee9; border-radius: 9px; padding: 3px; gap: 2px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 6px 14px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--text-2); cursor: pointer; }
.cfg-fila-ctrl .segmented span { white-space: nowrap; }   /* en una fila de ajuste, cada opción en una sola línea */
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- Detalle ---------- */
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; margin: 0; }
.dl dt { color: var(--muted); font-size: 13px; }
.dl dd { margin: 0; font-weight: 500; }
.callout { display: flex; gap: 10px; align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.55; }
.callout > div { max-width: 110ch; }
.callout.naranja { background: var(--naranja-50); color: var(--naranja-700); border: 1px solid var(--naranja-100); }
/* Lo que se puede hacer desde el aviso, abajo del texto */
.callout-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.callout.verde { background: var(--verde-50); color: var(--verde-700); border: 1px solid var(--verde-100); }
.callout.azul { background: var(--azul-50); color: var(--azul-600); border: 1px solid #d6e4f5; }
.callout svg { margin-top: 1px; }
.callout ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Paginación ---------- */
.pagination { display: flex; gap: 4px; align-items: center; }
.pagination a, .pagination span { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; padding: 0 8px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.pagination a:hover { background: var(--surface); text-decoration: none; }
.pagination .on { background: var(--verde-600); color: #fff; }

/* ---------- Mensajes ---------- */
.toasts { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 100; max-width: 420px; }
.toast { display: flex; gap: 10px; align-items: flex-start; border-left: 4px solid transparent; background: #1f2a22; color: #fff; padding: 12px 14px; border-radius: 10px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); font-size: 13.5px; animation: entra .25s ease-out; }
.toast.ok svg { color: #7ddc8a; }
.toast.error { background: var(--rojo-700); border-left-color: #ffb3ab; }
.toast button { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; padding: 0; }
@keyframes entra { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Modal de confirmación ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20, 28, 22, .45); display: grid; place-items: center; z-index: 200; padding: var(--s-5); animation: aparece .15s; }
/* Tamaños: .modal (chica, confirmaciones) · .modal-md (formularios) · .modal-lg (formularios complejos) */
.modal { position: relative; background: var(--surface); border-radius: var(--radius); width: 100%; max-width: var(--modal-sm);
  max-height: calc(100vh - 2 * var(--s-5)); display: flex; flex-direction: column; box-shadow: 0 25px 60px -15px rgba(0,0,0,.35); }
.modal.modal-md { max-width: var(--modal-md); }
.modal.modal-lg { max-width: var(--modal-lg); }
.modal .body { padding: var(--s-6) var(--s-6) var(--s-2); overflow-y: auto; min-height: 0; flex: 1 1 auto; }
/* Si no entra en la pantalla, se desplaza el contenido y los botones de abajo quedan siempre a la vista */
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal { overflow: hidden; }
.modal h3 { font-size: 16px; margin: 0 var(--s-8) var(--s-2) 0; }
.modal p { margin: 0; color: var(--text-2); }
/* Dentro de una ventana, cada bloque con su aire (un texto antes o después de los campos no queda pegado);
   el texto que va justo debajo del título es su bajada y queda cerca */
.modal .body > * + * { margin-top: var(--s-4); }
.modal .body > h3 + * { margin-top: 0; }
.modal .cerrar { position: absolute; top: var(--s-3); right: var(--s-3); width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.modal .cerrar:hover { background: var(--surface-2); color: var(--text); }
.modal .cerrar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal .foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6) var(--s-6); flex-shrink: 0; }
@keyframes aparece { from { opacity: 0; } }

/* ---------- Menú angosto: solo íconos (botón de la barra superior; se recuerda) ---------- */
.nav-tip { position: fixed; z-index: 80; transform: translateY(-50%); padding: 6px 10px; border-radius: 6px; background: #23302a; color: #f2f5f3;
  font: 500 12.5px/1.3 var(--font); white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px -8px rgba(0,0,0,.35); }
/* Explicación que aparece al dejar el mouse quieto ~2 s sobre algo con data-explica (mismo aspecto que el nombre del menú angosto) */
.nav-tip.explica-tip { transform: none; white-space: normal; max-width: 300px; font-weight: 400; line-height: 1.45; }
@media (min-width: 861px) {
  .topbar .menu-btn { display: inline-flex; margin-left: -10px; }
  .topbar { padding-left: 18px; }
  html.nav-angosto { --sidebar: 72px; }
  html.nav-angosto .sidebar .brand { padding: 0; }
  html.nav-angosto .sidebar .brand-logo { display: none; }
  html.nav-angosto .sidebar .brand .brand-hojas { display: block; }
  html.nav-angosto .nav { padding-left: 12px; padding-right: 12px; }
  html.nav-angosto .nav a { justify-content: center; padding: 0; gap: 0; font-size: 0; }
  /* El aviso queda como un punto sobre el ícono */
  html.nav-angosto .nav a .pill { position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; padding: 0; font-size: 0; background: var(--naranja-500); }
  /* Los títulos de grupo pasan a ser una línea fina, y todo queda a la vista */
  html.nav-angosto button.nav-section { height: 1px; padding: 0; margin: 0 8px 8px; font-size: 0; background: var(--border); pointer-events: none; border-radius: 0; }
  html.nav-angosto button.nav-section > * { display: none; }
  html.nav-angosto .nav-grupo.cerrado .nav-items { grid-template-rows: 1fr; }
  html.nav-angosto .nav-grupo.cerrado .nav-items a { visibility: visible; }
  html.nav-angosto .nav-grupo-sistema { border-top: 0; padding-top: 0; }
  html.nav-angosto .sidebar-foot { padding: 10px 12px; justify-content: center; }
  html.nav-angosto .sidebar-foot .datos, html.nav-angosto .quien-flecha { display: none; }
  html.nav-angosto .sidebar-foot .quien { justify-content: center; padding: 6px 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: none; }
  .main { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .topbar .menu-btn { display: inline-flex; }
  .global-search kbd { display: none; }
  .topbar-acciones .txt-ancho { display: none; }
  .content { padding: 20px 16px 50px; }
  .field, .field.s4, .field.s8 { grid-column: 1 / -1; }
  .hide-m { display: none; }
  .toolbar .input, .toolbar .select { flex: 1 1 140px; min-width: 0; }
  .page-header .actions { width: 100%; }
  .dl { grid-template-columns: 120px 1fr; }
}

/* ---------- Stock ---------- */
.stock-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lineas { width: 100%; border-collapse: collapse; }
.lineas th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.lineas td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lineas .input { height: 34px; }
.lineas .prod-cell { min-width: 280px; }
.lineas .prod-nombre { font-weight: 600; }
.lineas .prod-sub { font-size: 12px; color: var(--muted); }
.buscador { position: relative; }
.cfg-fila-apilada .buscador { width: 100%; }
.buscador .resultados div > span:last-child { white-space: nowrap; }
.buscador .resultados { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 50; max-height: 320px; overflow-y: auto; }
.buscador .resultados div { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.buscador .resultados div:hover, .buscador .resultados div.on { background: var(--verde-50); }
.buscador .resultados .vacio { color: var(--muted); cursor: default; }
.buscador .resultados .vacio:hover { background: none; }
.totales { display: flex; gap: 28px; justify-content: flex-end; padding: 14px 18px; }
.totales div { text-align: right; }
.totales .l { font-size: 12px; color: var(--muted); }
.totales .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
details.desplegable > summary { list-style: none; cursor: pointer; }
details.desplegable > summary::-webkit-details-marker { display: none; }
.buscador .search { position: relative; }
.buscador .search .input { width: 100%; padding-left: 34px; }
.buscador .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.segmented a { text-decoration: none !important; }

/* ---------- Reportes ---------- */
.grafico-tip { position: absolute; pointer-events: none; background: #1f2a22; color: #fff; font-size: 12.5px; line-height: 1.45;
  padding: 7px 10px; border-radius: 7px; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); z-index: 5; }
.grafico-tip span { color: rgba(255,255,255,.7); }
  /* verde = "estás acá"; naranja = "atención" */
button.chip { font: 500 12.5px var(--font); cursor: pointer; }

/* ---------- Interruptores (toggles) para opciones de sí/no ---------- */
.check input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer;
  width: 36px; height: 20px; margin: 1px 0 0; border-radius: 99px; background: #cfd4cb;
  transition: background .18s; outline: none;
}
.check input[type=checkbox]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s;
}
.check input[type=checkbox]:checked { background: var(--verde-600); }
.check input[type=checkbox]:checked::before { transform: translateX(16px); }
.check input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px var(--verde-100); }
.check input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.check:hover input[type=checkbox]:not(:checked) { background: #bfc5ba; }

/* ---------- Bordes de desplazamiento: nada se corta en seco ---------- */
.main.hay-arriba .topbar { box-shadow: 0 8px 14px -12px rgba(20, 30, 22, .28); }

/* Desvanecido arriba y abajo de cualquier zona que se desplaza (se activa solo si hay contenido oculto) */
.desplaza {
  --fade-arriba: 0px; --fade-abajo: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-arriba), #000 calc(100% - var(--fade-abajo)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-arriba), #000 calc(100% - var(--fade-abajo)), transparent 100%);
}
.desplaza.hay-arriba { --fade-arriba: 28px; }
.desplaza.hay-abajo { --fade-abajo: 32px; }
/* En tablas el encabezado queda fijo: arriba no se desvanece, el encabezado hace de borde con su sombra */
.desplaza.con-encabezado { --fade-arriba: 0px !important; }
.desplaza.con-encabezado thead th { position: sticky; top: 0; z-index: 2; transition: box-shadow .2s; }
.desplaza.con-encabezado.hay-arriba thead th { box-shadow: 0 8px 12px -10px rgba(20, 30, 22, .3); }

/* Al imprimir una pantalla común, que salga todo el contenido y no solo lo visible */
@media print {
  .app, .main { height: auto; overflow: visible; display: block; }
  .area { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sidebar, .topbar, .toasts { display: none !important; }
  .main { margin-left: 0; }
}

/* ---------- Inicio: lista de temas para atender ---------- */
.atender { list-style: none; margin: 0; padding: 0; }
.atender li + li { border-top: 1px solid var(--border); }
.atender a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--text); position: relative; }
.atender a:hover { background: var(--surface-2); text-decoration: none; }
.atender a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.atender .rojo a::before { background: var(--rojo-600); }
.atender .naranja a::before { background: var(--naranja-500); }
.atender .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.atender .rojo .ico { background: var(--rojo-50); color: var(--rojo-600); }
.atender .naranja .ico { background: var(--naranja-50); color: var(--naranja-600); }
.atender .azul .ico { background: var(--azul-50); color: var(--azul-600); }
.atender .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atender .txt strong { font-weight: 600; font-size: 13.5px; }
.atender .txt span { color: var(--muted); font-size: 12.5px; }
.atender .ir { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--verde-700); white-space: nowrap; }
.atender a:hover .ir { text-decoration: underline; }

/* Lista compacta de registros (últimos pedidos, últimos cambios): nombre a la izquierda, importe y estado a la derecha */
.lista-simple { list-style: none; margin: 0; padding: 4px 0; }
.lista-simple a { display: flex; align-items: center; gap: 12px; padding: 8px 18px; color: var(--text); }
.lista-simple a:hover { background: var(--surface-2); text-decoration: none; }
.lista-simple .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lista-simple .txt strong { font-weight: 550; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-simple .txt span { color: var(--muted); font-size: 12px; }
.lista-simple .fin { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }

.empty.compacto { padding: 22px 18px; }
.empty.compacto p { margin: 0 0 10px; }

/* ---------- Mensajes: un estilo por tipo ---------- */
.toast.ok { border-left-color: #7ddc8a; }
.toast.aviso { border-left-color: var(--naranja-500); }
.toast.aviso svg { color: #ffb27f; }
.toast.info { border-left-color: #8db6e8; }
.toast.info svg { color: #8db6e8; }
.callout.rojo { background: var(--rojo-50); color: var(--rojo-700); border: 1px solid #f6d3cf; }

/* ---------- Botón esperando respuesta: evita el doble clic ---------- */
.btn.cargando { position: relative; pointer-events: none; opacity: .8; }
.btn.cargando::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .atender a { padding: 12px 14px; align-items: flex-start; }
  .atender .ir { display: none; }
  .lista-simple a { padding: 8px 14px; }
}
@media (max-width: 520px) {
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Listados: filtros y resumen de lo filtrado ---------- */
.resumen-filtro { display: flex; gap: var(--s-4); flex-wrap: wrap; padding: 10px var(--inset); font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.aviso-txt { display: inline-flex; align-items: center; gap: 4px; color: var(--naranja-700); font-weight: 550; white-space: nowrap; }

/* ---------- Formularios de operación (pedido, ingreso, cobro) ---------- */
.obligatorio { color: var(--rojo-600); font-weight: 700; }
.opcional { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.aviso-form { margin: 0 18px 14px; }
.botones-form { flex-direction: column; align-items: stretch; gap: 8px; }
.botones-form .small { text-align: center; }
.botones-form [data-motivo-deshabilitado]:empty { display: none; }
.lineas tr.falta-stock td, .cfg-fila.falta-stock { background: var(--naranja-50); }
.lineas .faltan { font-size: 11px; color: var(--naranja-700); font-weight: 600; white-space: nowrap; margin-top: 2px; }
[hidden] { display: none !important; }
.lineas .input-group { min-width: 128px; }
.lineas [name=cantidad] { min-width: 58px; }
.lineas [name=descuento_linea] { min-width: 52px; }
#cliente-elegido [data-c-nombre] { font-weight: 650; }
/* Pedido: la tabla de renglones necesita el ancho; el resumen se queda con lo justo */
.form-operacion { grid-template-columns: minmax(0, 1fr) 320px; }
/* Como en Configuración: las dos columnas quedan quietas y terminan en la misma línea; los botones del resumen, al pie */
.form-operacion { align-items: stretch; }
.form-operacion > div:not(.columna-fija) { display: flex; flex-direction: column; }
.form-operacion > div:not(.columna-fija) > .card:last-child { flex: 1 1 auto; }
.form-operacion > .columna-fija { display: flex; flex-direction: column; }
.form-operacion > .columna-fija > .card { flex: 1 1 auto; display: flex; flex-direction: column; }
.form-operacion > .columna-fija > .card > .card-footer { margin-top: auto; }
.form-operacion .lineas .prod-cell { min-width: 190px; }
.form-operacion .lineas th, .form-operacion .lineas td { padding-left: 6px; padding-right: 6px; }
.form-operacion .lineas .input-group { min-width: 118px; }
@media (max-width: 1100px) { .form-operacion { grid-template-columns: minmax(0, 1fr); } }
.stock-cero { color: var(--rojo-600); font-weight: 600; }
.table tr.inactivo td { color: var(--muted); }

/* ---------- Menú "Más": acciones secundarias sin llenar la pantalla de botones ---------- */
.menu-mas { position: relative; display: inline-block; }
.menu-mas > summary { list-style: none; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas[open] > summary { background: rgba(0,0,0,.05); }
.menu-mas-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.menu-mas-panel a, .menu-mas-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.menu-mas-panel a:hover, .menu-mas-panel button:hover { background: var(--surface-2); text-decoration: none; }
.menu-mas-panel form { margin: 0; }
.menu-mas-panel form:has(.peligro), .menu-mas-panel .menu-protegida { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.menu-mas-panel .menu-protegida .peligro { color: var(--muted); }   /* se ve apagado, pero al tocarlo explica por qué */
.menu-mas-panel .peligro { color: var(--rojo-600); }
.menu-mas-panel .peligro:hover { background: var(--rojo-50); }

#marcas td form .input[name=nombre] { flex: 1; min-width: 120px; }

/* ---------- Proveedor: cómo se calcula el costo ---------- */
.ajustes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.ajuste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ajuste .select { width: 150px; }
.ajuste .pct, .ajuste .bonif { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ajuste .pct[hidden], .ajuste .bonif[hidden] { display: none; }
.ajuste .input { width: 72px; }
.ejemplo-costo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--verde-50); border: 1px solid var(--verde-100); border-radius: var(--radius-sm); font-size: 13.5px; }
.ejemplo-costo strong { font-size: 16px; color: var(--verde-700); }
.table tr.sin-pedido td { color: var(--muted); } .table tr.sin-pedido .producto-nombre { font-weight: 500; }

.input-minimo { width: 64px; height: 30px; padding: 0 8px; transition: border-color .2s, box-shadow .2s; }
.input-minimo.guardado { border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); }
.input-minimo.con-error { border-color: var(--rojo-600); box-shadow: 0 0 0 3px var(--rojo-50); }

/* Pedido: cantidad en unidades o cajas */
.cant-unidad { display: flex; gap: 4px; align-items: center; }
.cant-unidad .input { flex: 1; }
.btn-unidad { flex: none; height: 34px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.btn-unidad.on { background: var(--verde-50); border-color: var(--verde-500); color: var(--verde-700); }
.lineas [data-equivale] { margin-top: 2px; }

.opciones-check { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.check-chip { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13.5px; cursor: pointer; padding: 4px 0; }
.check-chip input { width: 16px; height: 16px; margin: 0; }
@media (max-width: 760px) { .opciones-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pedido: pegar un mensaje y repetir el último pedido */
.pegar-pedido { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 8px; }
.pegar-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pegar-acciones .muted { margin-right: auto; }
.lineas tr.revisar td, .cfg-fila.revisar { background: #fff8e6; }
.nota-revisar { font-size: 11.5px; color: var(--naranja-700); font-weight: 600; margin-top: 2px; }
.repetir-ultimo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--azul-50); border: 1px solid #d6e4f5; font-size: 13px; color: var(--azul-600); }
.repetir-ultimo[hidden], .pegar-pedido[hidden] { display: none; }

/* Listas de pasos explicativos */
.pasos-lista { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; }

/* Zonas: días de reparto como botoncitos */
.dias-zona { display: inline-flex; gap: 3px; align-items: center; }
.dias-zona input { display: none; }
.dias-zona span { display: inline-block; min-width: 28px; height: 30px; line-height: 28px; text-align: center; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; background: var(--surface); }
.dias-zona input:checked + span { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.mt-xs { margin-top: 6px; }
/* Rendición: un importe por medio */
.cobro-medios { display: flex; gap: 8px; flex-wrap: wrap; }
.cobro-medios .input-group { width: 200px; }
.cobro-medios .addon.medio { min-width: 0; width: auto; flex: none; white-space: nowrap; padding: 0 10px; font-size: 12px; }
/* Rendir reparto: un medio por renglón (el medio, el importe y, si es cheque, sus datos); debajo, «Otro medio» y los atajos */
.cobro-medios[data-medios] { flex-direction: column; align-items: flex-start; }
.cobro-medio { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cobro-medios .cobro-medio > .select { width: 160px; flex: none; }
.cobro-medios .cobro-medio > .input-group { width: 200px; flex: none; }
.cobro-medio .cheque { display: flex; gap: 8px; flex-wrap: wrap; }
.cobro-medios .cobro-medio .cheque .input { width: 150px; flex: none; }
.cobro-atajos { display: flex; gap: 4px; flex-wrap: wrap; }

.fuera-del-dia { opacity: .6; }

/* Selector chico dentro de un texto (horas del resumen) */
.select-chico { display: inline-block; width: auto; height: 28px; padding: 0 26px 0 8px; font-size: 12.5px; margin: 0 2px; }
/* Resumen para el dueño: se ve como llega al celular */
.burbuja-tg { background: #effdde; border-radius: 14px 14px 14px 4px; padding: 14px 16px; max-width: 560px; font-size: 14px; line-height: 1.5;
              white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.fondo-tg { background: #c9dcb5; border-radius: var(--radius); padding: 20px; }

/* ================= Configuración ================= */
.cfg-cabecera { margin-bottom: 14px; }
.cfg-barra { position: sticky; top: 0; z-index: 15; display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
  margin: 0 -28px 20px; padding: 0 28px; background: var(--bg, #f4f5f2); border-bottom: 1px solid var(--border); }
.cfg-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.cfg-tabs::-webkit-scrollbar { display: none; }
.cfg-tabs button, .cfg-tabs a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 15px 12px 14px; border: 0; background: none; cursor: pointer;
  font: 600 13.5px var(--font); color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cfg-tabs button .i { color: var(--muted); }
.cfg-tabs button:hover, .cfg-tabs a:hover { color: var(--text); text-decoration: none; }
.cfg-tabs button.on, .cfg-tabs a.on { color: var(--verde-700); border-bottom-color: var(--verde-600); }
.cfg-tabs button.on .i { color: var(--verde-600); }
.cfg-tabs button .n, .cfg-tabs a .n { font-size: 12px; font-weight: 500; color: var(--muted); }
.cfg-vacio p { margin: 0; }
/* Vencimientos: el «?» de los niveles, al lado de las pestañas; el resumen del nivel en el encabezado de su tarjeta */
.cfg-barra:has(.cfg-tabs[data-pestanas]) { justify-content: flex-start; align-items: center; gap: 4px; }
.fila-elegida td, .cfg-fila.fila-elegida { background: var(--verde-50); }
/* Vencimientos: a la derecha de cada lote, en una línea: la etiqueta (en oferta / no sale), las unidades y el ⋯ o el botón */
.venc-fila .cfg-fila-ctrl, .cfg-fila-varios .cfg-fila-ctrl { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 14px; width: auto; flex: none; white-space: nowrap; }
.venc-buscar, .cfg-buscar { margin-left: auto; width: 260px; align-self: center; position: relative; }
.venc-buscar .input, .cfg-buscar .input { width: 100%; padding-left: 34px; }
.venc-buscar svg, .cfg-buscar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
/* Filas con varios valores a la derecha (Vencimientos, Ofertas): controles de ancho fijo y un valor con su detalle debajo */
.cfg-fila.cfg-fila-varios { grid-template-columns: minmax(0, 1fr) auto; }
.cfg-fila-varios .cfg-fila-ctrl .input-group.cfg-ctrl-chico { width: 100px; flex: none; }
.cfg-fila-varios .cfg-ctrl-chico .input { min-width: 0; padding-left: 8px; padding-right: 8px; }
.cfg-fila-varios .cfg-ctrl-fecha { width: 150px; }
.cfg-valor-2 { display: flex; flex-direction: column; align-items: flex-end; min-width: 110px; line-height: 1.3; }
.cfg-valor-2 span { font-size: 12px; color: var(--muted); }
.cfg-valor-2 .tachado { margin: 0; }
.help.up, .cfg-fila-txt span.up { color: var(--rojo-600); }
.cfg-valor-2 span.up { color: var(--rojo-600); }
/* Pestañas que son enlaces (listas que filtra el servidor): una raya separa las que son para revisar */
.cfg-tabs-sep { flex: none; width: 1px; height: 18px; align-self: center; margin: 0 8px; background: var(--border-strong); }
/* Filtros de una lista, a la derecha del encabezado de su tarjeta */
.cfg-filtros { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cfg-filtros .select { width: auto; max-width: 190px; height: 34px; font-size: 13px; }
.cfg-filtros-panel { padding: 12px; gap: 10px; min-width: 260px; }
.cfg-filtros-panel label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.cfg-filtros-panel .select { max-width: none; width: 100%; }
.cfg-filtros summary .n { font-size: 12px; font-weight: 600; }
.cfg-buscar { width: 220px; }
/* Casilla para elegir varios (no es un sí/no: por eso no es interruptor) */
.menu-mas > summary.btn { font-size: 13px; letter-spacing: 0; line-height: 1.2; }
.cfg-barra:has(.cfg-buscar), .cfg-barra:has(.cfg-tabs > a) { align-items: center; justify-content: flex-start; gap: 4px; }
/* El pie de una lista larga queda a la vista mientras se baja (lo que se hace con los elegidos) */
.cfg-pie.cfg-pie-fijo { position: sticky; bottom: 0; z-index: 5; background: var(--surface); box-shadow: 0 -8px 16px -12px rgba(20, 30, 22, .25); border-radius: 0 0 var(--radius) var(--radius); }
/* Formularios de varias tarjetas: el pie para guardar todo es una barra propia (fuera de las tarjetas), a la vista hasta el final */
.cfg-pie.cfg-pie-form { margin-top: var(--s-5); border: 1px solid var(--border); border-radius: var(--radius); }
input.casilla { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
/* El nombre de una fila que lleva a su ficha */
.cfg-fila-enlace { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cfg-fila-enlace:hover { color: var(--verde-700); }
.cfg-fila.inactivo .cfg-fila-txt { opacity: .6; }
.cfg-valor-2.cfg-valor-corto { min-width: 84px; }
/* Pie de una lista: elegir todos, lo que se hace con los elegidos y las páginas */
.cfg-pie .cfg-elegir-todos { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.cfg-masivo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.cfg-masivo[hidden] { display: none; }
.cfg-masivo .select { width: 160px; flex: none; height: 32px; font-size: 13px; }
/* Lo desactivado de una lista, aparte y cerrado: la lista del día queda corta */
.cfg-desactivadas { border-top: 1px solid var(--border); }
.cfg-desactivadas > summary { list-style: none; cursor: pointer; padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cfg-desactivadas > summary::-webkit-details-marker { display: none; }
.cfg-desactivadas > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.cfg-desactivadas[open] > summary::before { transform: rotate(90deg); }
.cfg-desactivadas > summary:hover { color: var(--text); }
.cfg-desactivadas .cfg-filas { border-top: 1px solid var(--border); }
/* Un interruptor con su texto al lado (dentro de una ventana) */
.check.interruptor.unir-margen { display: flex; align-items: center; justify-content: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
/* Una línea de totales arriba de una lista (Stock: unidades y valores del depósito) */
.cfg-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cfg-resumen strong { color: var(--text); font-size: 14px; }
.cfg-resumen .muted { margin-left: auto; }
/* En una fila: el mínimo que se edita ahí mismo, y el vencimiento con el color de su aviso */
.cfg-minimo .input { width: 64px; height: 30px; text-align: right; padding: 0 8px; }
/* Rojo solo para lo vencido: urgente es «hay que resolver» (naranja), priorizar azul, planificar sin color */
.venc-urgente { color: var(--naranja-700); }
.venc-priorizar { color: var(--azul-600); }
.venc-planificar { color: var(--text-2); }
/* Filtros en la barra de arriba (Contar): buscador y desplegables en una línea */
.cfg-filtros-barra { display: flex; align-items: center; gap: 8px; padding: 10px 0; flex-wrap: wrap; }
.cfg-filtros-barra .cfg-buscar { margin-left: 0; }
.cfg-filtros-barra .select { width: auto; max-width: 200px; height: 36px; font-size: 13px; }
/* En una fila con varios valores, el error de un campo va en su propia línea, debajo y a la derecha */
.cfg-fila-varios .cfg-fila-ctrl:has(.err) { flex-wrap: wrap; row-gap: 4px; }
.cfg-fila-varios .cfg-fila-ctrl > .err { flex-basis: 100%; text-align: right; white-space: normal; }
/* Ingreso de mercadería: los campos de cada producto en su fila, y los totales en el pie */
.cfg-campo-lote .input { width: 120px; height: 34px; }
.cfg-fila-varios .cfg-fila-ctrl .input-group.cfg-campo-costo { width: 130px; flex: none; }
.cfg-fila-varios .cfg-ctrl-fecha { height: 34px; }
.cfg-totales { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; font-variant-numeric: tabular-nums; }
.cfg-totales strong { color: var(--text); font-size: 14px; }
/* Una lista corta dentro de una ventana (qué va a pasar) */
.modal .lista-simple { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; font-size: 13.5px; }
/* Un aviso de una fila, en su propio renglón debajo (ocupa todo el ancho, no aprieta los campos) */
.cfg-fila > .cfg-fila-aviso { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--naranja-700); line-height: 1.45; }
.cfg-fila > .cfg-fila-aviso[hidden] { display: none; }
.modal .lista-simple { list-style: disc; }
/* El error de un campo dentro de una fila con varios valores: debajo del campo, en pocas líneas */
.cfg-fila-varios .cfg-valor-2 > .err { color: var(--rojo-600); white-space: normal; max-width: 150px; text-align: right; font-size: 11.5px; line-height: 1.3; }
/* La fila del total (Pedidos): un poco más marcada */
.cfg-fila.cfg-fila-total .cfg-fila-txt strong { font-size: 15px; }
.cfg-valor-grande { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* Varios avisos seguidos arriba de una ficha: con aire entre ellos */
.callout + .callout { margin-top: 10px; }
/* Un aviso arriba de las tarjetas, con su aire */
.callout + .cfg-grid, .callout + form > .cfg-grid { margin-top: var(--s-5); }
.cfg-paginas { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.cfg-cabeza-der { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.venc-resumen { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfg-tabs a:focus-visible, .cfg-tabs button:focus-visible { outline: 2px solid var(--verde-500); outline-offset: -2px; border-radius: 6px; }
.cfg-estado { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cfg-estado.pendiente { color: var(--naranja-700, #b45309); font-weight: 600; }
.cfg-estado.pendiente::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja-500, #e8862b); margin-right: 6px; vertical-align: 1px; }
.cfg-filas .select-chico { height: 26px; }

/* Configuración: dos columnas alineadas. Las tarjetas de cada fila tienen la misma altura y el pie
   (Cancelar / Guardar) queda a la misma altura en las dos; en una columna con dos tarjetas, la última se estira. */
.cfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.cfg-grid > .card, .cfg-columna > .card { display: flex; flex-direction: column; }
.cfg-grid > .card > .card-footer, .cfg-columna > .card > .card-footer { margin-top: auto; }
.cfg-columna { display: flex; flex-direction: column; gap: var(--s-5); }
.cfg-columna > .card:last-child { flex: 1; }
@media (max-width: 1000px) { .cfg-grid { grid-template-columns: minmax(0, 1fr); } }
.cfg-panel > .card + .card { margin-top: var(--s-5); }
/* Pie de cada sección (igual que en Usuarios): Cancelar a la izquierda, estado y Guardar a la derecha */
.cfg-pie { justify-content: flex-start; }
.cfg-pie .cfg-estado { margin-left: auto; }
.cfg-separado { border-bottom: 1px solid var(--border); }
.cfg-acciones { gap: var(--s-2); }
.cfg-nota-fila { margin: 0; padding: var(--s-3) var(--inset); font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); }
.cfg-columna > .card + .card, .cfg-grid > .card + .card { margin-top: 0; }
.cfg-panel > .card + .card { margin-top: 18px; }

/* Filas de cfg-fila: qué es (izquierda) y el valor (derecha), todos los controles alineados */
.cfg-filas { display: flex; flex-direction: column; }
.cfg-fila { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 6px 20px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
.cfg-filas > .cfg-fila:first-child { border-top: 0; }
.cfg-filas-pie { border-top: 1px solid var(--border); }
.cfg-fila-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-fila-txt label, .cfg-fila-txt strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.deposito-ctrl { display: flex; gap: 8px; align-items: center; }
.deposito-ctrl .input { flex: 1; }
.cfg-fila-txt .deposito-ok, .cfg-fila-txt .deposito-no { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-weight: 600; }
.cfg-fila-txt .deposito-ok { color: var(--verde-700); }
.cfg-fila-txt .deposito-no { color: var(--naranja-700); }
.cfg-fila-txt span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.cfg-fila-ctrl { display: flex; justify-content: flex-end; }
.cfg-fila-ctrl .input-group, .cfg-fila-ctrl .select { width: 100%; }
.cfg-fila-hijo { padding-left: 34px; background: var(--surface-2); }
.cfg-fila-hijo .cfg-fila-txt label { font-weight: 500; color: var(--text-2); }
.cfg-fila.apagado .cfg-fila-txt, .cfg-fila.apagado .cfg-fila-ctrl { opacity: .45; }
.cfg-fila-ancho { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cfg-fila-ctrl-ancho { grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); }
.cfg-fila-ctrl > .field { width: 100%; }
.cfg-fila-ctrl-medio { grid-template-columns: minmax(0, 1fr) 220px; }
.cfg-valor { font-size: 13.5px; color: var(--text); text-align: right; }

.interruptor { justify-content: flex-end; }
.interruptor input[type=checkbox] { margin: 0; }

/* Vencimientos: los tres avisos, de menor a mayor urgencia */
.niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nivel { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); border-top: 3px solid; cursor: text; }
/* Los mismos colores que en Vencimientos y Ofertas: el rojo queda solo para lo que ya venció */
.nivel-gris { border-top-color: var(--muted); } .nivel-azul { border-top-color: var(--azul-600); } .nivel-naranja { border-top-color: var(--naranja-500); }
.nivel-tit { font-size: 13px; font-weight: 650; }
.nivel-ayuda { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* Mensaje de aviso de deuda */
.cfg-mensaje { display: grid; gap: 10px; }
.cfg-mensaje textarea { resize: vertical; min-height: 76px; }
.variables { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.var-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 var(--s-2); border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font: 500 12.5px var(--font); color: var(--text-2); cursor: pointer; }
.var-btn svg { width: 12px; height: 12px; }
.aviso-vista { display: grid; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.aviso-vista-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 28px; }
.aviso-burbuja { margin: 0; justify-self: start; max-width: 92%; padding: 9px 12px; border-radius: 10px 10px 10px 2px;
  background: var(--verde-50); border: 1px solid var(--verde-100, var(--border)); font-size: 13.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; }
.var-btn:hover { border-color: var(--verde-500); color: var(--verde-700); background: var(--verde-50); }
.var-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Tablas editables (zonas, marcas, categorías) */

@media (max-width: 1320px) {
  .cfg-barra { flex-wrap: wrap; row-gap: 0; }
  .cfg-tabs { width: 100%; }
  .cfg-tabs button { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 1100px) {
  .cfg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cfg-barra { margin: 0 -16px 16px; padding: 6px 16px 0; flex-wrap: wrap; }
  .cfg-tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .cfg-fila-ctrl-ancho { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cfg-fila { grid-template-columns: minmax(0, 1fr); }
  .cfg-fila:has(.interruptor) { grid-template-columns: minmax(0, 1fr) auto; }
  .cfg-fila-ctrl { justify-content: stretch; }
  .niveles { grid-template-columns: minmax(0, 1fr); }
  .cfg-fila-hijo { padding-left: 18px; }
}

/* Un botón desactivado se tiene que notar en cualquier pantalla (el motivo va en su title) */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cfg-pie-nota { flex: 1 1 0; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }

/* Puesta en marcha */
.puesta-avance { padding: 18px; display: grid; gap: 10px; margin-bottom: var(--s-5); }
.puesta-cifra { display: flex; align-items: baseline; gap: 12px; }
.puesta-cifra strong { font-size: 26px; font-weight: 750; }
.puesta-cifra span { color: var(--muted); font-size: 13px; }
.puesta-cifra .puesta-listo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--verde-700); font-weight: 600; }
/* La barra es un <progress>: el avance sale del valor, sin estilos sueltos */
.puesta-barra { display: block; width: 100%; height: 8px; border: 0; border-radius: 99px; background: #e6e9e3; overflow: hidden; appearance: none; -webkit-appearance: none; }
.puesta-barra::-webkit-progress-bar { background: #e6e9e3; border-radius: 99px; }
.puesta-barra::-webkit-progress-value { background: var(--verde-600); border-radius: 99px; }
.puesta-barra::-moz-progress-bar { background: var(--verde-600); border-radius: 99px; }
.puesta-grupo + .puesta-grupo { margin-top: var(--s-5); }
.puesta-pasos { list-style: none; margin: 0; padding: 0; }
.puesta-pasos li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px var(--inset); border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.puesta-pasos li:first-child { border-top: 0; }
.puesta-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: #eef0ec; color: var(--text-2); }
.puesta-pasos li.hecho .puesta-num { background: var(--verde-600); color: #fff; }
.puesta-pasos li.hecho .puesta-txt strong, .puesta-pasos li.omitido .puesta-txt strong { color: var(--text-2); }
.puesta-pasos li.espera .puesta-num, .puesta-pasos li.espera .puesta-txt > span:not(.puesta-estado) { opacity: .7; }
.puesta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.puesta-txt strong { font-size: 14px; }
.puesta-txt span { font-size: 12.5px; color: var(--muted); }
.puesta-txt .puesta-estado { font-weight: 600; color: var(--naranja-700); }
.puesta-pasos li.hecho .puesta-estado { color: var(--verde-700); }
.puesta-pasos li.omitido .puesta-estado { color: var(--muted); font-weight: 500; }
.puesta-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Importar: la tarjeta a la que se llega desde Puesta en marcha */
.imp-inicio > .card { scroll-margin-top: 90px; }
.imp-inicio > .card:target { border-color: var(--verde-600); box-shadow: 0 0 0 3px var(--verde-100, #e3f1e6); }
.puesta-inicio { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 18px; align-items: center; padding: 14px 18px; margin-bottom: 18px; color: inherit; border-left: 4px solid var(--verde-600); }
.puesta-inicio:hover { text-decoration: none; border-color: var(--border-strong); border-left-color: var(--verde-600); }
.puesta-inicio strong { display: block; font-size: 14px; }
.puesta-inicio span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .puesta-inicio { grid-template-columns: minmax(0, 1fr); } .puesta-pasos li { grid-template-columns: 30px minmax(0, 1fr); } .puesta-pasos li .btn { grid-column: 2; justify-self: start; } }

/* Ofertas */
.tachado { text-decoration: line-through; color: var(--muted); font-size: 12.5px; margin-right: 4px; }
.oferta-valor { display: flex; gap: 8px; }
.oferta-valor .segmented { flex: none; }
.oferta-valor .input { flex: 1; min-width: 0; }

/* ================= Tablero de Inicio ================= */
:root { --estado-bien: #2e9a3f; --estado-aviso: #e0a526; --estado-alerta: #f07f2d; --estado-critico: #c9372c; --dato: #4a83c4; }
.tablero-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-t { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; color: inherit; min-width: 0; }
.kpi-t:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow); }
.kpi-t .label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-t .value { font-size: 24px; font-weight: 750; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-t .value.up { color: var(--estado-critico); }
.kpi-t .hint { font-size: 12px; line-height: 1.4; }
.estado-txt { font-weight: 600; }
.estado-txt.bien { color: var(--verde-700); }
.estado-txt.advertencia { color: #a86a00; }
.estado-txt.critico { color: var(--estado-critico); }

.tablero-fila { display: grid; gap: 18px; margin-bottom: 18px; align-items: stretch; }
/* Los circuitos de Inicio: cada hilo en una fila de ajuste, con sus pasos (número + qué es) que llevan a la lista */
.cfg-fila.circuito { grid-template-columns: 110px minmax(0, 1fr); align-items: start; }
.circuito-nombre { flex-direction: row; align-items: center; gap: 6px; }
.circuito-pasos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 16px; }
.circuito-paso { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 6px 10px;
  border-radius: var(--radius-sm); color: var(--text); line-height: 1.3; }
.circuito-paso:hover { text-decoration: none; background: var(--surface-2); }
.circuito-paso:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.circuito-paso strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.circuito-paso span { font-size: 12px; color: var(--muted); }
.circuito-paso.cero strong { color: var(--muted); font-weight: 500; }
.circuito-paso.alerta strong { color: var(--naranja-700); }
.circuito-paso.critico strong { color: var(--rojo-600); }
/* En los circuitos que van en orden, una flechita entre paso y paso (sin correr las columnas) */
.circuito-paso.con-flecha::before { content: "›"; position: absolute; left: -12px; top: 6px; color: var(--border-strong); font-size: 16px; }
/* Requiere atención: el nivel, el texto y el botón, cada uno en su columna */
.cfg-fila.atencion-fila { grid-template-columns: 104px minmax(0, 1fr) 190px; }
.atencion-fila.oculto-info, .atencion-fila.de-mas { display: none; }
/* El nivel y, debajo, de qué tema es (los mismos nombres que los circuitos) */
.atencion-nivel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.atencion-tema { font-size: 11.5px; color: var(--muted); padding-left: 12px; }
.atencion-mas { display: flex; justify-content: center; padding: 10px var(--inset); border-top: 1px solid var(--border); }
/* Personalizar Inicio: lo que queda a la vista se reparte la fila; los pasos en cero se apagan sin correr las columnas */
.tablero-fila.una { grid-template-columns: minmax(0, 1fr); }
.tablero-fila.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.circuitos.sin-ceros .circuito-paso.cero, .circuitos.sin-ceros .circuito-paso.cero + .circuito-paso::before { visibility: hidden; }
/* Lo que no es parte del camino va al final, separado por una rayita */
.circuito-paso.aparte::before { content: ""; position: absolute; left: -9px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.circuitos .card-header .check { align-items: center; white-space: nowrap; }
.circuitos-der { display: flex; align-items: center; gap: 22px; }
.leyenda-colores { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.leyenda-colores li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-colores li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.leyenda-colores .critico::before { background: var(--rojo-600); }
.leyenda-colores .alerta::before { background: var(--naranja-500); }
.atencion-fila .btn { width: 100%; justify-content: center; }
.tablero-fila > .card { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.tablero-fila > .card > .card-body { flex: 1; }
.t-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vacio-grafico { color: var(--muted); font-size: 13px; margin: 6px 0; }

/* Barras horizontales (laboratorios y zonas) */
.hbarras { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hbarras li { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 140px; gap: 10px; align-items: center; font-size: 12.5px; }
/* La tendencia contra los 90 días anteriores, al lado del dato chico */
.hb-tend { margin-left: 6px; font-weight: 600; color: var(--muted); }
.hb-tend.sube { color: var(--verde-700); }
.hb-tend.baja { color: var(--rojo-600); }
.hb-tend.nueva { color: var(--dato); font-weight: 500; }
.hb-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-2); }
.hb-nombre .badge { font-size: 10.5px; padding: 0 5px; }
.hb-pista { height: 10px; background: #eef0ec; border-radius: 0 4px 4px 0; }
.hb-barra { display: block; height: 100%; background: var(--verde-600); border-radius: 0 4px 4px 0; }
.zonas .hb-barra { background: var(--dato); }
.hbarras .otros .hb-barra { background: #b9c0b4; }
.hbarras .otros .hb-nombre { font-weight: 500; color: var(--muted); }
.hb-valor { text-align: right; font-weight: 650; white-space: nowrap; line-height: 1.2; }
.hb-valor small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

/* Barra apilada + leyenda (cuentas corrientes y stock) */
.mini-lista .label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.apilada { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: #eef0ec; }
.apilada .seg { display: block; height: 100%; min-width: 3px; }
.t-al_dia, .s-ok { background: var(--estado-bien); }
.t-1_15, .s-bajo { background: var(--estado-aviso); }
.t-16_30, .s-agota { background: var(--estado-alerta); }
.t-mas_30 { background: var(--estado-critico); }
/* Sin stock es «hay que resolver» (naranja), no «ya venció»: el más oscuro de la escala de stock */
.s-sin_stock { background: var(--naranja-700); }
.leyenda { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; font-size: 12.5px; }
.leyenda li { display: flex; align-items: center; gap: 6px; color: var(--text-2); min-width: 0; }
.leyenda li strong { margin-left: auto; }
.leyenda li a { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leyenda li a:hover { color: var(--verde-700); }
.leyenda li.cero { color: var(--muted); }
.leyenda li.cero strong { font-weight: 500; }
.punto { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.mini-lista { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.mini-lista .label { margin-bottom: 4px; }
.mini-lista a { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text); padding: 4px 0; }
.mini-lista a span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mini-lista a .num { white-space: nowrap; color: var(--text-2); }
.mini-lista a:hover span:first-child { color: var(--verde-700); }

@media (max-width: 1280px) {
  /* 2 arriba y 2 abajo, todos del mismo alto */
  .tablero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .t-6-6 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tablero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero-kpis > .kpi-t, .tablero-kpis > .kpi-t:nth-child(n+4) { grid-column: span 1; }
  .tablero-kpis > .kpi-t:last-child:nth-child(odd) { grid-column: span 2; }
  .kpi-t .value { font-size: 20px; }
}
.tablero-kpis > .card { margin: 0; }
[data-sin-costos] .solo-dueno { display: none; }

/* Proveedor: productos con cuenta distinta */
.excepcion-productos { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; display: grid; gap: 2px; }
.check-fila { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; cursor: pointer; }
.check-fila[hidden] { display: none; }

/* ================= Barra superior: buscador universal y campanita ================= */
.global-search { max-width: 560px; }
.bq-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 16px 40px -12px rgba(20, 30, 22, .28); z-index: 60; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; }
.bq-panel[hidden] { display: none; }
.bq-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 10px 4px; }
.bq-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); }
.bq-item:hover, .bq-item.on { background: var(--verde-50); text-decoration: none; }
.bq-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bq-txt strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-txt span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-txt .bq-critico { color: var(--estado-critico, #c9372c); }
.bq-txt .bq-advertencia { color: #a86a00; }
.bq-extra { flex: none; font-size: 12px; font-weight: 600; color: var(--verde-700); border: 1px solid var(--verde-100); background: #fff; border-radius: 6px; padding: 3px 8px; }
.bq-extra:hover { background: var(--verde-600); color: #fff; }
.bq-enter { flex: none; font-size: 11px; }
.bq-todos { border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.bq-todos .bq-txt strong { font-weight: 500; color: var(--text-2); }
.bq-vacio { padding: 14px 12px; color: var(--muted); font-size: 13px; }
.topbar-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.campana { position: relative; }
.campana .btn-icon { position: relative; }
.globo { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e0a526; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--surface); }
.globo.critico { background: var(--estado-critico, #c9372c); }
.globo[hidden] { display: none; }
.cp-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 16px 40px -12px rgba(20, 30, 22, .28); z-index: 60; max-height: 70vh; overflow-y: auto; }
.cp-panel[hidden] { display: none; }
.cp-titulo { padding: 12px 14px; font-weight: 650; font-size: 14px; border-bottom: 1px solid var(--border); }
.cp-item { display: grid; gap: 1px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.cp-item:hover { background: var(--surface-2); text-decoration: none; }
.cp-item strong { font-size: 13px; }
.cp-item span:last-child { font-size: 12px; color: var(--muted); }
.cp-nivel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cp-item.critico .cp-nivel { color: var(--estado-critico, #c9372c); }
.cp-item.advertencia .cp-nivel { color: #a86a00; }
.cp-todos { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; text-align: center; }
.cp-vacio { padding: 14px; color: var(--muted); font-size: 13px; }
.global-search .bq-enter { position: static; transform: none; margin-left: 4px; }
.campana .btn-icon { width: 38px; height: 38px; }
.campana .btn-icon .i { width: 20px; height: 20px; }
.globo { top: -1px; right: -3px; }

/* ================= Filtros de los listados: un solo patrón =================
   arriba los botones de vista (con su número), abajo buscador y desplegables en un renglón, «Ordenar» a la derecha */
.card > .chips + .toolbar { border-top: 0; }
.chips { align-items: center; }
.toolbar { flex-wrap: nowrap; }
.toolbar .search { flex: 1 1 260px; min-width: 200px; }
.toolbar .select { flex: 0 1 200px; min-width: 140px; width: auto; }
.toolbar .select.orden { margin-left: auto; flex: 0 0 auto; min-width: 0; background-color: transparent; border-color: transparent; color: var(--text-2); font-weight: 600; font-size: 13px; }
.toolbar .select.orden:hover { border-color: var(--border-strong); background-color: var(--surface); }
.toolbar .select.con-valor, .barra .select.con-valor, .multi > summary.con-valor { border-color: var(--verde-500); background-color: var(--verde-50); color: var(--verde-700); font-weight: 600; }
.toolbar .limpiar, .barra .limpiar { flex: none; color: var(--muted); font-size: 13px; }
.toolbar .limpiar:hover, .barra .limpiar:hover { color: var(--text); }
@media (max-width: 1100px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .select.orden { margin-left: 0; }
}
@media (max-width: 760px) {
  /* Botones de vista: una sola fila que se desliza, en vez de ocupar media pantalla */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip { flex: none; }
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .toolbar .search { grid-column: 1 / -1; }
  .toolbar .select, .toolbar .select.orden { min-width: 0; width: 100%; }
  .toolbar .limpiar { justify-self: start; }
}
.toolbar .search { flex: 2 1 320px; min-width: 240px; }
.toolbar .select { flex: 0 1 190px; min-width: 150px; }
.toolbar .select.orden { width: auto; padding-right: 28px; }

/* Desplegable de selección múltiple: se ve como un desplegable común; al abrir, buscador + casillas + Aplicar */
.multi { position: relative; flex: none; }
.multi > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-width: 220px; max-width: 320px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.multi > summary::-webkit-details-marker { display: none; }
.multi[open] > summary { border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); }
.multi-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px -10px rgba(20, 30, 22, .25);
  display: flex; flex-direction: column; overflow: hidden; }
.multi-buscar { margin: 10px 10px 6px; width: auto; height: 34px; font-size: 13.5px; }
.multi-lista { max-height: 280px; overflow-y: auto; padding: 4px 6px 8px; }
.multi-op { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 13.5px; cursor: pointer; }
.multi-op:hover { background: var(--surface-2); }
.multi-op input { width: 16px; height: 16px; accent-color: var(--verde-600); flex: none; margin: 0; }
.multi-op:has(input:checked) { color: var(--verde-700); font-weight: 600; }
.multi-vacio { padding: 10px 8px; font-size: 13px; color: var(--muted); }
.multi-pie { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-2); }
.multi-cuenta { flex: 1; font-size: 12px; color: var(--muted); text-align: right; }

/* ---------- Accesibilidad: foco visible y uniforme en todos los controles ---------- */
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; }

/* ---------- Filtro de período (desplegable con períodos rápidos y rango de fechas) ---------- */
.periodo-picker { position: relative; flex: none; }
.periodo-picker > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-2); min-width: 180px; white-space: nowrap; user-select: none; }
.periodo-picker > summary::-webkit-details-marker { display: none; }
.periodo-picker > summary .i { color: var(--muted); }
.periodo-picker > summary.con-valor .i { color: var(--verde-700); }
.periodo-picker[open] > summary { border-color: var(--verde-500); box-shadow: var(--focus-ring); }
.toolbar .periodo-picker .multi-panel { left: auto; right: 0; }
.periodo-panel { width: 344px; }
.periodo-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: var(--s-2); }
.periodo-op { height: 32px; border: 0; background: none; border-radius: var(--radius-sm); text-align: left; padding: 0 var(--s-3); font: 500 13.5px var(--font); color: var(--text); cursor: pointer; }
.periodo-op:hover { background: var(--surface-2); }
.periodo-op.on { background: var(--verde-50); color: var(--verde-700); font-weight: 600; }
.periodo-op:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.periodo-rango { border-top: 1px solid var(--border); padding: var(--s-3) var(--s-3) var(--s-4); display: grid; gap: var(--s-2); }
.periodo-titulo { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.periodo-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.periodo-campos label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.periodo-campos em { font-style: normal; font-weight: 400; color: var(--muted); }
.periodo-campos .input { height: 34px; font-size: 13px; padding: 0 8px; }

/* ---------- Registro de actividad: renglones legibles, agrupados por día ---------- */
.toolbar-actividad { flex-wrap: nowrap; }
.toolbar-actividad .search { flex: 1 1 240px; }
.actividad-lista { display: flex; flex-direction: column; }
.act-dia { padding: var(--s-2) var(--inset); background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.act { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(0, 180px) 48px; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--inset); border-bottom: 1px solid var(--border); }
.act:last-child { border-bottom: 0; }
.act:hover { background: #fbfcfa; }
.act-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-que { font-size: 13.5px; font-weight: 500; color: var(--text); }
.act-ref { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-ref:hover { color: var(--verde-700); }
.act-quien { font-size: 13px; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-hora { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .act { grid-template-columns: 10px minmax(0, 1fr) 44px; }
  .act { row-gap: 2px; }
  .act-quien { grid-column: 2; grid-row: 2; text-align: left; font-size: 12px; }
}
/* Severidad de un movimiento: punto de color (el texto de la acción dice qué fue; el color, cuánto importa revisarlo) */
.sev { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--border-strong); }
.sev-alta { background: var(--rojo-600); }
.sev-media { background: var(--naranja-500); }
.sev-normal { background: var(--verde-500); }
.sev-baja { background: #c3c9bf; }
.sev-leyenda { margin-left: auto; display: inline-flex; gap: var(--s-4); flex-wrap: wrap; color: var(--muted); }
.sev-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.sev-leyenda .sev { width: 8px; height: 8px; }
/* «Limpiar filtros» siempre en su lugar; sin filtros puestos queda apagado */
.limpiar.inactivo { opacity: .4; pointer-events: none; }
/* Contraseña con «ojito» para ver lo escrito */
.clave { position: relative; display: block; }
.clave .input { padding-right: 40px; }
.clave-ver { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 32px; height: 28px; display: grid; place-items: center;
  border: 0; background: none; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.clave-ver:hover { color: var(--text); background: var(--surface-2); }
.clave-ver:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cfg-grid.cfg-grid-1 { grid-template-columns: minmax(0, 1fr); max-width: var(--w-content); }
/* Aviso de error debajo del control (filas de configuración y celdas de tabla) */
.cfg-fila-ctrl { flex-wrap: wrap; }
.cfg-fila-ctrl > .err { flex-basis: 100%; text-align: right; margin-top: 4px; }
td > .err { display: block; margin-top: 4px; font-size: 11.5px; white-space: normal; }
/* Dos tarjetas lado a lado (Telegram): misma altura y el pie de las dos a la misma altura */
.cfg-grid.cfg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.cfg-grid-2 > .card { display: flex; flex-direction: column; }
.cfg-grid-2 > .card > .card-footer { margin-top: auto; }
@media (max-width: 1000px) { .cfg-grid.cfg-grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* Fila con la explicación arriba y el campo a lo ancho (para tarjetas angostas) */
.cfg-fila.cfg-fila-apilada { grid-template-columns: minmax(0, 1fr); }
.cfg-fila-apilada .cfg-fila-ctrl { justify-content: stretch; }
.cfg-fila-apilada .cfg-fila-ctrl .input { width: 100%; }
/* Resúmenes de Telegram: texto, horarios con su nombre y el interruptor, en una fila */
.cfg-fila.tg-fila { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px var(--s-5); }
.tg-horario { display: flex; align-items: center; gap: var(--s-3); }
.tg-horario label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tg-horario.apagado { opacity: .45; }
/* ---------- Productos › Marcas y categorías ---------- */

.table .c-acc { width: 1%; white-space: nowrap; text-align: right; }
.clasif-botones { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.clasif-botones form { margin: 0; }
/* Eliminar en una fila: gris como el resto, rojo al pasar el mouse; si no se puede eliminar, queda el lugar para que no se desalinee */
.btn-borrar { color: var(--muted); }
.btn-borrar:hover { color: var(--rojo-600); background: var(--rojo-50); }
.btn-icon-lugar { display: inline-block; width: 32px; }
.clasif-editar td, .clasif-nueva td { background: var(--verde-50); }
.clasif-editar .field, .clasif-nueva .field { margin: 0; }
/* Menú «⋯» de acciones poco frecuentes */
.menu-mas { position: relative; display: inline-block; }
.menu-mas > summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas-panel { position: fixed; z-index: 150; width: 240px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 12px 28px -10px rgba(20, 30, 22, .25); text-align: left; white-space: normal; }
.menu-mas-panel form { display: grid; gap: 2px; }
.menu-mas-panel button { border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 5px; font: 600 13.5px var(--font); color: var(--text); cursor: pointer; }
.menu-mas-panel button:hover { background: var(--surface-2); }
.menu-mas-panel span { font-size: 12px; color: var(--muted); padding: 0 8px 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Zonas de reparto */
.tabla-zonas .z-cod { width: 90px; }
.tabla-zonas .z-reg { width: 210px; }
.tabla-zonas .z-dias { width: 250px; }
.tabla-zonas .z-cli { width: 80px; }
.region-campo { display: grid; gap: 6px; }
.menu-mas-panel button.peligro { color: var(--rojo-600); }
.menu-mas-panel button:disabled { color: var(--muted); cursor: not-allowed; background: none; }
.menu-mas-panel form + form { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* Pedido: renglones de productos en filas (como Ingresos), el cliente elegido y sus avisos a todo el ancho de la fila */
[data-linea] .cfg-fila-ctrl { gap: 12px; }
[data-linea] .cfg-valor-2, [data-linea] .cfg-valor-2.cfg-valor-corto { min-width: 0; }
[data-linea] .input { height: 34px; }
[data-linea] .cant-unidad .input { width: 64px; flex: none; }
[data-linea] .cfg-valor-2 .faltan { color: var(--naranja-700); font-weight: 600; }
.cliente-elegido { display: flex; align-items: center; gap: 14px; width: 100%; }
.cliente-elegido-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cliente-elegido-txt strong { font-size: 14px; font-weight: 650; color: var(--text); }
.cfg-fila > .callout, .cfg-fila > .repetir-ultimo { grid-column: 1 / -1; margin-top: 0; }
.cfg-fila .buscador { width: 100%; }
/* Pedido: los avisos de los campos de un renglón van juntos en una línea debajo (el campo queda en rojo), sin quitarle ancho al nombre */
[data-linea] .cfg-valor-2 > .err { display: none; }
.cfg-fila > .cfg-fila-aviso.aviso-error { color: var(--rojo-600); }
/* Remitos: cada cliente encabeza sus remitos (filas hijas); el pie fijo lleva el número de factura */
.cfg-filas > [data-grupo]:first-child > .cfg-fila:first-child { border-top: 0; }
.cfg-campo-factura { width: 220px; flex: none; }
.cfg-form-linea { display: inline-flex; align-items: center; gap: 8px; }
/* Un desplegable (período, filtros) en el borde derecho de una tarjeta abre hacia la izquierda: no se sale de la pantalla */
.cfg-cabeza-der .multi-panel { left: auto; right: 0; }

/* ---------- Lista para clientes: la hoja que recibe el cliente (vista previa en pantalla; al imprimir sale sola) ---------- */
.lista-hoja { page: lista; background: var(--surface); max-width: 820px; margin: var(--s-5) auto 0; padding: 40px 48px; box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.lista-hoja .cab { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 3px solid var(--naranja-500); }
.lista-hoja .cab img { width: 170px; }
.lista-hoja .cab .t { text-align: right; }
.lista-hoja .cab h1 { font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.lista-hoja .cab .f { color: var(--verde-700); font-weight: 600; margin-top: 2px; }
.lista-hoja .cab .c { color: var(--muted); font-size: 12px; margin-top: 4px; }
.lista-hoja .grupo { margin-top: 22px; break-inside: avoid-page; }
.lista-hoja .grupo h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--verde-600); padding: 6px 12px; border-radius: 4px; }
.lista-hoja .grupo table { width: 100%; border-collapse: collapse; }
.lista-hoja .grupo td { padding: 6px 12px; border-bottom: 1px solid #edf0ea; font-size: 13px; }
.lista-hoja .grupo tr:nth-child(even) td { background: #fafbf8; }
.lista-hoja .grupo td.cod { width: 70px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.lista-hoja .grupo td.p { text-align: right; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; width: 130px; }
.lista-hoja .grupo tr { break-inside: avoid; }
.lista-hoja .grupo td.p s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.lista-hoja .grupo .hasta { font-size: 11px; color: #a8520c; font-weight: 600; margin-left: 6px; }
.lista-hoja .grupo-ofertas h2 { background: var(--naranja-500); }
.lista-hoja .pie { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); text-align: center; }
.lista-hoja .lista-vacia { margin: 28px 0 0; text-align: center; color: var(--muted); }
@page lista { size: A4; margin: 12mm; }
/* Informe del negocio (IA): la misma hoja, con textos para leer tranquilo entre las tablas */
.lista-hoja .informe-titular { margin: 22px 0 0; font-size: 18px; font-weight: 650; line-height: 1.4; color: var(--text); text-wrap: balance; }
.lista-hoja .informe-texto { margin: 10px 12px 8px; font-size: 13.5px; line-height: 1.65; color: var(--text); max-width: 75ch; }
.lista-hoja .grupo h2 .informe-sub { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85; margin-left: 6px; }
.lista-hoja .informe-lista { margin: 10px 0 0; padding: 0 12px 0 30px; font-size: 13.5px; line-height: 1.6; }
.lista-hoja .informe-lista li + li { margin-top: 6px; }
.lista-hoja .informe-lista .badge { margin-right: 4px; }
.lista-hoja .informe-tareas { margin: 10px 0 0; padding: 0 0 0 30px; font-size: 13.5px; line-height: 1.55; }
.lista-hoja .informe-tareas li { padding: 8px 12px 8px 4px; border-bottom: 1px solid #edf0ea; break-inside: avoid; }
.lista-hoja .informe-tareas li > div { display: inline-flex; flex-direction: column; gap: 2px; width: calc(100% - 190px); vertical-align: middle; }
.lista-hoja .informe-tareas li > div span { color: var(--text-2); }
.lista-hoja .informe-tareas li > .btn { float: right; margin-top: 2px; }
.lista-hoja .informe-grafico { margin-top: 14px; break-inside: avoid; }
@media print { .lista-hoja .informe-tareas li > div { width: 100%; } .lista-hoja .informe .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media print {
  .no-imprimir { display: none !important; }
  body:has(.lista-hoja) .content { padding: 0; }
  .lista-hoja { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; }
  .lista-hoja .grupo h2, .lista-hoja .grupo tr:nth-child(even) td, .lista-hoja .cab, .lista-hoja .hasta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Pedido sugerido: la etiqueta del período junto a su desplegable; lo que no hace falta pedir queda en gris */
.cfg-filtros .cfg-filtro-etiqueta { align-self: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cfg-fila.sin-pedido .cfg-fila-txt, .cfg-fila.sin-pedido .cfg-valor strong { color: var(--muted); }
.cfg-fila.sin-pedido .cfg-fila-enlace { font-weight: 500; }
[data-fila] .cfg-fila-ctrl { gap: 12px; }
[data-fila] .cfg-valor-2, [data-fila] .cfg-valor-2.cfg-valor-corto { min-width: 0; }
[data-fila] .cfg-fila-txt, [data-linea] .cfg-fila-txt { overflow-wrap: anywhere; }
.cfg-filtros:has(.cfg-filtro-etiqueta) { flex-wrap: nowrap; }
/* Pedido sugerido: buscador a la izquierda y el interruptor a la derecha, en la misma fila */
.cfg-fila-ctrl.cfg-fila-ctrl-izq { justify-content: flex-start; }
.cfg-buscar-fila { position: relative; width: 300px; }
.cfg-buscar-fila .input { width: 100%; padding-left: 34px; height: 34px; }
.cfg-buscar-fila svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
@media print {   /* Pedido a un proveedor: en papel, solo lo que se pide (y el resumen al lado) */
  .pedido-proveedor .cfg-fila.sin-pedido, .pedido-proveedor tr.sin-pedido, .pedido-proveedor [data-sin-filas] { display: none !important; }
  .pedido-proveedor { grid-template-columns: minmax(0, 1fr) 260px; }
  .pedido-proveedor .columna-fija { position: static; }
}
/* Una fila con una segunda línea de campos debajo, a todo el ancho (cada medio de un pago: referencia o datos del cheque) */
.cfg-fila > .cfg-fila-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-fila-sub .cfg-fila-sub { display: flex; gap: 8px; flex: 2 1 380px; }
.cfg-fila-sub .input, .cfg-fila-sub .select { flex: 1 1 140px; min-width: 0; height: 34px; }
[data-medio] .cfg-fila-txt .select { max-width: 220px; height: 34px; }
/* Orden de pago: misma hoja que la lista para clientes */
.lista-hoja .hasta-gris { font-size: 12px; color: var(--muted); }
.lista-hoja tr.total td { font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--surface); }
/* Tarjetas de distinto alto, una al lado de la otra: cada una del alto de su contenido (sin hueco abajo) */
.cfg-grid.cfg-grid-arriba { align-items: start; }

/* ===== Aprender el sistema: el curso como recorrido, cada clase y el cartelito de cada paso ===== */
/* Bienvenida: el saludo con la clase que toca a la izquierda; el avance a la derecha */
.aprender-hero { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: var(--s-5) var(--s-6);
  background: linear-gradient(100deg, var(--verde-50), var(--surface) 70%); }
.aprender-hero-txt h2 { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.aprender-hero-txt p { margin: 0 0 var(--s-4); color: var(--text-2); }
.aprender-hero-avance { min-width: 220px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.aprender-hero-num { font-size: 15px; color: var(--text-2); }
.aprender-hero-num strong { font-size: 30px; font-weight: 700; color: var(--verde-700); margin-right: 2px; }
.aprender-hero-avance .puesta-barra { margin-top: 6px; }
/* El recorrido: un círculo por unidad, unidos por una línea; verde lo aprobado, borde verde lo que se está haciendo */
.ruta { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.ruta-unidad { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); padding-bottom: var(--s-5); }
.ruta-unidad::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--border); }
.ruta-unidad:last-child::before { display: none; }
.ruta-unidad.hecha::before { background: var(--verde-600); }
.ruta-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--surface); border: 2px solid var(--border-strong); color: var(--muted); position: relative; z-index: 1; }
.ruta-unidad.actual .ruta-num { border-color: var(--verde-600); color: var(--verde-700); box-shadow: 0 0 0 4px var(--verde-100); }
.ruta-unidad.hecha .ruta-num { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.ruta-unidad.en-espera .ruta-card { opacity: .62; }
.ruta-unidad.ruta-final .ruta-num .i { width: 18px; height: 18px; }
.ruta-card summary { cursor: pointer; list-style: none; }
.ruta-card summary::-webkit-details-marker { display: none; }
.ruta-eti { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.ruta-cuenta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ruta-cuenta strong { font-size: 18px; color: var(--verde-700); }
/* Las clases de una unidad: número (o tilde), qué es, cuánto lleva y el botón */
.clases { list-style: none; margin: 0; padding: 0; }
.clase-item { display: grid; grid-template-columns: 28px 1fr auto auto; gap: var(--s-4); align-items: center; padding: 12px var(--inset); border-top: 1px solid var(--border); }
.clase-item.te-toca { background: var(--verde-50); }
.clase-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 650;
  border: 1.5px solid var(--border-strong); color: var(--text-2); background: var(--surface); }
.clase-item.te-toca .clase-num { border-color: var(--verde-600); color: var(--verde-700); }
.clase-item.hecha .clase-num { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.clase-txt { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.clase-txt strong { font-weight: 600; }
.clase-txt strong .badge { margin-left: 6px; vertical-align: 1px; }
.clase-txt > span { color: var(--muted); font-size: 12.5px; }
.clase-txt:hover strong { color: var(--verde-700); }
.clase-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Dentro de una clase: dónde estás (unidad y puntitos), lo que vas a hacer y lo ya cargado */
.aprender-donde { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); margin-top: 4px; }
.puntos { display: inline-flex; gap: 6px; }
.puntos span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.puntos span.hecha { background: var(--verde-600); }
.puntos span.esta { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--verde-600); }
.aprender-texto p { line-height: 1.6; }
.aprender-texto > p:first-child { margin-top: 0; }
.aprender-intro { font-size: 15px; margin: 0; color: var(--text); }
.aprender-pasos { list-style: none; margin: 0; padding: var(--s-2) var(--inset) var(--s-4); display: grid; gap: 10px; }
.aprender-pasos li { display: flex; align-items: center; gap: 12px; }
.aprender-pasos .clase-num { width: 24px; height: 24px; font-size: 11.5px; flex: none; }
.aprender-tiene { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 8px; }
.aprender-tiene li { display: flex; gap: 8px; align-items: flex-start; }
.aprender-tiene .i { color: var(--verde-600); flex: none; margin-top: 3px; }
.aprender-empezar .botones-form { flex-direction: column; align-items: stretch; }
.aprender-empezar .botones-form form, .aprender-empezar .botones-form .btn { width: 100%; }
/* El resultado: un sello grande al centro */
.aprender-resultado { max-width: 680px; margin: var(--s-4) auto 0; }
.aprender-resultado-cab { text-align: center; padding: var(--s-8) var(--s-6) var(--s-5); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.aprender-resultado-cab h2 { font-size: 21px; font-weight: 700; margin: 6px 0 0; }
.aprender-resultado-cab p { margin: 0 0 6px; color: var(--text-2); max-width: 52ch; }
.aprender-sello { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-50); color: var(--verde-600);
  box-shadow: 0 0 0 8px var(--verde-50); }
.aprender-sello .i { width: 30px; height: 30px; stroke-width: 2.4; }
.aprender-resultado.falta .aprender-sello { background: var(--naranja-50); color: var(--naranja-700); box-shadow: 0 0 0 8px var(--naranja-50); }
.aprender-resultado .aprender-texto { border-top: 1px solid var(--border); }
.aprender-resultado-pie { display: flex; justify-content: space-between; gap: 8px; }
/* Lo señalado en cada paso: un anillo verde que late; el cartelito, oscuro como las explicaciones del menú */
.clase-foco { outline: 3px solid var(--verde-600); outline-offset: 3px; border-radius: 6px; animation: clase-late 1.6s ease-in-out infinite; }
@keyframes clase-late { 50% { outline-color: var(--verde-100); } }
#menu .clase-foco { outline-offset: -3px; }   /* el menú recorta lo que sobresale */
.clase-globo { position: fixed; z-index: 95; width: 340px; max-width: calc(100vw - 24px); background: #23302a; color: #f2f5f3;
  border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 14px 40px -12px rgba(0,0,0,.45); }
.clase-globo.abajo { left: 50% !important; bottom: 20px; top: auto !important; transform: translateX(-50%); }
.clase-globo-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #b9c6bf; margin-bottom: 8px; }
.clase-globo-cab span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clase-globo-cab span:last-child { white-space: nowrap; }
.clase-globo-barra { height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); margin-bottom: 10px; overflow: hidden; }
.clase-globo-barra span { display: block; height: 100%; background: #7fd39a; }
.clase-globo-txt { margin: 0; font-size: 14px; line-height: 1.5; }
.clase-globo-pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.clase-globo-pie .btn-ghost { color: #d7e0db; margin-right: auto; }
.clase-globo-guia { font-size: 12.5px; color: #9fe0b2; margin-right: auto; }
.clase-globo-guia + .btn-ghost { margin-right: 0; }
/* La pestaña del aula: como la de la ayuda, sin el menú del sistema; el contenido centrado */
.aula-cab span { display: inline-flex; align-items: center; gap: 8px; }
.aula-cab span .i { color: var(--verde-600); }
.aula-volver { margin-left: auto; }
.aula-cuerpo { max-width: 1120px; margin: 0 auto; padding: var(--s-6) 28px var(--s-10); }
/* La empresa de práctica: la franja de arriba, en todas las pantallas mientras se practica */
.practica-franja { align-items: center; margin-bottom: var(--s-5); }
.practica-franja > div { flex: 1; }
.practica-franja form { flex: none; }
/* En el aula, mientras la clase se hace en la pestaña del sistema */
.aprender-en-curso { margin-bottom: var(--s-4); }
.aprender-en-curso[hidden] + p { margin-top: 0; }
.aprender-en-curso-paso { display: block; margin: 2px 0 8px; }
.aprender-en-curso .puesta-barra { margin-bottom: 4px; }
@media (max-width: 860px) {
  .aprender-hero { flex-direction: column; align-items: stretch; }
  .aprender-hero-avance { align-items: flex-start; }
  .clase-item { grid-template-columns: 28px 1fr auto; }
  .clase-meta { display: none; }
}

/* ===== En el celular: consultas y cargas básicas (el resto es para la computadora) =====
   Va al final para ganarles a las reglas de cada pantalla. */
@media (max-width: 760px) {
  /* Botones de la computadora, columnas secundarias de las listas (col-m) y elegir varios: no se muestran */
  .solo-escritorio, .tabla-datos .col-m, .tabla-datos .col-casilla, .cfg-elegir-todos, [data-barra-masiva] { display: none !important; }
  /* Los circuitos de Inicio: el nombre arriba y los números de a tres, sin las flechitas del camino */
  .cfg-fila.circuito { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .circuito-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  .circuito-paso { padding: 6px 4px; }
  .circuito-paso.con-flecha::before, .circuito-paso.aparte::before { display: none; }
  .circuitos > .card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .circuitos-der { flex-wrap: wrap; gap: 8px 14px; }
  /* Requiere atención: el nivel y el tema arriba, el aviso a todo el ancho y el botón abajo */
  .cfg-fila.atencion-fila { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .atencion-nivel { flex-direction: row; align-items: center; gap: 8px; }
  .atencion-tema { padding-left: 0; }
}