/* ============================================================
 * sync.css  —  Estilos del módulo de sincronización offline.
 * Rediseño septiembre 2026 (T3.1):
 *   • Un solo botón toggle "Modo Offline" / "Modo Online" en la topbar.
 *   • Badge de estado junto al nombre del consultorio en la sidebar.
 *   • Overlays de progreso y de bloqueo (por expiración de 120h).
 * ============================================================ */

/* --- Contenedor del botón toggle en la topbar --- */
#sync-controls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
}
#sync-controls.hidden{ display:none; }

/* --- Botón base --- */
.sync-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1;
  padding:9px 13px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, background-color .12s, opacity .15s;
  white-space:nowrap;
  color:#fff;
}
.sync-btn:disabled{ opacity:.55; cursor:not-allowed; }
.sync-btn:not(:disabled):hover{ transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(0,0,0,.25); }
.sync-btn:not(:disabled):active{ transform:translateY(0); }
.sync-btn svg{
  width:16px; height:16px;
  stroke:currentColor;
  flex-shrink:0;
}
.sync-btn .sync-btn-label{ letter-spacing:.01em; }

/* Rojo: acción de descarga (ir a Modo Offline). */
.sync-btn-down{
  background:#c8322f;
  border-color:#a72723;
}
.sync-btn-down:not(:disabled):hover{ background:#a72723; }

/* Azul: acción de subida (volver a Modo Online). */
.sync-btn-up{
  background:#1e6bd6;
  border-color:#1656ad;
}
.sync-btn-up:not(:disabled):hover{ background:#1656ad; }

/* Estado "sincronizando" — spinner + botón inhabilitado */
.sync-btn.is-syncing{
  pointer-events:none;
  opacity:.7;
}
.sync-btn.is-syncing .sync-btn-ic{
  animation:sync-spin 1s linear infinite;
}
@keyframes sync-spin{ to{ transform:rotate(360deg); } }

/* ============================================================
 * Badge de modo junto al nombre del consultorio en la sidebar
 * ============================================================ */
.sync-mode-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  padding:2px 8px 2px 6px;
  border-radius:100px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10.5px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;
  border:1px solid transparent;
  cursor:default;
  user-select:none;
  white-space:nowrap;
  vertical-align:middle;
  transition:background .15s, color .15s, border-color .15s;
}
.sync-mode-badge .sync-mode-dot{
  width:6px; height:6px;
  border-radius:100px;
  background:currentColor;
  flex-shrink:0;
  animation:sync-mode-dot 2.4s ease-in-out infinite;
}
@keyframes sync-mode-dot{
  0%,100%{ opacity:1; }
  50%    { opacity:.35; }
}

/* Estado Online (verde) */
.sync-mode-badge.online{
  background:#e8f5e9;
  color:#1b5e20;
  border-color:#c8e6c9;
}

/* Estado Offline (azul) */
.sync-mode-badge.offline{
  background:#e3ecfa;
  color:#134a99;
  border-color:#b7cbec;
}

/* Umbrales de tiempo en modo offline */
.sync-mode-badge.offline.warn{
  background:#fff8e1;
  color:#7b4a00;
  border-color:#ffe082;
}
.sync-mode-badge.offline.danger{
  background:#ffebee;
  color:#8b1717;
  border-color:#ef9a9a;
}
.sync-mode-badge.offline.expired{
  background:#3b1414;
  color:#ffd1d1;
  border-color:#5a1a1a;
}
.sync-mode-badge.offline.expired .sync-mode-dot{ animation:none; }

/* Cuando el nombre del consultorio ocupa dos líneas, el badge queda
   perfectamente alineado como una segunda "etiqueta" bajo el texto. */
#sb-clinic + .sync-mode-badge{
  margin-left:0;
}

/* Modo mobile: colapsa el label del botón toggle */
@media (max-width: 880px){
  #sync-controls{
    margin-left:0;
    gap:6px;
  }
  .sync-btn{ padding:9px 10px; }
  .sync-btn .sync-btn-label{ display:none; }
}

/* ============================================================
 * Overlay de progreso (mientras descarga/sube)
 * ============================================================ */
#sync-progress-modal{
  position:fixed;
  inset:0;
  z-index:9500;
  background:rgba(10,30,28,.55);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:sync-fade .15s ease;
}
#sync-progress-modal.hidden{ display:none; }
#sync-progress-modal .sync-progress-card{
  background:#fffdf6;
  border:1px solid var(--line,#e8ddc2);
  border-radius:14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35);
  padding:28px 32px;
  max-width:440px;
  width:100%;
  font-family:'Public Sans', system-ui, sans-serif;
  color:var(--ink,#1c1c1c);
}
#sync-progress-modal h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:20px;
  margin:0 0 6px 0;
}
#sync-progress-modal .sync-progress-sub{
  font-size:13px;
  color:var(--ink-soft,#6f6f6f);
  margin-bottom:16px;
}
#sync-progress-modal .sync-progress-bar{
  height:8px;
  background:#e8ddc2;
  border-radius:100px;
  overflow:hidden;
  margin-bottom:12px;
}
#sync-progress-modal .sync-progress-fill{
  height:100%;
  background:linear-gradient(90deg, #0f5e57, #1e6bd6);
  border-radius:100px;
  width:0%;
  transition:width .3s ease;
}
#sync-progress-modal .sync-progress-msg{
  font-size:13px;
  color:#0a3f3a;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  min-height:18px;
}
@keyframes sync-fade{ from{opacity:0;} to{opacity:1;} }

/* ============================================================
 * Overlay de bloqueo (expiración de las 120h)
 * ============================================================ */
#sync-block-overlay{
  position:fixed;
  inset:0;
  z-index:9600;
  background:rgba(20,10,10,.72);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  animation:sync-fade .2s ease;
}
#sync-block-overlay.hidden{ display:none; }
#sync-block-overlay .sync-block-card{
  background:#fffdf6;
  border:1px solid #d0b7b7;
  border-top:4px solid #c8322f;
  border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  padding:32px 36px;
  max-width:520px;
  width:100%;
  text-align:center;
  font-family:'Public Sans', system-ui, sans-serif;
  color:var(--ink,#1c1c1c);
}
#sync-block-overlay .sync-block-icon{
  width:56px; height:56px;
  margin:0 auto 14px;
  color:#c8322f;
}
#sync-block-overlay .sync-block-icon svg{ width:100%; height:100%; stroke:currentColor; }
#sync-block-overlay h2{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:24px;
  margin:0 0 10px 0;
  color:#8b1717;
}
#sync-block-overlay p{
  font-size:14px;
  line-height:1.5;
  color:var(--ink,#1c1c1c);
  margin:0 0 8px 0;
}
#sync-block-overlay .sync-block-info{
  color:var(--ink-soft,#6f6f6f);
  font-size:13px;
  margin:12px 0 20px 0;
}
#sync-block-overlay .sync-block-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:22px;
  flex-wrap:wrap;
}
#sync-block-overlay .sync-block-actions .sync-btn{
  font-size:14px;
  padding:12px 18px;
}
#sync-block-overlay .sync-block-hint{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--line,#e8ddc2);
  color:var(--ink-soft,#6f6f6f);
  font-size:12px;
}

/* Cuando el overlay está visible, el body no puede hacer scroll. */
body.sync-blocked{
  overflow:hidden;
}