:root {
  --cafe: #3c2922;
  --cafe-2: #5a4037;
  --nude: #b18474;
  --nude-suave: #f1e6e0;
  --arena: #dcd0c7;
  --crema: #e6dfd9;
  --fondo: #f6f2ee;
  --papel: #ffffff;
  --texto: #2b1f1a;
  --sutil: #7d6d66;
  --linea: #e8e0da;
  --critica: #b4232f;
  --alta: #c4612b;
  --media: #b88a1e;
  --ok: #3f7a4f;
  --sombra: 0 1px 2px rgba(60, 41, 34, .06), 0 4px 16px rgba(60, 41, 34, .06);
  --radio: 14px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fondo); color: var(--texto); font-size: 14px; display: flex; flex-direction: column; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Los campos nunca se salen de su caja (en grids y filas flexibles) */
input, select, textarea { max-width: 100%; min-width: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.barra { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--cafe); color: var(--crema); flex-shrink: 0; }
.marca { display: flex; align-items: center; gap: 10px; }
.iso { width: 34px; height: 34px; border-radius: 10px; background: var(--crema); color: var(--cafe); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.marca-texto { font-weight: 600; font-size: 17px; letter-spacing: .2px; white-space: nowrap; }
.marca-texto em { font-style: normal; font-weight: 400; color: var(--arena); opacity: .8; }
.pestanas { display: flex; gap: 4px; }
.pestana { background: none; border: 0; color: var(--arena); padding: 8px 14px; border-radius: 999px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.pestana:hover { background: rgba(255,255,255,.08); }
.pestana.activa { background: var(--crema); color: var(--cafe); }
.cuenta { background: var(--critica); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 600; }
.centro-alertas { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pildora-humano { border: 0; background: var(--critica); color: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pildora-humano.escalado { animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,47,.7); } 50% { box-shadow: 0 0 0 6px rgba(180,35,47,0); } }
.activar-avisos { border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--crema); border-radius: 999px; padding: 5px 11px; font-size: 12px; white-space: nowrap; }
.estado { margin-left: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.yo { display: flex; flex-direction: column; font-size: 10.5px; color: var(--arena); gap: 1px; }
.yo select { background: rgba(255,255,255,.1); color: var(--crema); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 4px 8px; font-size: 12.5px; max-width: 150px; }
.yo select option { color: var(--texto); }
.pastilla { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pastilla::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #e0b34a; }
.pastilla.on::before { background: #7fd394; }

.vista { display: none; flex: 1; min-height: 0; }
.vista.activa { display: flex; }

/* ---------- bandeja ---------- */
#vista-bandeja { gap: 0; }
.lista { width: 340px; flex-shrink: 0; background: var(--papel); border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; }
.colas { display: flex; gap: 6px; padding: 12px 14px 0; overflow-x: auto; scrollbar-width: none; }
.colas::-webkit-scrollbar { display: none; }
.cola { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 500; white-space: nowrap; display: flex; gap: 6px; align-items: center; color: var(--cafe-2); }
.cola b { font-weight: 600; background: var(--fondo); border-radius: 999px; padding: 0 7px; font-size: 11.5px; }
.cola.activa { background: var(--cafe); color: var(--crema); border-color: var(--cafe); }
.cola.activa b { background: rgba(255,255,255,.18); }
.cola.urge b { background: var(--critica); color: #fff; }
.cola-ayuda { font-size: 11.5px; color: var(--sutil); line-height: 1.4; }
.mas { display: block; width: calc(100% - 28px); margin: 10px 14px; border: 1px solid var(--linea); background: var(--papel); border-radius: 9px; padding: 8px; font-size: 13px; }
.conv-vend { font-size: 11px; color: var(--sutil); }
.lista-cabecera { padding: 14px; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
#buscar { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); outline: none; }
#buscar:focus { border-color: var(--nude); }
.filtros { display: flex; gap: 8px; }
.filtros select { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); font-size: 13px; }
.chip-filtro { border: 1px solid var(--linea); background: var(--papel); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.chip-filtro[aria-pressed="true"] { background: var(--cafe); color: var(--crema); border-color: var(--cafe); }
.conversaciones { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linea); cursor: pointer; position: relative; }
.conv:hover { background: var(--fondo); }
.conv.sel { background: var(--nude-suave); }
.conv.critica { box-shadow: inset 4px 0 0 var(--critica); }
.conv.alta { box-shadow: inset 4px 0 0 var(--alta); }
.conv.media { box-shadow: inset 4px 0 0 var(--media); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--arena); color: var(--cafe); display: grid; place-items: center; font-weight: 600; font-size: 15px; flex-shrink: 0; }
.conv-cuerpo { min-width: 0; }
.conv-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: center; }
.conv-texto { color: var(--sutil); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 6px; }
.conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 11.5px; color: var(--sutil); }
.no-leidos { background: var(--nude); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 600; padding: 0 6px; }
.etiqueta-etapa { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 2px 9px 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 75%, black); white-space: nowrap; }
.etiqueta-etapa::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.temp { font-size: 12px; }
.boton-simular { margin: 10px 14px 14px; border: 1px dashed var(--nude); background: var(--nude-suave); color: var(--cafe); padding: 10px; border-radius: 10px; font-weight: 500; }
.boton-simular:hover { background: #ead9cf; }
.lista-vacia { padding: 30px 20px; text-align: center; color: var(--sutil); }

/* ---------- chat ---------- */
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fondo); }
.vacio { margin: auto; text-align: center; color: var(--sutil); max-width: 280px; }
.vacio-iso { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--arena); color: var(--cafe); display: grid; place-items: center; font-size: 30px; font-weight: 700; }
.chat-contenido { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-cabecera { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.chat-titulo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-titulo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-titulo span { font-size: 12px; color: var(--sutil); }
.volver, .ver-ficha { display: none; }
.modos { display: flex; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 3px; gap: 2px; }
.modo { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--sutil); }
.modo.activo { background: var(--cafe); color: var(--crema); }
.modo:disabled { opacity: .45; cursor: not-allowed; }
.banda-alerta { padding: 10px 16px; font-size: 13px; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.banda-alerta.critica { background: #fbe3e5; color: var(--critica); }
.banda-alerta.alta { background: #fbeadf; color: #8a3f15; }
.banda-alerta.media { background: #f8f0d9; color: #6e5410; }
.banda-alerta button { margin-left: auto; border: 1px solid currentColor; background: transparent; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: inherit; }
.mensajes { flex: 1; overflow-y: auto; padding: 20px 6%; display: flex; flex-direction: column; gap: 6px; }
.dia { align-self: center; font-size: 11.5px; color: var(--sutil); background: var(--crema); padding: 3px 10px; border-radius: 999px; margin: 10px 0 4px; }
.burbuja { max-width: 72%; padding: 8px 12px 6px; border-radius: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(60,41,34,.06); }
.burbuja.entrante { align-self: flex-start; background: var(--papel); border-top-left-radius: 4px; }
.burbuja.saliente { align-self: flex-end; background: var(--cafe); color: var(--crema); border-top-right-radius: 4px; }
.burbuja .pie { display: block; text-align: right; font-size: 10.5px; opacity: .65; margin-top: 2px; }
.burbuja .tipo { font-size: 11px; font-weight: 600; opacity: .7; display: block; margin-bottom: 2px; }
.redactor { display: flex; gap: 10px; padding: 12px 16px; background: var(--papel); border-top: 1px solid var(--linea); align-items: flex-end; }
.redactor textarea { flex: 1; resize: none; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; max-height: 140px; background: var(--fondo); outline: none; line-height: 1.4; }
.redactor textarea:focus { border-color: var(--nude); }
.enviar { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--cafe); color: var(--crema); font-size: 16px; flex-shrink: 0; }
.enviar:disabled { opacity: .5; }
.aviso-ventana { padding: 6px 16px 10px; font-size: 12px; color: var(--sutil); background: var(--papel); }

/* ---------- ficha ---------- */
.ficha { width: 340px; flex-shrink: 0; background: var(--papel); border-left: 1px solid var(--linea); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ficha-cabecera { display: flex; justify-content: space-between; align-items: center; }
.ficha-cabecera h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--sutil); font-weight: 600; }
.cerrar-ficha { display: none; border: 0; background: none; font-size: 22px; line-height: 1; }
.bloque { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.bloque h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--sutil); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloque p { margin: 0; line-height: 1.5; }
.bloque.destacado { background: var(--nude-suave); border-color: transparent; }
.fila-etapa { display: flex; gap: 8px; align-items: center; }
.fila-etapa select { flex: 1; padding: 8px; border-radius: 9px; border: 1px solid var(--linea); background: var(--papel); font-weight: 500; }
.candado { border: 1px solid var(--linea); background: var(--papel); border-radius: 9px; padding: 7px 9px; font-size: 13px; }
.candado.on { background: var(--cafe); color: var(--crema); border-color: var(--cafe); }
.sugerencia { margin-top: 8px; font-size: 12.5px; background: #f8f0d9; color: #6e5410; padding: 8px 10px; border-radius: 9px; display: flex; gap: 8px; align-items: center; }
.sugerencia button { margin-left: auto; border: 0; background: #6e5410; color: #fff; border-radius: 7px; padding: 4px 9px; font-size: 12px; }
.indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.indicador { background: var(--fondo); border-radius: 10px; padding: 8px; text-align: center; }
.indicador span { display: block; font-size: 10.5px; color: var(--sutil); text-transform: uppercase; letter-spacing: .5px; }
.indicador strong { font-size: 13px; font-weight: 600; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13px; margin: 0; }
.datos dt { color: var(--sutil); }
.datos dd { margin: 0; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.chip.objecion { background: #fbeadf; border-color: transparent; color: #8a3f15; }
.estrellas { color: var(--nude); letter-spacing: 1px; font-size: 15px; }
.alerta-item { font-size: 12.5px; padding: 7px 10px; border-radius: 9px; margin-bottom: 6px; line-height: 1.4; }
.alerta-item.critica { background: #fbe3e5; color: var(--critica); }
.alerta-item.alta { background: #fbeadf; color: #8a3f15; }
.alerta-item.media { background: #f8f0d9; color: #6e5410; }
.nota-form { display: flex; gap: 6px; margin-top: 8px; }
.nota-form input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.nota-form button, .mini { border: 0; background: var(--cafe); color: var(--crema); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 500; }
.mini.claro { background: var(--fondo); color: var(--cafe); border: 1px solid var(--linea); }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.historial li { display: grid; grid-template-columns: 8px 1fr; gap: 8px; }
.historial li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--arena); margin-top: 5px; }
.historial li.humano::before { background: var(--nude); }
.historial small { color: var(--sutil); display: block; }

/* ---------- embudo ---------- */
#vista-embudo { flex-direction: column; min-width: 0; }
.embudo-barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px 0; flex-wrap: wrap; }
.embudo-filtros { display: flex; gap: 14px; flex-wrap: wrap; }
.embudo-filtros label { font-size: 12px; color: var(--sutil); display: flex; align-items: center; gap: 6px; }
.embudo-filtros select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel); font-size: 13px; color: var(--texto); }
.embudo-resumen { display: flex; gap: 18px; font-size: 12.5px; color: var(--sutil); flex-wrap: wrap; }
.embudo-resumen b { color: var(--cafe); font-size: 15px; font-weight: 600; display: block; }
.filtros-venta { width: 100%; align-items: center; }
.rango { display: inline-flex; align-items: center; gap: 4px; }
.rango input { width: 82px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel); font-size: 13px; }
.check-mini { gap: 5px !important; }
.check-mini input { accent-color: var(--cafe); }
.filtro-activo { border-color: var(--cafe) !important; box-shadow: 0 0 0 1px var(--cafe); }
.densidad { margin-left: auto; }
.densidad { display: flex; background: var(--papel); border: 1px solid var(--linea); border-radius: 9px; padding: 2px; gap: 2px; }
.densidad button { border: 0; background: none; padding: 4px 10px; border-radius: 7px; font-size: 12px; color: var(--sutil); font-weight: 500; }
.densidad button.activo { background: var(--cafe); color: var(--crema); }
/* Compacta: columnas que se reparten el ancho de la pantalla y tarjetas de una línea */
.embudo.compacta { gap: 8px; }
.embudo.compacta .columna { width: auto; flex: 1 0 150px; max-width: 240px; }
.embudo.compacta .columna-cabecera { padding: 10px 10px 4px; font-size: 12px; }
.embudo.compacta .columna-cabecera > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embudo.compacta .columna-monto { padding: 0 10px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embudo.compacta .tarjetas { padding: 2px 6px 8px; gap: 4px; }
.embudo.compacta .tarjeta { padding: 6px 8px; border-radius: 8px; box-shadow: 0 1px 2px rgba(60,41,34,.08); }
.embudo.compacta .tarjeta strong { font-size: 12px; font-weight: 500; }
.embudo.compacta .tarjeta strong span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.embudo.compacta .tarjeta p { display: none; }
.embudo.compacta .tarjeta .pie-tarjeta { margin-top: 2px; font-size: 10.5px; }
.embudo.compacta .ver-mas-col { margin: 2px 6px 8px; font-size: 11px; padding: 5px; }
/* Mínima: solo nombres, todas las etapas caben en pantalla */
.embudo.minima { gap: 6px; }
.embudo.minima .columna { width: auto; flex: 1 0 118px; max-width: 200px; }
.embudo.minima .columna-cabecera { padding: 8px 8px 2px; font-size: 11.5px; flex-direction: column; align-items: flex-start; gap: 4px; }
.embudo.minima .columna-cabecera > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embudo.minima .columna-monto { padding: 0 8px 4px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embudo.minima .tarjetas { padding: 0 4px 6px; gap: 0; }
.embudo.minima .tarjeta { padding: 4px 6px; border-radius: 0; box-shadow: none; background: transparent; border-left-width: 3px; border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, transparent); }
.embudo.minima .tarjeta:hover { background: var(--papel); }
.embudo.minima .tarjeta strong { font-size: 11.5px; font-weight: 400; }
.embudo.minima .tarjeta strong span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.embudo.minima .tarjeta strong span:last-child, .embudo.minima .tarjeta p, .embudo.minima .tarjeta .pie-tarjeta { display: none; }
.embudo.minima .ver-mas-col { margin: 4px; font-size: 10.5px; padding: 4px; }
.embudo-ayuda { padding: 8px 20px 0; color: var(--sutil); font-size: 12px; }
.columna-monto { padding: 0 14px 6px; font-size: 11.5px; color: var(--sutil); }
.ver-mas-col { margin: 2px 10px 12px; border: 1px dashed color-mix(in srgb, var(--c) 50%, transparent); background: transparent; border-radius: 9px; padding: 7px; font-size: 12px; color: var(--cafe-2); }
.tarjeta .pie-tarjeta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--sutil); gap: 6px; }
.tarjeta .pie-tarjeta b { color: var(--cafe); font-weight: 600; }
.embudo { display: flex; gap: 12px; padding: 12px 20px 20px; overflow-x: auto; flex: 1; min-height: 0; align-items: stretch; }
.columna { width: 250px; flex-shrink: 0; background: color-mix(in srgb, var(--c) 7%, var(--fondo)); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 0; border: 2px solid transparent; transition: border-color .15s; }
.columna.sobre { border-color: var(--c); }
.columna-cabecera { padding: 12px 14px 8px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
.columna-cabecera > span:first-child { display: flex; align-items: center; gap: 7px; }
.columna-cabecera > span:first-child::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.columna-cuenta { background: var(--papel); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--sutil); }
.tarjetas { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.tarjeta { background: var(--papel); border-radius: 11px; padding: 10px 12px; box-shadow: var(--sombra); cursor: grab; border-left: 3px solid transparent; }
.tarjeta.critica { border-left-color: var(--critica); }
.tarjeta.alta { border-left-color: var(--alta); }
.tarjeta.media { border-left-color: var(--media); }
.tarjeta.arrastrando { opacity: .4; }
.tarjeta strong { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.tarjeta p { margin: 5px 0 0; color: var(--sutil); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta .chips { margin-top: 7px; }
.tarjeta .chip { font-size: 11px; padding: 1px 8px; }

/* ---------- métricas ---------- */
#vista-metricas { overflow-y: auto; }
.metricas { padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; max-width: 1280px; margin: 0 auto; align-content: start; }
.kpi { background: var(--papel); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); }
.kpi span { font-size: 12px; color: var(--sutil); text-transform: uppercase; letter-spacing: .6px; }
.kpi strong { display: block; font-size: 28px; font-weight: 600; margin-top: 4px; color: var(--cafe); }
.kpi small { color: var(--sutil); font-size: 12px; }
.tarjeta-grande { grid-column: span 2; background: var(--papel); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); }
.tarjeta-grande h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.barra-fila { display: grid; grid-template-columns: 140px 1fr 32px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.barra-pista { height: 12px; background: var(--fondo); border-radius: 999px; overflow: hidden; }
.barra-relleno { height: 100%; border-radius: 999px; background: var(--c, var(--nude)); min-width: 2px; }
.barra-fila b { text-align: right; font-weight: 600; }
.vacio-metrica { color: var(--sutil); font-size: 13px; }

/* ---------- informe ---------- */
#vista-informe { overflow-y: auto; }
.informe-contenedor { width: 100%; max-width: 900px; margin: 0 auto; padding: 24px 20px 40px; }
.informe-cabecera { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; }
.informe-cabecera h2 { margin: 0 0 4px; font-size: 20px; color: var(--cafe); }
.informe-cabecera p { margin: 0; color: var(--sutil); max-width: 520px; line-height: 1.5; }
.informe-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.boton { border: 0; background: var(--cafe); color: var(--crema); padding: 10px 16px; border-radius: 10px; font-weight: 500; text-decoration: none; display: inline-block; }
.boton.secundario { background: var(--papel); color: var(--cafe); border: 1px solid var(--linea); }
.boton:disabled { opacity: .6; cursor: wait; }
.informe { background: var(--papel); border-radius: var(--radio); padding: 22px 26px; box-shadow: var(--sombra); margin-bottom: 16px; line-height: 1.6; }
.informe .fecha { font-size: 12px; color: var(--sutil); margin-bottom: 8px; }
.informe h2 { font-size: 15px; color: var(--cafe); margin: 18px 0 6px; }
.informe h2:first-of-type { margin-top: 4px; }
.informe ul { margin: 0; padding-left: 20px; }

/* ---------- ficha: controles nuevos ---------- */
.fila-control { display: flex; gap: 8px; align-items: center; }
.fila-control select, .fila-control input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--linea); background: var(--papel); font-size: 13px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos-columnas .bloque { padding: 10px 12px; min-width: 0; }
.fila-control input, .fila-control select { width: 100%; }
.campo-mini { display: flex; align-items: center; gap: 8px; }
.campo-mini span { display: none; font-size: 12px; color: var(--sutil); white-space: nowrap; }
.origen-monto { font-size: 11px; color: var(--sutil); margin-top: 4px; }
.botones-seguimiento { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.botones-seguimiento button { border: 1px solid var(--linea); background: var(--fondo); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.seguimiento-actual { font-size: 13px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.seguimiento-actual.vencido { color: #8a3f15; }

/* ---------- ficha: pestañas y canal Equipo + Claude ---------- */
.ficha-pestanas { display: flex; gap: 4px; background: var(--fondo); border-radius: 10px; padding: 3px; position: sticky; top: 0; z-index: 3; box-shadow: 0 0 0 6px var(--papel); }
.ficha-pestanas button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 7px 8px; font-size: 12.5px; font-weight: 500; color: var(--sutil); display: flex; align-items: center; justify-content: center; gap: 6px; }
.ficha-pestanas button.activa { background: var(--papel); color: var(--cafe); box-shadow: 0 1px 3px rgba(60,41,34,.12); }
.ficha-pestanas .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--critica); }
.interno { display: flex; flex-direction: column; gap: 10px; }
.interno-ayuda { font-size: 12px; color: var(--sutil); line-height: 1.45; background: var(--fondo); border-radius: 10px; padding: 9px 11px; }
.interno-lista { display: flex; flex-direction: column; gap: 8px; }
.nota-int { border-radius: 12px; padding: 9px 11px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.nota-int small { display: block; font-size: 11px; color: var(--sutil); margin-bottom: 3px; font-weight: 500; }
.nota-int.humano { background: var(--nude-suave); align-self: flex-end; max-width: 92%; }
.nota-int.claude { background: #f1ecf8; border: 1px solid #e2d8f0; max-width: 100%; }
.nota-int.claude small { color: #5b3f8c; }
.sugerida { margin-top: 8px; background: #fff; border: 1px dashed #cdbfe5; border-radius: 9px; padding: 8px 10px; }
.sugerida button { margin-top: 6px; border: 0; background: #5b3f8c; color: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12px; }
.escribiendo { font-size: 12px; color: #5b3f8c; display: flex; align-items: center; gap: 6px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: #5b3f8c; animation: rebote 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.rapidas { display: flex; flex-wrap: wrap; gap: 6px; }
.rapidas button { border: 1px solid #e2d8f0; background: #faf8fd; color: #5b3f8c; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.form-interno { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linea); padding-top: 10px; }
.form-interno textarea { border: 1px solid var(--linea); border-radius: 10px; padding: 9px 11px; resize: vertical; min-height: 60px; font-size: 13px; background: var(--fondo); }
.form-interno .fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--sutil); }
.form-interno .fila label { display: flex; gap: 6px; align-items: center; }
.form-interno input[type=checkbox] { accent-color: #5b3f8c; }

/* ---------- ajustes ---------- */
#vista-ajustes { overflow-y: auto; }
.ajustes { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.tarjeta-ajustes { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 22px; }
.tarjeta-ajustes h2 { margin: 0 0 4px; font-size: 17px; color: var(--cafe); }
.tarjeta-ajustes > p, .ajustes-cabecera p { margin: 0 0 14px; color: var(--sutil); font-size: 13px; line-height: 1.5; max-width: 640px; }
.ajustes-cabecera { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.ajustes-acciones { display: flex; gap: 8px; }
.ajustes-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.etapas-editor { display: flex; flex-direction: column; gap: 8px; }
.fila-etapa-ed { display: grid; grid-template-columns: 54px 34px minmax(130px, 1fr) minmax(170px, 2fr) 70px 104px 132px 84px 34px; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--linea); border-radius: 11px; background: var(--fondo); }
.fila-etapa-ed.cabecera { background: none; border: 0; padding: 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--sutil); }
.fila-etapa-ed input[type=text], .fila-etapa-ed textarea, .fila-etapa-ed select, .fila-etapa-ed .atiende-ed select, .fila-etapa-ed input[type=number] { width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; font-size: 13px; background: var(--papel); }
.fila-etapa-ed textarea { resize: vertical; min-height: 34px; line-height: 1.35; }
.fila-etapa-ed input[type=color] { width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 8px; padding: 2px; background: var(--papel); }
.mover { display: flex; flex-direction: column; gap: 2px; }
.mover button, .quitar { border: 1px solid var(--linea); background: var(--papel); border-radius: 6px; font-size: 11px; line-height: 1; padding: 3px 0; }
.quitar { height: 34px; font-size: 15px; color: var(--critica); }
.fila-etapa-ed .final { display: flex; align-items: center; gap: 6px; font-size: 12px; height: 34px; }
.fila-etapa-ed .cuantas { font-size: 11px; color: var(--sutil); margin-top: 3px; }
.leyenda { margin-top: 12px !important; font-size: 12px !important; }
.vendedoras { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vendedoras li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; }
.vendedoras li.inactiva { opacity: .55; }
.vendedoras li span { flex: 1; font-weight: 500; }
.vendedoras li small { color: var(--sutil); }
.fila-agregar { display: flex; gap: 8px; }
.fila-agregar input { flex: 1; border: 1px solid var(--linea); border-radius: 9px; padding: 9px 11px; }
.interruptor, .campo-numero { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linea); font-size: 13px; line-height: 1.45; }
.interruptor input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cafe); }
.campo-numero { justify-content: space-between; align-items: center; }
.campo-numero input { width: 64px; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; }
small { color: var(--sutil); }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--sutil); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 9px 8px; border-bottom: 1px solid var(--linea); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.catalogo-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#cat-tallas .fila-cat { grid-template-columns: 1fr 30px; }
.cat-ancho { grid-column: 1 / -1; }
.tasas-barra { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--arena); white-space: nowrap; }
.tasas-barra select { background: rgba(255,255,255,.1); color: var(--crema); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 4px 6px; font-size: 12px; }
.tasas-barra select option { color: var(--texto); }
.tasas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tasa-caja { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.tasa-caja span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--sutil); }
.tasa-caja strong { display: block; font-size: 26px; color: var(--cafe); margin: 2px 0; }
.tasa-caja small { display: block; line-height: 1.45; }
.tasa-caja .error { color: var(--critica); }
.tasas-config { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: 13px; }
.tasas-config input { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.tasas-config select { border: 1px solid var(--linea); border-radius: 8px; padding: 7px; }
.tasas-historial { margin-top: 12px; font-size: 13px; }
.tasas-historial summary { cursor: pointer; color: var(--sutil); }
.ventas-lista { display: flex; flex-direction: column; gap: 6px; }
.venta-fila { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; border: 1px solid var(--linea); border-radius: 10px; padding: 7px 9px; font-size: 12.5px; }
.venta-fila.activa { border-color: var(--nude); background: #fdf9f7; }
.venta-fila select { grid-column: 2; border: 1px solid var(--linea); border-radius: 7px; padding: 3px 5px; font-size: 12px; width: 100%; }
.venta-fila > .etiqueta-etapa { grid-column: 2; justify-self: start; }
.venta-num { font-weight: 700; color: var(--cafe); }
.insignia-venta { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; background: #e9f0f7; color: #2d5b86; white-space: nowrap; }
.insignia-venta.reactivada { background: #f3ecdf; color: #7a5a1a; }
.tarjeta.anterior { opacity: .72; border-style: dashed; }
.chips-etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.chips-etiquetas button { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 3px 9px; font-size: 12px; color: var(--sutil); }
.chips-etiquetas button.on { background: var(--cafe); border-color: var(--cafe); color: var(--crema); }
.montos-bs { font-size: 11.5px; color: var(--sutil); margin-top: 4px; line-height: 1.5; }
@media (max-width: 1500px) { .tasas-barra #tasas-texto { display: none; } }
@media (max-width: 1560px) and (min-width: 761px) { .estado { display: none; } }
.tasas-barra select { width: auto; max-width: 150px; }
@media (max-width: 760px) { .tasas-grid { grid-template-columns: 1fr; } .tasas-barra { order: 2; } }
#cat-tallas .fila-cat input[data-campo=descripcion] { display: none; }
/* ---------- pedido ---------- */
.estado-pedido { border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.estado-pedido.ok { background: #e7f2ea; color: #2f6b3f; }
.estado-pedido.falta { background: #f8f0d9; color: #6e5410; }
.form-pedido { display: flex; flex-direction: column; gap: 12px; }
.form-pedido fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px 12px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.form-pedido legend { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--sutil); font-weight: 600; padding: 0 4px; }
.form-pedido label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--sutil); min-width: 0; }
.form-pedido label.ancho { grid-column: 1 / -1; }
.form-pedido input, .form-pedido select, .form-pedido textarea { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 8px; font-size: 13px; color: var(--texto); background: var(--papel); min-width: 0; width: 100%; }
.form-pedido textarea { resize: vertical; min-height: 54px; }
.form-pedido .ia input, .form-pedido .ia select, .form-pedido .ia textarea { background: #f6f2fb; border-color: #dccff0; }
.form-pedido .ia > span::after { content: ' ✦ Claude'; color: #5b3f8c; font-weight: 600; }
.acciones-pedido { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones-pedido .boton { padding: 8px 12px; font-size: 12.5px; }
/* ---------- soportes ---------- */
.soportes h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--sutil); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.subir-boton { border: 1px dashed var(--nude); background: var(--nude-suave); color: var(--cafe); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0; }
.adjunto { display: grid; grid-template-columns: 64px 1fr; gap: 10px; border: 1px solid var(--linea); border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.miniatura { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--fondo); display: grid; place-items: center; font-size: 22px; cursor: zoom-in; border: 0; padding: 0; overflow: hidden; }
.miniatura img, .miniatura video { width: 100%; height: 100%; object-fit: cover; }
.adjunto .info { font-size: 12.5px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.adjunto .info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datos-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.datos-pago input { border: 1px solid var(--linea); border-radius: 6px; padding: 4px 6px; font-size: 12px; min-width: 0; }
.estado-pago { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; align-self: flex-start; }
.estado-pago.por_verificar { background: #f8f0d9; color: #6e5410; }
.estado-pago.verificado { background: #e7f2ea; color: #2f6b3f; }
.estado-pago.rechazado { background: #fbe3e5; color: var(--critica); }
.botones-mini { display: flex; gap: 4px; flex-wrap: wrap; }
.botones-mini button { border: 1px solid var(--linea); background: var(--papel); border-radius: 7px; padding: 3px 8px; font-size: 11.5px; }
.botones-mini button.ok { background: #2f6b3f; color: #fff; border-color: #2f6b3f; }
.botones-mini button.no { color: var(--critica); }
.material-item { border: 1px solid var(--linea); border-radius: 12px; padding: 8px; display: grid; grid-template-columns: 64px 1fr; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.material-item p { margin: 2px 0 6px; color: var(--sutil); white-space: pre-wrap; max-height: 80px; overflow: hidden; }
.material-item.destacado { border-color: var(--nude); background: #fdf9f7; }
/* ---------- material en Ajustes ---------- */
.material-nuevo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.zona-subida { border: 2px dashed var(--arena); border-radius: 14px; display: grid; place-items: center; text-align: center; padding: 20px; cursor: pointer; background: var(--fondo); font-size: 13px; }
.zona-subida.sobre { border-color: var(--cafe); background: var(--nude-suave); }
.material-texto { display: flex; flex-direction: column; gap: 6px; }
.material-texto input, .material-texto textarea { border: 1px solid var(--linea); border-radius: 9px; padding: 8px 10px; font-size: 13px; }
.material-texto .boton { align-self: flex-end; }
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.material-admin { border: 1px solid var(--linea); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.material-admin .vista-previa { height: 120px; border-radius: 8px; overflow: hidden; background: var(--fondo); display: grid; place-items: center; font-size: 30px; cursor: zoom-in; border: 0; padding: 0; width: 100%; }
.material-admin .vista-previa img, .material-admin .vista-previa video { width: 100%; height: 100%; object-fit: cover; }
.material-admin .vista-previa.texto { font-size: 12px; text-align: left; padding: 8px; white-space: pre-wrap; overflow: hidden; display: block; color: var(--texto); cursor: default; }
.material-admin input { border: 1px solid var(--linea); border-radius: 7px; padding: 5px 7px; font-size: 12.5px; }
.chips-modelos { display: flex; flex-wrap: wrap; gap: 4px; }
.chips-modelos label { font-size: 11.5px; border: 1px solid var(--linea); border-radius: 999px; padding: 2px 8px; display: flex; gap: 4px; align-items: center; cursor: pointer; }
.chips-modelos input { accent-color: var(--cafe); margin: 0; }
/* ---------- pagos ---------- */
#vista-pagos { overflow-y: auto; }
.pagos-contenedor { width: 100%; max-width: 1100px; margin: 0 auto; padding: 22px 20px 40px; }
.pago-fila { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px; display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; margin-bottom: 10px; align-items: start; }
.pago-fila .miniatura { width: 120px; height: 120px; }
.pago-fila h3 { margin: 0 0 2px; font-size: 14px; }
.pago-fila .datos-pago { grid-template-columns: repeat(3, 1fr); max-width: 520px; margin-top: 6px; }
.pago-fila .lado { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pago-fila .lado .boton { padding: 8px 14px; font-size: 12.5px; }
.visor { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; box-shadow: none; }
.visor::backdrop { background: rgba(20, 12, 9, .85); }
.visor img, .visor video { max-width: 92vw; max-height: 88vh; border-radius: 10px; display: block; }
.visor iframe { width: 80vw; height: 85vh; border: 0; border-radius: 10px; background: #fff; }
.cerrar-visor { position: fixed; top: 14px; right: 18px; border: 0; background: rgba(255,255,255,.15); color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; }
@media (max-width: 760px) { .material-nuevo { grid-template-columns: 1fr; } .pago-fila { grid-template-columns: 80px 1fr; } .pago-fila .miniatura { width: 80px; height: 80px; } .pago-fila .lado { grid-column: 1 / -1; flex-direction: row; } .pago-fila .datos-pago { grid-template-columns: 1fr 1fr; } }
.catalogo-columnas h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--sutil); }
.lista-cat { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fila-cat { display: grid; grid-template-columns: 1fr 1.4fr 30px; gap: 6px; }
.fila-cat input { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; font-size: 13px; min-width: 0; }
.fila-cat button { border: 1px solid var(--linea); background: var(--papel); border-radius: 8px; color: var(--critica); }
.chip.modelo { background: var(--cafe); color: var(--crema); border-color: var(--cafe); }
@media (max-width: 760px) { .catalogo-columnas { grid-template-columns: 1fr; } .fila-cat { grid-template-columns: 1fr 30px; } .fila-cat input:nth-child(2) { grid-column: 1; } }
#reasignar-lista { display: flex; flex-direction: column; gap: 10px; }
#reasignar-lista label { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; font-weight: 400; }
#reasignar-lista select { border: 1px solid var(--linea); border-radius: 9px; padding: 8px; }

/* ---------- diálogo y avisos ---------- */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(460px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(43, 31, 26, .45); }
dialog form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
dialog h3 { margin: 0; color: var(--cafe); }
.sutil { color: var(--sutil); margin: 0; font-size: 13px; line-height: 1.5; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
dialog input, dialog textarea { border: 1px solid var(--linea); border-radius: 9px; padding: 9px 11px; font-weight: 400; background: var(--fondo); }
.sim-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-sugerencias button { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--cafe); color: var(--crema); padding: 10px 18px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; max-width: 90vw; }
.aviso.visible { opacity: 1; transform: translateX(-50%); }
.aviso.error { background: var(--critica); color: #fff; }
/* Avisos de intervención humana (esquina inferior derecha, se apilan) */
.alertas-flotantes { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(360px, calc(100vw - 32px)); }
.alerta-flotante { background: var(--papel); border-left: 5px solid var(--critica); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px 14px; font-size: 13px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; animation: entrar .25s ease-out; }
.alerta-flotante b { color: var(--critica); }
.alerta-flotante p { margin: 0; grid-column: 1 / 2; color: var(--texto); line-height: 1.4; }
.alerta-flotante .acciones { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; gap: 6px; }
.alerta-flotante button { border: 0; background: var(--cafe); color: var(--crema); border-radius: 8px; padding: 5px 10px; font-size: 12px; }
.alerta-flotante button.cerrar { background: var(--fondo); color: var(--sutil); }
@keyframes entrar { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Quién atiende */
.atiende { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); white-space: nowrap; }
.atiende.claude { background: #ece6f5; border-color: #d9cdee; color: #5b3f8c; }
.atiende.copiloto { background: #e7f0ee; border-color: #cfe1dc; color: #2f6b5c; }
.chat-atiende { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sutil); }
/* Columna de intervención humana en el embudo */
.columna.humano { background: #fbeef0; border: 2px solid #f0c4c9; }
.columna.humano .columna-cabecera { color: var(--critica); }
.columna.humano .tarjeta { border-left-color: var(--critica); }
.columna.humano .motivo { font-size: 11.5px; color: #8a2a33; margin-top: 4px; display: block; line-height: 1.35; }
.columna.humano .tarjeta .resolver { margin-top: 6px; width: 100%; border: 1px solid #e3b3b9; background: #fff; color: var(--critica); border-radius: 7px; padding: 4px; font-size: 11.5px; font-weight: 500; }
.embudo.minima .columna.humano .motivo, .embudo.compacta .columna.humano .motivo { display: none; }
.embudo.minima .columna.humano .resolver { display: none; }
.columna-vacia { padding: 8px 12px; font-size: 12px; color: var(--sutil); }
.separador-embudo { width: 2px; flex: 0 0 2px; background: var(--linea); border-radius: 2px; margin: 0 2px; }
.apartar { width: 100%; margin-top: 8px; border: 1px dashed #e3b3b9; background: #fff; color: var(--critica); border-radius: 9px; padding: 7px; font-size: 12.5px; font-weight: 500; }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .estado { display: none; }
}
@media (max-width: 1000px) {
  .ajustes-columnas { grid-template-columns: 1fr; }
  .fila-etapa-ed { grid-template-columns: 44px 34px 1fr 34px; }
  .fila-etapa-ed > .desc, .fila-etapa-ed > .prob, .fila-etapa-ed > .tipo, .fila-etapa-ed > .atiende-ed, .fila-etapa-ed > .final { grid-column: 3 / 4; }
  .fila-etapa-ed.cabecera { display: none; }
  .campo-mini span { display: inline; }
  .campo-mini input, .campo-mini select { max-width: 160px; }
}
@media (max-width: 1180px) {
  .ficha { position: fixed; right: 0; top: 0; bottom: 0; z-index: 30; box-shadow: -10px 0 30px rgba(0,0,0,.15); }
  .cerrar-ficha, .ver-ficha { display: block; }
  .ver-ficha { border: 1px solid var(--linea); background: var(--papel); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; }
  .metricas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .barra { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .pestanas { order: 3; width: 100%; overflow-x: auto; }
  .estado { display: none; }
  .centro-alertas { order: 2; margin-left: 0; }
  .yo { margin-left: auto; }
  .lista { width: 100%; border-right: 0; }
  .chat { display: none; }
  #vista-bandeja.con-chat .lista { display: none; }
  #vista-bandeja.con-chat .chat { display: flex; }
  .volver { display: block; border: 0; background: none; font-size: 26px; line-height: 1; padding: 0 4px 0 0; }
  .modos { display: none; }
  .ficha { width: 100%; }
  .mensajes { padding: 14px; }
  .burbuja { max-width: 86%; }
  .metricas { grid-template-columns: 1fr; padding: 16px; }
  .tarjeta-grande { grid-column: span 1; }
  .barra-fila { grid-template-columns: 110px 1fr 28px; }
  .embudo { padding: 12px 16px; }
}

.boton-enlace { border: 1px solid var(--linea); background: var(--papel); border-radius: 7px; padding: 3px 8px; font-size: 11.5px; color: var(--texto); text-decoration: none; display: inline-block; }
.ficha-pestanas button { white-space: nowrap; font-size: 12px; padding: 7px 6px; }

.selector-venta-pedido { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sutil); margin-bottom: 10px; }
.selector-venta-pedido select { border: 1px solid var(--linea); border-radius: 8px; padding: 5px 7px; font-size: 12.5px; }

/* ---- Envíos ---- */
#vista-envios, #vista-pagos { overflow-y: auto; }
.envios-contenedor { width: 100%; padding: 22px 20px 40px; }
.filtros-envios { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; font-size: 12.5px; color: var(--sutil); }
.filtros-envios input, .filtros-envios select { border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; background: var(--papel); }
.filtros-envios input[type=search] { width: 170px; }
.filtros-envios input[type=number] { width: 78px; }
.filtros-envios .rango { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.filtros-envios .filtro-activo { border-color: var(--cafe); background: #fbf4f0; }
.envios-resumen { font-size: 12.5px; color: var(--sutil); margin-bottom: 8px; }
.tabla-envios-caja { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
.tabla-envios { font-size: 12.5px; min-width: 1250px; }
.tabla-envios td { vertical-align: top; }
.tabla-envios tr.alerta td { background: #fdf0f1; }
.tabla-envios select, .tabla-envios input { border: 1px solid var(--linea); border-radius: 7px; padding: 4px 6px; font-size: 12px; width: 100%; min-width: 0; }
.control-guia { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--cafe); white-space: nowrap; }
.sin-control { color: var(--sutil); font-size: 11.5px; }
.envio-alerta { color: var(--critica); font-size: 11.5px; margin-top: 3px; }
.envio-falta { color: #8a6a12; font-size: 11.5px; }
.tabla-envios small { display: block; color: var(--sutil); }
/* ---- Pagos: secciones, cuentas ---- */
.subpestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--linea); }
.subpestanas button { border: 0; background: none; padding: 9px 12px; font-size: 14px; color: var(--sutil); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subpestanas button.activa { color: var(--cafe); border-bottom-color: var(--cafe); font-weight: 600; }
.subpestanas span:not(:empty) { background: var(--critica); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.balance-cabecera { background: var(--cafe); color: var(--crema); border-radius: var(--radio); padding: 18px 20px; display: grid; grid-template-columns: 1.2fr 2fr; gap: 18px; margin-bottom: 14px; }
.balance-cabecera .grande { font-size: 32px; font-weight: 700; }
.balance-cabecera small { color: var(--arena); display: block; line-height: 1.5; }
.balance-cabecera select, .balance-cabecera input { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: var(--crema); border-radius: 8px; padding: 5px 7px; font-size: 12.5px; }
.balance-cabecera select option { color: var(--texto); }
.balance-periodo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.balance-periodo div { background: rgba(255,255,255,.07); border-radius: 10px; padding: 9px 11px; }
.balance-periodo b { display: block; font-size: 18px; }
.balance-controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--arena); }
.cuentas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cuenta-caja { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; }
.cuenta-caja.inactiva { opacity: .55; }
.cuenta-caja header { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.cuenta-caja h3 { margin: 0; font-size: 14.5px; color: var(--cafe); }
.cuenta-caja .moneda { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #e7f2ea; color: #2f6b3f; }
.cuenta-caja .moneda.VES { background: #f8f0d9; color: #6e5410; }
.cuenta-caja .saldo { font-size: 24px; font-weight: 700; color: var(--cafe); margin: 6px 0 2px; }
.cuenta-caja small { display: block; color: var(--sutil); font-size: 12px; line-height: 1.5; }
.cuenta-caja .perdida { color: var(--critica); }
.cuenta-caja .ganancia { color: #2f6b3f; }
.cuenta-caja .editar-cuenta { display: grid; gap: 6px; margin-top: 8px; }
.cuenta-caja .editar-cuenta input { border: 1px solid var(--linea); border-radius: 7px; padding: 5px 7px; font-size: 12.5px; }
.cuentas-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; align-items: start; }
.cuentas-acciones summary { cursor: pointer; font-weight: 600; color: var(--cafe); }
.form-cuentas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 12px; font-size: 12px; color: var(--sutil); }
.form-cuentas label { display: flex; flex-direction: column; gap: 3px; }
.form-cuentas .ancho { grid-column: 1 / -1; }
.form-cuentas input, .form-cuentas select { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 8px; font-size: 13px; color: var(--texto); }
.form-cuentas .boton { grid-column: 1 / -1; justify-self: start; }
.previa-cambio { font-size: 13px; color: var(--cafe); }
.tabla-mov input { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 5px; font-size: 12.5px; width: 90px; text-align: right; }
.tabla-mov input:hover, .tabla-mov input:focus { border-color: var(--linea); background: var(--papel); }
.tabla-mov .salida { color: var(--critica); }
.tabla-mov .entrada { color: #2f6b3f; }
.cobro-fila { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 10px; align-items: center; }
.cobro-fila form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cobro-fila input, .cobro-fila select, .pago-fila select.cuenta-pago { border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.cobro-fila input { width: 110px; }
@media (max-width: 760px) { .balance-cabecera { grid-template-columns: 1fr; } .balance-periodo { grid-template-columns: 1fr 1fr; } .form-cuentas { grid-template-columns: 1fr; } .cobro-fila { grid-template-columns: 1fr; } }
.tabla-mov small { display: block; }
.tabla-mov td.num { white-space: nowrap; }
@media (max-width: 1600px) {
  .pestana { padding: 7px 10px; font-size: 13.5px; }
  .pildora-humano { padding: 6px 10px; }
  .activar-avisos { padding: 5px 9px; }
  .tasas-barra select { max-width: 120px; }
}
@media (max-width: 1500px) and (min-width: 761px) {
  .marca-texto, .logo small { display: none; }
  .activar-avisos { font-size: 0; } .activar-avisos::first-letter { font-size: 14px; }
}

/* ---- Correcciones de espacio: Pagos / Cuentas ---- */
.form-cuentas > *, .editar-cuenta > *, .cuentas-grid > *, .cuentas-acciones > *, .balance-periodo > * { min-width: 0; }
.form-cuentas input, .form-cuentas select, .editar-cuenta input { width: 100%; }
.editar-cuenta label { display: flex; align-items: center; gap: 6px; }
.editar-cuenta label input[inputmode] { flex: 1; width: auto; }
.editar-cuenta label input[type=checkbox] { width: auto; flex: none; }
.cuentas-acciones { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.pagos-contenedor { max-width: 1240px; }
.balance-cabecera > * { min-width: 0; }
.balance-controles input[type=date] { width: 150px; }

/* ---- Barra superior en pantallas medianas: nada se sale ---- */
.barra > * { min-width: 0; }
.pestanas { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { white-space: nowrap; flex-shrink: 0; }
.centro-alertas, .tasas-barra, .yo { flex-shrink: 0; }
@media (max-width: 1360px) and (min-width: 761px) {
  .barra { gap: 12px; padding: 10px 14px; }
  .pildora-humano .texto-largo { display: none; }
  .yo span { display: none; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .pestana { padding: 6px 8px; font-size: 13px; }
  .tasas-barra select { max-width: 96px; }
  .yo select { max-width: 110px; }
}
.tabla-mov { min-width: 820px; }
.subpestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.subpestanas button { white-space: nowrap; flex-shrink: 0; }
.tabla-envios td:nth-child(2) { min-width: 140px; }
.tabla-envios td:nth-child(3) { min-width: 130px; }
.tabla-envios td:nth-child(4), .tabla-envios td:nth-child(5) { min-width: 78px; }
.tabla-envios td:nth-child(6) { min-width: 170px; }
.tabla-envios td:nth-child(11) { min-width: 180px; }
.tabla-envios { min-width: 1400px; }
.filtros-envios input[type=number]#env-cantidad { width: 92px; }
.filtros-envios input[type=date] { width: 132px; }
.filtros-envios input[type=search] { width: 190px; }

/* ---- Monto en $ o Bs ---- */
.titulo-monto { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.moneda-monto { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.moneda-monto button { border: 0; background: var(--papel); padding: 2px 10px; font-size: 11.5px; font-weight: 600; color: var(--sutil); }
.moneda-monto button.on { background: var(--cafe); color: var(--crema); }
.montos-bs b { color: var(--cafe); }
.monto-doble { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.monto-doble small { font-weight: 500; color: var(--sutil); font-size: 10.5px; }
.columna-monto .bs { color: var(--sutil); }
.columna-monto { line-height: 1.35; }
#embudo-resumen span em { display: block; font-style: normal; font-size: 11.5px; color: var(--sutil); }
.tasa-embudo b { color: var(--sutil); }
.tabla-envios td.num small { font-size: 11px; }
/* ---- Barra: tasa de la tienda ---- */
button.tasas-barra { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 11px; color: var(--arena); cursor: pointer; }
button.tasas-barra:hover { background: rgba(255,255,255,.14); }
button.tasas-barra b { color: var(--crema); font-weight: 600; font-size: 12px; }
@media (max-width: 1360px) and (min-width: 761px) { #tasa-tienda-barra { font-size: 11.5px; } }
/* ---- Ajustes: tasa de la tienda ---- */
.tasa-tienda { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; border: 2px solid var(--nude); background: #fdf9f7; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.tasa-tienda h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--cafe); }
.tasa-tienda p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.tasa-tienda-control { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tasa-tienda-control select, .tasa-tienda-control input { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.tasa-tienda-control input { width: 150px; }
.tasa-tienda-control strong { color: var(--cafe); }
@media (max-width: 760px) { .tasa-tienda { grid-template-columns: 1fr; } }

.no-realizado { margin-top: 10px; background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.3); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; }
.no-realizado span { color: var(--arena); }
.tabla-mov { min-width: 920px; }

/* ---- Embudo: mensajes sin leer ---- */
.cabecera-cuentas { display: inline-flex; gap: 5px; align-items: center; }
.columna-sin-leer { background: #2d6cdf; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; white-space: nowrap; }
.tarjeta { position: relative; }
.no-leidos-tarjeta { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #2d6cdf; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--papel); z-index: 1; }
.resumen-sin-leer b { color: #2d6cdf; }
.tarjetas { padding-top: 9px; }
.embudo.minima .no-leidos-tarjeta { top: 50%; transform: translateY(-50%); right: 6px; box-shadow: none; }
.embudo.minima .tarjeta:has(.no-leidos-tarjeta) { padding-right: 30px; }

/* ===================== Acceso ===================== */
body.sin-sesion .barra, body.sin-sesion main.vista { visibility: hidden; }
.acceso { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: linear-gradient(160deg, #3c2922 0%, #5a4037 55%, #b18474 100%); overflow-y: auto; }
.acceso-tarjeta { width: min(420px, 100%); background: var(--papel); border-radius: 22px; padding: 28px 26px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.acceso-marca { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--cafe); margin-bottom: 18px; }
.acceso-marca .iso { background: var(--cafe); color: var(--crema); }
.acceso-marca em { font-style: normal; color: var(--sutil); font-weight: 400; }
.acceso h2 { margin: 0 0 6px; color: var(--cafe); font-size: 21px; }
.acceso p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.acceso form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.acceso label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--texto); }
.acceso input[type=text], .acceso input[type=password], .acceso input[type=email] { border: 1px solid var(--linea); border-radius: 10px; padding: 11px 12px; font-size: 15px; }
.acceso input:focus { outline: 2px solid var(--nude); border-color: var(--nude); }
.acceso .boton { padding: 12px; font-size: 15px; margin-top: 4px; }
.acceso-recordar { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; color: var(--sutil) !important; }
.acceso-enlace { border: 0; background: none; color: var(--cafe); text-decoration: underline; font-size: 13px; padding: 10px 0 0; cursor: pointer; }
.acceso-error { background: #fbeef0; color: var(--critica); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 12px 0 0 !important; }
.acceso-ok { background: #e7f2ea; color: #2f6b3f; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 12px 0 0 !important; }
.acceso-nota { background: #f8f0d9; color: #6e5410; border-radius: 10px; padding: 8px 12px; }
.acceso-ayuda { margin-top: 14px !important; font-size: 12.5px !important; }

/* ===================== Menú de usuario ===================== */
.usuario-menu { position: relative; flex-shrink: 0; }
#boton-usuario { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--crema); border-radius: 999px; padding: 4px 12px 4px 4px; }
#boton-usuario:hover { background: rgba(255,255,255,.14); }
.usuario-iniciales { width: 28px; height: 28px; border-radius: 50%; background: var(--crema); color: var(--cafe); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.usuario-textos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.usuario-textos b { font-size: 12.5px; font-weight: 600; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.usuario-textos small { font-size: 10.5px; color: var(--arena); }
.menu-usuario { position: absolute; right: 0; top: calc(100% + 6px); background: var(--papel); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.2); padding: 6px; min-width: 220px; z-index: 30; display: flex; flex-direction: column; }
.menu-usuario button, .menu-usuario a { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--texto); text-decoration: none; display: block; }
.menu-usuario button:hover, .menu-usuario a:hover { background: #f5efea; }
.avisos-admin { border: 0; background: #f3c26b; color: #3c2922; border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: 12.5px; }
@media (max-width: 1360px) and (min-width: 761px) { .usuario-textos small { display: none; } }
@media (max-width: 1180px) and (min-width: 761px) { .usuario-textos { display: none; } #boton-usuario { padding: 4px; } }

/* ===================== Diálogos de perfil y avisos ===================== */
dialog.dialogo-ancho { width: min(560px, 94vw); padding: 0; }
.perfil-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 0; }
.cerrar-dialogo { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--sutil); }
.perfil-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 22px 0; }
.perfil-datos div { background: #f8f4f1; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.perfil-datos span { display: block; font-size: 11px; color: var(--sutil); text-transform: uppercase; letter-spacing: .5px; }
.perfil-datos b { color: var(--cafe); overflow-wrap: anywhere; }
.form-perfil h4 { margin: 0; color: var(--cafe); }
.form-perfil p { margin: 0; font-size: 12.5px; }
.form-perfil + .form-perfil { border-top: 1px solid var(--linea); }
#dialogo-avisos > p, #lista-avisos { padding: 0 22px; }
#lista-avisos { padding-bottom: 20px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.aviso-admin { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.aviso-admin.nuevo { border-color: #f3c26b; background: #fffaf0; }
.aviso-admin p { margin: 6px 0; }
.aviso-cabecera { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ===================== Usuarios (Ajustes) ===================== */
#vista-ajustes #seccion-usuarios { margin-bottom: 0; }
.tabla-usuarios { min-width: 820px; }
.tabla-usuarios input:not([type=checkbox]), .tabla-usuarios select { border: 1px solid var(--linea); border-radius: 7px; padding: 5px 7px; font-size: 12.5px; width: 100%; }
.tabla-usuarios td { vertical-align: middle; }
.tabla-usuarios tr.inactivo td { opacity: .55; }
.form-usuario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px 10px; align-items: end; margin-top: 14px; font-size: 12px; color: var(--sutil); }
.form-usuario label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.form-usuario input, .form-usuario select { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 9px; font-size: 13px; color: var(--texto); width: 100%; }
.clave-nueva { margin-top: 12px; background: #e7f2ea; color: #2f4f3a; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.clave-nueva code { font-size: 16px; background: #fff; border-radius: 6px; padding: 2px 8px; margin: 0 6px; letter-spacing: .5px; }
.clave-nueva small { display: block; color: #4d6b57; }
.ajustes-fila-opcion { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 14px; font-size: 13px; }
.ajustes-fila-opcion select { border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; margin-left: 6px; }
@media (max-width: 900px) { .form-usuario { grid-template-columns: 1fr 1fr; } .form-usuario .boton { grid-column: 1 / -1; } }

/* ===================== Informe personal ===================== */
.informe-selector { display: flex; justify-content: flex-end; margin-bottom: 10px; font-size: 13px; color: var(--sutil); }
.informe-selector select { border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; margin-left: 6px; }
.mi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mi-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; align-items: start; }
.mi-lista { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mi-lista h3 { margin: 0 0 4px; font-size: 14px; color: var(--cafe); display: flex; justify-content: space-between; }
.mi-lista h3 small { background: #f3ece7; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.mi-item { text-align: left; border: 1px solid var(--linea); background: var(--papel); border-radius: 10px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12.5px; }
.mi-item:hover { border-color: var(--nude); background: #fdf9f7; }
.mi-item span { color: var(--sutil); text-align: right; white-space: nowrap; }
.mi-item small { grid-column: 1 / -1; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mi-subtitulo { color: var(--cafe); margin: 6px 0 10px; }

/* ===================== Lo que no ve cada nivel ===================== */
body:not(.rol-superadmin) .solo-admin { display: none !important; }
body.rol-vendedor #filtro-vendedora, body.rol-vendedor label:has(> #embudo-vendedora) { display: none; }
/* Quien no ve la Bandeja no puede abrir chats ni ver la píldora de "necesita una persona" */
body.rol-logistica [data-abrir-clienta], body.rol-admin [data-abrir-clienta], body.rol-logistica #pildora-humano, body.rol-admin #pildora-humano { display: none !important; }
body:not(.rol-superadmin):not(.rol-admin) #pagos-secciones { display: none; }
body:not(.rol-superadmin):not(.rol-admin) button.tasas-barra { cursor: default; }
body:not(.rol-admin) #descargar-envios[href*="ventas"] { }

/* ---- Fases de Claude ---- */
.fases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fase { text-align: left; border: 1px solid var(--linea); background: var(--papel); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--texto); position: relative; }
.fase:not(:disabled):hover { border-color: var(--nude); }
.fase.actual { border: 2px solid var(--cafe); background: #fdf9f7; }
.fase:disabled { opacity: .55; cursor: not-allowed; }
.fase-num { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--sutil); }
.fase b { color: var(--cafe); font-size: 14px; }
.fase ul { margin: 4px 0 0; padding-left: 16px; color: var(--sutil); line-height: 1.45; }
.fase-marca { font-size: 11.5px; font-weight: 700; color: #2f6b3f; }
@media (max-width: 1000px) { .fases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fases { grid-template-columns: 1fr; } }

.exportar-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.exportar-botones .boton { text-decoration: none; }

/* ---------- v1.1: respuestas rápidas en el chat ---------- */
.chat-contenido { position: relative; }
.rapidas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 16px 0; background: var(--papel); border-top: 1px solid var(--linea); }
.rapidas + .menu-rapidas + .redactor, .rapidas:not([hidden]) ~ .redactor { border-top: 0; }
.rapidas-titulo { font-size: 12px; color: var(--sutil); font-weight: 500; }
.rapidas button { border: 1px solid var(--nude); background: var(--nude-suave); color: var(--cafe); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 500; }
.rapidas button:hover { background: var(--crema); }
.rapidas button em { font-style: normal; color: var(--alta); font-weight: 400; }
.boton-rapidas { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); font-size: 17px; }
.boton-rapidas:hover { background: var(--nude-suave); border-color: var(--nude); }
.menu-rapidas { position: absolute; left: 12px; bottom: 70px; width: min(420px, calc(100% - 24px)); max-height: 340px; overflow-y: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 8px 30px rgba(60,41,34,.18); z-index: 20; padding: 6px; }
.menu-rapidas-titulo { font-size: 12px; font-weight: 600; color: var(--sutil); padding: 6px 8px; }
.menu-rapidas-titulo small { font-weight: 400; }
.menu-rapidas button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; }
.menu-rapidas button:hover { background: var(--nude-suave); }
.menu-rapidas button span { font-size: 12px; color: var(--sutil); line-height: 1.35; }

/* ---------- v1.1: gasto en Claude ---------- */
.uso-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.uso-tarjeta { background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uso-tarjeta span { font-size: 12px; color: var(--sutil); }
.uso-tarjeta b { font-size: 20px; color: var(--cafe); }
.uso-tarjeta small { font-size: 11.5px; color: var(--sutil); overflow-wrap: anywhere; }
.uso-barras { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 6px 0; margin-bottom: 12px; border-bottom: 1px solid var(--linea); }
.uso-barras div { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.uso-barras i { display: block; width: 100%; background: var(--nude); border-radius: 3px 3px 0 0; }
.uso-tablas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.uso-lotes { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; }
.ahorro-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ahorro-opciones > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.ahorro-opciones select, .ahorro-opciones input[type=number] { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; background: var(--papel); }
.ahorro-opciones input[type=number] { width: 90px; }
.ahorro-opciones span { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 400; }
.ahorro-opciones small { font-weight: 400; font-size: 12px; line-height: 1.4; }
.aviso-suave { background: var(--nude-suave); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px; }
.conmutador { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 400; white-space: nowrap; }
.conmutador input { width: 16px; height: 16px; accent-color: var(--cafe); }

/* ---------- v1.1: editor de respuestas rápidas ---------- */
.respuestas-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.respuesta-fila { border: 1px solid var(--linea); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--papel); min-width: 0; }
.respuesta-fila.apagada { background: var(--fondo); opacity: .75; }
.respuesta-cabeza { display: flex; gap: 8px; align-items: center; }
.respuesta-cabeza input[data-campo-r=titulo] { flex: 1; font-weight: 600; }
.respuesta-fila label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 500; }
.respuesta-fila input:not([type=checkbox]), .respuesta-fila textarea { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-weight: 400; width: 100%; }
.respuesta-fila textarea { resize: vertical; line-height: 1.4; }
.aviso-completar { color: var(--alta); font-size: 12px; }
.probar-respuestas { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.probar-respuestas label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.probar-respuestas input { border: 1px solid var(--linea); border-radius: 10px; padding: 9px 12px; font-weight: 400; }
#probar-resultado { display: grid; gap: 8px; margin-top: 10px; }
.probar-sug { background: var(--nude-suave); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.probar-sug p { margin: 6px 0 0; line-height: 1.45; }
#variables-respuestas code { background: var(--nude-suave); border-radius: 5px; padding: 0 4px; font-size: 12px; }
.fila-cat:has(.precio-cat) { grid-template-columns: 1fr 1.2fr 80px 30px; }
.precio-cat { text-align: right; }

/* ---------- v1.1: versión ---------- */
.version-crm { text-align: center; color: var(--sutil); font-size: 12px; margin: 4px 0 20px; }
.enlace { background: none; border: 0; padding: 0; color: var(--cafe-2); text-decoration: underline; font-size: inherit; }
#version-cambios h2 { font-size: 16px; }
@media (max-width: 700px) {
  .fila-cat:has(.precio-cat) { grid-template-columns: 1fr 70px 30px; }
  .fila-cat:has(.precio-cat) input[data-campo=descripcion] { grid-column: 1 / -1; order: 5; }
}
.respuesta-fila label.conmutador { flex-direction: row; font-weight: 400; }

/* ===================== v1.2: barra superior más limpia ===================== */
.marca, .iso { flex-shrink: 0; }
.barra { gap: 16px; }
.pestanas { flex: 1 1 auto; }
.centro-alertas { margin-left: 0; }
.ico-traspaso { width: 30px; height: 15px; flex-shrink: 0; vertical-align: middle; }
.pildora-humano { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; }
.pildora-humano .ico-traspaso { width: 32px; height: 16px; }
.activar-avisos { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.tasas-cont { position: relative; flex-shrink: 0; }
button.tasas-barra { display: inline-flex; align-items: center; gap: 6px; }
.tasa-etq { font-size: 11px; color: var(--arena); }
.tasas-barra .flecha { font-size: 10px; color: var(--arena); }
.menu-tasas { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: calc(100vw - 24px); background: var(--papel); color: var(--texto); border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.24); padding: 10px; z-index: 40; white-space: normal; }
.menu-tasas-titulo { font-weight: 600; font-size: 13.5px; color: var(--cafe); padding: 2px 4px 8px; }
.menu-tasas-titulo small { font-weight: 400; color: var(--sutil); margin-left: 4px; }
.tasa-fila { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; }
.tasa-fila + .tasa-fila { border-top: 1px solid var(--linea); border-radius: 0; }
.tasa-fila.activa { background: var(--nude-suave); border-radius: 10px; }
.tasa-fila.activa + .tasa-fila { border-top: 0; }
.tasa-fila div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tasa-fila b { font-size: 13px; }
.tasa-fila b em { font-style: normal; font-weight: 500; color: var(--sutil); font-size: 12px; }
.tasa-fila small { font-size: 11.5px; color: var(--sutil); line-height: 1.35; }
.tasa-fila strong { font-size: 15px; color: var(--cafe); white-space: nowrap; }
.tasa-brecha, .tasa-auto { font-size: 12px; color: var(--sutil); padding: 6px 10px 0; }
.tasa-brecha b { color: var(--cafe); }
.menu-tasas-acciones { display: flex; gap: 8px; padding: 10px 6px 2px; flex-wrap: wrap; }
.menu-tasas-acciones button { flex: 1; padding: 8px 10px; }
@media (max-width: 1360px) and (min-width: 761px) { .tasa-etq { display: none; } }

/* Ícono "pasar a una persona" */
.chip-persona { display: inline-flex; align-items: center; background: #fbe4e7; color: var(--critica); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.chip-persona .ico-traspaso { width: 28px; height: 14px; }
.titulo-persona { display: inline-flex; align-items: center; gap: 6px; }
.apartar { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cola { display: inline-flex; align-items: center; gap: 5px; }
.cola .ico-traspaso { width: 26px; height: 13px; }

/* Bandeja: las colas se acomodan en dos filas en vez de esconderse */
.colas { flex-wrap: wrap; overflow: visible; }
@media (min-width: 1280px) { .lista { width: 370px; } }

/* Ajustes: campos que se cortaban */
.respuesta-fila textarea[data-campo-r=palabras] { min-height: 52px; }
#uso-dias { min-width: 96px; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; background: var(--papel); }
.tabla-usuarios select { min-width: 140px; }
/* Colas compactas: caben en dos filas */
.colas { gap: 5px; padding: 10px 12px 0; }
.cola { padding: 4px 9px; font-size: 12px; }
.cola b { font-size: 10.5px; padding: 0 6px; }

/* ---------- v1.2: app instalable y vista de celular ---------- */
.ico-pestana { display: none; }
.instalar-pasos h3 { margin: 0 0 10px; color: var(--cafe); }
.instalar-pasos ol { padding-left: 20px; line-height: 1.6; }
.instalar-pasos code { background: var(--nude-suave); padding: 0 4px; border-radius: 4px; }
@media (max-width: 760px) {
  /* Barra superior en una sola fila; las pestañas pasan abajo, como en una app */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .barra { flex-wrap: nowrap; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  .marca-texto, .usuario-textos { display: none; }
  .iso { width: 32px; height: 32px; font-size: 16px; }
  .centro-alertas { order: 0; margin-left: auto; gap: 6px; }
  .tasas-cont { order: 0; min-width: 0; }
  .tasas-barra { order: 0; padding: 6px 10px; }
  .tasa-etq { display: none; }
  #boton-usuario { padding: 3px; }
  .pestanas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; order: 0; width: auto; overflow: visible;
    display: flex; justify-content: space-around; gap: 2px;
    background: var(--cafe); border-top: 1px solid rgba(255,255,255,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .pestana { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 2px; border-radius: 10px; font-size: 10.5px; font-weight: 500; position: relative; color: var(--arena); }
  .pestana .ico-pestana { display: block; width: 22px; height: 22px; }
  .pestana-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pestana.activa { background: rgba(230,223,217,.14); color: #fff; }
  .pestana .cuenta { position: absolute; top: 1px; left: calc(50% + 6px); font-size: 10px; padding: 0 5px; line-height: 15px; }
  /* Dentro de un chat se esconde la barra de abajo para dar espacio al cuadro de texto */
  body:has(#vista-bandeja.activa.con-chat) .pestanas { display: none; }
  body:has(#vista-bandeja.activa.con-chat) { padding-bottom: env(safe-area-inset-bottom); }
  .aviso { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .alertas-flotantes { right: 10px; left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }
  .ficha { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .menu-tasas { position: fixed; left: 10px; right: 10px; top: calc(56px + env(safe-area-inset-top)); width: auto; max-width: none; }
  .menu-usuario { position: fixed; right: 10px; top: calc(56px + env(safe-area-inset-top)); }
  .redactor { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .menu-rapidas { bottom: 70px; }
}
/* El zoom automático del iPhone al tocar un campo se evita con maximum-scale=1 en la etiqueta viewport */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Abierta como app (desde el ícono): sin bordes de navegador, se respeta la barra de estado del teléfono */
body.en-app .barra { padding-top: calc(10px + env(safe-area-inset-top)); }

/* ---------- v1.2.2: escala del celular (pantallas más compactas) y embudo ---------- */
.embudo-movil { display: none; }
@media (max-width: 760px) {
  body { font-size: 13.5px; }
  /* Bandeja: colas en una sola fila deslizable, filtros compactos y más espacio para la lista */
  .colas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 8px 10px 0; gap: 5px; scrollbar-width: none; }
  .cola { padding: 4px 9px; font-size: 12px; flex-shrink: 0; }
  .lista-cabecera { padding: 8px 10px; gap: 6px; }
  #buscar { padding: 8px 12px; font-size: 14px; }
  .filtros { gap: 6px; }
  .filtros select { padding: 6px 8px; font-size: 12.5px; }
  .cola-ayuda, .boton-simular { display: none; }
  .conv { padding: 10px 12px; gap: 9px; grid-template-columns: 38px 1fr auto; }
  .conv .avatar { width: 38px; height: 38px; font-size: 13px; }
  /* Chat */
  .chat-cabecera { padding: 8px 10px; gap: 8px; }
  .banda-alerta { padding: 8px 12px; font-size: 12.5px; gap: 8px; }
  .banda-alerta button { font-size: 12px; padding: 5px 8px; }
  .burbuja { font-size: 14px; }
  .redactor textarea { font-size: 15px; }
  /* Embudo: filtros escondidos tras un botón y etapas en columnas que se deslizan de lado */
  #vista-embudo { overflow: hidden; }
  .embudo-movil { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 0; }
  .boton-filtros-embudo { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--cafe); display: inline-flex; gap: 6px; align-items: center; }
  .boton-filtros-embudo span { background: var(--cafe); color: var(--crema); border-radius: 999px; padding: 0 6px; font-size: 11px; }
  .embudo-movil-ayuda { font-size: 11.5px; color: var(--sutil); }
  .embudo-barra { padding: 8px 10px 0; gap: 8px; }
  #vista-embudo:not(.filtros-abiertos) .embudo-filtros { display: none; }
  #vista-embudo.filtros-abiertos .embudo-barra { max-height: 55vh; overflow-y: auto; }
  .embudo-filtros { gap: 8px; width: 100%; }
  .embudo-filtros label { width: 100%; justify-content: space-between; font-size: 12px; }
  .embudo-filtros select, .embudo-filtros input { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; }
  .rango { flex: 1; } .rango input { width: auto; flex: 1; }
  #vista-embudo .densidad, .embudo-ayuda { display: none; }
  .embudo-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 11px; width: 100%; }
  .embudo-resumen > * { min-width: 0; overflow-wrap: anywhere; }
  .embudo-resumen b { font-size: 14px; }
  .embudo-resumen > *:nth-child(n+5) { display: none; }
  /* Etapas una debajo de otra; al tocar la fila se despliegan sus chats */
  .embudo { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 10px 10px 16px; gap: 8px; align-items: stretch; }
  .embudo .columna, .embudo.compacta .columna, .embudo.minima .columna { flex: 0 0 auto; width: 100%; max-width: none; min-height: 0; }
  .embudo .columna-cabecera { cursor: pointer; padding: 10px 12px 2px; position: relative; padding-right: 34px; }
  .embudo .columna-cabecera::after { content: '▾'; position: absolute; right: 12px; top: 10px; color: var(--sutil); transition: transform .15s; }
  .embudo .columna.abierta .columna-cabecera::after { transform: rotate(180deg); }
  .embudo .columna-monto { cursor: pointer; white-space: normal; overflow-wrap: anywhere; padding: 0 12px 8px; font-size: 11.5px; }
  .embudo .columna:not(.abierta) .tarjetas { display: none; }
  .embudo .columna.abierta .tarjetas { overflow: visible; max-height: none; }
  .separador-embudo { display: none; }
  .vendedora-fija { font-size: 13px; color: var(--cafe); }
}

.vendedora-fija { display: inline-block; padding: 7px 10px; border: 1px dashed var(--linea); border-radius: 9px; font-size: 13px; color: var(--cafe); background: var(--fondo); }
.alerta-flotante.asignada { border-left-color: var(--ok); }
@media (max-width: 760px) {
  /* Avisos flotantes arriba, para no tapar el cuadro de texto del chat */
  .alertas-flotantes { top: calc(58px + env(safe-area-inset-top)); bottom: auto; }
}
@media (max-width: 760px) {
  /* Filtro de precio "desde – hasta": los dos campos se reparten el ancho sin salirse de la pantalla */
  .embudo-filtros .rango { display: flex; flex: 1 1 0; min-width: 0; gap: 4px; }
  .embudo-filtros .rango input { flex: 1 1 0; width: 0; min-width: 0; }
  .embudo-filtros label > select, .embudo-filtros label > input:not([type=checkbox]) { flex: 1 1 0; width: 0; min-width: 0; }
  .embudo-filtros .check-mini { justify-content: flex-start; }
  .embudo-filtros input[type=checkbox] { flex: 0 0 auto; width: auto; }
}

/* ---------- v1.5: seguimiento de envíos ---------- */
.seguimiento-envio { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.seguimiento-envio .recibida { color: var(--ok); }
.paso-envio { display: block; margin-top: 6px; background: var(--ok); white-space: nowrap; }
[data-incidencia-envio] { display: block; margin-top: 4px; white-space: nowrap; }
@media (max-width: 760px) {
  /* En el celular cada envío es una tarjeta, más fácil de actualizar en la calle o en la agencia */
  #tabla-envios thead { display: none; }
  #tabla-envios, #tabla-envios tbody, #tabla-envios tr, #tabla-envios td { display: block; width: 100%; }
  #tabla-envios tr { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 10px; padding: 8px 10px; }
  #tabla-envios td { border: 0; padding: 5px 0; text-align: left; }
  #tabla-envios td::before { content: attr(data-et); display: block; font-size: 11px; color: var(--sutil); font-weight: 500; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
  #tabla-envios td small { display: block; }
  #tabla-envios td .mini { display: inline-block; margin: 6px 6px 0 0; }
  .seguimiento-envio { white-space: normal; }
  #tabla-envios td:not([data-et])::before, #tabla-envios td[data-et=""]::before { content: none; }
  #tabla-envios tr.atrasado td:first-child { box-shadow: none; }
  #tabla-envios tr.atrasado { border-left: 4px solid var(--alta); }
  #tabla-envios td.num { text-align: left; }
  #tabla-envios td input, #tabla-envios td select { width: 100%; }
}

.boton-filtros-envios { display: none; }
@media (max-width: 760px) {
  .envios-contenedor .informe-cabecera p { display: none; }
  .envios-contenedor .informe-cabecera { align-items: center; }
  #envios-estado { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  #envios-estado button { flex-shrink: 0; white-space: nowrap; }
  .filtros-envios { display: flex; flex-wrap: wrap; gap: 6px; }
  .filtros-envios > * { flex: 1 1 140px; min-width: 0; }
  .filtros-envios #env-texto { flex: 1 1 60%; }
  .boton-filtros-envios { display: inline-flex; flex: 0 0 auto; align-items: center; border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--cafe); font-weight: 500; }
  .filtros-envios:not(.abiertos) > :not(#env-texto):not(.boton-filtros-envios) { display: none; }
  .filtros-envios .rango { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; font-size: 12px; color: var(--sutil); }
  .filtros-envios .rango input { flex: 1 1 0; width: 0; min-width: 0; }
}
@media (max-width: 760px) {
  #tabla-envios { min-width: 0 !important; width: 100% !important; table-layout: auto; }
  #tabla-envios td input, #tabla-envios td select { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
  .tabla-envios-caja { overflow-x: hidden; background: none; box-shadow: none; }
}

/* ---------- 1.6.0: Ajustes por pestañas ---------- */
.ajustes-pestanas { position: sticky; top: 0; z-index: 5; flex-shrink: 0; display: flex; gap: 6px; padding: 8px; margin: 0 0 4px; background: var(--fondo); border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.ajustes-pestanas::-webkit-scrollbar { display: none; }
.ajustes-pestanas button { flex: 0 0 auto; border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--sutil); }
.ajustes-pestanas button.activa { background: var(--cafe); border-color: var(--cafe); color: var(--crema); }
#vista-ajustes [data-grupo][hidden] { display: none !important; }

/* Ajustes › Envíos */
.envios-ajuste-fila { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; }
.envios-ajuste-fila label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.envios-ajuste-fila select { min-width: 240px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); }
.agencia-ed { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: var(--fondo); }
.agencia-ed-cabecera { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.agencia-ed-cabecera input { flex: 1 1 200px; font-weight: 600; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; }
.agencia-ed-cabecera select { flex: 1 1 260px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); }
.agencia-ed-cuerpo { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 14px; }
.agencia-ed h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--sutil); font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.agencia-ed textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; padding: 8px; border: 1px solid var(--linea); border-radius: 10px; resize: vertical; }
.chips-campos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.chip-campo { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 3px 9px 3px 6px; font-size: 12px; cursor: pointer; }
.chip-campo input { width: auto; margin: 0; }
.chip-campo:has(input:checked) { border-color: var(--nude); background: var(--nude-suave); }
.previa-guia { margin: 0; white-space: pre-wrap; background: var(--papel); border: 1px dashed var(--arena); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.5; min-height: 120px; }
.leyenda code { background: var(--nude-suave); border-radius: 5px; padding: 0 4px; font-size: 12px; }
.alertas-envio { display: grid; gap: 10px; }
.enlace { border: 0; background: none; color: var(--nude); text-decoration: underline; padding: 0; font-size: 12px; }
@media (max-width: 900px) { .agencia-ed-cuerpo { grid-template-columns: 1fr; } }

/* Guardado sin interrumpir: un check que aparece y se va */
.recien-guardado { position: relative; }
label.recien-guardado > span::after { content: ' ✓ guardado'; color: var(--ok); font-weight: 600; font-size: 11px; }
input.recien-guardado { border-color: var(--ok) !important; box-shadow: 0 0 0 2px rgba(63,122,79,.15); }

/* Envíos 1.6.0 */
.tipo-entrega { font-size: 11px; color: var(--sutil); margin-top: 3px; }
.envio-atraso { color: var(--alta); font-size: 12px; font-weight: 600; margin-top: 4px; }
#tabla-envios tr.atrasado td:first-child { box-shadow: inset 4px 0 0 var(--alta); }
.avisar-envio.destacado { background: var(--nude-suave); border-color: var(--nude); color: var(--cafe); font-weight: 600; }
#envios-estado button.hay-atrasados { color: var(--alta); border-color: var(--alta); font-weight: 600; }
.alerta-flotante.envio { border-left-color: var(--nude); }
.alerta-flotante.envio b { color: var(--cafe); }
.alerta-flotante.envio.atraso { border-left-color: var(--alta); }
.alerta-flotante.envio.atraso b { color: var(--alta); }
#dialogo-avisar { max-width: 460px; width: calc(100vw - 32px); border: 0; border-radius: 16px; padding: 18px; }
#dialogo-avisar h3 { margin: 0 0 4px; }
#dialogo-avisar form { display: grid; gap: 10px; }
#dialogo-avisar label { display: grid; gap: 4px; font-weight: 500; }
#dialogo-avisar textarea { width: 100%; padding: 8px; border: 1px solid var(--linea); border-radius: 10px; }
.chips-aviso { display: flex; flex-direction: column; gap: 6px; }
.chip-aviso { text-align: left; border: 1px solid var(--linea); background: var(--fondo); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; }
.chip-aviso:hover { border-color: var(--nude); }
.acciones-dialogo { display: flex; justify-content: flex-end; gap: 8px; }
#envios-estado button { white-space: nowrap; }

/* ---------- Asistente del negocio (botón en la barra de arriba; nunca tapa contenido) ---------- */
.boton-asistente { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: var(--crema); border-radius: 999px; padding: 5px 12px 5px 10px; font-size: 12.5px; white-space: nowrap; }
.boton-asistente span { font-size: 15px; line-height: 1; color: #e9c7b8; }
.boton-asistente:hover, .boton-asistente.abierto { background: rgba(255,255,255,.18); }
.panel-asistente { position: fixed; right: 16px; top: 66px; z-index: 58; width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 86px)); background: var(--papel); border-radius: 18px; box-shadow: 0 16px 48px rgba(60, 41, 34, .28); display: flex; flex-direction: column; overflow: hidden; animation: entrar .2s ease-out; }
.panel-asistente header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; background: var(--cafe); color: var(--crema); }
.panel-asistente header > div { flex: 1; display: flex; flex-direction: column; }
.panel-asistente header small { opacity: .75; font-size: 11.5px; }
.panel-asistente header .mini { background: rgba(255,255,255,.1); color: var(--crema); border-color: rgba(255,255,255,.25); }
.cerrar-asistente { border: 0; background: none; color: var(--crema); font-size: 24px; line-height: 1; padding: 0 4px; }
.asistente-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--fondo); }
.asis-vacio p { margin: 0; color: var(--sutil); font-size: 13px; line-height: 1.5; }
.asis-msj { max-width: 92%; border-radius: 14px; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; }
.asis-msj.usuario { align-self: flex-end; background: var(--cafe); color: var(--crema); border-bottom-right-radius: 4px; }
.asis-msj.asistente { align-self: flex-start; background: var(--papel); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.asis-msj p { margin: 0 0 6px; } .asis-msj p:last-child { margin-bottom: 0; }
.asis-msj ul, .asis-msj ol { margin: 4px 0 6px; padding-left: 20px; }
.asis-msj h4 { margin: 6px 0 4px; font-size: 13.5px; }
.asis-tabla { overflow-x: auto; margin: 6px 0; }
.asis-tabla table { border-collapse: collapse; font-size: 12.5px; }
.asis-tabla th, .asis-tabla td { border-bottom: 1px solid var(--linea); padding: 4px 8px; text-align: left; white-space: nowrap; }
.asis-tabla th { color: var(--sutil); font-weight: 600; }
.asis-msj.pensando { display: flex; gap: 4px; padding: 12px 14px; }
.asis-msj.pensando span { width: 7px; height: 7px; border-radius: 50%; background: var(--nude); animation: latido 1s infinite ease-in-out; }
.asis-msj.pensando span:nth-child(2) { animation-delay: .15s; } .asis-msj.pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes latido { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.asis-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.asis-sugerencias button { border: 1px solid var(--arena); background: var(--papel); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; text-align: left; }
.asis-sugerencias button:hover { border-color: var(--nude); background: var(--nude-suave); }
.asis-accion { margin-top: 8px; border: 1px dashed var(--nude); background: var(--nude-suave); border-radius: 10px; padding: 8px 10px; }
.asis-accion p { margin: 4px 0; }
.asis-accion.hecha { border-style: solid; border-color: var(--ok); background: #eef6f0; }
.asis-accion.descartada { opacity: .6; }
.asis-estado { font-weight: 600; }
.asistente-escribir { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--linea); background: var(--papel); align-items: flex-end; }
.asistente-escribir textarea { flex: 1; resize: none; border: 1px solid var(--linea); border-radius: 12px; padding: 9px 12px; font-size: 14px; max-height: 140px; }
.asistente-escribir .boton { border-radius: 50%; width: 40px; height: 40px; padding: 0; flex-shrink: 0; }
@media (max-width: 760px) {
  .boton-asistente { padding: 5px 9px; }
  .boton-asistente b { display: none; }
  .panel-asistente { inset: 0; width: auto; height: auto; border-radius: 0; z-index: 70; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .asistente-escribir textarea { font-size: 16px; }
}
/* Las alertas flotantes no tapan el botón del asistente */


/* ---------- 1.8.0: etapa del embudo debajo del nombre, en el chat ---------- */
.chat-sub { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.chat-sub #chat-telefono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-etapa { position: relative; flex-shrink: 0; }
.boton-etapa { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--c) 35%, white); background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 75%, black); border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.boton-etapa:hover { border-color: var(--c); }
.boton-etapa .punto, .opcion-etapa .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.boton-etapa .flecha { font-size: 10px; opacity: .7; }
.boton-etapa .punto-sugerencia { color: var(--nude); }
.menu-etapa { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 280px; max-height: min(70vh, 520px); overflow-y: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 12px 32px rgba(60, 41, 34, .18); padding: 8px; animation: entrar .15s ease-out; }
.menu-etapa-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 6px 8px; font-size: 13px; }
.menu-etapa-cab small { color: var(--sutil); font-size: 11px; }
.sugerencia-etapa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--nude-suave); border-radius: 10px; padding: 7px 9px; font-size: 12.5px; margin-bottom: 6px; }
.sugerencia-etapa button { margin-left: auto; border: 0; background: var(--cafe); color: var(--crema); border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.siguiente-etapa { width: 100%; text-align: left; border: 1px dashed var(--c); background: color-mix(in srgb, var(--c) 8%, white); color: var(--texto); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; }
.siguiente-etapa:hover { background: color-mix(in srgb, var(--c) 16%, white); }
.opciones-etapa { display: flex; flex-direction: column; }
.opciones-etapa.perdidas { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 4px; }
.opcion-etapa { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 8px; font-size: 13px; }
.opcion-etapa:hover { background: var(--fondo); }
.opcion-etapa.actual { background: color-mix(in srgb, var(--c) 12%, white); font-weight: 600; }
.opcion-etapa .check { margin-left: auto; color: var(--ok); }
.candado-etapa { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--linea); background: none; margin-top: 6px; padding: 9px 8px 4px; font-size: 12px; color: var(--sutil); }
@media (max-width: 760px) {
  .menu-etapa { position: fixed; left: 10px; right: 10px; top: auto; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); max-height: 70vh; z-index: 75; }
  .chat-sub #chat-telefono { display: none; }
}

/* ---------- 1.9.0: información del negocio editable ---------- */
.editor-negocio { width: 100%; min-height: 360px; resize: vertical; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; font-size: 13.5px; line-height: 1.55; background: var(--papel); font-family: inherit; }
.editor-negocio:focus { outline: 2px solid color-mix(in srgb, var(--nude) 40%, white); border-color: var(--nude); }
.negocio-pendientes { background: #fdf6e7; border: 1px solid #ecd9a8; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; line-height: 1.7; }
.negocio-pendientes span { display: inline-block; background: var(--papel); border: 1px solid #ecd9a8; border-radius: 6px; padding: 0 6px; margin: 0 4px 0 0; font-size: 12px; }
.negocio-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.niveles-usuario { margin: 6px 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--sutil); }
.niveles-usuario b { color: var(--texto); }

/* 2.0.0: editor de etapas cómodo en el celular (cada dato a lo ancho) */
@media (max-width: 760px) {
  .fila-etapa-ed { grid-template-columns: 40px 34px 1fr 34px; gap: 8px; }
  .fila-etapa-ed > div:nth-child(3), .fila-etapa-ed > div:nth-child(3) input { width: 100%; }
  .fila-etapa-ed > .desc, .fila-etapa-ed > .prob, .fila-etapa-ed > .tipo, .fila-etapa-ed > .atiende-ed, .fila-etapa-ed > .final { grid-column: 1 / -1; }
  .fila-etapa-ed .campo-mini { display: flex; align-items: center; gap: 8px; }
  .fila-etapa-ed .campo-mini > select, .fila-etapa-ed .campo-mini > input { flex: 1 1 auto; width: auto; min-width: 0; }
  .fila-etapa-ed .campo-mini > span { flex: 0 0 auto; font-size: 12px; color: var(--sutil); }
}

.acciones-envio { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

/* 2.0.0: avisos flotantes arriba a la derecha (no tapan el botón de enviar del chat) */
.alertas-flotantes { top: 66px; bottom: auto; }
/* En el celular, los envíos atrasados se marcan con un borde (sin tapar el texto) */
@media (max-width: 760px) {
  #tabla-envios tr.atrasado td:first-child { box-shadow: none; }
  #tabla-envios tr.atrasado { border-left: 4px solid var(--alta); }
}

/* 2.0.0: el asistente cabe en pantallas chicas (iPhone SE) */
.panel-asistente header > div { min-width: 0; }
.panel-asistente header small, .panel-asistente header b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-asistente header .mini, .cerrar-asistente { flex-shrink: 0; }
.asistente-mensajes, .asis-msj, .asis-vacio p { overflow-wrap: anywhere; min-width: 0; }

/* 2.0.0: la barra de arriba cabe en celulares chicos (iPhone SE, 320 px) */
@media (max-width: 380px) {
  .barra { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .centro-alertas { gap: 4px; }
  .pildora-humano { padding: 4px 7px; gap: 3px; }
  .pildora-humano .ico-traspaso { width: 26px; }
  .boton-asistente { padding: 4px 7px; }
  .activar-avisos { padding: 4px 6px; }
  .tasas-barra { padding: 5px 7px; font-size: 12px; }
  .tasas-barra .flecha { display: none; }
}
.acciones-envio .mini { white-space: nowrap; }
#tabla-envios th:first-child, #tabla-envios td:first-child { min-width: 128px; }

/* ---- Ficha › 🏷 Stock: inventario de consulta (solo lectura) ---- */
.inv-consulta { display: flex; flex-direction: column; gap: 10px; }
.inv-controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-controles input[type=search] { flex: 1 1 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); outline: none; font: inherit; font-size: 13px; }
.inv-controles input[type=search]:focus { border-color: var(--nude); }
.inv-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sutil); white-space: nowrap; }
.inv-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inv-grupo { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; background: var(--papel); }
.inv-grupo h4 { margin: 0 0 6px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.inv-grupo h4 small { color: var(--sutil); font-weight: 500; white-space: nowrap; }
.inv-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--linea); font-size: 12.5px; }
.inv-fila:first-of-type { border-top: 0; }
.inv-desc { min-width: 0; overflow-wrap: anywhere; }
.inv-desc small { display: block; color: var(--sutil); font-size: 11px; }
.inv-desc em { color: var(--cafe); font-style: normal; font-weight: 600; font-size: 11.5px; }
.inv-cant { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-fila.bajo .inv-cant { color: var(--media); }
.inv-fila.agotado { opacity: .55; }
.inv-fila.agotado .inv-cant { color: var(--critica); font-weight: 600; }
.inv-fila.pedida { background: rgba(181, 132, 116, .14); border-radius: 6px; padding-left: 6px; padding-right: 6px; }

/* ---- Ajustes › Envíos › Alerta de inventario bajo ---- */
.stock-destinos { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.stock-destinos label { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.campo-numero .stock-destinos input { width: auto; padding: 0; }
.alerta-flotante.envio.stock { border-left-color: var(--media); }