/* =============================================================================
   THEMES — form-skin-post.css
   Apariencia del widget embebido en artículo ($render='post').
   Importa los tokens neutros de form-theme-default y los sobreescribe
   para el contexto de post: fondo crema, título grande, carta como documento.
   ============================================================================= */

@import 'form-theme-default.css';

/* ── Tokens de apariencia ────────────────────────────────────────────────── */
.form-skin-post {
  --form-bg-container: #F2F4F5;   /* fondo crema tenue del widget completo */
  --form-title-size:   2.2rem;    /* "¡ACTÚA!" más prominente */
}


/* ── Área de la carta: aspecto de documento/email ────────────────────────── */

/*
 * El bloque .letter-section.letter-trigger contiene el asunto (input) y el
 * cuerpo (textarea). El objetivo es que parezca un correo real, no un
 * formulario, y que invite a hacer clic para editarlo.
 *
 * El fade inferior (mask-image) ya está definido en _form.css sobre el
 * textarea #message. Aquí añadimos el indicador "Editar carta" sobre ese fade.
 */

.form-skin-post .letter-section {
  background:    #ffffff;
  border:        none;
  border-radius: 6px;
  padding:       1.1rem 1.1rem 0;   /* sin padding inferior: el fade lo ocupa */
  position:      relative;
  cursor:        pointer;
  transition:    box-shadow 0.2s ease;
}

.form-skin-post .letter-section:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Asunto: línea de "De:" / "Asunto:" de email */
.form-skin-post .letter-trigger input.subject {
  border:         none !important;
  border-bottom:  1px solid #e0e0e0 !important;
  border-radius:  0 !important;
  background:     transparent !important;
  box-shadow:     none !important;
  font-weight:    700;
  font-size:      0.88rem;
  padding-left:   0 !important;
  padding-right:  0 !important;
  margin-bottom:  0.4rem;
  pointer-events: none;   /* el click lo recibe el wrapper, no el input */
  color:          var(--form-text-input);
}

/* Cuerpo de la carta: texto plano, no textarea de formulario */
.form-skin-post .letter-trigger textarea#message {
  border:         none !important;
  background:     transparent !important;
  box-shadow:     none !important;
  resize:         none;
  pointer-events: none;
  font-size:      0.82rem;
  line-height:    1.68;
  color:          var(--form-text-input);
  font-family:    inherit;
  /* El mask-image (fade inferior) viene de _form.css — no sobreescribir */
}

/* Quitar el borde de hover de _form.css: en post usamos box-shadow */
.form-skin-post .letter-trigger {
  border: none !important;
}

/*
 * Indicador "Editar carta" sobre el área de fade.
 * Aparece en hover, posicionado encima del degradado inferior.
 * Usa ::after sobre .letter-section (que tiene position:relative).
 */
.form-skin-post .letter-section::after {
  content:          '✏  Editar carta';
  position:         absolute;
  bottom:           10px;
  left:             50%;
  transform:        translateX(-50%);
  font-size:        0.72rem;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  color:            var(--form-color-primary, #555);
  background:       rgba(255, 255, 255, 0.92);
  border:           1px solid rgba(0, 0, 0, 0.12);
  border-radius:    20px;
  padding:          0.2em 0.9em;
  opacity:          0;
  transition:       opacity 0.2s ease;
  pointer-events:   none;
  white-space:      nowrap;
}

.form-skin-post .letter-section:hover::after {
  opacity: 1;
}

/* Pequeño aviso debajo de la carta ("Se enviará a tu nombre") */
.form-skin-post .letter-info {
  font-size:  0.75rem;
  margin-top: 0.4rem;
  color:      var(--form-color-gray);
}