/* ==========================================================================
   Franja Padrón — widget de búsqueda de mesa (autónomo)
   Todo bajo el namespace .franja-padron-widget: no depende de ninguna
   clase/ID de Elementor, así que nunca puede pisar el diseño de otra
   página del sitio. Casi todo declarado con !important porque este
   bloque puede terminar embebido en cualquier layout/tema vía shortcode.

   Excepción deliberada: la propiedad `display` de #csv-search-result no
   lleva !important en ninguna regla — el JS (ajax-script.js) la controla
   con .show()/.hide() de jQuery (estilo inline), y así ese inline manda
   siempre sin depender de especificidad entre clases.
   ========================================================================== */

.franja-padron-widget,
.franja-padron-widget * {
  box-sizing: border-box !important;
}

.franja-padron-widget {
  --fp-purple: #47245E;
  --fp-purple-deep: #331A44;
  --fp-gold: #EAB50C;
  --fp-gold-deep: #A87A06;
  --fp-ink: #252525;
  --fp-ink-soft: #5B5560;
  --fp-paper: #FCFBFA;
  --fp-page: #FAFAFA;
  --fp-line: #E1D8ED;
  --fp-found-bg: #F4EEFA;
  --fp-found-text: #3D1F52;
  --fp-found-line: #D9C7EC;
  --fp-error-bg: #FBEAE8;
  --fp-error-text: #8C2F22;
  --fp-error-line: #F0C7C0;

  display: block !important;
  position: relative !important;
  width: auto !important;
  max-width: 460px !important;
  margin: 0 !important;
  padding: 40px clamp(24px, 4vw, 44px) !important;
  background: var(--fp-paper) !important;
  border: 1px solid var(--fp-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 36px rgba(71, 36, 94, .14) !important;
  font-family: 'Ubuntu', sans-serif !important;
  text-align: left !important;
  float: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .franja-padron-widget {
    animation: franjaPadronIn .7s cubic-bezier(.16, .84, .44, 1) both !important;
  }
}
@keyframes franjaPadronIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.franja-padron-kicker {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--fp-gold-deep) !important;
  line-height: 1.3 !important;
  background: none !important;
  border: none !important;
}

.franja-padron-title {
  display: block !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  background: none !important;
  border: none !important;
}
.franja-padron-title-line {
  display: block !important;
  color: var(--fp-purple) !important;
  font-size: clamp(40px, 9vw, 52px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.franja-padron-helper {
  display: block !important;
  margin: 8px 0 20px !important;
  padding: 0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  color: var(--fp-ink-soft) !important;
  line-height: 1.5 !important;
  background: none !important;
  border: none !important;
}

.franja-padron-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--fp-line) !important;
  border-radius: 999px !important;
  background: var(--fp-page) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.franja-padron-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 13px 18px !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 15px !important;
  color: var(--fp-ink) !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  line-height: normal !important;
}
.franja-padron-input::placeholder { color: var(--fp-ink-soft) !important; opacity: 1 !important; }
.franja-padron-input:focus {
  outline: 2px solid var(--fp-purple) !important;
  outline-offset: -2px !important;
}

.franja-padron-button {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--fp-gold) !important;
  color: #2A1F00 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 26px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: filter .15s ease !important;
}
.franja-padron-button:hover { filter: brightness(.94) !important; }
.franja-padron-button:focus-visible {
  outline: 2px solid var(--fp-purple-deep) !important;
  outline-offset: -3px !important;
}

/* display sin !important a propósito: lo controla ajax-script.js (JS) */
.franja-padron-result {
  display: none;
  margin: 14px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  background: none !important;
  box-shadow: none !important;
}
.franja-padron-result.is-success {
  background: var(--fp-found-bg) !important;
  color: var(--fp-found-text) !important;
  border: 1px solid var(--fp-found-line) !important;
}
.franja-padron-result.is-error {
  background: var(--fp-error-bg) !important;
  color: var(--fp-error-text) !important;
  border: 1px solid var(--fp-error-line) !important;
}
.franja-padron-result b { display: block !important; margin-bottom: 2px !important; font-weight: 700 !important; }

@media (max-width: 620px) {
  .franja-padron-widget { max-width: 100% !important; }
}

/* ==========================================================================
   Neutralización de Elementor — escópica por contenido (:has), nunca por
   ID auto-generado. Solo aplica a un .elementor-widget-wrap que en algún
   lugar de su interior contenga ESTE widget, así que nunca puede afectar
   otra página/columna que no use este shortcode. Elementor estira las
   columnas hermanas a la misma altura y centra el contenido adentro con
   align-content:center — sin esto, la tarjeta queda con un hueco vacío
   arriba cuando la columna vecina es más alta (ej. fotos del equipo).
   ========================================================================== */
.elementor-widget-wrap:has(.franja-padron-widget) {
  height: auto !important;
  align-self: center !important;
  align-content: flex-start !important;
}

/* En mobile, esa sección usa el orden invertido de Elementor
   (.elementor-reverse-mobile es una clase genérica del tema, reusable en
   cualquier sección, por eso también va con :has() y no con un selector
   suelto): las fotos del equipo aparecen antes que el buscador, que es la
   razón por la que alguien entra a esta página en días de elección. */
@media (max-width: 767px) {
  .elementor-reverse-mobile:has(.franja-padron-widget) > .elementor-container {
    flex-direction: column !important;
  }
}