/* Kyo · Magallanes Cargo — chat v2 */
#mc-kyo-root {
  --mc-navy: #102740;
  --mc-navy-2: #1b3a5c;
  --mc-orange: #f36c24;
  --mc-orange-dark: #c9500f;
  --mc-bg: #f3f5f8;
  --mc-line: #dde4eb;
  --mc-text: #102740;
  --mc-muted: #5a6b7d;
  --mc-wa: #1f9d55;
  position: fixed; right: 20px; bottom: 20px; z-index: 999999;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--mc-text); text-align: left;
}
#mc-kyo-root *, #mc-kyo-root *::before, #mc-kyo-root *::after { box-sizing: border-box; }
#mc-kyo-root [hidden] { display: none !important; }
/* Reset fuerte: aísla el chat de los estilos del tema (Elementor, Astra, etc.) */
/* :where() deja la especificidad en (1,0,0): gana al tema (button:hover) y pierde ante nuestras clases. */
#mc-kyo-root :where(button, button:hover, button:focus, button:active) {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; background-image: none; box-shadow: none; text-shadow: none;
  color: inherit; font: inherit; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none;
  width: auto; height: auto; min-width: 0; min-height: 0; max-width: none;
  transform: none; filter: none; outline: 0; cursor: pointer;
}
#mc-kyo-root button::before, #mc-kyo-root button::after,
#mc-kyo-root a::before, #mc-kyo-root a::after { content: none !important; display: none !important; }
#mc-kyo-root :where(a, a:hover, a:focus) { box-shadow: none; background-image: none; }
#mc-kyo-root :where(input, select) { font: inherit; letter-spacing: normal; text-transform: none; margin: 0; -webkit-appearance: none; appearance: none; }
#mc-kyo-root input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
#mc-kyo-root svg { display: block; flex-shrink: 0; }
#mc-kyo-root button:disabled { opacity: .5; cursor: default; }
#mc-kyo-root p { margin: 0; }
#mc-kyo-root :is(button, a, input, select):focus-visible { outline: 3px solid var(--mc-orange); outline-offset: 2px; }

/* ---------- Launcher */
#mc-kyo-root .mc-launcher {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 4px 18px 4px 4px; min-height: 60px;
  background: var(--mc-navy); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 999px; box-shadow: 0 8px 28px rgba(16, 39, 64, .35);
  border-bottom: 3px solid var(--mc-orange);
  transition: transform .2s ease, box-shadow .2s ease;
}
#mc-kyo-root .mc-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(16, 39, 64, .4); }
#mc-kyo-root .mc-launcher-kyo { width: 52px; height: 52px; border-radius: 50%; background: #fff; object-fit: cover; object-position: top; }
#mc-kyo-root.is-open .mc-launcher { display: none; }

/* ---------- Panel */
#mc-kyo-root .mc-panel {
  width: 390px; height: min(680px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--mc-bg); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(16, 39, 64, .3);
  animation: mc-in .22s ease-out;
}
@keyframes mc-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

#mc-kyo-root .mc-header {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 10px 10px 12px; background: var(--mc-navy); color: #fff;
  border-bottom: 4px solid var(--mc-orange);
}
#mc-kyo-root .mc-avatar { width: 52px; height: 52px; border-radius: 50%; background: #fff; overflow: hidden; flex-shrink: 0; position: relative; }
#mc-kyo-root .mc-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
#mc-kyo-root .mc-avatar::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 11px; height: 11px; border-radius: 50%; background: #3ccf7a; border: 2px solid var(--mc-navy); }
#mc-kyo-root .mc-head-text { min-width: 0; flex: 1; }
#mc-kyo-root .mc-head-text strong { display: block; font-size: 18px; line-height: 1.2; color: #fff; }
#mc-kyo-root .mc-status { display: block; font-size: 12px; color: #c9d6e3; }
#mc-kyo-root .mc-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; transition: background .15s; }
#mc-kyo-root .mc-close:hover, #mc-kyo-root .mc-close:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Aviso */
#mc-kyo-root .mc-notice {
  display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0;
  padding: 9px 8px 9px 12px; background: #fff4e5; border-bottom: 1px solid #f7d9b5;
  font-size: 13px; color: #6b3a0c;
}
#mc-kyo-root .mc-notice-body { flex: 1; display: grid; gap: 4px; }
#mc-kyo-root .mc-notice-line { display: flex; gap: 7px; align-items: flex-start; }
#mc-kyo-root .mc-notice-icon { flex-shrink: 0; }
#mc-kyo-root .mc-notice-close { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #6b3a0c; flex-shrink: 0; transition: background .15s; }
#mc-kyo-root .mc-notice-close:hover { background: rgba(107, 58, 12, .12); color: #6b3a0c; }

/* ---------- Conversación */
#mc-kyo-root .mc-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 8px; }
#mc-kyo-root .mc-hero { align-self: center; margin: 4px 0 -4px; }
#mc-kyo-root .mc-hero-img { height: 118px; width: auto; display: block; animation: mc-pop .4s ease-out; }
@keyframes mc-pop { from { transform: scale(.85); opacity: 0; } }

#mc-kyo-root .mc-msg { max-width: 88%; animation: mc-msg .2s ease-out; }
@keyframes mc-msg { from { opacity: 0; transform: translateY(6px); } }
#mc-kyo-root .mc-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 14.5px; }
#mc-kyo-root .mc-bot { align-self: flex-start; }
#mc-kyo-root .mc-bot > .mc-text { background: #fff; border: 1px solid var(--mc-line); padding: 10px 13px; border-radius: 4px 16px 16px 16px; }
#mc-kyo-root .mc-user { align-self: flex-end; }
#mc-kyo-root .mc-user > .mc-text { background: var(--mc-navy); color: #fff; padding: 10px 13px; border-radius: 16px 4px 16px 16px; }

#mc-kyo-root .mc-typing { display: flex; gap: 4px; background: #fff; border: 1px solid var(--mc-line); padding: 13px 15px; border-radius: 4px 16px 16px 16px; }
#mc-kyo-root .mc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mc-muted); animation: mc-dot 1s infinite ease-in-out; }
#mc-kyo-root .mc-typing span:nth-child(2) { animation-delay: .15s; }
#mc-kyo-root .mc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mc-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Botones de acción dentro de mensajes */
#mc-kyo-root .mc-actions, #mc-kyo-root .mc-form-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#mc-kyo-root .mc-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px;
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  background: #fff; color: var(--mc-navy); border: 1.5px solid var(--mc-navy);
}
#mc-kyo-root .mc-action:hover { background: #eaf0f6; color: var(--mc-navy); border: 1.5px solid var(--mc-navy); }
#mc-kyo-root .mc-action-primary { background: var(--mc-orange); border-color: var(--mc-orange); color: #fff; }
#mc-kyo-root .mc-action-primary:hover { background: var(--mc-orange-dark); border-color: var(--mc-orange-dark); color: #fff; }
#mc-kyo-root .mc-action-wa { background: var(--mc-wa); border-color: var(--mc-wa); color: #fff; }
#mc-kyo-root .mc-action-wa:hover { background: #17804a; border-color: #17804a; color: #fff; }
#mc-kyo-root .mc-action-ghost { border-color: transparent; color: var(--mc-muted); }

/* Tarjetas de sucursal */
#mc-kyo-root .mc-card { background: #fff; border: 1px solid var(--mc-line); border-left: 4px solid var(--mc-orange); border-radius: 12px; padding: 10px 12px; margin-top: 7px; font-size: 13.5px; }
#mc-kyo-root .mc-card-title { display: block; font-size: 14.5px; margin-bottom: 2px; }
#mc-kyo-root .mc-muted { color: var(--mc-muted); }
#mc-kyo-root .mc-card-actions { display: flex; gap: 14px; margin-top: 6px; }
#mc-kyo-root .mc-card-link { color: var(--mc-orange-dark); font-weight: 650; font-size: 13px; text-decoration: none; }
#mc-kyo-root .mc-card-link:hover { text-decoration: underline; }

#mc-kyo-root .mc-city-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#mc-kyo-root .mc-city { background: #fff; border: 1px solid var(--mc-line); color: var(--mc-navy); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-weight: 600; min-height: 32px; }
#mc-kyo-root .mc-city:hover { border: 1px solid var(--mc-orange); background: #fff4ec; color: var(--mc-navy); }

/* ---------- Atajos */
#mc-kyo-root .mc-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px; flex-shrink: 0; border-top: 1px solid var(--mc-line); background: var(--mc-bg); }
#mc-kyo-root .mc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px; border-radius: 12px; background: #fff; border: 1px solid var(--mc-line); color: var(--mc-navy); transition: border-color .15s, background .15s; }
#mc-kyo-root .mc-tile:hover { background: #fff4ec; border: 1px solid var(--mc-orange); color: var(--mc-navy); }
#mc-kyo-root .mc-tile-icon { font-size: 18px; line-height: 1; }
#mc-kyo-root .mc-tile-label { font-size: 11.5px; font-weight: 650; line-height: 1.1; white-space: nowrap; }
#mc-kyo-root .mc-chip { flex-shrink: 0; white-space: nowrap; background: #fff; color: var(--mc-navy); border: 1px solid var(--mc-line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; min-height: 34px; }
#mc-kyo-root .mc-chip:hover { border-color: var(--mc-orange); background: #fff4ec; }

/* ---------- Composer */
#mc-kyo-root .mc-composer { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: #fff; border-top: 1px solid var(--mc-line); margin: 0; }
#mc-kyo-root .mc-composer input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid #cdd7e1; border-radius: 999px; background: var(--mc-bg); color: var(--mc-text); box-shadow: none; font-size: 15px; }
#mc-kyo-root .mc-composer input:focus { background: #fff; border-color: var(--mc-navy-2); outline: none; }
#mc-kyo-root .mc-send { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mc-orange); color: #fff; flex-shrink: 0; transition: background .15s; }
#mc-kyo-root .mc-send:hover { background: var(--mc-orange-dark); color: #fff; }
#mc-kyo-root .mc-send svg { margin-left: 2px; }
#mc-kyo-root .mc-foot { background: #fff; color: var(--mc-muted); font-size: 11px; text-align: center; padding: 0 14px 9px; }
#mc-kyo-root .mc-foot-link { color: var(--mc-muted); text-decoration: underline; }

/* ---------- Formulario de cotización */
#mc-kyo-root .mc-quote { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 14px; margin: 2px 0 8px; }
#mc-kyo-root .mc-steps { display: flex; gap: 5px; margin-bottom: 10px; }
#mc-kyo-root .mc-steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--mc-line); }
#mc-kyo-root .mc-steps span.is-done { background: var(--mc-orange); }
#mc-kyo-root .mc-quote h3 { font-size: 16px; margin: 0 0 12px; color: var(--mc-navy); line-height: 1.3; }
#mc-kyo-root .mc-field { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 10px; }
#mc-kyo-root .mc-field input, #mc-kyo-root .mc-field select { display: block; width: 100%; margin-top: 4px; min-height: 42px; padding: 8px 11px; border: 1px solid #c7d2dd; border-radius: 10px; background: #fff; color: var(--mc-text); font-size: 14.5px; box-shadow: none; }
#mc-kyo-root .mc-field input:focus, #mc-kyo-root .mc-field select:focus { border-color: var(--mc-navy-2); outline: none; box-shadow: 0 0 0 3px rgba(243, 108, 36, .2); }
#mc-kyo-root .mc-error { font-size: 13px; color: #a22722; margin: 6px 0; }
#mc-kyo-root .mc-error:empty { display: none; }
#mc-kyo-root .mc-summary { margin: 0 0 12px; font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
#mc-kyo-root .mc-summary dt { color: var(--mc-muted); }
#mc-kyo-root .mc-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
#mc-kyo-root .mc-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; margin-bottom: 6px; }
#mc-kyo-root .mc-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--mc-orange); }
#mc-kyo-root .mc-help { display: block; color: var(--mc-muted); font-size: 11.5px; margin-top: 6px; }
#mc-kyo-root .mc-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---------- Móvil */
@media (max-width: 480px) {
  #mc-kyo-root { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  #mc-kyo-root.is-open { right: 0; bottom: 0; left: 0; top: 0; }
  #mc-kyo-root .mc-panel { width: 100vw; height: 100dvh; border-radius: 0; }
  #mc-kyo-root .mc-composer input, #mc-kyo-root .mc-field input, #mc-kyo-root .mc-field select { font-size: 16px; }
  #mc-kyo-root .mc-launcher-label { display: none; }
  #mc-kyo-root .mc-launcher { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #mc-kyo-root * { animation: none !important; transition: none !important; }
}

/* ---------- Feriados */
#mc-kyo-root .mc-badge { margin-top: 6px; padding: 5px 8px; border-radius: 8px; background: #fff4e5; color: #6b3a0c; font-size: 12.5px; font-weight: 600; }
#mc-kyo-root .mc-badge.is-closed { background: #fdecec; color: #9b1c1c; }
#mc-kyo-root .mc-card-hol { border-left-color: var(--mc-navy); padding: 4px 12px; }
#mc-kyo-root .mc-hol-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 0; border-bottom: 1px solid var(--mc-line); }
#mc-kyo-root .mc-hol-row:last-child { border-bottom: 0; }
#mc-kyo-root .mc-hol-date { font-weight: 700; font-size: 13px; }
#mc-kyo-root .mc-hol-name { grid-column: 1; color: var(--mc-muted); font-size: 12.5px; }
#mc-kyo-root .mc-hol-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #fff4e5; color: #6b3a0c; }
#mc-kyo-root .mc-hol-row.is-closed .mc-hol-tag { background: #fdecec; color: #9b1c1c; }
