/*
  pantallas.css — estilos de las 8 pantallas clave del panel y de los componentes NUEVOS que
  este paso deja especificados (chat simulado, panel de detalle, vista de agenda, lista de
  documentos con "reemplazar", breakdown de KPIs, editor de reglas de seguimiento).

  Regla dura: toda propiedad de color/spacing/tipografía/radio de ESTE archivo resuelve a una
  custom property ya declarada en ../../06-sistema-diseno/componentes/render/tokens.css (capas
  primitivo/semántico/componente). Este archivo NO declara un solo color hex nuevo — solo
  composición de layout (flex/grid) y las clases de los 3 componentes nuevos, construidas sobre
  esos mismos tokens. tokens.css se referencia tal cual, sin copiarlo ni modificarlo.
*/

/* ===== Layout de pantalla completa (panel real) ===== */
.pantalla {
  display: flex;
  min-height: 800px;
  width: 1280px;
  max-width: 100%;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-producto);
}
.pantalla-movil {
  display: flex;
  flex-direction: column;
  width: 375px;
  min-height: 812px;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-producto);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}
.panel-principal {
  flex: 1;
  min-width: 0;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: auto;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.panel-titulo-grupo { display: flex; flex-direction: column; gap: var(--space-1); }
.panel-subtitulo { color: var(--color-text-secondary); font-size: var(--font-size-100); }
.nav-marca {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-family-marca); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-200); color: var(--color-text-primary);
  padding: 0 var(--space-4) var(--space-4);
}
.nav-marca .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-bg); }
.nav-icono { width: 20px; height: 20px; flex: none; }
.franja-etiqueta {
  font-size: var(--font-size-050); font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase; margin: 0 0 var(--space-2);
}

/* ===== Wireframe (baja fidelidad, sin color de marca, solo estructura) ===== */
.wire { --wf-bg:#fff; --wf-line:#8a8a8a; --wf-text:#3a3a3a; --wf-fill:#e4e4e4; }
.wire-pantalla { display:flex; width:1280px; max-width:100%; min-height:800px; background:var(--wf-bg); color:var(--wf-text); font-family: var(--font-family-producto); border:1px solid var(--wf-line); }
.wire-nav { width:220px; border-right:1px dashed var(--wf-line); padding: var(--space-4); display:flex; flex-direction:column; gap:8px; flex:none; }
.wire-item { border:1px dashed var(--wf-line); padding:10px 12px; font-size:13px; color:var(--wf-text); border-radius:4px; }
.wire-item.activo { background:var(--wf-fill); font-weight:600; }
.wire-main { flex:1; padding: var(--space-8); display:flex; flex-direction:column; gap: var(--space-5); min-width:0; }
.wire-box { border:1px dashed var(--wf-line); border-radius:4px; padding: var(--space-4); }
.wire-block { background:var(--wf-fill); border-radius:4px; }
.wire-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6b6b6b; margin-bottom:6px; display:block; }
.wire-row { display:flex; gap: var(--space-4); flex-wrap:wrap; }
.wire-x { color:#9a9a9a; font-size:11px; }

/* ===== Chat simulado (NUEVO — pantalla Modo simulación) ===== */
.chat-simulado { display:flex; flex-direction:column; background: var(--color-surface-raised); border-radius: var(--card-radius); box-shadow: var(--elevation-1); max-width: 640px; overflow:hidden; }
.chat-marcador-prueba { display:flex; align-items:center; gap: var(--space-2); background: var(--color-feedback-info-banner-bg); color: var(--color-feedback-info-banner-icon); padding: var(--space-3) var(--space-4); font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); }
.chat-hilo { display:flex; flex-direction:column; gap: var(--space-3); padding: var(--space-5); min-height: 320px; }
.burbuja { max-width: 78%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--font-size-200); line-height: var(--line-height-normal); }
.burbuja-cliente { align-self:flex-start; background: var(--color-surface-sunken); color: var(--color-text-primary); border-bottom-left-radius: var(--radius-sm); }
.burbuja-agente { align-self:flex-end; background: var(--color-action-primary-bg); color: var(--color-action-primary-text); border-bottom-right-radius: var(--radius-sm); }
.burbuja-agente.es-abstencion { background: var(--color-surface-sunken); color: var(--color-text-primary); border: 1.5px solid var(--color-feedback-warning-banner-icon); border-bottom-right-radius: var(--radius-sm); }
.burbuja-fuente { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(255,255,255,0.35); font-size: var(--font-size-050); opacity: 0.92; display:flex; align-items:center; gap:6px; }
.burbuja-agente:not(.es-abstencion) .burbuja-fuente { border-top-color: color-mix(in srgb, var(--color-action-primary-text) 35%, transparent); }
.burbuja-abstencion-etiqueta { display:flex; align-items:center; gap:6px; font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); color: var(--color-feedback-warning-banner-icon); margin-bottom:4px; }
.chat-typing { align-self:flex-end; display:flex; gap:4px; padding: var(--space-3) var(--space-4); background: var(--color-surface-sunken); border-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-sm); }
.chat-typing .punto { width:6px; height:6px; border-radius:50%; background: var(--color-text-secondary); animation: rebote 1.2s infinite; }
.chat-typing .punto:nth-child(2) { animation-delay: .15s; }
.chat-typing .punto:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%,60%,100%{ transform: translateY(0); opacity:.5 } 30%{ transform: translateY(-4px); opacity:1 } }
.chat-vacio { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: var(--space-8); color: var(--color-text-secondary); gap: var(--space-2); }
.chat-vacio strong { color: var(--color-text-primary); font-size: var(--font-size-300); }
.chat-input-simulado { display:flex; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.chat-input-simulado input { flex:1; min-height:44px; border-radius: var(--radius-full); border:1px solid var(--color-border-default); background: var(--color-surface-sunken); color: var(--color-text-primary); padding:0 var(--space-4); font-size: var(--font-size-200); min-width:0; }

/* ===== Panel de detalle de conversación (NUEVO — pantalla Mini-CRM) ===== */
.panel-detalle { width: 360px; flex: none; background: var(--color-surface-raised); border-left: 1px solid var(--color-border-subtle); padding: var(--space-6); display:flex; flex-direction:column; gap: var(--space-4); overflow:auto; }
.panel-detalle-header { display:flex; flex-direction:column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.panel-detalle-nombre { font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); }
.panel-detalle-meta { color: var(--color-text-secondary); font-size: var(--font-size-050); }
.panel-detalle-seccion-titulo { font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-2); }
.panel-detalle-hilo { display:flex; flex-direction:column; gap: var(--space-2); }
.panel-detalle-hilo .burbuja { max-width: 100%; font-size: var(--font-size-050); padding: var(--space-2) var(--space-3); }
.marca-traspaso { text-align:center; font-size: var(--font-size-050); color: var(--color-text-secondary); padding: var(--space-2) 0; }
.panel-detalle-datos { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--font-size-050); color: var(--color-text-primary); }
.panel-detalle-datos strong { display:block; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); margin-bottom: 4px; text-transform: uppercase; font-size: 11px; letter-spacing: var(--letter-spacing-wide); }

/* ===== Vista de agenda (NUEVO — pantalla Agenda, formato lista agrupada por día) ===== */
.agenda-dia { display:flex; flex-direction:column; gap: var(--space-3); }
.agenda-dia-titulo { font-size: var(--font-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.turno-fila { display:flex; align-items:center; gap: var(--space-4); background: var(--color-surface-raised); border-radius: var(--card-radius); padding: var(--space-4); box-shadow: var(--elevation-1); flex-wrap:wrap; }
.turno-hora { font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); min-width:72px; }
.turno-info { flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.turno-cliente { font-weight: var(--font-weight-medium); }
.turno-servicio { color: var(--color-text-secondary); font-size: var(--font-size-050); }
.turno-badge { display:inline-flex; align-items:center; gap:6px; font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); white-space:normal; }
.turno-badge.pendiente { background: var(--color-status-pausado-bg); color: var(--color-status-pausado-text); }
.turno-badge.confirmado { background: var(--color-status-activo-bg); color: var(--color-status-activo-text); }
.turno-badge.conflicto { background: var(--color-feedback-error-chip-bg); color: var(--color-feedback-error-chip-text); }
.turno-reloj { font-size: var(--font-size-050); color: var(--color-text-secondary); }
.turno-reloj.urgente { color: var(--color-feedback-warning-banner-icon); font-weight: var(--font-weight-semibold); }
.turno-acciones { display:flex; gap: var(--space-2); }
.agenda-vacio { text-align:center; padding: var(--space-16) var(--space-8); color: var(--color-text-secondary); }
.agenda-vacio strong { display:block; color: var(--color-text-primary); font-size: var(--font-size-300); margin-bottom: var(--space-2); }

/* ===== Lista de documentos con "reemplazar" y estado de procesamiento (NUEVO — Base de conocimiento) ===== */
.doc-fila { display:flex; align-items:center; gap: var(--space-4); background: var(--color-surface-raised); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); flex-wrap:wrap; }
.doc-icono { width:36px; height:36px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); display:flex; align-items:center; justify-content:center; flex:none; font-size:16px; }
.doc-info { flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px; }
.doc-nombre { font-weight: var(--font-weight-medium); }
.doc-meta { font-size: var(--font-size-050); color: var(--color-text-secondary); }
.doc-estado { display:inline-flex; align-items:center; gap:6px; font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.doc-estado.ok { background: var(--color-feedback-success-chip-bg); color: var(--color-feedback-success-chip-text); }
.doc-estado.ocr { background: var(--color-feedback-warning-chip-bg); color: var(--color-feedback-warning-chip-text); }
.doc-estado.error { background: var(--color-feedback-error-chip-bg); color: var(--color-feedback-error-chip-text); }
.doc-acciones { display:flex; gap: var(--space-2); }
.link-accion { background:none; border:none; color: var(--color-action-secondary-text); font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); cursor:pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.link-accion.destructivo { color: var(--color-feedback-error-banner-icon); }
.checklist-guiado { display:flex; flex-direction:column; gap: var(--space-2); }
.checklist-guiado-item { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-size: var(--font-size-200); }
.checklist-guiado-item .marca { width:20px; height:20px; border-radius:50%; border: 1.5px dashed var(--color-border-default); flex:none; }

/* ===== Tarjeta KPI — breakdown recuperación vs. generación (NUEVO — Tablero) ===== */
.breakdown { display:flex; gap: var(--space-4); background: var(--color-surface-raised); border-radius: var(--card-radius); padding: var(--space-5); box-shadow: var(--elevation-1); flex-wrap:wrap; }
.breakdown-col { flex:1; min-width:220px; display:flex; flex-direction:column; gap: var(--space-1); }
.breakdown-col-titulo { font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.breakdown-col-valor { font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); }
.breakdown-col-desc { font-size: var(--font-size-050); color: var(--color-text-secondary); }
.breakdown-divisor { width:1px; background: var(--color-border-subtle); }
.kpi-error { text-align:center; color: var(--color-feedback-error-banner-icon); font-size: var(--font-size-100); }
.kpi-error .link-accion { color: var(--color-feedback-error-banner-icon); text-decoration: underline; }

/* ===== Editor de reglas de seguimiento (NUEVO — pantalla 8) ===== */
.regla-seguimiento { background: var(--color-surface-raised); border-radius: var(--card-radius); padding: var(--space-5); box-shadow: var(--elevation-1); display:flex; flex-direction:column; gap: var(--space-3); }
.regla-seguimiento-header { display:flex; justify-content:space-between; align-items:flex-start; gap: var(--space-3); flex-wrap:wrap; }
.regla-seguimiento-nombre { font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); }
.regla-seguimiento-disparador { color: var(--color-text-secondary); font-size: var(--font-size-050); }
.toggle { position:relative; width:44px; height:26px; border-radius: var(--radius-full); background: var(--color-border-default); flex:none; cursor:pointer; }
.toggle .bola { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background: var(--color-surface-page); transition: transform var(--duration-fast) var(--easing-standard); }
.toggle.on { background: var(--color-action-primary-bg); }
.toggle.on .bola { transform: translateX(18px); }
.checklist-meta { display:flex; flex-direction:column; align-items:flex-start; gap: var(--space-1); font-size: var(--font-size-050); }
.checklist-meta-item { display:flex; align-items:center; gap: var(--space-2); }
.checklist-meta-item .ok { color: var(--color-feedback-success-banner-icon); }
.plantilla-preview { background: var(--color-surface-sunken); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--font-size-050); color: var(--color-text-secondary); font-style: italic; }
.categoria-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight: var(--font-weight-semibold); padding:2px 8px; border-radius: var(--radius-full); background: var(--color-feedback-success-chip-bg); color: var(--color-feedback-success-chip-text); text-transform:uppercase; letter-spacing: var(--letter-spacing-wide); }
.categoria-chip.riesgo { background: var(--color-feedback-error-chip-bg); color: var(--color-feedback-error-chip-text); }

/* ===== Componentes del Paso 06, reincorporados tal cual desde sus render/lote-*.html
   (mismas reglas, mismos nombres de clase — no se reinterpretan) para que las pantallas los
   consuman sin duplicar valores nuevos. ===== */

/* Boton (lote-1) */
.btn { font-family: var(--font-family-producto); font-size: var(--font-size-100); font-weight: var(--font-weight-semibold); min-height: var(--button-min-height); padding: 0 var(--space-4); border-radius: var(--button-radius); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: background-color var(--duration-fast) var(--easing-standard); white-space: normal; max-width: 260px; }
.btn-primario { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); }
.btn-primario.is-hover { background: var(--color-action-primary-bg-hover); }
.btn-primario.is-active { background: var(--color-action-primary-bg-active); }
.btn-primario.is-focus { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.btn-primario.is-disabled { background: var(--color-action-primary-bg-disabled); color: var(--color-action-primary-text-disabled); cursor: not-allowed; }
.btn-primario.is-loading { background: var(--color-action-primary-bg-active); opacity: 0.85; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.btn-secundario { background: transparent; color: var(--color-action-secondary-text); border: 1.5px solid var(--color-action-secondary-border); }
.btn-secundario.is-hover { background: var(--color-action-secondary-bg-hover); }
.btn-secundario.is-disabled { opacity: .5; cursor: not-allowed; }

/* Input (lote-1) */
.campo { display: flex; flex-direction: column; gap: var(--space-1); width: 260px; max-width: 100%; }
.campo label { font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.campo input { font-family: var(--font-family-producto); font-size: var(--font-size-200); min-height: var(--input-min-height); padding: 0 var(--space-3); border-radius: var(--input-radius); border: 1px solid var(--color-border-default); background: var(--color-surface-sunken); color: var(--color-text-primary); width: 100%; }
.campo input:focus, .campo.is-focus input { outline: none; border: 2px solid var(--color-border-focus); }
.campo.is-hover input { border-color: var(--color-text-secondary); }
.campo.is-error input { border: 2px solid var(--color-feedback-error-banner-icon); background: var(--color-feedback-error-banner-bg); }
.campo.is-error .ayuda { color: var(--color-feedback-error-banner-icon); }
.campo.is-disabled input { background: var(--color-surface-raised); color: var(--color-text-disabled); border-color: var(--color-border-disabled); cursor: not-allowed; }
.ayuda { font-size: var(--font-size-050); color: var(--color-text-secondary); }

/* Selector de tono (lote-1) */
.selector-tono { display: inline-flex; background: var(--color-surface-sunken); border-radius: var(--radius-full); padding: 4px; gap: 4px; flex-wrap: wrap; }
.opcion-tono { font-family: var(--font-family-producto); font-size: var(--font-size-100); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; min-height: 36px; }
.opcion-tono.is-hover { background: var(--color-action-secondary-bg-hover); }
.opcion-tono.is-selected { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); font-weight: var(--font-weight-semibold); }
.opcion-tono.is-focus { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.opcion-tono.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }

/* Editor de reglas duras (lote-1) */
.editor-reglas { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-3); }
.regla-fila { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface-sunken); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.regla-fila.is-hover { background: var(--color-action-secondary-bg-hover); }
.regla-texto { flex: 1; font-size: var(--font-size-200); color: var(--color-text-primary); min-width: 0; }
.regla-quitar { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: var(--font-size-200); padding: var(--space-1); border-radius: var(--radius-sm); }
.regla-fila.is-error { border: 2px solid var(--color-feedback-error-banner-icon); background: var(--color-feedback-error-banner-bg); }
.regla-fila.is-focus { border: 2px solid var(--color-border-focus); }
.editor-vacio { text-align: center; padding: var(--space-6); background: var(--color-surface-sunken); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-100); }
.editor-vacio strong { display:block; color: var(--color-text-primary); margin-bottom: var(--space-1); }
.estado-mini { font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* Chip de estado de conversacion (lote-2) */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); white-space: normal; max-width: 260px; }
.chip-activo { background: var(--color-status-activo-bg); color: var(--color-status-activo-text); }
.chip-pausado { background: var(--color-status-pausado-bg); color: var(--color-status-pausado-text); }
.chip-atendido { background: var(--color-status-atendido-bg); color: var(--color-status-atendido-text); }
.chip-desconocido { background: var(--color-surface-sunken); color: var(--color-text-secondary); border: 1px dashed var(--color-border-default); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Tarjeta KPI (lote-2) */
.kpi { background: var(--color-surface-raised); border-radius: var(--card-radius); padding: var(--space-5); box-shadow: var(--elevation-1); min-width: 200px; }
.kpi-label { font-size: var(--font-size-050); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.kpi-valor { font-size: var(--font-size-600); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1; }
.kpi-tendencia { font-size: var(--font-size-050); color: var(--color-feedback-success-banner-icon); margin-top: var(--space-2); }
.skeleton { background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-border-subtle) 50%, var(--color-surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.kpi-vacio { text-align:center; color: var(--color-text-secondary); font-size: var(--font-size-100); }
.kpi-vacio strong { display:block; color: var(--color-text-primary); font-size: var(--font-size-200); margin-bottom: var(--space-1); }

/* Fila de conversacion / tabla (lote-2) */
table { border-collapse: collapse; width: 100%; }
td, th { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--font-size-200); }
th { font-size: var(--font-size-050); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
tr.is-hover td { background: var(--color-action-secondary-bg-hover); }
tr.is-selected td { background: var(--color-surface-sunken); }
table { color: var(--color-text-primary); }
.nombre-cliente { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.meta { color: var(--color-text-secondary); font-size: var(--font-size-050); }
.fila-vacia td { text-align:center; padding: var(--space-8); color: var(--color-text-secondary); }
.fila-error td { text-align:center; padding: var(--space-6); color: var(--color-feedback-error-banner-icon); }
td.skeleton-celda { padding: var(--space-4) var(--space-3); }

/* Navegacion lateral (lote-3) */
.nav { width: 220px; display: flex; flex-direction: column; gap: 4px; background: var(--color-surface-raised); border-radius: var(--radius-lg); padding: var(--space-3); }
.nav-item { display:flex; align-items:center; gap: var(--space-3); min-height: var(--nav-item-min-height); padding: 0 var(--space-4); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-200); cursor: pointer; }
.nav-item.is-hover { background: var(--color-action-secondary-bg-hover); }
.nav-item.is-active { background: var(--color-action-secondary-bg-hover); color: var(--color-action-secondary-text); font-weight: var(--font-weight-semibold); }
.nav-item.is-focus { outline: 3px solid var(--color-border-focus); outline-offset: -2px; }
.nav-item.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.nav-item .icono { width: 20px; height:20px; border-radius: 5px; background: currentColor; opacity: .25; flex: none; }
.nav-item .candado { margin-left: auto; font-size: 13px; }

/* Checklist / stepper (lote-3) */
.stepper { display: flex; flex-direction: column; gap: 0; max-width: 480px; }
.paso { display: flex; gap: var(--space-3); }
.paso-punto-col { display:flex; flex-direction:column; align-items:center; }
.paso-dot { width: 24px; height: 24px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 13px; font-weight: 600; flex: none; }
.paso-linea { width: 2px; flex: 1; min-height: 24px; background: var(--color-border-subtle); }
.paso-cuerpo { padding-bottom: var(--space-5); }
.paso-titulo { font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); }
.paso-desc { font-size: var(--font-size-050); color: var(--color-text-secondary); }
.paso.is-completado .paso-dot { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); }
.paso.is-completado .paso-linea { background: var(--color-action-primary-bg); }
.paso.is-actual .paso-dot { background: var(--color-surface-page); border: 2px solid var(--color-border-focus); color: var(--color-border-focus); }
.paso.is-pendiente .paso-dot { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.paso.is-bloqueado .paso-dot { background: var(--color-surface-sunken); color: var(--color-text-disabled); }
.paso.is-bloqueado .paso-titulo { color: var(--color-text-disabled); }
.candado-chip { display:inline-flex; align-items:center; gap:4px; font-size: var(--font-size-050); color: var(--color-feedback-warning-banner-icon); margin-top: 2px; }

/* Banner / alerta (lote-3) */
.banner { display:flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border-left: 4px solid; max-width: 480px; }
.banner-icono { flex: none; width: 20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--p-hueso); }
.banner-texto { font-size: var(--font-size-200); }
.banner-titulo { font-weight: var(--font-weight-semibold); margin-bottom: 2px; }
.banner-exito { background: var(--color-feedback-success-banner-bg); border-color: var(--color-feedback-success-banner-icon); }
.banner-exito .banner-icono { background: var(--color-feedback-success-banner-icon); }
.banner-advertencia { background: var(--color-feedback-warning-banner-bg); border-color: var(--color-feedback-warning-banner-icon); }
.banner-advertencia .banner-icono { background: var(--color-feedback-warning-banner-icon); }
.banner-error { background: var(--color-feedback-error-banner-bg); border-color: var(--color-feedback-error-banner-icon); }
.banner-error .banner-icono { background: var(--color-feedback-error-banner-icon); }
.banner-info { background: var(--color-feedback-info-banner-bg); border-color: var(--color-feedback-info-banner-icon); }
.banner-info .banner-icono { background: var(--color-feedback-info-banner-icon); }

/* Dropzone / carga de documento (lote-3) */
.dropzone { width: 100%; max-width: 420px; border: 2px dashed var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); text-align:center; color: var(--color-text-secondary); }
.dropzone.is-dragover { border-color: var(--color-border-focus); background: var(--color-action-secondary-bg-hover); color: var(--color-text-primary); }
.dropzone.is-uploading { border-style: solid; }
.dropzone.is-success { border-color: var(--color-feedback-success-banner-icon); border-style: solid; background: var(--color-feedback-success-banner-bg); }
.dropzone.is-error { border-color: var(--color-feedback-error-banner-icon); border-style: solid; background: var(--color-feedback-error-banner-bg); }
.dropzone-titulo { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: 4px; }
.barra { height: 6px; background: var(--color-surface-sunken); border-radius: 3px; overflow:hidden; margin-top: var(--space-3); }
.barra-fill { height:100%; width: 62%; background: var(--color-border-focus); }

/* Modal (lote-3) */
.escenario-modal { position: relative; width: 100%; min-height: 320px; border-radius: var(--radius-lg); overflow:hidden; }
.scrim { position:absolute; inset:0; background: var(--color-surface-scrim); display:flex; align-items:center; justify-content:center; }
.modal { width: 380px; max-width: 90%; background: var(--color-surface-overlay); border-radius: var(--modal-radius); padding: var(--space-6); box-shadow: var(--modal-elevation); }
.modal h3 { margin-bottom: var(--space-2); }
.modal p { font-size: var(--font-size-200); color: var(--color-text-secondary); margin: 0 0 var(--space-5); }
.modal-acciones { display:flex; gap: var(--space-3); justify-content:flex-end; flex-wrap: wrap; }

/* ===== Utilidades compartidas de layout de pantalla ===== */
.dos-columnas { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items:start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }
.franja-render { display:flex; flex-direction:column; }
.render-etiqueta { font-size: var(--font-size-050); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-secondary); padding: var(--space-4) var(--space-8) 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Estados de negocio y categorías (feature 2026-08-26)

   Los tonos son roles semánticos, no colores: el negocio elige «atención», no
   «naranja». Así una taxonomía armada por el dueño sigue siendo legible en el
   tema oscuro sin que nadie haya pensado en el tema oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */
.chip-neutro   { background: var(--color-surface-sunken); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); }
.chip-progreso { background: var(--color-status-progreso-bg); color: var(--color-status-progreso-text); }
.chip-atencion { background: var(--color-status-pausado-bg);  color: var(--color-status-pausado-text); }
.chip-exito    { background: var(--color-status-activo-bg);   color: var(--color-status-activo-text); }
.chip-peligro  { background: var(--color-status-peligro-bg);  color: var(--color-status-peligro-text); }

/* La bandeja: contadores arriba, lista abajo. */
.bandeja-pasos { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-5); }
.paso-tarjeta { flex: 0 0 auto; min-width: 132px; background: var(--color-surface-raised);
  border-radius: var(--card-radius); padding: var(--space-4); box-shadow: var(--elevation-1);
  border-top: 3px solid transparent; text-decoration: none; color: inherit; display: block; }
.paso-tarjeta:hover { box-shadow: var(--elevation-2); }
.paso-tarjeta.is-active { border-top-color: var(--color-text-primary); background: var(--color-surface-sunken); }
.paso-tarjeta .paso-nombre { font-size: var(--font-size-050); color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); line-height: 1.3; }
.paso-tarjeta .paso-cuenta { font-size: var(--font-size-400); font-weight: var(--font-weight-semibold);
  line-height: 1; font-variant-numeric: tabular-nums; }
.paso-tarjeta .paso-barra { height: 3px; border-radius: 999px; margin-top: var(--space-3); }

.etiquetas-fila { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.etiqueta-mini { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: var(--font-weight-semibold); }

/* Administración de la taxonomía. */
.estado-fila { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-default); flex-wrap: wrap; }
.estado-fila:last-child { border-bottom: 0; }
.estado-fila .crece { flex: 1; min-width: 160px; }
.estado-marcas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.marca-mini { font-size: 11px; color: var(--color-text-secondary); background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default); border-radius: 999px; padding: 1px 8px; }

.sugerencia { background: var(--color-surface-raised); border-left: 3px solid var(--color-feedback-info-banner-icon);
  border-radius: 0 var(--card-radius) var(--card-radius) 0; padding: var(--space-4); margin-bottom: var(--space-3); }
.sugerencia-nombre { font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); }