/*
 * mb.css — estilos PROPIOS de metabot web2 (Inc.5, filosofía JS mínimo).
 * Solo lo NUESTRO (no toca el diseño heredado styles.css): modal <dialog> nativo, toasts,
 * captcha, honeypot, y overrides para que funcionen SIN el app.js del CMS (reveal, faq, idioma).
 */

/* ── Guard de reveal: sin JS el contenido se ve SIEMPRE (no queda en opacity:0). Con JS,
   html.js mantiene el opacity:0 de styles.css y el IntersectionObserver añade .is-visible. ── */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* ── Idioma: abrir el menú por foco/hover (antes lo hacía app.js con .is-open). ── */
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* ── FAQ por CSS puro (radio + :checked), sin JS. El panel activo se muestra por el radio. ── */
.faq-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }
.faq-cats input { position: absolute; opacity: 0; pointer-events: none; }
.faq-cats label { cursor: pointer; }
.faq-panel { display: none; }
/* Cada radio activa su panel hermano correspondiente (orden fijo 1..3). */
#faqc1:checked ~ .faq-panels #faqp1,
#faqc2:checked ~ .faq-panels #faqp2,
#faqc3:checked ~ .faq-panels #faqp3 { display: block; }
#faqc1:checked ~ .faq-cats label[for="faqc1"] .faq-category-pill,
#faqc2:checked ~ .faq-cats label[for="faqc2"] .faq-category-pill,
#faqc3:checked ~ .faq-cats label[for="faqc3"] .faq-category-pill { color: #eaf7ff; }

/* ── Modal de autenticación: <dialog> nativo (backdrop/ESC/focus-trap GRATIS, 0 JS). ── */
/* margin:auto RE-CENTRA el <dialog> modal: el reset global del CSS heredado (*{margin:0})
   mata el margin:auto por defecto del user-agent y el modal se pegaba arriba-izquierda. */
.mb-dialog { width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 40px); margin: auto; padding: 0; border: 0;
  background: transparent; overflow: visible; color: #eef7ff; }
.mb-dialog::backdrop { background: rgba(3, 8, 18, .66); backdrop-filter: blur(4px); }
.mb-dialog__panel { position: relative; border-radius: 20px; padding: 26px 24px 30px; overflow-y: auto; max-height: calc(100vh - 40px);
  background: linear-gradient(180deg, rgba(10,22,40,.96), rgba(6,15,28,.98)); border: 1px solid rgba(20,233,255,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(20,233,255,.06); }
.mb-dialog__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #cfe8ff; font-size: 20px; line-height: 1;
  cursor: pointer; transition: all .2s ease; }
.mb-dialog__close:hover { background: rgba(255,86,86,.18); border-color: rgba(255,86,86,.5); color: #fff; }
.mb-dialog .login-head { text-align: center; margin-bottom: 18px; }
.mb-dialog .login-head .modal-logo { height: 40px; margin-bottom: 10px; }
.mb-dialog .login-head h1, .mb-dialog .login-head h2 { margin: 0 0 6px; font-size: 1.5rem; }
.mb-dialog .login-head p { margin: 0; color: rgba(207,232,255,.7); font-size: .92rem; }
.mb-auth-cargando { text-align: center; padding: 40px 0; color: rgba(207,232,255,.7); }

/* ── Toasts propios: ARRIBA-CENTRO, grandes, fondo por tipo. Se dibujan como POPOVER en la
   top layer (por eso se superponen al <dialog> modal). Autocierre por animación. ── */
.mb-toast-stack { display: flex; flex-direction: column; gap: 10px; }
/* Como popover: quitar estilos por defecto del UA y anclar arriba-centro. */
.mb-toast-stack[popover] { position: fixed; inset: unset; top: 18px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
  width: min(560px, calc(100vw - 24px)); max-height: none; }
.mb-toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden;
  padding: 16px 20px; border-radius: 16px; color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.14);
  animation: mbToastIn .3s cubic-bezier(.2,.9,.3,1), mbToastOut .45s ease 4.8s forwards; }
/* Fondos por tipo (rojo error / verde-cian acierto), como pidió el owner. */
.mb-toast--error { background: linear-gradient(180deg, #b3222f, #7d1620); border-color: rgba(255,120,120,.5); }
.mb-toast--ok { background: linear-gradient(180deg, #0f7d6b, #0b5e57); border-color: rgba(20,233,255,.45); }
.mb-toast--info { background: linear-gradient(180deg, #1c58b0, #143e7f); border-color: rgba(84,165,255,.5); }
.mb-toast__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; font: 800 17px/1 Arial, sans-serif; background: rgba(255,255,255,.16); }
.mb-toast__msg { font: 700 16px/1.35 Arial, sans-serif; letter-spacing: .005em; }
.mb-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left;
  background: rgba(255,255,255,.6); animation: mbToastBar 5s linear forwards; }
@keyframes mbToastIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mbToastOut { to { opacity: 0; transform: translateY(-14px); } }
@keyframes mbToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) { .mb-toast-stack[popover] { top: 12px; width: calc(100vw - 20px); } .mb-toast__msg { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .mb-toast { animation: none; } .mb-toast__bar { display: none; } }

/* ── Captcha ALTCHA propio (mb-altcha) — tema oscuro. ── */
.mb-altcha { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px;
  background: rgba(3,7,14,.72); border: 1px solid rgba(255,255,255,.10); color: #dff2ff; cursor: pointer; user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease; min-height: 56px; }
.mb-altcha:hover { border-color: rgba(20,233,255,.35); }
.mb-altcha__box { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255,255,255,.28);
  display: inline-flex; align-items: center; justify-content: center; position: relative; transition: all .2s ease; background: rgba(255,255,255,.02); }
.mb-altcha__box::after { content: ""; width: 9px; height: 16px; border: solid #03111e; border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); opacity: 0; transition: transform .18s ease, opacity .18s ease; margin-top: -3px; }
.mb-altcha__status { font: 600 14px/1.2 Arial, sans-serif; color: #cfe8ff; }
.mb-altcha__badge { margin-left: auto; font: 700 10px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(207,232,255,.55); }
.mb-altcha.is-solving .mb-altcha__box { border-color: rgba(20,233,255,.6); border-top-color: #14e9ff; border-radius: 999px; animation: mbSpin .8s linear infinite; }
.mb-altcha.is-solved { border-color: rgba(20,233,255,.45); box-shadow: 0 0 0 1px rgba(20,233,255,.12), 0 0 22px rgba(20,233,255,.10); cursor: default; }
.mb-altcha.is-solved .mb-altcha__box { background: linear-gradient(135deg, #14e9ff, #54a5ff); border-color: transparent; }
.mb-altcha.is-solved .mb-altcha__box::after { transform: rotate(45deg) scale(1); opacity: 1; }
.mb-altcha.is-solved .mb-altcha__status { color: #8ff3ff; }
.mb-altcha.is-error { border-color: rgba(255,86,86,.5); }
.mb-altcha.is-error .mb-altcha__box { border-color: #ff5656; }
.mb-altcha.is-error .mb-altcha__status { color: #ff9a9a; }
@keyframes mbSpin { to { transform: rotate(360deg); } }

/* ── Honeypot: fuera de pantalla (humano no lo ve). ── */
.mb-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Alerta inline dentro del form (fallback sin JS del toast). ── */
.auth-alert { padding: 12px 14px; border-radius: 12px; background: rgba(255,86,86,.10); border: 1px solid rgba(255,86,86,.35);
  color: #ffb3b3; font: 600 14px/1.4 Arial, sans-serif; }
.auth-swap { text-align: center; margin: 4px 0 0; color: rgba(207,232,255,.75); font-size: .9rem; }
.auth-swap a { color: #14e9ff; }

/* ══════════════════════════════════════════════════════════════════════════
   TICKETS de soporte (web2): panel de éxito de contacto + timeline del hilo.
   ══════════════════════════════════════════════════════════════════════════ */

/* Botón metabot reutilizable (tamaño contenido, NO full-width como .submit-btn). */
.mb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px;
  font: 700 14px/1 Arial, sans-serif; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.mb-btn:hover { transform: translateY(-1px); }
.mb-btn--primary { background: linear-gradient(135deg, #14e9ff, #54a5ff); color: #06111f;
  box-shadow: 0 8px 22px rgba(20,233,255,.18); }
.mb-btn--ghost { background: transparent; color: #cfe8ff; border-color: rgba(207,232,255,.28); }
.mb-btn--ghost:hover { border-color: rgba(20,233,255,.5); color: #8ff3ff; }
.mb-btn--sm { padding: 8px 14px; font-size: 13px; }

/* Panel de éxito del formulario de contacto: separar el botón del texto. */
.contact-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.contact-ok__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(20,233,255,.14); color: #8ff3ff; font-size: 22px; margin-bottom: 6px; }
.contact-ok__ref { margin: 8px 0 18px; color: rgba(207,232,255,.85); }
.contact-ok__ref code { background: rgba(20,233,255,.12); padding: 3px 8px; border-radius: 8px; color: #8ff3ff;
  font-family: "SFMono-Regular", Consolas, monospace; }
.contact-ok .mb-btn { margin-top: 6px; }

/* ── Hilo del ticket (timeline vertical) ─────────────────────────────────── */
.ticket-head { border-bottom: 1px solid rgba(207,232,255,.12); padding-bottom: 14px; margin-bottom: 20px; }
.ticket-head h1 { margin: 8px 0 6px; font-size: 1.5rem; }
.ticket-ref { color: rgba(207,232,255,.7); font-size: .9rem; margin: 0; }
.ticket-ref code, .ticket-msg__meta code { background: rgba(20,233,255,.10); padding: 2px 7px; border-radius: 7px;
  color: #8ff3ff; font-family: "SFMono-Regular", Consolas, monospace; }

/* Badge de estado (colores por estado). */
.ticket-state { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 12px/1 Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; }
.ticket-state--abierto, .ticket-state--re-abierto { background: rgba(255,196,0,.14); color: #ffd979; border: 1px solid rgba(255,196,0,.35); }
.ticket-state--cerrado { background: rgba(120,220,140,.14); color: #9be8ab; border: 1px solid rgba(120,220,140,.35); }

/* Lista del hilo como línea de tiempo (borde izquierdo + puntos). */
.ticket-messages { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.ticket-messages::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: rgba(207,232,255,.14); }
.ticket-msg { position: relative; margin: 0 0 18px; }
.ticket-msg::before { content: ""; position: absolute; left: -26px; top: 4px; width: 14px; height: 14px;
  border-radius: 999px; border: 2px solid #06111f; }
.ticket-msg--consulta::before { background: #54a5ff; }   /* punto azul = el cliente */
.ticket-msg--respuesta::before { background: #14e9ff; }  /* punto cyan = soporte */

.ticket-msg__meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.ticket-msg__who { font: 700 13px/1 Arial, sans-serif; }
.ticket-msg--consulta .ticket-msg__who { color: #9cc7ff; }
.ticket-msg--respuesta .ticket-msg__who { color: #8ff3ff; }
.ticket-msg__date { font-size: 12px; color: rgba(207,232,255,.55); }
.ticket-msg__body { white-space: pre-wrap; word-break: break-word; line-height: 1.55;
  background: rgba(255,255,255,.03); border: 1px solid rgba(207,232,255,.10); border-radius: 12px; padding: 12px 14px; }
.ticket-msg--respuesta .ticket-msg__body { background: rgba(20,233,255,.06); border-color: rgba(20,233,255,.18); }

/* Bloque para continuar / reabrir el hilo. */
.ticket-reply { margin-top: 26px; border-top: 1px solid rgba(207,232,255,.12); padding-top: 20px; }
.ticket-reply h3 { margin: 0 0 12px; font-size: 1.05rem; }
.ticket-reply textarea { width: 100%; }
.ticket-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.ticket-otra { color: rgba(207,232,255,.75); font-size: .9rem; }
.ticket-otra a { color: #14e9ff; }

/* ── Aviso de éxito inline (verde) — confirmaciones (p.ej. respuesta añadida). ── */
.auth-ok { padding: 12px 14px; border-radius: 12px; background: rgba(120,220,140,.10); border: 1px solid rgba(120,220,140,.35);
  color: #b6efc3; font: 600 14px/1.4 Arial, sans-serif; }

/* Desplegable "Responder" pegado a la respuesta del soporte (aparece al pulsar). */
.ticket-reply-slot { list-style: none; margin: 2px 0 20px; }
.ticket-reply-slot::before { display: none !important; }
.ticket-reply-det > summary { list-style: none; display: inline-flex; align-items: center; }
.ticket-reply-det > summary::-webkit-details-marker { display: none; }
.ticket-reply-det > summary::marker { content: ""; }
.ticket-reply-det[open] > summary { margin-bottom: 12px; }
.ticket-reply-form textarea { width: 100%; margin-bottom: 10px; }
.ticket-espera { color: rgba(207,232,255,.72); font-style: italic; margin: 10px 0 4px; }

/* Estado del ticket público (cabecera del hilo): pendiente/respondido/cerrado. */
.ticket-state--pendiente, .ticket-state--abierto, .ticket-state--re-abierto { background: rgba(255,196,0,.14); color: #ffd979; border: 1px solid rgba(255,196,0,.35); }
.ticket-state--respondido { background: rgba(20,233,255,.14); color: #8ff3ff; border: 1px solid rgba(20,233,255,.35); }

/* ── Toggle de tema (claro/oscuro) del topbar ──────────────────────────────────
   Botón-icono cuadrado. En OSCURO (base) muestra el SOL (acción: ir a claro); en
   claro el CSS de tema-claro.css muestra la LUNA. Estilos base = tema oscuro; el
   claro los sobrescribe en tema-claro.css. */
.tema-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(3,7,14,.55); color: #cfe8ff;
  transition: border-color .2s ease, color .2s ease, background .2s ease; }
.tema-toggle:hover { border-color: rgba(20,233,255,.5); color: #8ff3ff; }
.tema-toggle .tema-ic { width: 18px; height: 18px; display: block; }
.tema-toggle .tema-ic-luna { display: none; }
html[data-tema="claro"] .tema-toggle .tema-ic-sol { display: none; }
html[data-tema="claro"] .tema-toggle .tema-ic-luna { display: block; }