/* ==========================================================================
   02. ESTRUCTURA Y LAYOUT (APP BASE)
   ========================================================================== */

/* ── Base y Reseteo ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--arena);
  color: var(--tinta);
  font-family: var(--dsv-font-sans);
  font-size: 15px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

/* ── Contenedor Principal (El móvil) ── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* Permite crecer si JFB lo necesita, evitando recortes */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--papel);
  box-shadow: 0 0 40px rgba(0,0,0,0.08); /* Sombra para destacar en PC */
}

/* ── Cabecera ── */
.cab {
  flex: none;
  background: var(--tinta) !important;
  color: var(--blanco);
  padding-top: env(safe-area-inset-top); /* Respeta el notch del iPhone */
}

/* Fila superior (Logo y Nº Parte) */
.cab-fila {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 0;
}
.cab-logo { display: block; height: 22px; width: auto; }
.cab-num { display: flex; align-items: baseline; gap: 6px; }
.cab-num-etq { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--gris-cab); }
.cab-num-valor { font-size: 17px; font-weight: 700; color: var(--amarillo); font-variant-numeric: tabular-nums; }

/* Fila inferior (Paso, Fecha, Título y Progreso) */
.cab-paso { padding: 12px 16px 10px; }
.cab-meta { display: flex; justify-content: space-between; align-items: baseline; }
.cab-contador {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amarillo);
}
.cab-fecha {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--gris-cab); font-variant-numeric: tabular-nums;
  margin-left: auto; /* desplazar fecha a la derecha */	
}
.cab-titulo { color: var(--blanco); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }

/* Barra de progreso */
.progreso { display: flex; gap: 4px; margin-top: 12px; }
.progreso-seg {
  flex: 1; height: 16px; padding: 0; border: 0; background: none;
  display: flex; align-items: center;
}
.progreso-seg::before {
  content: ""; display: block; width: 100%; height: 4px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 160ms var(--curva);
}
.progreso-seg.is-hecho::before { background: var(--amarillo); }

/* ── Contenido Central ── */
.contenido {
/*   background: var(--papel); */
  flex: 1;
  padding: 16px 0 28px 0;
}

/* ── Barra Inferior Fija ── */
.barra {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  background: color: var(--blanco);
  border-top: 1.5px solid var(--amarillo);
  box-shadow: var(--sombra-barra);
  position: sticky; /* Se ancla abajo sin romper el scroll del body */
  bottom: 0;
  z-index: 99;
}