/* ============================================================================
   SEGURATIS · LA ESPERA DEL PRECIO
   Claude Design → «Carga Cotizacion.dc.html» (390 px), traída el 13-08-2026.

   El panel es el PASO 3 del formulario (`parts/formularios/carga.php`), así que
   aquí NO hay tarjeta, ni hero, ni migas: eso ya lo pone el formulario. Solo lo
   de dentro.

   HOJA APARTE Y SIEMPRE CARGADA, por lo mismo que formularios.css: el panel sale
   en cualquier página cuyo formulario dé precio —ramo, ficha, página de servicio
   o de intención— y cada una carga una hoja de plantilla distinta. En la hoja de
   una sola plantilla, en las otras tres saldría sin estilo.

   Valores literales del documento donde el token no coincide, misma regla que
   formularios.css: manda el documento.

   Requiere: tokens.css -> componentes.css
   ============================================================================ */

/* ---- El anillo y el titular ---------------------------------------------- */
.carga-estado { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.carga-anillo {
  position: relative; flex: 0 0 52px;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
}
.carga-anillo__pulso {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c-cta-border); pointer-events: none;
  animation: pulso 2s ease-out infinite;
}
.carga-anillo__giro {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 3px solid var(--c-selection); border-top-color: var(--c-action);
  animation: giro .85s linear infinite;
}
.carga-anillo__pct {
  position: relative;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--c-action-ink);
}
.carga-anillo--listo {
  border-radius: 50%; background: var(--c-positive);
  box-shadow: var(--sh-green); animation: pop .5s ease-out both;
}

.carga-estado__txt    { flex: 1 1 auto; min-width: 0; display: block; }
.carga-estado__titulo {
  display: block; font-size: 20px; line-height: 1.2; font-weight: 800;
  letter-spacing: -.028em; color: var(--c-ink); text-wrap: balance;
}
.carga-estado__sub { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--c-ink-2); }

/* ---- La barra ------------------------------------------------------------ */
.carga-barra          { margin-top: 18px; }
.carga-barra__carril  { height: 6px; border-radius: 6px; background: var(--c-divider); overflow: hidden; }
.carga-barra__relleno {
  height: 6px; border-radius: 6px; background: var(--c-action);
  transition: width .45s cubic-bezier(.22,.61,.36,1), background-color .3s ease-out;
}
.carga-barra__pie      { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; }
.carga-barra__contador { font-size: 13px; font-weight: 700; color: var(--c-action-ink); }
.carga-barra__restante { font-size: 12.5px; color: var(--c-ink-3); }

/* Al terminar, la barra y el contador se ponen en verde. */
.carga.is-listo .carga-barra__relleno  { background: var(--c-positive); }
.carga.is-listo .carga-barra__contador { color: var(--c-positive); }

/* ---- Los cuatro pasos ---------------------------------------------------- */
.carga-pasos { display: grid; gap: 0; margin-top: 18px; padding-top: 4px; border-top: var(--bd) solid var(--c-divider); }

.carga-paso {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: var(--bd) solid var(--c-surface-1);
}
.carga-paso__punto {
  position: relative; flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--c-surface-1);
}
/* El check y el giro solo existen en su estado. Sin esto salen los dos a la vez
   en los cuatro pasos, que es justo lo que se ve al maquetar sin JS. */
.carga-paso__punto svg,
.carga-paso__giro { display: none; }
.carga-paso.is-curso .carga-paso__punto { background: var(--c-white); }
.carga-paso.is-curso .carga-paso__giro  {
  display: block; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c-selection); border-top-color: var(--c-action);
  animation: giro .85s linear infinite;
}
.carga-paso.is-hecho .carga-paso__punto     { background: var(--c-positive); }
.carga-paso.is-hecho .carga-paso__punto svg { display: block; }

.carga-paso__txt {
  flex: 1 1 auto; min-width: 0;
  font-size: 15.5px; line-height: 1.4; font-weight: 500; color: var(--c-ink-3);
}
.carga-paso.is-hecho .carga-paso__txt,
.carga-paso.is-curso .carga-paso__txt { font-weight: 700; color: var(--c-ink); }

.carga-paso__dato { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--c-positive); }
.carga-paso__dato:empty { display: none; }

/* ---- Lo que va llegando -------------------------------------------------- */
.carga-hallazgos { display: grid; gap: 8px; margin-top: 18px; }
.carga-hallazgos:empty { display: none; margin-top: 0; }

.carga-hallazgo {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r); background: var(--c-surface-2);
  animation: rise .45s ease-out both;
}
.carga-hallazgo__logo {
  flex: 0 0 46px; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 26px; border-radius: var(--r-mark); overflow: hidden;
  background: repeating-linear-gradient(135deg, #F4EEE9 0 6px, var(--c-surface-2) 6px 12px);
}
.carga-hallazgo__logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.carga-hallazgo__nombre   { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.carga-hallazgo__precio   {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 800; color: var(--c-positive);
}

/* El esqueleto: una fila por tarificador al que se está preguntando. */
.carga-esqueleto {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r); background: var(--c-row-alt);
}
.carga-esqueleto span {
  background: linear-gradient(90deg, #F4EEE9 0%, var(--c-hero-3) 40%, #F4EEE9 80%);
  background-size: 220px 100%;
  animation: brillo 1.3s linear infinite;
}
.carga-esqueleto__logo   { flex: 0 0 46px; height: 26px; border-radius: var(--r-mark); }
.carga-esqueleto__nombre { flex: 1 1 auto; height: 13px; border-radius: 7px; animation-delay: .2s; }
.carga-esqueleto__precio { flex: 0 0 54px; height: 13px; border-radius: 7px; animation-delay: .4s; }

/* ---- El resultado -------------------------------------------------------- */
.carga-listo__caja {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding: 18px; border-radius: var(--r); background: var(--c-tag-soft);
  animation: rise .45s ease-out both;
}
.carga-listo__precio { display: block; }
.carga-listo__rotulo {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-positive);
}
.carga-listo__cifra { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.carga-listo__num   { font-size: 32px; font-weight: 800; letter-spacing: -.038em; line-height: 1; color: var(--c-primary); }
.carga-listo__per   { font-size: 13.5px; font-weight: 600; color: var(--c-ink-3); }
.carga-listo__pill  {
  flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-white); font-size: 12.5px; font-weight: 700;
  white-space: nowrap; color: var(--c-positive);
}
/* El botón es el `formx__cta` del formulario —mismo alto, mismo coral—; del
   documento solo se trae el aire de arriba, que es más corto porque viene
   pegado a la caja verde, y que sea un enlace y no un botón. */
.carga-listo__cta,
.form-pasosx .carga-listo__cta { margin-top: 12px; gap: 10px; text-decoration: none; }
.carga-listo__cta:hover { color: var(--c-white); background: var(--c-action-strong); }

/* ---- El aviso de no cerrar ----------------------------------------------- */
.carga-aviso {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: var(--bd) solid var(--c-divider);
}
.carga-aviso__punto { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-positive); }
.carga-aviso__txt   { flex: 1 1 auto; font-size: 13.5px; line-height: 1.45; color: var(--c-ink-2); }

/* Las tres del documento que el sistema no tenía. `floaty`, `rise` y `pop`
   están en tokens.css y se reutilizan tal cual. */
@keyframes giro   { to { transform: rotate(360deg); } }
@keyframes pulso  { 0% { transform: scale(.85); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
@keyframes brillo { 0% { background-position: -180px 0; } 100% { background-position: 220px 0; } }

/* ESCRITORIO · el formulario es la misma columna estrecha en los dos anchos, así
   que el panel no cambia de forma. Solo crece el titular, como en todo el
   sistema. */
@media (min-width: 1024px) {
  .carga-estado__titulo { font-size: 22px; }
  .carga-listo__num     { font-size: 36px; }
}