*{box-sizing:border-box;margin:0;padding:0}
/* Evita que aparezca el cursor/caret de texto al hacer clic en elementos que no son
   campos de escritura reales (encabezados, tarjetas, botones, celdas de tabla, etc.).
   Los inputs/textareas/selects reales conservan su comportamiento normal de edición. */
body{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
input,textarea,select,[contenteditable="true"]{user-select:text;-webkit-user-select:text;-moz-user-select:text}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--surface);color:var(--text);font-size:13px;transition:background 0.2s,color 0.2s}
:root{
  /* Superficies */
  --surface:#fff; --bg:#F8F9FA; --row-hover:#FAFAFA; --desc-zone-bg:#F8F9FF;
  --border:#E8EAED; --border-strong:#DADCE0; --border-soft:#EEEEEE;
  --text:#202124; --muted:#5F6368; --light:#9AA0A6; --disabled-text:#AEAEB2;

  /* Acentos */
  --blue:#1A73E8; --blue-dark:#1557B0; --blue-soft:#E8F0FE;
  --green:#1E8E3E; --green-dark:#166331; --green-soft:#E6F4EA; --green-border:#A8D5B5;
  --orange:#E8710A; --orange-dark:#B35A00; --orange-soft:#FEF3E2;
  --red:#D93025; --red-dark:#C5221F; --red-soft:#FCE8E6;
  --purple:#7B2FBE; --purple-soft:#F3E8FF; --purple-border:#C9B3E8;
  --yellow-text:#B06A00; --yellow-soft:#FEF9E2; --yellow-border:#F0D080; --amber-soft:#FFF8E1;
  --accent-indigo:#3D5AFE; --focus-bg:#EEF2FF; --hover-bg2:#F0F4FF;
  --gray-soft:#F1F3F4;

  /* Estilo Apple (botones neutros) */
  --apple-blue:#007AFF;--apple-blue-hover:#0062CC;
  --apple-gray:#6E6E73;--apple-btn:#F5F5F7;--apple-btn-hover:#E8E8ED
}

/* ── TEMA OSCURO (fallback — Cursor-like; Bohn y sepia sobreescriben en shell-v2.css) ── */
[data-theme="dark"]{
  --surface:#252526; --bg:#1E1E1E; --row-hover:#2A2D2E; --desc-zone-bg:#1E1E1E;
  --border:#3C3C3C; --border-strong:#454545; --border-soft:#333333;
  --text:#CCCCCC; --muted:#858585; --light:#6A6A6A; --disabled-text:#5A5A5A;

  --blue:#3794FF; --blue-dark:#4FC1FF; --blue-soft:#094771;
  --green:#4EC9B0; --green-dark:#6BD9C3; --green-soft:#0F2A24; --green-border:#1E5C50;
  --orange:#FF9D45; --orange-dark:#FFB066; --orange-soft:#2A1808;
  --red:#F48771; --red-dark:#FF9B88; --red-soft:#3B1212;
  --purple:#C08AF0; --purple-soft:#1A1028; --purple-border:#3E2870;
  --yellow-text:#DCDCAA; --yellow-soft:#2A2808; --yellow-border:#4A4010; --amber-soft:#2A2008;
  --accent-indigo:#3794FF; --focus-bg:#264F78; --hover-bg2:#2A2D2E;
  --gray-soft:#2D2D2D;

  --apple-blue:#3794FF;--apple-blue-hover:#4FC1FF;
  --apple-gray:#858585;--apple-btn:#2D2D2D;--apple-btn-hover:#3C3C3C
}

/* Logo FB Group: alterna según el tema */
.logo-fb-oscuro{display:none}
[data-theme="dark"] .logo-fb-claro{display:none}
[data-theme="dark"] .logo-fb-oscuro{display:block}

/* ── PANTALLAS ── */
.screen{display:none}
.screen.active{display:block}

/* ── SHELL ── */
.shell{max-width:1500px;margin:0 auto;padding:0 20px 20px}

/* ── TOPBAR ── */
/* ── Sidebar global ── */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:216px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 10px;transition:width 0.2s ease;position:sticky;top:0;height:100vh;overflow:visible;z-index:60}
.sidebar.collapsed{width:60px;padding:14px 8px}

/* Encabezado: logo centrado + botón para colapsar a la derecha.
   El nombre del proyecto ya no vive aquí: cada barra superior lleva el
   título de su sección y con eso basta. */
.sidebar-header{display:flex;flex-direction:column;padding:2px 4px 18px;overflow:hidden}
.sidebar-header-row{display:flex;align-items:center;gap:6px}
.sidebar.collapsed .sidebar-header{padding:2px 0 18px;align-items:center}
.sidebar.collapsed .sidebar-header-row{justify-content:center;width:100%}
/* flex:1 + centrado deja el logo al centro del espacio libre, con el botón
   de colapsar anclado a la derecha. */
.sidebar-logo{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 0.15s}
.sidebar-logo img{height:26px;width:auto}
.sidebar.collapsed .sidebar-logo{display:none}
.sidebar-toggle-btn{flex-shrink:0;width:30px;height:30px;border-radius:7px;border:none;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s,color 0.15s}
.sidebar-toggle-btn:hover{background:var(--apple-btn-hover);color:var(--text)}
.sidebar-toggle-btn svg{transition:transform 0.2s ease}
.sidebar.collapsed .sidebar-toggle-btn svg{transform:rotate(180deg)}

/* Sin overflow a propósito. Tenía overflow-y:auto y eso hacía que el
   navegador convirtiera también el overflow-x a auto, pintando una barra de
   desplazamiento horizontal inservible al colapsar. Con estas opciones no
   se necesita scroll: la barra se maneja solo con el botón de arriba. */
.sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;text-align:left;transition:background 0.15s,color 0.15s;overflow:hidden}
.sidebar-item:hover{background:var(--apple-btn-hover)}
.sidebar-item.active{background:var(--blue-soft);color:var(--blue)}
.sidebar-item svg{flex-shrink:0;transition:transform 0.25s cubic-bezier(.34,1.56,.64,1)}
.sidebar-item.active svg{transform:scale(1.15)}
.sidebar-item:hover svg{transform:scale(1.1)}

/* Etiquetas del nav. Van como clases y NO como estilos inline a propósito:
   un style="display:flex" inline le gana a cualquier selector, así que la
   regla que oculta el texto al colapsar no aplicaba y esos dos renglones
   quedaban descentrados respecto a los demás. */
.nav-label{display:flex;align-items:center;gap:6px;min-width:0}
.nav-label-stack{flex-direction:column;align-items:flex-start;line-height:1.25}
.nav-sublabel{font-size:10px;font-weight:400;opacity:0.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}

/* Colapsado: solo iconos, todos sobre el mismo eje vertical.
   El ancho fijo más el gap en cero evita que un renglón se corra si su
   etiqueta ocupaba más o si aparece un contador. */
.sidebar.collapsed .sidebar-item span,
.sidebar.collapsed .sidebar-item .nav-label{display:none}
.sidebar.collapsed .sidebar-item{justify-content:center;padding:9px 0;gap:0}
.sidebar.collapsed .sidebar-nav{align-items:center}
.sidebar.collapsed .sidebar-item,
.sidebar.collapsed .sidebar-toggle-btn,
.sidebar.collapsed .sidebar-footer .profile-chip{width:44px}

/* "Nuevo folio" — primera opción, como el "+" de Claude */
.sidebar-item-nuevo{color:var(--blue);font-weight:600;margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.sidebar-item-sep-top{margin-top:6px;padding-top:10px;border-top:1px solid var(--border)}

/* Configuración baja al fondo del nav, justo encima de la línea del perfil.
   El nav tiene flex:1, así que margin-top:auto se come el espacio libre y la
   deja pegada abajo. Separa los ajustes de las acciones de trabajo diario. */
#navConfig{margin-top:auto;margin-bottom:2px}
#navConfig:hover svg,
#navConfig.active svg{transform:rotate(72deg) scale(1.08)}
.sidebar-item-nuevo:hover{background:var(--blue-soft)}
.sidebar-item-nuevo:hover svg{transform:rotate(90deg)}
.sidebar.collapsed .sidebar-item-nuevo{margin-bottom:6px;padding-bottom:9px}
.sidebar.collapsed .sidebar-item-sep-top{margin-top:6px;padding-top:9px}

/* Pie del sidebar: solo el usuario (antes vivía repetido en cada barra superior) */
.sidebar-footer{margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.sidebar-footer .profile-wrap{width:100%}
.sidebar-footer .profile-chip{width:100%;border-radius:8px;padding:7px 8px}
.sidebar-footer .profile-info{flex:1;min-width:0}
.sidebar-footer .profile-name,.sidebar-footer .profile-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer .profile-chevron{flex-shrink:0;color:var(--light)}
.sidebar.collapsed .sidebar-footer .profile-chip{justify-content:center;padding:7px 0;gap:0}
.sidebar.collapsed .sidebar-footer .profile-info,.sidebar.collapsed .sidebar-footer .profile-chevron{display:none}
/* El menú cuelga hacia arriba porque el usuario ahora vive abajo del todo.
   Va con la cadena .sidebar-footer para que gane sobre la regla base de
   .profile-menu (que abre hacia abajo y aquí quedaría fuera de la pantalla). */
.sidebar-footer .profile-menu{top:auto;bottom:calc(100% + 6px);left:0;right:0;min-width:0;max-height:calc(100vh - 120px);overflow-y:auto}
.sidebar.collapsed .sidebar-footer .profile-menu{left:calc(100% + 8px);right:auto;top:auto;bottom:0;min-width:210px}
.app-main{flex:1;min-width:0}
.app-main:has(#screen-registro.active){overflow:hidden;height:100vh}

/* ── Iconos de acción del folio, junto al tracker ──
   Rejilla 2x2: bitácora y guardar arriba, devolver y cancelar abajo.
   Va con flex-wrap y ancho fijo en vez de grid a propósito: "Devolver" se
   oculta cuando el folio no está en tu etapa, y así los tres que quedan se
   reacomodan 2+1 con el último centrado, en lugar de dejar un hueco. */
.tracker-actions{display:flex;flex-wrap:wrap;width:74px;gap:6px;justify-content:center;align-content:center;flex-shrink:0}
/* Los cuatro con la misma silueta para que la rejilla se lea como un bloque */
.tracker-actions > button{width:34px;height:34px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tracker-cancel-btn{border:1px solid var(--border);background:var(--surface);color:var(--light);cursor:pointer;transition:color 0.15s,border-color 0.15s,background 0.15s}
/* Atenuado en reposo y rojo solo al apuntarlo: es la única acción destructiva
   del grupo, así que se distingue sin competir con las de uso diario. */
.tracker-cancel-btn:not(:disabled):not(.tracker-btn-off):hover{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.tracker-cancel-btn:not(:disabled):not(.tracker-btn-off):hover svg{color:var(--red)}
.tracker-cancel-btn:active{background:var(--red-soft);opacity:0.8}
.tracker-actions > button.tracker-btn-off,
.tracker-actions > button:disabled{
  opacity:0.38;
  cursor:default;
  pointer-events:none;
  filter:grayscale(0.85);
}
.tracker-actions > button.btn-icon-send.tracker-btn-off,
.tracker-actions > button.btn-icon-send:disabled{
  background:var(--apple-btn);
  color:var(--muted);
  border-color:var(--border);
}
.tracker-actions > button.btn-icon-approve.tracker-btn-off,
.tracker-actions > button.btn-icon-approve:disabled{
  background:var(--apple-btn);
  color:var(--muted);
  border-color:var(--border);
}
.tracker-cancel-btn.tracker-btn-off,
.tracker-cancel-btn:disabled{
  color:var(--light);
  border-color:var(--border);
  background:var(--surface);
}
.tracker-cancel-btn.tracker-btn-off:hover,
.tracker-cancel-btn:disabled:hover{
  color:var(--light);
  border-color:var(--border);
  background:var(--surface);
}

/* Separador entre el origen del folio y los datos de carga, dentro de la
   tarjeta de Solicitud activa. */
.info-sep{height:1px;background:var(--border);margin:7px 0;opacity:0.7}

/* ── Toggle rápido de tema + perfil ── */
.topbar-icon-btn{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;line-height:0;padding:0}
.tema-rapido-icon{display:block;flex-shrink:0;transform-origin:50% 50%;transition:transform 0.4s cubic-bezier(.4,0,.2,1)}
.guardar-icon{transition:transform 0.2s ease}
@keyframes guardarPulso{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
.guardar-icon.pulso{animation:guardarPulso 0.5s ease}
.topbar-icon-btn:hover{background:var(--apple-btn-hover)}
.profile-chip{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border-radius:20px;border:none;background:transparent;cursor:pointer;transition:background 0.15s}
.profile-chip:hover{background:var(--apple-btn-hover)}
.profile-avatar{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;transition:background 0.18s ease,color 0.18s ease}
.profile-avatar.profile-avatar-rol-admin{background:var(--purple-soft);color:var(--purple)}
.profile-avatar.profile-avatar-rol-ingenieria{background:var(--blue-soft);color:var(--blue-dark)}
.profile-avatar.profile-avatar-rol-compras{background:var(--amber-soft);color:var(--yellow-text)}
.profile-avatar.profile-avatar-rol-visualizacion{background:var(--gray-soft);color:var(--muted)}
[data-theme="dark"] .profile-avatar.profile-avatar-rol-visualizacion{background:var(--gray-soft);color:var(--light)}
.profile-info{text-align:left;line-height:1.25}
.profile-name{font-size:12.5px;font-weight:600;color:var(--text)}
.profile-role{font-size:10.5px;color:var(--muted)}

/* ── Menú desplegable del perfil ── */
.profile-wrap{position:relative}
.profile-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.14);padding:6px;z-index:400;display:none}
.profile-menu.show{display:block}
.profile-menu-lbl{font-size:9px;font-weight:600;color:var(--light);letter-spacing:0.06em;padding:7px 10px 4px;text-transform:uppercase}
.profile-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:7px;cursor:pointer;font-size:12px;color:var(--text);font-family:inherit;text-align:left;transition:background 0.12s}
.profile-menu-item:hover{background:var(--row-hover)}
.profile-menu-item.activo{background:var(--blue-soft);color:var(--blue-dark);font-weight:500}
.profile-menu-item.peligro{color:var(--red)}
.profile-menu-sep{height:1px;background:var(--border);margin:5px 4px}
.profile-menu-check{margin-left:auto;color:var(--blue);display:flex;align-items:center}

/* ── Bitácora de comentarios ── */
.bitacora-panel{border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-top:16px;overflow:hidden}
.bitacora-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
.rol-sidebar-stack{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.rol-sidebar-body{display:flex;flex-direction:column;flex:1;min-height:0}
.rol-sidebar-section-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  min-height:36px;
  box-sizing:border-box;
  background:var(--gray-soft);
  border-bottom:1px solid var(--border);
  border-left:3px solid var(--blue);
  flex-shrink:0;
}
.rol-sidebar-section-title{font-size:11px;font-weight:600;color:var(--text);letter-spacing:0.02em}
.bitacora-panel-body{display:flex;flex-direction:column;flex:1;min-height:0}
/* El botón de cerrar ya tiene su propio renglón arriba (ver el padding-top de
   .bitacora-modal), así que el encabezado puede usar todo su ancho. */
.bitacora-modal .bitacora-hint{white-space:nowrap}

/* ── Encabezado de los modales (bitácora y buzón) ──
   Va fuera del panel, en la misma fila que el botón de cerrar. Antes era una
   barra con fondo gris DENTRO del panel, y como el panel ya tiene su propio
   borde y fondo, quedaba una tarjeta dentro de otra tarjeta dentro del cristal
   del modal: tres capas para un título. Aquí el título flota sobre el cristal
   y la separación la da el borde del panel de abajo. */
.modal-head{background:transparent;border-bottom:none;padding:0 40px 11px 2px;min-height:21px}
.modal-head .bitacora-title{font-size:13px}
/* Sin margen superior: el panel arranca justo debajo del título */
.bitacora-modal .bitacora-panel{margin-top:0}
.bitacora-title{font-size:12px;font-weight:600;color:var(--text)}

/* ── Buzón de mensajes (acceso global del sidebar) ── */
.buzon-lista{display:flex;flex-direction:column;gap:6px;padding:10px;overflow-y:auto;max-height:60vh}
.buzon-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);cursor:pointer;text-align:left;transition:border-color 0.15s,background 0.15s}
.buzon-item:hover{border-color:var(--blue);background:var(--blue-soft)}
.buzon-cuerpo{flex:1;min-width:0}
.buzon-linea1{display:flex;align-items:baseline;gap:8px}
.buzon-folio{font-size:13px;font-weight:600;color:var(--text)}
.buzon-cuando{font-size:10px;color:var(--light);margin-left:auto;white-space:nowrap}
.buzon-linea2{font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buzon-flecha{color:var(--light);display:flex;flex-shrink:0}

/* Marca de texto modificado. Existe para que quien ya leyó el comentario tenga
   forma de notar que cambió: el aviso de "no leído" ya se había apagado. */
.bitacora-editado{font-size:9px;color:var(--light);font-style:italic;border:1px solid var(--border);border-radius:4px;padding:0 4px;line-height:1.5}

/* Punto de aviso del sidebar: se ve cuando la barra está colapsada y la
   etiqueta con el número queda oculta. */
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;display:none}
.sidebar.collapsed .sidebar-item .nav-dot{display:block;position:absolute;top:7px;right:7px}
.sidebar.collapsed #navBitacora{position:relative}
.bitacora-hint{font-size:10px;color:var(--light);margin-left:auto}
.bitacora-lista{max-height:260px;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.bitacora-vacio{font-size:11px;color:var(--light);text-align:center;padding:18px 0}
.bitacora-item{display:flex;gap:10px}
.bitacora-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:var(--gray-soft);color:var(--muted)}
.bitacora-avatar.area-ingenieria{background:var(--blue-soft);color:var(--blue-dark)}
.bitacora-avatar.area-compras{background:var(--amber-soft);color:var(--yellow-text)}
.bitacora-avatar.area-admin{background:var(--purple-soft);color:var(--purple)}
.bitacora-cuerpo{flex:1;min-width:0}
.bitacora-meta{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--light);margin-bottom:3px;flex-wrap:wrap}
.bitacora-area{font-weight:600;color:var(--muted)}
.bitacora-autor{color:var(--light)}
.bitacora-lock{font-size:9px}
.bitacora-edit-btn{background:none;border:none;color:var(--blue);cursor:pointer;font-size:10px;font-weight:500;padding:0 3px;margin-left:auto;font-family:inherit}
.bitacora-edit-btn:hover{text-decoration:underline}
.bitacora-edit{display:flex;flex-direction:column;gap:6px}
.bitacora-edit-btns{display:flex;gap:6px}

/* ── Contexto del folio en la barra superior (folio, REQ, proyecto) ── */
.pill.pill-folio{font-size:14px;font-weight:600;padding:5px 14px;border-radius:8px;letter-spacing:0.01em}
.ctx-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctx-topbar .req-chip{font-size:13px;font-weight:600;padding:5px 12px;border-radius:8px}
.ctx-topbar .reg-card-proy{font-size:13px;color:var(--text);font-weight:500}

/* ── Layout de dos columnas en las ventanas por rol ──
   2/3 para la zona de captura, 1/3 para la bitácora tipo chat. */
.shell-rol{max-width:1820px}
.rol-layout{display:flex;gap:16px;align-items:stretch}
.rol-main{flex:2;min-width:0}
.rol-chat{flex:1;min-width:300px;max-width:440px;display:flex;flex-direction:column}

/* ── Ingeniería, Compras y Mesa: tabla + rail lateral (panel unificado Información) ── */
#screen-compras .rol-layout-compras,
#screen-ing .rol-layout-ing,
#screen-mesa .rol-layout-mesa{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
  gap:0;
}
#screen-ing .rol-intro-ing,
#screen-compras .rol-intro-compras,
#screen-mesa .rol-mesa-intro{grid-column:1/-1;margin:10px 0 8px;flex-shrink:0}
.rol-intro-ing-title{font-size:14px;font-weight:600}
.rol-intro-ing-sub{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
}
.rol-intro-ing-oblig{
  flex-shrink:0;
  text-align:right;
  font-size:10px;
  color:var(--light);
  white-space:nowrap;
}
.req-asterisk{color:var(--red);font-weight:700}
#screen-ing .rol-table-ing,
#screen-compras .rol-table-compras,
#screen-mesa .rol-table-mesa{
  min-width:0;
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#screen-ing .rol-table-ing .table-wrap,
#screen-compras .rol-table-compras .table-wrap,
#screen-mesa .rol-table-mesa .table-wrap{
  flex:1;
  width:100%;
  max-width:100%;
  min-height:0;
  max-height:none;
  overflow-x:auto;
  overflow-y:auto;
}
#screen-ing .rol-layout-ing.sidebar-colapsado .rol-table-ing .table-wrap,
#screen-compras .rol-layout-compras.sidebar-colapsado .rol-table-compras .table-wrap,
#screen-mesa .rol-layout-mesa.sidebar-colapsado .rol-table-mesa .table-wrap{width:100%}
#screen-ing .rol-layout-ing.sidebar-colapsado table.mesa.mesa-ing{width:100%;min-width:1032px}
#screen-ing .rol-layout-ing.sidebar-colapsado table.mesa.mesa-ing.mesa-ing-validacion{min-width:1064px}
#screen-compras .rol-layout-compras.sidebar-colapsado table.mesa.mesa-compras{width:100%;min-width:1206px}
#screen-compras .rol-layout-compras.sidebar-colapsado table.mesa.mesa-compras.mesa-compras-externa,
#screen-compras .rol-layout-compras.sidebar-colapsado table.mesa.mesa-compras.mesa-compras-cotizando{min-width:1106px}
#screen-mesa .rol-layout-mesa.sidebar-colapsado table.mesa{width:100%;min-width:900px}
#screen-compras .shell-rol-compras,
#screen-ing .shell-rol-ing,
#screen-mesa .shell-rol-mesa{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main sidebar";
  gap:8px;
  flex:1;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
  padding-right:0 !important;
  margin-right:0;
}
#screen-compras .shell-rol-compras.sidebar-colapsado,
#screen-ing .shell-rol-ing.sidebar-colapsado,
#screen-mesa .shell-rol-mesa.sidebar-colapsado{
  grid-template-columns:minmax(0,1fr) 44px;
}
#screen-compras .shell-rol-main,
#screen-ing .shell-rol-main,
#screen-mesa .shell-rol-main{
  grid-area:main;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#screen-compras .rol-sidebar-rail,
#screen-ing .rol-sidebar-rail,
#screen-mesa .rol-sidebar-rail{
  grid-area:sidebar;
  display:grid;
  grid-template-columns:0fr 44px;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "sidebar-main sidebar-toggle"
    "sidebar-main sidebar-toggle";
  flex-shrink:0;
  align-self:stretch;
  min-height:0;
  width:44px;
  max-width:380px;
  overflow:hidden;
  transition:grid-template-columns 0.32s cubic-bezier(0.4,0,0.2,1), width 0.32s cubic-bezier(0.4,0,0.2,1), max-width 0.32s cubic-bezier(0.4,0,0.2,1);
  border-left:1px solid var(--border-soft);
  background:var(--surface);
  border-radius:12px 0 0 12px;
  margin-right:0;
}
#screen-compras .rol-sidebar-rail:not(.colapsado),
#screen-ing .rol-sidebar-rail:not(.colapsado),
#screen-mesa .rol-sidebar-rail:not(.colapsado){
  grid-template-columns:minmax(0,336px) 44px;
  width:380px;
  max-width:380px;
}
#screen-compras .rol-sidebar-actions.tracker-actions-compras,
#screen-ing .rol-sidebar-actions.tracker-actions-ing,
#screen-mesa .rol-sidebar-actions.tracker-actions-mesa{
  grid-area:sidebar-main;
  grid-column:1;
  grid-row:1;
  align-self:start;
  flex-shrink:0;
  width:100%;
  min-width:0;
  max-width:none;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:8px 6px;
  border-bottom:1px solid var(--border-soft);
  box-sizing:border-box;
  overflow:hidden;
}
#screen-compras .rol-sidebar-toggle-slot,
#screen-ing .rol-sidebar-toggle-slot,
#screen-mesa .rol-sidebar-toggle-slot{
  grid-area:sidebar-toggle;
  grid-row:1 / -1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:6px 0 0;
  border-left:1px solid var(--border-soft);
  box-sizing:border-box;
  z-index:2;
  background:var(--surface);
}
#screen-compras .rol-sidebar-toggle-compras,
#screen-ing .rol-sidebar-toggle-ing,
#screen-mesa .rol-sidebar-toggle-mesa{
  margin:0;
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:8px;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
#screen-compras .rol-sidebar-toggle-compras svg,
#screen-ing .rol-sidebar-toggle-ing svg,
#screen-mesa .rol-sidebar-toggle-mesa svg{
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
  transform-origin:center center;
}
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-toggle-compras svg,
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-toggle-ing svg,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-toggle-mesa svg{
  transform:scaleX(-1);
}
#screen-compras .rol-sidebar-rail .rol-chat,
#screen-ing .rol-sidebar-rail .rol-chat,
#screen-mesa .rol-sidebar-rail .rol-chat{
  grid-area:sidebar-main;
  grid-column:1;
  grid-row:2;
  flex:1;
  min-height:0;
  width:336px;
  min-width:336px;
  max-width:336px;
  overflow:hidden;
}
/* Contenido a ancho fijo: la animación recorta el panel como cortina
   (texto estable, sin reacomodo progresivo al desplegar). */
#screen-compras .rol-sidebar-rail:not(.colapsado) .rol-sidebar-actions,
#screen-ing .rol-sidebar-rail:not(.colapsado) .rol-sidebar-actions,
#screen-mesa .rol-sidebar-rail:not(.colapsado) .rol-sidebar-actions,
#screen-compras .rol-sidebar-rail .rol-sidebar-stack,
#screen-ing .rol-sidebar-rail .rol-sidebar-stack,
#screen-mesa .rol-sidebar-rail .rol-sidebar-stack{
  width:336px;
  min-width:336px;
  max-width:336px;
  box-sizing:border-box;
}
#screen-compras .rol-sidebar-rail .rol-sidebar-body,
#screen-ing .rol-sidebar-rail .rol-sidebar-body,
#screen-mesa .rol-sidebar-rail .rol-sidebar-body{
  opacity:1;
  transition:none;
}
#screen-compras .rol-sidebar-rail .datos-folio-valor,
#screen-ing .rol-sidebar-rail .datos-folio-valor,
#screen-mesa .rol-sidebar-rail .datos-folio-valor{
  word-break:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}
#screen-compras .rol-sidebar-rail .bitacora-texto,
#screen-ing .rol-sidebar-rail .bitacora-texto,
#screen-mesa .rol-sidebar-rail .bitacora-texto{
  word-break:normal;
  overflow-wrap:anywhere;
}
#screen-compras .rol-sidebar-rail.colapsado,
#screen-ing .rol-sidebar-rail.colapsado,
#screen-mesa .rol-sidebar-rail.colapsado{
  grid-template-columns:0fr 44px;
  width:44px;
  min-width:44px;
  max-width:44px;
}
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-toggle-slot,
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-toggle-slot,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-toggle-slot{
  grid-area:sidebar-toggle;
  grid-column:2;
  grid-row:1;
  border-left:none;
  border-bottom:none;
  padding:6px 0 0;
}
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-actions,
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-actions,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-actions{
  grid-area:sidebar-toggle;
  grid-column:2;
  grid-row:2;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  padding:32px 4px 8px;
  gap:4px;
  border-bottom:none;
}
#screen-compras .rol-sidebar-actions .tracker-cancel-btn,
#screen-ing .rol-sidebar-actions .tracker-cancel-btn,
#screen-mesa .rol-sidebar-actions .tracker-cancel-btn{
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
#screen-compras .rol-sidebar-rail.colapsado #btnImportarDPCompras,
#screen-compras .rol-sidebar-rail.colapsado #btnVerDPCompras,
#screen-compras .rol-sidebar-rail.colapsado #btnCancelarCompras,
#screen-compras .rol-sidebar-rail.colapsado #btnCopiarCorreoCompras{
  display:none;
}
#screen-ing .rol-sidebar-rail.colapsado #btnCancelarIng{
  display:none;
}
#screen-mesa .rol-sidebar-rail.colapsado #btnDevolverMesa,
#screen-mesa .rol-sidebar-rail.colapsado #cardsToggleBtn{
  display:none;
}
#screen-compras .rol-sidebar-rail.colapsado .rol-chat,
#screen-ing .rol-sidebar-rail.colapsado .rol-chat,
#screen-mesa .rol-sidebar-rail.colapsado .rol-chat{display:none}
#screen-compras .rol-chat .rol-sidebar-stack,
#screen-ing .rol-chat .rol-sidebar-stack,
#screen-mesa .rol-chat .rol-sidebar-stack{
  border-radius:0;
  border-top:none;
}
.rol-sidebar-body > .datos-folio-panel-embed:first-child .rol-sidebar-section-head{border-top:none}
#screen-compras .datos-folio-section-head .datos-folio-collapse-btn,
#screen-ing .datos-folio-section-head .datos-folio-collapse-btn,
#screen-mesa .datos-folio-section-head .datos-folio-collapse-btn{
  margin-left:auto;
}
#screen-compras .datos-folio-panel-embed,
#screen-ing .datos-folio-panel-embed,
#screen-mesa .datos-folio-panel-embed{
  flex-shrink:0;
}
#screen-compras .rol-sidebar-body .bitacora-panel-embed,
#screen-ing .rol-sidebar-body .bitacora-panel-embed,
#screen-mesa .rol-sidebar-body .bitacora-panel-embed{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-lista,
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-lista,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-lista{
  min-height:0;
}
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-nuevo,
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-nuevo,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-nuevo{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:10px 12px 12px;
}
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-input,
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-input,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-input{
  width:100%;
  min-height:54px;
  line-height:1.45;
  resize:none;
  padding:8px 10px;
}
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-nuevo .btn-bitacora,
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-nuevo .btn-bitacora,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-nuevo .btn-bitacora{
  align-self:flex-end;
}
#screen-compras .flow-tracker-compras-solo .flow-tracker-compras-row,
#screen-ing .flow-tracker-ing-solo .flow-tracker-ing-row,
#screen-mesa .flow-tracker-mesa-solo .flow-tracker-mesa-row{
  display:block;
}
#screen-compras .flow-tracker-compras-solo .flow-tracker-steps-wrap,
#screen-ing .flow-tracker-ing-solo .flow-tracker-steps-wrap,
#screen-mesa .flow-tracker-mesa-solo .flow-tracker-steps-wrap{
  width:100%;
}
#screen-compras .flow-tracker-compras-solo .flow-tracker-status-row,
#screen-ing .flow-tracker-ing-solo .flow-tracker-status-row,
#screen-mesa .flow-tracker-mesa-solo .flow-tracker-status-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
#screen-mesa .flow-tracker-mesa-solo .flow-panel{margin-top:8px}
#screen-ing .rol-sidebar-rail.colapsado,
#screen-compras .rol-sidebar-rail.colapsado,
#screen-mesa .rol-sidebar-rail.colapsado{
  width:44px;
  min-width:44px;
}
#screen-ing .bitacora-head.rol-sidebar-head,
#screen-compras .bitacora-head.rol-sidebar-head,
#screen-mesa .bitacora-head.rol-sidebar-head{
  display:grid;
}
#screen-ing .rol-sidebar-head{
  grid-template-columns:auto minmax(0,1fr) auto;
}
#screen-compras .rol-sidebar-head{
  grid-template-columns:minmax(0,1fr);
  padding:10px 12px;
}
#screen-mesa .rol-sidebar-head,
#screen-ing .rol-sidebar-head{
  flex-shrink:0;
  display:grid;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  min-height:42px;
}
#screen-mesa .rol-sidebar-head{
  grid-template-columns:minmax(0,1fr) auto;
}
#screen-ing .rol-sidebar-head{
  grid-template-columns:auto minmax(0,1fr) auto;
}
#screen-ing .rol-sidebar-head .bitacora-title,
#screen-compras .rol-sidebar-head .bitacora-title,
#screen-mesa .rol-sidebar-head .bitacora-title{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  transition:opacity 0.18s ease;
}
#screen-ing .rol-sidebar-head .rol-sidebar-toggle,
#screen-compras .rol-sidebar-head .rol-sidebar-toggle,
#screen-mesa .rol-sidebar-head .rol-sidebar-toggle{
  margin-left:0;
  flex-shrink:0;
  transition:background 0.15s,color 0.15s,border-color 0.15s;
}
#screen-ing .rol-sidebar-head .rol-sidebar-toggle svg,
#screen-compras .rol-sidebar-head .rol-sidebar-toggle svg,
#screen-mesa .rol-sidebar-head .rol-sidebar-toggle svg{
  transition:transform 0.22s ease;
}
#screen-ing .rol-sidebar-rail.colapsado .bitacora-title,
#screen-compras .rol-sidebar-rail.colapsado .bitacora-title,
#screen-mesa .rol-sidebar-rail.colapsado .bitacora-title{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-head,
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-head,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-head{
  grid-template-columns:0 auto;
  justify-content:end;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:10px 6px;
  min-height:42px;
  border-bottom:none;
}
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-head-icon,
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-head-icon,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-head-icon{display:none}
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-toggle,
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-toggle,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-toggle{
  margin:0;
  width:32px;
  height:32px;
  border-radius:8px;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  position:relative;
  z-index:2;
  flex-shrink:0;
}
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-stack,
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-stack,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-stack{
  width:100%;
  max-width:100%;
  min-width:0;
}
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-toggle:hover,
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-toggle:hover,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-toggle:hover{
  background:var(--apple-btn-hover);
  border-color:var(--border-strong);
  color:var(--text);
}
#screen-ing .rol-sidebar-body,
#screen-compras .rol-sidebar-body,
#screen-mesa .rol-sidebar-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:opacity 0.24s ease;
  opacity:1;
}
#screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-body,
#screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-body,
#screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-body{
  opacity:0;
  flex:0;
  min-height:0;
  overflow:hidden;
  pointer-events:none;
}
#screen-ing .rol-chat .datos-folio-panel-embed,
#screen-compras .rol-chat .datos-folio-panel-embed,
#screen-mesa .rol-chat .datos-folio-panel-embed{flex-shrink:0}
#screen-ing .rol-chat,
#screen-compras .rol-chat,
#screen-mesa .rol-chat{
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
#screen-ing .rol-sidebar-stack,
#screen-compras .rol-sidebar-stack,
#screen-mesa .rol-sidebar-stack{
  width:100%;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
#screen-ing .rol-chat .rol-sidebar-stack .bitacora-panel-embed,
#screen-ing .rol-chat .rol-sidebar-stack .datos-folio-panel-embed,
#screen-compras .rol-chat .rol-sidebar-stack .bitacora-panel-embed,
#screen-compras .rol-chat .rol-sidebar-stack .datos-folio-panel-embed,
#screen-mesa .rol-chat .rol-sidebar-stack .bitacora-panel-embed,
#screen-mesa .rol-chat .rol-sidebar-stack .datos-folio-panel-embed{
  border:none;
  border-radius:0;
  margin:0;
  background:transparent;
  box-shadow:none;
}
#screen-ing .rol-chat .rol-sidebar-stack .datos-folio-panel-embed .rol-sidebar-section-head,
#screen-compras .rol-chat .rol-sidebar-stack .datos-folio-panel-embed .rol-sidebar-section-head,
#screen-mesa .rol-chat .rol-sidebar-stack .datos-folio-panel-embed .rol-sidebar-section-head{
  border-radius:0;
  width:100%;
}
#screen-ing .rol-chat .rol-sidebar-stack .bitacora-panel-embed > .rol-sidebar-section-head,
#screen-compras .rol-chat .rol-sidebar-stack .bitacora-panel-embed > .rol-sidebar-section-head,
#screen-mesa .rol-chat .rol-sidebar-stack .bitacora-panel-embed > .rol-sidebar-section-head{
  width:100%;
  border-top:1px solid var(--border);
}
#screen-ing .rol-sidebar-body .datos-folio-panel-embed,
#screen-ing .rol-sidebar-body .bitacora-panel-embed,
#screen-compras .rol-sidebar-body .datos-folio-panel-embed,
#screen-compras .rol-sidebar-body .bitacora-panel-embed,
#screen-mesa .rol-sidebar-body .datos-folio-panel-embed,
#screen-mesa .rol-sidebar-body .bitacora-panel-embed{
  width:100%;
}
#screen-ing .rol-chat .bitacora-panel-embed,
#screen-compras .rol-chat .bitacora-panel-embed,
#screen-mesa .rol-chat .bitacora-panel-embed{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-panel-body,
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-panel-body,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-panel-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-lista,
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-lista,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-lista{
  flex:1;
  min-height:0;
  max-height:none;
  overflow-y:auto;
}
#screen-ing .rol-chat .bitacora-panel-embed .bitacora-nuevo,
#screen-compras .rol-chat .bitacora-panel-embed .bitacora-nuevo,
#screen-mesa .rol-chat .bitacora-panel-embed .bitacora-nuevo{flex-shrink:0}
#screen-ing .rol-chat > .rol-sidebar-stack:first-child,
#screen-compras .rol-chat > .rol-sidebar-stack:first-child,
#screen-mesa .rol-chat > .rol-sidebar-stack:first-child{margin-top:0}
#screen-ing .datos-folio-panel-embed .datos-folio-body,
#screen-compras .datos-folio-panel-embed .datos-folio-body,
#screen-mesa .datos-folio-panel-embed .datos-folio-body{
  transition:max-height 0.26s ease,opacity 0.2s ease,padding 0.26s ease;
  max-height:240px;
  overflow:hidden;
}
#screen-ing .datos-folio-panel-embed.colapsado .datos-folio-body,
#screen-compras .datos-folio-panel-embed.colapsado .datos-folio-body,
#screen-mesa .datos-folio-panel-embed.colapsado .datos-folio-body{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
}
#screen-compras .datos-folio-panel-embed .datos-folio-body{
  max-height:none;
  overflow:visible;
}
.rol-chat .bitacora-panel{margin-top:0;flex:1;display:flex;flex-direction:column;min-height:0}
/* La primera tarjeta de la columna derecha quedaba pegada a la línea de la
   barra superior. Estos 14px son los mismos que trae el encabezado de la
   tabla, así que además alinea el borde de la tarjeta con ese título.
   Aplica a la tarjeta que vaya primero, sea la de datos o la bitácora. */
.rol-chat > .rol-sidebar-stack:first-child,
.rol-chat > .datos-folio-panel:first-child,
.rol-chat > .bitacora-panel:first-child{margin-top:14px}
.rol-chat .bitacora-lista{flex:1;max-height:none;min-height:220px}

/* Las dos ventanas de captura ocupan el alto completo del viewport: antes la
   tabla se encogía al número de artículos y dejaba media pantalla en blanco.
   Se aplica solo a estas dos pantallas; las demás siguen creciendo con su
   contenido y scrolleando de forma normal. */
#screen-ing.active, #screen-compras.active, #screen-mesa.active{
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:100%;
  overflow:hidden;
}
#screen-mesa .shell-rol:not(.shell-rol-mesa){
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  width:100%;
  overflow:hidden;
}
#screen-compras .shell-rol.shell-rol-compras,
#screen-ing .shell-rol.shell-rol-ing,
#screen-mesa .shell-rol.shell-rol-mesa{
  flex:1;
  min-height:0;
  width:100%;
  overflow:hidden;
}
#screen-ing .rol-tracker-bar,
#screen-compras .rol-tracker-bar,
#screen-mesa .rol-tracker-bar{flex-shrink:0}
#screen-ing .rol-layout,
#screen-compras .rol-layout,
#screen-mesa .rol-layout-mesa{flex:1;min-height:0;overflow:hidden}
#screen-ing .rol-table-ing .table-wrap,
#screen-compras .rol-table-compras .table-wrap,
#screen-mesa .rol-table-mesa .table-wrap{flex:1;max-height:none;min-height:0;overflow-x:auto;overflow-y:auto}

/* Historial: una sola barra de desplazamiento (solo la tabla).
   La pantalla ocupa el viewport; stats, filtros y paginación quedan fijos. */
#screen-registro.active{display:flex;flex-direction:column;height:100vh;overflow:hidden}
#screen-registro .topbar{flex-shrink:0}
#screen-registro .shell{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:12px}
#screen-registro .reg-retencion-aviso,
#screen-registro .reg-stats-header,
#screen-registro .reg-stats-panel,
#screen-registro .reg-toolbar,
#screen-registro .reg-paginacion{flex-shrink:0}
#screen-registro .reg-table-wrap{flex:1;min-height:0;max-height:none;overflow:hidden}

/* Valor de solo lectura del panel de datos del folio (ventana de Compras).
   Misma caja que el input de Ingeniería, pero sin el gris de "deshabilitado":
   aquí no es un campo bloqueado, es un dato de consulta. */
.datos-folio-valor{border:1px solid transparent;border-radius:7px;background:var(--gray-soft);color:var(--text);font-size:12px;padding:6px 9px;min-height:29px;display:flex;align-items:center;word-break:break-word}
.datos-folio-valor.vacio{color:var(--light)}
@media (max-width:1180px){
  .rol-layout{flex-direction:column}
  .rol-chat{max-width:none;width:100%}
  .rol-chat .bitacora-lista{max-height:260px}
  #screen-ing .rol-layout-ing,
  #screen-compras .rol-layout-compras,
  #screen-mesa .rol-layout-mesa{
    display:flex;
    flex-direction:column;
  }
  #screen-ing .rol-sidebar-rail,
  #screen-compras .rol-sidebar-rail,
  #screen-mesa .rol-sidebar-rail{
    width:100%;
  }
  #screen-ing .rol-sidebar-rail.colapsado,
  #screen-compras .rol-sidebar-rail.colapsado,
  #screen-mesa .rol-sidebar-rail.colapsado{
    width:100%;
  }
  #screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-body,
  #screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-body,
  #screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-body{
    flex:0;
    opacity:0;
  }
  #screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-head,
  #screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-head,
  #screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-head{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    flex:0;
    width:100%;
    padding:10px 14px;
    border-bottom:1px solid var(--border);
  }
  #screen-ing .rol-sidebar-rail.colapsado .rol-sidebar-head-icon,
  #screen-compras .rol-sidebar-rail.colapsado .rol-sidebar-head-icon,
  #screen-mesa .rol-sidebar-rail.colapsado .rol-sidebar-head-icon{display:none}
  #screen-ing .rol-chat,
  #screen-compras .rol-chat,
  #screen-mesa .rol-chat{
    width:100%;
    max-width:none;
  }
  #screen-ing .rol-sidebar-stack,
  #screen-compras .rol-sidebar-stack,
  #screen-mesa .rol-sidebar-stack{width:100%}
  /* En columna las dos zonas ya no caben en una sola pantalla: se devuelve el
     scroll normal en vez de forzar 100vh. */
  #screen-ing.active, #screen-compras.active, #screen-mesa.active{display:block;height:auto}
  #screen-compras .shell-rol.shell-rol-compras,
  #screen-ing .shell-rol.shell-rol-ing,
  #screen-mesa .shell-rol.shell-rol-mesa{
    display:flex;
    flex-direction:column;
  }
  #screen-compras .shell-rol,
  #screen-mesa .shell-rol{display:block}
  #screen-ing .table-wrap, #screen-compras .table-wrap, #screen-mesa .table-wrap{max-height:62vh}
}

/* Aspecto de conversación: burbuja por mensaje */
.bitacora-item .bitacora-texto{background:var(--bg);border-radius:9px;padding:7px 10px;border:1px solid var(--border-soft)}
.bitacora-item.mio .bitacora-texto{background:var(--blue-soft);border-color:transparent}
.bitacora-nuevo.bitacora-cerrada{opacity:0.55}
.bitacora-nuevo.bitacora-cerrada .bitacora-input{cursor:not-allowed}
.aviso-cerrado{margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--amber-soft);color:var(--yellow-text);font-size:11px;font-weight:500;border:1px solid transparent}

/* ── Devoluciones ── */
.dev-chip{font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:5px;background:var(--red-soft);color:var(--red);white-space:nowrap}
.bitacora-item.devolucion .bitacora-texto,
.bitacora-item.cancelacion .bitacora-texto{background:var(--red-soft);border-color:transparent}
.bitacora-tag-dev,
.bitacora-tag-cancel{font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--red-soft);color:var(--red);letter-spacing:0.04em;text-transform:uppercase}
.aviso-cerrado.aviso-devolucion{background:var(--red-soft);color:var(--red)}

/* ── Pantalla de Pendientes ── */
.nav-count{background:var(--blue);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* Barra de chips: filtran y muestran el conteo a la vez */
.pend-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 14px}
.pend-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pend-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:20px;padding:5px 11px;font-size:11.5px;font-family:inherit;cursor:pointer;transition:all 0.13s}
.pend-chip:hover{border-color:var(--border-strong);color:var(--text)}
.pend-chip-n{font-size:10px;font-weight:700;background:var(--gray-soft);color:var(--muted);border-radius:9px;min-width:17px;padding:1px 5px;text-align:center}
.pend-chip.activo{background:var(--blue);border-color:transparent;color:#fff}
.pend-chip.activo .pend-chip-n{background:rgba(255,255,255,0.25);color:#fff}
.pend-chip-mia{opacity:0.6;font-weight:700}
.pend-chip-devueltos.activo{background:var(--red);color:#fff}

.pend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.pend-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface);cursor:pointer;transition:border-color 0.15s,transform 0.12s,box-shadow 0.15s;display:flex;flex-direction:column;gap:9px}
.pend-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 18px -8px rgba(0,0,0,0.18)}
.pend-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pend-card-folio{font-size:15px;font-weight:600;letter-spacing:-0.2px}
.pend-card-req{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pend-card-area{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pend-card-prog{display:flex;flex-direction:column;gap:5px}
.pend-bar{height:5px;border-radius:3px;background:var(--gray-soft);overflow:hidden}
.pend-bar-fill{height:100%;background:var(--green);border-radius:3px;transition:width 0.25s}
.pend-card-meta{font-size:10px;color:var(--muted)}
.pend-card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--border-soft)}
.pend-vacio{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;color:var(--light);font-size:12.5px}
.pend-vacio-sub{font-size:11px;color:var(--light);text-align:center;margin-top:-4px}
.pend-vacio-link{background:none;border:none;color:var(--blue);font-size:11px;font-family:inherit;cursor:pointer;padding:0 0 0 4px;text-decoration:underline}

/* ── Avisos en la tarjeta: mensaje nuevo vs llegada a nueva área ── */
.pend-card-avisos{display:flex;align-items:center;gap:6px}
.aviso-msj{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--green-soft);color:var(--green-dark)}
.llego-chip{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--green-soft);color:var(--green-dark);letter-spacing:0.03em;white-space:nowrap;animation:pend-pulse 1.8s ease-in-out infinite}
.pend-card-llego{border-color:var(--green)}
@keyframes pend-pulse{0%,100%{opacity:1}50%{opacity:0.55}}

/* ── Panel "Datos del folio" — lateral, sobre la bitácora ── */
.datos-folio-panel{border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;margin-bottom:10px}
.datos-folio-body{padding:10px 14px 12px;display:flex;flex-direction:column;gap:9px}
.datos-folio-fila-par{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:start}
.datos-folio-fila-par .datos-folio-campo input,
.datos-folio-fila-par .datos-folio-valor.datos-folio-tipo-cot{
  box-sizing:border-box;
  width:100%;
  height:31px;
  min-height:31px;
  padding:6px 9px;
  font-size:12px;
  line-height:17px;
  border-radius:7px;
  border-width:1px;
  border-style:solid;
}
.datos-folio-tipo-cot{font-weight:500;text-align:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datos-folio-tipo-cot.tipo-portal{color:var(--purple);background:var(--purple-soft);border-color:color-mix(in srgb, var(--purple) 22%, var(--border))}
.datos-folio-tipo-cot.tipo-externa{color:var(--blue);background:var(--blue-soft);border-color:color-mix(in srgb, var(--blue) 22%, var(--border))}
.datos-folio-tipo-cot.tipo-pendiente{color:var(--amber-dark,#856404);background:var(--amber-soft,#fef3cd);border-color:color-mix(in srgb, #ffc107 22%, var(--border))}
.datos-folio-campo{display:flex;flex-direction:column;gap:3px}
.datos-folio-campo label{font-size:9.5px;font-weight:600;color:var(--muted);letter-spacing:0.03em}
.datos-folio-campo input{border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font-family:inherit;font-size:12px;padding:6px 9px;outline:none;width:100%;box-sizing:border-box}
.datos-folio-campo input:focus{border-color:var(--blue)}
.datos-folio-campo input:disabled{background:var(--gray-soft);color:var(--muted);cursor:not-allowed}
.datos-folio-campo select{border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font-family:inherit;font-size:12px;padding:6px 9px;outline:none;width:100%;box-sizing:border-box}
.datos-folio-campo select:disabled{background:var(--gray-soft);color:var(--muted);cursor:not-allowed}
.datos-folio-panel.cerrado .datos-folio-estado-hint{color:var(--muted)}
.datos-folio-panel.cerrado .datos-folio-estado-icon{color:var(--muted)}
.datos-folio-panel.cerrado .datos-folio-campo label{color:var(--light)}
.datos-folio-panel.cerrado .datos-folio-tipo-cot{
  color:var(--muted) !important;
  background:var(--gray-soft) !important;
  border-color:var(--border) !important
}
.datos-folio-estado-hint{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.datos-folio-estado-icon{flex-shrink:0;opacity:0.9}
.datos-folio-estado-hint.datos-folio-estado-editable{color:var(--muted)}
.datos-folio-estado-hint.datos-folio-estado-editable .datos-folio-estado-icon{color:var(--blue)}
.datos-folio-estado-hint.datos-folio-estado-bloqueado{color:var(--muted)}
.datos-folio-estado-hint.datos-folio-estado-bloqueado .datos-folio-estado-icon{color:var(--muted)}
.datos-folio-panel.cerrado .datos-folio-estado-hint{color:var(--muted)}
.datos-folio-panel.cerrado .datos-folio-estado-icon{color:var(--muted)}
.datos-folio-estado-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.datos-folio-section-head{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:8px;
  row-gap:2px;
}
.datos-folio-section-head .rol-sidebar-section-title{
  grid-column:1;
  grid-row:1;
  white-space:nowrap;
}
.datos-folio-section-head .datos-folio-estado-hint,
.datos-folio-section-head > .bitacora-hint{
  grid-column:1;
  grid-row:2;
  margin-left:0;
  font-size:9px;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.datos-folio-section-head .datos-folio-collapse-btn{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  margin-left:0;
}
.datos-folio-collapse-btn{
  flex-shrink:0;
  width:24px;
  height:24px;
  margin-left:4px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.datos-folio-collapse-btn:hover{background:var(--apple-btn-hover);color:var(--text)}
.datos-folio-collapse-btn svg{transition:transform 0.22s ease}
.datos-folio-panel:not(.colapsado) .datos-folio-collapse-btn svg{transform:rotate(180deg)}

/* ── Bitácora como panel flotante (mesa de administración) ── */
/* El padding vuelve a ser uniforme: el encabezado ahora comparte la primera
   fila con el botón de cerrar, así que ya no hace falta reservarle un renglón
   vacío arriba. Ambos quedan centrados en la misma línea. */
.bitacora-modal{position:relative;background:color-mix(in srgb, var(--surface) 62%, transparent);backdrop-filter:blur(32px) saturate(170%);-webkit-backdrop-filter:blur(32px) saturate(170%);border:1px solid color-mix(in srgb, var(--border-strong) 45%, transparent);border-radius:18px;width:min(560px,94vw);max-height:82vh;display:flex;flex-direction:column;box-shadow:0 24px 60px -14px rgba(0,0,0,0.4);overflow:hidden;padding:14px}
.bitacora-modal .bitacora-panel{margin-top:0;flex:1;display:flex;flex-direction:column;min-height:0;border:none;background:transparent}
.bitacora-modal .bitacora-lista{flex:1;max-height:none;min-height:200px}
.bit-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--blue);color:#fff;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}


/* ── Mesa MDM — layout alineado con Compras ── */
#screen-mesa .mesa-context-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0;
  margin:0 0 8px;
  font-size:11px;
}
#screen-mesa .mesa-filters{flex-shrink:0;margin-bottom:8px}
#screen-mesa .rol-table-mesa{
  min-width:0;
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.bitacora-texto{font-size:11.5px;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.bitacora-nuevo{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg)}
.bitacora-input{flex:1;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-family:inherit;font-size:11.5px;padding:7px 10px;resize:vertical;min-height:34px;outline:none}
.bitacora-input:focus{border-color:var(--blue)}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:50;margin-bottom:0;transition:box-shadow 0.2s}
.shell{padding-top:0}
.app-name{font-size:15px;font-weight:500}
/* Título de sección al tamaño que tenía como encabezado dentro del contenido,
   ahora que la barra superior ya no repite el nombre del proyecto. */
.app-name-lg{font-size:19px;font-weight:600;letter-spacing:-0.2px}
.app-sub{font-size:11px;color:var(--muted);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:10px}

/* ── BOTONES ── */
.btn{font-size:11px;font-weight:500;padding:8px 16px;border-radius:20px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--blue);display:inline-flex;align-items:center;gap:5px;transition:all 0.15s;white-space:nowrap}
.btn:hover{background:var(--bg)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:var(--green-dark)}
.btn-orange{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-orange:hover{background:var(--orange-dark)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}
.btn-back{color:var(--apple-gray);border:none;background:transparent;padding:6px 10px;font-size:12px;font-weight:400;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all 0.15s}
.btn-back:hover{background:var(--apple-btn);color:var(--text)}
.btn-sm{padding:5px 12px;font-size:10px}
.btn-bitacora{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-bitacora:hover{background:var(--bg);border-color:var(--muted);color:var(--text)}
.btn-icon{padding:7px 9px;color:var(--muted);border-color:var(--border)}
.btn-icon:hover{color:var(--blue);border-color:var(--blue);background:var(--hover-bg2)}

/* ── PILLS ── */
.pill{display:inline-block;font-size:9px;font-weight:500;padding:2px 8px;border-radius:10px}
.p-green{background:var(--green-soft);color:var(--green)}
.p-blue{background:var(--blue-soft);color:var(--blue)}
.p-orange{background:var(--orange-soft);color:var(--orange)}
.p-red{background:var(--red-soft);color:var(--red)}
.p-gray{background:var(--gray-soft);color:var(--muted)}
.p-purple{background:var(--purple-soft);color:var(--purple)}
.p-yellow{background:var(--yellow-soft);color:var(--yellow-text)}

/* ════════════════════════════════════
   PANTALLA 1 — REGISTRO
════════════════════════════════════ */
.reg-hero{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}
.reg-hero-left h1{font-size:24px;font-weight:400;color:var(--text);margin-bottom:4px}
.reg-hero-left p{font-size:12px;color:var(--muted)}

/* Historial (#screen-registro) — revamp visual scoped */
#screen-registro.active{background:var(--v2-bg,#F8FAFD)}
[data-theme="dark"] #screen-registro.active{background:var(--v2-bg)}

#screen-registro .reg-stats-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 12px;min-height:28px}
#screen-registro .reg-stats-header.stats-collapsed{margin-bottom:6px}
#screen-registro .reg-stats-periodo{font-size:12px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-registro .reg-stats-header.stats-collapsed .reg-stats-periodo{display:none}

#screen-registro .reg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
#screen-registro .rs-card{
  border-radius:18px;padding:18px 20px;color:#fff;min-height:108px;
  display:flex;flex-direction:column;justify-content:space-between;
}
#screen-registro .rs-card-total{background:var(--v2-stat-total,var(--v2-blue-900,#1A3347))}
#screen-registro .rs-card-completas{background:var(--v2-stat-completas,var(--v2-blue-500,#4A7394))}
#screen-registro .rs-card-canceladas{background:var(--v2-stat-canceladas,var(--v2-blue-400,#5A8499))}
#screen-registro .rs-card-articulos{background:var(--v2-stat-articulos,var(--v2-blue-200,#B4C9DC));color:var(--v2-stat-articulos-text,var(--v2-blue-900,#1A3347))}
#screen-registro .rs-card-num{font-size:36px;font-weight:600;line-height:1;letter-spacing:-0.03em}
#screen-registro .rs-card-articulos .rs-card-num{color:var(--v2-stat-articulos-text,var(--v2-blue-900,#1A3347))}
#screen-registro .rs-card-label{font-size:14px;font-weight:600;margin-top:6px}
#screen-registro .rs-card-sub{font-size:12px;opacity:0.88;margin-top:2px}
#screen-registro .rs-card-articulos .rs-card-sub{color:var(--v2-stat-articulos-sub,var(--v2-blue-700,#2A4A66));opacity:1}
@media (max-width:1100px){#screen-registro .reg-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){#screen-registro .reg-stats{grid-template-columns:1fr}}

#screen-registro .reg-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:0}
#screen-registro .reg-toolbar{margin-bottom:12px}
#screen-registro .reg-busqueda-input-wrap{
  display:inline-flex;align-items:center;gap:8px;padding:0 14px;
  border:1px solid var(--border);border-radius:999px;background:var(--v2-input-bg,var(--surface));
  min-height:34px;width:min(280px,100%);margin-left:auto;transition:border-color 0.15s
}
#screen-registro .reg-busqueda-input-wrap:focus-within{border-color:var(--v2-blue-500,#4A7394)}
#screen-registro .reg-busqueda-input-wrap svg{color:var(--muted);flex-shrink:0}
#screen-registro .reg-busqueda-input{width:100%;min-width:120px;border:none;background:transparent;font-size:13px;color:var(--text);outline:none}

#screen-config .filter-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;padding:8px 16px;border-radius:999px;
  border:1px solid var(--border);background:var(--v2-input-bg,var(--surface));color:var(--text);cursor:pointer;transition:all 0.15s;font-family:inherit
}
#screen-config .filter-btn:hover{border-color:var(--v2-blue-500,#4A7394);color:var(--v2-blue-700,#2A4A66)}
#screen-config .filter-btn.active{background:var(--v2-accent-solid,var(--v2-blue-900,#1A3347));border-color:var(--v2-accent-solid,var(--v2-blue-900,#1A3347));color:var(--v2-accent-solid-fg,#fff)}

#screen-registro .filter-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;padding:8px 14px 8px 16px;border-radius:999px;
  border:1px solid var(--v2-filter-inactive-border,var(--border));
  background:var(--v2-filter-inactive-bg,var(--v2-surface));
  color:var(--text);cursor:pointer;transition:all 0.15s;font-family:inherit
}
#screen-registro .filter-btn:hover{border-color:var(--v2-filter-active-border,var(--v2-blue-500))}
#screen-registro .filter-btn.active{
  background:var(--v2-filter-active-bg);border-color:var(--v2-filter-active-border);
  color:var(--v2-filter-active-text);font-weight:600
}
#screen-registro .filter-btn-dot{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--v2-filter-dot-idle,var(--border));
  background:transparent;flex-shrink:0;margin-left:2px
}
#screen-registro .filter-btn.active .filter-btn-dot{
  border-color:var(--v2-filter-dot-ring);background:var(--v2-filter-dot-fill);
  box-shadow:inset 0 0 0 2px var(--v2-filter-active-bg)
}
#screen-registro .filter-label{font-size:12px;color:var(--muted);margin-right:4px}
#screen-registro .filter-clear-btn{font-size:12px;padding:7px 12px;border-radius:999px;border:none;background:none;color:var(--red);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background 0.15s}
#screen-registro .filter-clear-btn:hover{background:var(--red-soft)}
#screen-registro .mesa-filter-select{
  font-size:12px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--v2-input-bg,var(--surface));color:var(--text);cursor:pointer
}

#screen-registro .reg-stats-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:none;background:none;color:var(--muted);font-size:11px;cursor:pointer;border-radius:6px;transition:color 0.15s,background 0.15s;flex-shrink:0;margin-left:auto}
#screen-registro .reg-stats-toggle:hover{color:var(--text);background:var(--gray-soft)}
#screen-registro .reg-stats-toggle svg{transition:transform 0.2s}
#screen-registro .reg-stats-panel.collapsed{display:none}
#screen-registro .reg-stats-toggle.collapsed svg{transform:rotate(-90deg)}

#screen-registro .reg-table-wrap{
  border:1px solid var(--v2-bg-muted,#E4ECF3);border-radius:18px;overflow:hidden;
  background:var(--v2-surface,var(--surface));display:flex;flex-direction:column;min-height:0
}
#screen-registro .reg-table-head{
  display:grid;grid-template-columns:1.05fr 0.5fr 0.95fr 0.95fr 0.42fr 0.62fr 0.62fr 0.72fr 0.62fr;
  gap:8px;padding:12px 16px;background:var(--v2-bg-soft,#F0F5FA);
  font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
  flex-shrink:0;position:sticky;top:0;z-index:1
}
#screen-registro .reg-table-body{
  padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--v2-bg-soft,#F0F5FA);
  flex:1;min-height:0;overflow:auto
}
#screen-registro .reg-row{
  display:grid;grid-template-columns:1.05fr 0.5fr 0.95fr 0.95fr 0.42fr 0.62fr 0.62fr 0.72fr 0.62fr;
  gap:8px;align-items:center;padding:12px 14px;background:var(--v2-row-bg,var(--v2-surface,var(--surface)));border-radius:12px;
  font-size:13px;transition:background 0.12s,box-shadow 0.12s;border:1px solid transparent
}
#screen-registro .reg-row:hover{background:var(--v2-row-hover,var(--v2-surface-hover,var(--surface)));box-shadow:0 1px 4px rgba(0,0,0,0.35);border-color:var(--border)}
[data-theme="dark"] #screen-registro .reg-row:hover{box-shadow:0 1px 4px rgba(0,0,0,0.45);border-color:var(--border-strong)}
#screen-registro .reg-folio-main{font-weight:600;color:var(--v2-row-folio,var(--v2-blue-900,#1A3347));font-size:13px}
#screen-registro .reg-folio-sub{font-size:11px;color:var(--v2-row-muted,var(--light));margin-top:2px}
#screen-registro .reg-row .muted{color:var(--v2-row-muted,var(--muted))}
#screen-registro .reg-badge-estado{
  display:inline-flex;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px
}
#screen-registro .reg-badge-estado.done{background:var(--v2-badge-done-bg,var(--v2-blue-soft,#E8EEF4));color:var(--v2-badge-done-text,var(--v2-blue-700,#2A4A66))}
#screen-registro .reg-badge-estado.cancel{background:var(--v2-badge-cancel-bg,#F5E0E0);color:var(--v2-badge-cancel-text,#8B3A3A)}
#screen-registro .reg-badge-estado.area{background:var(--gray-soft);color:var(--muted)}
#screen-registro .reg-table-actions{
  display:grid;
  grid-template-columns:76px 58px 26px 26px 26px;
  align-items:center;
  justify-items:end;
  gap:4px;
  width:100%;
  min-width:0;
}
#screen-registro .reg-action-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex-shrink:0;
}
#screen-registro .reg-action-slot-btn{
  width:auto;
  min-width:52px;
  justify-content:flex-end;
}
#screen-registro .reg-table-actions .btn-sm{padding:5px 12px;font-size:11px;border-radius:999px;white-space:nowrap}
#screen-registro .reg-icon-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;color:var(--light);display:inline-flex;align-items:center;justify-content:center}
#screen-registro .reg-icon-btn:hover{color:var(--v2-blue-700,#2A4A66);background:var(--v2-blue-soft,#E8EEF4)}
#screen-registro .reg-icon-btn.con-nota{color:var(--orange)}
#screen-registro .reg-empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px;background:var(--v2-surface,var(--surface));border-radius:12px}

#screen-registro .reg-paginacion{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-top:1px solid var(--border);background:var(--v2-surface,var(--surface));flex-shrink:0;flex-wrap:wrap
}
#screen-registro .reg-pag-meta{font-size:13px;color:var(--muted)}
#screen-registro .reg-pag-meta strong{color:var(--text);font-weight:600}
#screen-registro .reg-pag-btns{display:flex;align-items:center;gap:4px}
#screen-registro .reg-pag-btn{
  min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:50%;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;font-family:inherit;padding:0 8px
}
#screen-registro .reg-pag-btn:hover:not(:disabled){background:var(--v2-blue-soft,#E8EEF4);color:var(--v2-blue-900,#1A3347)}
#screen-registro .reg-pag-btn.active{background:var(--v2-accent-solid,var(--v2-blue-900,#1A3347));color:var(--v2-accent-solid-fg,#fff)}
#screen-registro .reg-pag-btn:disabled{opacity:0.35;cursor:not-allowed}
#screen-registro .reg-pag-ellipsis{padding:0 4px;color:var(--light);font-size:13px;user-select:none}

@media (max-width:900px){
  #screen-registro .reg-table-head,#screen-registro .reg-row{
    grid-template-columns:1fr 0.55fr 0.85fr 0.55fr 0.45fr
  }
  #screen-registro .reg-table-head > :nth-child(n+6),
  #screen-registro .reg-row > :nth-child(n+6){display:none}
}

/* Buscador de modelos (Consultar modelos) */
.mod-busqueda-bar{display:flex;gap:10px;margin-top:16px;margin-bottom:10px;align-items:center}
.mod-busqueda-input-wrap{flex:1;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);min-height:42px}
.mod-busqueda-input-wrap svg{color:var(--muted);flex-shrink:0}
.mod-busqueda-input{flex:1;border:none;background:transparent;font-size:13px;color:var(--text);outline:none;min-width:0}
.mod-busqueda-opciones{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
.mod-busqueda-modo-label{font-size:12px;color:var(--muted);white-space:nowrap}
.mod-busqueda-modo{
  font-size:12px;
  padding:6px 28px 6px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
  min-width:180px;
}
.mod-busqueda-modo:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.mod-busqueda-hint{font-size:11px;color:var(--light);margin-left:auto}
.mod-resultados-meta{font-size:11px;color:var(--muted);margin-bottom:8px;min-height:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mod-limpiar-busqueda{font-size:11px;padding:2px 10px;margin-left:4px}
.mod-resultados-wrap{margin-bottom:24px}
.mod-tabla td.mod-celda-modelo{
  font-weight:500;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.45;
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.mod-tabla td.mod-celda-qad{
  font-weight:500;
  white-space:nowrap;
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
  color:var(--blue);
  font-family:ui-monospace,monospace;
  font-size:11px;
}
.mod-tabla td:last-child{white-space:nowrap}
.mod-empty-row td{text-align:center;padding:28px 14px!important;color:var(--muted)!important}
.mod-badge{display:inline-block;font-size:9px;font-weight:600;padding:2px 7px;border-radius:8px;margin-right:2px}
.mod-badge-exacta{background:var(--green-soft);color:var(--green)}
.mod-badge-similar{background:var(--orange-soft);color:var(--orange)}
.mod-badge-cancelado{background:var(--red-soft);color:var(--red)}
.mod-badge-proceso{background:var(--blue-soft);color:var(--blue)}
.mod-badge-alta{background:var(--green-soft);color:var(--green)}
.mod-badge-no-alta{background:var(--orange-soft);color:var(--orange)}
.mod-estado-cell{white-space:nowrap}

/* Detalle folio — estilos completos al final del archivo (sección MODAL) */
.folio-text{font-weight:500;color:var(--text);font-size:12px}
.reg-empty{padding:40px;text-align:center;color:var(--light);font-size:12px}
.reg-table td.reg-empty{white-space:normal;padding:32px 16px}
.reg-retencion-aviso{font-size:12px;color:var(--muted);background:var(--orange-soft);border:1px solid color-mix(in srgb,var(--orange) 35%,transparent);border-radius:10px;padding:10px 14px;margin:-6px 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reg-retencion-aviso strong{color:var(--text);font-weight:600}
.retencion-resumen{font-size:12px;color:var(--muted);line-height:1.55;padding:2px 0}
.retencion-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;margin-left:4px}
.retencion-badge-activo{background:var(--green-soft);color:var(--green)}
.retencion-badge-archivo{background:var(--orange-soft);color:var(--orange)}

/* ── Tarjetas de historial/tablero ── */
.reg-cards-wrap{display:flex;flex-direction:column;gap:10px}
.reg-cards{display:flex;flex-direction:column;gap:10px}
.reg-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface);transition:border-color 0.15s}
.reg-card:hover{border-color:var(--border-strong)}
.reg-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.reg-card-folio{font-size:13px;font-weight:600;color:var(--text)}
.reg-card-sub{font-size:11px;color:var(--muted);margin-top:2px}
.reg-card-badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.reg-card-req{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px}
.req-chip{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--gray-soft);color:var(--muted);letter-spacing:0.03em;white-space:nowrap}
.reg-card-proy{font-size:10.5px;color:var(--muted)}
.cot-chip{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--blue-soft);color:var(--blue-dark);letter-spacing:0.03em;white-space:nowrap}
.creador-chip{font-size:9.5px;font-weight:500;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--muted);white-space:nowrap}

.badge-area{font-size:10px;font-weight:500;padding:3px 9px;border-radius:6px;white-space:nowrap}
.badge-area.area-ingenieria{background:var(--blue-soft);color:var(--blue-dark)}
.badge-area.area-compras{background:var(--amber-soft);color:var(--yellow-text)}
.badge-area.area-validacion{background:var(--amber-soft);color:var(--yellow-text)}
.badge-area.area-completado{background:var(--green-soft);color:var(--green-dark)}
.badge-area.area-cancelada{background:var(--gray-soft);color:var(--light)}

.badge-antig{font-size:10px;font-weight:500;padding:3px 9px;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.badge-antig.antig-normal{background:var(--gray-soft);color:var(--muted)}
.badge-antig.antig-media{background:var(--amber-soft);color:var(--yellow-text)}
.badge-antig.antig-alta{background:var(--red-soft);color:var(--red)}

.reg-stepper{display:flex;align-items:center;margin:10px 0 8px}
.reg-step{display:flex;flex-direction:column;align-items:center;flex:1}
.reg-step-dot{width:11px;height:11px;border-radius:50%;background:var(--border-strong)}
.reg-step-dot.done{background:var(--green)}
.reg-step-dot.active{background:var(--orange);box-shadow:0 0 0 3px var(--amber-soft)}
.reg-step-label{font-size:9px;color:var(--light);margin-top:4px;white-space:nowrap}
.reg-step-label.active{color:var(--orange);font-weight:500}
.reg-step-line{flex:1;height:2px;background:var(--border-strong);margin-bottom:15px}
.reg-step-line.done{background:var(--green)}
.reg-step-line.active{background:var(--orange)}

.reg-card-note{font-size:10px;color:var(--muted)}
.reg-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
.reg-card-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}

.reg-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;white-space:nowrap}

/* Carga registro */
.reg-load-bar{border:1px dashed var(--border);border-radius:10px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;background:var(--bg)}
.reg-load-text{font-size:11px;color:var(--muted)}
.reg-load-text strong{color:var(--text)}

/* ════════════════════════════════════
   PANTALLA 2 — MESA DE TRABAJO
════════════════════════════════════ */
.mesa-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.mesa-topbar-left{display:flex;align-items:center;gap:12px}
.back-btn{font-size:11px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 0}
.back-btn:hover{color:var(--blue)}
.mesa-folio{font-size:15px;font-weight:700}
.mesa-folio-sub{font-size:11px;color:var(--muted);margin-top:1px}
.folio-chip{font-size:11px;font-weight:500;color:var(--blue);background:var(--blue-soft);padding:3px 10px;border-radius:20px}

/* Cards */
.cards{display:grid;grid-template-columns:1fr 1fr 0.8fr;gap:14px;margin-bottom:16px;margin-top:0}
.cards-actions-row{display:flex;align-items:center;gap:8px;padding-top:14px;margin-top:10px;border-top:1px solid var(--border);flex-wrap:wrap;margin-bottom:2px}

/* ── Rastreador de flujo ── */
.flow-tracker{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px 12px;margin-top:14px}
.chev-row{display:flex;gap:6px;min-width:0}
.chev-step{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 20px 9px 16px;background:var(--blue-soft);color:var(--text);cursor:default;user-select:none;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%);transition:filter 0.15s,background 0.15s,color 0.15s}
.chev-step:first-child{clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);border-radius:10px 0 0 10px;padding-left:14px}
.chev-step:hover{filter:none}
.flow-tracker-compact{padding:12px 14px 10px;margin:14px 0 0}
.flow-tracker-compact .chev-name{font-size:11px}
.flow-tracker-compact .chev-circle{width:30px;height:30px}
.flow-tracker-compact .chev-step{padding:7px 14px 7px 12px}

/* Tracker + acciones en zonas de rol (Ingeniería, Compras) */
.flow-tracker-rol{padding:10px 14px 8px;margin:0}
.flow-tracker-rol-row{display:flex;align-items:stretch;gap:14px}
.flow-tracker-rol .flow-tracker-steps-wrap{flex:1;min-width:0}
.flow-tracker-rol .chev-progress{margin-top:10px}
.flow-tracker-rol .chev-step{padding:6px 12px 6px 10px}
.flow-tracker-rol .chev-circle{width:28px;height:28px}
.flow-tracker-rol .chev-name{font-size:11px}
.flow-tracker-rol .flow-tracker-status{margin-top:8px;padding-top:8px}
.tracker-actions-divider{width:1px;background:var(--border);align-self:stretch;flex-shrink:0}
.tracker-actions-rol{width:74px;gap:6px}
.tracker-actions-compras{
  width:auto;min-width:0;max-width:none;flex-direction:column;gap:8px;align-items:stretch
}
.tracker-actions-group{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.tracker-actions-group-dp{padding-top:6px;border-top:1px solid var(--border-soft)}
.flow-tracker-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft)}
.flow-tracker-status-row .flow-tracker-status{margin:0;padding:0;border:none;flex:1;min-width:0}
.flow-tracker-status-row .dp-status-badge{margin:0;flex-shrink:0}
.tracker-actions .btn-icon-send{background:var(--blue);color:#fff;border-color:var(--blue)}
.tracker-actions .btn-icon-send:hover{background:var(--blue-dark);color:#fff;border-color:var(--blue-dark)}
.tracker-actions .btn-icon-send-verde{background:var(--green);color:#fff;border-color:var(--green)}
.tracker-actions .btn-icon-send-verde:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.tracker-actions .btn-icon-approve{background:var(--green);color:#fff;border-color:var(--green)}
.tracker-actions .btn-icon-approve:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.tracker-actions .btn-icon-reject{background:#dc3545;color:#fff;border-color:#dc3545}
.tracker-actions .btn-icon-reject:hover{background:#c82333;color:#fff;border-color:#c82333}

.flow-tracker-status{font-size:11px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft);line-height:1.45}
.chev-circle{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted);transition:background 0.15s,color 0.15s}
.chev-txt{min-width:0}
.chev-num{font-size:11px;font-weight:700;letter-spacing:0.5px;opacity:0.75}
.chev-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev-step.current{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}
.chev-step.current .chev-circle{background:rgba(255,255,255,0.94);color:var(--blue)}
.chev-step.done{background:var(--green-soft);color:var(--green)}
.chev-step.done .chev-circle{background:var(--surface);color:var(--green)}
.chev-step.viewing{outline:2px solid var(--blue);outline-offset:-2px}
.chev-step.viewing.done{outline-color:var(--green)}
.chev-desc-row{display:flex;gap:6px;margin-top:12px}
.chev-desc{flex:1;min-width:0;display:flex;gap:8px;align-items:flex-start;font-size:11px;color:var(--muted);line-height:1.45;padding:0 6px}
.chev-dot{width:8px;height:8px;border-radius:50%;background:var(--border);margin-top:3px;flex-shrink:0;transition:background 0.15s}
.chev-dot.current{background:var(--blue)}
.chev-dot.done{background:var(--green)}
.chev-progress{height:3px;background:var(--border);border-radius:2px;margin-top:12px;overflow:hidden}
.chev-progress-fill{height:100%;background:var(--blue);border-radius:2px;transition:width 0.3s ease;width:0}
.flow-panel{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.flow-panel-txt{font-size:12px;color:var(--muted)}

/* Pasado / presente / futuro */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;transition:box-shadow 0.18s;box-shadow:0 1px 4px rgba(0,0,0,0.07)}
.card:hover{box-shadow:0 6px 20px -10px color-mix(in srgb, var(--text) 20%, transparent)}
.card-label{font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
.card-label-icon-flat{display:flex;align-items:center;gap:6px}
.card-label-icon-flat svg{flex-shrink:0}
/* Encabezado del panel flotante de detalles */
.detalle-header{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding-right:30px}
.detalle-header-icon{width:38px;height:38px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.detalle-header-title{font-size:16px;font-weight:600;color:var(--text);line-height:1.25}
.detalle-header-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.folio-big{font-size:28px;font-weight:700;letter-spacing:-0.5px;margin-bottom:12px}

/* ── Toggle minimizar/expandir (barra unificada) ── */
.cards-toggle-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--blue);background:transparent;border:none;padding:8px 12px;border-radius:9px;cursor:pointer;transition:background 0.15s;white-space:nowrap;min-width:96px}
.cards-toggle-btn:hover{background:var(--blue-soft)}
.cards-toggle-btn svg{transition:opacity 0.15s}

/* ── Contenedor animable del panel expandido ── */
.cards-zone-body{position:relative;overflow:hidden;transition:height 0.28s cubic-bezier(.4,0,.2,1)}
/* Ventana flotante de detalles — estilo vidrio esmerilado sobre la mesa */
.detalle-panel{position:relative;background:color-mix(in srgb, var(--surface) 55%, transparent);backdrop-filter:blur(32px) saturate(170%);-webkit-backdrop-filter:blur(32px) saturate(170%);border:1px solid color-mix(in srgb, var(--border-strong) 45%, transparent);border-radius:18px;padding:26px 24px 12px;width:min(860px,94vw);max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px -14px rgba(0,0,0,0.4)}
#overlayDetalles{background:rgba(20,20,22,0.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.detalle-cerrar{position:absolute;top:14px;right:14px;width:21px;height:21px;border-radius:50%;border:none;background:var(--gray-soft);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s,color 0.15s;z-index:2}
.detalle-cerrar:hover{background:var(--red-soft);color:var(--red)}

/* ── Info compacta en la barra (folio, estado, stats) ── */
.ribbon-folio{font-size:16px;font-weight:700;letter-spacing:-0.2px;white-space:nowrap;flex-shrink:0}
.ribbon-divider{width:1px;height:16px;background:var(--border);flex-shrink:0}
.ribbon-stats{display:flex;gap:10px;white-space:nowrap;flex-shrink:0}
.ribbon-stat{font-size:11.5px;color:var(--muted);white-space:nowrap}
.ribbon-alert{font-size:11.5px;color:var(--red);font-weight:600;white-space:nowrap;flex-shrink:0}
@media (max-width:900px){
  .ribbon-stats{display:none}
  .cfg-layout{flex-direction:column}
  .cfg-nav{width:100%;position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .cfg-nav-group{width:100%;padding:8px 4px 2px}
  .cfg-nav-item{width:auto;padding:6px 12px;border:1px solid var(--border);border-radius:16px;font-size:11px}
  .cfg-nav-item.active{border-color:var(--blue)}
}

.info-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--bg)}
.info-row:last-of-type{border:none}
.info-lbl{font-size:11px;color:var(--muted)}
.info-val{font-size:11px;font-weight:500}
.save-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:500;color:var(--blue);border:1px solid var(--blue);padding:3px 10px;border-radius:20px;white-space:nowrap}
.resumen-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.stat{border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px;cursor:default;backdrop-filter:blur(10px)}
.stat-icon{margin-bottom:6px;display:flex}
.stat-n{font-size:26px;font-weight:600;line-height:1;color:#fff}
.stat-l{font-size:11px;font-weight:500}
.stat-gray{background:linear-gradient(135deg,rgba(60,60,60,0.9),rgba(60,60,60,0.75));border:1px solid rgba(255,255,255,0.08)}
.stat-gray .stat-icon{color:rgba(255,255,255,0.75)}
.stat-gray .stat-l{color:rgba(255,255,255,0.6)}
.stat-blue{background:linear-gradient(135deg,rgba(0,150,255,0.85),rgba(0,150,255,0.55));border:1px solid rgba(0,150,255,0.5)}
.stat-blue .stat-icon{color:#eafaff}
.stat-blue .stat-l{color:#dcf3ff}
.stat-green{background:linear-gradient(135deg,rgba(30,220,120,0.8),rgba(30,220,120,0.5));border:1px solid rgba(30,220,120,0.5)}
.stat-green .stat-icon{color:#ecfff4}
.stat-green .stat-l{color:#d9ffe9}
.stat-orange{background:linear-gradient(135deg,rgba(255,122,0,0.85),rgba(255,122,0,0.55));border:1px solid rgba(255,122,0,0.5)}
.stat-orange .stat-icon{color:#fff3e8}
.stat-orange .stat-l{color:#ffe4c2}

/* Variante compacta — icono + número + etiqueta en fila, para la ventana flotante de detalles */
.stat-grid-compact{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:4px}
.stat-compact{border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;cursor:default;backdrop-filter:blur(10px);min-width:0;aspect-ratio:1/1}
.stat-compact .stat-top{display:flex;align-items:center;gap:8px}
.stat-compact .stat-icon{margin:0;display:flex;flex-shrink:0}
.stat-compact .stat-n{font-size:30px;font-weight:600;line-height:1;color:#fff}
.stat-compact .stat-l{font-size:11.5px;font-weight:500;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.stat-grid-compact{grid-template-columns:1fr}}

/* Tarjeta gris muy tenue — hace contraste con las tarjetas de vidrio de color */
.card-glass-bg{position:relative;overflow:hidden}
.sub-note{font-size:10px;color:var(--light);margin-top:8px}
.val-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bg);gap:8px}
.val-row:last-of-type{border:none}
.val-lbl{font-size:11px;color:var(--muted);min-width:0}
.val-n{font-size:13px;font-weight:500;flex-shrink:0}
.alert-box{margin-top:10px;padding:7px 10px;background:var(--red-soft);border-radius:6px;font-size:10px;color:var(--red-dark)}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.btn-wide{grid-column:1/-1}

/* Tabla mesa */
.mesa-title{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:10px}
.table-wrap{border:1px solid var(--border);border-radius:10px;overflow-x:scroll;overflow-y:auto;max-height:62vh;scrollbar-width:auto}
.table-wrap::-webkit-scrollbar{height:12px;width:12px}
.table-wrap::-webkit-scrollbar-track{background:var(--bg)}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px;border:2px solid var(--bg)}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}
table.mesa thead th{position:sticky;top:0;z-index:2}
table.mesa thead tr:not(.group-row) th{top:var(--mesa-group-row-h,25px)}
table.mesa{border-collapse:separate;border-spacing:0;table-layout:fixed;width:2210px;min-width:2210px}
/* Ventanas por rol: menos columnas, así que anulan el ancho fijo de la mesa.
   Van DESPUÉS de table.mesa y con doble clase para ganar en especificidad. */
table.mesa.mesa-ing{width:1032px;min-width:1032px;max-width:none}
table.mesa.mesa-ing.mesa-ing-validacion{width:1064px;min-width:1064px}
table.mesa.mesa-ing col.col-desc-ref{width:507px}
table.mesa.mesa-ing td.col-desc-ref input[type=text],
table.mesa.mesa-ing td.col-desc-captura input[type=text]{min-width:0;width:100%;box-sizing:border-box;font-size:11px}
table.mesa.mesa-ing td.col-modelo-captura input[type=text]{width:100%;box-sizing:border-box;font-size:11px}
table.mesa.mesa-ing td.col-cantidad,
table.mesa.mesa-ing th.col-cantidad{padding-left:4px;padding-right:4px}
table.mesa.mesa-ing td.col-cantidad input[type=text]{text-align:center;padding-left:2px;padding-right:2px}
table.mesa.mesa-ing td.col-peso input[type=text]{
  text-align:center;width:100%;box-sizing:border-box;font-size:11px
}
table.mesa.mesa-ing td.col-peso input[type=text]::placeholder{text-align:center}
table.mesa.mesa-ing td.col-udm select{text-align:center;text-align-last:center;color:var(--text)}
table.mesa.mesa-ing td.col-udm select.udm-vacia{color:var(--light)}
table.mesa.mesa-ing td.col-udm select.udm-vacia:disabled{color:var(--light);-webkit-text-fill-color:var(--light)}
table.mesa.mesa-ing td.col-nppro input[type=text]{
  text-align:center;width:100%;box-sizing:border-box;font-size:11px
}
table.mesa.mesa-ing td.col-nppro input[type=text]::placeholder{text-align:center}
table.mesa.mesa-ing td input:disabled,
table.mesa.mesa-ing td select:disabled{
  opacity:1;color:var(--light);cursor:not-allowed;-webkit-text-fill-color:var(--light)
}
table.mesa.mesa-ing td select:disabled{opacity:1}
table.mesa.mesa-ing tr.fila-ing-vacia td{background:color-mix(in srgb, var(--bg) 92%, var(--border))}
table.mesa.mesa-ing tr.fila-ing-vacia .col-modelo-captura input{font-style:italic}
table.mesa.mesa-ing tr.fila-ing-vacia .col-desc-captura input::placeholder,
table.mesa.mesa-ing tr.fila-ing-vacia .col-peso input::placeholder,
table.mesa.mesa-ing tr.fila-ing-vacia .col-cantidad input::placeholder,
table.mesa.mesa-ing tr.fila-ing-vacia .col-nppro input::placeholder{color:transparent}
table.mesa.mesa-ing tr.fila-ing-activa td{background:var(--bg)}
table.mesa.mesa-ing:not(.mesa-ing-validacion) col.ing-col-check,
table.mesa.mesa-ing:not(.mesa-ing-validacion) .ing-col-check{display:none;width:0;padding:0;border:none}
table.mesa.mesa-ing tr.group-row th.group-lbl-articulo{
  position:sticky;left:0;text-align:center !important
}
table.mesa.mesa-ing tr.group-row th.group-lbl-articulo .mesa-edition-status{
  position:absolute;left:8px;top:50%;transform:translateY(-50%)
}
table.mesa.mesa-ing thead tr.group-row th.group-lbl-articulo{
  position:sticky;left:0;top:0;z-index:6;background:var(--bg)
}
table.mesa.mesa-ing thead tr:not(.group-row) th{
  position:sticky;
  top:var(--mesa-group-row-h,25px);
  z-index:4;
  background:var(--bg)
}
table.mesa.mesa-ing:not(.mesa-ing-validacion) thead tr:not(.group-row) th.col-desc-captura,
table.mesa.mesa-ing:not(.mesa-ing-validacion) tbody td.col-desc-captura{left:178px}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.col-desc-captura,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.col-desc-captura{left:210px}
table.mesa.mesa-ing th.col-desc-captura,
table.mesa.mesa-ing td.col-desc-captura{border-right:2px solid var(--border-strong)}
table.mesa.mesa-ing th.col-cantidad,
table.mesa.mesa-ing td.col-cantidad{border-right:2px solid var(--border-strong)}
table.mesa.mesa-ing thead tr:not(.group-row) th.ing-col-num,
table.mesa.mesa-ing tbody td.ing-col-num,
table.mesa.mesa-ing thead tr:not(.group-row) th.col-modelo-captura,
table.mesa.mesa-ing tbody td.col-modelo-captura,
table.mesa.mesa-ing thead tr:not(.group-row) th.col-desc-captura,
table.mesa.mesa-ing tbody td.col-desc-captura{
  position:sticky;background:var(--bg);z-index:1
}
table.mesa.mesa-ing thead tr:not(.group-row) th.ing-col-num,
table.mesa.mesa-ing thead tr:not(.group-row) th.col-modelo-captura,
table.mesa.mesa-ing thead tr:not(.group-row) th.col-desc-captura{z-index:5}
table.mesa.mesa-ing thead tr:not(.group-row) th.ing-col-num,
table.mesa.mesa-ing tbody td.ing-col-num{left:0}
table.mesa.mesa-ing:not(.mesa-ing-validacion) thead tr:not(.group-row) th.col-modelo-captura,
table.mesa.mesa-ing:not(.mesa-ing-validacion) tbody td.col-modelo-captura{left:28px}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.ing-col-check,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.ing-col-check,
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.ing-col-num,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.ing-col-num,
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.col-modelo-captura,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.col-modelo-captura,
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.col-desc-captura,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.col-desc-captura{
  position:sticky;background:var(--bg);z-index:1
}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.ing-col-check,
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.ing-col-num,
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.col-modelo-captura,
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.col-desc-captura{z-index:5}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.ing-col-check,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.ing-col-check{left:0}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.ing-col-num,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.ing-col-num{left:32px}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th.col-modelo-captura,
table.mesa.mesa-ing.mesa-ing-validacion tbody td.col-modelo-captura{left:60px}
table.mesa.mesa-ing:not(.mesa-ing-validacion) tbody tr:hover td.ing-col-num,
table.mesa.mesa-ing:not(.mesa-ing-validacion) tbody tr:hover td.col-modelo-captura,
table.mesa.mesa-ing:not(.mesa-ing-validacion) tbody tr:hover td.col-desc-captura{background:var(--row-hover)}
table.mesa.mesa-ing.mesa-ing-validacion tbody tr:hover td.ing-col-check,
table.mesa.mesa-ing.mesa-ing-validacion tbody tr:hover td.ing-col-num,
table.mesa.mesa-ing.mesa-ing-validacion tbody tr:hover td.col-modelo-captura,
table.mesa.mesa-ing.mesa-ing-validacion tbody tr:hover td.col-desc-captura{background:var(--row-hover)}
table.mesa.mesa-ing td:nth-child(n+4){z-index:0}
table.mesa.mesa-compras{width:1206px;min-width:1206px;max-width:none}
table.mesa.mesa-compras col.col-desc-ref{width:373px}
table.mesa.mesa-compras col.col-prov-ac{width:255px}
table.mesa.mesa-compras col.col-te-compra{width:80px}
table.mesa.mesa-compras td.col-desc-captura input{width:100%;box-sizing:border-box;font-size:11px;min-width:0}
table.mesa.mesa-compras th.col-te-compra{
  padding:5px 4px;min-width:80px;vertical-align:middle;white-space:nowrap
}
table.mesa.mesa-compras th.col-te-compra .th-te-label{
  display:inline;white-space:nowrap;line-height:1.2;letter-spacing:0.02em;font-size:9px
}
table.mesa.mesa-compras td.col-te-compra{padding-left:3px;padding-right:3px;text-align:center}
table.mesa.mesa-compras td.col-te-compra input[type=number],
table.mesa.mesa-compras td.col-te-compra input[type=text]{
  width:100%;max-width:52px;box-sizing:border-box;text-align:center;padding:4px 2px;font-size:11px;margin:0 auto
}
table.mesa.mesa-compras th.col-desc-ref,
table.mesa.mesa-compras td.col-desc-ref{
  border-right:2px solid var(--border-strong) !important;
  box-shadow:4px 0 6px -3px rgba(0,0,0,0.08)
}
table.mesa.mesa-compras th.col-te-compra,
table.mesa.mesa-compras td.col-te-compra{
  border-right:2px solid var(--border-strong) !important;
  box-shadow:4px 0 6px -3px rgba(0,0,0,0.08)
}
table.mesa.mesa-compras td.col-precio input.precio-vacio{color:var(--light)}
table.mesa.mesa-compras td.col-precio input.precio-vacio::placeholder{color:var(--light)}
table.mesa.mesa-compras td.col-precio input.precio-vacio:disabled{color:var(--light);-webkit-text-fill-color:var(--light)}
table.mesa.mesa-compras th.col-precio,
table.mesa.mesa-compras th.col-moneda,
table.mesa.mesa-compras th.col-comprador,
table.mesa.mesa-compras th.col-cant-cot,
table.mesa.mesa-compras td.col-precio,
table.mesa.mesa-compras td.col-moneda,
table.mesa.mesa-compras td.col-comprador,
table.mesa.mesa-compras td.col-cant-cot{
  text-align:center;
  padding-left:4px;
  padding-right:4px;
}
table.mesa.mesa-compras td.col-precio input[type=number],
table.mesa.mesa-compras td.col-precio input[type=text],
table.mesa.mesa-compras td.col-cant-cot input[type=number]{
  text-align:center;
  padding-left:2px;
  padding-right:2px;
}
table.mesa.mesa-compras td.col-moneda select,
table.mesa.mesa-compras td.col-comprador select{
  text-align:center;
  text-align-last:center;
}
table.mesa thead tr{background:var(--bg)}
table.mesa th{text-align:center !important}
table.mesa th{font-size:9px;font-weight:500;color:var(--muted);padding:8px 7px;text-align:left;letter-spacing:0.04em;white-space:nowrap;border-bottom:1px solid var(--border);background:var(--bg)}
table.mesa th.c{text-align:center}
table.mesa tbody tr{transition:background 0.1s}
table.mesa tbody tr:last-child td{border-bottom:none}
table.mesa tbody tr:hover{background:var(--row-hover)}
table.mesa td{font-size:11px;color:var(--text);padding:5px 7px;vertical-align:middle;border-bottom:1px solid var(--gray-soft)}
table.mesa td.c{text-align:center}
table.mesa td.muted{color:var(--light)}
table.mesa td.blue{color:var(--purple);font-weight:500}
table.mesa td input[type=text],table.mesa td input[type=number]{width:100%;border:none;background:transparent;font-size:11px;color:var(--text);font-family:inherit;padding:2px 0;outline:none}
table.mesa td input[type=text]:focus,table.mesa td input[type=number]:focus{background:var(--focus-bg);border-radius:3px;padding:2px 4px}
table.mesa td input[type=checkbox]{width:14px;height:14px;accent-color:var(--blue);cursor:pointer}
table.mesa td select{border:none;background:transparent;font-size:11px;color:var(--text);font-family:inherit;cursor:pointer;outline:none;width:100%;appearance:none;-webkit-appearance:none;padding-right:2px}
table.mesa td select:focus{background:var(--focus-bg);border-radius:3px}
.desc-cell{display:flex;flex-direction:column;gap:1px}
.desc-cnt{font-size:9px;text-align:right;color:var(--light)}
.dup-badge{cursor:help;font-size:13px;flex-shrink:0;line-height:1}
.dup-badge.dup-exacto{filter:none}
.dup-badge.dup-similar{opacity:0.85}
.mesa-dup-btn.evaluado{border-color:var(--orange);color:var(--orange)}
.mesa-dup-btn:disabled{opacity:0.5;cursor:wait}
.btn-topbar.mesa-dup-btn.evaluado{border-color:var(--orange);color:var(--orange);background:rgba(251,140,0,0.08)}
.cnt-ok{color:var(--light)}
.cnt-neutral{color:var(--light)}
.cnt-warn{color:var(--orange)}
.cnt-err{color:var(--red)}
.tbl-footer{padding:9px 14px;background:var(--row-hover);border-top:1px solid var(--border);font-size:10px;color:var(--light)}
/* Quitar spinners de inputs numéricos */
table.mesa td input[type=number]::-webkit-inner-spin-button,
table.mesa td input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
table.mesa td input[type=number]{-moz-appearance:textfield}
table.mesa td.desc-zone{background:var(--desc-zone-bg)}
table.mesa tbody tr:hover td.desc-zone{background:var(--focus-bg)}
table.mesa tr.inactive td.desc-zone{background:var(--desc-zone-bg)}

/* ── Columnas ancladas: ✓ # Grupo Modelo fabricante Código QAD Estado ──
   De Descripción 1 en adelante la tabla se desplaza en horizontal */
table.mesa thead tr:not(.group-row) th:nth-child(-n+6),table.mesa td:nth-child(-n+6){position:sticky;background:var(--bg);z-index:1}
table.mesa thead tr:not(.group-row) th:nth-child(-n+6){z-index:3}
table.mesa thead tr:not(.group-row) th:nth-child(1),table.mesa td:nth-child(1){left:0}
table.mesa thead tr:not(.group-row) th:nth-child(2),table.mesa td:nth-child(2){left:32px}
table.mesa thead tr:not(.group-row) th:nth-child(3),table.mesa td:nth-child(3){left:60px}
table.mesa thead tr:not(.group-row) th:nth-child(4),table.mesa td:nth-child(4){left:130px}
table.mesa thead tr:not(.group-row) th:nth-child(5),table.mesa td:nth-child(5){left:290px}
table.mesa thead tr:not(.group-row) th:nth-child(6),table.mesa td:nth-child(6){left:470px;border-right:2px solid var(--border-strong)}
table.mesa tbody tr:hover td:nth-child(-n+6){background:var(--row-hover)}
table.mesa tr.inactive td:nth-child(-n+6){background:var(--bg)}

/* Ingeniería: quitar borde genérico de mesa admin que caía en Peso (nth-child 6) */
table.mesa.mesa-ing thead tr:not(.group-row) th:nth-child(6),
table.mesa.mesa-ing tbody td:nth-child(6){
  position:static !important;left:auto !important;border-right:none !important;box-shadow:none !important;z-index:auto !important
}
table.mesa.mesa-ing.mesa-ing-validacion thead tr:not(.group-row) th:nth-child(7),
table.mesa.mesa-ing.mesa-ing-validacion tbody td:nth-child(7){
  position:static !important;left:auto !important;border-right:none !important;box-shadow:none !important;z-index:auto !important
}

/* Compras: anclar #, modelo y descripción en horizontal; encabezados de columna fijos al bajar */
table.mesa.mesa-compras td:nth-child(-n+6):not(.col-desc-ref):not(.col-te-compra){
  position:static;left:auto;border-right:none;z-index:auto
}
table.mesa.mesa-compras thead tr.group-row th:first-child{
  position:sticky;left:0;top:0;z-index:6;background:var(--bg)
}
table.mesa.mesa-compras thead tr:not(.group-row) th{
  position:sticky;
  top:var(--mesa-group-row-h,25px);
  left:auto;
  z-index:4;
  background:var(--bg)
}
table.mesa.mesa-compras thead tr:not(.group-row) th:nth-child(n+4):not(.col-te-compra):not(.col-desc-ref){
  left:auto;border-right:none
}
table.mesa.mesa-compras thead tr:not(.group-row) th:nth-child(-n+3),
table.mesa.mesa-compras tbody td:nth-child(-n+3),
table.mesa.mesa-compras thead tr:not(.group-row) th.col-modelo,
table.mesa.mesa-compras tbody td.col-modelo{position:sticky;background:var(--bg)}
table.mesa.mesa-compras thead tr:not(.group-row) th:nth-child(-n+3),
table.mesa.mesa-compras thead tr:not(.group-row) th.col-modelo{z-index:5}
table.mesa.mesa-compras tbody td:nth-child(-n+3),
table.mesa.mesa-compras tbody td.col-modelo{z-index:1}
table.mesa.mesa-compras thead tr:not(.group-row) th:nth-child(1),table.mesa.mesa-compras tbody td:nth-child(1){left:0}
table.mesa.mesa-compras thead tr:not(.group-row) th:nth-child(2),table.mesa.mesa-compras tbody td:nth-child(2),
table.mesa.mesa-compras thead tr:not(.group-row) th.col-modelo,table.mesa.mesa-compras tbody td.col-modelo{left:28px}
table.mesa.mesa-compras thead tr:not(.group-row) th:nth-child(3),table.mesa.mesa-compras tbody td:nth-child(3){
  left:173px;border-right:2px solid var(--border-strong);
  box-shadow:4px 0 6px -3px rgba(0,0,0,0.12)
}
table.mesa.mesa-compras tbody tr:hover td:nth-child(-n+3),
table.mesa.mesa-compras tbody tr:hover td.col-modelo{background:var(--row-hover)}
table.mesa.mesa-compras tr.inactive td:nth-child(-n+3),
table.mesa.mesa-compras tr.inactive td.col-modelo{background:var(--bg)}
table.mesa.mesa-compras td:nth-child(n+4){z-index:0}
table.mesa.mesa-compras thead tr.group-row .group-lbl-prov{background:var(--purple-soft)}
table.mesa.mesa-compras tr.group-row th.group-lbl-articulo{
  position:sticky;left:0;text-align:center !important
}
table.mesa.mesa-compras tr.group-row th.group-lbl-articulo .mesa-edition-status{
  position:absolute;left:8px;top:50%;transform:translateY(-50%)
}
.mesa-edition-status{display:inline-flex;align-items:center;flex-shrink:0;line-height:0}
.mesa-edition-dot{
  width:10px;height:10px;border-radius:50%;display:block;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 1px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.1)
}
.mesa-edition-status.editable .mesa-edition-dot{
  background:linear-gradient(180deg, #5fe178 0%, #28c840 52%, #1aab32 100%)
}
.mesa-edition-status.locked .mesa-edition-dot{
  background:linear-gradient(180deg, #e3e3e8 0%, #b8b8be 100%)
}
.mesa-edition-status.locked{color:var(--muted)}
.mesa-edition-lock{display:block}
[data-theme="dark"] .mesa-edition-status.locked .mesa-edition-dot{
  background:linear-gradient(180deg, #5a5a60 0%, #3a3a40 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -1px 1px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(0,0,0,0.45)
}
[data-theme="dark"] .mesa-edition-status.editable .mesa-edition-dot{
  background:linear-gradient(180deg, #45d061 0%, #24b038 52%, #1a9629 100%)
}

/* ── Super-encabezado de grupos ── */
table.mesa tr.group-row th{position:sticky;top:0;z-index:2;background:var(--bg);font-size:9px;line-height:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;padding:5px 8px;text-align:left;border-bottom:1px solid var(--border-soft)}
table.mesa tr.group-row th:first-child{position:sticky;left:0;z-index:3}
table.mesa tr.group-row .group-lbl-prov{color:var(--purple);background:var(--purple-soft)}

/* ── Zona proveedor / origen (agrupacion visual) ── */
table.mesa th.th-prov{color:var(--purple)}

/* ── Divisores entre grupos de columnas ── */
table.mesa th:nth-child(9),table.mesa td:nth-child(9){border-right:1px solid var(--border)}
table.mesa th:nth-child(11),table.mesa td:nth-child(11){border-right:1px solid var(--border)}

/* ── Botón fabricante / proveedor (reemplaza el checkbox mudo) ── */
.origen-toggle{font-size:9px;font-weight:600;padding:3px 8px;border-radius:10px;border:none;cursor:pointer;background:var(--gray-soft);color:var(--muted);white-space:nowrap;flex-shrink:0;transition:background 0.12s,color 0.12s;width:100%;text-align:center}
.origen-toggle.origen-proveedor{background:var(--purple-soft);color:var(--purple)}
.origen-toggle.origen-otro{background:var(--orange-soft);color:var(--orange)}
.origen-toggle:disabled{opacity:0.5;cursor:not-allowed}
.sel-wrap{position:relative;display:inline-block;width:100%}
.sel-wrap select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:12px}
.sel-wrap .sel-val{font-size:12px;font-family:inherit;color:var(--text);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-align:left !important}
.sel-wrap:hover .sel-val{color:var(--blue)}


/* ── CONFIGURACIÓN ── */
.cfg-layout{display:flex;gap:24px;margin-top:14px;align-items:flex-start}
.cfg-nav{width:210px;flex-shrink:0;position:sticky;top:14px;display:flex;flex-direction:column;gap:2px}
.cfg-nav-group{font-size:9px;font-weight:700;color:var(--light);text-transform:uppercase;letter-spacing:0.09em;padding:16px 8px 6px 3px}
.cfg-nav-group:first-child{padding-top:2px}
.cfg-nav-item{display:block;font-size:12px;font-weight:500;color:var(--muted);padding:7px 10px 7px 16px;border-radius:8px;cursor:pointer;border:none;background:none;text-align:left;width:100%;font-family:inherit;transition:background 0.12s,color 0.12s}
.cfg-nav-item:hover{background:var(--gray-soft);color:var(--text)}
.cfg-nav-item.active{background:var(--blue-soft);color:var(--blue)}
.cfg-content{flex:1;min-width:0;max-width:760px}
.cfg-section{display:none}
.cfg-section.active{display:block;animation:cfgFadeIn 0.15s ease}
@keyframes cfgFadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfg-wide{grid-column:1/-1}
.cfg-card{border:1px solid var(--border);border-radius:12px;padding:18px}
.cfg-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.cfg-title{font-size:13px;font-weight:500;color:var(--text)}
.cfg-sub{font-size:11px;color:var(--muted);margin-top:2px}
.cfg-table-wrap{border:1px solid var(--border);border-radius:8px;overflow-y:auto;max-height:360px}
.cfg-table{width:100%;border-collapse:collapse}
.cfg-table thead tr{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.cfg-table th{font-size:9px;font-weight:500;color:var(--muted);padding:8px 10px;text-align:left;letter-spacing:0.05em;text-transform:uppercase}
.cfg-table tbody tr{border-bottom:1px solid var(--gray-soft)}
.cfg-table tbody tr:last-child{border:none}
.cfg-table tbody tr:hover{background:var(--row-hover)}
.cfg-table td{font-size:11px;color:var(--text);padding:8px 10px;vertical-align:middle}
.cfg-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;align-content:flex-start}
.cfg-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:20px;background:var(--bg);border:1px solid var(--border);color:var(--text)}
.cfg-chip-del{cursor:pointer;color:var(--light);font-size:13px;line-height:1}
.cfg-chip-del:hover{color:var(--red)}

/* Apariencia — modo + perfil de color */
.cfg-apariencia-grupo{margin-top:18px}
.cfg-apariencia-grupo:first-of-type{margin-top:6px}
.cfg-apariencia-lbl{font-size:11px;font-weight:600;color:var(--text);margin-bottom:8px}
.cfg-apariencia-opciones{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 4px}
.cfg-paleta-btn{display:inline-flex;align-items:center;gap:8px}
.cfg-paleta-swatches{display:inline-flex;gap:3px;flex-shrink:0}
.cfg-paleta-swatches .swatch{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,0.1)}
.cfg-paleta-btn[data-paleta="bohn"] .swatch-a{background:#1A3347}
.cfg-paleta-btn[data-paleta="bohn"] .swatch-b{background:#4A7394}
.cfg-paleta-btn[data-paleta="bohn"] .swatch-c{background:#F8FAFD}
.cfg-paleta-btn[data-paleta="sepia"] .swatch-a{background:#1A3D35}
.cfg-paleta-btn[data-paleta="sepia"] .swatch-b{background:#5A8F7A}
.cfg-paleta-btn[data-paleta="sepia"] .swatch-c{background:#F5F2EA}
[data-theme="dark"] .cfg-paleta-swatches .swatch{border-color:rgba(255,255,255,0.12)}

.auto-si{display:inline-block;font-size:9px;font-weight:500;padding:2px 8px;border-radius:10px;background:var(--green-soft);color:var(--green)}
.auto-no{display:inline-block;font-size:9px;font-weight:500;padding:2px 8px;border-radius:10px;background:var(--gray-soft);color:var(--muted)}
.btn-icon-del{background:none;border:none;cursor:pointer;color:var(--light);font-size:14px;padding:2px 4px;border-radius:4px}
.btn-qad-build{background:none;border:1px solid var(--purple-border);cursor:pointer;color:var(--purple);padding:2px 4px;border-radius:4px;display:inline-flex;align-items:center}
.btn-qad-build:hover{background:var(--purple-soft)}
.btn-icon-del:hover{color:var(--red);background:var(--red-soft)}

/* ── POPOVER OBSERVACIONES ── */
.obs-btn{background:none;border:none;cursor:pointer;padding:3px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.obs-btn.vacio{color:var(--border-strong)}
.obs-btn.vacio:hover{color:var(--orange)}
.obs-btn.con-obs{color:var(--orange)}
.obs-btn.con-obs:hover{color:var(--orange-dark)}
.obs-popover{position:fixed;z-index:300;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:12px;width:260px;display:none}
.obs-popover.show{display:block}
.obs-popover textarea{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px;font-size:11px;font-family:inherit;resize:none;outline:none;height:80px}
.obs-popover textarea:focus{border-color:var(--blue)}
.obs-popover-footer{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}

/* ── MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:100;align-items:center;justify-content:center}
.overlay.show{display:flex}
.modal{background:var(--surface);border-radius:16px;padding:28px;width:440px;box-shadow:0 8px 40px rgba(0,0,0,0.15)}

/* Nuevo folio — fondo opaco + blur para separar del contenido */
#modalNueva{
  background:rgba(10,10,14,0.62);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
#modalNueva .modal.modal-nueva{
  width:min(92vw, 440px);
  padding:16px 18px 14px;
  background:color-mix(in srgb, var(--surface) 94%, #ffffff);
  border:1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  box-shadow:0 24px 64px -12px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
#modalNueva .modal-nueva-head{margin-bottom:10px;text-align:center}
#modalNueva .modal-nueva-head .modal-title{font-size:15px;margin-bottom:0}
#modalNueva .modal-nueva-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
#modalNueva .form-group-span2{grid-column:1/-1}
#modalNueva .form-group-req-planta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
  align-items:end;
}
#modalNueva .form-group-req-planta > .form-group{margin-bottom:0;min-width:0}
#modalNueva .form-group{margin-bottom:0}
#modalNueva .form-label{font-size:10px;margin-bottom:3px;letter-spacing:0.04em}
#modalNueva .form-input{padding:7px 10px;font-size:12.5px;border-radius:7px;width:100%;box-sizing:border-box}
#modalNueva .form-input::placeholder{
  color:color-mix(in srgb, var(--muted) 55%, transparent);
  opacity:1;
}
#modalNueva .form-input:disabled{color:color-mix(in srgb, var(--muted) 80%, var(--text))}
#modalNueva .modal-nueva-check{margin-top:4px}
#modalNueva .modal-nueva-check-label{
  display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;line-height:1.35;margin:0
}
#modalNueva .modal-nueva-check-label input{margin:0;flex-shrink:0}
#modalNueva .modal-nueva-check-label strong{font-weight:600}
#modalNueva .modal-nueva-radio-group{display:flex;flex-direction:column;gap:6px;margin-top:2px}
#modalNueva .modal-nueva-radio{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);cursor:pointer;line-height:1.35}
#modalNueva .modal-nueva-radio input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  border:2px solid var(--border-strong);
  border-radius:50%;
  background:var(--surface);
  cursor:pointer;
  transition:border-color 0.15s,box-shadow 0.15s;
}
#modalNueva .modal-nueva-radio input[type="radio"]:checked{
  border-color:var(--blue);
  box-shadow:inset 0 0 0 3px var(--surface);
  background:var(--blue);
}
#modalNueva .modal-nueva-radio input[type="radio"]:focus-visible{
  outline:2px solid color-mix(in srgb, var(--blue) 35%, transparent);
  outline-offset:2px;
}
.cot-chip-pendiente{background:var(--amber-soft,#fef3cd);color:var(--amber-dark,#856404)}
.cot-chip-compras-ext{background:var(--purple-soft);color:var(--purple-dark,var(--purple))}
.modal-nueva-aviso-val{font-size:11px;color:var(--muted);padding:8px 10px;border-radius:7px;background:color-mix(in srgb, var(--purple-soft) 55%, var(--bg));border:1px solid color-mix(in srgb, var(--purple) 25%, var(--border))}
.modal-nueva-aviso-val-txt{line-height:1.4}
.aviso-cotizacion{border-color:color-mix(in srgb, var(--amber) 40%, var(--border));background:color-mix(in srgb, var(--amber-soft,#fef3cd) 50%, var(--bg))}
[data-theme="dark"] .cot-chip-pendiente{background:color-mix(in srgb, #ffc107 18%, var(--bg));color:#e6c200}
#screen-compras .mesa-compras-externa col.col-comprador,
#screen-compras .mesa-compras-cotizando col.col-comprador{width:0 !important;min-width:0 !important}
#screen-compras .mesa-compras-externa thead th.col-comprador[hidden],
#screen-compras .mesa-compras-cotizando thead th.col-comprador[hidden],
#screen-compras .mesa-compras-externa col.col-comprador[hidden],
#screen-compras .mesa-compras-cotizando col.col-comprador[hidden]{display:none}
#screen-compras .mesa-compras-externa tbody td.col-comprador,
#screen-compras .mesa-compras-cotizando tbody td.col-comprador{
  width:0;max-width:0;padding:0;border-left:none;border-right:none;
  overflow:hidden;visibility:collapse;line-height:0;font-size:0
}
#screen-compras .mesa-compras-externa tbody td.col-comprador select,
#screen-compras .mesa-compras-cotizando tbody td.col-comprador select{display:none}
#screen-compras .mesa-compras-externa .col-modelo-captura input,
#screen-compras .mesa-compras-externa .col-desc-captura input{width:100%;box-sizing:border-box;font-size:11px}
#screen-compras .mesa-compras-externa tr.fila-compras-vacia td{background:color-mix(in srgb, var(--bg) 92%, var(--border))}
#screen-compras .mesa-compras-externa tr.fila-compras-vacia .col-modelo-captura input{font-style:italic}
#screen-compras .mesa-compras-externa tr.fila-compras-vacia .col-desc-captura input::placeholder,
#screen-compras .mesa-compras-externa tr.fila-compras-vacia .col-te-compra input::placeholder,
#screen-compras .mesa-compras-externa tr.fila-compras-vacia .col-precio input::placeholder,
#screen-compras .mesa-compras-externa tr.fila-compras-vacia .col-cant-cot input::placeholder{color:transparent}
#screen-compras .mesa-compras-externa tr.fila-compras-activa td{background:var(--bg)}
#screen-compras .mesa-compras-externa td input:disabled,
#screen-compras .mesa-compras-externa td select:disabled,
#screen-compras .mesa-compras-externa td .prov-ac-input:disabled{
  opacity:1;color:var(--light);cursor:not-allowed;-webkit-text-fill-color:var(--light)
}
#screen-compras .mesa-compras-externa td select:disabled{opacity:1}
#screen-compras .mesa-compras-externa td .prov-ac-input:disabled{background:transparent}
table.mesa.mesa-compras.mesa-compras-cotizando{width:1106px;min-width:1106px}

/* Autocomplete proveedor — mesa Compras */
.form-req{color:var(--red);font-weight:600}
.prov-ac-bulk{min-width:0;max-width:none;flex:1 1 auto;width:100%}
.barra-bulk-compras{
  display:grid;
  grid-template-columns:auto 130px minmax(180px,1fr) 88px minmax(0,auto);
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  margin-top:10px;
  min-width:0;
}
.barra-bulk-compras.barra-bulk-sin-comprador{
  grid-template-columns:auto minmax(180px,1fr) 88px minmax(0,auto);
}
.barra-bulk-compras .bulk-label{
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.04em;
  white-space:nowrap;
}
.barra-bulk-compras .bulk-comprador-select,
.barra-bulk-compras .bulk-moneda-select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.barra-bulk-compras .bulk-hint{
  font-size:10px;
  color:var(--light);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.barra-bulk-compras .prov-ac-bulk .prov-autocomplete{width:100%}
.prov-autocomplete{position:relative;width:100%;max-width:100%;min-width:0}
.prov-autocomplete .prov-ac-input{
  width:100%;max-width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;
  padding:5px 8px;font-size:11px;font-family:inherit;background:var(--surface);color:var(--text);outline:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.prov-autocomplete .prov-ac-input:focus{white-space:normal;overflow:visible;text-overflow:clip}
.prov-autocomplete .prov-ac-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.prov-autocomplete .prov-ac-input:disabled{background:var(--bg);color:var(--muted)}
.prov-ac-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:120;
  max-height:220px;overflow:auto;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:4px
}
.prov-ac-item,.prov-ac-add{
  display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;border:none;background:transparent;
  padding:7px 8px;border-radius:6px;cursor:pointer;font-size:11px;font-family:inherit;color:var(--text)
}
.prov-ac-item:hover,.prov-ac-item.prov-ac-active,.prov-ac-add:hover{background:var(--blue-soft)}
.prov-ac-cod{font-weight:600;color:var(--purple);flex-shrink:0}
.prov-ac-sep{color:var(--light);flex-shrink:0;font-weight:400}
.prov-ac-nom{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.prov-ac-add{color:var(--blue);font-weight:600;justify-content:flex-start}
.prov-ac-empty{padding:8px;font-size:10px;color:var(--light);text-align:center}
table.mesa.mesa-compras td.col-prov-ac{
  min-width:0;max-width:255px;width:255px;vertical-align:middle;overflow:hidden
}
table.mesa.mesa-compras td.col-prov-ac .prov-autocomplete{min-width:0;max-width:100%;overflow:hidden}
table.mesa.mesa-compras td.col-prov-ac .prov-ac-input{font-size:10.5px}
table.mesa.mesa-compras td.col-prov-ac .prov-autocomplete .prov-ac-input:focus{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
table.mesa.mesa-compras td.col-te-compra{background:var(--bg)}
table.mesa.mesa-compras tbody tr:hover td.col-te-compra{background:var(--row-hover)}
table.mesa.mesa-compras.mesa-compras-externa{width:1106px;min-width:1106px}
table.mesa.mesa-compras td input:disabled,
table.mesa.mesa-compras td select:disabled,
table.mesa.mesa-compras td .prov-ac-input:disabled{
  color:var(--text);
  opacity:1;
  -webkit-text-fill-color:var(--text);
  cursor:not-allowed
}
table.mesa.mesa-compras td select:disabled{opacity:1}
table.mesa.mesa-compras td .prov-ac-input:disabled{background:transparent}
[data-theme="dark"] #modalNueva .form-input::placeholder{
  color:color-mix(in srgb, var(--muted) 45%, transparent);
}
#modalNueva .modal-btns{margin-top:12px}
[data-theme="dark"] #modalNueva{
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
[data-theme="dark"] #modalNueva .modal.modal-nueva{
  background:color-mix(in srgb, var(--surface) 82%, #ffffff 12%);
  border-color:color-mix(in srgb, var(--border-strong) 90%, #ffffff 8%);
  box-shadow:0 28px 72px -10px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.06) inset;
}

.modal-title{font-size:16px;font-weight:500;margin-bottom:6px}
.modal-sub{font-size:11px;color:var(--muted);margin-bottom:20px}
.form-group{margin-bottom:14px}
.form-label{font-size:11px;font-weight:500;color:var(--muted);margin-bottom:4px;display:block;text-transform:uppercase;letter-spacing:0.05em}
.form-input{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;transition:border 0.15s}
.form-input:focus{border-color:var(--blue)}
.form-input:disabled{background:var(--bg);color:var(--muted)}
.modal-btns{display:flex;gap:8px;margin-top:20px;justify-content:flex-end}

/* Modal detalle folio — ancho amplio (#id gana sobre .modal 440px) */
#modalDetalleFolio .modal.modal-detalle-folio,
#modalDetalleFolioPanel{
  position:relative;
  width:min(96vw, 1100px) !important;
  max-width:1100px !important;
  min-width:min(96vw, 880px);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  padding:24px 28px 20px;
  box-sizing:border-box;
  overflow:hidden;
}
.modal.modal-detalle-folio .modal-title{font-size:18px;font-weight:600}
.modal.modal-detalle-folio .modal-sub{margin-bottom:8px}
.modal.modal-detalle-folio .modal-btns{margin-top:16px;flex-shrink:0}
.detalle-folio-body{
  overflow-x:hidden;
  overflow-y:auto;
  flex:1;
  min-height:0;
  margin:4px 0 0;
  padding-right:8px;
  max-width:100%;
}
.detalle-meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px;
  line-height:1.55;
  padding:10px 14px;
  background:var(--bg);
  border-radius:8px;
  border:1px solid var(--border);
}
.detalle-seccion{
  font-size:12px;
  font-weight:600;
  margin:18px 0 10px;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.detalle-tabla-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
.detalle-tabla{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.detalle-tabla th,.detalle-tabla td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.detalle-tabla th{
  background:var(--bg);
  font-weight:600;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.detalle-tabla tr:last-child td{border-bottom:none}
.detalle-tabla th:nth-child(1),.detalle-tabla td.detalle-modelo{width:28%}
.detalle-tabla th:nth-child(2),.detalle-tabla td.detalle-qad{width:16%}
.detalle-tabla th:nth-child(3),.detalle-tabla td.detalle-estado{width:12%}
.detalle-tabla th:nth-child(4),.detalle-tabla td.detalle-desc{width:44%}
.detalle-tabla-sin-qad th:nth-child(1),.detalle-tabla-sin-qad td.detalle-modelo{width:32%}
.detalle-tabla-sin-qad th:nth-child(2),.detalle-tabla-sin-qad td.detalle-estado{width:18%}
.detalle-tabla-sin-qad th:nth-child(3),.detalle-tabla-sin-qad td.detalle-desc{width:50%}
.detalle-tabla td.detalle-modelo{
  font-weight:500;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.45;
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.detalle-tabla td.detalle-qad{
  font-weight:500;
  white-space:nowrap;
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.detalle-tabla td.detalle-qad{color:var(--blue);font-family:ui-monospace,monospace;font-size:11px}
.detalle-tabla td.detalle-desc{
  white-space:normal;
  word-break:break-word;
  line-height:1.5;
  color:var(--text);
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.detalle-tabla td.detalle-estado{
  white-space:nowrap;
  padding-left:8px;
  padding-right:8px;
}
.detalle-tabla td.detalle-estado .mod-badge{display:inline-block;max-width:100%;white-space:normal;line-height:1.35;font-size:10.5px;padding:3px 7px}
.detalle-resumen-correo{
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  background:var(--bg);
  -webkit-overflow-scrolling:touch;
}
.detalle-resumen-correo table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:auto !important;
}
.detalle-resumen-correo th,
.detalle-resumen-correo td{
  width:auto !important;
  max-width:none;
  white-space:normal !important;
  word-break:break-word;
  font-size:11px !important;
  padding:6px 8px !important;
}
.detalle-resumen-correo div[style]{max-width:100%}
.detalle-bitacora{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:220px;
  overflow-y:auto;
  padding:2px 0;
}
.detalle-comentario{
  padding:12px 14px;
  border-radius:8px;
  background:var(--bg);
  border:1px solid var(--border);
}
.detalle-com-meta{font-size:11px;color:var(--muted);margin-bottom:6px}
.detalle-com-texto{font-size:13px;line-height:1.55;white-space:pre-wrap}
.detalle-cargando{padding:32px;text-align:center;color:var(--muted)}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:#202124;color:#fff;padding:10px 18px;border-radius:8px;font-size:12px;font-weight:500;z-index:200;opacity:0;transition:opacity 0.3s;pointer-events:none}
.toast.show{opacity:1}
/* ── COLUMNAS OBLIGATORIAS ── */
table.mesa th.col-req{color:var(--accent-indigo)}
table.mesa th.col-req::after{content:" *";color:var(--red);font-weight:700}
table.mesa td.col-req-empty{background:var(--amber-soft)}
.req-nota{font-size:10px;color:var(--muted);margin-bottom:1px}
.req-nota span{color:var(--red);font-weight:600}
.mesa-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px;margin-bottom:12px}
.mesa-filter-btn{font-size:11px;font-weight:500;padding:4px 12px;border-radius:16px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:all 0.15s;white-space:nowrap}
.mesa-filter-btn:hover{border-color:var(--blue);color:var(--blue)}
.mesa-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.mesa-filter-btn.f-green.active{background:var(--green);border-color:var(--green)}
.mesa-filter-btn.f-red.active{background:var(--red);border-color:var(--red)}
.mesa-filter-select{font-size:11px;padding:4px 10px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;outline:none;transition:all 0.15s}
.mesa-filter-select:focus{border-color:var(--blue);color:var(--blue)}

/* ── BADGE DP ── */
.dp-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:500;padding:4px 10px;border-radius:10px;border:1px solid;margin-top:6px}
.dp-status-badge.confirmado{background:var(--green-soft);color:var(--green);border-color:var(--green-border)}
.dp-status-badge.pendiente{background:var(--yellow-soft);color:var(--yellow-text);border-color:var(--yellow-border)}
.dp-status-badge.sin-cargar{background:var(--bg);color:var(--muted);border-color:var(--border)}

/* ── BTN COMPLETAR BLOQUEADO/ACTIVO ── */
.btn-completar-locked{background:var(--apple-btn) !important;color:var(--disabled-text) !important;border-color:transparent !important;cursor:not-allowed !important;box-shadow:none !important}
.btn-completar-ready{background:var(--apple-blue) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 1px 3px rgba(0,122,255,0.3) !important}
.btn-completar-ready:hover{background:var(--apple-blue-hover) !important}

/* ── TOPBAR APPLE STYLE ── */
.btn-topbar{font-size:12px;font-weight:400;padding:7px 14px;border-radius:8px;cursor:pointer;border:none;background:var(--apple-btn);color:var(--text);display:inline-flex;align-items:center;gap:5px;transition:all 0.15s;white-space:nowrap;letter-spacing:-0.1px}
.btn-topbar:hover{background:var(--apple-btn-hover)}
.btn-topbar-warn{background:var(--orange);color:#fff;font-weight:500}
.btn-topbar-warn:hover{background:var(--orange-dark)}
.btn-topbar-icon{padding:7px 9px;background:var(--apple-btn);border:none;border-radius:8px;cursor:pointer;color:var(--apple-gray);display:inline-flex;align-items:center;transition:all 0.15s}
.btn-topbar-icon:hover{background:var(--apple-btn-hover);color:var(--text)}
/* Iconos circulares en topbar de Ingeniería/Compras — misma silueta que tracker-actions */
.rol-topbar-icons{display:flex;align-items:center;gap:6px}
.rol-topbar-icons .btn-rol-icon{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--apple-btn);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color 0.15s,border-color 0.15s,background 0.15s;flex-shrink:0}
.rol-topbar-icons .btn-rol-icon:hover{color:var(--blue);border-color:var(--blue);background:var(--hover-bg2)}
.rol-topbar-icons .btn-rol-icon-cancel:hover{color:var(--red);border-color:var(--red);background:var(--red-soft)}

/* ── PANTALLA DP ── */
.dp-layout{display:grid;grid-template-columns:1fr 280px;gap:14px;margin-top:14px}
.dp-resumen{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.dp-stat{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 16px;min-width:120px}
.dp-stat-n{font-size:22px;font-weight:700;line-height:1}
.dp-stat-l{font-size:10px;color:var(--muted);margin-top:3px}
.dp-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px}
table.dp-tabla{width:100%;border-collapse:collapse;font-size:11px}
table.dp-tabla th{background:var(--bg);padding:7px 10px;text-align:left;font-weight:600;font-size:10px;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0}
table.dp-tabla td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
table.dp-tabla tr:last-child td{border-bottom:none}
table.dp-tabla tr.dp-match-qad td.dp-art{color:var(--green);font-weight:600}
table.dp-tabla tr.dp-match-nppro td.dp-art{color:var(--purple);font-weight:600}
table.dp-tabla tr.dp-match-modelo td.dp-art{color:var(--blue);font-weight:600}
table.dp-tabla tr.dp-sin-match td.dp-art{background:var(--yellow-soft)}
table.dp-tabla td.dp-art input{width:130px;border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:11px;font-family:inherit;background:var(--surface);color:var(--text)}
table.dp-tabla tr.dp-sin-match td.dp-art input{border-color:var(--orange)}
.dp-pendientes{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px}
.dp-pendientes-titulo{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.dp-pend-item{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin-bottom:6px;font-size:11px;cursor:pointer;transition:border-color 0.15s,background 0.15s}
.dp-pend-item:hover{border-color:var(--purple-border);background:var(--purple-soft)}
.dp-pend-modelo{font-weight:600;color:var(--text)}
.dp-pend-qad{font-size:10px;color:var(--purple);margin-top:2px}
.dp-pend-desc{font-size:10px;color:var(--muted);margin-top:3px;white-space:normal;line-height:1.4}
.dp-pend-empty{color:var(--muted);font-size:11px;text-align:center;padding:20px 0}
.dp-badge-match{font-size:9px;padding:2px 6px;border-radius:8px;margin-left:4px}
.dp-badge-qad{background:var(--green-soft);color:var(--green)}
.dp-badge-nppro{background:var(--purple-soft);color:var(--purple)}
.dp-badge-modelo{background:var(--blue-soft);color:var(--blue)}
.dp-badge-vacio{background:var(--yellow-soft);color:var(--yellow-text)}
.dp-badge-eliminar{background:var(--red-soft);color:var(--red)}
tr.dp-marcada-eliminar{background:var(--red-soft);opacity:0.75}
tr.dp-marcada-eliminar td{text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--red) 45%, transparent)}
tr.dp-marcada-eliminar td.dp-art{text-decoration:none}
.dp-art-row{display:flex;align-items:center;gap:6px}
.dp-btn-eliminar{width:18px;height:18px;border-radius:50%;border:1px solid var(--border-strong);background:var(--gray-soft);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s,color 0.15s,border-color 0.15s}
.dp-btn-eliminar:hover{background:var(--red-soft);color:var(--red);border-color:var(--red)}
.dp-btn-eliminar.activo{background:var(--red);color:#fff;border-color:var(--red)}
.dp-btn-eliminar.activo:hover{background:var(--red-dark)}

/* ── Login (siempre claro; independiente del tema del portal) ── */
.login-overlay{
  --login-blue:#0072CE;
  --login-blue-dark:#005fa3;
  --login-blue-soft:#e8f4fd;
  --login-bg:#eceff1;
  --login-surface:#fff;
  --login-text:#202124;
  --login-muted:#5F6368;
  --login-light:#9AA0A6;
  --login-border:#E8EAED;
  --login-error:#D93025;
  color-scheme:light;
  position:fixed;
  inset:0;
  background:var(--login-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  color:var(--login-text);
}
.login-card{
  position:relative;
  width:min(400px,92vw);
  padding:38px 36px 22px;
  background:var(--login-surface);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
  overflow:hidden;
}
.login-pleca{
  position:absolute;
  top:0;
  right:0;
  z-index:3;
  min-width:132px;
  height:28px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--login-blue);
  color:#fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.03em;
  border-radius:0 12px 0 12px;
  box-shadow:0 2px 8px rgba(0,114,206,0.25);
}
.login-card-body{transition:filter 0.35s ease,opacity 0.35s ease}
.login-overlay--welcome .login-card-body{
  filter:blur(5px);
  opacity:0.55;
  pointer-events:none;
}
.login-brand{
  text-align:center;
  margin-bottom:8px;
}
.login-logo{
  display:flex;
  justify-content:center;
  margin-bottom:0;
}
.login-logo img,.login-logo-img{height:56px;width:auto}
.login-heading{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--login-border);
}
.login-title{
  margin:0;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:0.4em;
  line-height:1.2;
}
.login-title-line{
  font-size:19px;
  font-weight:600;
  color:var(--login-text);
  letter-spacing:-0.025em;
}
.login-title-accent{
  font-size:16px;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--login-blue);
}
.login-subtitle{
  margin:10px 0 0;
  font-size:13px;
  font-weight:500;
  color:var(--login-muted);
  letter-spacing:0.01em;
}
.login-form{
  margin-top:24px;
}
.login-field{position:relative;margin-bottom:20px}
.login-field-input{
  width:100%;
  border:none;
  border-bottom:2px solid var(--login-blue);
  background:transparent;
  padding:10px 0 8px;
  font-size:15px;
  font-family:inherit;
  color:var(--login-text);
  outline:none;
  box-sizing:border-box;
  border-radius:0;
}
.login-field-input::placeholder{color:var(--login-light)}
.login-field-input:focus{border-bottom-color:var(--login-blue-dark)}
.login-pass-wrap{
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:6px;
  border-bottom:2px solid var(--login-blue);
  transition:border-color 0.15s;
}
.login-pass-wrap:focus-within{border-bottom-color:var(--login-blue-dark)}
.login-pass-wrap .login-pass-input{
  flex:1;
  min-width:0;
  border-bottom:none;
  padding-right:0;
}
.login-pass-toggle{
  flex-shrink:0;
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  color:var(--login-light);
  cursor:pointer;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-bottom:6px;
}
.login-pass-toggle:hover{color:var(--login-muted)}
.login-pass-icon{display:block;opacity:0.65}
.login-pass-toggle:hover .login-pass-icon{opacity:0.9}
.login-welcome{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  pointer-events:none;
  z-index:2;
}
.login-welcome[hidden]{display:none!important}
.login-welcome-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--login-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,114,206,0.35);
  animation:loginWelcomePop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
.login-welcome-text{
  margin:0;
  font-size:22px;
  font-weight:500;
  color:var(--login-text);
  letter-spacing:-0.02em;
  animation:loginWelcomeFade 0.5s ease 0.15s both;
}
@keyframes loginWelcomePop{
  from{transform:scale(0.5);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes loginWelcomeFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.login-btn-ingresar:disabled,.login-btn-consulta:disabled{
  opacity:0.65;
  cursor:wait;
}
.login-error{
  color:var(--login-error);
  font-size:12.5px;
  margin:2px 0 12px;
  min-height:0;
  text-align:left;
  line-height:1.4;
}
.login-error:empty{display:none}
.login-btn-ingresar{
  display:block;
  width:min(240px, 82%);
  margin-left:auto;
  margin-right:auto;
  margin-top:16px;
  padding:11px 28px;
  border:none;
  border-radius:999px;
  background:var(--login-blue);
  color:#fff;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.15s,transform 0.15s,box-shadow 0.15s;
  box-shadow:0 4px 14px rgba(0,114,206,0.28);
}
.login-btn-ingresar:hover{
  background:var(--login-blue-dark);
  box-shadow:0 6px 18px rgba(0,114,206,0.34);
}
.login-consulta-zone{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--login-border);
}
.login-consulta-divider{
  margin-bottom:10px;
  text-align:center;
}
.login-consulta-divider span{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--login-light);
}
.login-btn-consulta{
  display:block;
  width:min(240px, 82%);
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  padding:10px 28px;
  border:1.5px solid var(--login-blue);
  border-radius:999px;
  background:transparent;
  color:var(--login-blue);
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.15s,border-color 0.15s;
}
.login-btn-consulta:hover{background:var(--login-blue-soft)}