/* ====== CONTENEDOR GENERAL / BLOQUE BAJO LA HEADLINE ====== */
.afirmacion-block{
  max-width: 860px;
  margin: 24px auto;
  padding: 0 12px;           /* un poco de respiración en pantallas pequeñas */
  box-sizing: border-box;
}

/* Cabecera del bloque */
.afirmacion-headline{
  background: #f0fdf4;           /* verde clarito */
  border: 1px solid #a7f3d0;      /* borde verde suave */
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 16px;
  text-align: center;
  font-weight: 700;
  color: #065f46;                 /* verde oscuro para el título */
}

/* ====== FORMULARIO COMO “TARJETA” CENTRADA ====== */
#afirmacion-ai-form{
  background: #fff;
  border: 1px solid #e5e7eb;     /* slate-200 */
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  padding: 20px 22px;
  max-width: 860px;
  margin: 18px auto 26px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Etiquetas e inputs */
#afirmacion-ai-form label{
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: #0f172a;
}

#afirmacion-ai-form input[type="text"]{
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;     /* slate-300 */
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  box-sizing: border-box;
}

#afirmacion-ai-form input[type="text"]:focus{
  outline: none;
  border-color: #94a3b8;         /* slate-400 */
  box-shadow: 0 0 0 3px rgba(37,99,235,.15); /* azul suave */
}

/* Botones del formulario */
#afirmacion-ai-form button{
  background: #2271b1;           /* WP primary */
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: .975rem;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform .04s ease-in, background .15s ease-in;
}

#afirmacion-ai-form button:hover{ background: #1e5f93; }
#afirmacion-ai-form button:active{ transform: translateY(1px); }
#afirmacion-ai-form button:disabled{ opacity: .6; cursor: not-allowed; transform: none; }

/* Fila opcional: botón Generar + estado en la misma línea */
.ap-actions-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ====== ESTADO Y RESULTADO (centrados en la página) ====== */
#ap-status{
  font-weight: 600;
  color: #0f172a;
  min-height: 1.2em;
}

.ap-help {
  display: block;       /* asegura que ocupe una línea completa */
  margin-bottom: 14px;  /* aumenta el espacio antes del campo */
  font-size: 0.9rem;
  color: #555;
}

/* Resultado dentro de bloque “tarjeta ligera” */
#afirmacion-ai-respuesta,
#ap-result{
  background: #f0fdf4;          /* verde clarito */
  border: 1px solid #a7f3d0;    /* borde verde suave */
  padding: 0px !important;
  margin: 0px auto 0 !important;
  border-radius: 10px;
  font-size: 1.05rem;
  white-space: pre-line;
  color: #0f172a;
  max-width: 860px;
  box-sizing: border-box;
}

/* ====== BOTÓN COPIAR (estabilidad visual al cambiar texto) ====== */
#ap-copy-btn{
  margin-top: 10px;
  min-width: 110px;              /* evita “bailes” al mostrar “Copiado” */
}

/* ====== ACCESIBILIDAD: FOCUS RINGS ====== */
#afirmacion-ai-form button:focus,
#ap-copy-btn:focus,
#afirmacion-ai-form input[type="text"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 640px){
  #afirmacion-ai-form{ padding: 16px }
  #afirmacion-ai-form input[type="text"]{ max-width: 100% }
}

/* ====== SPINNER PEQUEÑO (si lo usas en #ap-status) ====== */
.ai-mini-spinner{
  display: inline-block; width: 14px; height: 14px; margin-right: 6px;
  border: 2px solid #cbd5e1; border-top-color: #3b82f6; border-radius: 50%;
  animation: ap-spin .6s linear infinite;
}
@keyframes ap-spin{ to{ transform: rotate(360deg) } }

/* El emoji como icono independiente arriba, centrado, 20×20 */
.afirmacion-headline .afirmacion-emoji {
  display: block;
  width: 20px;            /* caja fija */
  height: 20px;
  margin: 0 auto 8px;     /* centrado + espacio bajo */
  line-height: 20px;      /* por si queda como texto */
  text-align: center;
  font-size: 20px !important; /* si NO lo convierte a <img> */
}

/* Si WP lo convierte a <img class="emoji">, forzamos 20×20 */
.afirmacion-headline .afirmacion-emoji img.emoji {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto 8px !important;
}

/* Contenedor de la imagen */
.afirmacion-img-wrap { position: relative; display:inline-block; width:100%; max-width:512px; }

.afirmacion-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 10px 14px;
  color:#fff;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
}

#afirmacion-overlay-text{
  display:block;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Override para mantener la UI estable a 630px y sin empuje superior */
#afirmacion-ai-respuesta{
  max-width:630px !important;
  width:630px !important;
  margin:0 auto !important;          /* quita el margin-top:20px */
  padding-top:0 !important;           /* quita padding superior */
  padding-right:0px !important;
  padding-bottom:0px !important;
  padding-left:0px !important;
  box-sizing:border-box;
}

/* La imagen no añade separación extra */
#afirmacion-ai-respuesta .afirmacion-img-wrap{
  margin-top:0 !important;
}

/* Oculta SIEMPRE el aviso si tiene el atributo [hidden] */
#mensaje-personalizado[hidden] {
  display: none !important;
  visibility: hidden !important;
}