/* flots · css/paginas/avances.css
   Avances (/panel/avances) — Avances.dc.html (1440) y MAvances.dc.html (390). */

/* ---------- Cabecera ---------- */
.avances-cabecera{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}
.avances-titulos{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.avances-sub{ margin:0; font-size:18px; line-height:1.45; color:var(--muted); }
.avances-ronda{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  max-width:46%;
  text-align:right;
}
.avances-ronda-titulo{ font-size:20px; }
.avances-ronda-meta{ font-size:15px; line-height:1.4; color:var(--muted); }
.avances-ronda-elegir{ display:block; }
.avances-ronda-select{
  width:auto;
  max-width:100%;
  height:44px;
  font-size:18px;
}
.avances-instruccion{ margin:0; font-size:15px; font-weight:500; }

/* ---------- Cuerpo: imagen + comentarios ---------- */
.avances-cuerpo{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(300px, 26.4vw, 380px);
  gap:28px;
}
.avances-izq{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.avances-escenario{
  --alto-escenario:560px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--alto-escenario);
  background:var(--placeholder);
  overflow:hidden;
}
.avances-etiqueta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:16px;
  font-size:15px;
  color:var(--muted);
  text-align:center;
}
/* La capa de pines tiene exactamente el tamaño de la imagen: los % caen sobre la imagen */
.avances-lienzo{
  position:relative;
  display:block;
  flex-shrink:0;
  width:min(100%, calc(var(--alto-escenario) * var(--ratio, 1.6)));
  aspect-ratio:var(--ratio, 1.6);
  margin:0;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
}
.avances-lienzo-editable{ cursor:crosshair; }
.avances-lienzo:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.avances-lienzo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none;
}

/* Pin: gota de 32 px con la punta abajo a la izquierda, centrada en el punto tocado */
.avances-pin{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin:-16px 0 0 -16px;
  border-radius:50% 50% 50% 0;
  background:var(--accent);
  color:#FFFFFF;
  font-size:14px;
  font-weight:600;
  line-height:1;
  box-shadow:var(--sombra-pin);
  pointer-events:none;
  animation:flotsFade .2s ease-out 1;
}
.avances-pin-activo{ z-index:2; box-shadow:0 0 0 3px #FFFFFF, var(--sombra-pin); }
.avances-pin-estudio{ background:var(--ink); }

/* Miniaturas */
.avances-miniaturas{ display:flex; gap:10px; overflow-x:auto; }
.avances-miniatura{
  position:relative;
  flex:0 0 auto;
  width:120px;
  height:76px;
  padding:0;
  border:1px solid var(--line-input);
  background:var(--placeholder);
  font:inherit;
  font-size:14px;
  color:var(--muted);
  overflow:hidden;
  cursor:pointer;
}
.avances-miniatura:hover{ border-color:var(--dashed); }
.avances-miniatura[aria-pressed="true"]{ border:2px solid var(--ink); }
.avances-miniatura:focus-visible{ outline-offset:2px; }
.avances-miniatura img{ display:block; width:100%; height:100%; object-fit:cover; }
.avances-miniatura-num{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:1px 7px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  line-height:1.5;
}
.avances-miniatura-num.sin-imagen{
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:none;
  color:var(--muted);
  font-size:14px;
  font-weight:400;
}

/* ---------- Comentarios ---------- */
/* Desktop: el panel acompaña el alto de la columna de la imagen y la lista scrollea */
.avances-lateral{ position:relative; min-width:0; min-height:420px; }
.avances-comentarios{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px;
  background:var(--surface);
}
.avances-comentarios-cabeza{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.avances-comentarios-cabeza h2{ margin:0; font-size:22px; font-weight:500; line-height:1.2; }
.avances-cuenta{ flex-shrink:0; font-size:14px; color:var(--muted); }
.avances-vacio{
  margin:0;
  padding:20px;
  border:1px dashed var(--line-input);
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.avances-lista{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  margin:0;
  padding:2px;
  list-style:none;
  overflow:auto;
}
.avances-item{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 28px;
  gap:10px;
  align-items:start;
}
.avances-item-lectura{ grid-template-columns:28px minmax(0, 1fr); }
.avances-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
}
.avances-num-estudio{ background:var(--ink); }
.avances-texto.campo-control{
  height:auto;
  min-height:0;
  padding:10px 12px;
  font-size:15px;
  line-height:1.45;
}
.avances-texto.campo-control:disabled{ background:var(--surface-2); }
.avances-borrar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  cursor:pointer;
}
.avances-borrar:hover{ color:var(--ink); }
.avances-borrar:disabled{ color:var(--disabled); cursor:not-allowed; }
.avances-leido{ margin:0; padding-top:3px; font-size:15px; line-height:1.5; color:var(--text-body); overflow-wrap:anywhere; }
.avances-autor{ font-weight:600; color:var(--ink); }

.avances-agregar{
  flex-shrink:0;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border:0;
  background:none;
  font:inherit;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
}
.avances-agregar:hover{ color:var(--muted); }
.avances-agregar:disabled{ color:var(--disabled); cursor:not-allowed; }

.avances-nota{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.avances-error{ margin:0; font-size:14px; font-weight:500; line-height:1.4; color:var(--danger); }
.avances-acciones{
  flex-shrink:0;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.avances-btn{ height:50px; padding:0 16px; font-size:16px; }
.avances-estado{
  flex-shrink:0;
  margin:auto 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
}

/* ---------- Tablet: comentarios debajo de la imagen ---------- */
@media (max-width: 1199px){
  .avances-cuerpo{ grid-template-columns:minmax(0, 1fr); gap:20px; }
  .avances-escenario{ --alto-escenario:clamp(300px, 48vw, 520px); }
  .avances-lateral{ min-height:0; }
  .avances-comentarios{ position:static; }
  .avances-lista{ overflow:visible; }
  .avances-acciones{ flex-direction:row; }
  .avances-acciones .avances-btn{ flex:1 1 0; }
}

/* ---------- Celular (MAvances) ---------- */
@media (max-width: 767px){
  .avances-shell .cel-main{ gap:16px; }
  .avances-titulos{ gap:6px; }
  /* MAvances: 48 px a 390 (el token display-sm da 44) y un poco menos en 360 */
  .avances-titulos .display-sm{ font-size:clamp(42px, 12.3vw, 48px); }
  .avances-sub{ font-size:15px; }
  .avances-ronda-select{ width:100%; height:44px; font-size:16px; }

  .avances-escenario{ --alto-escenario:300px; }
  .avances-etiqueta{ font-size:14px; }

  .avances-miniaturas{ gap:8px; }
  .avances-miniatura{ flex:1 1 0; min-width:64px; width:auto; height:56px; }

  .avances-comentarios{ gap:12px; padding:16px; }
  .avances-comentarios-cabeza h2{ font-size:18px; }
  .avances-cuenta{ font-size:13px; }
  .avances-vacio{ padding:0; border:0; font-size:14px; }
  .avances-item{ grid-template-columns:26px minmax(0, 1fr) 28px; gap:8px; }
  .avances-item-lectura{ grid-template-columns:26px minmax(0, 1fr); }
  .avances-num{ width:26px; height:26px; font-size:12px; }
  .avances-texto.campo-control{ padding:10px; }
  /* Al enfocar un comentario, que no quede tapado por la barra fija ni por el banner */
  .avances-texto,
  .avances-agregar{ scroll-margin:calc(var(--alto-banner) + 16px) 0 calc(110px + env(safe-area-inset-bottom, 0px)); }

  /* Barra de acciones fija (MAvances): Enviar | Aprobar */
  .avances-barra{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    padding:12px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .avances-barra .avances-btn{ height:50px; padding:0 10px; font-size:15px; }
}