/* =============================================================================
   THEMES — form-theme-sidebar.css
   Tema para formularios en columna lateral compacta.

   DOS ROLES EN UN ARCHIVO
   ────────────────────────
   A) TEMA GENÉRICO (.form-theme-sidebar)
      Activo cuando form-post.php se renderiza con render='sidebar'
      o cuando se pasa theme='form-theme-sidebar' explícitamente.
      Estilo compacto, sin card, integrado en una columna sticky.

   B) OVERRIDES DE CONTEXTO CAMPAÑA (.cpn-form-wrap, .campaign-display)
      Activo en actions.php para el widget de formulario dentro de la
      columna sticky de campaña (.campaign-form-col > .cpn-form-wrap).
      Movido aquí desde post-action.css para separar layout de apariencia.

   ORDEN DE CARGA
   ──────────────
   Bootstrap → main/_variables.css → actions/_tokens.css → _form.css
   → post-action.css → form-theme-sidebar.css   ← este archivo carga último
   Puede sobreescribir cualquier token de los anteriores.

   TOKENS USADOS
   ──────────────
   Los tokens --cpn-* (acento, dark, border, muted) vienen de post-action.css,
   que carga justo antes. Los tokens --form-* vienen de actions/_tokens.css.
   ============================================================================= */


/* ══════════════════════════════════════════════════════════════════════════
   A. TEMA GENÉRICO — SIDEBAR COMPACTO
   Scope: .form-theme-sidebar (clase generada por form-post.php)
   ══════════════════════════════════════════════════════════════════════════ */

.form-theme-sidebar {

  /* ── Tokens de apariencia para este contexto ───────────────────────────── */
  /* Fondo: superficie neutra, sin llamar la atención por sí sola            */
  --form-bg-container:        var(--gray-surface);      /* #F8F7F3 ≈ prev #f8f9fa */
  --form-bg-input:            var(--gray-white);
  --form-text-color:          var(--color-text-primary); /* --gray-ink */
  --form-text-input:          var(--gray-ink);
  --form-border-color:        #dee2e6;                  /* Bootstrap input border */

  /* Diseño plano: sin sombra ni card visible                                 */
  --form-shadow:              none;
  --form-border-radius:       0;
  --form-border-radius-small: var(--radius-md);         /* 8px — inputs */

  /* Tipografía compacta para columna estrecha                               */
  --form-title-size:          var(--fs-small);          /* fluido ~1.25rem */
  --form-title-weight:        var(--font-weight-semibold);  /* 600 */
  --form-font-size-base:      0.85rem;

  /* Espaciados reducidos: la columna no tiene el espacio de un formulario central */
  --form-padding-base:        1rem;
  --form-padding-sm:          8px;

}

/* Sin card visible en sidebar: el formulario se integra en la columna       */
.form-theme-sidebar .form-post-action {
  padding-left:  1rem;
  padding-right: 1rem;
  margin-left:   0;
  margin-right:  0;
  border:        none;
  box-shadow:    none;
}

/* Inputs: estilo underline (más integrado, sin card-within-card)            */
.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);
}

/* Labels más sutiles */
.form-theme-sidebar .form-floating > label {
  color:     var(--gray-mid);
  font-size: 0.8rem;
}

/* Bloque colapsable de localización */
.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 y .campaign-display — activos en actions.php
   independientemente del theme que use el formulario.

   Movidos desde post-action.css para separar:
     post-action.css   → layout de página, identidad visual de campaña
     form-theme-sidebar.css → apariencia del widget dentro de esa página
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Estructura de columnas del formulario en landing/campaign ────────────── */
/* En render=landing, la col-letter y su columna Bootstrap no se generan.    */
/* Esta regla es un guard por si el markup incluye restos del render=post.   */
.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);
}

/* La columna del formulario ocupa el ancho completo disponible              */
.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%;
}


/* ── Skin del counter pequeño (#form-counter / .total-bar) ───────────────── */
/* El counter pequeño dentro del widget usa el color de acento de campaña.   */
.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);
}


/* ── Inputs: estilo underline en contexto campaña ────────────────────────── */
/* Versión scoped al contexto campaña (complementa la versión de .form-theme-sidebar
   para cuando el form en actions.php usa otro render/theme).               */
.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;
}

/* Labels compactos */
.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;
}

/* Bloque de localización colapsable */
.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;
}