/* MAXTER widget styles — UI rediseñado según "bot maxter copia.png"
   y tarjetas de productos como en "modulo_prod.jpg".
   Colores de marca configurables: */
:root{
  --mx-primary: #0b73ff;    /* Azul de marca (cabecera, tabs activos, precios) */
  --mx-accent:  #22c55e;    /* Verde del botón "Comprar ahora" */
  --mx-ink:     #0f172a;    /* Texto principal */
  --mx-muted:   #64748b;    /* Texto tenue */
  --mx-line:    #e9eef3;    /* Bordes sutiles */
}

/* ---------- FAB (botón flotante) ---------- */
.mx-fab{
  position:fixed; bottom:16px; left:16px; display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem; border-radius:999px; font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--mx-primary); color:#fff; cursor:pointer; z-index:2147483000; box-shadow:0 10px 28px rgba(0,0,0,.18);
  white-space:nowrap; overflow:visible; max-width:calc(100vw - 24px); border:0;
}
.mx-fab svg{ width:18px; height:18px; flex:0 0 18px; }

/* ---------- Panel contenedor ---------- */
.mx-panel{
  position:fixed; bottom:84px; left:16px; width:min(420px,95vw); max-height:78vh; background:#fff; color:var(--mx-ink);
  border-radius:16px; box-shadow:0 22px 48px rgba(0,0,0,.28); overflow:hidden; transform:translateY(12px);
  opacity:0; pointer-events:none; transition:.2s ease; z-index:2147483000; display:flex; flex-direction:column;
  border:1px solid #e6eaf3;
}
.mx-panel.mx-open{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* ---------- Header ---------- */
.mx-head{
  display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; background:var(--mx-primary); color:#fff; font-weight:800;
  letter-spacing:.1px;
}
.mx-head small{ font-weight:500; opacity:.95 }

/* ---------- Switch (tabs) ---------- */
.mx-switch{
  display:flex; gap:8px; padding:10px; background:#fff; border-bottom:1px solid var(--mx-line);
}
.mx-tab{
  appearance:none; background:#fff; border:1px solid #d6dde6; color:#334155;
  padding:.55rem .9rem; font:800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; text-transform:uppercase;
  border-radius:10px; cursor:pointer; transition:.15s ease; letter-spacing:.3px;
}
.mx-tab:hover{ background:#f8fafc; border-color:#94a3b8; }
.mx-tab.mx-tab-active{
  background:var(--mx-primary); color:#fff; border-color:var(--mx-primary);
  box-shadow:0 6px 16px rgba(11,115,255,.25);
}

/* ---------- Body (área de mensajes/resultados) ---------- */
.mx-body{
  padding:12px; overflow:auto; flex:1; background:#f7f8fa;
}

/* Burbujas de mensaje (como el mockup) */
.mx-msg{
  max-width:78%; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:.75rem .9rem; margin:.5rem 0; white-space:pre-wrap; word-wrap:break-word;
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.mx-msg.mx-user{ background:#e5e7eb; color:#111; margin-left:auto; }
.mx-msg.mx-bot { background:linear-gradient(180deg, #0b73ff, #0964ed); color:#fff; margin-right:auto; }

/* Estado de carga */
.mx-loading{
  text-align:center; padding:1rem; color:var(--mx-muted); font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.mx-loading::after{ content:"●●●"; animation:mx-dots 1.4s infinite; margin-left:.5rem; }
@keyframes mx-dots{ 0%,20%{ content:"●"; } 33%,53%{ content:"●●"; } 66%,86%{ content:"●●●"; } }

/* ---------- Formulario ---------- */
.mx-form{
  display:flex; gap:.5rem; padding:10px; background:#fff; border-top:1px solid var(--mx-line);
}
.mx-form input{
  flex:1; border:1px solid #d6dde6; border-radius:9px; padding:.65rem .85rem;
  font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.mx-form input:focus{ outline:2px solid rgba(11,115,255,.15); border-color:var(--mx-primary); }
.mx-form button{
  background:var(--mx-primary); color:#fff; border:0; border-radius:9px; padding:.65rem .95rem; font-weight:800; cursor:pointer;
}
.mx-form button:disabled{ background:#94a3b8; cursor:not-allowed; }

/* ---------- Lista de productos (tarjetas "modulo_prod.jpg") ---------- */
.mx-list{ display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem; }
.mx-card{
  background:#fff; border-radius:12px; border:1px solid #e5eaf0; overflow:hidden;
  display:grid; grid-template-columns:86px 1fr; gap:.9rem; padding:.85rem; align-items:start;
}
.mx-card img{ width:86px; height:86px; object-fit:cover; border-radius:8px; background:#f1f3f6; }
.mx-card h4{
  font:700 14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0 0 .35rem; color:#0f172a;
}
.mx-card .mx-price{
  font:900 15px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--mx-primary); margin:.15rem 0;
}
.mx-card .mx-actions{ display:flex; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }
.mx-card a{ text-decoration:none; }
.mx-btn{
  border:0; border-radius:999px; padding:.55rem .8rem; font:800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; cursor:pointer;
}
.mx-buy{ background:var(--mx-accent); color:#fff; }
.mx-link{ color:#334155; text-decoration:underline; font-weight:700; }
.mx-inv{
  color:#475569; font:12px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial; margin-top:.35rem;
}
.mx-inv b{ color:#0b1325; }
.mx-inv .mx-dot{ margin:0 .25rem; opacity:.55; }

/* ---------- Paginación (modo productos) ---------- */
.mx-pagination{
  background:#fff; border-top:1px solid var(--mx-line); padding:.8rem; display:flex; align-items:center; justify-content:space-between;
  font:12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#475569;
}
.mx-pagination-info{ flex:1; text-align:center; }
.mx-pagination-controls{ display:flex; gap:.5rem; width:100%; justify-content:space-between; }
.mx-pagination-btn{
  border:1px solid #d6dde6; background:#fff; border-radius:8px; padding:.5rem .7rem;
  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; cursor:pointer; color:#374151; transition:.15s ease;
  text-transform:uppercase; letter-spacing:.4px;
}
.mx-pagination-btn:hover:not(:disabled){ background:#f8fafc; border-color:#94a3b8; }
.mx-pagination-btn:disabled{ background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }
.mx-pagination-current{ background:var(--mx-primary); color:#fff; border-color:var(--mx-primary); }

/* ---------- “Mi Pedido” ---------- */
.mx-orders{ display:flex; flex-direction:column; gap:.8rem; }
.mx-order{
  background:#fff; border:1px solid #e5eaf0; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.mx-order-hd{
  background:linear-gradient(180deg,#f8fbff,#f3f6fb); padding:.7rem .9rem; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--mx-line);
}
.mx-order-hd .mx-order-title{ font:800 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#0b1325; text-transform:uppercase; }
.mx-chip{
  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; padding:.25rem .55rem; border-radius:999px;
  background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; white-space:nowrap;
}
.mx-order-body{ padding:.7rem .9rem; }
.mx-order-table{
  width:100%; border-collapse:separate; border-spacing:0; font:13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--mx-ink); background:#fff; border:1px solid var(--mx-line); border-radius:10px; overflow:hidden;
}
.mx-order-table th,
.mx-order-table td{ padding:.55rem .65rem; vertical-align:top; }
.mx-order-table th{
  width:42%; font-weight:700; color:#334155; background:#f8fafc; border-bottom:1px solid #eef2f7;
}
.mx-order-table td{ background:#fff; color:var(--mx-ink); border-bottom:1px solid #f1f5f9; }
.mx-order-table tr:last-child th,
.mx-order-table tr:last-child td{ border-bottom:0; }

.mx-kpi{ font-weight:800; }
.mx-muted{ color:var(--mx-muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 380px){
  .mx-order-table th{ width:48%; }
  .mx-fab{ font-size:12px; padding:.6rem .85rem; }
  .mx-pagination{ padding:.6rem; font-size:11px; }
  .mx-pagination-controls{ gap:.3rem; }
}
@media (max-width: 320px){
  .mx-fab{ white-space:normal; line-height:1.1; text-align:left; }
  .mx-fab svg{ align-self:flex-start; margin-top:2px; }
}
@media (max-width: 680px){
  .mx-panel{ left:10px; right:10px; width:auto; bottom:90px; }
  .mx-fab{ left:12px; bottom:12px; }
}