.actions {
  gap: 12px;
}

.actions > div {
  display: grid;
  gap: 5px;
  width: 100%;
}

.actions button {
  width: 100%;
}

.actions small {
  color: #8d938a;
  font-size: 0.76rem;
  line-height: 1.35;
  padding: 0 4px;
}

.section-copy {
  margin: 0.45rem 0 0;
}

/* ---- Paso 2: evidencia sin recuadros vacios, Cuenta en tarjetas, acceso con passkey arriba ---- */
.evidence-previews:empty { display: none; }
.evidence-previews:has(> :only-child) { grid-template-columns: 1fr; }
.evidence-previews:has(> :only-child) .evidence-image,
.evidence-previews:has(> :only-child) .evidence-placeholder { aspect-ratio: 16 / 9; }

#account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
#account > .section-head { margin-bottom: 4px; }
#account > .account-card { margin: 0; padding: clamp(20px, 3vw, 30px); }
#account .account-card button { justify-self: start; }
#account .account-card label { display: block; }
@media (min-width: 900px) {
  #account { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #account > .section-head { grid-column: 1 / -1; }
}

#access .acceso-passkey { border: 1px solid #5a4818; border-radius: 18px; padding: 4px 16px 14px; margin: 0 0 20px; background: rgba(214, 173, 75, 0.07); }
#access .acceso-passkey > summary { font-weight: 850; color: var(--lime); padding: 12px 0; }
#access .acceso-passkey[open] > summary { padding-bottom: 8px; }
:root[data-theme="light"] #access .acceso-passkey { border-color: #d9c27f; background: #fbf3da; }
:root[data-theme="light"] #access .acceso-passkey > summary { color: var(--gold-text); }

/* En el celular, la franja de arriba (logo y dos botones) entra en una sola linea. */
@media (max-width: 520px) {
  .topbar .brand { white-space: nowrap; letter-spacing: 0.05em; font-size: 0.8rem; }
  .topbar .brand-logo { width: 42px; margin-right: 5px !important; }
  .topbar-actions { gap: 5px; }
/* OG: entrada a Tu proteccion (Modo Cautela y Modo Guardian). Solo se ve con la sesion abierta (cuando "Cerrar acceso" se muestra). */
.og-guardian { display: none; position: relative; order: -1; margin-right: auto; }
#logout:not(.hidden) + .og-guardian { display: block; }
header.topbar .topbar-actions details.og-guardian > summary.ghost { list-style: none; cursor: pointer; padding: 10px 20px !important; font-size: 0.9rem !important; font-weight: 800 !important; letter-spacing: 0.12em; border-radius: 999px !important; border: 2px solid #b8932f !important; color: #1b1505 !important; background: #d9b24c !important; box-shadow: 0 3px 10px rgba(184, 147, 47, 0.45); user-select: none; white-space: nowrap; }
.og-guardian summary::-webkit-details-marker { display: none; }
header.topbar .topbar-actions details.og-guardian[open] > summary.ghost { background: #1b1505 !important; color: #f0c75a !important; border-color: #d9b24c !important; }
.og-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(380px, calc(100vw - 32px)); display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: #14151a; color: #f3f1ea; border: 1px solid #4a3f1f; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
.og-menu a { display: grid; gap: 2px; color: inherit; text-decoration: none; padding: 8px 10px; border-radius: 12px; }
.og-menu a:hover, .og-menu a:focus-visible { background: #211d12; }
.og-menu strong { color: #f0c75a; font-size: 0.9rem; }
.og-menu span { color: #a29e92; font-size: 0.78rem; line-height: 1.35; }
.og-menu .og-ir { color: #f0c75a; font-weight: 700; font-size: 0.82rem; text-align: right; }
@media (max-width: 560px) {
  header.topbar { display: flex !important; flex-wrap: wrap !important; align-items: center; row-gap: 8px; }
  header.topbar .brand { flex: 1 1 auto; min-width: 0; }
  header.topbar .topbar-actions { flex: 1 1 100% !important; justify-content: flex-end; flex-wrap: wrap; position: relative; }
  .og-guardian { position: static; }
  .og-menu { position: absolute; left: 0; right: 0; width: auto; top: calc(100% + 8px); }
}
  .topbar .topbar-actions #theme-toggle, .topbar .topbar-actions #logout { padding: 8px 9px; font-size: 0.72rem; white-space: nowrap; border-radius: 999px; }
}

/* ---- Cuatro pestanas: Mapa y Familia, Mis Equipos, Evidencias, Cuenta ---- */
nav.bottom-tabs,
nav.bottom-tabs.ogm-con-mapa {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* El titulo grande de la cuenta ya no se repite: queda el correo, el estado y "Actualizar" en una fila. */
.dashboard-title { padding: 6px 0 16px; }
.dashboard-title .eyebrow,
.dashboard-title h1 { display: none; }
#account-email { margin: 0; font-size: 0.95rem; }

/* "?" que despliega lo que hace cada boton (antes eran textos siempre a la vista). */
.actions > div { position: relative; }
.actions small { display: none; }
.actions > div.hint-open small { display: block; }
.actions .hint {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  line-height: 1;
}
.actions .hint:hover { transform: none; }
.actions button[data-command] { padding-right: 40px; padding-left: 40px; }

/* Con mouse o touchpad: la explicacion aparece al pasar por encima del boton (o al llegar con el teclado), sin ningun simbolo. */
@media (hover: hover) and (pointer: fine) {
  .actions .hint { display: none; }
  .actions button[data-command] { padding-left: 20px; padding-right: 20px; }
  .actions > div > small {
    display: block;
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 25;
    padding: 9px 12px; border-radius: 12px;
    background: #1f1b12 !important; color: #fff8e6 !important; border: 1px solid #d6ad4b;
    font-size: 0.76rem; line-height: 1.35; text-align: left;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.14s ease 0.12s, visibility 0s linear 0.26s;
  }
  .actions > div:hover > small,
  .actions > div:focus-within > small { opacity: 1; visibility: visible; transition-delay: 0.12s, 0.12s; }
}
/* En el celular o la tablet no hay "pasar por encima": queda una "i" chica que despliega la explicacion al tocarla. */
.actions .hint { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 0.95rem; }

/* Mis Equipos: lo de todos los dias a la vista; lo demas, en "Mas acciones". */
.device:not(.mas-abierto) .actions > div.accion-secundaria { display: none; }
.device .actions > div.accion-secundaria { order: 10; }
.actions .mas-acciones {
  grid-column: 1 / -1; order: 5; justify-self: center; width: auto;
  background: transparent; border: 0; box-shadow: none;
  color: var(--gold-text, var(--lime)); font-weight: 800; padding: 8px 16px;
  text-decoration: underline; text-underline-offset: 3px;
}
.device.con-mas:not(.mas-abierto) .quitar-fila { display: none; }

/* Dentro de la app Ojo Guard (?app=mapa): solo el mapa, ocupando toda la pantalla. */
html.app-mapa .topbar,
html.app-mapa nav.bottom-tabs,
html.app-mapa .dashboard-title,
html.app-mapa .summary-grid,
html.app-mapa .dashboard-section,
html.app-mapa footer { display: none !important; }
html.app-mapa #og-mapa.ogm { top: 0 !important; height: 100vh !important; height: 100dvh !important; }

/* En el celular o la tablet: la explicacion aparece al mantener el dedo apretado sobre el boton (ver agregarAyudas), con el mismo globito que
   con el mouse, y sin la "i". Un toque corto hace la accion. */
@media (hover: none), (pointer: coarse) {
  .actions .hint { display: none !important; }
  .actions button[data-command] {
    padding-left: 20px; padding-right: 20px;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  }
  .actions > div > small {
    display: block;
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 25;
    padding: 9px 12px; border-radius: 12px;
    background: #1f1b12 !important; color: #fff8e6 !important; border: 1px solid #d6ad4b;
    font-size: 0.8rem; line-height: 1.35; text-align: left;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.12s ease;
  }
}
.actions > div.hint-open > small { opacity: 1; visibility: visible; }

/* Entrando directo desde la app: "Abriendo Ojo Guard MS..." hasta que el mapa dibuja (sin el parpadeo del acceso ni del panel vacio). */
html.abriendo #access,
html.abriendo #dashboard { visibility: hidden; }
html.abriendo body::after {
  content: "Abriendo Ojo Guard MS\2026";
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: #050607; color: #d9b24c;
  font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em;
}
html[data-theme="light"].abriendo body::after { background: #f6f4ee; color: #7f6727; }

/* Dentro de la app (?app=mapa), al estilo de Buscar de Apple: el mapa arriba y abajo la lista de personas y equipos o, al elegir uno, su tarjeta con
   un botón por cada cosa que se puede hacer (hacer sonar, ubicar, evidencia, cómo llegar, seguir en vivo). */
.ogm-asa-lista { display: none; }
@media (max-width: 899px) {
  html.app-mapa #og-mapa.ogm-sin-elegir .ogm-lado { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: flex-start; column-gap: 8px; position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; max-height: 40%; padding: 0 10px 8px; background: var(--ogm-panel); border: 1px solid var(--ogm-linea); border-radius: 18px; box-shadow: var(--ogm-sombra); overflow-y: auto; overscroll-behavior: contain; }
  html.app-mapa #og-mapa .ogm-lado .ogm-ceja, html.app-mapa #og-mapa .ogm-lado .ogm-invitar, html.app-mapa #og-mapa .ogm-lado .ogm-nota { display: none; }
  html.app-mapa #og-mapa .ogm-asa-lista { display: block; flex: none; position: relative; width: calc(100% + 20px); height: 22px; margin: 0 -10px; }
  html.app-mapa #og-mapa .ogm-asa-lista::before { content: ""; position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--ogm-suave); opacity: 0.55; }
  html.app-mapa #og-mapa .ogm-lado h2 { margin: 0; font-size: 1rem; letter-spacing: 0; }
  html.app-mapa #og-mapa .ogm-lado .ogm-sub { margin: 0; font-size: 0.74rem; }
  html.app-mapa #og-mapa .ogm-lado .ogm-asa-lista, html.app-mapa #og-mapa .ogm-lado .ogm-lista, html.app-mapa #og-mapa .ogm-lado [data-ogm="invitaciones"], html.app-mapa #og-mapa .ogm-lado [data-ogm="lugares"] { flex: 0 0 100%; }
  html.app-mapa #og-mapa .ogm-lista { gap: 0; }
  html.app-mapa #og-mapa .ogm-lista li { padding: 7px 4px; gap: 10px; border-radius: 12px; }
  html.app-mapa #og-mapa .ogm-lista li + li { border-top: 1px solid var(--ogm-linea); border-top-left-radius: 0; border-top-right-radius: 0; }
  html.app-mapa #og-mapa .ogm-lista li.ogm-grupo { border-top: 0; padding: 8px 4px 2px; }
  html.app-mapa #og-mapa .ogm-lista .ogm-av.chico { width: 40px; height: 40px; }
  html.app-mapa #og-mapa .ogm-lista strong { font-size: 0.95rem; }
  html.app-mapa #og-mapa .ogm-lista small { font-size: 0.76rem; }
  html.app-mapa #og-mapa.ogm-plegada.ogm-sin-elegir .ogm-lado > :not(.ogm-asa-lista):not(h2):not(.ogm-sub) { display: none; }

  html.app-mapa #og-mapa .ogm-tarjeta { left: 8px; right: 8px; bottom: 8px; max-height: 46%; border-radius: 18px; padding: 4px 12px 10px; }
  html.app-mapa #og-mapa .ogm-asa { height: 20px; margin: -4px -12px 2px; width: calc(100% + 24px); }
  html.app-mapa #og-mapa .ogm-asa::before { top: 7px; }
  html.app-mapa #og-mapa .ogm-cab { gap: 10px; }
  html.app-mapa #og-mapa .ogm-direc { margin: 6px 0 8px; font-size: 0.84rem; }
  html.app-mapa #og-mapa .ogm-paradas { margin-bottom: 8px; padding-top: 8px; }
  html.app-mapa #og-mapa .ogm-cab-app { align-items: center; gap: 10px; }
  html.app-mapa #og-mapa .ogm-cab-app .ogm-foto { flex: none; }
  html.app-mapa #og-mapa .ogm-cab-app .ogm-av.grande { width: 44px; height: 44px; }
  html.app-mapa #og-mapa .ogm-cab-app > div { flex: 1; min-width: 0; }
  html.app-mapa #og-mapa .ogm-nom { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; color: var(--ogm-texto); }
  html.app-mapa #og-mapa .ogm-nom strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.04rem; line-height: 1.2; }
  html.app-mapa #og-mapa .ogm-nom .ogm-rol { margin: 0; }
  html.app-mapa #og-mapa .ogm-cab-app small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; line-height: 1.35; }
  html.app-mapa #og-mapa .ogm-cerrar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ogm-oro-fondo); border: 1px solid var(--ogm-oro-borde); color: var(--ogm-suave); font-size: 0.85rem; }
  html.app-mapa #og-mapa .ogm-tiles { display: flex; gap: 6px; margin: 2px 0 6px; }
  html.app-mapa #og-mapa .ogm-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 8px 2px 6px; border-radius: 14px; background: var(--ogm-oro-fondo); border: 1px solid var(--ogm-oro-borde); color: var(--ogm-oro-vivo); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  html.app-mapa #og-mapa .ogm-tile svg { width: 21px; height: 21px; flex: none; }
  html.app-mapa #og-mapa .ogm-tile span { color: var(--ogm-texto); font-size: 0.66rem; font-weight: 600; line-height: 1.15; text-align: center; }
  html.app-mapa #og-mapa .ogm-tile.parar { border-color: var(--ogm-vivo); color: var(--ogm-vivo); }
  html.app-mapa #og-mapa .ogm-tile:disabled { opacity: 0.5; cursor: wait; }
  html.app-mapa #og-mapa .ogm-meta { margin: 0 0 2px; font-size: 0.74rem; line-height: 1.4; color: var(--ogm-suave); }
  html.app-mapa #og-mapa .ogm-msj { margin: 6px 0 0; }
  html.app-mapa #og-mapa .ogm-nota-menor { margin: 4px 0 0; font-size: 0.72rem; }
  html.app-mapa #og-mapa .ogm-avisar { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 8px; text-align: left; font-size: 0.8rem; }
}

/* Mapa dentro de la app, ronda 2: la lista y la tarjeta de abajo, todavia mas bajas (mas lugar para el mapa, por ejemplo para ver a alguien lejos).
   La tarjeta junta nombre, como esta (con la bateria) y direccion en el encabezado; los datos de menos uso (margen de error, km de hoy) quedan abajo
   y se recorren con el dedo. */
@media (max-width: 899px) {
  html.app-mapa #og-mapa .ogm-tarjeta { max-height: 36%; padding: 2px 10px 8px; }
  html.app-mapa #og-mapa .ogm-asa { height: 14px; margin: -2px -10px 0; width: calc(100% + 20px); }
  html.app-mapa #og-mapa .ogm-asa::before { top: 5px; height: 4px; }
  html.app-mapa #og-mapa .ogm-cab-app { gap: 9px; }
  html.app-mapa #og-mapa .ogm-cab-app .ogm-av.grande { width: 40px; height: 40px; }
  html.app-mapa #og-mapa .ogm-nom strong { font-size: 1rem; }
  html.app-mapa #og-mapa .ogm-cab-app small { font-size: 0.74rem; line-height: 1.3; }
  html.app-mapa #og-mapa .ogm-cab-app .ogm-donde { color: var(--ogm-texto); opacity: 0.85; }
  html.app-mapa #og-mapa .ogm-cerrar { width: 28px; height: 28px; }
  html.app-mapa #og-mapa .ogm-cab-app .ogm-foto:not(:disabled)::after { width: 14px; height: 14px; right: -3px; bottom: -3px; font-size: 0.5rem; }
  html.app-mapa #og-mapa .ogm-tiles { gap: 5px; margin: 6px 0 4px; }
  html.app-mapa #og-mapa .ogm-tile { gap: 2px; padding: 6px 1px 5px; border-radius: 12px; }
  html.app-mapa #og-mapa .ogm-tile svg { width: 19px; height: 19px; }
  html.app-mapa #og-mapa .ogm-tile span { font-size: 0.62rem; }
  html.app-mapa #og-mapa .ogm-msj { margin: 4px 0 0; }
  html.app-mapa #og-mapa.ogm-sin-elegir .ogm-lado { max-height: 30%; padding: 0 8px 6px; }
  html.app-mapa #og-mapa .ogm-asa-lista { height: 16px; }
  html.app-mapa #og-mapa .ogm-asa-lista::before { top: 6px; height: 4px; }
  html.app-mapa #og-mapa .ogm-lista li { padding: 5px 2px; gap: 9px; }
  html.app-mapa #og-mapa .ogm-lista .ogm-av.chico { width: 36px; height: 36px; }
  html.app-mapa #og-mapa .ogm-lista strong { font-size: 0.92rem; }
  html.app-mapa #og-mapa .ogm-lista small { font-size: 0.72rem; }
}

/* Mapa dentro de la app, ronda 3: para sumar gente a la familia, la lista de abajo trae un boton "Sumar" (antes estaba en la pantalla Familia). */
.ogm-corto { display: none; }
@media (max-width: 899px) {
  html.app-mapa #og-mapa .ogm-lado .ogm-invitar { display: inline-flex; flex: none; align-items: center; gap: 5px; width: auto; margin: 0 0 0 auto; padding: 5px 12px; border: 1px solid var(--ogm-oro-borde); border-radius: 999px; background: var(--ogm-oro-fondo); color: var(--ogm-oro-vivo); font-size: 0.82rem; font-weight: 700; }
  html.app-mapa #og-mapa .ogm-lado .ogm-sub { display: none; }
  html.app-mapa #og-mapa .ogm-lado h2 { align-self: center; }
  html.app-mapa #og-mapa .ogm-lado .ogm-invitar .ogm-largo { display: none; }
  html.app-mapa #og-mapa .ogm-lado .ogm-invitar .ogm-corto { display: inline; }
}

/* El dibujo del equipo (celular, compu, reloj) dentro del circulo, en vez de dos letras. */
.ogm-av-dibujo > span { display: grid; place-items: center; width: 56%; height: 56%; }
.ogm-av-dibujo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ogm-av-dibujo.mini > span { width: 62%; height: 62%; }

/* Tarjeta de la app: los botones no se estiran cuando son pocos (siempre el ancho de uno de cinco), el estado puede ocupar dos renglones y no se
   repite la marca del equipo (la dice el dibujo). */
@media (max-width: 899px) {
  html.app-mapa #og-mapa .ogm-tile { flex: 0 0 calc((100% - 20px) / 5); }
  html.app-mapa #og-mapa .ogm-cab-app small:not(.ogm-donde) { white-space: normal; }
  html.app-mapa #og-mapa .ogm-nom .ogm-marca { display: none; }
}

/* La ultima evidencia de un equipo, en su tarjeta: miniatura (se agranda sobre el mapa) y audio. */
#og-mapa .ogm-ev-foto { flex: none; border-radius: 10px; }
#og-mapa .ogm-ultima audio { width: 100%; height: 34px; margin-top: 4px; }
#og-mapa .ogm-visor { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, 0.9); }
#og-mapa .ogm-visor img { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }

/* Evidencia en la tarjeta: las dos fotos (delantera y trasera) con su nombre, y el boton para escuchar el audio. */
#og-mapa .ogm-ultima { flex-wrap: wrap; }
#og-mapa .ogm-ultima .ogm-fotos { display: flex; gap: 6px; }
#og-mapa .ogm-ev-foto { position: relative; overflow: hidden; }
#og-mapa .ogm-ev-foto small { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.6rem; text-align: center; }
#og-mapa .ogm-escuchar { justify-self: start; margin-top: 4px; padding: 7px 12px; border: 1px solid var(--ogm-oro-borde); border-radius: 999px; background: var(--ogm-oro-fondo); color: var(--ogm-oro-vivo); font-size: 0.8rem; font-weight: 700; }
#og-mapa .ogm-escuchar:disabled { opacity: 0.6; }

/* Reproductor del audio de la evidencia: queda fuera de la tarjeta (que se redibuja cada pocos segundos y cortaba el audio). */
#og-mapa .ogm-reproductor { position: fixed; z-index: 60; left: 8px; right: 8px; top: 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 1px solid var(--ogm-oro-borde); border-radius: 16px; background: var(--ogm-panel); box-shadow: var(--ogm-sombra); }
#og-mapa .ogm-reproductor.hidden { display: none; }
#og-mapa .ogm-repro-texto { color: var(--ogm-texto); font-size: 0.8rem; font-weight: 700; }
#og-mapa .ogm-repro-cerrar { width: 30px; height: 30px; padding: 0; border: 1px solid var(--ogm-linea); border-radius: 999px; background: transparent; color: var(--ogm-suave); font-size: 1.1rem; line-height: 1; }
#og-mapa .ogm-reproductor audio { grid-column: 1 / -1; width: 100%; height: 34px; }

/* Mapa dentro de la app: Mapa/Satelite en un solo boton. Se ve el de la otra vista (el que se puede elegir) y al tocarlo se cambia. */
html.app-mapa #og-mapa .ogm-capas { padding: 2px; border-radius: 12px; }
html.app-mapa #og-mapa .ogm-capas button.on { display: none; }
html.app-mapa #og-mapa .ogm-capas button { padding: 7px 11px; font-size: 0.74rem; font-weight: 700; color: var(--ogm-texto); }

/* Brujula del mapa: aparece al girar el mapa con dos dedos y lo vuelve a poner con el norte arriba (va junto al boton Mapa/Satelite). */
#og-mapa .ogm-capas .ogm-brujula { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--ogm-texto); }
#og-mapa .ogm-capas .ogm-brujula.hidden { display: none; }
#og-mapa .ogm-capas .ogm-brujula svg { transition: transform 0.15s linear; }

/* Mapa de la app mas liviano (pedido de Luciano, 16/10/2026: "esta sobrecargado"): pines y etiquetas mas chicos (la etiqueta solo dice el nombre; la hora
   y la marca se ven al elegir el equipo), botones de arriba mas chicos, Mapa/Satelite y la brujula dentro de la columna de botones de arriba (como un
   icono), y la tarjeta con botones y letra mas chicos. */
@media (max-width: 899px) {
  html.app-mapa #og-mapa .ogm-pin .ogm-av { width: 30px; height: 30px; border-width: 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
  html.app-mapa #og-mapa .ogm-pin.sel .ogm-av { width: 36px; height: 36px; }
  html.app-mapa #og-mapa .ogm-halo { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  html.app-mapa #og-mapa .ogm-etq { margin-top: 3px; padding: 2px 7px; border-radius: 8px; font-size: 0.62rem; }
  html.app-mapa #og-mapa .ogm-etq .ogm-marca, html.app-mapa #og-mapa .ogm-etq em { display: none; }
  html.app-mapa #og-mapa .ogm-pin.sel .ogm-etq em { display: inline; font-size: 0.58rem; }
  html.app-mapa #og-mapa .ogm-seg { padding: 3px; gap: 1px; border-radius: 12px; }
  html.app-mapa #og-mapa .ogm-seg button { padding: 5px 9px; gap: 5px; border-radius: 9px; font-size: 0.72rem; }
  html.app-mapa #og-mapa .ogm-ctrl { border-radius: 12px; }
  html.app-mapa #og-mapa .ogm-ctrl button { width: 34px; height: 34px; font-size: 1rem; }
  html.app-mapa #og-mapa .ogm-ctrl button svg { width: 17px; height: 17px; }
  html.app-mapa #og-mapa .ogm-ctrl .ogm-capas { position: static; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  html.app-mapa #og-mapa .ogm-ctrl .ogm-capas button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 0; color: var(--ogm-oro-vivo); }
  html.app-mapa #og-mapa .ogm-ctrl .ogm-capas button.on { display: none; }
  html.app-mapa #og-mapa .ogm-ctrl .ogm-capas button.ogm-brujula.hidden { display: none; }
  html.app-mapa #og-mapa .ogm-tiles { gap: 4px; margin: 4px 0 2px; }
  html.app-mapa #og-mapa .ogm-tile { gap: 1px; padding: 4px 1px 3px; border-radius: 10px; }
  html.app-mapa #og-mapa .ogm-tile svg { width: 15px; height: 15px; }
  html.app-mapa #og-mapa .ogm-tile span { font-size: 0.56rem; }
  html.app-mapa #og-mapa .ogm-cab-app .ogm-av.grande { width: 34px; height: 34px; }
  html.app-mapa #og-mapa .ogm-nom strong { font-size: 0.92rem; }
}

/* Tarjeta del equipo en la app: al elegir un equipo o una persona empieza en UNA FILA (avatar, nombre y como esta, y la cruz) y se abre tocandola
   (o deslizando hacia arriba la manija); tocar de nuevo la vuelve a cerrar. Asi queda casi todo el mapa a la vista. (Pedido de Luciano, 16/10/2026.) */
@media (max-width: 899px) {
  html.app-mapa #og-mapa.ogm-plegada .ogm-tarjeta { max-height: none; padding: 0 10px 7px; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-asa { height: 12px; margin: 0 -10px 0; width: calc(100% + 20px); }
  html.app-mapa #og-mapa.ogm-plegada .ogm-asa::before { top: 4px; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cab-app { gap: 8px; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cab-app .ogm-av.grande { width: 28px; height: 28px; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cab-app .ogm-foto:not(:disabled)::after { display: none; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cab-app > div { display: flex; align-items: baseline; gap: 8px; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-nom { flex: 0 1 auto; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-nom .ogm-rol { display: none; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cab-app small:not(.ogm-donde) { flex: 1 1 0; min-width: 0; white-space: nowrap; font-size: 0.7rem; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cab-app .ogm-donde { display: none; }
  html.app-mapa #og-mapa.ogm-plegada .ogm-cerrar { width: 24px; height: 24px; font-size: 0.75rem; }
}

/* Lista de abajo (Familia y equipos) en UNA FILA, igual que la tarjeta de un equipo: empieza plegada con el titulo y el boton Sumar, y se abre tocandola
   (o con la manija); mientras no hay nadie elegido no se muestra En vivo / Hoy / 7 dias (solo sirve para el recorrido del equipo elegido). */
@media (max-width: 899px) {
  html.app-mapa #og-mapa.ogm-plegada.ogm-sin-elegir .ogm-lado > .ogm-invitar.ogm-invitar.ogm-invitar { display: inline-flex; }
  html.app-mapa #og-mapa.ogm-plegada.ogm-sin-elegir .ogm-lado { padding-bottom: 6px; overflow: hidden; }
  html.app-mapa #og-mapa.ogm-plegada.ogm-sin-elegir .ogm-asa-lista { height: 14px; }
  html.app-mapa #og-mapa.ogm-plegada.ogm-sin-elegir .ogm-asa-lista::before { top: 4px; }
  html.app-mapa #og-mapa.ogm-sin-elegir .ogm-seg { display: none; }
}

/* Mapa dentro de la app: "Sumar" solo arriba. Luciano (16/10/2026): "esta repetido el icono de sumar, yo lo dejaria arriba". El boton de invitar queda en la
   columna de botones de arriba a la derecha (el icono de la persona con el +); en la lista de abajo ya no se repite, ni plegada ni abierta. */
html.app-mapa #og-mapa .ogm-lado .ogm-invitar { display: none !important; }

/* Lista de abajo con dos pestanas, como en Buscar de Apple: "Personas" y "Dispositivos" (cada una con cuantos hay). Se ve una sola a la vez, y
   la fila plegada ES el selector: tocar una pestana abre la lista en esa. (Pedido de Luciano, 16/10/2026: "personas/dispositivos".) */
.ogm-pestanas { display: none; }
@media (max-width: 899px) {
  html.app-mapa #og-mapa .ogm-lado h2 { display: none; }
  html.app-mapa #og-mapa .ogm-lado .ogm-pestanas { display: flex; flex: 1 1 auto; gap: 3px; padding: 3px; border: 1px solid var(--ogm-linea); border-radius: 12px; }
  html.app-mapa #og-mapa.ogm-plegada.ogm-sin-elegir .ogm-lado > .ogm-pestanas.ogm-pestanas.ogm-pestanas { display: flex; }
  html.app-mapa #og-mapa .ogm-pestanas button { flex: 1 1 0; padding: 6px 8px; border-radius: 9px; font-size: 0.78rem; font-weight: 700; color: var(--ogm-suave); white-space: nowrap; }
  html.app-mapa #og-mapa .ogm-pestanas button.on { background: var(--ogm-oro-fondo); color: var(--ogm-oro-vivo); }
  html.app-mapa #og-mapa .ogm-pestanas button[hidden] { display: none; }
}

/* Botones en pastilla (como el dibujo de la consola). */
.actions button[data-command],
.map-button { border-radius: 999px; }

/* En una pantalla ancha las pestanas van arriba, en el medio de la barra, y el mapa deja ver esa barra. */
@media (min-width: 1280px) {
  nav.bottom-tabs {
    top: 12px;
    bottom: auto;
    width: min(520px, calc(100% - 700px));
    padding: 5px;
    border-radius: 999px;
  }
  nav.bottom-tabs .bottom-tab { display: flex; justify-content: center; border-radius: 999px; font-size: 0.84rem; padding: 10px 6px; white-space: nowrap; }
  nav.bottom-tabs .tab-icon { display: none; }
  #og-mapa.ogm { top: 78px; height: calc(100vh - 78px); height: calc(100dvh - 78px); }
  /* La franja de arriba (logo, pestanas y botones) queda fija y con fondo: el contenido pasa por debajo sin quedar detras de las pestanas. */
  /* mobile-fixes.css esconde el desborde con overflow-x:hidden, y eso impide que algo quede "pegado" arriba: clip hace lo mismo sin ese efecto. */
  html:root, html:root body { overflow-x: clip; overflow-y: visible; }
  .shell:has(#dashboard:not(.hidden)) > .topbar {
    position: sticky; top: 0; z-index: 29;
    margin-bottom: 28px; padding: 12px 0; min-height: 70px;
    background: rgba(5, 6, 7, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 0 0 100vmax rgba(5, 6, 7, 0.94); clip-path: inset(0 -100vmax);
  }
  :root[data-theme="light"] .shell:has(#dashboard:not(.hidden)) > .topbar { background: rgba(246, 244, 238, 0.95); border-bottom-color: rgba(70, 58, 20, 0.12); box-shadow: 0 0 0 100vmax rgba(246, 244, 238, 0.95); }
  nav.bottom-tabs { top: 12px; }
  .shell { padding-bottom: 40px; }
  footer { margin-bottom: 20px; }
}