/* El monitor conserva su propia región y reutiliza los tokens de Novi. */
:root { --conexion-bien: #047857; --conexion-atencion: #925200; --conexion-error: var(--danger); }
:root[data-theme="oscuro"] { --conexion-bien: #6ee7b7; --conexion-atencion: #f6c36b; --conexion-error: #ff9b9b; }
.conexionLectura { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.conexionTopbar { grid-column: 1 / -1; min-width: 0; margin-top: -6px; }
.loginPanel .conexionAccesoAccion { min-width: 44px; min-height: 44px; }
.conexionIndicador { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; max-width: 100%; border: 0; border-radius: var(--radius-sm); padding: 4px 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.conexionIndicador [data-conexion-etiqueta] { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.conexionIndicador [data-conexion-etiqueta], .conexionIndicador .conexionSimbolo { color: inherit; }
.conexionSimbolo { flex: 0 0 auto; font-size: 12px; }
.conexionIndicador[data-estado="estable"], .conexionIndicador[data-estado="recuperada"] { color: var(--conexion-bien); }
.conexionIndicador[data-estado="lenta"] { color: var(--conexion-atencion); }
.conexionIndicador[data-estado="inaccesible"], .conexionIndicador[data-estado="servicio"] { color: var(--conexion-error); }
.conexionIndicador:hover { background: var(--surface2); }
.conexionIndicador:focus-visible, .conexionAviso button:focus-visible, .versionAviso button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.conexionIndicador[aria-busy="true"] .conexionSimbolo { animation: conexionPulso 1s ease-in-out infinite alternate; }
.conexionAviso { position: fixed; right: 12px; bottom: calc(var(--conexion-base, 80px) + env(safe-area-inset-bottom, 0px)); z-index: 11002; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: min(calc(100vw - 24px), 430px); max-height: calc(100dvh - var(--conexion-base, 80px) - 24px); overflow-y: auto; padding: 14px; border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); font-size: 13px; overflow-wrap: anywhere; }
.conexionAviso[hidden], .conexionAviso [hidden] { display: none; }
.conexionAviso[data-estado="lenta"] { border-left-color: #b76b00; }
.conexionAviso[data-estado="servicio"] { border-left-style: double; border-left-width: 6px; }
.conexionAviso[data-estado="recuperada"] { border-left-color: var(--success); }
.conexionAviso strong { display: block; font-size: 15px; line-height: 1.35; }
.conexionAviso p { margin: 5px 0 0; color: var(--muted); }
.conexionAvisoAcciones { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.conexionAviso button { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; background: var(--surface2); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.conexionAviso .conexionComprobar { background: var(--primary); border-color: var(--primary); color: #fff; }
.conexionAviso .conexionComprobar:disabled { cursor: default; opacity: .75; }
.conexionAviso .conexionComprobar.comprobando { background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .16), transparent); background-size: 200% 100%; animation: conexionProgreso 1.2s linear infinite; }
.conexionAviso .conexionDetalleAccion { border: 0; background: transparent; color: var(--muted); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.conexionAviso #conexionDetalle { font-size: 12px; }
/* Conexión va primero desde el borde inferior; versión conserva un espacio propio. */
#versionAviso { bottom: calc(var(--conexion-base, 80px) + var(--conexion-alto, 0px) + 12px + env(safe-area-inset-bottom, 0px)); right: 12px; z-index: 11002; max-height: calc(100dvh - var(--conexion-base, 80px) - var(--conexion-alto, 0px) - 36px); overflow-y: auto; }
body.conexionPilaVisible, body.conexionPilaVisible:has(#membresiaWorkspace) { --smartTribeSupportTriggerOffsetY: calc(var(--conexion-soporte-bottom, 20px) + env(safe-area-inset-bottom, 0px)); }
body.conexionPilaVisible .workspace { padding-bottom: calc(var(--conexion-base, 80px) + var(--conexion-pila, 0px) + 12px); }
body.conexionPilaVisible #view { scroll-padding-bottom: 16px; }
@media (min-width: 901px) { body.conexionPilaVisible .ticket, body.conexionPilaVisible .saleProducts { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
body.conexionPilaVisible .loginScreen { height: 100%; min-height: 0; align-content: start; padding-bottom: calc(var(--conexion-base, 80px) + var(--conexion-pila, 0px) + 12px); overflow-y: auto; }
body.conexionPilaVisible .loginSplit, body.conexionPilaVisible .loginScreen > .loginPanel { max-height: calc(100dvh - var(--conexion-base, 80px) - var(--conexion-pila, 0px) - 32px); min-height: 0; overflow-y: auto; }
/* El panel de Soporte usa su API pública; sus archivos vendorizados permanecen intactos. */
body.support-widget-open, body.support-widget-reminder-open { --smartTribeSupportPanelTop: calc(var(--conexion-pila, 0px) + 24px); }
/* El release móvil usa inset:0; el adaptador conserva también allí su offset público. */
body.conexionPilaVisible.support-widget-open .support-widget-panel { top: var(--smartTribeSupportPanelTop); }
body.conexionPilaVisible.support-widget-reminder-open .support-widget-reminder-panel { margin-top: calc(var(--conexion-pila, 0px) + 24px); max-height: calc(100dvh - var(--conexion-pila, 0px) - 40px); overflow-y: auto; }
body.support-widget-open .conexionAviso, body.support-widget-reminder-open .conexionAviso { top: 12px; bottom: auto; max-height: calc(100dvh - 120px); }
body.support-widget-open #versionAviso, body.support-widget-reminder-open #versionAviso { top: calc(var(--conexion-alto, 0px) + 24px); bottom: auto; }
/* Con teclado, título y acción quedan en una banda sobre el viewport visual. */
body.conexionTeclado .conexionAviso { top: calc(var(--conexion-viewport-top, 0px) + 8px); bottom: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 12px; gap: 8px; max-height: 96px; }
body.conexionTeclado .conexionAvisoContenido > p, body.conexionTeclado .conexionDetalleAccion, body.conexionTeclado .conexionMinimizar { display: none; }
body.conexionTeclado .conexionAviso strong { font-size: 13px; }
body.conexionTeclado #versionAviso { top: calc(var(--conexion-viewport-top, 0px) + var(--conexion-alto, 0px) + 16px); bottom: auto; padding: 8px 12px; grid-template-columns: minmax(0, 1fr) auto; }
body.conexionTeclado #versionAviso span { display: none; }
@media (max-width: 640px) {
    .conexionAviso { left: 12px; right: 12px; width: auto; }
    .conexionTopbar { margin-top: -5px; }
    .conexionTopbar .conexionIndicador { padding-left: 0; }
    .conexionAvisoAcciones .conexionComprobar { flex: 1; }
    body.conexionTeclado .conexionAvisoAcciones { flex-wrap: nowrap; }
}
@keyframes conexionPulso { to { opacity: .35; } }
@keyframes conexionProgreso { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .conexionIndicador[aria-busy="true"] .conexionSimbolo, .conexionAviso .conexionComprobar.comprobando { animation: none; } }