/* ==========================================================================
   TL-V2 — FORMULARIO MODAL (V4 · canónico con cards de packs)
   - Uso exclusivo dentro de :where(#popupFormulario.tlv2-modal).
   - Modal centrado, con scroll controlado.
   - Integración con Forminator y sistema de CTAs (roles).

   S0.2 — QUARANTINE DEL MODAL
   ------------------------------------------------------------
   Este archivo queda clasificado como `temporary-exception / special-domain`.

   Qué significa:
   - sí consume el lenguaje visual de TLV2;
   - sí entra en el spec cromático superior como caso especial formal;
   - no se lee todavía como consumer cromático normal del primer ascenso sistémico;
   - sus reglas locales/defensivas no ascienden a contrato por repetición o similitud.

   Taxonomía operativa dentro de este archivo:
   - `modal-domain-shell`      -> contenedor / overlay / panel elevado del modal
   - `modal-local-recipe`      -> presentación interna propia del dominio modal
   - `third-party-defense`     -> integración defensiva con Forminator / plugins
   - `non-promotable`          -> regla que no debe promoverse a authority global/component
   - `future-candidate`        -> patrón que podría refactorizarse después, en slice propio
   ========================================================================== */

/* ------------------------------------------------------------
   1) Contenedor + overlay
   Clasificación: modal-domain-shell / future-candidate
   Nota S0.2: define la existencia del dominio modal, no una recipe reusable de root/section.
   ------------------------------------------------------------ */
:where(#popupFormulario.tlv2-modal){
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--role-modal-padding, clamp(1.25rem, 2vw, 2rem));
  z-index: var(--role-modal-z, 9999);
  opacity: 0;
  transition:
    opacity var(--role-modal-duration, .24s) var(--role-modal-ease, cubic-bezier(.2,.7,.1,1));
  touch-action: none;
}
:where(#popupFormulario.tlv2-modal).is-open{
  display:flex;
  opacity:1;
}
:where(#popupFormulario.tlv2-modal)[hidden]{ display:none !important; }

/* Overlay explícito */
:where(#popupFormulario.tlv2-modal) .tlv2-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--role-context-modal-overlay-bg, var(--role-modal-overlay-bg, rgba(7,11,20,.58)));
  background-image: var(--role-modal-overlay-image,
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 52%));
  -webkit-backdrop-filter: var(--role-modal-backdrop-filter, blur(8px) saturate(112%));
  backdrop-filter: var(--role-modal-backdrop-filter, blur(8px) saturate(112%));
  pointer-events: none;
}
/* Fallback overlay si no existe nodo .tlv2-modal-overlay */
:where(#popupFormulario.tlv2-modal):not(:has(.tlv2-modal-overlay))::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-color: var(--role-context-modal-overlay-bg, var(--role-modal-overlay-bg, rgba(7,11,20,.58)));
  background-image: var(--role-modal-overlay-image,
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 52%));
  -webkit-backdrop-filter: var(--role-modal-backdrop-filter, blur(8px) saturate(112%));
  backdrop-filter: var(--role-modal-backdrop-filter, blur(8px) saturate(112%));
  pointer-events:none;
}

/* ------------------------------------------------------------
   2) Tarjeta / diálogo
   Clasificación: modal-domain-shell + modal-local-recipe
   Nota S0.2: panel elevado especial; no debe leerse como card canónica reusable fuera del dominio modal.
   ------------------------------------------------------------ */
:where(#popupFormulario.tlv2-modal) .tlv2-modal-card,
:where(#popupFormulario.tlv2-modal) .tlv2-modal-dialog,
:where(#popupFormulario.tlv2-modal) .modal-card{
  position:relative;
  z-index:1;
  width:min(652px, 96vw);
  max-height:min(88vh, 880px);
  overflow:auto;
  color: var(--tlv2-modal-copy-body, var(--role-context-modal-body, var(--role-context-modal-foreground, var(--role-modal-fg, #111))));
  border-radius: var(--role-modal-radius, 18px);
  padding: var(--role-modal-card-padding, clamp(1.1rem, 1rem + .45vw, 1.45rem));
  outline: none;
  transform: translate3d(0,6px,0) scale(.985);
  transition:
    transform var(--role-modal-duration, .24s) var(--role-modal-ease, cubic-bezier(.2,.7,.1,1)),
    box-shadow var(--role-modal-duration, .24s) var(--role-modal-ease, cubic-bezier(.2,.7,.1,1));
}
:where(#popupFormulario.tlv2-modal).is-open :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
  transform:none;
}

/* ------------------------------------------------------------
   3) Header, texto y zonas internas
   Clasificación: modal-local-recipe / non-promotable
   Nota S0.2: tipografías, eyebrow, badge y wrapper interno son presentation local del modal.
   ------------------------------------------------------------ */

:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-card, .tlv2-modal-dialog, .modal-card, [data-modal-surface="dialog"]){
  border: 1px solid var(--tlv2-modal-panel-border, color-mix(in oklch, rgba(15,23,42,.18) 78%, transparent));
  border-radius: var(--role-modal-radius, 18px);
  background-color: var(--tlv2-modal-panel-surface, var(--role-context-modal-surface, #fff));
  background-image: linear-gradient(180deg,
      color-mix(in oklch, var(--tlv2-modal-panel-surface-2, var(--tlv2-modal-panel-surface, #fff)) 97%, white 3%) 0%,
      var(--tlv2-modal-panel-surface, #fff) 100%);
  box-shadow:
    var(--tlv2-modal-panel-highlight, inset 0 1px 0 rgba(255,255,255,.46)),
    0 1px 0 rgba(255,255,255,.18),
    var(--tlv2-modal-panel-shadow, 0 22px 52px rgba(12,18,28,.18));
}

:where(#popupFormulario.tlv2-modal) [data-modal-surface="form-wrapper"]{
  border-radius: var(--role-context-modal-field-radius, var(--role-input-radius, 14px));
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-header{
  margin-bottom:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  width:fit-content;
  max-width:100%;
  margin:0;
  padding:.34rem .7rem;
  border-radius:999px;
  border: var(--eyebrow-border-width, 1px) solid var(--eyebrow-border, rgba(15,23,42,.12));
  background: var(--eyebrow-bg, rgba(255,255,255,.72));
  box-shadow: var(--eyebrow-shadow, inset 0 1px 0 rgba(255,255,255,.34));
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  line-height:1;
  color: var(--eyebrow-fg, var(--tlv2-modal-copy-muted));
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-title{
  font-size:clamp(1.3rem,2vw,1.7rem);
  line-height:1.2;
  font-weight:650;
  margin:0;
  color: var(--tlv2-modal-copy-heading, currentColor);
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-subtitle{
  font-size:.9rem;
  line-height:1.5;
  color: var(--tlv2-modal-copy-muted, currentColor);
  margin:0;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-body{
  margin-top:1.1rem;
  margin-bottom:1.1rem;
  font-size:.95rem;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:640px;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-body,
:where(#popupFormulario.tlv2-modal) .tlv2-modal-form{
  margin-inline:auto;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-form-placeholder{
  padding:1.25rem;
  border-radius:1rem;
  border:1px dashed var(--role-context-modal-preview-border, color-mix(in oklch, rgba(148,163,184,.28) 70%, transparent));
  background-color: var(--role-context-modal-preview-surface, color-mix(in oklch, var(--tlv2-modal-panel-surface, #fff) 96%, var(--tlv2-modal-panel-surface-2, #f8fafc) 4%));
  font-size:.9rem;
  color: var(--tlv2-modal-muted, var(--tlv2-text-muted, rgba(15,23,42,.7)));
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-footer{
  margin-top:.75rem;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-legal{
  font-size:.75rem;
  line-height:1.4;
  color: var(--tlv2-modal-muted, var(--tlv2-text-muted, rgba(15,23,42,.7)));
}

/* Badge Pack */
:where(#popupFormulario.tlv2-modal) [data-pack-badge],
:where(#popupFormulario.tlv2-modal) .tlv2-modal-pack-badge{
  margin-top:.35rem;
  font-size:.8rem;
  font-weight:500;
  --tlv2-pill-gap: .35rem;
  --tlv2-pill-pad-y: .2rem;
  --tlv2-pill-pad-x: .75rem;
  --tlv2-pill-min-height: 0;
}

/* ------------------------------------------------------------
   4) Botón cerrar
   Clasificación: component-authority mínima dentro de `surface-modal`
   Nota S0.2: entra al sistema como recipe sensible de contexto modal, no como botón genérico de landing.
   ------------------------------------------------------------ */
:where(#popupFormulario.tlv2-modal) :is(.modal-close,.tlv2-modal-close,[data-close="modal"]){
  position:absolute;
  top:.85rem;
  right:.85rem;
  inline-size: var(--role-modal-close-size, 42px);
  block-size: var(--role-modal-close-size, 42px);
  display:inline-grid;
  place-items:center;
  border-radius: var(--role-modal-close-radius, 999px);
  border: 1px solid color-mix(in oklch, var(--tlv2-modal-panel-border-soft, rgba(15,23,42,.12)) 82%, transparent);
  cursor:pointer;
  color: var(--role-context-modal-close-icon, var(--role-modal-close-icon, rgba(15,23,42,.66)));
  background-color: var(--role-context-modal-close-surface, var(--role-modal-close-surface, rgba(255,255,255,.82)));
  box-shadow: 0 8px 18px rgba(12,18,28,.10), inset 0 1px 0 rgba(255,255,255,.48);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
}
:where(#popupFormulario.tlv2-modal) :is(.modal-close,.tlv2-modal-close,[data-close="modal"]):hover{
  background-color: var(--role-context-modal-close-surface-hover, var(--role-modal-close-surface-hover, rgba(255,255,255,.94)));
}

/* ------------------------------------------------------------
   5) Focus ring accesible SOLO con teclado
   Clasificación: context-authority / guardrail compartido
   Nota S0.2: guardrail sistémico válido; no es deuda local.
   ------------------------------------------------------------ */
:where(#popupFormulario.tlv2-modal) :where(
  a,button,input,select,textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline: 2px solid var(--tlv2-ring, oklch(0.79 0.07 210));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tlv2-ring, oklch(0.79 0.07 210)) 40%, transparent);
}

/* Móvil: modal ocupa ancho completo, altura controlada */
@media (max-width:480px){
  :where(#popupFormulario.tlv2-modal){
    padding: var(--role-modal-padding-mobile, 1rem);
    align-items:flex-start;
    justify-content:center;
  }
  :where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
    width:100%;
    max-height: calc(100vh - 2.75rem);
    border-radius: var(--role-modal-radius-mobile, 14px);
    padding: var(--role-modal-card-padding-mobile, 1rem);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  :where(#popupFormulario.tlv2-modal),
  :where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
    transition:none;
    transform:none;
  }
}

/* ------------------------------------------------------------
   6) Hardening de scroll de fondo
   Clasificación: modal-domain-shell / non-promotable
   Nota S0.2: comportamiento de portal/anclado; no promocionable a contrato cromático general.
   ------------------------------------------------------------ */
body.modal-open{
  overflow:hidden;
  color: var(--tlv2-modal-copy-body, inherit);
  overscroll-behavior:contain;
}
:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
  touch-action:auto;
}

/* ------------------------------------------------------------
   7) Integración con Forminator (campos)
   Clasificación: third-party-defense / non-promotable
   Nota S0.2: bloque defensivo contra CSS del tercero. Los `!important` de esta zona no deben ascender al spec superior.
   ------------------------------------------------------------ */

/* Limpieza de wrappers para que no sumen fondos/sombras */
:where(#popupFormulario.tlv2-modal) .forminator-ui :where(.forminator-row, .forminator-field, .intl-tel-input){
  background-color: transparent !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  outline:0 !important;
  border:0 !important;
}

/* Controles básicos: borde 1px estable y fondo limpio */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
){
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  border-radius: var(--role-input-radius, .75rem) !important;
  background-color: var(--tlv2-field-surface, #fff) !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  outline:0 !important;
  transition:
    background-color .15s ease,
    border-color .15s ease;
}

/* Fallback por si el plugin usa .forminator-input en el propio control */
:where(#popupFormulario.tlv2-modal) .forminator-ui :where(
  input.forminator-input,
  textarea.forminator-input,
  select.forminator-input
){
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  background-color: var(--tlv2-field-surface, #fff) !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  outline:0 !important;
}

/* Hover tenue: mantiene borde visible */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
):hover{
  background-color: var(--tlv2-field-surface-hover, oklch(0.94 0 0)) !important;
  border-color: var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
}

/* Focus con mouse: sin sombras, solo borde estable */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
):is(:focus,:active){
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  background-color: var(--tlv2-field-surface, #fff) !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  outline:0 !important;
}

/* Teclado: ring accesible + mantiene el borde 1px */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
):focus-visible{
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  outline: var(--role-focus-ring-width, 2px) solid var(--role-context-modal-field-ring-outline, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210)))) !important;
  box-shadow: 0 0 0 2px var(--role-context-modal-choice-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210))) 40%, transparent)) !important;
}

/* Teléfono con intl-tel-input: asegura ring en el input interno */
:where(#popupFormulario.tlv2-modal) .intl-tel-input input:focus-visible{
  outline: var(--role-focus-ring-width, 2px) solid var(--role-context-modal-field-ring-outline, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210)))) !important;
  box-shadow: 0 0 0 2px var(--role-context-modal-choice-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210))) 40%, transparent)) !important;
}

/* Radios/checkbox: ring en label cuando se navega con teclado */
:where(#popupFormulario.tlv2-modal) .forminator-ui input[type="radio"]:focus-visible + label,
:where(#popupFormulario.tlv2-modal) .forminator-ui input[type="checkbox"]:focus-visible + label{
  outline: var(--role-focus-ring-width, 2px) solid var(--role-context-modal-field-ring-outline, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210)))) !important;
  box-shadow: 0 0 0 2px var(--role-context-modal-choice-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210))) 40%, transparent)) !important;
  border-radius:.5rem;
}

/* Bullets y checkboxes sin sombras extra del plugin */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(.forminator-radio-bullet,.forminator-bullet,.forminator-checkbox-box){
  outline:0 !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
}

/* ------------------------------------------------------------
   8) CTA del modal (usa roles de CTA)
   Clasificación: modal-local-recipe + future-candidate
   Nota S0.2: converge visualmente con CTA primario, pero sigue siendo submit de dominio modal; no asciende todavía a button contract general.
   ------------------------------------------------------------ */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(.forminator-button,.forminator-button-submit){
  display:block;
  width:100%;
  max-width:360px;
  margin-inline:auto;
  margin-top:.25rem;

  padding:1.1rem 1.9rem;
  min-height: var(--role-cta-submit-min-h, 50px);
  border-radius: var(--role-cta-submit-radius, var(--role-cta-radius, 999px));

  font-size:1rem;
  font-weight:600;
  text-align:center;
  line-height:1.1;

  background-color: var(--role-cta-submit-surface, var(--role-button-primary-surface, var(--role-cta-surface, var(--color-primary, #0a84ff)))) !important;
  color: var(--role-cta-submit-foreground, var(--role-button-primary-foreground, var(--role-cta-foreground, var(--role-on-primary, #fff)))) !important;
  border: 1px solid var(--role-cta-submit-border, var(--role-button-primary-border, var(--role-cta-border))) !important;

  background-image:none !important;
  text-shadow:none !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  filter:none !important;
  opacity:1 !important;
  cursor:pointer;
}

:where(#popupFormulario.tlv2-modal) .forminator-ui :is(.forminator-button,.forminator-button-submit):hover{
  filter:brightness(.96);
  box-shadow: var(--role-cta-submit-shadow-hover, var(--role-cta-submit-shadow, var(--cta-shadow, none))) !important;
}

:where(#popupFormulario.tlv2-modal) .forminator-ui :is(.forminator-button,.forminator-button-submit):active{
  filter:brightness(.90);
  box-shadow: var(--role-cta-submit-shadow-active, var(--role-cta-submit-shadow, var(--cta-shadow, none))) !important;
}

/* Mantener focus accesible, integrado con el ring global */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(.forminator-button,.forminator-button-submit):focus-visible{
  outline: var(--role-focus-ring-width, 2px) solid var(--role-context-modal-field-ring-outline, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210)))) !important;
  box-shadow: 0 0 0 2px var(--role-context-modal-choice-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--tlv2-ring, oklch(0.79 0.07 210))) 40%, transparent)) !important;
}

/* Row del submit limpio */
:where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-row:has(.forminator-button-submit){
  background-color: transparent !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  outline:0 !important;
  border:0 !important;
}

/* En móvil: wrappers sin “aureolas” por :focus-within */
@media (hover:none) and (pointer:coarse){
  :where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-field:focus,
  :where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-field:focus-within,
  :where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-row:focus,
  :where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-row:focus-within{
    outline:0 !important;
    box-shadow: var(--role-context-modal-field-shadow, none) !important;
    background-color:transparent !important;
    border:0 !important;
  }
}

/* ------------------------------------------------------------
   9) Layout general del formulario dentro del modal
   Clasificación: modal-local-recipe / non-promotable
   Nota S0.2: layout interno del form wrapper; no es authority global ni component-level.
   ------------------------------------------------------------ */
:where(#popupFormulario.tlv2-modal) .forminator-ui{
  width:100%;
  max-width:600px;
  margin-inline:auto;
}

/* Separación extra entre packs y primer campo de datos */
:where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-row:first-of-type{
  margin-bottom:1.25rem;
}

/* Footer con aire extra en escritorio y móvil */
:where(#popupFormulario.tlv2-modal) .tlv2-modal-dialog{
  padding-bottom:1.75rem;
}
@media (max-width:640px){
  :where(#popupFormulario.tlv2-modal) .tlv2-modal-dialog{
    padding:1.25rem 1rem 2rem;
  }
  :where(#popupFormulario.tlv2-modal) .tlv2-modal-footer{
    margin-top:1.25rem;
  }
  :where(#popupFormulario.tlv2-modal) .tlv2-modal-legal{
    font-size:.78rem;
    line-height:1.4;
  }
}

/* ------------------------------------------------------------
   10) Selector de pack como cards (primer campo radio)
   Clasificación: modal-local-recipe / future-candidate
   Nota S0.2: recipe local del funnel modal-packs. No debe leerse como card canónica reusable fuera de este dominio.
   Nota S4: el uso de :first-of-type es SOLO fallback local del markup actual de Forminator; no constituye contrato ni autoridad del sistema.
   ------------------------------------------------------------ */

/* Margen inferior del grupo de packs */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type{
  margin-bottom:1.5rem;
}

/* Cada opción de pack se comporta como una choice-card comercial local */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio{
  position:relative;
  max-width:540px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:4.5rem;
  padding:.85rem .95rem;
  border-radius:1.125rem;
  border:1px solid var(--role-context-modal-choice-border, color-mix(in oklch, var(--role-shell-stroke, rgba(148,163,184,.32)) 82%, transparent));
  background-color: var(--role-context-modal-choice-surface, color-mix(in oklch, var(--role-shell-surface, #ffffff) 88%, var(--role-cta-surface, #16a34a) 12%));
  box-shadow: 0 .55rem 1.4rem -.95rem color-mix(in oklch, var(--role-shell-ink, rgba(15,23,42,.2)) 18%, transparent);
  cursor:pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
  overflow:hidden;
}

:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio::after,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio::after{
  content:"";
  width:1rem;
  height:1rem;
  margin-left:auto;
  flex:0 0 auto;
  border-radius:999px;
  border:1.5px solid color-mix(in oklch, var(--role-context-modal-choice-border, rgba(148,163,184,.45)) 88%, white 12%);
  background:transparent;
  box-shadow: inset 0 0 0 .18rem transparent;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

/* Separación vertical entre cards */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio + .forminator-radio,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio + .forminator-radio{
  margin-top:.7rem;
}

/* Imagen del pack: contenedor limpio */
:where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-radio-image,
:where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-radio-image *{
  border:0 !important;
  box-shadow: var(--role-context-modal-field-shadow, none) !important;
  outline:none !important;
  background-color:transparent !important;
  padding:0 !important;
}

:where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-radio-image{
  flex:0 0 auto;
}

/* Span interno que pinta la miniatura del pack */
:where(#popupFormulario.tlv2-modal) .forminator-ui .forminator-radio-image > span{
  display:block;
  width:2.9rem;
  height:2.9rem;
  border-radius:.9rem;
  border:1px solid color-mix(in oklch, var(--role-context-modal-choice-border, rgba(148,163,184,.38)) 74%, white 26%);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color: var(--role-context-modal-choice-thumb-surface, color-mix(in oklch, var(--role-shell-surface, #ffffff) 94%, var(--role-cta-surface, #16a34a) 6%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

/* Label: texto alineado a la derecha de la miniatura */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio-label,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio-label{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 !important;
  font-family:inherit;
  font-size:.92rem;
  font-weight:500;
}

/* Ocultamos el bullet nativo: la card es el indicador */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio-bullet,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio-bullet{
  display:none !important;
}

/* Escondemos el radio real; se controla solo con la card */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio input[type="radio"],
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Hover: card ligeramente elevada */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:hover,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:hover{
  border-color: var(--role-context-modal-choice-border-hover, color-mix(in oklch, var(--role-cta-surface, #16a34a) 34%, var(--role-shell-stroke, #e5e7eb) 66%));
  background-color: var(--role-context-modal-choice-surface-hover, color-mix(in oklch, var(--role-shell-surface, #ffffff) 84%, var(--role-cta-surface, #16a34a) 16%));
  transform: translateY(-1px);
  box-shadow: var(--role-context-modal-choice-shadow-hover, 0 .85rem 1.65rem -1rem color-mix(in oklch, var(--role-cta-surface, #16a34a) 18%, transparent));
}

:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:hover .forminator-radio-image > span,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:hover .forminator-radio-image > span{
  border-color: color-mix(in oklch, var(--role-cta-surface, #16a34a) 28%, white 72%);
  background-color: color-mix(in oklch, var(--role-shell-surface, #ffffff) 90%, var(--role-cta-surface, #16a34a) 10%);
}

/* Estado seleccionado: borde y fondo usan el color de CTA */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:has(input[type="radio"]:checked),
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:has(input[type="radio"]:checked){
  border-color: var(--role-context-modal-choice-border-selected, var(--role-cta-surface, #16a34a));
  background-color: var(--role-context-modal-choice-surface-selected, color-mix(in oklch, var(--role-cta-surface, #16a34a) 10%, #ffffff 90%));
  box-shadow: var(--role-context-modal-choice-shadow-selected, 0 0 0 1px color-mix(in oklch, var(--role-cta-surface, #16a34a) 28%, transparent), 0 1rem 2rem -1.15rem color-mix(in oklch, var(--role-cta-surface, #16a34a) 26%, transparent));
}

:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:has(input[type="radio"]:checked)::after,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:has(input[type="radio"]:checked)::after{
  border-color: var(--role-context-modal-choice-border-selected, var(--role-cta-surface, #16a34a));
  background: var(--role-cta-surface, #16a34a);
  box-shadow: inset 0 0 0 .2rem color-mix(in oklch, white 74%, transparent);
  transform: scale(1.04);
}

:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:has(input[type="radio"]:checked) .forminator-radio-image > span,
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:has(input[type="radio"]:checked) .forminator-radio-image > span{
  border-color: color-mix(in oklch, var(--role-cta-surface, #16a34a) 42%, white 58%);
  background-color: color-mix(in oklch, var(--role-cta-surface, #16a34a) 8%, #ffffff 92%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 0 0 1px color-mix(in oklch, var(--role-cta-surface, #16a34a) 20%, transparent);
}

/* Foco accesible en la card cuando se navega con teclado */
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:has(input[type="radio"]:focus-visible),
:where(#popupFormulario.tlv2-modal) .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:has(input[type="radio"]:focus-visible){
  box-shadow: 0 0 0 2px var(--role-context-modal-choice-ring, var(--tlv2-ring, rgba(59,130,246,.65))), 0 .85rem 1.6rem -1rem color-mix(in oklch, var(--role-cta-surface, #16a34a) 20%, transparent);
}

/* Versión móvil: cards ocupan casi todo el ancho */
@media (max-width:640px){
  :where(#popupFormulario.tlv2-modal) .forminator-ui
    .forminator-field.forminator-field-radio:first-of-type .forminator-radio,
  :where(#popupFormulario.tlv2-modal) .forminator-ui
    .forminator-field[role="radiogroup"]:first-of-type .forminator-radio{
    max-width:100%;
    padding:.8rem .85rem;
  }
}

/* ------------------------------------------------------------
   11) Texto interno de packs: título + precio (dos líneas)
   ------------------------------------------------------------ */

:where(#popupFormulario.tlv2-modal) .tlv2-pack-label-inner{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.18rem;
}

:where(#popupFormulario.tlv2-modal) .tlv2-pack-label-inner .pack-title{
  font-size:.95rem;
  line-height:1.16;
  font-weight:650;
  color: var(--role-text, var(--tlv2-modal-ink, #0f172a));
}

:where(#popupFormulario.tlv2-modal) .tlv2-pack-label-inner .pack-price{
  font-size:.82rem;
  line-height:1.2;
  font-weight:500;
  color: var(--role-context-modal-choice-muted, var(--tlv2-modal-muted, rgba(15,23,42,.75)));
}

/* TLV2 — armado / anti-flicker para radios */
:where(#popupFormulario.tlv2-modal).tlv2-arming .forminator-field.forminator-field-radio,
:where(#popupFormulario.tlv2-modal).tlv2-arming .forminator-field[data-field-type="radio"] {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  :where(#popupFormulario.tlv2-modal):not(.tlv2-arming) .forminator-field.forminator-field-radio,
  :where(#popupFormulario.tlv2-modal):not(.tlv2-arming) .forminator-field[data-field-type="radio"] {
    transition: opacity .18s ease-out;
    opacity: 1;
  }
}

/* TLV2 — Anti-flicker extra: bloquear interacción durante armado */
:where(#popupFormulario.tlv2-modal).tlv2-arming input[type="radio"],
:where(#popupFormulario.tlv2-modal).tlv2-arming label[for],
:where(#popupFormulario.tlv2-modal).tlv2-arming .forminator-radio {
  pointer-events: none !important;
}

/* TLV2 — Enmascara el grupo de radios mientras arma */
:where(#popupFormulario.tlv2-modal) .forminator-field.forminator-field-radio,
:where(#popupFormulario.tlv2-modal) .forminator-field[data-field-type="radio"] {
  position: relative;
}

:where(#popupFormulario.tlv2-modal).tlv2-arming .forminator-field.forminator-field-radio::after,
:where(#popupFormulario.tlv2-modal).tlv2-arming .forminator-field[data-field-type="radio"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--role-context-modal-arming-mask-surface, var(--role-surface-elevated, var(--role-surface, #fff)));
}

/* Opcional: sin transición para que no “aparezca” con fade */
:where(#popupFormulario.tlv2-modal):not(.tlv2-arming) .forminator-field.forminator-field-radio,
:where(#popupFormulario.tlv2-modal):not(.tlv2-arming) .forminator-field[data-field-type="radio"] {
  transition: none;
}

/* ------------------------------------------------------------
   TLV2 — Ajuste por Admin Bar (logged-in)
   Evita que el modal quede debajo/sobrepuesto con la barra de WP.
------------------------------------------------------------ */
body.admin-bar :where(#popupFormulario.tlv2-modal),
body.admin-bar :where(#popupFormulario.tlv2-modal) .tlv2-modal-overlay {
  inset: 32px 0 0 0;
}
@media (max-width: 782px) {
  body.admin-bar :where(#popupFormulario.tlv2-modal),
  body.admin-bar :where(#popupFormulario.tlv2-modal) .tlv2-modal-overlay {
    inset: 46px 0 0 0;
  }
}

/* ============================================================
   TLV2 — Form (Forminator) styles
   Objetivo: no depender del CSS del plugin; estilo controlado por TLV2
   Scope: SOLO dentro del modal :where(#popupFormulario.tlv2-modal)
   ============================================================ */

:where(#popupFormulario.tlv2-modal) {
  /* MODAL-CONTEXT-CONSUME-01 — el dominio modal consume runtime + roles + bridge; aquí solo aliases locales de consumo. */
  --tlv2-modal-panel-surface: var(--tlv2-surface-modal-surface, var(--role-context-modal-surface, #fff));
  --tlv2-modal-panel-surface-2: var(--tlv2-surface-modal-surface-2, var(--role-context-modal-surface-2, var(--tlv2-modal-panel-surface)));
  --tlv2-modal-panel-border: var(--tlv2-surface-modal-border, var(--role-context-modal-border, color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 72%, transparent)));
  --tlv2-modal-panel-border-soft: var(--role-context-modal-border-soft, color-mix(in oklch, var(--tlv2-modal-panel-border) 56%, transparent));
  --tlv2-modal-panel-shadow: var(--tlv2-surface-modal-shadow, var(--role-context-modal-shadow, var(--role-elevation-family-modal, 0 10px 26px rgba(12,18,28,.06))));
  --tlv2-modal-panel-highlight: var(--tlv2-surface-modal-highlight, var(--role-context-modal-highlight, inset 0 1px 0 rgba(255,255,255,.42)));
  --tlv2-modal-panel-background: linear-gradient(180deg,
      color-mix(in oklch, var(--tlv2-modal-panel-surface-2, var(--tlv2-modal-panel-surface, #fff)) 98%, white 2%) 0%,
      var(--tlv2-modal-panel-surface, #fff) 100%);
  --role-modal-overlay-bg: var(--role-context-modal-overlay-bg, rgba(7,11,20,.58));
  --role-modal-overlay-image: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 52%);
  --role-modal-backdrop-filter: blur(8px) saturate(112%);

  /* MODAL-COPY-CONTEXT-01 — el QA lee estas vars en el root del modal. */
  --tlv2-modal-copy-heading: var(--role-context-modal-foreground, var(--role-modal-fg, #111));
  --tlv2-modal-copy-body: var(--role-context-modal-body, var(--role-context-modal-copy-foreground, var(--tlv2-modal-copy-heading)));
  --tlv2-modal-copy-muted: var(--role-context-modal-muted, var(--tlv2-text-muted, rgba(15,23,42,.7)));
  --tlv2-modal-copy-microcopy: var(--role-context-modal-microcopy, var(--role-context-modal-microcopy-foreground, var(--tlv2-modal-copy-muted)));
  --tlv2-modal-copy-label: var(--role-context-modal-label, var(--role-context-modal-field-label, var(--tlv2-modal-copy-heading)));
  --tlv2-modal-copy-placeholder: var(--role-context-modal-placeholder, var(--role-context-modal-field-placeholder, var(--tlv2-modal-copy-muted)));
  --tlv2-modal-muted: var(--tlv2-modal-copy-muted);

  --tlv2-field-surface: var(--role-context-modal-field-surface, var(--role-context-modal-surface, #ffffff));
  --tlv2-field-surface-hover: var(--role-context-modal-field-surface-hover, var(--tlv2-field-surface));
  --tlv2-field-border: var(--role-context-modal-field-border, rgba(17,24,39,.18));

  --tlv2-form-accent: var(--role-primary, var(--color-primary, #2563eb));
  --tlv2-form-text: var(--tlv2-modal-copy-body, #111827);
  --tlv2-form-muted: var(--tlv2-modal-copy-placeholder, rgba(17,24,39,.65));
  --tlv2-form-surface: var(--role-context-modal-field-surface, #ffffff);
  --tlv2-form-surface-2: var(--role-context-modal-surface-2, #f8fafc);
  --tlv2-form-border: var(--role-context-modal-field-border, rgba(17,24,39,.18));
  --tlv2-form-border-focus: var(--role-context-modal-field-border-strong, var(--tlv2-form-accent));
  --tlv2-form-ring: var(--role-context-modal-field-ring, color-mix(in srgb, var(--tlv2-form-accent) 30%, transparent));
  --tlv2-form-radius: var(--role-context-modal-field-radius, var(--role-input-radius, 12px));
  --tlv2-form-pad-y: var(--role-context-modal-field-pad-y, 12px);
  --tlv2-form-pad-x: var(--role-context-modal-field-pad-x, 14px);
  --tlv2-form-font: var(--role-context-modal-field-font, 14px);
}

/* Layout general */
:where(#popupFormulario.tlv2-modal) .forminator-ui,
:where(#popupFormulario.tlv2-modal) .forminator-custom-form {
  color: var(--tlv2-modal-copy-body, var(--tlv2-form-text));
}

:where(#popupFormulario.tlv2-modal) .forminator-row,
:where(#popupFormulario.tlv2-modal) .forminator-field {
  margin: 0 0 12px;
}

:where(#popupFormulario.tlv2-modal) label,
:where(#popupFormulario.tlv2-modal) .forminator-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tlv2-modal-copy-label, var(--tlv2-form-text));
}

:where(#popupFormulario.tlv2-modal) .forminator-required {
  color: #dc2626;
}

/* Inputs / selects / textarea */
:where(#popupFormulario.tlv2-modal) .forminator-field input[type="text"],
:where(#popupFormulario.tlv2-modal) .forminator-field input[type="email"],
:where(#popupFormulario.tlv2-modal) .forminator-field input[type="tel"],
:where(#popupFormulario.tlv2-modal) .forminator-field input[type="number"],
:where(#popupFormulario.tlv2-modal) .forminator-field input[type="url"],
:where(#popupFormulario.tlv2-modal) .forminator-field input[type="password"],
:where(#popupFormulario.tlv2-modal) .forminator-field select,
:where(#popupFormulario.tlv2-modal) .forminator-field textarea {
  width: 100%;
  box-sizing: border-box;

  background-color: var(--tlv2-form-surface);
  color: var(--tlv2-form-text);

  border: 1px solid var(--tlv2-form-border);
  border-radius: var(--tlv2-form-radius);

  padding: var(--tlv2-form-pad-y) var(--tlv2-form-pad-x);
  font-size: var(--tlv2-form-font);
  line-height: 1.3;

  outline: none;
  box-shadow: var(--role-context-modal-field-shadow, none);
}

:where(#popupFormulario.tlv2-modal) .forminator-field textarea {
  min-height: 110px;
  resize: vertical;
}

:where(#popupFormulario.tlv2-modal) .forminator-field input::placeholder,
:where(#popupFormulario.tlv2-modal) .forminator-field textarea::placeholder {
  color: var(--tlv2-modal-copy-placeholder, color-mix(in srgb, var(--tlv2-form-muted) 80%, transparent));
}

/* Focus accesible */
:where(#popupFormulario.tlv2-modal) .forminator-field input:focus-visible,
:where(#popupFormulario.tlv2-modal) .forminator-field select:focus-visible,
:where(#popupFormulario.tlv2-modal) .forminator-field textarea:focus-visible {
  border-color: var(--tlv2-form-border-focus);
  box-shadow: 0 0 0 4px var(--tlv2-form-ring);
}

/* Errores */
:where(#popupFormulario.tlv2-modal) .forminator-error-message,
:where(#popupFormulario.tlv2-modal) .forminator-response-message {
  font-size: 13px;
  margin-top: 6px;
}

:where(#popupFormulario.tlv2-modal) .forminator-error-message {
  color: #dc2626;
}

:where(#popupFormulario.tlv2-modal) .forminator-field.forminator-has_error input,
:where(#popupFormulario.tlv2-modal) .forminator-field.forminator-has_error select,
:where(#popupFormulario.tlv2-modal) .forminator-field.forminator-has_error textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px color-mix(in srgb, #dc2626 22%, transparent);
}

/* -------------------------------------------------------------------------- */
/* F2-P1.b2 (packs + modal) — MODAL visual premium MVP (markup-safe, v0.1)    */
/* - Estilos para slots canónicos nuevos (body-copy / microcopy / wrapper).   */
/* - Sin tocar lógica de apertura ni integración Forminator.                   */
/* -------------------------------------------------------------------------- */

:where(#popupFormulario.tlv2-modal){
  /* Variables del shell surfaced y de fields ya se publican arriba como contexto modal. */
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-header{
  padding-right: 2.5rem; /* aire para botón cerrar */
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-body{
  display: grid;
  gap: .8rem;
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-body-copy{
  margin: 0;
  padding: .85rem .95rem;
  border-radius: 14px;
  border: 1px solid var(--role-context-modal-copy-border, var(--tlv2-modal-panel-border-soft));
  background-color: var(--tlv2-modal-panel-surface, #fff);
  background-image: var(--role-context-modal-copy-surface, linear-gradient(180deg,
      color-mix(in oklch, var(--tlv2-modal-panel-surface-2, var(--tlv2-modal-panel-surface, #fff)) 98%, white 2%) 0%,
      var(--tlv2-modal-panel-surface, #fff) 100%));
  box-shadow: var(--tlv2-modal-panel-highlight), var(--tlv2-modal-panel-shadow);
  color: var(--tlv2-modal-copy-body, currentColor);
  line-height: 1.58;
  font-size: .92rem;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-body-copy > :first-child{ margin-top: 0; }
:where(#popupFormulario.tlv2-modal) .tlv2-modal-body-copy > :last-child{ margin-bottom: 0; }
:where(#popupFormulario.tlv2-modal) .tlv2-modal-body-copy p + p{ margin-top: .55rem; }

:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom){
  margin: 0;
  padding: .6rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--role-context-modal-microcopy-border, color-mix(in oklch, var(--tlv2-modal-panel-border-soft) 70%, transparent));
  background-color: var(--role-context-modal-microcopy-surface, color-mix(in oklch, var(--tlv2-modal-panel-surface, #fff) 98%, white 2%));
  background-image: none;
  color: var(--tlv2-modal-copy-microcopy, var(--tlv2-modal-muted));
  font-size: .82rem;
  line-height: 1.45;
}
:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom) > :first-child{ margin-top: 0; }
:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom) > :last-child{ margin-bottom: 0; }
:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom) p + p{ margin-top: .35rem; }

:where(#popupFormulario.tlv2-modal) .tlv2-modal-form-wrapper{
  margin: 0;
  padding-top: .15rem;
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-constructor-preview{
  margin: 0;
  padding: .9rem;
  border-radius: 14px;
  border: 1px solid var(--role-context-modal-preview-border, var(--tlv2-modal-panel-border-soft));
  background-color: var(--role-context-modal-preview-surface, color-mix(in oklch, var(--tlv2-modal-panel-surface, #fff) 96%, var(--tlv2-modal-panel-surface-2, #f8fafc) 4%));
  background-image: none;
  box-shadow: 0 8px 18px rgba(12,18,28,.04);
  display: grid;
  gap: .8rem;
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-note{
  padding: .65rem .75rem;
  border-radius: 12px;
  background-color: var(--role-context-modal-preview-note-surface, color-mix(in oklch, var(--tlv2-modal-panel-surface, #fff) 90%, var(--tlv2-modal-panel-surface-2, #f8fafc) 10%));
  background-image: none;
  border: 1px solid var(--role-context-modal-preview-note-border, color-mix(in oklch, rgba(148,163,184,.28) 70%, transparent));
  color: var(--tlv2-modal-copy-microcopy, var(--tlv2-modal-muted));
  font-size: .82rem;
  line-height: 1.45;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-note > :first-child{ margin-top: 0; }
:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-note > :last-child{ margin-bottom: 0; }

:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-form{
  display: grid;
  gap: .65rem;
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-field{
  display: grid;
  gap: .35rem;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-field label{
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tlv2-modal-copy-label, currentColor);
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-field input{
  width: 100%;
  min-height: 42px;
  border-radius: var(--role-context-modal-field-radius, 10px);
  border: 1px solid var(--role-context-modal-field-border, color-mix(in oklch, rgba(148,163,184,.45) 80%, transparent));
  background-color: var(--role-context-modal-field-surface, color-mix(in oklch, var(--tlv2-modal-panel-surface, #fff) 98%, var(--tlv2-modal-panel-surface-2, #f8fafc) 2%));
  background-image: none;
  color: var(--tlv2-modal-copy-body, currentColor);
  padding: .65rem .75rem;
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-field input::placeholder{
  color: var(--tlv2-modal-copy-placeholder, currentColor);
}
:where(#popupFormulario.tlv2-modal) .tlv2-modal-preview-submit button{
  width: 100%;
  min-height: var(--role-cta-submit-min-h, 50px);
  border: 0;
  border-radius: var(--role-cta-submit-radius, var(--role-cta-radius, 12px));
  padding: .7rem .9rem;
  font-weight: 600;
  color: var(--role-cta-submit-foreground, var(--role-cta-foreground, #fff));
  background: var(--role-cta-submit-surface, var(--role-cta-surface, #16a34a));
  box-shadow: var(--role-cta-submit-shadow, var(--cta-shadow, none));
  opacity: .85;
}

@media (max-width: 480px){
  :where(#popupFormulario.tlv2-modal) .tlv2-modal-body-copy{
    padding: .8rem .85rem;
    border-radius: 12px;
  }
  :where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom){
    padding: .55rem .7rem;
    border-radius: 10px;
  }
  :where(#popupFormulario.tlv2-modal) .tlv2-modal-constructor-preview{
    padding: .8rem;
    border-radius: 12px;
    gap: .7rem;
  }
}

/* -------------------------------------------------------------------------- */
/* F2-P1.c — consistencia visual sistémica (modal, markup-safe)               */
/* - Alinea radios/ritmo con cards F2 sin tocar lógica.                        */
/* - HOTFIX 2026-03-31: el dialog final queda con surface sólida explícita.   */
/*   Motivo: el gradiente/alias seguía resolviendo a fondo efectivo transparente */
/*   en runtime aunque el contrato modal ya estuviera publicado correctamente. */
/* -------------------------------------------------------------------------- */

:where(#popupFormulario.tlv2-modal){
  --f2p1c-modal-card-radius: 14px;
  --f2p1c-modal-card-radius-sm: 12px;
  --f2p1c-modal-card-highlight: inset 0 1px 0 rgba(255,255,255,.42);
}

:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-body-copy, .tlv2-modal-constructor-preview){
  border-radius: var(--f2p1c-modal-card-radius);
  box-shadow: var(--tlv2-modal-panel-highlight, var(--f2p1c-modal-card-highlight)), var(--tlv2-modal-panel-shadow, 0 10px 26px rgba(12,18,28,.06));
}

:where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom, .tlv2-modal-preview-note){
  border-radius: var(--f2p1c-modal-card-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

:where(#popupFormulario.tlv2-modal) .tlv2-modal-body{
  gap: .75rem;
}

@media (max-width: 480px){
  :where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-body-copy, .tlv2-modal-constructor-preview){
    border-radius: 12px;
  }
  :where(#popupFormulario.tlv2-modal) :is(.tlv2-modal-microcopy-top, .tlv2-modal-microcopy-bottom, .tlv2-modal-preview-note){
    border-radius: 10px;
  }
}