/* ============================================================
   WEB_JPM · Captación multiservicio · T10
   ------------------------------------------------------------
   Mismos tokens y misma gramática que `jpm-lead.css`. No se
   introduce ningún color nuevo ni ninguna tipografía nueva:
   este formulario es el mismo sitio, no otro producto.

   Mobile-first. El diálogo se dimensiona para 360–430px y crece
   hasta dos columnas cuando hay sitio; no al revés.
   ============================================================ */

.ji{
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  padding:clamp(8px,3vw,40px);
  opacity:0;
  transition:opacity var(--motion-content,.32s) ease;
}
.ji--visible{opacity:1}
.ji[hidden]{display:none}

.ji__fondo{
  position:absolute;
  inset:0;
  background:rgba(35,24,33,.55);
  backdrop-filter:blur(6px);
}

.ji__panel{
  position:relative;
  /* El diálogo se mide A SÍ MISMO. Con una media query, el número de
     columnas lo decidiría el ancho del VISOR y no el del panel, que es
     lo que de verdad tiene que caber. Un navegador sin `@container` se
     queda en una columna, que es el diseño mobile-first: degrada a lo
     que ya funciona. */
  container-type:inline-size;
  width:min(760px,100%);
  max-height:calc(100dvh - clamp(16px,6vw,80px));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--jpm-cream,#FBF8F3);
  border-radius:var(--radius-lg,22px);
  box-shadow:var(--shadow-lg,0 40px 90px -40px rgba(81,11,68,.55));
  padding:clamp(20px,3.4vw,46px);
  transform:translateY(12px);
  transition:transform var(--motion-content,.32s) cubic-bezier(.22,.61,.36,1);
}
.ji--visible .ji__panel{transform:none}

.ji__x{
  position:absolute;
  top:10px; right:12px;
  width:44px; height:44px;      /* objetivo táctil mínimo */
  display:grid; place-items:center;
  background:transparent;
  border:0;
  font-size:26px;
  line-height:1;
  color:var(--jpm-muted,#6C5B66);
  cursor:pointer;
  border-radius:var(--radius-sm,8px);
}
.ji__x:hover{color:var(--jpm-purple,#510B44)}
.ji__x:focus-visible{outline:2px solid var(--jpm-purple,#510B44);outline-offset:2px}

/* ─────────────────────────── cabecera ─────────────────────────── */

.ji__cab{margin:0 40px var(--space-md,18px) 0}
.ji__ctx{
  margin:0 0 4px;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--jpm-orange,#CC654B);
  font-weight:700;
}
/* Tamano PROPIO, no heredado. `pages.css` da a los h2 del sitio una
   escala editorial de 76px que en un dialogo se come la cabecera y se
   monta sobre el subtitulo. Aqui el h2 no es un titulo de pagina. */
.ji__cab h2{
  margin:0 0 6px;
  color:var(--jpm-purple,#510B44);
  font-size:clamp(1.25rem,4.2vw,1.6rem);
  line-height:1.25;
  letter-spacing:-.01em;
}
.ji__sub{margin:0;color:var(--jpm-muted,#6C5B66);font-size:.95rem;line-height:1.5}

/* Banda de entorno. Discreta pero imposible de confundir con el sitio. */
.ji__staging{
  margin-top:var(--space-sm,12px);
  padding:10px 12px;
  border:1px solid var(--jpm-yellow,#ECC545);
  border-left-width:4px;
  border-radius:var(--radius-sm,8px);
  background:rgba(236,197,69,.12);
  color:var(--jpm-ink,#2B1D29);
  font-size:.8rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.01em;
}
.ji__staging[hidden]{display:none}

.ji__cargando{
  padding:var(--space-lg,24px) 0;
  color:var(--jpm-muted,#6C5B66);
  font-size:.95rem;
}

/* ─────────────────────────── campos ─────────────────────────── */

.ji__grupo{
  border:0;
  padding:0;
  margin:0 0 var(--space-lg,24px);
}
.ji__grupo legend{
  padding:0;
  margin-bottom:var(--space-sm,12px);
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--jpm-purple-2,#621545);
}

.ji-campo{margin-bottom:var(--space-md,18px)}
.ji-campo label{
  display:block;
  margin-bottom:6px;
  font-size:.9rem;
  font-weight:600;
  color:var(--jpm-text,#3A2B36);
  line-height:1.35;
}
.ji-req{color:var(--jpm-orange,#CC654B)}

.ji-campo input,
.ji-campo select{
  width:100%;
  min-height:48px;               /* pulgar, no cursor */
  padding:11px 13px;
  font:inherit;
  font-size:16px;                /* menos de 16px hace zoom en iOS */
  color:var(--jpm-text,#3A2B36);
  background:var(--jpm-white,#fff);
  border:1px solid var(--jpm-line,#E3D9DF);
  border-radius:var(--radius-sm,8px);
  transition:border-color var(--motion-fast,.18s) ease,
             box-shadow var(--motion-fast,.18s) ease;
}
.ji-campo input:focus-visible,
.ji-campo select:focus-visible{
  outline:0;
  border-color:var(--jpm-purple,#510B44);
  box-shadow:0 0 0 3px rgba(81,11,68,.14);
}
.ji-campo input.ji-mal,
.ji-campo select.ji-mal{
  border-color:var(--jpm-orange,#CC654B);
  box-shadow:0 0 0 3px rgba(204,101,75,.16);
}

.ji-nota{
  margin:6px 0 0;
  font-size:.8rem;
  line-height:1.45;
  color:var(--jpm-muted,#6C5B66);
}
.ji-derivado{
  margin:4px 0 0;
  font-size:.85rem;
  font-weight:700;
  color:var(--jpm-purple,#510B44);
  min-height:1.1em;             /* no salta al aparecer */
}

/* ─────────────────────────── legal ─────────────────────────── */

.ji__legal{
  margin:0 0 var(--space-md,18px);
  padding-top:var(--space-sm,12px);
  border-top:1px solid var(--jpm-line,#E3D9DF);
}
.ji__check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.9rem;
  line-height:1.45;
  color:var(--jpm-text,#3A2B36);
  cursor:pointer;
}
.ji__check input{
  flex:0 0 auto;
  width:20px; height:20px;
  margin-top:1px;
  accent-color:var(--jpm-purple,#510B44);
}
.ji-aviso-legal{
  margin:8px 0 0;
  padding:8px 10px;
  font-size:.8rem;
  line-height:1.45;
  color:var(--jpm-ink,#2B1D29);
  background:rgba(204,101,75,.10);
  border-left:3px solid var(--jpm-orange,#CC654B);
  border-radius:var(--radius-sm,8px);
}

/* La trampa. Fuera de la vista y fuera del árbol de accesibilidad; no
   `display:none`, que muchos robots también saben leer. */
.ji__hp{
  position:absolute!important;
  left:-9999px!important;
  width:1px; height:1px;
  overflow:hidden;
}

/* ─────────────────────────── estados ─────────────────────────── */

.ji__error{
  margin:0 0 var(--space-md,18px);
  padding:11px 13px;
  border-radius:var(--radius-sm,8px);
  background:rgba(204,101,75,.12);
  border-left:4px solid var(--jpm-orange,#CC654B);
  color:var(--jpm-ink,#2B1D29);
  font-size:.9rem;
  line-height:1.5;
}
.ji__error[hidden]{display:none}

.ji__acciones{display:flex;justify-content:flex-end}
.ji__acciones .btn{width:100%;min-height:50px}
#ji-enviar[disabled]{opacity:.6;cursor:progress}

.ji__ok{padding:var(--space-sm,12px) 0}
.ji__ok h3{margin:0 0 8px;color:var(--jpm-purple,#510B44);font-size:clamp(1.15rem,3.8vw,1.4rem);line-height:1.3}
.ji__ok p{margin:0 0 10px;color:var(--jpm-text,#3A2B36);line-height:1.55}
/* DG-00 RC2 · resultado preliminar que calcula el CRM; aqui solo se presenta. */
.ji-resultado{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:rgba(81,11,68,.06);border-left:3px solid var(--jpm-purple,#510B44)}
.ji-resultado ul{margin:6px 0 0;padding-left:18px}
.ji-resultado li{margin:0 0 4px;line-height:1.5;color:var(--jpm-text,#3A2B36)}
.ji__ok[hidden]{display:none}

/* ────────────── dos columnas · cuando el PANEL da de sí ────────────── */

@container (min-width:620px){
  .ji__grupo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 var(--space-md,18px);
  }
  .ji__grupo legend{grid-column:1/-1}
  /* Los que necesitan la línea entera: los que arrastran nota derivada
     y los de texto largo. */
  .ji-campo:has(#ji-nombre_completo),
  .ji-campo:has(#ji-curp),
  .ji-campo:has(#ji-nss){grid-column:1/-1}
  .ji__acciones .btn{width:auto;min-width:220px}
}

@media (prefers-reduced-motion:reduce){
  .ji,.ji__panel{transition:none}
  .ji__panel{transform:none}
}


/* ═══════════════════════ AGENDA · T12 ═══════════════════════
   Mobile-first: los horarios son botones grandes en una rejilla que se
   adapta, no una tabla que obliga a hacer zoom. */

.ji-agenda{
  margin-top:var(--space-md,18px);
  padding-top:var(--space-md,18px);
  border-top:1px solid rgba(255,255,255,.14);
  text-align:left;
}
.ji-agenda__intro{margin:0 0 10px;font-size:.95rem;opacity:.9}
.ji-agenda__hecho{margin:0 0 6px;font-size:1.02rem}
.ji-agenda__error{margin:10px 0 0;color:#ffb4a2;font-size:.9rem}

.ji-agenda__dias{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.ji-agenda__dia{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:transparent;
  color:inherit;font:inherit;font-size:.88rem;white-space:nowrap;
}
.ji-agenda__dia.es-activo{
  border-color:var(--acento,#ECC545);
  background:rgba(236,197,69,.14);
  font-weight:600;
}

.ji-agenda__horas{
  display:grid;gap:8px;margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}
.ji-agenda__hora{
  /* 44px de alto: el minimo con el que un pulgar acierta a la primera. */
  min-height:44px;padding:10px 8px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:transparent;
  color:inherit;font:inherit;font-variant-numeric:tabular-nums;
}
.ji-agenda__hora:hover:not(:disabled){border-color:var(--acento,#ECC545)}
.ji-agenda__hora:disabled{opacity:.5;cursor:default}
.ji-agenda__dia:focus-visible,
.ji-agenda__hora:focus-visible{
  outline:2px solid var(--acento,#ECC545);outline-offset:2px;
}