/* Tema Material en teléfono (etapa 8). Se carga solo hasta 768 px y se activa por página: body.tg-movil = página completa; body.tg-movil-modales = solo modales y switches (páginas cuya pantalla aún no se migra). Colores siempre por variables --tg-* de tema-google.css. */ /* ---------- página ---------- */ html body.tg-movil, html.night body.tg-movil { background: var(--tg-fondo) !important; color: var(--tg-texto); font-family: Roboto, Arial, sans-serif; } html body.tg-movil #main-content, html.night body.tg-movil #main-content { background: none; color: var(--tg-texto); } html body.tg-movil #main-content > h1, html.night body.tg-movil #main-content > h1 { margin: 4px 0 14px; color: var(--tg-texto); font-size: 24px; font-weight: 400; } body.tg-movil #main-content > h1 img { display: none; } /* ---------- barra inferior: misma posición y funciones ---------- */ html body.tg-movil #bottom-bar, html.night body.tg-movil #bottom-bar { border-top: 1px solid var(--tg-linea); background: var(--tg-hoja); box-shadow: none; } html body.tg-movil #bottom-bar a.active, html.night body.tg-movil #bottom-bar a.active { background: var(--tg-activo); box-shadow: none; } html body.tg-movil #bottom-bar #btnHomeMobile img { content: url("/static/images/md/home_fill.svg"); filter: none; } html.night body.tg-movil #bottom-bar #btnHomeMobile img { filter: invert(1); } html body.tg-movil #bottom-bar input[type=text], html.night body.tg-movil #bottom-bar input[type=text] { border: 0; border-radius: 999px; background: var(--tg-campo); box-shadow: none; color: var(--tg-texto); font-family: Roboto, Arial, sans-serif; } html body.tg-movil #bottom-bar input::placeholder { color: var(--tg-texto-2); opacity: 1; } html body.tg-movil:not(#tgNada) .bottom-bar-send-btn, html.night body.tg-movil:not(#tgNada) .bottom-bar-send-btn { border: 0; border-radius: 999px; background: var(--tg-primario) !important; background-image: none !important; box-shadow: none; color: var(--tg-hoja) !important; font: 500 14px Roboto, Arial, sans-serif; } /* ---------- skeletons ---------- */ @keyframes tg-sk-m { from { background-position: 100% 0; } to { background-position: 0 0; } } body.tg-movil { --tg-sk-a: #eceef1; --tg-sk-b: #f7f8f9; } html.night body.tg-movil { --tg-sk-a: #26282b; --tg-sk-b: #34373b; } html body.tg-movil .skeleton-block, html.night body.tg-movil .skeleton-block, html body.tg-movil .skeleton-line, html.night body.tg-movil .skeleton-line, html body.tg-movil .sk, html.night body.tg-movil .sk { background: linear-gradient(90deg, var(--tg-sk-a) 25%, var(--tg-sk-b) 50%, var(--tg-sk-a) 75%) !important; background-size: 300% 100% !important; animation: tg-sk-m 1.5s linear infinite !important; } /* ---------- Enviador MQTT ---------- */ html body.tg-mqtt.tg-movil:not(#tgNada) .pre-placeholder, html.night body.tg-mqtt.tg-movil:not(#tgNada) .pre-placeholder, html body.tg-mqtt.tg-movil:not(#tgNada) .skeleton-respuesta, html.night body.tg-mqtt.tg-movil:not(#tgNada) .skeleton-respuesta, html body.tg-mqtt.tg-movil:not(#tgNada) .acks-card, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-card, html body.tg-mqtt.tg-movil:not(#tgNada) #respuestaMqtt pre, html.night body.tg-mqtt.tg-movil:not(#tgNada) #respuestaMqtt pre { margin-top: 12px; border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-mqtt.tg-movil:not(#tgNada) .pre-placeholder, html.night body.tg-mqtt.tg-movil:not(#tgNada) .pre-placeholder { height: auto; min-height: 50vh; gap: 10px; color: var(--tg-texto-2); } html body.tg-mqtt.tg-movil:not(#tgNada) .pre-placeholder p, html.night body.tg-mqtt.tg-movil:not(#tgNada) .pre-placeholder p { color: var(--tg-texto-2); font-size: 14px; } body.tg-mqtt.tg-movil .pre-placeholder img { display: none; } body.tg-mqtt.tg-movil .pre-placeholder::before { content: "keyboard"; display: inline-block; width: 48px; height: 48px; overflow: hidden; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 48px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } html body.tg-mqtt.tg-movil:not(#tgNada) #respuestaMqtt pre { padding: 14px; font: 12px/1.5 ui-monospace, Consolas, monospace; } html body.tg-mqtt.tg-movil:not(#tgNada) .acks-cab h2, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-cab h2 { color: var(--tg-texto); font-weight: 500; } html body.tg-mqtt.tg-movil:not(#tgNada) .acks-cuenta, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-cuenta, html body.tg-mqtt.tg-movil:not(#tgNada) .acks-tabla th, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-tabla th { color: var(--tg-texto-2); } html body.tg-mqtt.tg-movil:not(#tgNada) .acks-tabla th, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-tabla th, html body.tg-mqtt.tg-movil:not(#tgNada) .acks-tabla td, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-tabla td { border-bottom: 1px solid var(--tg-linea); } html body.tg-mqtt.tg-movil:not(#tgNada) .acks-estado.ok, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-estado.ok { background: var(--tg-ok); color: var(--tg-ok-texto); } html body.tg-mqtt.tg-movil:not(#tgNada) .acks-estado.sin, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-estado.sin { background: var(--tg-error); color: var(--tg-error-texto); } html body.tg-mqtt.tg-movil:not(#tgNada) .acks-estado.espera, html.night body.tg-mqtt.tg-movil:not(#tgNada) .acks-estado.espera { background: var(--tg-hover); color: var(--tg-texto-2); } /* ---------- modales: hoja que sube desde abajo (los diálogos cortos y el login quedan centrados) ---------- */ @keyframes tg-hoja-sube { from { transform: translateY(100%); } to { transform: none; } } @keyframes tg-hoja-baja { from { transform: translateY(var(--tg-hoja-desde, 0)); } to { transform: translateY(100%); } } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) { background: rgba(0, 0, 0, .42); backdrop-filter: none; } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin):not(#tgNada) { align-items: flex-end; } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) > .modal-content, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) > .modal-content { box-sizing: border-box; border: 0; background: var(--tg-hoja); backdrop-filter: none; box-shadow: var(--tg-sombra); color: var(--tg-texto); font-family: Roboto, Arial, sans-serif; } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin):not(#tgNada) > .modal-content, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin):not(#tgNada) > .modal-content { width: 100% !important; max-width: none !important; max-height: 88vh !important; max-height: 88dvh !important; margin: 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; animation: tg-hoja-sube .28s cubic-bezier(.2, 0, 0, 1); } html body:is(.tg-movil, .tg-movil-modales) .modal-hist.closing:not(.tg-dialogo):not(#modalLogin):not(#tgNada) > .modal-content { animation: tg-hoja-baja .2s ease-in forwards; } /* asa de la hoja */ body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin) > .modal-content::before { content: ""; position: absolute; top: 10px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: var(--tg-texto-2); opacity: .4; } @media (prefers-reduced-motion: reduce) { html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) > .modal-content { animation: none !important; } } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) .modal-header, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) .modal-header { border: 0; background: none; color: var(--tg-texto); font-size: 20px; font-weight: 400; } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) .modal-header strong { font-weight: 400; } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) img[src*="Cancel.ico"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23444746' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); width: 24px !important; height: 24px !important; filter: none !important; } html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) img[src*="Cancel.ico"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23c4c7c5' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); } /* campos y botones dentro de los modales */ html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) select, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) select { min-height: 44px; border: 1px solid var(--tg-linea); border-radius: 8px; background: var(--tg-hoja); color: var(--tg-texto); } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) label, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) label { color: var(--tg-texto); } html body:is(.tg-movil, .tg-movil-modales) #modalPermisos:not(#tgNada) > .modal-content > button, html.night body:is(.tg-movil, .tg-movil-modales) #modalPermisos:not(#tgNada) > .modal-content > button, html body:is(.tg-movil, .tg-movil-modales) #modalFormUsuario:not(#tgNada) > .modal-content > button, html.night body:is(.tg-movil, .tg-movil-modales) #modalFormUsuario:not(#tgNada) > .modal-content > button, html body:is(.tg-movil, .tg-movil-modales) #btnNuevoUsuario:not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnNuevoUsuario:not(#tgNada) { flex: none; min-height: 48px; border-radius: 999px !important; background: var(--tg-primario) !important; background-image: none !important; color: var(--tg-hoja) !important; font-weight: 500 !important; } body:is(.tg-movil, .tg-movil-modales) #modalPermisos > .modal-content > img[src*="Access.ico"], body:is(.tg-movil, .tg-movil-modales) #modalUsuarios > .modal-content > img[src*="Admin.ico"] { display: none; } html body:is(.tg-movil, .tg-movil-modales) #modalPermisos:not(#tgNada) .modal-header, html body:is(.tg-movil, .tg-movil-modales) #modalUsuarios:not(#tgNada) .modal-header { justify-content: flex-start !important; padding-right: 36px; } /* Gestor de usuarios */ html body:is(.tg-movil, .tg-movil-modales) #listaUsuarios:not(#tgNada) { color: var(--tg-texto); } html body:is(.tg-movil, .tg-movil-modales) #listaUsuarios:not(#tgNada) > .usuario-fila, html.night body:is(.tg-movil, .tg-movil-modales) #listaUsuarios:not(#tgNada) > .usuario-fila { padding: 10px 12px !important; border: 1px solid var(--tg-linea) !important; border-radius: 12px !important; background: none !important; } html body:is(.tg-movil, .tg-movil-modales) .usuario-datos > div:last-child { color: var(--tg-texto-2) !important; } html body:is(.tg-movil, .tg-movil-modales) .usuario-editar:not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .usuario-editar:not(#tgNada) { min-height: 36px; border: 1px solid var(--tg-linea) !important; border-radius: 999px !important; background: none !important; color: var(--tg-primario) !important; } html body:is(.tg-movil, .tg-movil-modales) .usuario-borrar:not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .usuario-borrar:not(#tgNada) { min-height: 36px; border-radius: 999px !important; background: var(--tg-error) !important; color: var(--tg-error-texto) !important; } /* Configuración */ html body:is(.tg-movil, .tg-movil-modales) .config-tabs, html.night body:is(.tg-movil, .tg-movil-modales) .config-tabs { gap: 4px; margin: 4px 0 0; padding: 0; border-bottom: 1px solid var(--tg-linea); border-radius: 0; background: none; } html body:is(.tg-movil, .tg-movil-modales) .config-tabs .tab-btn, html.night body:is(.tg-movil, .tg-movil-modales) .config-tabs .tab-btn { flex: 0 0 auto; height: 44px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none !important; color: var(--tg-texto-2); font: 500 14px Roboto, Arial, sans-serif; } html body:is(.tg-movil, .tg-movil-modales) .config-tabs .tab-btn.active, html.night body:is(.tg-movil, .tg-movil-modales) .config-tabs .tab-btn.active { border-bottom-color: var(--tg-primario); color: var(--tg-primario); } body:is(.tg-movil, .tg-movil-modales) #configNota { margin: 12px 0 4px; } html body:is(.tg-movil, .tg-movil-modales) .config-nota, html.night body:is(.tg-movil, .tg-movil-modales) .config-nota, html body:is(.tg-movil, .tg-movil-modales) .env-etq small, html.night body:is(.tg-movil, .tg-movil-modales) .env-etq small { color: var(--tg-texto-2); } body:is(.tg-movil, .tg-movil-modales) .config-seccion { gap: 0; padding: 0 0 8px; border: 0; } body:is(.tg-movil, .tg-movil-modales) .config-fila { box-sizing: border-box; min-height: 52px; padding: 6px 0; gap: 16px; } body:is(.tg-movil, .tg-movil-modales) .config-fila + .config-nota { margin: -8px 0 8px; } body:is(.tg-movil, .tg-movil-modales) .config-titulo { margin: 18px 0 6px; font-weight: 500; } body:is(.tg-movil, .tg-movil-modales) .config-titulo + .config-nota { margin: 0 0 12px !important; } body:is(.tg-movil, .tg-movil-modales) #configPush { display: flex; flex-direction: column; } body:is(.tg-movil, .tg-movil-modales) .config-botones { gap: 8px; margin: 8px 0; } html body:is(.tg-movil, .tg-movil-modales) .config-btn:not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .config-btn:not(#tgNada) { min-height: 44px; border: 1px solid var(--tg-linea); border-radius: 999px !important; background: none !important; color: var(--tg-primario); font-weight: 500; } html body:is(.tg-movil, .tg-movil-modales) .config-btn.primario:not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .config-btn.primario:not(#tgNada) { border: 0; background: var(--tg-primario) !important; color: var(--tg-hoja); } html body:is(.tg-movil, .tg-movil-modales) .config-opcion, html.night body:is(.tg-movil, .tg-movil-modales) .config-opcion { border: 1px solid var(--tg-linea); border-radius: 16px; background: none; color: var(--tg-texto); } html body:is(.tg-movil, .tg-movil-modales) .config-opcion span, html.night body:is(.tg-movil, .tg-movil-modales) .config-opcion span { color: var(--tg-texto); } html body:is(.tg-movil, .tg-movil-modales) .config-opcion.activo, html.night body:is(.tg-movil, .tg-movil-modales) .config-opcion.activo { border-color: var(--tg-primario); background: var(--tg-activo); box-shadow: none; color: var(--tg-activo-texto); } html body:is(.tg-movil, .tg-movil-modales) .config-opcion.activo span, html.night body:is(.tg-movil, .tg-movil-modales) .config-opcion.activo span { color: var(--tg-activo-texto); } html body:is(.tg-movil, .tg-movil-modales) .env-fila, html.night body:is(.tg-movil, .tg-movil-modales) .env-fila { border-top-color: var(--tg-linea); } html body:is(.tg-movil, .tg-movil-modales) .env-subtab, html.night body:is(.tg-movil, .tg-movil-modales) .env-subtab { min-height: 36px; border: 1px solid var(--tg-linea); border-radius: 8px; background: none; color: var(--tg-texto-2); } html body:is(.tg-movil, .tg-movil-modales) .env-subtab.active, html.night body:is(.tg-movil, .tg-movil-modales) .env-subtab.active { border-color: transparent; background: var(--tg-activo); color: var(--tg-activo-texto); } /* switches de Material 3 (mismas reglas que en escritorio) */ body:is(.tg-movil, .tg-movil-modales) { --tg-sw-riel: #e1e3e1; --tg-sw-borde: #747775; } html.night body:is(.tg-movil, .tg-movil-modales) { --tg-sw-riel: #36393d; --tg-sw-borde: #8e918f; } body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 { position: relative; flex: none; width: 52px; height: 32px; } html body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 input[type="checkbox"] { position: absolute; z-index: 2; inset: -8px 0; width: 100%; height: 48px; margin: 0; opacity: 0; cursor: pointer; } html body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 label.toggle { display: block; box-sizing: border-box; width: 52px; height: 32px; margin: 0; border: 2px solid var(--tg-sw-borde); border-radius: 16px; background: var(--tg-sw-riel); transition: background .2s, border-color .2s; } html body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 label.toggle span { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; overflow: hidden; border-radius: 50%; background: var(--tg-sw-borde); color: var(--tg-primario); font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 16px; line-height: 24px; letter-spacing: normal; text-align: center; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; transition: top .2s cubic-bezier(.2, 0, 0, 1), left .2s cubic-bezier(.2, 0, 0, 1), width .2s, height .2s, background .2s; } html body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 input:checked + label.toggle { border-color: var(--tg-primario); background: var(--tg-primario); } html body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 input:checked + label.toggle span { top: 4px; left: 24px; width: 24px; height: 24px; background: var(--tg-hoja); } body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 input:checked + label.toggle span::before { content: "check"; } html body:is(.tg-movil, .tg-movil-modales) .checkbox-wrapper-3 input:disabled + label.toggle { opacity: .38; } /* night-mode.css pinta los campos con !important: aquí manda el tema */ html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) select, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) select { border-color: var(--tg-linea) !important; background: var(--tg-hoja) !important; color: var(--tg-texto) !important; font-family: Roboto, Arial, sans-serif; } body:is(.tg-movil, .tg-movil-modales) .modal-hist button { font-family: Roboto, Arial, sans-serif; } /* login: un solo borde por campo */ html body:is(.tg-movil, .tg-movil-modales) .login-card, html.night body:is(.tg-movil, .tg-movil-modales) .login-card { border: 0; background: var(--tg-hoja); color: var(--tg-texto); font-family: Roboto, Arial, sans-serif; } html body:is(.tg-movil, .tg-movil-modales) .login-title, html.night body:is(.tg-movil, .tg-movil-modales) .login-title { color: var(--tg-texto); font-weight: 400; } html body:is(.tg-movil, .tg-movil-modales) .login-field, html.night body:is(.tg-movil, .tg-movil-modales) .login-field { border: 1px solid var(--tg-linea); border-radius: 8px; background: none; } html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) .login-field input:not([type="checkbox"]), html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(#tgNada):not(#tgNada) .login-field input:not([type="checkbox"]) { min-height: 0; border: 0 !important; background: none !important; } html body:is(.tg-movil, .tg-movil-modales) .login-btn-primary, html.night body:is(.tg-movil, .tg-movil-modales) .login-btn-primary { border: 0; border-radius: 999px !important; background: var(--tg-primario) !important; color: var(--tg-hoja) !important; font-weight: 500; letter-spacing: 0; } html body:is(.tg-movil, .tg-movil-modales) .login-btn-guest, html.night body:is(.tg-movil, .tg-movil-modales) .login-btn-guest { border: 0; border-radius: 999px !important; background: none !important; color: var(--tg-primario) !important; font-weight: 500; } /* el dedo debe poder desplazar la hoja aunque empiece sobre un switch o un campo */ html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin) > .modal-content, body:is(.tg-movil, .tg-movil-modales) #configContenido, body:is(.tg-movil, .tg-movil-modales) .modal-hist .checkbox-wrapper-3 input { touch-action: pan-x pan-y; } /* Configuración desplaza #configContenido: el contenedor no debe retener el gesto */ html body:is(.tg-movil, .tg-movil-modales) #modalConfiguracion > .modal-content { overscroll-behavior: auto; } body:is(.tg-movil, .tg-movil-modales) #configContenido { -webkit-overflow-scrolling: touch; } /* Configuración: en Android real la caja interna #configContenido no se desplazaba dentro de la hoja (overflow hidden). Se desplaza la hoja completa, igual que Permisos; título y pestañas quedan fijos. */ html body:is(.tg-movil, .tg-movil-modales) .modal-hist#modalConfiguracion:not(#tgNada):not(#tgNada):not(#tgNada) > .modal-content, html.night body:is(.tg-movil, .tg-movil-modales) .modal-hist#modalConfiguracion:not(#tgNada):not(#tgNada):not(#tgNada) > .modal-content { display: block; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; padding-top: 0; } body:is(.tg-movil, .tg-movil-modales) #configContenido { flex: none; overflow: visible; margin-right: 0; padding-right: 0; } html body:is(.tg-movil, .tg-movil-modales) #modalConfiguracion:not(#tgNada):not(#tgNada) .modal-header, html.night body:is(.tg-movil, .tg-movil-modales) #modalConfiguracion:not(#tgNada):not(#tgNada) .modal-header { position: sticky; top: 0; z-index: 3; box-sizing: border-box; height: 66px; margin: 0 -20px; padding: 26px 20px 8px; background: var(--tg-hoja); } html body:is(.tg-movil, .tg-movil-modales) #modalConfiguracion .config-tabs, html.night body:is(.tg-movil, .tg-movil-modales) #modalConfiguracion .config-tabs { position: sticky; top: 66px; z-index: 3; margin: 0 -20px; padding: 0 20px; background: var(--tg-hoja); } body:is(.tg-movil, .tg-movil-modales) #modalConfiguracion > .modal-content::before { z-index: 4; } /* sin barra de scroll vertical en las hojas (pedido del usuario) */ body:is(.tg-movil, .tg-movil-modales) .modal-hist > .modal-content, body:is(.tg-movil, .tg-movil-modales) .modal-hist .modal-body, body:is(.tg-movil, .tg-movil-modales) #configContenido { scrollbar-width: none; } body:is(.tg-movil, .tg-movil-modales) .modal-hist > .modal-content::-webkit-scrollbar, body:is(.tg-movil, .tg-movil-modales) .modal-hist .modal-body::-webkit-scrollbar, body:is(.tg-movil, .tg-movil-modales) #configContenido::-webkit-scrollbar { display: none; } /* ===================== Etapa 8.2: Inicio (body.tg-inicio) ===================== */ body.tg-inicio #main-content::before, body.tg-inicio #main-content::after { display: none; } html body.tg-inicio h1, html.night body.tg-inicio h1 { margin: 4px 0 14px; color: var(--tg-texto); font-size: 24px; font-weight: 400; } body.tg-inicio h1 img { display: none; } html body.tg-inicio .hero.finca-slideshow, html body.tg-inicio #climaBox { border-radius: 16px; } /* grupos y tarjetas de módulos */ html body.tg-inicio .launcher-group-title, html.night body.tg-inicio .launcher-group-title { color: var(--tg-texto-2); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; } html body.tg-inicio .launch-card, html.night body.tg-inicio .launch-card { min-height: 104px; box-sizing: border-box; padding: 18px 12px; border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-inicio .launch-card span, html.night body.tg-inicio .launch-card span { font-size: 14px; font-weight: 500; } html body.tg-inicio .launch-card img.modulo-ico { width: 30px; height: 30px; filter: brightness(0) opacity(.72); } html.night body.tg-inicio .launch-card img.modulo-ico { filter: invert(1) opacity(.85); } body.tg-inicio .launch-card[data-module="monitor"] img.modulo-ico { content: url("/static/images/md/monitor.svg"); } body.tg-inicio .launch-card[data-module="mqtt"] img.modulo-ico { content: url("/static/images/md/terminal.svg"); } body.tg-inicio .launch-card[data-module="kpi"] img.modulo-ico { content: url("/static/images/md/analytics.svg"); } body.tg-inicio .launch-card[data-module="sensores"] img.modulo-ico { content: url("/static/images/md/camaron.svg"); } body.tg-inicio .launch-card[data-module="kpi_sensores"] img.modulo-ico { content: url("/static/images/md/analytics.svg"); } body.tg-inicio .launch-card[data-module="devices"] img.modulo-ico { content: url("/static/images/md/hub.svg"); } body.tg-inicio .launch-card[data-module="register_device"] img.modulo-ico { content: url("/static/images/md/add_circle.svg"); } body.tg-inicio .launch-card[data-module="instalaciones"] img.modulo-ico { content: url("/static/images/md/memory.svg"); } body.tg-inicio .launch-card[data-module="map_editor"] img.modulo-ico { content: url("/static/images/md/edit_location_alt.svg"); } body.tg-inicio .launch-card[data-module="enviadores"] img.modulo-ico { content: url("/static/images/md/cell_tower.svg"); } body.tg-inicio .launch-card[data-module="mapa_finca"] img.modulo-ico { content: url("/static/images/md/map.svg"); } body.tg-inicio .launch-card[data-module="historial_gps"] img.modulo-ico { content: url("/static/images/md/location_on.svg"); } body.tg-inicio .launch-card[data-module="historial_envios"] img.modulo-ico { content: url("/static/images/md/history.svg"); } body.tg-inicio .launch-card[data-module="registro_equipo"] img.modulo-ico { content: url("/static/images/md/list_alt.svg"); } body.tg-inicio .launch-card[data-module="reportes_mantenimiento"] img.modulo-ico { content: url("/static/images/md/assignment.svg"); } /* widgets KPI: mismas caras, con colores del tema */ html body.tg-inicio .lc-widget::before, html.night body.tg-inicio .lc-widget::before { background: var(--tg-suave); } html body.tg-inicio .lc-kpi-etq, html.night body.tg-inicio .lc-kpi-etq, html body.tg-inicio .wk-sev, html.night body.tg-inicio .wk-sev, html body.tg-inicio .lc-widget .wk-cuenta, html.night body.tg-inicio .lc-widget .wk-cuenta, html body.tg-inicio .lc-widget .wk-urg-extra, html.night body.tg-inicio .lc-widget .wk-urg-extra, html body.tg-inicio .lc-widget .wk-urg-etq, html.night body.tg-inicio .lc-widget .wk-urg-etq, html body.tg-inicio .lc-widget .wk-urg-uid small, html.night body.tg-inicio .lc-widget .wk-urg-uid small, html body.tg-inicio .lc-widget .wk-urg-prob, html.night body.tg-inicio .lc-widget .wk-urg-prob { color: var(--tg-texto-2); } html body.tg-inicio .wk-sev b, html.night body.tg-inicio .wk-sev b { color: var(--tg-texto); } /* barra inferior y menú de usuario */ html body.tg-inicio #bottom-bar a.bottom-bar-text, html.night body.tg-inicio #bottom-bar a.bottom-bar-text { color: var(--tg-texto-2); font-family: Roboto, Arial, sans-serif; } html body.tg-inicio #bottom-bar > a:not(#btnHomeMobile) img, html body.tg-inicio #bottomUserBtn img { filter: brightness(0) opacity(.72); } html.night body.tg-inicio #bottom-bar > a:not(#btnHomeMobile) img, html.night body.tg-inicio #bottomUserBtn img { filter: invert(0); } html body.tg-inicio .bottom-user-menu, html.night body.tg-inicio .bottom-user-menu { min-width: 248px; padding: 8px; border: 0; border-radius: 16px; background: var(--tg-hoja); box-shadow: var(--tg-sombra); } html body.tg-inicio #bottom-bar .bottom-user-menu a, html.night body.tg-inicio #bottom-bar .bottom-user-menu a { min-height: 48px; color: var(--tg-texto); font: 14px Roboto, Arial, sans-serif; background: none; } html body.tg-inicio .bottom-user-menu-night, html.night body.tg-inicio .bottom-user-menu-night { min-height: 48px; border-bottom: 1px solid var(--tg-linea); color: var(--tg-texto); font: 14px Roboto, Arial, sans-serif; } html body.tg-inicio #menuMovilNotificaciones img { content: url("/static/images/md/a_notifications.svg"); filter: none; } html.night body.tg-inicio #menuMovilNotificaciones img { content: url("/static/images/md/a_notifications_noche.svg"); filter: none; } html body.tg-inicio #menuMovilConfig img { content: url("/static/images/md/a_settings.svg"); filter: none; } html.night body.tg-inicio #menuMovilConfig img { content: url("/static/images/md/a_settings_noche.svg"); filter: none; } html body.tg-inicio #menuMovilLogin img { content: url("/static/images/md/a_login.svg"); filter: none; } html.night body.tg-inicio #menuMovilLogin img { content: url("/static/images/md/a_login_noche.svg"); filter: none; } html body.tg-inicio #menuMovilPermisos img { content: url("/static/images/md/a_lock.svg"); filter: none; } html.night body.tg-inicio #menuMovilPermisos img { content: url("/static/images/md/a_lock_noche.svg"); filter: none; } html body.tg-inicio #menuMovilUsuarios img { content: url("/static/images/md/a_manage_accounts.svg"); filter: none; } html.night body.tg-inicio #menuMovilUsuarios img { content: url("/static/images/md/a_manage_accounts_noche.svg"); filter: none; } html body.tg-inicio #menuMovilLogout img { content: url("/static/images/md/a_logout.svg"); filter: none; } html.night body.tg-inicio #menuMovilLogout img { content: url("/static/images/md/a_logout_noche.svg"); filter: none; } /* interruptor de modo nocturno: switch de Material 3, igual que en escritorio */ html body.tg-movil .checkbox-wrapper-5 .check { width: 52px; height: 32px; background: none; perspective: none; } html body.tg-movil .checkbox-wrapper-5 .check label { display: block; width: 52px; height: 32px; border: 2px solid #747775; border-radius: 16px; background: #e1e3e1; transition: background .2s, border-color .2s; } html body.tg-movil .checkbox-wrapper-5 .check input[type="checkbox"] { top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #747775; box-shadow: none; transition: left .2s cubic-bezier(.2, 0, 0, 1), background .2s; } html body.tg-movil .checkbox-wrapper-5 .check input[type="checkbox"]:checked { left: 24px; background: var(--tg-hoja); } html body.tg-movil .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label { border-color: var(--tg-primario); background: var(--tg-primario); } html body.tg-movil .checkbox-wrapper-5 .check label::before { content: none; } html body.tg-movil .checkbox-wrapper-5 .check label::after { content: "light_mode"; position: absolute; z-index: 4; top: 4px; left: 4px; right: auto; width: 24px; height: 24px; overflow: hidden; color: #e1e3e1; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 16px; line-height: 24px; letter-spacing: normal; text-align: center; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; pointer-events: none; transition: left .2s cubic-bezier(.2, 0, 0, 1), color .2s; } html body.tg-movil .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after { content: "dark_mode"; left: 24px; color: var(--tg-primario); } /* aviso de finca */ html body.tg-inicio .finca-toast, html.night body.tg-inicio .finca-toast { border-color: var(--tg-linea); background: var(--tg-hoja); color: var(--tg-texto); } html body.tg-inicio .finca-toast-texto, html.night body.tg-inicio .finca-toast-texto { border-left-color: var(--tg-linea); color: var(--tg-texto-2); } /* icono de Inicio claro sobre su círculo en modo noche */ html.night body.tg-movil:not(#tgNada) #bottom-bar #btnHomeMobile img { filter: invert(1) !important; } /* gesto de las hojas: como el menú rápido, lo maneja la app (tema-google.js); lo horizontal sigue nativo */ html body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin) > .modal-content, body:is(.tg-movil, .tg-movil-modales) .modal-hist:not(.tg-dialogo):not(#modalLogin) .modal-content *, body:is(.tg-movil, .tg-movil-modales) #configContenido { touch-action: none; } body:is(.tg-movil, .tg-movil-modales) .config-tabs, body:is(.tg-movil, .tg-movil-modales) .config-tabs *, body:is(.tg-movil, .tg-movil-modales) .env-subtabs, body:is(.tg-movil, .tg-movil-modales) .env-subtabs * { touch-action: pan-x; } /* ===================== Iconos Material en contenido (mismos reemplazos que escritorio) ===================== */ html body.tg-movil img[src*="/Edit.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/EditLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_edit.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Edit.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/EditLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/EditNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/EditNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_edit_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Delete.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/DeleteLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_delete.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Delete.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/DeleteLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/DeleteNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/DeleteNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_delete_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Download.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/DownloadLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_download.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Download.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/DownloadLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/DownloadNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/DownloadNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_download_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Upload.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/UploadLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_upload.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Upload.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/UploadLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/UploadNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/UploadNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_upload_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/PDF.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/PDFLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_picture_as_pdf.svg"); filter: none !important; } html.night body.tg-movil img[src*="/PDF.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/PDFLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/PDFNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/PDFNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_picture_as_pdf_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Microsoft Excel.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Microsoft%20Excel.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Microsoft%20ExcelLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Microsoft ExcelLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_table_view.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Microsoft Excel.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Microsoft%20Excel.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Microsoft%20ExcelLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Microsoft ExcelLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Microsoft ExcelNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Microsoft%20ExcelNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Microsoft ExcelNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Microsoft%20ExcelNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_table_view_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Add.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/AddLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_add.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Add.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/AddLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/AddNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/AddNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_add_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Done.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/DoneLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_check_circle.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Done.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/DoneLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/DoneNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/DoneNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_check_circle_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Schedule.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ScheduleLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_schedule.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Schedule.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ScheduleLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ScheduleNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ScheduleNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_schedule_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Location.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/LocationLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_location_on.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Location.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/LocationLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/LocationNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/LocationNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_location_on_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Target.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/TargetLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_my_location.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Target.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/TargetLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/TargetNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/TargetNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_my_location_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/gps.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/gpsLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_gps_fixed.svg"); filter: none !important; } html.night body.tg-movil img[src*="/gps.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/gpsLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/gpsNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/gpsNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_gps_fixed_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Choice.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ChoiceLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_checklist.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Choice.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ChoiceLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ChoiceNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ChoiceNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_checklist_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Info.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/InfoLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_info.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Info.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/InfoLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/InfoNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/InfoNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_info_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Error.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ErrorLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_error.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Error.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ErrorLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ErrorNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ErrorNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_error_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Chart.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ChartLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_show_chart.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Chart.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ChartLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ChartNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ChartNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_show_chart_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Close.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/CloseLINE.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_close.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Close.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/CloseLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/CloseNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/CloseNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_close_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Low Battery.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Low%20Battery.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_battery_android_alert.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Low Battery.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Low%20Battery.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Low BatteryNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Low%20BatteryNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Low BatteryNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Low%20BatteryNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_battery_android_alert_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Power Off Button.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Power Off ButtonNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Power%20Off%20Button.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Power%20Off%20ButtonNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_power_off.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Power Off Button.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Power Off ButtonNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Power%20Off%20Button.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Power%20Off%20ButtonNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_power_off_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Low Connection.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Low ConnectionNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Low%20Connection.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Low%20ConnectionNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_signal_cellular_alt_1_bar.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Low Connection.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Low ConnectionNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Low%20Connection.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Low%20ConnectionNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_signal_cellular_alt_1_bar_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Wi-Fi off.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Wi-Fi offNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Wi-Fi%20off.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Wi-Fi%20offNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_wifi_off.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Wi-Fi off.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Wi-Fi offNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Wi-Fi%20off.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Wi-Fi%20offNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_wifi_off_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/ProcessorLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ProcessorFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Processor.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ProcessorNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_memory.svg"); filter: none !important; } html.night body.tg-movil img[src*="/ProcessorLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ProcessorFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Processor.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ProcessorNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_memory_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/Radio WavesLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio WavesFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio Waves.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio WavesNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio%20WavesLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio%20WavesFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio%20Waves.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Radio%20WavesNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_cell_tower.svg"); filter: none !important; } html.night body.tg-movil img[src*="/Radio WavesLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio WavesFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio Waves.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio WavesNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio%20WavesLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio%20WavesFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio%20Waves.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Radio%20WavesNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_cell_tower_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/ConsoleLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ConsoleFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/Console.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ConsoleNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_terminal.svg"); filter: none !important; } html.night body.tg-movil img[src*="/ConsoleLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ConsoleFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/Console.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ConsoleNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_terminal_noche.svg"); filter: none !important; } html body.tg-movil img[src*="/ListLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ListFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/List.ico"]:not(.ico):not(.leaflet-marker-icon), html body.tg-movil img[src*="/ListNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_list.svg"); filter: none !important; } html.night body.tg-movil img[src*="/ListLINE.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ListFILL.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/List.ico"]:not(.ico):not(.leaflet-marker-icon), html.night body.tg-movil img[src*="/ListNIGHT.ico"]:not(.ico):not(.leaflet-marker-icon) { content: url("/static/images/md/a_list_noche.svg"); filter: none !important; } /* barra inferior con filtros */ html body.tg-movil #bottom-bar select, html.night body.tg-movil #bottom-bar select { border: 0; border-radius: 999px; background-color: var(--tg-campo); box-shadow: none; color: var(--tg-texto); font-family: Roboto, Arial, sans-serif; } html body.tg-movil #bottom-bar .btn-reload-mobile img, html body.tg-movil #bottom-bar #btnGpsPondMobile img { filter: brightness(0) opacity(.72); } html.night body.tg-movil #bottom-bar .btn-reload-mobile img, html.night body.tg-movil #bottom-bar #btnGpsPondMobile img { filter: none; } /* ===================== Etapa 8.3: KPI (body.tg-kpi) ===================== */ html body.tg-kpi .tabs, html.night body.tg-kpi .tabs { display: flex; gap: 4px; padding: 0; margin: 0 0 16px; border-bottom: 1px solid var(--tg-linea); background: none; } html body.tg-kpi .tabs .tab-btn, html.night body.tg-kpi .tabs .tab-btn { height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none !important; background-image: none !important; box-shadow: none; color: var(--tg-texto-2); font: 500 14px Roboto, Arial, sans-serif; } html body.tg-kpi .tabs .tab-btn.active, html.night body.tg-kpi .tabs .tab-btn.active { border-bottom-color: var(--tg-primario); color: var(--tg-primario); } html body.tg-kpi .tabs .tab-btn:hover { background: var(--tg-hover) !important; } body.tg-kpi .kpi-section { margin: 0 0 12px; } html body.tg-kpi .kpi-section > h2, html.night body.tg-kpi .kpi-section > h2, html body.tg-kpi .kpi-section > .kpi-cmd-cab > h2, html.night body.tg-kpi .kpi-section > .kpi-cmd-cab > h2 { color: var(--tg-texto); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; } html body.tg-kpi .kpi-sub, html.night body.tg-kpi .kpi-sub { color: var(--tg-texto-2); opacity: 1; font-weight: 400; } html body.tg-kpi .kpi-note, html.night body.tg-kpi .kpi-note { color: var(--tg-texto-2); } html body.tg-kpi .card.kpi-card, html.night body.tg-kpi .card.kpi-card { padding: 14px 18px; border: 0; border-radius: 16px; background: var(--tg-suave); box-shadow: none; color: var(--tg-texto); transform: none; } html body.tg-kpi .card.kpi-card .card-number, html.night body.tg-kpi .card.kpi-card .card-number { color: inherit; font-size: 32px; font-weight: 400; line-height: 1.2; } html body.tg-kpi .card.kpi-card .card-text, html.night body.tg-kpi .card.kpi-card .card-text { color: inherit; opacity: 1; font-size: 14px; font-weight: 500; } html body.tg-kpi .card.kpi-card.online-card, html.night body.tg-kpi .card.kpi-card.online-card { background: var(--tg-ok); color: var(--tg-ok-texto); } html body.tg-kpi .card.kpi-card.offline-card, html.night body.tg-kpi .card.kpi-card.offline-card { background: var(--tg-error); color: var(--tg-error-texto); } html body.tg-kpi .card.kpi-card.low-battery-card, html.night body.tg-kpi .card.kpi-card.low-battery-card, html body.tg-kpi .card.kpi-card.SCC-err-card, html.night body.tg-kpi .card.kpi-card.SCC-err-card { background: var(--tg-aviso); color: var(--tg-aviso-texto); } body.tg-kpi .kpi-meter { max-width: none; margin: 10px 0 0; } html body.tg-kpi .kpi-meter-head, html.night body.tg-kpi .kpi-meter-head { color: var(--tg-texto-2); font-weight: 500; } html body.tg-kpi .kpi-meter-track, html.night body.tg-kpi .kpi-meter-track { height: 6px; border-radius: 999px; background: var(--tg-campo); } html body.tg-kpi .kpi-chart-box, html.night body.tg-kpi .kpi-chart-box { padding: 16px 20px; border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; } html body.tg-kpi .kpi-dia, html.night body.tg-kpi .kpi-dia { border: 1px solid var(--tg-linea); border-radius: 8px; background: none !important; background-image: none !important; box-shadow: none; color: var(--tg-texto-2); } html body.tg-kpi .kpi-dia.is-activo, html.night body.tg-kpi .kpi-dia.is-activo { border-color: var(--tg-tonal); background: var(--tg-tonal) !important; color: var(--tg-tonal-texto); } html body.tg-kpi .kpi-revision-item, html.night body.tg-kpi .kpi-revision-item, html body.tg-kpi .kpi-cmd-item, html.night body.tg-kpi .kpi-cmd-item { border: 1px solid var(--tg-linea); border-radius: 12px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-kpi .kpi-subtab-btn, html.night body.tg-kpi .kpi-subtab-btn { border: 1px solid var(--tg-linea); border-radius: 8px; background: none !important; background-image: none !important; box-shadow: none; color: var(--tg-texto-2); font-weight: 500; } html body.tg-kpi .kpi-subtab-btn.active, html.night body.tg-kpi .kpi-subtab-btn.active, html body.tg-kpi .kpi-subtab-btn.is-activo, html.night body.tg-kpi .kpi-subtab-btn.is-activo { border-color: var(--tg-tonal); background: var(--tg-tonal) !important; color: var(--tg-tonal-texto); } html body.tg-kpi .kpi-rend-tabla th, html.night body.tg-kpi .kpi-rend-tabla th, html body.tg-kpi .kpi-ord-tabla th, html.night body.tg-kpi .kpi-ord-tabla th, html body.tg-kpi .kpi-cmd-tabla th, html.night body.tg-kpi .kpi-cmd-tabla th { background: none; color: var(--tg-texto-2); font-weight: 500; text-transform: none; letter-spacing: 0; } html body.tg-kpi .kpi-rend-tabla td, html.night body.tg-kpi .kpi-rend-tabla td, html body.tg-kpi .kpi-ord-tabla td, html.night body.tg-kpi .kpi-ord-tabla td { background: none; border-bottom: 1px solid var(--tg-linea); color: var(--tg-texto); } html body.tg-kpi .card.kpi-card, html body.tg-kpi .card.kpi-card *, html.night body.tg-kpi .card.kpi-card, html.night body.tg-kpi .card.kpi-card * { opacity: 1; filter: none; text-shadow: none; } body.tg-kpi .kpi-revision-lista, body.tg-kpi .kpi-chart-box, body.tg-kpi .kpi-cmd-lista, body.tg-kpi .kpi-cmd-item, body.tg-kpi .kpi-revision-item { max-width: none; } body.tg-kpi #kpiContent section > .kpi-chart-box { width: auto; } html body.tg-kpi .kpi-cob-banda, html.night body.tg-kpi .kpi-cob-banda { border-radius: 16px; background: var(--tg-suave); box-shadow: none; color: var(--tg-texto); } html body.tg-kpi .kpi-subtabs, html.night body.tg-kpi .kpi-subtabs, html body.tg-kpi .kpi-dias, html.night body.tg-kpi .kpi-dias { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } html body.tg-kpi .kpi-subtab-btn, html.night body.tg-kpi .kpi-subtab-btn, html body.tg-kpi .kpi-dia, html.night body.tg-kpi .kpi-dia { display: inline-flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 13px; } html body.tg-kpi .kpi-subtab-n, html.night body.tg-kpi .kpi-subtab-n { min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; background: var(--tg-campo); color: var(--tg-texto-2); font-size: 11px; line-height: 20px; text-align: center; } html body.tg-kpi .kpi-subtab-btn.active .kpi-subtab-n, html.night body.tg-kpi .kpi-subtab-btn.active .kpi-subtab-n, html body.tg-kpi .kpi-subtab-btn.is-activo .kpi-subtab-n, html.night body.tg-kpi .kpi-subtab-btn.is-activo .kpi-subtab-n, html body.tg-kpi .kpi-dia.is-activo .kpi-subtab-n, html.night body.tg-kpi .kpi-dia.is-activo .kpi-subtab-n { background: var(--tg-primario); color: var(--tg-hoja); } html body.tg-kpi .kpi-rev-filtro, html.night body.tg-kpi .kpi-rev-filtro, html body.tg-kpi .kpi-rev-tipo-sel, html.night body.tg-kpi .kpi-rev-tipo-sel { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: none; } html body.tg-kpi .kpi-rev-filtro, html.night body.tg-kpi .kpi-rev-filtro { background-image: none; } html body.tg-kpi .kpi-rev-tipo-sel, html.night body.tg-kpi .kpi-rev-tipo-sel { padding-right: 30px; border: 1px solid var(--tg-linea); background-color: transparent; color: var(--tg-texto-2); } html body.tg-kpi .kpi-dia.is-activo > *, html.night body.tg-kpi .kpi-dia.is-activo > * { background: var(--tg-primario); color: var(--tg-hoja); opacity: 1; } html body.tg-kpi .tabs-grupo, html.night body.tg-kpi .tabs-grupo { display: inline-flex; gap: 4px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } body.tg-kpi .btn-degradado:not(.tab-btn):not(.kpi-subtab-btn):not(.kpi-dia):not(.kpi-rev-filtro):not(.modo-btn), html body.tg-kpi .btn-toolbar, html body.tg-kpi .btn-nuevo-pond, html body.tg-kpi .snd-btn.is-primario, html.night body.tg-kpi .snd-btn.is-primario { border-radius: 999px; background-image: none !important; box-shadow: none; font-family: Roboto, Arial, sans-serif; font-weight: 500; } html body.tg-kpi .kpi-section > h2, html.night body.tg-kpi .kpi-section > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } html body.tg-kpi .kpi-sub, html.night body.tg-kpi .kpi-sub { font-size: 12px; } html body.tg-kpi #last-update, html.night body.tg-kpi #last-update { margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tg-texto-2); font-size: 12px; font-weight: 400; text-align: left; } body.tg-kpi #controls, body.tg-kpi .kpi-controls, html body.tg-kpi .kpi-controls .small { color: var(--tg-texto-2); font-size: 12px; font-weight: 400; } html body.tg-kpi .tabs, html.night body.tg-kpi .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; } body.tg-kpi .tabs::-webkit-scrollbar { display: none; } html body.tg-kpi .tabs .tab-btn, html.night body.tg-kpi .tabs .tab-btn { flex: none; height: 44px; padding: 0 14px; font: 500 14px Roboto, Arial, sans-serif; } body.tg-kpi .cards-container { gap: 8px; } html body.tg-kpi .card.kpi-card, html.night body.tg-kpi .card.kpi-card { padding: 12px 14px; } html body.tg-kpi .card.kpi-card .card-number, html.night body.tg-kpi .card.kpi-card .card-number { font-size: 26px; } html body.tg-kpi .kpi-chart-box, html.night body.tg-kpi .kpi-chart-box { padding: 14px; } /* números primero: Conectividad, luego la dona, luego el resto */ body.tg-kpi #tab-resumen.active:has(#fincaChart) { display: flex; flex-direction: column; } body.tg-kpi #tab-resumen:has(#fincaChart) > * { order: 2; } body.tg-kpi #tab-resumen:has(#fincaChart) > section:has(#conPctBar) { order: 0; } body.tg-kpi #tab-resumen:has(#fincaChart) > section:has(#fincaChart) { order: 1; } html body.tg-kpi .kpi-finca-wrap, html.night body.tg-kpi .kpi-finca-wrap { padding: 14px; border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; } html body.tg-kpi .kpi-finca-canvas { max-width: 190px; margin: 0 auto; } html body.tg-kpi .kpi-finca-legend, html.night body.tg-kpi .kpi-finca-legend { color: var(--tg-texto); } /* KPI: fondo de hoja para que las tarjetas neutras se distingan, igual que en escritorio */ html body.tg-kpi, html.night body.tg-kpi { background: var(--tg-hoja) !important; } html body.tg-kpi .card.kpi-card:not(.online-card):not(.offline-card):not(.low-battery-card):not(.SCC-err-card), html.night body.tg-kpi .card.kpi-card:not(.online-card):not(.offline-card):not(.low-battery-card):not(.SCC-err-card) { background: var(--tg-suave) !important; } /* noche: night-mode.css pinta los filtros de la barra inferior */ html.night body.tg-movil:not(#tgNada) #bottom-bar select, html.night body.tg-movil:not(#tgNada) #bottom-bar input[type=text] { background-color: var(--tg-campo) !important; color: var(--tg-texto) !important; } /* ===================== Contenido general en teléfono (body.tg-mc): reglas tg-cont del escritorio ===================== */ body.tg-mc { --tg-fuente-num: 32px; } body.tg-mc #main-content { position: relative; } html body.tg-mc .finca-filtro button, html.night body.tg-mc .finca-filtro button { height: 32px; padding: 0 14px; border: 1px solid var(--tg-linea); border-radius: 8px; background: var(--tg-hoja); color: var(--tg-texto-2); box-shadow: none; font-size: 13px; font-weight: 500; } html body.tg-mc .finca-filtro button.activa, html.night body.tg-mc .finca-filtro button.activa { background: var(--tg-tonal); border-color: var(--tg-tonal); color: var(--tg-tonal-texto); } html body.tg-mc .tabs, html.night body.tg-mc .tabs { display: flex; gap: 4px; padding: 0; margin: 0 0 16px; border-bottom: 1px solid var(--tg-linea); background: none; } html body.tg-mc .tabs .tab-btn, html.night body.tg-mc .tabs .tab-btn { height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none !important; background-image: none !important; box-shadow: none; color: var(--tg-texto-2); font: 500 14px Roboto, Arial, sans-serif; } html body.tg-mc .tabs .tab-btn.active, html.night body.tg-mc .tabs .tab-btn.active { border-bottom-color: var(--tg-primario); color: var(--tg-primario); } html body.tg-mc .tabs .tab-btn:hover { background: var(--tg-hover) !important; } body.tg-mc .cards-container { gap: 12px; } html body.tg-mc #kpiContent table th, html.night body.tg-mc #kpiContent table th { background: none; color: var(--tg-texto-2); font-weight: 500; } html body.tg-mc #kpiContent table td, html.night body.tg-mc #kpiContent table td { background: none; border-bottom: 1px solid var(--tg-linea); } html body.tg-mc #kpiContent table tr, html.night body.tg-mc #kpiContent table tr { background: none; } body.tg-mc button, body.tg-mc select, body.tg-mc input { font-family: Roboto, Arial, sans-serif; } html body.tg-mc #main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html body.tg-mc #main-content select, html body.tg-mc #main-content textarea, html.night body.tg-mc #main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.night body.tg-mc #main-content select, html.night body.tg-mc #main-content textarea { box-sizing: border-box; border: 1px solid var(--tg-linea) !important; border-radius: 8px; background: var(--tg-hoja) !important; box-shadow: none !important; color: var(--tg-texto) !important; opacity: 1; } html body.tg-mc #main-content input:focus, html body.tg-mc #main-content select:focus, html body.tg-mc #main-content textarea:focus { outline: 2px solid var(--tg-primario); outline-offset: -1px; } html body.tg-mc #main-content input::placeholder, html body.tg-mc #main-content textarea::placeholder { color: var(--tg-texto-2); opacity: 1; } html body.tg-mc #main-content h2, html.night body.tg-mc #main-content h2 { color: var(--tg-texto); font-size: 16px; font-weight: 500; } html body.tg-mc #main-content table th, html.night body.tg-mc #main-content table th { background: none; border-color: var(--tg-linea); color: var(--tg-texto-2); font-weight: 500; } html body.tg-mc #main-content table td, html.night body.tg-mc #main-content table td { background: none; border-color: var(--tg-linea); color: var(--tg-texto); } html body.tg-mc #main-content table tr, html.night body.tg-mc #main-content table tr { background: none; } html body.tg-mc .tabs-grupo, html.night body.tg-mc .tabs-grupo { display: inline-flex; gap: 4px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } html body.tg-mc .snd-tabs, html.night body.tg-mc .snd-tabs { background: none; border-bottom: 1px solid var(--tg-linea); border-radius: 0; padding: 0; gap: 4px; box-shadow: none; } html body.tg-mc .snd-tabs .tab-btn, html.night body.tg-mc .snd-tabs .tab-btn { height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none !important; box-shadow: none; color: var(--tg-texto-2); font-weight: 500; } html body.tg-mc .snd-tabs .tab-btn.active, html.night body.tg-mc .snd-tabs .tab-btn.active { border-bottom-color: var(--tg-primario); color: var(--tg-primario); } html body.tg-mc .side-card, html.night body.tg-mc .side-card, html body.tg-mc .mover-equipo-box, html.night body.tg-mc .mover-equipo-box, html body.tg-mc .area-block, html.night body.tg-mc .area-block, html body.tg-mc .mf-panel, html.night body.tg-mc .mf-panel, html body.tg-mc .mf-edit, html.night body.tg-mc .mf-edit, html body.tg-mc .mf-fuera-card, html.night body.tg-mc .mf-fuera-card, html body.tg-mc .reemplazo-info, html.night body.tg-mc .reemplazo-info, html body.tg-mc .gps-resultado, html.night body.tg-mc .gps-resultado, html body.tg-mc .log, html.night body.tg-mc .log { border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-mc .snd-item, html.night body.tg-mc .snd-item { border: 1px solid var(--tg-linea); border-radius: 12px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-mc .ultimo-registro-item, html.night body.tg-mc .ultimo-registro-item, html body.tg-mc #moverPondActual, html.night body.tg-mc #moverPondActual, html body.tg-mc .senders-pill-list, html.night body.tg-mc .senders-pill-list { border-radius: 8px; background: var(--tg-suave) !important; color: var(--tg-texto); } html body.tg-mc .snd-cinta-pill, html.night body.tg-mc .snd-cinta-pill, html body.tg-mc .mf-capa, html.night body.tg-mc .mf-capa, html body.tg-mc .sender-pill, html.night body.tg-mc .sender-pill, html body.tg-mc .modo-btn, html.night body.tg-mc .modo-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--tg-linea); border-radius: 8px; background: none; box-shadow: none; color: var(--tg-texto-2); font-family: Roboto, Arial, sans-serif; font-size: 13px; font-weight: 500; } html body.tg-mc .snd-cinta-pill.is-activo, html.night body.tg-mc .snd-cinta-pill.is-activo, html body.tg-mc .snd-cinta-pill.activa, html.night body.tg-mc .snd-cinta-pill.activa, html body.tg-mc .mf-capa.is-activo, html.night body.tg-mc .mf-capa.is-activo, html body.tg-mc .sender-pill.checked, html.night body.tg-mc .sender-pill.checked, html body.tg-mc .modo-btn.active, html.night body.tg-mc .modo-btn.active, html body.tg-mc .modo-btn.activo, html.night body.tg-mc .modo-btn.activo { border-color: var(--tg-tonal); background: var(--tg-tonal); color: var(--tg-tonal-texto); } html body.tg-mc .snd-cinta-n, html.night body.tg-mc .snd-cinta-n { border-radius: 999px; background: var(--tg-campo); color: var(--tg-texto-2); } html body.tg-mc #main-content .btn, html.night body.tg-mc #main-content .btn { border: 1px solid var(--tg-linea); border-radius: 8px; background: none; box-shadow: none; color: var(--tg-texto-2); } html body.tg-mc #main-content .btn:hover { background: var(--tg-hover); } html.night body.tg-mc #main-content .btn img { filter: invert(1); } html body.tg-mc .col-filter-btn, html.night body.tg-mc .col-filter-btn { background: none; box-shadow: none; color: var(--tg-texto-2); } body.tg-mc .register-col-form { flex: 1 1 0; min-width: 0; } body.tg-mc .register-col-side { flex: 0 0 300px; min-width: 0; } html body.tg-mc .sugerencia-row, html.night body.tg-mc .sugerencia-row { border-color: var(--tg-linea); background: none; color: var(--tg-texto); } html body.tg-mc .sugerencia-info, html.night body.tg-mc .sugerencia-info { color: var(--tg-texto); } html body.tg-mc #sugerenciasChirpstack, html.night body.tg-mc #sugerenciasChirpstack, html body.tg-mc #sugerenciasVacio, html.night body.tg-mc #sugerenciasVacio { border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-suave); box-shadow: none; color: var(--tg-texto); } html body.tg-mc .sugerencia-row, html.night body.tg-mc .sugerencia-row { background: var(--tg-hoja); } html body.tg-mc #sugerenciasAcciones, html.night body.tg-mc #sugerenciasAcciones { background: var(--tg-hoja); color: var(--tg-texto); } html body.tg-mc #main-content h3:not(.small), html.night body.tg-mc #main-content h3:not(.small) { color: var(--tg-texto); font-weight: 500; } html body.tg-mc .snd-cinta-pill.is-activo .snd-cinta-n, html.night body.tg-mc .snd-cinta-pill.is-activo .snd-cinta-n { background: var(--tg-primario); color: var(--tg-hoja); opacity: 1; } html body.tg-mc #main-content table, html.night body.tg-mc #main-content table { width: 100%; border: 1px solid var(--tg-linea); border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: visible; background: none; box-shadow: none; font-size: 14px; font-variant-numeric: tabular-nums; } html body.tg-mc #main-content table th, html.night body.tg-mc #main-content table th, html body.tg-mc #main-content table td, html.night body.tg-mc #main-content table td { height: 44px; box-sizing: border-box; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--tg-linea); text-align: left; } html body.tg-mc #main-content table tr:first-child th:first-child { border-top-left-radius: 16px; } html body.tg-mc #main-content table tr:first-child th:last-child { border-top-right-radius: 16px; } html body.tg-mc #main-content table tbody tr:last-child td { border-bottom: 0; } html body.tg-mc #main-content table tbody tr:hover td, html.night body.tg-mc #main-content table tbody tr:hover td { background: var(--tg-hover); } html body.tg-mc #main-content table th:last-child, html.night body.tg-mc #main-content table th:last-child, html body.tg-mc #main-content table td:last-child, html.night body.tg-mc #main-content table td:last-child { text-align: right; white-space: nowrap; } html body.tg-mc #tab-listado table th:nth-child(2), html body.tg-mc #tab-listado table td:nth-child(2), html body.tg-mc #tab-ponds table th:nth-child(3), html body.tg-mc #tab-ponds table td:nth-child(3), html body.tg-mc [id^="tab-finca-"] table th:nth-child(2), html body.tg-mc [id^="tab-finca-"] table td:nth-child(2), html body.tg-mc #tab-otros table th:nth-child(2), html body.tg-mc #tab-otros table td:nth-child(2) { text-align: right; } html body.tg-mc #main-content table thead, html.night body.tg-mc #main-content table thead, html body.tg-mc #main-content table tr, html.night body.tg-mc #main-content table tr { background: none !important; } html body.tg-mc #main-content table th, html.night body.tg-mc #main-content table th { background: var(--tg-hoja) !important; } html body.tg-mc #main-content [id^="tab-finca-"] table th:nth-child(2), html body.tg-mc #main-content [id^="tab-finca-"] table td:nth-child(2) { text-align: right; } html body.tg-mc #main-content table tbody td, html.night body.tg-mc #main-content table tbody td { background: none !important; } html body.tg-mc #main-content table tbody tr:hover td, html.night body.tg-mc #main-content table tbody tr:hover td { background: var(--tg-hover) !important; } html body.tg-mc #main-content .tabla-scroll-container table th, html.night body.tg-mc #main-content .tabla-scroll-container table th { top: 0; } html body.tg-mc .tabla-scroll-container, html.night body.tg-mc .tabla-scroll-container { border: 0; border-radius: 16px; background: none; box-shadow: none; } html body.tg-mc #main-content .historial-tabla th, html body.tg-mc #main-content .historial-tabla td, html.night body.tg-mc #main-content .historial-tabla th, html.night body.tg-mc #main-content .historial-tabla td { padding: 8px 12px; } html body.tg-mc #main-content #historialTabla th:nth-child(1), html body.tg-mc #main-content #historialTabla td:nth-child(1), html body.tg-mc #main-content #historialTablaInst th:nth-child(2), html body.tg-mc #main-content #historialTablaInst td:nth-child(2) { text-align: right; } html body.tg-mc #main-content #historialTabla td:nth-child(3), html body.tg-mc #main-content #historialTablaInst td:nth-child(4) { white-space: nowrap; } html body.tg-mc .env-card, html.night body.tg-mc .env-card { border: 0; border-radius: 16px; background: var(--tg-suave); box-shadow: none; color: var(--tg-texto); } html body.tg-mc .reg-equipo, html.night body.tg-mc .reg-equipo, html body.tg-mc .reporte-form, html.night body.tg-mc .reporte-form, html body.tg-mc .inst-form, html.night body.tg-mc .inst-form, html body.tg-mc .reg-vacio, html.night body.tg-mc .reg-vacio, html body.tg-mc .historial-card, html.night body.tg-mc .historial-card { border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-mc .mobile-cards .device-card, html.night body.tg-mc .mobile-cards .device-card { border: 1px solid var(--tg-linea); border-radius: 12px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-mc .gps-card-sub, html.night body.tg-mc .gps-card-sub, html body.tg-mc .gps-completo, html.night body.tg-mc .gps-completo { border-color: var(--tg-linea); border-radius: 12px; background: var(--tg-suave); color: var(--tg-texto); } html body.tg-mc .reg-equipo .uid, html.night body.tg-mc .reg-equipo .uid { color: var(--tg-texto); font-weight: 500; } html body.tg-mc .reg-dia, html.night body.tg-mc .reg-dia { border-radius: 8px; background: var(--tg-suave); color: var(--tg-texto); } html body.tg-mc .custum-file-upload, html.night body.tg-mc .custum-file-upload { border-color: var(--tg-linea); border-radius: 16px; background: var(--tg-suave); box-shadow: none; color: var(--tg-texto-2); } html body.tg-mc .reg-chip, html.night body.tg-mc .reg-chip, html body.tg-mc .inst-ribbon-btn, html.night body.tg-mc .inst-ribbon-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--tg-linea); border-radius: 8px; background: none; box-shadow: none; color: var(--tg-texto-2); font-family: Roboto, Arial, sans-serif; font-size: 13px; font-weight: 500; } html body.tg-mc .reg-chip.activo, html.night body.tg-mc .reg-chip.activo, html body.tg-mc .inst-ribbon-btn.selected, html.night body.tg-mc .inst-ribbon-btn.selected { border-color: var(--tg-tonal); background: var(--tg-tonal); color: var(--tg-tonal-texto); } html body.tg-mc .reg-chip .n, html.night body.tg-mc .reg-chip .n { color: inherit; opacity: .75; } html body.tg-mc .reg-btn, html.night body.tg-mc .reg-btn, html body.tg-mc .env-btn, html.night body.tg-mc .env-btn { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tg-primario); box-shadow: none; color: var(--tg-hoja); font-family: Roboto, Arial, sans-serif; font-weight: 500; } html body.tg-mc .btn-accion, html.night body.tg-mc .btn-accion, html body.tg-mc .historial-tabla .btn-accion, html.night body.tg-mc .historial-tabla .btn-accion, html body.tg-mc .historial-filtros button, html.night body.tg-mc .historial-filtros button, html body.tg-mc .foto-btn, html.night body.tg-mc .foto-btn, html body.tg-mc #btnCapturarGps, html.night body.tg-mc #btnCapturarGps, html body.tg-mc #btnCapturarGpsInst, html.night body.tg-mc #btnCapturarGpsInst, html body.tg-mc .gps-card-toggle, html.night body.tg-mc .gps-card-toggle { border: 1px solid var(--tg-linea); border-radius: 8px; background: none; background-image: none; box-shadow: none; color: var(--tg-texto-2); font-family: Roboto, Arial, sans-serif; font-weight: 500; } html body.tg-mc .historial-tabla .btn-accion img, html.night body.tg-mc .historial-tabla .btn-accion img { opacity: 1; } html.night body.tg-mc .historial-tabla .btn-accion img { filter: brightness(0) invert(1); } html.night body.tg-mc .historial-tabla .btn-accion { color: var(--tg-texto); } html body.tema-google .modal-hist:not(#tgNada):not(#tgNada) input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.night body.tema-google .modal-hist:not(#tgNada):not(#tgNada) input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html body.tema-google .modal-hist:not(#tgNada):not(#tgNada) .login-field input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.night body.tema-google .modal-hist:not(#tgNada):not(#tgNada) .login-field input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html body.tg-mc #main-content input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.night body.tg-mc #main-content input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { -webkit-box-shadow: 0 0 0 1000px var(--tg-hoja) inset !important; box-shadow: 0 0 0 1000px var(--tg-hoja) inset !important; -webkit-text-fill-color: var(--tg-texto) !important; transition: background-color 99999s ease-out !important; } html body.tg-mc .modal-hist table th, html.night body.tg-mc .modal-hist table th { position: static; } /* ===================== Etapa 8.4: Equipos y mapas ===================== */ html body.tg-mc, html.night body.tg-mc { background: var(--tg-fondo) !important; overflow-x: clip; } html body.tg-mc #last-update, html.night body.tg-mc #last-update { margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tg-texto-2); font-size: 12px; font-weight: 400; text-align: left; } html body.tg-mc .tabs, html.night body.tg-mc .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; max-width: 100%; } body.tg-mc .tabs::-webkit-scrollbar { display: none; } body.tg-mc .tabs-grupo { display: flex; flex: none; flex-wrap: nowrap; } html body.tg-mc .tabs .tab-btn, html.night body.tg-mc .tabs .tab-btn { flex: none; white-space: nowrap; font: 500 14px Roboto, Arial, sans-serif; } body.tg-mc .cards-container { gap: 8px; } html body.tg-mc .card.kpi-card, html.night body.tg-mc .card.kpi-card { padding: 12px 14px; border: 0; border-radius: 16px; background: var(--tg-suave) !important; box-shadow: none; color: var(--tg-texto); } html body.tg-mc .card.kpi-card .card-number, html.night body.tg-mc .card.kpi-card .card-number { color: inherit; font-size: 26px; font-weight: 400; } html body.tg-mc .card.kpi-card .card-text, html.night body.tg-mc .card.kpi-card .card-text { color: inherit; font-weight: 500; opacity: 1; } html body.tg-mc .card.kpi-card.online-card, html.night body.tg-mc .card.kpi-card.online-card { background: var(--tg-ok) !important; color: var(--tg-ok-texto); } html body.tg-mc .card.kpi-card.offline-card, html.night body.tg-mc .card.kpi-card.offline-card { background: var(--tg-error) !important; color: var(--tg-error-texto); } html body.tg-mc .reg-btn, html.night body.tg-mc .reg-btn, html body.tg-mc .env-btn, html.night body.tg-mc .env-btn { min-height: 44px; border: 0; border-radius: 999px; background: var(--tg-primario) !important; background-image: none !important; box-shadow: none; color: var(--tg-hoja) !important; font-weight: 500; } /* Listado de devEUI: cada equipo como tarjeta; la cabecera se conserva por los filtros de Pond y Origen */ html body.tg-mc #listadoTabla table, html.night body.tg-mc #listadoTabla table { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } body.tg-mc #listadoTabla thead, body.tg-mc #listadoTabla tbody { display: block; } html body.tg-mc #listadoTabla tr, html.night body.tg-mc #listadoTabla tr { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr) auto; align-items: center; gap: 6px; background: none; } html body.tg-mc #listadoTabla thead tr { padding: 0 10px 6px; } html body.tg-mc #listadoTabla tbody tr, html.night body.tg-mc #listadoTabla tbody tr { box-sizing: border-box; min-height: 56px; margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--tg-linea); border-radius: 12px; background: var(--tg-hoja); } html body.tg-mc #main-content #listadoTabla th, html.night body.tg-mc #main-content #listadoTabla th, html body.tg-mc #main-content #listadoTabla td, html.night body.tg-mc #main-content #listadoTabla td { position: static; display: block; width: auto; height: auto; min-width: 0; padding: 0; border: 0; background: none; font-size: 13px; text-align: left; } html body.tg-mc #main-content #listadoTabla th:nth-child(1), html body.tg-mc #main-content #listadoTabla td:nth-child(1), html body.tg-mc #main-content #listadoTabla th:nth-child(5), html body.tg-mc #main-content #listadoTabla td:nth-child(5), html body.tg-mc #main-content #listadoTabla th:nth-child(6), html body.tg-mc #main-content #listadoTabla td:nth-child(6) { display: none; } html body.tg-mc #main-content #listadoTabla td:nth-child(2) { font-weight: 500; } html body.tg-mc #main-content #listadoTabla th:last-child, html body.tg-mc #main-content #listadoTabla td:last-child { text-align: right; white-space: nowrap; } /* botón principal de los formularios */ html body.tg-mc:not(#tgNada) #main-content button[type=submit], html.night body.tg-mc:not(#tgNada) #main-content button[type=submit], html body.tg-mc:not(#tgNada) #main-content input[type=submit], html.night body.tg-mc:not(#tgNada) #main-content input[type=submit] { min-height: 44px; border: 0; border-radius: 999px; background: var(--tg-primario) !important; background-image: none !important; box-shadow: none; color: var(--tg-hoja) !important; font: 500 14px Roboto, Arial, sans-serif; } /* ===================== Iconos Material de la barra inferior ===================== */ html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Sync.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Sync.ico"] { content: url("/static/images/md/b_sync_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Sync.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Sync.ico"] { content: url("/static/images/md/b_sync_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncFILL.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncFILL.ico"] { content: url("/static/images/md/b_sync_lleno_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncFILL.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/SyncFILL.ico"] { content: url("/static/images/md/b_sync_lleno_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/LocationLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Location.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/LocationLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Location.ico"] { content: url("/static/images/md/b_location_on_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/LocationLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Location.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/LocationLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Location.ico"] { content: url("/static/images/md/b_location_on_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Processor.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Processor.ico"] { content: url("/static/images/md/b_memory_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Processor.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Processor.ico"] { content: url("/static/images/md/b_memory_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorFILL.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorFILL.ico"] { content: url("/static/images/md/b_memory_lleno_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorFILL.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/ProcessorFILL.ico"] { content: url("/static/images/md/b_memory_lleno_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time MachineLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time Machine.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time%20MachineLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time%20Machine.ico"] { content: url("/static/images/md/b_history_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time MachineLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time Machine.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time%20MachineLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time%20Machine.ico"] { content: url("/static/images/md/b_history_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time MachineFILL.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time%20MachineFILL.ico"] { content: url("/static/images/md/b_history_lleno_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time MachineFILL.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Time%20MachineFILL.ico"] { content: url("/static/images/md/b_history_lleno_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/DownloadLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Download.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/DownloadLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Download.ico"] { content: url("/static/images/md/b_download_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/DownloadLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Download.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/DownloadLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Download.ico"] { content: url("/static/images/md/b_download_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/UploadLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Upload.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/UploadLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Upload.ico"] { content: url("/static/images/md/b_upload_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/UploadLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Upload.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/UploadLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Upload.ico"] { content: url("/static/images/md/b_upload_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Map.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Map.ico"] { content: url("/static/images/md/b_map_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Map.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Map.ico"] { content: url("/static/images/md/b_map_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapFILL.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapFILL.ico"] { content: url("/static/images/md/b_map_lleno_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapFILL.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/MapFILL.ico"] { content: url("/static/images/md/b_map_lleno_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Tolva.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Tolva.ico"] { content: url("/static/images/md/b_tolva_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Tolva.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Tolva.ico"] { content: url("/static/images/md/b_tolva_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaFILL.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaFILL.ico"] { content: url("/static/images/md/b_tolva_lleno_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaFILL.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/TolvaFILL.ico"] { content: url("/static/images/md/b_tolva_lleno_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Add.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddLINE.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Add.ico"] { content: url("/static/images/md/b_add_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Add.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddLINE.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/Add.ico"] { content: url("/static/images/md/b_add_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddFILL.ico"], html body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddFILL.ico"] { content: url("/static/images/md/b_add_lleno_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddFILL.ico"], html.night body.tg-movil:not(#tgNada) #bottom-bar img[src*="/AddFILL.ico"] { content: url("/static/images/md/b_add_lleno_noche.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar [data-tab="tab-hidrofono"] img.ico-line { content: url("/static/images/md/b_graphic_eq_dia.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar [data-tab="tab-hidrofono"] img.ico-fill { content: url("/static/images/md/b_graphic_eq_lleno_dia.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar #btnHomeMobile img { content: url("/static/images/md/b_home_lleno_dia.svg"); filter: none !important; } html body.tg-movil:not(#tgNada) #bottom-bar #bottomUserBtn img { content: url("/static/images/md/b_person_dia.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar [data-tab="tab-hidrofono"] img.ico-line { content: url("/static/images/md/b_graphic_eq_noche.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar [data-tab="tab-hidrofono"] img.ico-fill { content: url("/static/images/md/b_graphic_eq_lleno_noche.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar #btnHomeMobile img { content: url("/static/images/md/b_home_lleno_noche.svg"); filter: none !important; } html.night body.tg-movil:not(#tgNada) #bottom-bar #bottomUserBtn img { content: url("/static/images/md/b_person_noche.svg"); filter: none !important; } html body.tg-movil .bottom-bar-tab-btn.active, html.night body.tg-movil .bottom-bar-tab-btn.active { background: var(--tg-activo); box-shadow: none; color: var(--tg-activo-texto); } html body.tg-movil .bottom-bar-tab-btn .tab-txt, html.night body.tg-movil .bottom-bar-tab-btn .tab-txt { font-family: Roboto, Arial, sans-serif; } /* Inicio: su botón no lleva id; acciones de la barra del Editor de Mapa; sin degradado en la pestaña activa */ html body.tg-inicio:not(#tgNada) #bottom-bar > a.active img { content: url("/static/images/md/b_home_lleno_dia.svg"); filter: none !important; } html.night body.tg-inicio:not(#tgNada) #bottom-bar > a.active img { content: url("/static/images/md/b_home_lleno_noche.svg"); filter: none !important; } html body.tg-movil #bottom-bar .bottom-bar-accion, html.night body.tg-movil #bottom-bar .bottom-bar-accion { border: 0; background: var(--tg-suave) !important; background-image: none !important; box-shadow: none; color: var(--tg-texto) !important; font: 500 14px Roboto, Arial, sans-serif; } html body.tg-movil #bottom-bar .bottom-bar-accion span, html.night body.tg-movil #bottom-bar .bottom-bar-accion span { color: var(--tg-texto) !important; } html body.tg-movil .bottom-bar-tab-btn.active, html.night body.tg-movil .bottom-bar-tab-btn.active { background-image: none !important; } /* pantallas con pestañas en la barra inferior: sin las de arriba */ html body.tg-mc:has(#bottom-bar.bottom-bar-tabs) .tabs, html.night body.tg-mc:has(#bottom-bar.bottom-bar-tabs) .tabs { display: none; } /* Registrar nodo: GPS, Tolva e Hidrófono */ html body.tg-mc .gps-modo-tabs .modo-btn, html.night body.tg-mc .gps-modo-tabs .modo-btn { min-height: 40px; border: 1px solid var(--tg-linea); border-radius: 8px; background: none !important; background-image: none !important; box-shadow: none; color: var(--tg-texto-2); font: 500 14px Roboto, Arial, sans-serif; } html body.tg-mc .gps-modo-tabs .modo-btn.active, html.night body.tg-mc .gps-modo-tabs .modo-btn.active { border-color: transparent; background: var(--tg-activo) !important; color: var(--tg-activo-texto); } html body.tg-mc:not(#tgNada) .gps-btn, html.night body.tg-mc:not(#tgNada) .gps-btn { min-height: 44px; border: 0; border-radius: 999px; background: var(--tg-primario) !important; background-image: none !important; box-shadow: none; color: var(--tg-hoja) !important; font: 500 14px Roboto, Arial, sans-serif; } html body.tg-mc:not(#tgNada) .gps-btn[style*="7a8699"], html.night body.tg-mc:not(#tgNada) .gps-btn[style*="7a8699"] { background: var(--tg-suave) !important; color: var(--tg-texto) !important; } html body.tg-mc:not(#tgNada) .gps-btn:disabled, html.night body.tg-mc:not(#tgNada) .gps-btn:disabled { background: var(--tg-suave) !important; color: var(--tg-texto-2) !important; opacity: .7; } /* barra inferior: cualquier campo de texto, con los colores del tema */ html.night body.tg-movil:not(#tgNada) #bottom-bar input, html body.tg-movil:not(#tgNada) #bottom-bar input { border: 0; background-color: var(--tg-campo) !important; box-shadow: none; color: var(--tg-texto) !important; } /* ===================== Etapa 8.6: Monitor LW y Monitor SS (body.tg-monitor) ===================== Solo aspecto: los botones de comando conservan su marcado, sus clases y su ancho de deslizamiento. */ html body.tg-monitor #controls .small, html.night body.tg-monitor #controls .small, html body.tg-monitor #main-content h3.small, html.night body.tg-monitor #main-content h3.small { margin: 0 0 12px; color: var(--tg-texto-2); font-size: 12px; font-weight: 400; opacity: 1; } /* elegir finca */ html body.tg-monitor .finca-sel-titulo, html.night body.tg-monitor .finca-sel-titulo { color: var(--tg-texto-2); font-size: 14px; font-weight: 500; } html body.tg-monitor .finca-sel-card, html.night body.tg-monitor .finca-sel-card { border: 1px solid var(--tg-linea); border-radius: 16px; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); } html body.tg-monitor .finca-sel-nombre, html.night body.tg-monitor .finca-sel-nombre { font-size: 18px; font-weight: 500; } html body.tg-monitor .finca-sel-total, html.night body.tg-monitor .finca-sel-total { color: var(--tg-texto-2); font-size: 13px; font-weight: 400; } html body.tg-monitor .finca-sel-todas, html.night body.tg-monitor .finca-sel-todas { color: var(--tg-primario); font-weight: 500; } html body.tg-monitor .finca-barra button, html.night body.tg-monitor .finca-barra button { height: 32px; padding: 0 12px; border: 1px solid var(--tg-linea); border-radius: 8px; background: none; box-shadow: none; color: var(--tg-texto-2); font: 500 13px Roboto, Arial, sans-serif; } html body.tg-monitor .finca-barra-nombre, html.night body.tg-monitor .finca-barra-nombre { color: var(--tg-texto); font-size: 18px; font-weight: 500; } /* tarjetas de resumen: mismos colores que en escritorio */ body.tg-monitor .cards-container { margin-bottom: 12px; gap: 8px; } body.tg-mon-lw .cards-container .all-card { grid-column: 1 / -1; } body.tg-mon-ss .cards-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } html body.tg-monitor .card, html.night body.tg-monitor .card { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; min-width: 0; padding: 8px 12px; border: 2px solid transparent; border-radius: 16px; background: var(--tg-campo); box-shadow: none; color: var(--tg-texto); transform: none; } html body.tg-monitor .card .card-number, html.night body.tg-monitor .card .card-number { color: inherit; font-size: 22px; font-weight: 400; line-height: 1.2; } html body.tg-monitor .card .card-text, html.night body.tg-monitor .card .card-text { overflow: hidden; color: inherit; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } html body.tg-monitor .card.online-card, html.night body.tg-monitor .card.online-card { background: var(--tg-ok); color: var(--tg-ok-texto); } html body.tg-monitor .card.offline-card, html.night body.tg-monitor .card.offline-card { background: var(--tg-error); color: var(--tg-error-texto); } html body.tg-monitor .card.low-battery-card, html.night body.tg-monitor .card.low-battery-card, html body.tg-monitor .card.SCC-err-card, html.night body.tg-monitor .card.SCC-err-card { background: var(--tg-aviso); color: var(--tg-aviso-texto); } html body.tg-monitor .card.active, html.night body.tg-monitor .card.active, html body.tg-monitor .card.activa, html.night body.tg-monitor .card.activa, html body.tg-monitor .card.selected, html.night body.tg-monitor .card.selected { border-color: var(--tg-primario); } /* acciones masivas */ body.tg-monitor .mass-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } body.tg-monitor .mass-actions img { display: none; } html body.tg-monitor .mass-actions button, html.night body.tg-monitor .mass-actions button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; box-shadow: none; font: 500 14px Roboto, Arial, sans-serif; white-space: nowrap; transform: none; } html body.tg-monitor #apagarTodosBtn, html.night body.tg-monitor #apagarTodosBtn { background: var(--tg-peligro) !important; background-image: none !important; color: var(--tg-peligro-texto) !important; } html body.tg-monitor #encenderTodosBtn, html.night body.tg-monitor #encenderTodosBtn { background: var(--tg-ok) !important; background-image: none !important; color: var(--tg-ok-texto) !important; } html body.tg-monitor #pingOfflineBtn, html.night body.tg-monitor #pingOfflineBtn { flex-basis: 100%; border: 1px solid var(--tg-linea); background: none !important; background-image: none !important; color: var(--tg-primario) !important; } body.tg-monitor #pingOfflineBtn .tg-ping { display: inline-block; font: normal 20px/1 'Material Symbols Outlined'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } body.tg-monitor #pingOfflineBtn .tg-ping::before { content: "autorenew"; } body.tg-monitor #pingOfflineBtn.enviando .tg-ping { animation: ping-giro 1s linear infinite; } /* tarjetas de equipo */ html body.tg-monitor .device-card, html.night body.tg-monitor .device-card { gap: 8px; padding: 12px 14px; font-family: Roboto, Arial, sans-serif; } html body.tg-monitor .device-header, html.night body.tg-monitor .device-header { align-items: center; color: var(--tg-texto); font-size: 14px; font-weight: 500; } html body.tg-monitor .device-row, html.night body.tg-monitor .device-row { align-items: center; color: var(--tg-texto); } html body.tg-monitor .device-row > span:first-child, html.night body.tg-monitor .device-row > span:first-child { color: var(--tg-texto-2); } html body.tg-monitor .status-pill, html.night body.tg-monitor .status-pill { padding: 2px 8px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; } html body.tg-monitor .status-pill.online, html.night body.tg-monitor .status-pill.online { background: var(--tg-ok); color: var(--tg-ok-texto); } html body.tg-monitor .status-pill.offline, html.night body.tg-monitor .status-pill.offline { background: var(--tg-error); color: var(--tg-error-texto); } html body.tg-monitor .mobile-cards .device-card.pressable:active, html.night body.tg-monitor .mobile-cards .device-card.pressable:active { background: var(--tg-suave); } /* tolvas agrupadas: la regla general de tarjeta no debe borrar su borde de color */ html body.tg-monitor .mobile-cards .device-card.grupo-tolva, html.night body.tg-monitor .mobile-cards .device-card.grupo-tolva { border-left: 5px solid var(--grp-accent); } html body.tg-monitor .hidro-header-card, html.night body.tg-monitor .hidro-header-card { border-radius: 12px; font-family: Roboto, Arial, sans-serif; font-weight: 500; } /* acciones al deslizar: mismo tamaño, con los colores e iconos de escritorio */ body.tg-monitor .card-swipe { border-radius: 12px; } html body.tg-monitor .card-actions button, html body.tg-monitor .card-actions-left button, html.night body.tg-monitor .card-actions button, html.night body.tg-monitor .card-actions-left button { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; box-shadow: none; } body.tg-monitor .card-actions button img, body.tg-monitor .card-actions-left button img { display: none; } body.tg-monitor .card-actions button::before, body.tg-monitor .card-actions-left button::before { display: inline-block; font: normal 26px/1 'Material Symbols Outlined'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; content: "power_settings_circle"; } html body.tg-monitor .card-actions .action-btn-stop, html.night body.tg-monitor .card-actions .action-btn-stop { background: var(--tg-error); color: var(--tg-error-texto); } html body.tg-monitor .card-actions .action-btn-start, html.night body.tg-monitor .card-actions .action-btn-start { background: var(--tg-ok); color: var(--tg-ok-texto); } html body.tg-monitor .card-actions-left .ping-btn, html.night body.tg-monitor .card-actions-left .ping-btn { background: var(--tg-tonal); color: var(--tg-tonal-texto); } body.tg-monitor .card-actions-left .ping-btn::before { content: "autorenew"; } body.tg-monitor .card-actions-left .ping-btn.enviando::before { animation: ping-giro 1s linear infinite; } @media (prefers-reduced-motion: reduce) { body.tg-monitor #pingOfflineBtn.enviando .tg-ping, body.tg-monitor .card-actions-left .ping-btn.enviando::before { animation: none; opacity: .5; } } /* el texto largo no se corta: la tarjeta crece a dos líneas */ html body.tg-monitor .card.SCC-err-card, html.night body.tg-monitor .card.SCC-err-card { align-items: center; } html body.tg-monitor .card.SCC-err-card .card-text, html.night body.tg-monitor .card.SCC-err-card .card-text { line-height: 1.2; white-space: normal; } /* selector de tipo en la ficha: solo la opción elegida lleva texto, para que entren las tres */ html body.tg-monitor .modal-hist:not(#tgNada):not(#tgNada) .clase-btn:not(.activo) .clase-btn-txt { display: none; } /* Actualizar firmware: botón principal del tema */ html body.tg-monitor .modal-hist:not(#tgNada):not(#tgNada) #otaBtn, html.night body.tg-monitor .modal-hist:not(#tgNada):not(#tgNada) #otaBtn { border: 0; border-radius: 999px; background: var(--tg-primario) !important; background-image: none !important; box-shadow: none; color: var(--tg-hoja) !important; font: 500 14px Roboto, Arial, sans-serif; } /* encabezado de hidrófono: tonal, para que su icono se vea (intemperie y sin clasificar conservan su color) */ html body.tg-monitor .hidro-header-card.hidro-header-hidrofono, html.night body.tg-monitor .hidro-header-card.hidro-header-hidrofono { border: 0; background: var(--tg-tonal); color: var(--tg-tonal-texto); } /* batería: mismos iconos Material que en escritorio (el SVG viejo queda solo en pantallas sin tema) */ body.tg-movil .bat-svg { display: none; } body.tg-movil .tg-bat { display: inline-block; color: #444746; font: normal 24px/1 'Material Symbols Outlined'; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; } html.night body.tg-movil .tg-bat { color: #c4c7c5; } body.tg-movil .tg-bat.bat-b0::before { content: "battery_android_0"; } body.tg-movil .tg-bat.bat-b1::before { content: "battery_android_frame_1"; } body.tg-movil .tg-bat.bat-b2::before { content: "battery_android_frame_2"; } body.tg-movil .tg-bat.bat-b3::before { content: "battery_android_frame_3"; } body.tg-movil .tg-bat.bat-b4::before { content: "battery_android_frame_4"; } body.tg-movil .tg-bat.bat-b5::before { content: "battery_android_frame_5"; } body.tg-movil .tg-bat.bat-b6::before { content: "battery_android_frame_6"; } body.tg-movil .tg-bat.bat-b7::before { content: "battery_android_frame_full"; } /* ===================== Fondo gris con tarjetas blancas (body.tg-mc; KPI conserva su fondo de hoja) ===================== */ body.tg-mc { --tg-sombra-tarjeta: 0 1px 2px rgba(60, 64, 67, .14); } html.night body.tg-mc { --tg-sombra-tarjeta: none; } html body.tg-mc .mobile-cards .device-card, html.night body.tg-mc .mobile-cards .device-card, html body.tg-mc .finca-sel-card, html.night body.tg-mc .finca-sel-card, html body.tg-mc .side-card, html.night body.tg-mc .side-card, html body.tg-mc .mover-equipo-box, html.night body.tg-mc .mover-equipo-box, html body.tg-mc .area-block, html.night body.tg-mc .area-block, html body.tg-mc .mf-panel, html.night body.tg-mc .mf-panel, html body.tg-mc .mf-edit, html.night body.tg-mc .mf-edit, html body.tg-mc .mf-fuera-card, html.night body.tg-mc .mf-fuera-card, html body.tg-mc .reemplazo-info, html.night body.tg-mc .reemplazo-info, html body.tg-mc .gps-resultado, html.night body.tg-mc .gps-resultado, html body.tg-mc .log, html.night body.tg-mc .log, html body.tg-mc .snd-item, html.night body.tg-mc .snd-item, html body.tg-mc .reg-equipo, html.night body.tg-mc .reg-equipo, html body.tg-mc .reporte-form, html.night body.tg-mc .reporte-form, html body.tg-mc .inst-form, html.night body.tg-mc .inst-form, html body.tg-mc .reg-vacio, html.night body.tg-mc .reg-vacio, html body.tg-mc .historial-card, html.night body.tg-mc .historial-card { border-color: transparent; background: var(--tg-hoja); box-shadow: var(--tg-sombra-tarjeta); } /* usaban el mismo gris del fondo: pasan a tarjeta */ html body.tg-mc .env-card, html.night body.tg-mc .env-card, html body.tg-monitor .card.all-card, html.night body.tg-monitor .card.all-card { background: var(--tg-hoja); box-shadow: var(--tg-sombra-tarjeta); } /* tolvas agrupadas: la línea de arriba vuelve transparente el borde; se repone el color */ html body.tg-monitor .mobile-cards .device-card.grupo-tolva, html.night body.tg-monitor .mobile-cards .device-card.grupo-tolva { border-left: 5px solid var(--grp-accent); } /* cabecera fija de tabla: opaca y del color de lo que hay detrás */ html body.tg-mc #main-content table th, html.night body.tg-mc #main-content table th { background: var(--tg-fondo) !important; } html body.tg-mc #main-content .modal-hist table th, html.night body.tg-mc #main-content .modal-hist table th { background: var(--tg-hoja) !important; } html body.tg-mc #listadoTabla tbody tr, html.night body.tg-mc #listadoTabla tbody tr { border-color: transparent; box-shadow: var(--tg-sombra-tarjeta); } html body.tg-mc .gps-completo, html.night body.tg-mc .gps-completo { border-color: transparent; background: var(--tg-hoja) !important; box-shadow: var(--tg-sombra-tarjeta); } html body.tg-mc .card.kpi-card:not(.online-card):not(.offline-card):not(.low-battery-card):not(.SCC-err-card), html.night body.tg-mc .card.kpi-card:not(.online-card):not(.offline-card):not(.low-battery-card):not(.SCC-err-card) { background: var(--tg-hoja) !important; box-shadow: var(--tg-sombra-tarjeta); } html body.tg-mc #main-content #listadoTabla tbody tr, html.night body.tg-mc #main-content #listadoTabla tbody tr { background: var(--tg-hoja) !important; } html body.tg-mc .card.kpi-card.low-battery-card, html.night body.tg-mc .card.kpi-card.low-battery-card, html body.tg-mc .card.kpi-card.SCC-err-card, html.night body.tg-mc .card.kpi-card.SCC-err-card { background: var(--tg-aviso) !important; color: var(--tg-aviso-texto); } /* ===================== Mismo aspecto que escritorio ===================== */ /* Apagar y Encender todos */ html body.tg-monitor:not(#tgNada) #apagarTodosBtn, html.night body.tg-monitor:not(#tgNada) #apagarTodosBtn { background: var(--tg-error) !important; background-image: none !important; color: var(--tg-error-texto) !important; } html body.tg-monitor:not(#tgNada) #encenderTodosBtn, html.night body.tg-monitor:not(#tgNada) #encenderTodosBtn { background: var(--tg-ok) !important; background-image: none !important; color: var(--tg-ok-texto) !important; } /* volver arriba: FAB con flecha de Material Symbols */ html body.tg-movil #scrollTopBtn, html.night body.tg-movil #scrollTopBtn { width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--tg-tonal) !important; background-image: none !important; box-shadow: var(--tg-sombra); color: var(--tg-tonal-texto); } body.tg-movil #scrollTopBtn svg { display: none; } body.tg-movil #scrollTopBtn::before { font: normal 24px/1 'Material Symbols Outlined'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; content: "arrow_upward"; } /* zoom del gráfico */ html body:is(.tg-movil, .tg-movil-modales) .zoom-btn, html.night body:is(.tg-movil, .tg-movil-modales) .zoom-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--tg-linea); border-radius: 50%; background: none !important; background-image: none !important; box-shadow: none; } html body:is(.tg-movil, .tg-movil-modales) .zoom-btn:hover { background: var(--tg-hover) !important; } body:is(.tg-movil, .tg-movil-modales) .zoom-btn img { width: 20px; height: 20px; } body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom%20In"], body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom In"] { content: url("/static/images/md/zoom_in.svg"); } body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom%20Out"], body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom Out"] { content: url("/static/images/md/zoom_out.svg"); } html.night body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom%20In"], html.night body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom In"] { content: url("/static/images/md/zoom_in_noche.svg"); } html.night body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom%20Out"], html.night body:is(.tg-movil, .tg-movil-modales) .zoom-btn img[src*="Zoom Out"] { content: url("/static/images/md/zoom_out_noche.svg"); } /* notificaciones: filas con icono tonal, título y detalle */ html body:is(.tg-movil, .tg-movil-modales) .notif-fila, html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila { border: 1px solid var(--tg-linea); border-radius: 12px; background: var(--tg-hoja); box-shadow: none; } html body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-msg, html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-msg { color: var(--tg-texto); } html body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-fecha, html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-fecha, html body:is(.tg-movil, .tg-movil-modales) .notif-vacio, html.night body:is(.tg-movil, .tg-movil-modales) .notif-vacio { color: var(--tg-texto-2); } html body:is(.tg-movil, .tg-movil-modales) #btnTogglePush, html.night body:is(.tg-movil, .tg-movil-modales) #btnTogglePush { border: 0 !important; background: var(--tg-tonal) !important; color: var(--tg-tonal-texto) !important; } html body:is(.tg-movil, .tg-movil-modales) #btnTestPush, html.night body:is(.tg-movil, .tg-movil-modales) #btnTestPush { border: 1px solid var(--tg-linea) !important; background: none !important; color: var(--tg-texto-2) !important; } html body:is(.tg-movil, .tg-movil-modales) .notif-fila, html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila { align-items: flex-start; gap: 12px; margin-bottom: 0; padding: 10px 12px; opacity: 1; } html body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-tipo-ico { display: none; } html body:is(.tg-movil, .tg-movil-modales) .notif-tg-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tg-tonal); color: var(--tg-tonal-texto); } html body:is(.tg-movil, .tg-movil-modales) .notif-tg-ico.mal { background: var(--tg-error); color: var(--tg-error-texto); } html body:is(.tg-movil, .tg-movil-modales) .notif-tg-ico.aviso { background: var(--tg-aviso); color: var(--tg-aviso-texto); } html body:is(.tg-movil, .tg-movil-modales) .notif-tg-ico.bien { background: var(--tg-ok); color: var(--tg-ok-texto); } .notif-tg-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html body:is(.tg-movil, .tg-movil-modales) .notif-tg-titulo { display: block; color: var(--tg-texto); font-size: 14px; font-weight: 500; line-height: 1.3; } html body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-msg, html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-msg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; color: var(--tg-texto-2); font-size: 13px; line-height: 1.35; } html body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-fecha, html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-fecha { margin-top: 3px; font-size: 12px; } /* las leídas se distinguen por el título, sin apagar toda la fila */ html body:is(.tg-movil, .tg-movil-modales) .notif-fila.leida .notif-tg-titulo { font-weight: 400; } html body:is(.tg-movil, .tg-movil-modales) .notif-fila:not(.leida), html.night body:is(.tg-movil, .tg-movil-modales) .notif-fila:not(.leida) { border-color: var(--tg-primario); } html body:is(.tg-movil, .tg-movil-modales) .notif-fila .notif-check.leida { display: none; } html body:is(.tg-movil, .tg-movil-modales) .notif-seccion-titulo, html.night body:is(.tg-movil, .tg-movil-modales) .notif-seccion-titulo { color: var(--tg-texto-2); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; } /* ===================== Menú rápido: mismos iconos que Inicio, relleno en el módulo activo ===================== */ html body:is(.tg-movil, .tg-movil-modales) .quick-menu-overlay.show { background: rgba(0, 0, 0, .42); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-panel, html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-panel { box-sizing: border-box; border-radius: 28px 28px 0 0; background: var(--tg-hoja); box-shadow: none; color: var(--tg-texto); font-family: Roboto, Arial, sans-serif; } body:is(.tg-movil, .tg-movil-modales) .quick-menu-handle::before { width: 32px; background: var(--tg-texto-2); opacity: .4; } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-group-title, html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-group-title { margin-bottom: 4px; padding: 6px 4px; color: var(--tg-texto-2); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; } body:is(.tg-movil, .tg-movil-modales) .quick-menu-group-title:active { background: var(--tg-hover); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-group-chevron { width: 18px; height: 18px; } body:is(.tg-movil, .tg-movil-modales) .quick-menu-grid { gap: 4px; } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item, html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item { gap: 6px; padding: 10px 4px; border-radius: 16px; color: var(--tg-texto); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item:active { background: var(--tg-hover); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active, html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active { background: var(--tg-tonal); color: var(--tg-tonal-texto); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item span { font-size: 12px; font-weight: 500; line-height: 1.25; } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item img { filter: brightness(0) opacity(.72); } html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item img { filter: invert(1) opacity(.85); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active img { filter: brightness(0) opacity(.85); } html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active img { filter: invert(1); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/monitor"] img { content: url("/static/images/md/monitor.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/monitor"] img { content: url("/static/images/md/monitor_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/mqtt"] img { content: url("/static/images/md/terminal.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/mqtt"] img { content: url("/static/images/md/terminal_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/kpi"] img { content: url("/static/images/md/analytics.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/kpi"] img { content: url("/static/images/md/analytics_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/sensores"] img { content: url("/static/images/md/camaron.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/sensores"] img { content: url("/static/images/md/camaron_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/kpi_sensores"] img { content: url("/static/images/md/analytics.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/kpi_sensores"] img { content: url("/static/images/md/analytics_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/devices"] img { content: url("/static/images/md/hub.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/devices"] img { content: url("/static/images/md/hub_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/register_device"] img { content: url("/static/images/md/add_circle.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/register_device"] img { content: url("/static/images/md/add_circle_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/map_editor"] img { content: url("/static/images/md/edit_location_alt.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/map_editor"] img { content: url("/static/images/md/edit_location_alt_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/enviadores"] img { content: url("/static/images/md/cell_tower.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/enviadores"] img { content: url("/static/images/md/cell_tower_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/mapa_finca"] img { content: url("/static/images/md/map.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/mapa_finca"] img { content: url("/static/images/md/map_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/historial_gps"] img { content: url("/static/images/md/location_on.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/historial_gps"] img { content: url("/static/images/md/location_on_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/historial_envios"] img { content: url("/static/images/md/history.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/historial_envios"] img { content: url("/static/images/md/history_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/registro_equipo"] img { content: url("/static/images/md/list_alt.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/registro_equipo"] img { content: url("/static/images/md/list_alt_fill.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/reportes_mantenimiento"] img { content: url("/static/images/md/assignment.svg"); } body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/reportes_mantenimiento"] img { content: url("/static/images/md/assignment_fill.svg"); } /* anillo de la pulsación larga: visible sobre el círculo claro de Inicio */ body:is(.tg-movil, .tg-movil-modales) .home-progress-ring circle { stroke: var(--tg-primario); } body:is(.tg-movil, .tg-movil-modales) .home-progress-ring.completed circle { stroke: var(--tg-ok-texto); } /* estos dos los tomaba la regla general de iconos: aquí deben coincidir con Inicio */ html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/register_device"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/register_device"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/add_circle.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/register_device"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/register_device"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/add_circle_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/registro_equipo"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/registro_equipo"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/list_alt.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/registro_equipo"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/registro_equipo"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/list_alt_fill.svg"); } /* el panel tapa la barra inferior: no necesita reservarle espacio */ html body:is(.tg-movil, .tg-movil-modales) .quick-menu-panel, html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-panel { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/monitor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/monitor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/monitor.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/monitor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/monitor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/monitor_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/mqtt"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/mqtt"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/terminal.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/mqtt"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/mqtt"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/terminal_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/kpi"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/kpi"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/analytics.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/kpi"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/kpi"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/analytics_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/camaron.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/camaron_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/kpi_sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/kpi_sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/analytics.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/kpi_sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/kpi_sensores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/analytics_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/devices"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/devices"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/hub.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/devices"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/devices"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/hub_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/map_editor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/map_editor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/edit_location_alt.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/map_editor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/map_editor"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/edit_location_alt_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/enviadores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/enviadores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/cell_tower.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/enviadores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/enviadores"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/cell_tower_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/mapa_finca"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/mapa_finca"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/map.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/mapa_finca"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/mapa_finca"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/map_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/historial_gps"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/historial_gps"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/location_on.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/historial_gps"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/historial_gps"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/location_on_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/historial_envios"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/historial_envios"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/history.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/historial_envios"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/historial_envios"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/history_fill.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/reportes_mantenimiento"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item[href="/reportes_mantenimiento"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/assignment.svg"); } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/reportes_mantenimiento"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active[href="/reportes_mantenimiento"] img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { content: url("/static/images/md/assignment_fill.svg"); } /* misma intensidad en todos: la regla general cambiaba el filtro de algunos */ html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { filter: brightness(0) opacity(.72) !important; } html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { filter: invert(1) opacity(.85) !important; } html body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { filter: brightness(0) opacity(.85) !important; } html.night body:is(.tg-movil, .tg-movil-modales) .quick-menu-item.active img:not(.ico):not(.leaflet-marker-icon):not(#tgNada) { filter: invert(1) !important; } /* Forma de los botones: toda acción es píldora; las opciones de un grupo son chips de 8 px y no cambian al activarse */ html body:is(.tg-movil, .tg-movil-modales) #btnCapturarGps:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnCapturarGps:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #btnCapturarGpsInst:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnCapturarGpsInst:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #btnEnviarMoverEquipo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnEnviarMoverEquipo:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #btnGuardarInstalacion:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnGuardarInstalacion:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #btnGuardarReporte:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnGuardarReporte:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #mfEditarCaminos:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #mfEditarCaminos:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .finca-barra button:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .finca-barra button:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #main-content .btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #main-content .btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .btn-limpiar-uid:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .btn-limpiar-uid:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .finca-toast-cerrar:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .finca-toast-cerrar:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .gps-card-toggle:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .gps-card-toggle:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #btnExportarExcel:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnExportarExcel:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #btnGpsPond:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnGpsPond:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) #toggleColumns:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #toggleColumns:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) td .action-btn-stop:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) td .action-btn-stop:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) td .action-btn-start:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) td .action-btn-start:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .hist-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .hist-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .col-filter-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .col-filter-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .foto-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .foto-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .btn-accion:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .btn-accion:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .historial-filtros button:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .historial-filtros button:not(#tgNada):not(#tgNada) { border-radius: 999px !important; } html body:is(.tg-movil, .tg-movil-modales) .finca-filtro button:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .finca-filtro button:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .finca-filtro button.activa:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .finca-filtro button.activa:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .mf-capa:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .mf-capa:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .mf-capa.is-activo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .mf-capa.is-activo:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .snd-cinta-pill:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .snd-cinta-pill:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .snd-cinta-pill.is-activo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .snd-cinta-pill.is-activo:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .snd-cinta-pill.activa:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .snd-cinta-pill.activa:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .kpi-dia:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .kpi-dia:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .kpi-dia.is-activo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .kpi-dia.is-activo:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .kpi-subtab-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .kpi-subtab-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .kpi-subtab-btn.active:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .kpi-subtab-btn.active:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .inst-ribbon-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .inst-ribbon-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .inst-ribbon-btn.selected:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .inst-ribbon-btn.selected:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .modo-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .modo-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .modo-btn.active:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .modo-btn.active:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .modo-btn.activo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .modo-btn.activo:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .reg-chip:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .reg-chip:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .reg-chip.activo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .reg-chip.activo:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .sender-pill:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .sender-pill:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .sender-pill.checked:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .sender-pill.checked:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .clase-btn:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .clase-btn:not(#tgNada):not(#tgNada), html body:is(.tg-movil, .tg-movil-modales) .clase-btn.activo:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) .clase-btn.activo:not(#tgNada):not(#tgNada) { border-radius: 8px !important; } /* botones principales de formulario: mismo color y alto que los demás */ html body.tg-mc #main-content :is(#btnGuardarReporte, #btnGuardarInstalacion, #btnEnviarMoverEquipo):not(#tgNada), html.night body.tg-mc #main-content :is(#btnGuardarReporte, #btnGuardarInstalacion, #btnEnviarMoverEquipo):not(#tgNada) { min-height: 44px; border: 0; background: var(--tg-primario) !important; background-image: none !important; box-shadow: none; color: var(--tg-hoja) !important; font: 500 14px Roboto, Arial, sans-serif; } /* ===================== Skeletons: la misma forma que la pantalla cargada ===================== */ /* sobre el fondo gris el tono de siempre casi no se veía */ body.tg-mc { --tg-sk-a: #e1e7ef; --tg-sk-b: #eff3f8; } html.night body.tg-mc { --tg-sk-a: #26282b; --tg-sk-b: #34373b; } /* elementos que llenan los datos: tema-google.js marca las tarjetas sin dato; mapas y listas esperan con ellas */ html body.tg-movil .card.tg-sk-tarjeta:not(#tgNada), html.night body.tg-movil .card.tg-sk-tarjeta:not(#tgNada) { border-color: transparent !important; background: linear-gradient(90deg, var(--tg-sk-a) 25%, var(--tg-sk-b) 50%, var(--tg-sk-a) 75%) !important; background-size: 300% 100% !important; animation: tg-sk-m 1.5s linear infinite; box-shadow: none !important; } body.tg-movil .card.tg-sk-tarjeta > * { visibility: hidden; } html body.tg-movil:has(.tg-sk-tarjeta) :is(#sndMapa, #gwMapa, #mfMapa):not(.leaflet-container), html body.tg-movil:has(.tg-sk-tarjeta) :is(.mf-lista, #sndGrid, #gwGrid):empty { min-height: 160px; border: 0; border-radius: 16px; background: linear-gradient(90deg, var(--tg-sk-a) 25%, var(--tg-sk-b) 50%, var(--tg-sk-a) 75%); background-size: 300% 100%; animation: tg-sk-m 1.5s linear infinite; } /* monitores */ body.tg-monitor .loading-screen.skeleton { display: block; margin: 0; } body.tg-monitor .skeleton-table { display: none; } body.tg-monitor .skeleton-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 26px 0 12px; } body.tg-mon-ss .skeleton-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } html body.tg-monitor .skeleton-card { width: auto; min-width: 0; max-width: none; height: 49px; border-radius: 16px; } body.tg-mon-lw .skeleton-card:nth-child(5) { grid-column: 1 / -1; } body.tg-monitor .skeleton-mass-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } html body.tg-monitor .skeleton-btn { flex: 1 1 0; width: auto; height: 40px; border-radius: 999px; } html body.tg-monitor .skeleton-btn:nth-child(3) { flex-basis: 100%; } body.tg-monitor .skeleton-mobile-cards { display: flex; flex-direction: column; gap: 10px; } html body.tg-monitor .skeleton-mobile-card { height: 142px; border-radius: 12px; } /* KPI: números primero, como la pantalla real */ /* :not([hidden]): ocultarSkeleton() usa hidden y un display aquí le ganaba (skeleton eterno, datos abajo) */ body.tg-kpi #kpiSkeleton:not([hidden]) { display: flex; flex-direction: column; } body.tg-kpi #kpiSkeleton .sk-section:has(.sk-pie) { order: 2; } html body.tg-movil #kpiSkeleton .sk-card, html body.tg-movil #kpiSkeleton .sk-box { border-radius: 16px; } /* Listado de devEUI: cabecera y filas sueltas, como sus tarjetas */ html body.tg-mc .listado-skeleton, html.night body.tg-mc .listado-skeleton { border: 0; background: none; box-shadow: none; } html body.tg-mc .listado-skeleton .cabecera { height: 28px; margin-bottom: 8px; border-radius: 8px; } html body.tg-mc .listado-skeleton .fila, html body.tg-mc .listado-skeleton .fila:last-child { height: 56px; margin-bottom: 8px; border: 0; border-radius: 12px; } /* Historial de envíos: sin las líneas claras entre filas */ html body.tg-mc #envSkeleton .sk-table, html.night body.tg-mc #envSkeleton .sk-table { border: 0; border-radius: 16px; background: none; } html body.tg-mc #envSkeleton .sk-row, html.night body.tg-mc #envSkeleton .sk-row { height: 44px; margin-bottom: 4px; border: 0; border-radius: 8px; } html body.tg-monitor .skeleton-mass-actions:not(#tgNada) { flex-wrap: wrap; } html body.tg-monitor .skeleton-mass-actions .skeleton-btn:not(#tgNada) { flex: 1 1 calc(50% - 4px); max-width: none; } html body.tg-monitor .skeleton-mass-actions .skeleton-btn:nth-child(3):not(#tgNada) { flex: 1 1 100%; } html body.tg-mc #envSkeleton .sk-table:not(#tgNada), html.night body.tg-mc #envSkeleton .sk-table:not(#tgNada) { background: none !important; box-shadow: none !important; } html body.tg-mc #envSkeleton .sk-row:not(#tgNada), html.night body.tg-mc #envSkeleton .sk-row:not(#tgNada) { border: 0 !important; } html body:is(.tg-movil, .tg-movil-modales) #btnVerMasRegistro:not(#tgNada):not(#tgNada), html.night body:is(.tg-movil, .tg-movil-modales) #btnVerMasRegistro:not(#tgNada):not(#tgNada) { border-radius: 999px !important; } /* chips Online/Offline más claros en modo día (2026-11-07) */ html:not(.night) body.tg-monitor:not(#tgNada) .status-pill.online { background: #e6f4ea; color: #137333; } html:not(.night) body.tg-monitor:not(#tgNada) .status-pill.offline { background: #fce8e6; color: #c5221f; } /* tarjetas contadoras del Monitor más suaves en modo noche (2026-11-07) */ html.night body.tg-monitor:not(#tgNada) .card.online-card { background: #1e3527 !important; color: #a8dab5 !important; } html.night body.tg-monitor:not(#tgNada) .card.offline-card { background: #3d2221 !important; color: #f2b8b5 !important; } html.night body.tg-monitor:not(#tgNada) .card.low-battery-card, html.night body.tg-monitor:not(#tgNada) .card.SCC-err-card { background: #3a3120 !important; color: #f6d78b !important; } /* interruptor de Modo nocturno en la barra inferior: la regla de inputs de #bottom-bar le aclaraba la perilla (2026-11-07) */ html body.tg-movil:not(#tgNada):not(#tgNada) #bottom-bar .checkbox-wrapper-5 input[type=checkbox], html.night body.tg-movil:not(#tgNada):not(#tgNada) #bottom-bar .checkbox-wrapper-5 input[type=checkbox] { background-color: #747775 !important; } html body.tg-movil:not(#tgNada):not(#tgNada) #bottom-bar .checkbox-wrapper-5 input[type=checkbox]:checked, html.night body.tg-movil:not(#tgNada):not(#tgNada) #bottom-bar .checkbox-wrapper-5 input[type=checkbox]:checked { background-color: var(--tg-hoja) !important; } /* Menú de usuario de Inicio como hoja inferior, igual que el menú rápido (2026-11-07) */ html body.tg-inicio:not(#tgNada):not(#tgNada) .bottom-user-menu, html.night body.tg-inicio:not(#tgNada):not(#tgNada) .bottom-user-menu { display: flex; position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 1600; box-sizing: border-box; width: 100%; max-width: 420px; min-width: 0; margin: 0 auto; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 28px 28px 0 0; box-shadow: none; touch-action: none; user-select: none; -webkit-user-select: none; transform: translateY(105%); visibility: hidden; transition: transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .38s; } html body.tg-inicio:not(#tgNada):not(#tgNada) .bottom-user-menu.abierto { transform: translateY(0); visibility: visible; transition: transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s; } body.tg-inicio .bottom-user-menu::before { content: ""; align-self: center; flex: none; width: 32px; height: 4px; margin: 10px 0 6px; border-radius: 4px; background: var(--tg-texto-2); opacity: .4; } body.tg-inicio .bottom-user-menu .perfil-cab { padding-top: 8px; } #bottomUserFondo { position: fixed; inset: 0; z-index: 1590; background: rgba(0, 0, 0, .42); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; } #bottomUserFondo.show { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { html body.tg-inicio:not(#tgNada):not(#tgNada) .bottom-user-menu, #bottomUserFondo { transition: none !important; } } /* hoja de usuario: foto grande centrada; cambiar foto con el botón de cámara arriba a la izquierda de la foto */ html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-cab { flex-direction: column; align-items: center; gap: 10px; padding: 8px 12px 16px; text-align: center; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-foto-btn { width: 88px !important; height: 88px !important; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-foto-btn > .perfil-avatar { width: 88px; height: 88px; font-size: 36px; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-cam { top: -2px; right: -2px; bottom: auto; left: auto; width: 30px; height: 30px; border-width: 3px; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-cam svg { width: 16px; height: 16px; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-txt { align-items: center; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-txt strong { font-size: 18px; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-acc { justify-content: center; margin-top: 4px; } html body.tg-inicio:not(#tgNada) #bottomUserMenu .perfil-cambiar { display: none !important; } /* avatar de la barra inferior: mismo tamaño que el círculo de Inicio (38 px) y el buscador (40 px) */ html body.tg-inicio:not(#tgNada) #bottomUserBtn .user-avatar-wrap { width: 38px; height: 38px; } html body.tg-inicio:not(#tgNada) #bottomUserBtn .perfil-avatar.is-barra { width: 38px; height: 38px; font-size: 17px; box-shadow: none; } /* la foto llena el círculo (las reglas de iconos de la barra le daban 22 px y esquinas rectas) */ html body.tg-inicio:not(#tgNada):not(#tgNada) #bottom-bar #bottomUserBtn .perfil-avatar img, html.night body.tg-inicio:not(#tgNada):not(#tgNada) #bottom-bar #bottomUserBtn .perfil-avatar img { width: 100% !important; height: 100% !important; max-width: none; margin: 0; padding: 0; border-radius: 50%; object-fit: cover; } html body.tema-google .perfil-avatar img { border-radius: 50%; }