/* ── JC Form Toast — mismo sistema visual que emailings ─────────── */

#jc-toast-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 40, 0.45);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  box-sizing: border-box;
}

/* Reset para aislar del CSS de WordPress admin */
#jc-toast-card,
#jc-toast-card * {
  box-sizing: border-box;
  line-height: normal;
}

#jc-toast-card button,
#jc-toast-card a {
  font-family: inherit;
  line-height: normal;
}
#jc-toast-overlay.jc-toast-visible {
  display: flex;
}

/* Card — igual al card de los emails */
#jc-toast-card {
  background: transparent;
  border-radius: 20px;
  border: 1px solid #e4eaec;
  width: 100%;
  max-width: 400px;
  margin: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: jc-toast-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition: max-width 0.3s ease;
}
/* Botón cerrar (✕): oculto mientras se procesa la solicitud — solo visible
   en los estados finales (éxito/error) o en la confirmación. */
#jc-toast-close { display: none; }
#jc-toast-overlay.jc-toast-success #jc-toast-close,
#jc-toast-overlay.jc-toast-error   #jc-toast-close,
#jc-toast-overlay.jc-toast-confirm #jc-toast-close { display: flex; }

/* enviado success: card más ancha, sin ✕, sin auto-close */
#jc-toast-overlay.jc-toast-success-enviado #jc-toast-card { max-width: 520px; }
#jc-toast-overlay.jc-toast-success-enviado #jc-toast-close { display: none; }
body.jc-admin-preview #jc-toast-overlay.jc-toast-success-enviado #jc-toast-close { display: flex !important; }
#jc-toast-overlay.jc-toast-success-enviado { pointer-events: all; cursor: default; }

/* Contenido extra pasos — solo enviado */
#jc-toast-content { display: none; padding: 0 28px 4px; background: #ffffff !important; }
#jc-toast-overlay.jc-toast-success-enviado #jc-toast-content { display: block; }


/* Pasos — mismos estilos que el email */
.jc-steps { margin: 4px 0 16px; }
.jc-step { display: table; width: 100%; margin-bottom: 12px; }
.jc-step:last-child { margin-bottom: 0; }
.jc-step-dot-wrap { display: table-cell; vertical-align: top; width: 32px; padding-top: 1px; }
.jc-step-dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: block;
  position: relative;
  background: #ffffff;
  border: 1.5px solid #d0d0cc;
  color: #aaaaaa;
  margin-top: 1px;
  flex-shrink: 0;
}
.jc-step-dot i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  display: block;
}
.jc-step-dot.done { background: #1A5C6B; border-color: #1A5C6B; color: #ffffff; }
.jc-step-text { display: table-cell; vertical-align: top; font-size: 13.5px; color: #444444; line-height: 1.6; padding-left: 2px; }
.jc-step-text strong { color: #222222; font-weight: 600; }

/* Botón cerrar → home */
#jc-toast-btn-wrap {
  display: none;
  padding: 4px 28px 24px;
  background: #ffffff !important;
}
#jc-toast-overlay.jc-toast-success-enviado #jc-toast-btn-wrap { display: block; }

#jc-toast-home-btn {
  display: inline-block;
  padding: 11px 28px;
  background: #1A5C6B !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1px;
  text-decoration: none !important;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none;
}

@keyframes jc-toast-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

/* Header — fondo crema igual al head-td del email */
#jc-toast-head {
  background-color: #FAF7F2;
  border-bottom: 1px solid #ede8df;
  padding: 20px 28px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

#jc-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0fafb;
  border: 1px solid #d4eef1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: #1A5C6B;
}
#jc-toast-icon i {
  line-height: 1;
}

#jc-toast-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #4DABB8;
  margin-bottom: 2px;
}

#jc-toast-title {
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

/* Body — fondo blanco igual al body-td del email */
#jc-toast-body {
  background-color: #ffffff;
  padding: 20px 28px 24px;
}

#jc-toast-detail {
  font-size: 15px;
  font-weight: 400;
  color: #222222;
  margin-bottom: 16px;
  min-height: 18px;
  line-height: 1.5;
}

/* Botón cerrar con anillo de countdown */
#jc-toast-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #bbbbbb;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
#jc-toast-close:hover { color: #555555; }
#jc-toast-close:hover #jc-toast-close-ring { stroke: #999999; }

/* Más visible mientras corre el countdown de auto-close */
#jc-toast-close.jc-toast-counting { color: #888888; }
#jc-toast-close.jc-toast-counting #jc-toast-close-ring { stroke: #b0b0b0; }
#jc-toast-overlay.jc-toast-success #jc-toast-close.jc-toast-counting #jc-toast-close-ring { stroke: #7fcf9b; }
#jc-toast-overlay.jc-toast-error   #jc-toast-close.jc-toast-counting #jc-toast-close-ring { stroke: #e08a7d; }

#jc-toast-close svg {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
  pointer-events: none;
}
#jc-toast-close-ring {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.2s;
}
#jc-toast-overlay.jc-toast-success #jc-toast-close-ring { stroke: #c8e6d0; }
#jc-toast-overlay.jc-toast-error   #jc-toast-close-ring { stroke: #f0c0bb; }

#jc-toast-card { position: relative; }

/* Franja de datos técnicos (MB, %) — ancho completo */
#jc-toast-detail .jc-data-box {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 12px;
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #444444;
  text-align: center;
  letter-spacing: 0.3px;
  box-sizing: border-box;
}

/* Barra de progreso de upload */
#jc-toast-bar-wrap {
  background: #f0f4f5;
  border-radius: 100px;
  height: 5px;
  overflow: hidden;
}

#jc-toast-bar-fill {
  height: 100%;
  border-radius: 100px;
  width: 0%;
  transition: width 0.4s ease;
  background: #4DABB8;
}


/* Estado: info (registro — enviado, ya-verificado) */
#jc-toast-overlay.jc-toast-info #jc-toast-head  { background-color: #f0fafb; border-color: #d4eef1; }
#jc-toast-overlay.jc-toast-info #jc-toast-icon  { color: #4DABB8; border-color: #d4eef1; background: #f0fafb; }
#jc-toast-overlay.jc-toast-info #jc-toast-label { color: #4DABB8; }
#jc-toast-overlay.jc-toast-info #jc-toast-title { color: #1A5C6B; }
#jc-toast-overlay.jc-toast-info #jc-toast-bar-wrap { display: none; }
/* El botón cerrar se muestra en estado info */
#jc-toast-overlay.jc-toast-info #jc-toast-close { display: flex; }

/* Estado: global — color neutro */
#jc-toast-overlay.jc-toast-global #jc-toast-icon    { color: #4DABB8; border-color: #d4eef1; background: #f0fafb; }
#jc-toast-overlay.jc-toast-global #jc-toast-bar-fill { background: #4DABB8; }

/* Estado: borrador — color teal claro */
#jc-toast-overlay.jc-toast-borrador #jc-toast-icon   { color: #4DABB8; border-color: #d4eef1; background: #f0fafb; }
#jc-toast-overlay.jc-toast-borrador #jc-toast-bar-fill { background: #4DABB8; }

/* Estado: enviado — color teal oscuro */
#jc-toast-overlay.jc-toast-enviado #jc-toast-icon    { color: #1A5C6B; border-color: #b8d9df; background: #e8f5f2; }
#jc-toast-overlay.jc-toast-enviado #jc-toast-bar-fill  { background: #1A5C6B; }

/* Estado: éxito */
#jc-toast-overlay.jc-toast-success #jc-toast-head    { background-color: #f0faf4; border-color: #c8e6d0; }
#jc-toast-overlay.jc-toast-success #jc-toast-icon    { color: #27ae60; border-color: #b8dfc4; background: #e8f8ee; }
#jc-toast-overlay.jc-toast-success #jc-toast-label   { color: #27ae60; }
#jc-toast-overlay.jc-toast-success #jc-toast-title   { color: #1a7a45; }
#jc-toast-overlay.jc-toast-success #jc-toast-bar-fill { background: #27ae60; }

/* Estado: error */
#jc-toast-overlay.jc-toast-error #jc-toast-head      { background-color: #fff8f7; border-color: #f0d0cc; }
#jc-toast-overlay.jc-toast-error #jc-toast-icon      { color: #c0392b; border-color: #e8bbb7; background: #fdf0ee; }
#jc-toast-overlay.jc-toast-error #jc-toast-label     { color: #c0392b; }
#jc-toast-overlay.jc-toast-error #jc-toast-title     { color: #c0392b; }
#jc-toast-overlay.jc-toast-error #jc-toast-bar-wrap  { display: none; }

/* Estado: confirmación (2 botones) — ej. cerrar sesión */
#jc-toast-overlay.jc-toast-confirm #jc-toast-icon     { color: #E8891A; border-color: #f5dcb8; background: #fdf6ec; }
#jc-toast-overlay.jc-toast-confirm #jc-toast-bar-wrap { display: none; }
/* #jc-toast-detail es el último elemento visible del body en este estado
   (bar-wrap y content quedan ocultos) — su margin-bottom de 16px dejaba un
   espacio extra antes de los botones. */
#jc-toast-overlay.jc-toast-confirm #jc-toast-detail   { margin-bottom: 0; }
#jc-toast-overlay.jc-toast-confirm #jc-toast-btn-wrap {
  display: flex;
  gap: 10px;
}
#jc-toast-overlay.jc-toast-confirm #jc-toast-home-btn { display: none; }

#jc-toast-cancel-btn,
#jc-toast-confirm-btn {
  display: none;
  flex: 1;
  padding: 11px 20px;
  border: none !important;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none;
}
#jc-toast-overlay.jc-toast-confirm #jc-toast-cancel-btn,
#jc-toast-overlay.jc-toast-confirm #jc-toast-confirm-btn {
  display: block;
}
#jc-toast-cancel-btn {
  background: #f0f0ec !important;
  color: #555555 !important;
}
#jc-toast-cancel-btn:hover { background: #e4e4e0 !important; }

#jc-toast-confirm-btn {
  background: #1A5C6B !important;
  color: #ffffff !important;
}
#jc-toast-confirm-btn:hover { background: #16505d !important; }

/* ── Warn box: no cerrar ventana + mensaje de lentitud ── */
#jc-toast-warn-box {
  display: none;
  margin-top: 14px;
  padding: 10px 13px;
  background: #fffbf0;
  border: 1px solid #f0d890;
  border-radius: 8px;
  font-size: 13px;
  color: #7a5200;
  line-height: 1.5;
}
#jc-toast-warn-box i {
  margin-right: 5px;
  font-size: 12px;
}
/* Solo visible durante procesamiento de borrador o enviado */
#jc-toast-overlay.jc-toast-borrador #jc-toast-warn-box,
#jc-toast-overlay.jc-toast-enviado  #jc-toast-warn-box {
  display: block;
}
/* Segundo mensaje (sobrecarga / archivo grande) — aparece a los 10s */
.jc-toast-slow-msg {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0d890;
  font-weight: 600;
  color: #5a3c00;
}

/* Data-box en modo "procesando" — dots animados */
.jc-data-box.jc-working::after {
  content: '...';
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation: jc-working-dots 1.4s steps(4, end) infinite;
}
@keyframes jc-working-dots {
  from { width: 0; }
  to   { width: 1.2em; }
}

/* Barra indeterminada */
#jc-toast-bar-fill.jc-indeterminate {
  width: 35% !important;
  animation: jc-bar-slide 1.6s ease-in-out infinite;
}
@keyframes jc-bar-slide {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(320%);  }
  100% { transform: translateX(320%);  }
}