/* H8a · El año de guardado y el cupón. Clases con el prefijo .guardado__ (arquitectura §2.2). tokens.css y portal.css se leen, no se editan. */

/* El cupón «Se borra este mes» (diseño §10: «el cliente que se borra pronto, como un cupón con sus dos botones»). */
.guardado__cupon {
  position: relative; display: grid; gap: 6px; padding: 16px 18px 14px 26px;
  background: var(--hoja); border-radius: var(--radio-chico); box-shadow: var(--sombra);
  border-left: 5px solid var(--guardado-color, var(--oxido));
}
/* Las dos muescas del troquel, del color del papel de fondo. */
.guardado__cupon::before,
.guardado__cupon::after {
  content: ""; position: absolute; left: -12px; width: 16px; height: 16px; border-radius: 50%; background: var(--papel);
}
.guardado__cupon::before { top: -8px; }
.guardado__cupon::after { bottom: -8px; }
/* El semáforo va en la franja: el latón no llega a 4,5:1 como letra, así que el texto queda en tinta y gris. */
.guardado__cupon--rojo { --guardado-color: var(--oxido); }
.guardado__cupon--amarillo { --guardado-color: var(--laton); }
.guardado__cupon--verde { --guardado-color: var(--verde); }
.guardado__titulo { margin: 0; font: 600 11px var(--letra-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.guardado__texto { margin: 0; font: italic 500 18px/1.3 var(--letra-titulo); color: var(--tinta); }
.guardado__estado { margin: 0; font-size: 14px; color: var(--gris); }
.guardado__instrucciones { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--hoja-2); font-size: 14px; color: var(--tinta); }
.guardado__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 480px) {
  .guardado__botones .boton { flex: 1 1 100%; }
}
/* «El papel que se levanta quiere decir otra capa» (diseño §10): las instrucciones aparecen así. */
@media (prefers-reduced-motion: no-preference) {
  .guardado__instrucciones:not([hidden]) { animation: guardado-levantar 240ms var(--suave) both; }
  @keyframes guardado-levantar { from { opacity: 0; transform: translateY(6px); } }
}