/**
 * AFADIR - Estilos limpios para WPForms y páginas de contenido
 * Se aplica automáticamente en shortcodes y páginas AFADIR
 * Compatible con dark mode vía variables CSS
 */

/* ============================================================================
   VARIABLES CSS - NECESARIAS FUERA DE #afadir-app-root
   ============================================================================ */

:root {
  /* Colores que se adaptan al tema (light/dark) */
  --af-color-bg: #ffffff;
  --af-color-text: #1e293b;
  --af-color-surface: #ffffff;
  --af-color-border: #e2e8f0;
  --af-color-muted: #64748b;
  --af-color-link: #0b5ed7;
  --color-white: #ffffff;

  /* Brand colors AFADIR */
  --afadir-brand: #e5007d;
  --afadir-pink: #EC407A;
  --afadir-pink-dark: #D81B60;
}

/* Dark mode support (si el tema usa prefers-color-scheme o data-theme) */
@media (prefers-color-scheme: dark) {
  :root {
    --af-color-bg: #0f172a;
    --af-color-text: #e2e8f0;
    --af-color-surface: #1e293b;
    --af-color-border: #334155;
    --af-color-muted: #94a3b8;
    --af-color-link: #ffffff;
  }
}

[data-theme="dark"] {
  --af-color-bg: #0f172a;
  --af-color-text: #e2e8f0;
  --af-color-surface: #1e293b;
  --af-color-border: #334155;
  --af-color-muted: #94a3b8;
  --af-color-link: #ffffff;
}

/* ============================================================================
   LIMPIEZA DE WORDPRESS CHROME
   ============================================================================ */

#wpadminbar,
.inside-header,
.site-header,
header.site-header,
.site-footer,
footer.site-info,
.inside-site-info,
.footer-widgets,
.copyright,
.whatsapp-float,
#afadir-whatsapp-floating,
.generate-back-to-top,
.entry-header,
.page-header,
h1.entry-title,
header.entry-header {
  display: none !important;
}

html {
  margin-top: 0 !important;
}

body {
  background: transparent !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  overflow-x: hidden !important;
  color: var(--af-color-text, #1e293b) !important;
  line-height: 1.65 !important;
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body.admin-bar {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.site-content,
.content-area,
.entry-content,
.inside-article {
  padding: 0 16px 16px 16px !important;
  padding-top: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  max-width: 980px !important;
  box-sizing: border-box !important;
}

/* ============================================================================
   TIPOGRAFÍA BASE
   ============================================================================ */

h1, h2, h3, h4 {
  color: var(--af-color-text, #0f172a) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.4em !important;
}

h1 { font-size: 34px !important; }
h2 { font-size: 26px !important; }
h3 { font-size: 20px !important; }
h4 { font-size: 18px !important; }

h1:first-child,
.wpforms-container ~ h1:first-of-type,
.entry-content > h1:first-child {
  margin-top: 0 !important;
}

p, li {
  font-size: 16px !important;
  color: var(--af-color-text, #334155) !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

a {
  color: var(--af-color-link, #0b5ed7) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  display: inline !important;
  white-space: normal !important;
}

img, video {
  max-width: 100% !important;
  height: auto !important;
}

table {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

pre, code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* ============================================================================
   WPFORMS - ESTILOS AFADIR
   ============================================================================ */

.wpforms-container,
.wpforms-container * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
  color: var(--af-color-muted, #94a3b8) !important;
  opacity: 1 !important;
}

.wpforms-container,
.wpforms-form,
.wpforms-form-247,
.wpforms-form-303 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background: transparent !important;
}

.wpforms-field-container {
  padding-left: 4px !important;
}

/* Etiquetas */
.wpforms-field-label {
  color: var(--af-color-text, #1e293b) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.wpforms-field-label-inline {
  display: inline !important;
}

/* Campos de texto */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="url"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field input[type="date"],
.wpforms-field textarea,
.wpforms-field select {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--af-color-border, #e2e8f0) !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  background: var(--af-color-surface, #ffffff) !important;
  color: var(--af-color-text, #1e293b) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  outline: none !important;
  border-color: var(--afadir-pink, #EC407A) !important;
  box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.12) !important;
}

/* Checkboxes y radios */
.wpforms-field-checkbox li,
.wpforms-field-radio li {
  margin-bottom: 12px !important;
  list-style: none !important;
}

.wpforms-field-checkbox label,
.wpforms-field-radio label {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--af-color-text, #475569) !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.wpforms-field-checkbox input[type="checkbox"],
.wpforms-field-radio input[type="radio"] {
  margin-right: 10px !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

/* Botón de envío */
.wpforms-submit-container {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid var(--af-color-border, #e2e8f0) !important;
}

.wpforms-submit {
  background: linear-gradient(135deg, var(--afadir-pink, #EC407A) 0%, var(--afadir-pink-dark, #D81B60) 100%) !important;
  color: var(--color-white, #ffffff) !important;
  border: none !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 8px 18px rgba(236, 64, 122, 0.22) !important;
  width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  height: auto !important;
  min-height: 48px !important;
}

.wpforms-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(236, 64, 122, 0.30) !important;
}

.wpforms-submit:active {
  transform: translateY(0) !important;
}

/* Descripciones */
.wpforms-field-description {
  color: var(--af-color-muted, #64748b) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.wpforms-field-description a,
.afadir-description a,
.wpforms-field-html a,
.wpforms-field-checkbox label a,
.wpforms-field-radio label a {
  display: inline !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.afadir-description {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
  color: var(--af-color-muted, #64748b) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-shadow: none !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.afadir-description * {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Secciones HTML */
.wpforms-field-html {
  margin: 32px 0 24px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: 100% !important;
}

.wpforms-field-html h2,
.wpforms-field-html h3 {
  color: var(--af-color-text, #1e293b) !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--af-color-border, #e2e8f0) !important;
}

.wpforms-field-html h2 { font-size: 20px !important; }
.wpforms-field-html h3 { font-size: 17px !important; }

.wpforms-field-html p {
  color: var(--af-color-muted, #64748b) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 16px 0 !important;
}

/* Clases personalizadas AFADIR */
.afadir-section-title {
  display: block !important;
  color: var(--af-color-text, #1e293b) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 24px 0 12px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 2px solid var(--af-color-border, #e2e8f0) !important;
  background: transparent !important;
  user-select: text !important;
  pointer-events: none !important;
  -webkit-user-modify: read-only !important;
  cursor: default !important;
}

.afadir-section-text {
  display: block !important;
  width: 100% !important;
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 12px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  user-select: text !important;
  pointer-events: none !important;
  -webkit-user-modify: read-only !important;
  cursor: default !important;
}

.afadir-section-text * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}