/* ==========================================
   Resumen final en tarjetas (construirResumenVisualLibro)
   Qué cubre: Puntaje, tarjetas con porcentajes, secciones, preguntas, desbloqueos.
   Común a las 3 misiones.
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 11 de 12).
   Secciones:
     · RESUMEN FINAL EN TARJETAS (construirResumenVisualLibro, libro.js)
   ========================================== */

/* ==========================================
   RESUMEN FINAL EN TARJETAS (construirResumenVisualLibro, libro.js)
   Común a la Misión 1 y la Misión 2.
   ========================================== */

.resumen-puntaje,
.resumen-grid,
.resumen-chips,
.resumen-preguntas,
.resumen-desbloqueos,
.resumen-bono {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.resumen-puntaje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.resumen-puntaje-caja {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.resumen-puntaje-caja:nth-child(2) {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}

.resumen-puntaje-valor {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
}

.resumen-puntaje-unidad {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.resumen-bono {
  margin: 0 0 1rem 0;
  padding: 0.5rem 0.8rem;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fef3c7;
  font-size: 0.85rem;
  font-weight: 700;
  color: #92400e;
}

.resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.resumen-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.8rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(30, 27, 58, 0.07);
}

.resumen-tarjeta-etiqueta {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--atx-text-muted);
}

.resumen-tarjeta-porcentaje {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--atx-accent-teal-dark);
}

.resumen-barra {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.resumen-barra-fill {
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--atx-accent-teal), var(--atx-accent-green));
  animation: resumenBarraCrece 0.9s ease-out both;
}

@keyframes resumenBarraCrece {
  from { width: 0; }
  to { width: var(--w); }
}

.resumen-tarjeta-detalle {
  font-size: 0.75rem;
  color: var(--atx-text-muted);
}

.resumen-icono-estado {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  vertical-align: -0.15em;
}

.resumen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resumen-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--atx-text-muted);
}

.resumen-chip.completa {
  border-color: var(--atx-accent-green);
  background: #dcfce7;
  color: #166534;
}

.resumen-preguntas {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.resumen-pregunta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--atx-panel-border);
  border-left-width: 4px;
  border-radius: 10px;
  background: #ffffff;
  font-size: 0.85rem;
}

.resumen-pregunta.ok { border-left-color: var(--atx-accent-green); }
.resumen-pregunta.mal { border-left-color: #ef4444; }
.resumen-pregunta.pendiente { border-left-color: #cbd5e1; opacity: 0.75; }

.resumen-pregunta-titulo {
  font-weight: 700;
}

.resumen-pregunta-detalle {
  font-size: 0.78rem;
  color: var(--atx-text-muted);
  text-align: right;
}

.resumen-desbloqueos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.resumen-desbloqueo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--atx-panel-border);
  border-radius: 14px;
  background: #ffffff;
}

.resumen-desbloqueo.activo {
  border-color: var(--atx-accent-green);
  background: linear-gradient(135deg, #f0fdf4, #ecfeff);
}

.resumen-desbloqueo.bloqueado {
  opacity: 0.65;
}

.resumen-desbloqueo.bloqueado .resumen-desbloqueo-imagen {
  filter: grayscale(1);
}

.resumen-desbloqueo-imagen {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: #f8fafc;
}

.resumen-desbloqueo-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.82rem;
  color: var(--atx-text-muted);
}

.resumen-desbloqueo-texto strong {
  font-size: 0.92rem;
  color: var(--atx-text-dark);
}

.resumen-desbloqueo-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #166534;
}

.resumen-desbloqueo.bloqueado .resumen-desbloqueo-estado {
  color: var(--atx-text-muted);
}