/* Ticopa Hub · r17 (08/11) · módulo 133 · Bienvenida de la primera vez.
   Celular primero (390 px sin desplazamiento horizontal); en computadora la ventana se centra con ancho máximo.
   Oscuro por defecto (el Hub es oscuro); claro con prefers-color-scheme: light o con data-theme="light" en <html>. */
:root {
  --xbv-fondo: rgba(7, 6, 26, .86); --xbv-caja: var(--sup-1, #14123a); --xbv-sup: var(--sup-2, #1d1a4f); --xbv-linea: var(--linea-fuerte, #463f9a);
  --xbv-texto: var(--texto, #f4f3ff); --xbv-suave: var(--suave, #b9b6dd); --xbv-acento: var(--violeta-texto, #b49dff);
  --xbv-fuerte: var(--rojo, #ff2d55); --xbv-sobre-fuerte: var(--tinta, #14031a); --xbv-ok: var(--ok, #20e89b); --xbv-error: #ff8a9d;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --xbv-fondo: rgba(27, 22, 64, .55); --xbv-caja: #ffffff; --xbv-sup: #f4f2ff; --xbv-linea: #cfc8f2;
    --xbv-texto: #1b1640; --xbv-suave: #4d4878; --xbv-acento: #5a2fd6; --xbv-fuerte: #e0103a; --xbv-sobre-fuerte: #ffffff; --xbv-ok: #0a7a52; --xbv-error: #b4123a;
  }
}
:root[data-theme="light"] {
  --xbv-fondo: rgba(27, 22, 64, .55); --xbv-caja: #ffffff; --xbv-sup: #f4f2ff; --xbv-linea: #cfc8f2;
  --xbv-texto: #1b1640; --xbv-suave: #4d4878; --xbv-acento: #5a2fd6; --xbv-fuerte: #e0103a; --xbv-sobre-fuerte: #ffffff; --xbv-ok: #0a7a52; --xbv-error: #b4123a;
}
html.xbv-abierta, html.xbv-abierta body { overflow: hidden; }
.xbv-fondo { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 16px; background: var(--xbv-fondo); box-sizing: border-box; overscroll-behavior: contain; }
.xbv-caja { position: relative; width: min(520px, 100%); margin: auto; padding: 20px 16px 16px; border-radius: var(--r-l, 16px); background: var(--xbv-caja); border: 1px solid var(--xbv-linea); color: var(--xbv-texto); box-sizing: border-box; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.xbv-caja * { box-sizing: border-box; }
.xbv-paso { margin: 0 0 4px; font: 700 13px var(--f-datos, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--xbv-acento); }
.xbv-titulo { padding-right: 44px; margin: 0 0 8px; font: 800 30px/1.05 var(--f-display, sans-serif); text-transform: uppercase; color: var(--xbv-texto); outline: none; overflow-wrap: anywhere; }
.xbv-ayuda { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--xbv-suave); }
.xbv-pregunta { margin: 0 0 10px; font: 700 18px var(--f-datos, sans-serif); color: var(--xbv-texto); }
.xbv-opciones { display: grid; gap: 10px; margin-bottom: 6px; }
.xbv-opcion { display: grid !important; justify-items: start !important; align-content: center; gap: 2px; width: 100%; min-height: 64px; padding: 12px 14px !important; text-align: left !important; border-radius: var(--r-m, 10px); border: 1px solid var(--xbv-linea); background: var(--xbv-sup); color: var(--xbv-texto); font: inherit; cursor: pointer; }
.xbv-opcion strong { font: 800 19px var(--f-datos, sans-serif); }
.xbv-opcion span { font-size: 14px; line-height: 1.35; color: var(--xbv-suave); }
.xbv-opcion:hover, .xbv-opcion:focus-visible { border-color: var(--xbv-acento); }
.xbv-form { display: grid; gap: 12px; }
.xbv-campo { display: grid; gap: 6px; margin: 0 0 12px; font: 600 14px var(--f-datos, sans-serif); color: var(--xbv-suave); }
.xbv-form .xbv-campo { margin: 0; }
.xbv-caja .search-input, .xbv-caja .tel-pais, .xbv-caja .tel-numero { width: 100%; min-height: var(--toque, 44px); font-size: 16px; }
.xbv-tel label { display: grid; gap: 6px; margin: 0 0 10px; font: 600 14px var(--f-datos, sans-serif); color: var(--xbv-suave); }
.xbv-tel .tel-grupo { display: flex; align-items: center; gap: 6px; }
.xbv-tel .tel-error { color: var(--xbv-error); font-size: 13px; min-height: 1em; }
.xbv-check { display: flex; align-items: center; gap: 10px; min-height: var(--toque, 44px); color: var(--xbv-texto); font: 600 15px var(--f-datos, sans-serif); }
.xbv-check input { width: 22px; height: 22px; flex: none; }
.xbv-nota { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--xbv-suave); }
.xbv-estado { min-height: 1.3em; margin: 6px 0 0; font-size: 14px; color: var(--xbv-suave); overflow-wrap: anywhere; }
.xbv-estado.xbv-error { color: var(--xbv-error); font-weight: 600; }
.xbv-hecho { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--r-s, 6px); border-left: 4px solid var(--xbv-ok); background: var(--xbv-sup); font-size: 14px; color: var(--xbv-texto); }
.xbv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque, 44px); padding: 0 18px; border-radius: var(--r-m, 10px); border: 1px solid var(--xbv-linea); background: transparent; color: var(--xbv-texto); font: 700 16px var(--f-datos, sans-serif); cursor: pointer; text-align: center; }
.xbv-btn-fuerte { background: var(--xbv-fuerte); border-color: var(--xbv-fuerte); color: var(--xbv-sobre-fuerte); }
.xbv-btn:disabled { opacity: .55; cursor: not-allowed; }
.xbv-btn:focus-visible, .xbv-opcion:focus-visible, .xbv-enlace:focus-visible { outline: 3px solid var(--xbv-acento); outline-offset: 2px; }
.xbv-nota.xbv-secundaria { margin-top: 12px; font-size: 12px; line-height: 1.4; opacity: .85; }
.xbv-resultados { display: grid; gap: 8px; margin-bottom: 4px; }
.xbv-res { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-m, 10px); border: 1px solid var(--xbv-linea); background: var(--xbv-sup); }
.xbv-res-nombre { min-width: 0; overflow-wrap: anywhere; font: 700 16px var(--f-datos, sans-serif); }
.xbv-res-btn { flex: none; min-height: 40px; padding: 0 12px; font-size: 14px; }
.xbv-nuevo { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-m, 10px); border: 1px dashed var(--xbv-linea); }
.xbv-nuevo-texto { margin: 0; font-size: 15px; line-height: 1.4; color: var(--xbv-texto); overflow-wrap: anywhere; }
.xbv-nuevo .xbv-crear { width: 100%; overflow-wrap: anywhere; }
.xbv-fila-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.xbv-fila-btn .xbv-btn { flex: 1 1 140px; }
.xbv-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--xbv-linea); }
.xbv-pie .xbv-btn { flex: 1 1 150px; }
.xbv-pie .xbv-enlace { flex: 1 1 100%; text-align: center; }
.xbv-pie-final { border-top: 0; padding-top: 0; }
.xbv-enlace { min-height: var(--toque, 44px); padding: 0 6px; border: 0; background: transparent; color: var(--xbv-acento); font: 700 15px var(--f-datos, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.xbv-sec { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-m, 10px); background: var(--xbv-sup); border-left: 4px solid var(--xbv-linea); }
.xbv-sec h3 { margin: 0 0 6px; font: 800 14px var(--f-datos, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--xbv-suave); }
.xbv-sec-ok { border-left-color: var(--xbv-ok); }
.xbv-sec-falta { border-left-color: #f5c542; }
.xbv-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.xbv-lista li { display: grid; gap: 6px; font-size: 15px; line-height: 1.4; color: var(--xbv-texto); overflow-wrap: anywhere; }
.xbv-lista .xbv-btn { justify-self: start; }
.xbv-msg-servidor { padding: 0 2px; }
.xbv-otra { margin: 4px 0 8px; text-align: right; }
.xbv-otra .xbv-enlace { min-height: 36px; font-size: 14px; }
.xbv-caja .xbv-opcion { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center !important; text-align: left !important; }
.xbv-caja .xbv-opcion strong, .xbv-caja .xbv-opcion span { display: block; width: 100%; text-align: left !important; }
.xbv-caja .xbv-titulo:focus, .xbv-caja .xbv-titulo:focus-visible { outline: 0 !important; box-shadow: none !important; }
@media (min-width: 640px) {
  .xbv-fondo { align-items: center; padding: 32px; }
  .xbv-caja { padding: 26px 26px 20px; }
  .xbv-titulo { font-size: 34px; }
  .xbv-pie .xbv-btn { flex: 0 1 auto; }
  .xbv-pie .xbv-enlace { flex: 0 0 auto; margin-left: auto; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .xbv-caja { transition: none; } }

.xbv-x { position: absolute; top: 10px; right: 10px; display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0 !important; border-radius: var(--r-m, 10px); border: 1px solid var(--xbv-linea); background: transparent; color: var(--xbv-texto); font: 700 24px/1 var(--f-datos, sans-serif); cursor: pointer; }
.xbv-x:focus-visible { outline: 3px solid var(--xbv-acento); outline-offset: 2px; }
.xbv-titulo:focus, .xbv-titulo:focus-visible { outline: none !important; }