/* Sincronización entre dispositivos (assets/js/sincro.js): el botón de la
   barra de arriba y sus carteles. Los carteles usan .modal y .modal-caja de
   style.css, como el de "Nueva categoría". */

/* En la PC, una pastilla blanca con su borde: «⟳ Sincronizar». */
.sincro-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 36px;
  background: var(--panel);
  border: 1px solid var(--linea2);
  color: var(--txt);
  border-radius: 999px;
  padding: 0 16px;
  font: 600 13px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.sincro-boton:hover { background: var(--hover); }
.sincro-boton__icono { display: inline-flex; font-size: 16px; }

.sincro-boton[data-situacion="trabajando"] .sincro-boton__icono { animation: sincro-gira 1.1s linear infinite; }
.sincro-boton[data-situacion="sin-conexion"],
.sincro-boton[data-situacion="error"] { background: var(--warn-suave); color: var(--warn); }
.sincro-boton[data-situacion="conflicto"] { background: var(--rosa-suave); color: var(--err); }

@keyframes sincro-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sincro-boton[data-situacion="trabajando"] .sincro-boton__icono { animation: none; }
}

/* A la derecha de la barra de arriba (si está el aviso de respaldo, va él
   primero). */
.topbar > .sincro-boton { margin-left: auto; }
.topbar > .respaldo-arriba + .sincro-boton { margin-left: 0; }

/* En el celular, un círculo de 44 con el ⟳, como en el diseño. Con un
   conflicto vuelve a ser pastilla, para que se lea qué pasa. */
@media (max-width: 700px) {
  .sincro-boton {
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0;
    background: var(--panel);
    color: var(--txt);
  }
  .sincro-boton:hover { background: var(--hover); }
  .sincro-boton__icono { font-size: 19px; }
  .sincro-boton__texto { display: none; }
  .sincro-boton[data-situacion="al-dia"] { color: var(--pri-claro); }
  .sincro-boton[data-situacion="conflicto"] { padding: 0 14px; }
  .sincro-boton[data-situacion="conflicto"] .sincro-boton__texto { display: inline; }
}

/* ── Aviso de respaldo (respaldo.js) ──────────────────────────────────────
   Mientras no haya ningún respaldo: «● Sin respaldo  Respaldar», en durazno. En
   el celular no entra arriba: lo dice «Para hacer», en el Resumen. */
.respaldo-arriba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 36px;
  margin-left: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--rosa-suave);
  color: var(--txt);
  font: 400 13px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.respaldo-arriba:hover { background: #ffd6c2; }
[data-tema="oscuro"] .respaldo-arriba:hover { background: #4a2a1f; }
.respaldo-arriba .ic { font-size: 17px; color: var(--rosa); }
.respaldo-arriba b { font-weight: 600; color: var(--err); }
@media (max-width: 700px) {
  .respaldo-arriba { display: none; }
}

/* ── Carteles ─────────────────────────────────────────────────────────── */

#modal-sincro .modal-caja,
#modal-sincro-pregunta .modal-caja {
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
#modal-sincro p,
#modal-sincro-pregunta p { line-height: 1.55; }
#modal-sincro p + p,
#modal-sincro-pregunta p + p { margin-top: 8px; }
/* Por encima del panel, y en el celular también de la barra de abajo (150)
   y de los otros carteles (movil.css los pone en 170). */
#modal-sincro-pregunta { z-index: 180; }

.sincro-acciones {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

.sincro-estado { color: var(--txt2); }
.sincro-estado[data-situacion="al-dia"] { color: var(--ok); }
.sincro-estado[data-situacion="sin-conexion"],
.sincro-estado[data-situacion="error"] { color: var(--warn); }
.sincro-estado[data-situacion="conflicto"] { color: var(--err); }

.sincro-nota { color: var(--txt3); font-size: 12.5px; }
.sincro-error { color: var(--err); font-size: 13px; margin-top: 10px; }

.sincro-qr {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  width: min(250px, 66vw);
  margin: 14px auto 10px;
}
.sincro-qr svg { display: block; width: 100%; height: auto; }

.sincro-codigo {
  display: block;
  margin: 8px 0;
  padding: 10px;
  text-align: center;
  /* los 29 caracteres en un renglón, también en un celular angosto */
  font: 600 clamp(12.5px, 3.7vw, 16px)/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
  overflow-x: auto;
  background: var(--panel2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  user-select: all;
}

.modal-caja .sincro-entrada {
  width: 100%;
  margin-top: 14px;
  /* 16 px como mínimo: con menos, el iPhone agranda la pantalla al tocarlo */
  font: 600 16px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.sincro-camara { margin-top: 12px; }
.sincro-camara video {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
}

.sincro-lados { display: grid; gap: 8px; margin-top: 14px; }
.sincro-lados > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--linea);
  border-radius: 14px;
}
.sincro-lados span { color: var(--txt2); font-size: 13px; }

/* La parte de Google, abajo del panel. */
.sincro-google {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.sincro-google .sincro-acciones { margin-top: 12px; }