/* =============================================================================
   THEMES / form-skin.css
   Archivo unificado de apariencia (tokens visuales) para todos los skins.

   Contiene (en orden):
     1. form-skin-default  — fondo blanco cálido, ladrillo, sombra suave (base)
     2. form-skin-dark     — fondo oscuro, aplicable a cualquier render
     3. form-skin-post     — widget embebido en artículo (fondo crema, carta)
     4. form-skin-sidebar  — columna lateral compacta + overrides de campaña
     5. form-skin-landing  — tokens de campaña vía --landing-* inyectados por PHP
     6. form-skin-overlay  — overlay post-firma (donations-wrapper.overlay)

   SOLO tokens visuales, nunca layout ni estructura.
   La estructura la gestiona form-render.css.

   NOTA: form-theme-default.css (deprecated) era redundante con form-skin-default
   y ha sido eliminado. El @import que existía en form-skin-post.css también
   se ha suprimido — los tokens base ya están disponibles en la sección 1.
   ============================================================================= */


/* =============================================================================
   1. DEFAULT
   Apariencia por defecto: fondo blanco cálido, ladrillo, sombra suave.

   CLASE GENERADA POR: FormPostHelper (skin por defecto cuando no se especifica otro)
   DEPRECATED COMPAT:  form-theme-default, form-theme-post
   ============================================================================= */

.form-skin-default {
  --form-color-primary:       var(--brick-base);          /* #DE3412 */
  --form-color-primary-hover: var(--green-bright);        /* #6BC225 */
  --form-bg-container:        #ffffff;
  --form-bg-input:            #f8f9fa;
  --form-text-color:          #333333;
  --form-text-input:          #1a1a1a;
  --form-border-color:        #dee2e6;
  --form-title-size:          var(--fs-small);
  --form-title-weight:        700;
  --form-focus-color:         var(--form-color-primary);
  --form-focus-shadow:        0 0 0 0.2rem rgba(222, 52, 18, 0.2);
  --form-shadow:              0 2px 10px rgba(0, 0, 0, 0.08);
}


/* =============================================================================
   2. DARK
   Apariencia sobre fondo oscuro. Aplicable a cualquier render.

   CLASE GENERADA POR: $theme='dark' → FormPostHelper genera 'form-skin-dark'
   DEPRECATED COMPAT:  form-theme-dark
   ============================================================================= */

.form-skin-dark {
  --form-color-primary:       var(--brick-base);          /* #DE3412 */
  --form-color-primary-hover: var(--green-bright);        /* #6BC225 */
  --form-bg-container:        var(--nero-base);           /* #1D252C */
  --form-bg-input:            rgba(255, 255, 255, 0.08);
  --form-text-color:          #ffffff;
  --form-text-input:          #ffffff;
  --form-border-color:        rgba(255, 255, 255, 0.15);
  --form-title-size:          var(--fs-small);
  --form-title-weight:        700;
  --form-focus-color:         var(--form-color-primary);
  --form-focus-shadow:        0 0 0 0.2rem rgba(222, 52, 18, 0.3);
  --form-letter-bg:           rgba(255, 255, 255, 0.06);
  --form-letter-accent:       var(--form-color-primary);
  --form-color-gray:          rgba(255, 255, 255, 0.55);
  --form-color-gray-light:    rgba(255, 255, 255, 0.20);
}


/* =============================================================================
   3. POST
   Apariencia del widget embebido en artículo ($render='post').
   Fondo crema, título grande, carta como documento.

   NOTA: el @import 'form-theme-default.css' original ha sido eliminado —
   los tokens base están disponibles en form-skin-default (sección 1).
   ============================================================================= */

.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);
}


/* =============================================================================
   4. SIDEBAR
   Tema para formularios en columna lateral compacta.

   DOS ROLES EN ESTE BLOQUE:
   A) Tema genérico (.form-skin-sidebar / .form-theme-sidebar)
   B) Overrides de contexto campaña (.cpn-form-wrap, .campaign-display)

   CLASE GENERADA POR: FormPostHelper cuando $render='sidebar'
   DEPRECATED COMPAT:  form-theme-sidebar
   ============================================================================= */


/* ── A. Tema genérico — sidebar compacto ─────────────────────────────────── */

.form-theme-sidebar {

  --form-bg-container:        var(--gray-surface);
  --form-bg-input:            var(--gray-white);
  --form-text-color:          var(--color-text-primary);
  --form-text-input:          var(--gray-ink);
  --form-border-color:        #dee2e6;

  --form-shadow:              none;
  --form-border-radius:       0;
  --form-border-radius-small: var(--radius-md);

  --form-title-size:          var(--fs-small);
  --form-title-weight:        var(--font-weight-semibold);
  --form-font-size-base:      0.85rem;

  --form-padding-base:        1rem;
  --form-padding-sm:          8px;
}

.form-theme-sidebar .form-post-action {
  padding-left:  1rem;
  padding-right: 1rem;
  margin-left:   0;
  margin-right:  0;
  border:        none;
  box-shadow:    none;
}

.form-theme-sidebar .form-floating input.form-control,
.form-theme-sidebar .form-floating select.form-select,
.form-theme-sidebar  div.form-control {
  border:        none;
  border-bottom: 2px solid var(--form-border-color);
  border-radius: 0;
  background:    var(--form-bg-input);
  box-shadow:    none;
  transition:    border-bottom-color var(--motion-fast) var(--ease-standard);
}

.form-theme-sidebar .form-floating input.form-control:focus,
.form-theme-sidebar .form-floating select.form-select:focus,
.form-theme-sidebar  div.form-control:focus {
  border-bottom-color: var(--form-focus-color);
  background:          var(--gray-surface);
}

.form-theme-sidebar .form-floating > label {
  color:     var(--gray-mid);
  font-size: 0.8rem;
}

.form-theme-sidebar .collapse-slide {
  border:        1px solid var(--form-border-color);
  border-top:    none;
  border-radius: 0;
  font-size:     0.88rem;
  color:         var(--color-text-secondary);
}


/* ── B. Overrides de contexto campaña ────────────────────────────────────── */
/* Scope: .cpn-form-wrap — activo en actions.php independientemente del theme */

.cpn-form-wrap .col-letter,
.cpn-form-wrap .letter-section                        { display: none !important; }
.cpn-form-wrap .row.justify-content-center > .col-md-7 { display: none !important; }

.cpn-form-wrap .letter-section {
  border-left: 3px solid var(--form-letter-accent);
}

.cpn-form-wrap .row.justify-content-center > .col-md-5,
.cpn-form-wrap .row.justify-content-center > .col-form {
  flex:      0 0 100%;
  max-width: 100%;
}

.cpn-form-wrap #form-counter {
  display:       block;
  font-size:     0.82rem;
  color:         var(--cpn-muted, rgba(29, 37, 44, 0.52));
  margin-bottom: 0.75rem;
}

.cpn-form-wrap .progress-bar-branded {
  background-color: var(--cpn-accent, #ffb600);
}

.cpn-form-wrap .form-floating input.form-control,
.cpn-form-wrap .form-floating select.form-select,
.cpn-form-wrap div.form-control {
  border:        none !important;
  border-bottom: 2px solid var(--cpn-border, var(--gray-pale)) !important;
  border-radius: 0 !important;
  background:    var(--gray-white, #fff) !important;
  box-shadow:    none !important;
  transition:    border-bottom-color var(--motion-fast) var(--ease-standard) !important;
}

.cpn-form-wrap .form-floating input.form-control:focus,
.cpn-form-wrap .form-floating select.form-select:focus,
.cpn-form-wrap div.form-control:focus {
  border-bottom-color: var(--cpn-accent, #ffb600) !important;
  background:          var(--gray-surface, #fafafa) !important;
}

.cpn-form-wrap .form-floating > label {
  color:     var(--cpn-muted, rgba(29, 37, 44, 0.52)) !important;
  font-size: 0.8rem !important;
  padding:   0.85rem 0.85rem !important;
}

.cpn-form-wrap .collapse-slide {
  border:        1px solid var(--cpn-border, var(--gray-pale)) !important;
  border-top:    none !important;
  border-radius: 0 !important;
  font-size:     0.88rem;
}

.cpn-form-wrap .letter-trigger #subject,
.cpn-form-wrap .letter-trigger #message {
  border: none;
}


/* =============================================================================
   5. LANDING
   Apariencia de campaña: consume los tokens --landing-* inyectados por PHP.
   PHP emite inline <style>:root{--landing-primary:#840032}</style> antes de
   este archivo, permitiendo personalización por campaña sin tocar el CSS.

   CLASE GENERADA POR: FormPostHelper cuando $render='landing'
   DEPRECATED COMPAT:  form-theme-landing
   ============================================================================= */

.form-skin-landing {
  --form-bg-container:        rgba(153, 0, 51, 0.95);
  --form-bg-input:            #fff;
  --form-text-color:          #ffffff;
  --form-text-input:          #333333;
  --form-shadow:              0 4px 20px rgba(0, 0, 0, 0.3);
  --form-border-radius:       8px;
  --form-border-radius-small: 4px;
  --form-focus-color:         var(--landing-primary, #840032);
  --form-focus-shadow:        0 0 0 3px color-mix(in srgb, var(--landing-primary, #840032) 25%, transparent);
  --form-title-size:          2rem;
  --form-title-weight:        700;
  --form-padding-base:        2rem;
  --form-color-primary:       #DC1D13;
  --form-color-primary-hover: #1599BE;
  --form-color-success:       #1599BE;
  --form-color-success-dark:  #0d7a99;
  --form-color-gray:          rgba(255, 255, 255, 0.8);
  --form-color-gray-light:    rgba(255, 255, 255, 0.5);
  --form-progress-bg:         rgba(255, 255, 255, 0.3);
  --form-progress-fill:       #DC1D13;
  --form-letter-bg:           rgba(255, 255, 255, 0.15);
  --form-letter-accent:       rgba(255, 255, 255, 0.6);
}

.form-skin-landing div.form-control,
.form-skin-landing div.form-control small {
  color: var(--form-text-input) !important;
}

.form-skin-landing a,
.form-skin-landing .privacy-text {
  color: var(--form-text-color);
}


/* =============================================================================
   6. OVERLAY
   Apariencia del overlay post-firma (donations-wrapper.overlay).
   No corresponde a ningún $render — es un estado activado por JS (showOverlay)
   tras el envío.

   CLASE GENERADA POR: JS (showOverlay) — no por FormPostHelper::themeForRender()
   DEPRECATED COMPAT:  form-theme-overlay
   ============================================================================= */

.form-skin-overlay {
  --form-color-primary:       var(--brick-base);          /* #DE3412 */
  --form-color-primary-hover: var(--brick-dark);          /* #BD0B02 */
  --form-bg-container:        #ffffff;
  --form-bg-input:            #f8f9fa;
  --form-text-color:          #333333;
  --form-border-color:        #dee2e6;
  --form-title-size:          2rem;
  --form-title-weight:        700;
  --form-padding-base:        2rem;
  --form-border-radius:       0;
  --form-border-radius-small: 4px;
  --form-shadow:              none;
  --form-focus-color:         var(--form-color-primary);
  --form-focus-shadow:        0 0 0 0.2rem rgba(222, 52, 18, 0.2);
}

.form-skin-overlay .form-post-widget,
.form-skin-overlay #form-post-widget {
  background:    var(--form-bg-container);
  padding:       var(--form-padding-base);
  border-radius: var(--form-border-radius);
}