/* Modal canonical styles placeholder */
#popupFormulario, .modal-formulario { display:none; }
/* TL V2 — FORMULARIO MODAL (100% tokens/dials) */


/* Header / Close button */
.tlv2-page .tlv2-modal__header{ display:flex; align-items:center; justify-content:space-between; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.tlv2-page .tlv2-modal__title{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: var(--lh-heading); color: var(--color-heading); font-weight: var(--font-weight-bold); margin: 0; }

.tlv2-page .tlv2-modal__close{
  appearance: none;
  border: 1px solid color-mix(in oklab, #ffffff 10%, transparent);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-base);
  padding: 8px 10px;
  line-height: 1;
  cursor: pointer;
}
.tlv2-page .tlv2-modal__close:focus-visible{
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* Body */
.tlv2-page .tlv2-modal__body{ display:grid; gap: var(--flow-space); }
.tlv2-page .tlv2-modal__body p{ margin: 0; color: var(--color-text); line-height: var(--lh-normal); }

/* Footer / Actions */
.tlv2-page .tlv2-modal__actions{ display:flex; flex-wrap:wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.tlv2-page .tlv2-modal__actions .btn-cta{
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
  color: var(--cta-text);
  box-shadow: var(--cta-shadow);
  border-radius: var(--radius-cta);
  min-height: var(--btn-height);
  padding: var(--btn-pb) var(--btn-pi);
  font-weight: var(--btn-font-weight);
}

/* Small screens */
@media (max-width: 520px){
}

@media (max-width: 768px){
  .tlv2-page .tlv2-modal__actions .btn-cta{ background-image: var(--role-cta-overlay-mobile); }
}

/* ==========================================================================
   TLV2 — PATCH (PEGA AL FINAL) para formulario-modal.css
   Objetivo: aplicar propiedades de CTA canónicas en el modal (sin shorthands).
   ========================================================================== */

.tlv2-page .tlv2-modal__actions .tlv2-cta{
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
}
@media (max-width: 768px){
  .tlv2-page .tlv2-modal__actions .tlv2-cta{
    background-image: var(--role-cta-overlay-mobile);
  }
}

/* === TLV2 Modal CTA canonical mapping + legacy alias === */
.tlv2-page .tlv2-modal__actions .tlv2-cta,
.tlv2-page .tlv2-modal__actions .cta[data-cta]{
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
}
@media (max-width: 768px){
  .tlv2-page .tlv2-modal__actions .tlv2-cta,
  .tlv2-page .tlv2-modal__actions .cta[data-cta]{
    background-image: var(--role-cta-overlay-mobile);
  }
}