/* Asistente IA — colores tomados de mueblesocotlan.online */
.aia, .aia-panel {
  --aia-marca: #6f4427;
  --aia-marca2: #a06a3c;
  --aia-dorado: #d9a441;
  --aia-dorado-texto: #3a2704;
  --aia-verde: #25d366;
  --aia-texto: #334155;
  --aia-suave: #64748b;
  --aia-fondo: #faf6f1;
  --aia-tarjeta: #ffffff;
  --aia-borde: #e7ddd1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--aia-texto);
  line-height: 1.5;
  box-sizing: border-box;
}
.aia *, .aia-panel * { box-sizing: border-box; }

.aia {
  background: var(--aia-tarjeta);
  border: 2px solid var(--aia-marca);
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0 24px;
  box-shadow: 0 8px 28px rgba(111, 68, 39, .14);
  scroll-margin-top: 80px;
}
.aia-cab { display: flex; align-items: flex-start; gap: 12px; }
.aia-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--aia-marca), var(--aia-marca2));
  color: #fff; display: grid; place-items: center; font-size: 1.3rem;
}
.aia-eleccion { display: none; color: var(--aia-suave); font-size: .9rem; margin-bottom: 4px; }
.aia-texto { font-size: 1.15rem; font-weight: 600; white-space: pre-wrap; color: #1f2937; }
.aia-texto.aia-respuesta { font-weight: 400; font-size: 1.02rem; }
/* Efecto «escribiendo»: cursor que parpadea y los botones salen al terminar */
.aia-escribiendo { cursor: pointer; }
.aia-escribiendo::after { content: '▍'; margin-left: 1px; color: var(--aia-marca2); animation: aia-cursor .7s steps(1) infinite; }
@keyframes aia-cursor { 50% { opacity: 0; } }
.aia-acciones, .aia-opciones, .aia-temas { transition: opacity .4s ease, transform .4s ease; }
.aia-esperando { opacity: 0; transform: translateY(8px); pointer-events: none; transition: none; }
/* Mientras Claude piensa: mensaje grande y resaltado */
.aia-texto.aia-cargando {
  display: inline-block; font-size: 1.3rem; font-weight: 800; color: var(--aia-marca);
  background: #fff6e5; border: 2px dashed var(--aia-dorado); border-radius: 12px; padding: 10px 16px; line-height: 1.35;
}
.aia-cargando::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: aia-puntos 1.2s steps(4, end) infinite; }
@keyframes aia-puntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.aia-ocupado .aia-avatar { animation: aia-latido 1.2s ease-in-out infinite; }
@keyframes aia-latido { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 164, 65, .55); } 50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(217, 164, 65, 0); } }
.aia-ocupado .aia-cab { position: relative; padding-bottom: 12px; }
.aia-ocupado .aia-cab::after {
  content: ''; position: absolute; left: 54px; right: 0; bottom: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--aia-borde) 0%, var(--aia-dorado) 50%, var(--aia-borde) 100%);
  background-size: 200% 100%; animation: aia-barra 1.1s linear infinite;
}
@keyframes aia-barra { from { background-position: 200% 0; } to { background-position: 0 0; } }
.aia-ocupado .aia-otra button, .aia-ocupado .aia-chips button { opacity: .5; pointer-events: none; }
.aia-prisa { font-size: .9rem; padding: 9px 14px; }
@media (prefers-reduced-motion: reduce) { .aia-cargando::after, .aia-ocupado .aia-avatar, .aia-ocupado .aia-cab::after { animation: none; } }

.aia-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px;
  padding: 11px 16px; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; text-decoration: none !important;
}
.aia-llamar { background: var(--aia-dorado); color: var(--aia-dorado-texto) !important; }
.aia-wa { background: var(--aia-verde); color: #fff !important; }
.aia-mapa-btn { background: var(--aia-fondo); color: var(--aia-texto) !important; border: 1px solid var(--aia-borde); }
.aia-principal { background: var(--aia-marca); color: #fff !important; border-color: var(--aia-marca) !important; }

.aia-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aia-acciones:empty { display: none; }
.aia-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.aia-opcion {
  border: 1px solid var(--aia-borde); background: var(--aia-fondo); color: var(--aia-texto);
  border-radius: 14px; padding: 14px; font: inherit; font-size: 1rem; font-weight: 600; text-align: left;
  cursor: pointer; transition: transform .1s, border-color .1s; line-height: 1.3;
}
.aia-opcion:hover { border-color: var(--aia-marca); transform: translateY(-1px); }
a.aia-opcion { display: flex; align-items: center; text-decoration: none; }
.aia-opcion.aia-opcion-wa { background: var(--aia-verde); color: #fff !important; border-color: var(--aia-verde) !important; font-weight: 600; }
.aia-opcion.aia-principal { background: var(--aia-dorado); color: var(--aia-dorado-texto) !important; border-color: var(--aia-dorado) !important; }

.aia-temas { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--aia-borde); }
.aia-temas:empty { display: none; }
.aia-temas-tit { font-size: .85rem; color: var(--aia-suave); margin-bottom: 6px; }
.aia-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aia-chips button {
  border: 1px solid var(--aia-borde); background: var(--aia-fondo); color: var(--aia-texto);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .88rem; cursor: pointer;
}
.aia-chips button:hover { border-color: var(--aia-marca); }

.aia-mapa { display: none; margin-top: 14px; }
.aia-mapa iframe { width: 100%; height: 280px; border: 0; border-radius: 14px; background: var(--aia-fondo); }
.aia-calle, .aia-otra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aia-calle input, .aia-otra input {
  flex: 1; min-width: 200px; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--aia-borde);
  background: var(--aia-fondo); color: var(--aia-texto); font: inherit; font-size: 1rem; margin: 0;
}
.aia-calle input:focus, .aia-otra input:focus { outline: none; border-color: var(--aia-marca); }
.aia-gps { background: var(--aia-fondo); color: var(--aia-texto); border: 1px solid var(--aia-borde); }
.aia-otra-tit { font-size: 20px; font-weight: 700; color: #1f2937; margin-top: 18px; }
.aia-otra input { font-size: 18px; }
.aia-temas-tit { font-size: 17px !important; font-weight: 600; color: #374151 !important; }
.aia-otra { margin-top: 6px; }
.aia-pie { margin-top: 10px; font-size: .85rem; }
/* Bienvenida: la casilla para escribir justo debajo, bien grande; los botones abajo como ayuda */
.aia-inicio .aia-otra { margin-top: 14px; }
.aia-inicio .aia-otra input { font-size: 18px; padding: 14px 18px; border-color: var(--aia-marca2); background: #fff; }
.aia-separador { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; color: var(--aia-suave); font-size: .92rem; font-weight: 600; }
.aia-separador::before, .aia-separador::after { content: ''; flex: 1; border-top: 1px solid var(--aia-borde); }
.aia-inicio .aia-texto { font-weight: 500; font-size: 1.08rem; }
.aia-volver { visibility: hidden; background: none; border: 0; padding: 0; color: var(--aia-marca); font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 480px) {
  .aia { padding: 14px; border-radius: 14px; }
  .aia-opciones { grid-template-columns: 1fr 1fr; }
  .aia-opcion { padding: 12px; font-size: .95rem; }
}

/* ---------- Panel de clientes ---------- */
body.aia-panel-sola { margin: 0; background: var(--aia-fondo, #faf6f1); }
.aia-panel { max-width: 960px; margin: 0 auto; padding: 20px 16px 60px; }
.aia-panel h1 { margin: 0 0 4px; font-size: 1.5rem; }
.aia-panel h2 { font-size: 1.1rem; margin: 28px 0 10px; }
.aia-panel .sub { color: var(--aia-suave); margin: 0 0 18px; }
.aia-panel .grande { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.aia-panel .k { background: var(--aia-tarjeta); border: 1px solid var(--aia-borde); border-radius: 14px; padding: 14px; }
.aia-panel .k b { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; color: #1f2937; }
.aia-panel .k span { color: var(--aia-suave); font-size: .9rem; }
.aia-panel .k.top { border: 2px solid var(--aia-marca); }
.aia-panel .k.admin { background: #fff6e5; border-color: #e8c27a; }
.aia-panel .barras {
  display: flex; align-items: flex-end; gap: 3px; height: 140px; background: var(--aia-tarjeta);
  border: 1px solid var(--aia-borde); border-radius: 14px; padding: 12px;
}
.aia-panel .barras div { flex: 1; background: var(--aia-marca); border-radius: 3px 3px 0 0; min-height: 2px; }
.aia-panel table { width: 100%; border-collapse: collapse; background: var(--aia-tarjeta); border: 1px solid var(--aia-borde); }
.aia-panel td, .aia-panel th { padding: 9px 12px; border-bottom: 1px solid var(--aia-borde); text-align: left; font-size: .92rem; }
.aia-panel th { color: var(--aia-suave); }
.aia-panel .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Tarjetas tipo tienda (catálogo) y filtros para afinar */
.aia-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.aia-filtros::before { content: "Afina:"; font-size: .9rem; font-weight: 700; color: var(--aia-suave); }
.aia-filtro { border: 1px solid var(--aia-borde); background: var(--aia-tarjeta); color: var(--aia-texto); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(40, 30, 20, .08); }
.aia-filtro:hover { border-color: var(--aia-marca); }
.aia-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.aia-filtros:empty, .aia-tarjetas:empty { display: none; }
.aia-tarjeta {
  background: var(--aia-tarjeta); border: 1px solid var(--aia-borde); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 8px 22px rgba(40, 30, 20, .14), 0 2px 4px rgba(40, 30, 20, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.aia-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(40, 30, 20, .2), 0 3px 8px rgba(40, 30, 20, .1); }
.aia-destacada { border: 2px solid var(--aia-marca); }
.aia-sello { align-self: flex-start; background: var(--aia-marca); color: #fff; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.aia-t-icono { font-size: 1.8rem; line-height: 1; }
.aia-t-titulo { font-weight: 700; font-size: 1.05rem; color: #1f2937; line-height: 1.25; }
.aia-t-para { font-size: .85rem; color: var(--aia-suave); }
.aia-t-desc { font-size: .92rem; margin: 0; }
.aia-t-precio { font-size: 1.4rem; font-weight: 800; color: #1f2937; margin-top: auto; padding-top: 6px; }
.aia-t-sinprecio { font-size: 1rem; font-weight: 700; color: var(--aia-suave); }
.aia-tarjeta .aia-btn { justify-content: center; width: 100%; }
.aia-t-ver { font-size: .88rem; color: var(--aia-marca); text-align: center; text-decoration: none; }
.aia-t-ver:hover { text-decoration: underline; }
/* En el móvil: 2 por fila a todo el ancho, grandes; si queda una suelta, ocupa la fila entera */
@media (max-width: 600px) {
  .aia-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .aia-tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .aia-tarjeta { padding: 14px 10px; gap: 5px; border-radius: 14px; text-align: center; align-items: center; min-width: 0; }
  .aia-tarjeta:hover { transform: none; }
  .aia-sello { font-size: .72rem; padding: 3px 9px; align-self: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .aia-t-icono { font-size: 2.1rem; }
  .aia-t-titulo { font-size: 1.02rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .aia-t-para { font-size: .82rem; line-height: 1.3; }
  .aia-t-desc { display: none; }
  .aia-t-precio { font-size: 1.2rem; padding-top: 6px; }
  .aia-t-sinprecio { font-size: 1rem; }
  .aia-tarjeta .aia-btn { font-size: .95rem; padding: 11px 6px; gap: 4px; white-space: normal; line-height: 1.15; border-radius: 10px; }
  .aia-tarjeta .aia-ico { display: none; }
  .aia-t-ver { font-size: .82rem; }
}


@media (prefers-reduced-motion: reduce) { .aia-tarjeta { transition: none; } .aia-tarjeta:hover { transform: none; } }
@media (max-width: 340px) { .aia-sello-txt { display: none; } }