/* =====================================================================
   Afro Maik · CRM de chats
   Estilo propio: se parece en la DISPOSICIÓN a un chat conocido (lista a la izquierda, conversación a la
   derecha, burbujas verde claro y blanca), pero los colores, íconos, fondo y letras son nuestros.
   Todo color sale de los "tokens" de :root: si Maik cambia la marca, se cambia aquí y nada más.
   ===================================================================== */
:root {
  /* Colores base */
  --fondo-chat: #EFE7DE;          /* beige del chat */
  --cabecera: #F0F2F5;            /* barras de arriba */
  --superficie: #FFFFFF;
  --texto: #111B21;
  --texto-2: #54656F;             /* texto secundario: contraste 5:1 o más sobre blanco, beige y verde claro */
  --borde: #D1D7DB;
  --borde-suave: #E9EDEF;
  --propia: #D9FDD3;              /* burbuja de la tienda */
  --clienta: #FFFFFF;             /* burbuja de la clienta */
  --marca: #5B2B94;               /* morado de Afro Maik (botones, texto blanco encima) */
  --marca-hover: #4B2279;
  --marca-suave: #EFE6F8;
  --no-leido: #0E6A46;            /* círculo de no leídos, texto blanco */
  --peligro: #B3261E;
  --aviso-fondo: #FFF4D6;
  --aviso-texto: #6B4300;
  --tick-azul: #0B6FA8;           /* "leído" (azul con contraste sobre el verde claro) */
  --foco: #5B2B94;
  --sombra: 0 1px 2px rgba(11, 20, 26, .14);
  --sombra-alta: 0 6px 24px rgba(11, 20, 26, .22);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --col-rail: 72px;               /* barra de íconos del menú lateral */
  --col-lista: 400px;
  --col-info: 340px;
  /* Fondo del chat: patrón propio (ropa, rombos, cruces) hecho con trazos suaves. */
  --patron-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23E3D8CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='26' r='5'/%3E%3Cpath d='M78 20l7 11 7-11'/%3E%3Cpath d='M138 18v14M131 25h14'/%3E%3Cpath d='M46 92a5 5 0 1 1 5 5v5l20 13H31l20-13'/%3E%3Cpath d='M112 84l9-9 9 9-9 9z'/%3E%3Ccircle cx='158' cy='112' r='3'/%3E%3Cpath d='M20 150l11-9 11 9'/%3E%3Cpath d='M88 158q9-11 18 0'/%3E%3Cpath d='M146 150l9 9m0-9l-9 9'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.35;
  color: var(--texto);
  background: var(--cabecera);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video { max-width: 100%; }
a { color: var(--marca); }

/* Foco visible para quien usa teclado */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.btn-primario:focus-visible, .btn-accion:focus-visible { outline-color: var(--foco); box-shadow: 0 0 0 2px #fff inset; }

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--marca); color: #fff; padding: 8px 12px; border-radius: 6px; }
.salto:focus { top: 8px; }
.chat-abierto { position: relative; }
.salto--chat { left: 8px; }
.salto--chat:focus { top: 8px; z-index: 40; }

/* ---------------------------------------------------------------- botones */
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--texto-2);
}
.btn-icono:hover { background: rgba(11, 20, 26, .07); }
.btn-icono svg { width: 24px; height: 24px; }
.btn-icono[aria-pressed="true"], .btn-icono[aria-expanded="true"] { background: rgba(91, 43, 148, .12); color: var(--marca); }
.btn-texto { width: auto; border-radius: 20px; padding: 0 12px; gap: 6px; font-size: 14px; font-weight: 600; color: var(--marca); }
.btn-texto svg { width: 20px; height: 20px; }
.btn-primario, .btn-secundario, .btn-peligro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 20px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--marca-hover); }
.btn-secundario { background: var(--superficie); color: var(--marca); border-color: var(--borde); }
.btn-secundario:hover:not(:disabled) { background: var(--marca-suave); }
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-chico { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn-primario svg, .btn-secundario svg, .btn-peligro svg { width: 18px; height: 18px; flex: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.btn-accion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--marca); color: #fff; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none;
}
.btn-accion svg { width: 22px; height: 22px; }
.btn-accion:hover { background: var(--marca-hover); }
.btn-accion.es-grabando { background: var(--peligro); transform: scale(1.18); }

/* ---------------------------------------------------------------- estructura */
#app {
  height: 100vh; height: 100dvh; height: var(--alto-app, 100dvh); display: grid;
  grid-template-columns: var(--col-rail) var(--col-lista) minmax(0, 1fr);
  background: var(--cabecera); position: relative; overflow: hidden;
}
#app[data-info="1"] { grid-template-columns: var(--col-rail) var(--col-lista) minmax(0, 1fr) var(--col-info); }
#panel-lista { display: flex; flex-direction: column; min-height: 0; background: var(--superficie); border-right: 1px solid var(--borde); }
#panel-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fondo-chat); position: relative; }
.solo-movil { display: none !important; }

/* ---------------------------------------------------------------- columna de la lista */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 8px 12px; background: var(--cabecera); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--marca); min-width: 0; }
.marca img { width: 34px; height: 34px; border-radius: 8px; }
.barra .acciones { display: flex; align-items: center; gap: 2px; }
.fila-tienda { padding: 8px 12px 0; display: flex; align-items: center; gap: 8px; }
.fila-tienda label { font-size: 13px; color: var(--texto-2); flex: none; }
.fila-tienda select, .tienda-nombre {
  flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 15px;
}
.tienda-nombre { display: flex; align-items: center; font-weight: 600; background: var(--marca-suave); border-color: transparent; color: var(--marca); }
.aviso-linea { margin: 8px 12px 0; padding: 8px 12px; border-radius: 8px; background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 14px; }
.aviso-linea.es-error { background: #FDE7E5; color: #8C1D18; }
.buscador { position: relative; padding: 8px 12px; }
.buscador svg { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-2); pointer-events: none; }
.buscador input {
  width: 100%; min-height: 40px; padding: 0 12px 0 40px; border: 0; border-radius: 10px; background: var(--cabecera); font-size: 16px;
}
.buscador input::placeholder, #texto::placeholder { color: var(--texto-2); opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.chip {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--borde-suave);
  background: var(--cabecera); color: var(--texto-2); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--marca-suave); color: var(--marca); border-color: transparent; font-weight: 700; }
.lista { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.vacio { padding: 32px 24px; text-align: center; color: var(--texto-2); font-size: 15px; }
.chat-item { display: block; }
.chat-item > button {
  display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: transparent; text-align: left;
  border-bottom: 1px solid var(--borde-suave);
}
.chat-item > button:hover { background: var(--cabecera); }
.chat-item.activo > button { background: #E9E2F2; }
.avatar {
  width: 49px; height: 49px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 20px; text-transform: uppercase;
}
.avatar svg { width: 26px; height: 26px; }
.avatar--chico { width: 40px; height: 40px; font-size: 17px; }
.avatar--grande { width: 96px; height: 96px; font-size: 40px; }
.avatar--grande svg { width: 52px; height: 52px; }
.chat-item__centro { flex: 1; min-width: 0; }
.chat-item__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-item__nombre { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item__hora { font-size: 12px; color: var(--texto-2); flex: none; }
.chat-item__hora.hay-nuevos { color: var(--no-leido); font-weight: 700; }
.chat-item__previa { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 14px; color: var(--texto-2); margin-top: 2px; }
.chat-item__previa > span.txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.chat-item__previa svg.tick { flex: none; width: 17px; height: 12px; }
.chat-item__etiquetas { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pildora { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--cabecera); color: var(--texto-2); }
.pildora--asesora { background: #FCE8D4; color: #7A3A00; }
.pildora--baja { background: #FDE7E5; color: #8C1D18; }
.pildora--tienda { background: var(--marca-suave); color: var(--marca); }
.contador {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--no-leido); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.lista-mas { padding: 12px; text-align: center; }

/* ---------------------------------------------------------------- chat vacío */
.chat-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; background: var(--cabecera); border-bottom: 6px solid var(--marca); }
.chat-vacio img { width: 112px; height: 112px; border-radius: 24px; }
.chat-vacio h1 { margin: 8px 0 0; font-size: 28px; font-weight: 300; color: var(--texto); }
.chat-vacio p { margin: 0; max-width: 360px; color: var(--texto-2); font-size: 15px; }

/* ---------------------------------------------------------------- chat abierto */
.chat-abierto { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-cab { background: var(--cabecera); border-bottom: 1px solid var(--borde); flex: none; }
.chat-cab__fila { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 8px 8px 8px 12px; }
.chat-persona { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.chat-persona__datos { min-width: 0; }
.chat-persona__nombre { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-persona__sub { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-cab__estado { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); min-width: 0; }
.estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--no-leido); flex: none; }
.estado.es-asesora::before { background: #B45309; }
.estado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mensajes-zona { position: relative; flex: 1; min-height: 0; display: flex; }
.mensajes {
  flex: 1; overflow-y: auto; min-height: 0; padding: 12px 5% 14px; overscroll-behavior: contain;
  background-color: var(--fondo-chat); background-image: var(--patron-chat); background-size: 180px 180px;
}
.mensajes:focus-visible { outline-offset: -3px; }
.btn-abajo {
  position: absolute; right: 16px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--superficie);
  color: var(--texto-2); box-shadow: var(--sombra-alta); display: flex; align-items: center; justify-content: center;
}
.btn-abajo svg { width: 24px; height: 24px; }
.btn-abajo .contador { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }
.cargar-mas { display: flex; justify-content: center; padding: 4px 0 10px; }
.cargar-mas button { background: var(--superficie); border: 0; box-shadow: var(--sombra); border-radius: 16px; padding: 6px 16px; font-size: 13px; color: var(--texto-2); font-weight: 600; }
.separador-dia { display: flex; justify-content: center; margin: 10px 0 8px; }
.separador-dia span { background: #FFFFFFE6; color: var(--texto-2); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 8px; box-shadow: var(--sombra); }
.aviso-sistema { display: flex; justify-content: center; margin: 6px 0; }
.aviso-sistema span { background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 12.5px; padding: 5px 12px; border-radius: 8px; box-shadow: var(--sombra); text-align: center; max-width: 90%; }

.fila { display: flex; margin-bottom: 2px; }
.fila--entrante { justify-content: flex-start; }
.fila--saliente { justify-content: flex-end; }
.fila--cola { margin-top: 8px; }
.fila.resaltada .burbuja { animation: resalte 1.4s ease-out; }
@keyframes resalte { 0%, 40% { box-shadow: 0 0 0 3px var(--marca); } 100% { box-shadow: var(--sombra); } }
.burbuja {
  position: relative; max-width: min(78%, 560px); padding: 6px 9px 7px; border-radius: 8px; box-shadow: var(--sombra);
  font-size: 15px; line-height: 1.38; overflow-wrap: anywhere; min-width: 70px;
}
.fila--entrante .burbuja { background: var(--clienta); border-top-left-radius: 0; }
.fila--saliente .burbuja { background: var(--propia); border-top-right-radius: 0; }
.fila:not(.fila--cola) .burbuja { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.fila--cola .burbuja::before { content: ""; position: absolute; top: 0; width: 10px; height: 13px; background: inherit; }
.fila--entrante.fila--cola .burbuja::before { left: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.fila--saliente.fila--cola .burbuja::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.burbuja__autor { font-size: 12.5px; font-weight: 700; color: var(--marca); margin-bottom: 2px; }
.burbuja__texto { white-space: pre-wrap; }
.burbuja__texto a { color: #0B5FA5; word-break: break-all; }
.burbuja__pie { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; }
.burbuja__texto { display: flow-root; }
.burbuja__texto > .burbuja__pie { float: right; margin: 5px 0 -3px 10px; }
.hora { font-size: 11.5px; color: var(--texto-2); white-space: nowrap; }
svg.tick { width: 17px; height: 12px; flex: none; color: var(--texto-2); }
svg.tick.leido { color: var(--tick-azul); }
button.tick-fallo { border: 0; background: transparent; padding: 0; display: inline-flex; color: var(--peligro); }
button.tick-fallo svg { width: 16px; height: 16px; }
.burbuja__error { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: #FDE7E5; color: #8C1D18; font-size: 13px; clear: both; }
.reaccion { position: absolute; bottom: -17px; right: 12px; background: var(--superficie); border-radius: 12px; padding: 0 6px; font-size: 15px; box-shadow: var(--sombra); line-height: 22px; }
.fila--con-reaccion { margin-bottom: 20px; }
/* El botón de responder va AFUERA de la burbuja (nunca tapa el texto ni la hora). */
.btn-responder {
  position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; display: none;
  align-items: center; justify-content: center; background: var(--superficie); color: var(--texto-2); box-shadow: var(--sombra); padding: 0; z-index: 1;
}
.fila--saliente .btn-responder { right: calc(100% + 4px); }
.fila--entrante .btn-responder { left: calc(100% + 4px); }
.btn-responder svg { width: 17px; height: 17px; }
.fila:hover .btn-responder, .fila:focus-within .btn-responder { display: inline-flex; }
.fila:focus { outline: none; }
.fila:focus-visible .burbuja { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (hover: none) { .btn-responder { display: inline-flex; width: 26px; height: 26px; opacity: .75; } .btn-responder svg { width: 15px; height: 15px; } }
.cita {
  display: block; width: 100%; text-align: left; margin: 0 0 4px; padding: 5px 8px; border: 0; border-left: 4px solid var(--marca); border-radius: 6px;
  background: rgba(11, 20, 26, .06); font-size: 13.5px; color: var(--texto);
}
.cita--cliente { border-left-color: var(--no-leido); }
.cita__autor { display: block; font-weight: 700; font-size: 12.5px; color: var(--marca); }
.cita--cliente .cita__autor { color: var(--no-leido); }
.cita__texto { display: block; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* medios dentro de la burbuja */
.medio { display: block; position: relative; border-radius: 6px; overflow: hidden; background: rgba(11, 20, 26, .08); margin-bottom: 3px; }
.medio--foto { width: min(300px, 62vw); aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: zoom-in; }
.medio--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.medio--sticker { width: 132px; aspect-ratio: 1; background: transparent; }
.medio--sticker img { width: 100%; height: 100%; object-fit: contain; }
.medio--video { width: min(300px, 62vw); aspect-ratio: 16 / 10; background: #1b2a33; }
.medio--video video { width: 100%; height: 100%; display: block; background: #000; }
.medio__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--texto-2); font-size: 13px; }
.medio__boton-play { position: absolute; inset: 0; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
.medio__boton-play span { width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; }
.medio__boton-play svg { width: 28px; height: 28px; }
.medio__falla { padding: 12px; font-size: 13px; color: var(--texto-2); text-align: center; }
.cargando-punto { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--borde); border-top-color: var(--marca); animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.audio { display: flex; align-items: center; gap: 8px; width: min(260px, 62vw); padding: 2px 0 0; }
.audio__play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--marca); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.audio__play svg { width: 20px; height: 20px; }
.audio__centro { flex: 1; min-width: 0; }
.audio__barra { width: 100%; height: 20px; margin: 0; accent-color: var(--marca); }
.audio__tiempo { font-size: 12px; color: var(--texto-2); display: block; margin-top: -2px; }
.audio__vel { flex: none; min-width: 42px; height: 28px; border-radius: 14px; border: 1px solid rgba(11, 20, 26, .22); background: rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 700; color: var(--texto); padding: 0 6px; }
/* La transcripción de una nota de voz (la guarda el servidor): texto discreto, completo y partido en renglones (nada de «…» ni de deslizar de lado). */
.audio-transcripcion { margin: 6px 0 2px; padding: 1px 0 1px 8px; border-left: 3px solid rgba(91, 43, 148, .35); min-width: 0; }
.audio-transcripcion__rotulo { display: block; font-size: 11.5px; font-weight: 700; color: var(--texto-2); }
.audio-transcripcion__texto { margin: 1px 0 0; font-size: 13.5px; line-height: 1.38; color: var(--texto-2); white-space: normal; overflow-wrap: anywhere; }
.documento { display: flex; align-items: center; gap: 10px; width: min(300px, 66vw); padding: 8px; margin-bottom: 3px; border-radius: 6px; background: rgba(11, 20, 26, .06); }
.documento__icono { width: 38px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--marca); }
.documento__icono svg { width: 32px; height: 32px; }
.documento__datos { flex: 1; min-width: 0; }
.documento__nombre { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.documento__peso { font-size: 12px; color: var(--texto-2); }
.documento .btn-icono { width: 36px; height: 36px; color: var(--marca); }
.ubicacion { display: block; width: min(280px, 64vw); border-radius: 6px; overflow: hidden; margin-bottom: 3px; background: rgba(11, 20, 26, .06); color: var(--texto); text-decoration: none; }
.ubicacion__mapa { height: 96px; background: #DDE8DA; display: flex; align-items: center; justify-content: center; color: var(--peligro); }
.ubicacion__mapa svg { width: 40px; height: 40px; }
.ubicacion__datos { padding: 6px 8px; font-size: 13.5px; }
.ubicacion__datos strong { display: block; }
.ubicacion__datos span { color: var(--texto-2); font-size: 12.5px; }
.etiqueta-tipo { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--marca); background: var(--marca-suave); border-radius: 4px; padding: 0 6px; margin-bottom: 3px; }

/* ---------------------------------------------------------------- zona de escribir */
.zona-escribir { position: relative; flex: none; background: var(--cabecera); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
.form-escribir { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px 8px 6px; }
.form-escribir textarea {
  flex: 1; min-width: 0; resize: none; border: 0; border-radius: 22px; padding: 11px 16px; background: var(--superficie);
  font-size: 16px; line-height: 1.3; max-height: 140px; min-height: 44px; overflow-y: auto; display: block;
}
.form-escribir textarea:focus-visible { outline-offset: -2px; border-radius: 22px; }
.cita-bar { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 6px 6px 6px 10px; border-left: 4px solid var(--marca); border-radius: 8px; background: var(--superficie); }
.cita-bar__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.cita-bar__texto strong { color: var(--marca); font-size: 12.5px; }
.cita-bar__texto span { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapidas, .emojis, .menu-flotante {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); background: var(--superficie); border-radius: 12px;
  box-shadow: var(--sombra-alta); z-index: 6; overflow: hidden;
}
.rapidas { max-height: 260px; overflow-y: auto; }
.rapida { display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: transparent; border-bottom: 1px solid var(--borde-suave); }
.rapida strong { display: block; font-size: 14.5px; color: var(--marca); }
.rapida span { display: block; font-size: 13.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapida[aria-selected="true"], .rapida:hover { background: var(--marca-suave); }
.rapidas__vacio { padding: 14px; color: var(--texto-2); font-size: 14px; }
.emojis { max-width: 372px; }
.emojis__tabs { display: flex; border-bottom: 1px solid var(--borde-suave); background: var(--cabecera); }
.emojis__tabs button { flex: 1; height: 40px; border: 0; background: transparent; font-size: 20px; border-bottom: 3px solid transparent; }
.emojis__tabs button[aria-selected="true"] { border-bottom-color: var(--marca); background: var(--superficie); }
.emojis__rejilla { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 216px; overflow-y: auto; }
.emojis__rejilla button { height: 38px; border: 0; background: transparent; font-size: 23px; border-radius: 8px; padding: 0; }
.emojis__rejilla button:hover { background: var(--cabecera); }
.menu-flotante { max-width: 240px; right: auto; padding: 6px 0; left: 52px; }
.menu-flotante button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: transparent; font-size: 15px; text-align: left; }
.menu-flotante button:hover { background: var(--cabecera); }
.menu-flotante svg { width: 22px; height: 22px; color: var(--marca); }

.grabando { position: absolute; left: 6px; right: 58px; top: 8px; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 22px; background: var(--superficie); z-index: 3; }
.grab-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--peligro); animation: latido 1s ease-in-out infinite; flex: none; }
@keyframes latido { 50% { opacity: .25; } }
.grab-tiempo { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 40px; }
.grab-pista { flex: 1; text-align: center; color: var(--texto-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grab-pista.va-a-cancelar { color: var(--peligro); font-weight: 700; }
.grab-cancelar { color: var(--peligro); }

.ventana-cerrada { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--aviso-fondo); }
.ventana-cerrada p { margin: 0; flex: 1 1 200px; color: var(--aviso-texto); font-size: 14.5px; font-weight: 600; }
.ventana-baja { padding: 6px 14px; background: #FDE7E5; color: #8C1D18; font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- panel de info */
.panel-info { display: flex; flex-direction: column; min-height: 0; background: var(--cabecera); border-left: 1px solid var(--borde); }
.info-cab { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px 12px; background: var(--cabecera); border-bottom: 1px solid var(--borde); }
.info-cab h2 { margin: 0; font-size: 17px; font-weight: 600; }
.info-cuerpo { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.info-bloque { background: var(--superficie); margin-top: 8px; padding: 14px 16px; }
.info-bloque:first-child { margin-top: 0; }
.info-bloque h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.info-perfil { text-align: center; padding: 22px 16px 18px; }
.info-perfil .avatar { margin: 0 auto 10px; }
.info-perfil .telefono { color: var(--texto-2); font-size: 15px; }
.campo { display: block; margin-bottom: 10px; }
.campo > span { display: block; font-size: 13px; color: var(--texto-2); margin-bottom: 3px; }
.campo input[type="text"], .campo textarea, .modal input[type="text"], .modal input[type="password"], .modal textarea, .login input {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 16px;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo-fila { display: flex; gap: 8px; align-items: flex-end; }
.campo-fila .campo { flex: 1; margin-bottom: 0; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.interruptor input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; flex: none; border-radius: 13px; background: #8696A0; position: relative; border: 0; margin: 0; cursor: pointer; }
.interruptor input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor input[type="checkbox"]:checked { background: var(--marca); }
.interruptor input[type="checkbox"]:checked::before { transform: translateX(18px); }
.etiquetas-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-btn { min-height: 34px; padding: 0 12px; border-radius: 17px; border: 2px solid var(--borde); background: var(--superficie); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.etiqueta-btn i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.etiqueta-btn[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); font-weight: 700; }
.nota-estado { font-size: 13px; color: var(--texto-2); min-height: 18px; margin-top: 4px; }
.autorizaciones { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.autorizaciones li { padding: 6px 0; border-bottom: 1px solid var(--borde-suave); }
.autorizaciones li:last-child { border-bottom: 0; }
.autorizaciones small { display: block; color: var(--texto-2); }
.baja-caja { padding: 10px 12px; border-radius: 8px; background: #FDE7E5; color: #8C1D18; font-size: 14px; }
.baja-caja .btn-secundario { margin-top: 8px; }
.ok-caja { padding: 10px 12px; border-radius: 8px; background: #E4F4EC; color: #0B4F35; font-size: 14px; }

/* ---------------------------------------------------------------- modales, visor, avisos */
.modal-fondo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 20, 26, .55); }
.modal { width: min(520px, 100%); max-height: min(88vh, 720px); max-height: min(88dvh, 720px); display: flex; flex-direction: column; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; }
.modal__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 8px 20px; }
.modal__cab h2 { margin: 0; font-size: 18px; }
.modal__cuerpo { padding: 4px 20px 12px; overflow-y: auto; font-size: 15px; }
.modal__cuerpo p { margin: 0 0 10px; }
.modal__acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--borde-suave); }
.error-modal { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: #FDE7E5; color: #8C1D18; font-size: 14px; }
.plantilla-op { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; border: 2px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.plantilla-op[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); }
.plantilla-op strong { display: block; font-size: 15px; }
.plantilla-op span { display: block; font-size: 13.5px; color: var(--texto-2); margin-top: 2px; white-space: pre-wrap; }
.vista-previa { padding: 10px 12px; border-radius: 10px; background: var(--propia); font-size: 14.5px; white-space: pre-wrap; margin: 8px 0; }
.adjunto-vista { display: flex; justify-content: center; align-items: center; background: #0b141a0d; border-radius: 10px; padding: 8px; margin-bottom: 10px; }
.adjunto-vista img, .adjunto-vista video { max-height: 38vh; max-width: 100%; border-radius: 6px; }
.adjunto-doc { display: flex; align-items: center; gap: 12px; }
.adjunto-doc svg { width: 40px; height: 40px; color: var(--marca); }
.visor { position: fixed; inset: 0; z-index: 60; background: rgba(5, 10, 14, .94); display: flex; flex-direction: column; }
.visor__barra { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; color: #fff; }
.visor__barra .btn-icono { color: #fff; }
.visor__barra .btn-icono:hover { background: rgba(255, 255, 255, .15); }
.visor__cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 56px 16px; }
.visor__cuerpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor__nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(255, 255, 255, .12); }
.visor__nav--ant { left: 6px; }
.visor__nav--sig { right: 6px; }
.visor__pie { color: #fff; text-align: center; padding: 0 16px 16px; font-size: 14px; }
.toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(92vw, 520px); pointer-events: none; }
.toast { pointer-events: auto; background: #1f2c34; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14.5px; box-shadow: var(--sombra-alta); text-align: center; }
.toast.es-error { background: #8C1D18; }
.toast.es-ok { background: #0B4F35; }

/* ---------------------------------------------------------------- pantalla de ingreso */
.login-pagina { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(180deg, var(--marca) 0 220px, var(--cabecera) 220px); }
.login { width: min(420px, 100%); background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta); padding: 28px 24px 24px; }
.login__marca { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; text-align: center; }
.login__marca img { width: 76px; height: 76px; border-radius: 18px; }
.login__marca h1 { margin: 4px 0 0; font-size: 24px; color: var(--marca); }
.login__marca p { margin: 0; color: var(--texto-2); font-size: 15px; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.login label > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.login .btn-primario { width: 100%; min-height: 46px; }
.login__enlace { align-self: center; border: 0; background: transparent; color: var(--marca); text-decoration: underline; font-size: 15px; padding: 6px; min-height: 36px; }
.login__mensaje { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14.5px; }
.login__mensaje.es-error { background: #FDE7E5; color: #8C1D18; }
.login__mensaje.es-ok { background: #E4F4EC; color: #0B4F35; }
.login__mensaje.es-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }

/* ---------------------------------------------------------------- pantallas medianas: el panel de info flota encima */
@media (max-width: 1099px) {
  :root { --col-lista: 340px; }
  #app[data-info="1"] { grid-template-columns: var(--col-rail) var(--col-lista) minmax(0, 1fr); }
  #panel-info { position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--col-info), 100%); z-index: 20; box-shadow: var(--sombra-alta); }
}

/* ---------------------------------------------------------------- celular: una pantalla a la vez */
@media (max-width: 699px) {
  .solo-movil { display: inline-flex !important; }
  #app, #app[data-info="1"] { grid-template-columns: minmax(0, 1fr) !important; }   /* en el celular no hay barra de íconos: una pantalla a la vez */
  #panel-lista { border-right: 0; }
  #panel-chat { display: none; }
  #app[data-chat="1"] #panel-lista { display: none; }
  #app[data-chat="1"] #panel-chat { display: flex; }
  #panel-info { position: fixed; inset: 0; width: auto; z-index: 30; box-shadow: none; }
  .mensajes { padding: 10px 10px 12px; }
  .burbuja { max-width: 86%; }
  .rapidas, .emojis { left: 4px; right: 4px; }
  .emojis { max-width: none; }
  .menu-flotante { left: 44px; }
  .toasts { bottom: 76px; }
  .chat-vacio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- ajustes finales */
.medio__abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.medio__abrir img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-item__previa svg.fallo { color: var(--peligro); flex: none; width: 16px; height: 16px; }
.burbuja__pie { white-space: normal; }
.login p { margin: 0 0 4px; font-size: 15px; color: var(--texto-2); }
.login__mensaje { margin-bottom: 12px; }
.tienda-nombre { font-size: 15px; }
.chat-item > button:focus-visible, .chip:focus-visible { outline-offset: -3px; }

/* =====================================================================
   FASE 4 · menú lateral y pantallas de gestión
   (Equipo, Historial, Respuestas rápidas, Etiquetas, Asistente, Tiendas) + política de privacidad
   ===================================================================== */

/* ---------------------------------------------------------------- barra de íconos (computador) */
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; min-height: 0; overflow-y: auto; background: var(--cabecera); border-right: 1px solid var(--borde); }
.rail__grupo { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.rail__resorte { flex: 1; }
.rail__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 62px; min-height: 56px; padding: 6px 2px;
  border: 0; border-radius: 12px; background: transparent; color: var(--texto-2); font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center;
}
.rail__btn svg { width: 24px; height: 24px; }
.rail__btn:hover { background: rgba(11, 20, 26, .07); }
.rail__btn[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
.rail__btn:focus-visible { outline-offset: -3px; }
.rail__texto { display: block; max-width: 100%; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- menú ⋮ del celular */
.barra { position: relative; }
.menu-movil { position: absolute; top: calc(100% - 6px); right: 8px; z-index: 12; min-width: 230px; padding: 6px 0; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra-alta); }
.menu-movil button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent; font-size: 15px; text-align: left; }
.menu-movil button:hover, .menu-movil button:focus-visible { background: var(--cabecera); }
.menu-movil button:focus-visible { outline-offset: -3px; }
.menu-movil svg { width: 22px; height: 22px; flex: none; color: var(--marca); }

/* ---------------------------------------------------------------- qué columnas se ven según la sección */
#sec-lista, #sec-detalle { display: none; }
#app:not([data-seccion="chats"]) > #sec-lista, #app:not([data-seccion="chats"]) > #sec-detalle { display: flex; }
#app:not([data-seccion="chats"]) > :is(#panel-lista, #panel-chat, #panel-info) { display: none !important; }
/* Si «Info del contacto» quedó abierta en un chat y se pasa a una sección, ese panel se esconde pero su columna seguía reservada: dejaba un hueco vacío a la derecha. */
#app:not([data-seccion="chats"])[data-info="1"] { grid-template-columns: var(--col-rail) var(--col-lista) minmax(0, 1fr); }
.sec-lista { flex-direction: column; min-height: 0; min-width: 0; background: var(--superficie); border-right: 1px solid var(--borde); }
.sec-cab { border-bottom: 1px solid var(--borde); flex: none; }
.sec-cab__titulo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sec-cab h2, .sec-det-cab h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.sec-cab h2:focus, .sec-det-cab h2:focus { outline: none; }
.sec-lista-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sec-detalle { flex-direction: column; min-width: 0; min-height: 0; background: var(--cabecera); }
.sec-det-cab { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px 16px; background: var(--cabecera); border-bottom: 1px solid var(--borde); flex: none; }
.sec-det-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.sec-vacio { margin: 12vh auto 0; max-width: 380px; padding: 0 12px; text-align: center; color: var(--texto-2); }
.sec-vacio svg { width: 56px; height: 56px; color: var(--marca); opacity: .8; }
.sec-vacio h3 { margin: 10px 0 4px; color: var(--texto); font-size: 20px; font-weight: 600; }
.sec-vacio p { margin: 0; font-size: 15px; }
.sec-filtros { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); }
.sec-filtros select {
  width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 15px;
}
.sec-filtros label { font-size: 13px; color: var(--texto-2); }
.sec-nota { margin: 0; padding: 10px 14px; font-size: 13.5px; color: var(--texto-2); }
.avatar--suave { background: var(--marca-suave); color: var(--marca); }
.chat-item__previa .pildora { margin-left: 4px; }
.pildora--ok { background: #E4F4EC; color: #0B4F35; }
.pildora--apagado { background: #FDE7E5; color: #8C1D18; }
.pildora--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.item-tuyo { font-weight: 400; color: var(--texto-2); }

/* ---------------------------------------------------------------- formularios y tarjetas */
.contenido { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tarjeta { background: var(--superficie); border-radius: 12px; padding: 16px; box-shadow: var(--sombra); }
.tarjeta > h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.tarjeta p { margin: 0 0 10px; font-size: 15px; }
.tarjeta p:last-child { margin-bottom: 0; }
.fila-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.formulario--columna { display: flex; flex-direction: column; gap: 12px; }
.chat-item__fila .pildora { flex: none; }
.acciones-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.campo > label, .campo > .campo__rotulo { display: block; font-size: 13px; color: var(--texto-2); margin-bottom: 3px; }
.campo input[type="email"], .campo input[type="url"], .campo input[type="number"], .campo input[type="date"], .campo input[type="password"], .campo input[type="tel"], .campo select,
.modal select, .modal input[type="email"], .modal input[type="tel"], .modal input[type="number"] {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 16px;
}
.campo input[type="text"], .campo textarea { font-family: inherit; }
.campo [aria-invalid="true"] { border-color: var(--peligro) !important; }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled { background: var(--cabecera); color: var(--texto-2); }
.ayuda { display: block; margin-top: 4px; font-size: 13px; color: var(--texto-2); }
.campo-error { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: #8C1D18; }
.contador-chars { text-align: right; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.solo-valor { font-size: 16px; padding: 4px 0; overflow-wrap: anywhere; }
.campo--interruptor { margin-bottom: 10px; }
.campo > label.interruptor { display: flex; margin: 0; font-size: 15px; color: var(--texto); }
.interruptor { cursor: pointer; }
.modal .campo { margin-bottom: 12px; }
.modal p.ayuda-bloque { margin: 0 0 12px; color: var(--texto-2); font-size: 14px; }
.est-caja { padding: 10px 12px; border-radius: 8px; background: var(--cabecera); color: var(--texto); font-size: 14px; }
.est-caja--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.pasos { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.pasos li { margin-bottom: 2px; }

/* ---------------------------------------------------------------- clave temporal, paleta de colores */
.clave-caja {
  margin: 10px 0; padding: 14px 12px; border: 2px dashed var(--borde); border-radius: 10px; background: var(--cabecera); text-align: center;
  display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 24px; font-weight: 700; letter-spacing: .08em; word-break: break-all; user-select: all;
}
.paleta { display: flex; flex-wrap: wrap; gap: 10px; }
.color-op {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.color-op svg { width: 22px; height: 22px; visibility: hidden; }
.color-op[aria-checked="true"] { box-shadow: 0 0 0 3px var(--foco); }
.color-op[aria-checked="true"] svg { visibility: visible; }
.campo > .color-demo { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 8px; border-radius: 16px; border: 2px solid var(--borde); background: var(--superficie); font-size: 14px; color: var(--texto); }
.color-demo i { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------- historial */
.hist { max-width: 760px; margin: 0 auto; }
.hist-filtros { background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); margin-bottom: 12px; padding: 0 16px; }
.hist-filtros > summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 15px; color: var(--marca); }
.hist-filtros[open] > summary { border-bottom: 1px solid var(--borde-suave); margin-bottom: 12px; }
.hist-filtros .acciones-form { margin: 0 0 14px; }
.hist-dia { position: sticky; top: 0; z-index: 2; display: flex; justify-content: center; padding: 8px 0 6px; }
.hist-dia span { background: #FFFFFFE6; color: var(--texto-2); font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 8px; box-shadow: var(--sombra); }
.hist-lista { list-style: none; margin: 0; padding: 0; }
.hist-item { background: var(--superficie); border-radius: 10px; margin-bottom: 6px; box-shadow: var(--sombra); }
.hist-item > button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: transparent; text-align: left; border-radius: 10px; }
.hist-item > button:hover { background: var(--cabecera); }
.hist-icono { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--marca-suave); color: var(--marca); }
.hist-icono svg { width: 19px; height: 19px; }
.hist-texto { flex: 1; min-width: 0; }
.hist-frase { display: block; margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.hist-correo { color: var(--texto-2); font-size: 13px; }
.hist-meta { display: block; margin: 2px 0 0; font-size: 13px; color: var(--texto-2); }
.hist-flecha { flex: none; align-self: center; display: flex; width: 18px; height: 18px; color: var(--texto-2); transition: transform .15s; }
.hist-flecha svg { display: block; width: 18px; height: 18px; }
.hist-item > button[aria-expanded="true"] .hist-flecha { transform: rotate(90deg); }
.hist-cambios { margin: 0 12px 12px 58px; padding-top: 8px; border-top: 1px solid var(--borde-suave); font-size: 14px; }
.cambio { padding: 5px 0; border-bottom: 1px solid var(--borde-suave); }
.cambio:last-child { border-bottom: 0; }
.cambio__campo { font-size: 12.5px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .02em; }
.cambio__valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; overflow-wrap: anywhere; }
.cambio .antes { color: #8C1D18; text-decoration: line-through; text-decoration-thickness: 1px; }
.cambio .despues { color: #0B4F35; font-weight: 600; }
.cambio .flecha { color: var(--texto-2); }
.cambio .tal-cual { color: var(--texto); white-space: pre-wrap; }
.hist-mas { display: flex; justify-content: center; padding: 10px 0 20px; }

/* ---------------------------------------------------------------- pie de login y política de privacidad */
.login__pie { margin: 16px 0 0; text-align: center; font-size: 14px; }
.login__pie a { color: var(--marca); }
.legal-pagina { min-height: 100vh; min-height: 100dvh; padding: 20px 16px 48px; background: var(--cabecera); }
.legal { max-width: 780px; margin: 0 auto; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta); padding: 28px 28px 32px; }
.legal__cab { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.legal__cab img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.legal h1 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--marca); }
.legal__fecha { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }
.legal h2 { margin: 28px 0 8px; font-size: 19px; }
.legal p, .legal li { font-size: 16px; line-height: 1.55; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 4px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--cabecera); }
.legal dt { font-weight: 700; }
.legal dd { margin: 0; overflow-wrap: anywhere; }
.legal__volver { display: inline-block; margin-top: 8px; }

@media (max-width: 699px) {
  .rail { display: none; }                 /* en el celular el menú se abre con el botón ⋮ */
  .sec-det-cuerpo { padding: 12px; }
  .sec-det-cab { padding: 8px 8px 8px 4px; }
  .sec-lista { border-right: 0; }
  .fila-dos { grid-template-columns: 1fr; }
  .hist-cambios { margin-left: 12px; }
  .legal { padding: 20px 16px 24px; }
  .legal dl { grid-template-columns: 1fr; gap: 0; }
  .legal dd { margin-bottom: 8px; }
  .clave-caja { font-size: 20px; }
  #app:not([data-seccion="chats"]) > #sec-detalle { display: none; }
  #app:not([data-seccion="chats"])[data-detalle="1"] > #sec-lista { display: none; }
  #app:not([data-seccion="chats"])[data-detalle="1"] > #sec-detalle { display: flex; }
}

/* =====================================================================
   FASE 6 · pedidos desde el chat + 99 Envíos
   (bloque «Pedidos» del panel de Info, formulario y detalle del pedido, pantalla Pedidos, «Conectar 99 Envíos»)
   ===================================================================== */

/* ---------------------------------------------------------------- estados del pedido (siempre con texto: el color nunca es lo único) */
.pildora--nuevo { background: #E1ECF8; color: #0B3F6B; }
.pildora--entregado { background: #CFEBDB; color: #0B4F35; }
.est-caja--ok { background: #E4F4EC; color: #0B4F35; }
.est-caja svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }

/* ---------------------------------------------------------------- bloque «Pedidos» del panel de Info */
.info-bloque__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.info-bloque__cab h3 { margin: 0; }
.pedidos-lista { list-style: none; margin: 0; padding: 0; }
.pedidos-lista li { border-bottom: 1px solid var(--borde-suave); }
.pedidos-lista li:last-child { border-bottom: 0; }
.pedido-fila { display: block; width: 100%; padding: 10px 4px; border: 0; background: transparent; text-align: left; border-radius: 8px; min-height: 44px; }
.pedido-fila:hover { background: var(--cabecera); }
.pedido-fila__uno { display: flex; align-items: center; gap: 8px; }
.pedido-fila__valor { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pedido-fila__desc { display: block; margin-top: 2px; font-size: 14px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item__previa .pedido-fila__valor { flex: none; font-size: 13px; color: var(--texto); }

/* ---------------------------------------------------------------- formulario del pedido */
.modal--ancho { width: min(640px, 100%); }
.grupo { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.grupo legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.ciudad-lista { list-style: none; margin: 4px 0 0; padding: 0; max-height: 232px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
.ciudad-op, .ciudad-vacia { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 46px; padding: 6px 12px; cursor: pointer; border-bottom: 1px solid var(--borde-suave); }
.ciudad-op:last-child, .ciudad-vacia:last-child { border-bottom: 0; }
.ciudad-op span { font-size: 13px; color: var(--texto-2); }
.ciudad-op[aria-selected="true"], .ciudad-op:hover { background: var(--marca-suave); }
.ciudad-vacia { cursor: default; font-size: 14px; color: var(--texto-2); }
.ciudad-elegida { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--cabecera); }
.ciudad-elegida__texto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ciudad-elegida__texto svg { width: 20px; height: 20px; flex: none; color: var(--marca); }
.ciudad-elegida__texto span { display: flex; flex-direction: column; min-width: 0; }
.ciudad-elegida__texto strong { overflow-wrap: anywhere; }
.ciudad-elegida__texto small { color: var(--texto-2); font-size: 12.5px; }
.campo.ciudad input[role="combobox"] { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); font-size: 16px; }

/* ---------------------------------------------------------------- detalle del pedido */
.pedido-detalle { display: flex; flex-direction: column; gap: 12px; }
.pedido-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pedido-num { font-size: 18px; }
.pedido-fecha { margin-left: auto; font-size: 13px; color: var(--texto-2); }
.pedido-estado { min-height: 0; font-size: 14px; color: var(--texto-2); }
.pedido-estado:empty { display: none; }
.pedido-estado:focus { outline: none; }
.pedido-bloque { padding: 12px; border: 1px solid var(--borde-suave); border-radius: 10px; background: var(--superficie); }
.pedido-bloque h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.pedido-bloque h4 svg { width: 18px; height: 18px; color: var(--marca); }
.pedido-bloque .ayuda { margin: 8px 0 0; }
.datos-lista { margin: 0; }
.dato { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--borde-suave); }
.dato:last-child { border-bottom: 0; }
.dato dt { font-size: 13.5px; color: var(--texto-2); }
.dato dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.pedido-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.guia-crear { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.guia-crear .campo { flex: 1 1 180px; margin: 0; }
.guia-crear .ayuda { flex: 1 1 100%; margin: 0; }
.btn-enlace { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; text-decoration: none; }
.btn-enlace svg { width: 18px; height: 18px; }
.est-caja .btn-chico { margin-top: 8px; }
.tarjeta--compacta { margin: 8px 12px; padding: 12px; box-shadow: none; border: 1px solid var(--borde-suave); }
.tarjeta--compacta > h3 { margin-bottom: 6px; }
.tarjeta--compacta .est-caja { margin-bottom: 8px; }
.tarjeta--compacta .acciones-form { margin-top: 0; }
.sec-cuenta:empty { display: none; }

@media (max-width: 699px) {
  .dato { grid-template-columns: 1fr; }
  .modal--ancho { width: 100%; }
  .ciudad-elegida { flex-wrap: wrap; }
  .pedido-fecha { margin-left: 0; flex-basis: 100%; }
}

/* =====================================================================
   FASE 7 · catálogo de la marca (pantalla «Catálogo» y «Del catálogo» en Nuevo pedido)
   Las muestras redondas son un color aproximado por el nombre; el nombre del color siempre va en texto al lado.
   ===================================================================== */
.cat-muestra { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(11, 20, 26, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.cat-muestra--grande { width: 32px; height: 32px; }
.cat-muestra--neutra { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .6) 0 3px, transparent 3px 6px); }   /* rayitas: «color sin fijar todavía» */
.cat-muestras { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.cat-mas { margin-left: 2px; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.cat-pordefinir { color: var(--texto-2); font-style: italic; }
.cat-texto { white-space: pre-wrap; }
.cat-ficha:focus { outline: none; }
.cat-bloque-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cat-bloque-cab h4 { margin: 0; }
.cat-colores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-color { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--borde-suave); border-radius: 20px; background: var(--superficie); font-size: 15px; }
.cat-color__nombre { min-width: 0; overflow-wrap: anywhere; }
.cat-color--inactivo .cat-muestra, .cat-color--inactivo .cat-color__nombre { opacity: .55; }
.cat-colores--editable { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.cat-colores--editable .cat-color { width: 100%; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; }
.cat-color__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* ---------------------------------------------------------------- «Del catálogo (opcional)» dentro de «Nuevo pedido» */
.cat-selector { margin-bottom: 14px; padding: 12px; border: 1px dashed var(--borde); border-radius: 10px; background: var(--cabecera); }
.cat-selector__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.cat-selector__titulo svg { width: 18px; height: 18px; color: var(--marca); }
.cat-sugerencia { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; font-size: 14px; color: var(--texto); }
.cat-sugerencia > span:not(.cat-muestra) { flex: 1 1 200px; min-width: 0; }

/* =====================================================================
   FASE 8 · tablero de etapas del pedido y empaque guiado con foto
   Los estados nuevos van siempre con texto: el color solo ayuda (contraste AA en las dos «pastillas»).
   ===================================================================== */
.pildora--alistando { background: #FBE9C6; color: #6B4300; }
.pildora--empacado { background: #D5EEEC; color: #0B4A46; }

/* ---------------------------------------------------------------- Lista | Tablero */
.vistas { display: flex; gap: 6px; padding: 10px 12px 0; }
.vista-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--borde-suave); border-radius: 20px; background: var(--cabecera); color: var(--texto-2); font-size: 15px; font-weight: 600;
}
.vista-btn svg { width: 20px; height: 20px; flex: none; }
.vista-btn[aria-pressed="true"] { background: var(--marca-suave); color: var(--marca); border-color: transparent; }
.vista-btn:focus-visible { outline-offset: -3px; }
.sec-filtros__campo { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- el tablero (computador: columnas una al lado de la otra) */
.tablero-zona { padding: 10px 12px 16px; }
.tablero-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tablero-resumen { margin: 0; font-size: 14px; color: var(--texto-2); }
.tablero-aviso { margin-bottom: 10px; }
.tablero-tabs { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip__n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--superficie); color: var(--texto); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.tablero-col { min-width: 0; padding: 10px; border-radius: 12px; background: var(--cabecera); }
.tablero-col__cab { display: flex; flex-direction: column; margin-bottom: 8px; }
.tablero-col__cab h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.tablero-col__cab small { color: var(--texto-2); font-size: 12.5px; }
.tablero-n { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--superficie); color: var(--texto); font-size: 12.5px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.tablero-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tablero-vacio { margin: 8px 0; font-size: 14px; color: var(--texto-2); }

/* la tarjeta de un pedido */
.tp { padding: 0; border: 1px solid var(--borde-suave); border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); }
.tp__ver { display: block; width: 100%; min-height: 44px; padding: 10px 10px 4px; border: 0; border-radius: 10px 10px 0 0; background: transparent; text-align: left; }
.tp__ver:hover { background: var(--cabecera); }
.tp__ver:focus-visible { outline-offset: -3px; }
.tp__cab { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tp__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tp__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.tp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 0 10px 8px; font-size: 13px; color: var(--texto-2); }
.tp__valor { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.tp__pago--falta { color: #8C1D18; font-weight: 600; }
.tp__nota { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px 8px; font-size: 13px; color: #0B4F35; }
.tp__nota svg { width: 16px; height: 16px; flex: none; }
.tp__acciones { padding: 0 10px 10px; }
.tp__acciones .btn-primario { width: 100%; min-height: 44px; }

/* computador: con el tablero abierto, la columna de la izquierda ocupa todo el ancho y el centro se esconde (el pedido se abre en una ventana) */
@media (min-width: 700px) {
  #app[data-seccion="pedidos"][data-pedidos-vista="tablero"] > #sec-lista { grid-column: 2 / -1; border-right: 0; }
  #app[data-seccion="pedidos"][data-pedidos-vista="tablero"] > #sec-detalle { display: none; }
  #app[data-seccion="pedidos"][data-pedidos-vista="tablero"] .sec-filtros { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  #app[data-seccion="pedidos"][data-pedidos-vista="tablero"] .sec-filtros__campo { flex: 0 1 280px; }
  #app[data-seccion="pedidos"][data-pedidos-vista="tablero"] .vistas { max-width: 360px; }
}

/* ---------------------------------------------------------------- detalle del pedido: «Etapa del pedido» y «Empaque» */
.etapa-texto { margin: 0 0 10px; font-size: 14.5px; }
.empaque-galeria { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.foto-emp { margin: 0; }
.foto-emp__enlace { display: block; }
.foto-emp img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--borde); border-radius: 8px; background: var(--cabecera); }
.foto-emp figcaption { margin-top: 4px; font-size: 12.5px; color: var(--texto-2); }
.foto-emp figcaption small { display: block; }
.foto-emp__error { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: 4px; border-radius: 8px; background: #FDE7E5; color: #8C1D18; font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------- el paso a paso del empaque */
.empaque-paso-n { margin: 0 !important; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.empaque-puntos { display: flex; gap: 6px; margin: 6px 0 14px; }
.empaque-punto { flex: 1; height: 6px; border-radius: 3px; background: var(--borde); }
.empaque-punto.hecho { background: var(--no-leido); }
.empaque-punto.actual { background: var(--marca); }
.empaque-paso h3 { margin: 0 0 8px; font-size: 18px; }
.empaque-paso h3:focus { outline: none; }
.empaque-pedido { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--marca); border-radius: 0 8px 8px 0; background: var(--cabecera); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.empaque-numero { margin: 0 0 12px !important; font-size: 18px; }
.empaque-numero strong { font-size: 40px; color: var(--marca); }
.empaque-bolsa { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; padding: 10px 12px; border-radius: 10px; background: var(--marca-suave); }
.empaque-bolsa svg { width: 28px; height: 28px; flex: none; color: var(--marca); }
.empaque-casilla { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 2px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.empaque-casilla input { width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--marca); }
.empaque-casilla label { flex: 1; font-size: 16px; cursor: pointer; }
.empaque-ayuda { min-height: 1.2em; margin: 8px 0 0 !important; }
.empaque-fotos__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.foto-boton { display: inline-block; }
.empaque-subiendo { font-weight: 600; color: var(--marca); }

@media (max-width: 699px) {
  /* celular: pestañas con el número de pedidos de cada etapa y, debajo, solo las tarjetas de la etapa elegida */
  .tablero-tabs { display: flex; }
  .tablero { display: block; overflow-x: visible; padding-bottom: 0; }
  .tablero-col { display: none; }
  .tablero-col--activa { display: block; }
  .foto-boton, .foto-boton .btn-secundario { width: 100%; }
  .empaque-fotos__botones { flex-direction: column; }
}

/* =====================================================================
   FASE 7.5 · inventario por tienda (pantalla «Inventario»: existencias por color y libro de movimientos)
   El estado (Agotado / Poco / Sin registrar) y el signo (+ / −) van SIEMPRE con texto: el color solo ayuda.
   ===================================================================== */
.inv-demo { margin: 10px 12px 0; }
.inv-barra.sec-filtros { padding-top: 8px; }
.inv-total { flex: none; font-size: 13px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-alerta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 12px 8px; }
.inv-alerta > span { flex: 1 1 200px; min-width: 0; }
.inv-alerta .btn-chico { margin-top: 0; }
.inv-ficha-tienda { margin: 6px 0 10px; }
.inv-colores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-color { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--borde-suave); border-radius: 12px; background: var(--superficie); }
.inv-color--agotado { border-color: #E9B8B4; }
.inv-color--poco { border-color: #E6CF8E; }
.inv-color__nombre { flex: 1 1 110px; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.inv-color__cant { min-width: 2.4em; text-align: right; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-color--sin_registro .inv-color__cant { color: var(--texto-2); font-weight: 400; }
.inv-color__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.inv-color__acciones .btn-chico { min-height: 38px; }
.inv-total-ref { margin: 10px 0 0 !important; font-size: 15px; font-weight: 700; }
.inv-vista { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--cabecera); font-size: 14px; }

/* el libro de movimientos */
.mov-lista { list-style: none; margin: 0; padding: 0; }
.mov-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); }
.mov-cant { flex: none; min-width: 56px; padding: 3px 8px; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mov-cant--entra { background: #E4F4EC; color: #0B4F35; }
.mov-cant--sale { background: #FDE7E5; color: #8C1D18; }
.mov-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mov-titulo { font-size: 15px; overflow-wrap: anywhere; }
.mov-meta { font-size: 13px; color: var(--texto-2); }
.mov-motivo { font-size: 14px; overflow-wrap: anywhere; }

/* computador: con «Movimientos» abierto, la lista ocupa todo el ancho y el centro se esconde (no hay ficha que mostrar) */
@media (min-width: 700px) {
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] > #sec-lista { grid-column: 2 / -1; border-right: 0; }
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] > #sec-detalle { display: none; }
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] .vistas { max-width: 360px; }
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] .inv-barra { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] .inv-barra .sec-filtros__campo { flex: 0 1 280px; }
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] .mov-lista,
  #app[data-seccion="inventario"][data-inventario-vista="movimientos"] .lista-mas { max-width: 860px; }
}

/* =====================================================================
   FASE 7b · Messenger, Instagram y comentarios
   Íconos propios (burbujas genéricas); los colores del canal acompañan al nombre, nunca lo reemplazan (siempre hay texto: lector de pantalla y daltónicos).
   ===================================================================== */
.canal--whatsapp { color: #0E6A46; }
.canal--messenger { color: #1F5FA8; }
.canal--instagram { color: #A1234F; }
.chat-item__canal { flex: none; display: inline-flex; margin-right: auto; align-self: center; }
.chat-item__canal svg { width: 15px; height: 15px; }
.chat-item__fila .chat-item__hora { margin-left: auto; }
.canal-marca { display: inline-flex; vertical-align: -3px; margin-right: 5px; }
.canal-marca svg { width: 15px; height: 15px; }

.burbuja__autor--canal { font-weight: 600; color: var(--texto-2); font-size: 12px; }
.burbuja__comentario {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -2px 0 6px; padding: 5px 8px;
  background: var(--marca-suave); color: var(--marca-hover); border-radius: 6px; font-size: 12.5px; font-weight: 600;
}
.burbuja__comentario svg { width: 15px; height: 15px; flex: none; }
.comentario__enlace { color: var(--marca-hover); text-decoration: underline; font-weight: 700; }
.comentario__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.comentario__acciones .btn-chico { min-height: 36px; }
.comentario__cita { margin: 4px 0 10px; padding: 6px 10px; border-left: 3px solid var(--marca); background: var(--marca-suave); border-radius: 4px; font-size: 14px; overflow-wrap: anywhere; }

.ventana-privado { padding: 8px 14px; background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 13px; font-weight: 600; }
.form-escribir.solo-texto #btn-adjuntar { display: none; }
#btn-agente-humano { flex: none; }
@media (max-width: 699px) {
  .comentario__acciones .btn-chico { flex: 1 1 140px; }
  .ventana-cerrada #btn-agente-humano { flex: 1 1 100%; }
}

/* FASE 6b · cobrar con Wompi: la dirección de eventos, el resumen del pago y la lista de pagos del pedido */
.wompi-url-fila { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
.wompi-url { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--cabecera); color: var(--texto); text-overflow: ellipsis; }
.pago-resumen { margin: 0 0 8px; }
.pagos-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pago-fila { padding: 8px 10px; border: 1px solid var(--borde-suave); border-radius: 8px; background: var(--cabecera); overflow-wrap: anywhere; }
.pago-fila__uno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pago-fila .est-caja { margin: 8px 0 0; }
@media (max-width: 699px) {
  .wompi-url-fila { flex-wrap: wrap; }
  .wompi-url-fila .btn-chico { flex: 1 1 100%; }
}