/* Ekonatura · Search Interaction PASS v1.0 · 07/11/2026
   Shared visual contract for the GLOBAL Home search on every route and
   the /problemas/ side-drawer/mobile-sheet. Keep both existing engines,
   result destinations, content and event handlers. This is NOT a new search.
   Approved Home: padded result surface, subtle hover, no boxed-outlining
   or underline duplication; neutral graphite/cream in light and dark. */

body.ek-integrated #ek-search,
body.ek-integrated[data-route="/problemas/"] .ek-search-drawer{
  --ek-search-ink:#f5f1eb;
  --ek-search-muted:#d1cbc5;
  --ek-search-surface:#292d2e;
  --ek-search-hover:rgba(245,241,235,.10);
  --ek-search-focus:#dfa089;
  --ek-search-space-desktop:18px 20px;
  --ek-search-space-mobile:17px 16px;
  color:var(--ek-search-ink)!important;
}
/* Global search surface. This file is the existing shared search contract,
   loaded on every route after legacy theme/chrome styles. The global menu
   invokes this one modal; do not duplicate it or change its search engine. */
body.ek-integrated dialog#ek-search{
  background:var(--ek-search-surface)!important;
  background-image:none!important;
  color:var(--ek-search-ink)!important;
  border:0!important;
  box-shadow:none!important;
  color-scheme:dark;
}
body.ek-integrated #ek-search :is(.ek-search-field,.ek-search-results,.ek-search-suggestions){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.ek-integrated #ek-search .ek-search-input{
  box-sizing:border-box!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  color:var(--ek-search-ink)!important;
  caret-color:#dc7a35!important;
  box-shadow:none!important;
  outline:0!important;
  text-decoration:none!important;
}
:root[data-ek-theme="dark"] body.ek-integrated #ek-search .ek-search-input{
  caret-color:var(--ek-v1-coral,#dfa089)!important;
}
body.ek-integrated #ek-search .ek-search-input:focus-visible{
  border:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}
body.ek-integrated #ek-search .ek-search-field{
  border:0!important;
  border-bottom:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
/* Use the input's native 1px blinking insertion caret, not decorative
   pseudo-elements or a second line. Never override reduced-motion settings. */
body.ek-integrated #ek-search .ek-search-suggestions button{
  border:0!important;
  box-shadow:none!important;
  background:rgba(245,241,235,.065)!important;
  color:var(--ek-search-ink)!important;
}
body.ek-integrated #ek-search .ek-search-suggestions button:is(:hover,:focus-visible){
  background:rgba(245,241,235,.11)!important;
  color:var(--ek-search-ink)!important;
}
body.ek-integrated #ek-search .ek-dialog-head [data-close]{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ek-search-ink)!important;
}
body.ek-integrated #ek-search :is(.ek-search-input,.ek-search-suggestions button,.ek-dialog-head [data-close]):focus-visible{
  outline-offset:3px!important;
}
/* Same single result affordance, on every page. In Home the earlier
   .ek-concept-page rule already declares the same geometry, so it stays
   pixel-consistent. No visual border at rest or when hovered. */
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a){
  box-sizing:border-box!important;
  min-width:0!important;
  padding:var(--ek-search-space-desktop)!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  box-shadow:none!important;
  text-decoration:none!important;
  outline:0!important;
  transition:background-color .16s ease;
}
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a):is(:hover,:focus-within){
  background:var(--ek-search-hover)!important;
  border-color:transparent!important;
  text-decoration:none!important;
}
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a):focus:not(:focus-visible){
  outline:none!important;
}
body.ek-integrated #ek-search .ek-search-results>a:focus-visible,
body.ek-integrated #ek-search .ek-search-card:focus-within:has(:focus-visible){
  outline:2px solid var(--ek-search-focus)!important;
  outline-offset:2px!important;
}
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card) :is(h3,p,small,span,.ek-result-title,.ek-result-type,.ek-search-description){
  color:var(--ek-search-ink)!important;
  text-decoration:none!important;
}
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card) small,
body.ek-integrated #ek-search .ek-result-type{
  color:var(--ek-search-muted)!important;
}
body.ek-integrated #ek-search .ek-search-results{
  gap:4px!important;
  border:0!important;
  padding-top:4px!important;
}
body.ek-integrated #ek-search .ek-search-results>a{
  border:0!important;
  text-decoration:none!important;
}
body.ek-integrated #ek-search .ek-search-card :is(.ek-search-expand,a){
  min-height:44px;
}
/* No underline anywhere inside search result hit targets, even when
   global link :hover / :focus styles would normally reintroduce one. */
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card,.ek-search-results>a :is(a,span,h3,p,strong,small),.ek-search-card :is(a,span,h3,p,strong,small)):is(:hover,:focus,:focus-visible,:focus-within),
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card) :is(a,span,h3,p,strong,small),
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(a,a:hover,a:focus-visible,a *,a:hover *,a:focus-visible *){
  text-decoration:none!important;
  text-decoration-line:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result):is(:hover,:focus-visible){
  color:var(--ek-search-ink)!important;
  background:var(--ek-search-hover)!important;
}
/* One sensible palette for the Problems results surface; the overall shell
   remains a drawer on desktop, an accessible bottom sheet on mobile. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer{
  background:var(--ek-search-surface)!important;
  color:var(--ek-search-ink)!important;
  border:0!important;
  box-shadow:-12px 0 44px rgba(0,0,0,.16)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
  box-sizing:border-box!important;
  gap:20px!important;
  padding:34px 32px 16px!important;
  border:0!important;
  border-bottom:0!important;
  background:transparent!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
  font:400 clamp(26px,2.4vw,32px)/1.2 var(--ek-font-heading,Georgia,serif)!important;
  color:var(--ek-search-ink)!important;
  margin:0 0 7px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer :is(.ek-search-drawer-eyebrow,.symptom-status){
  color:var(--ek-search-muted)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close{
  box-sizing:border-box!important;
  flex:0 0 44px!important;
  display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;
  min-width:44px!important;min-height:44px!important;
  border:1px solid rgba(245,241,235,.48)!important;
  border-radius:50%!important;
  background:transparent!important;color:var(--ek-search-ink)!important;
  padding:0!important;box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close:hover{
   background:var(--ek-search-hover)!important;
 }
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close:focus-visible{
  outline:2px solid var(--ek-search-focus)!important;
  outline-offset:2px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
  box-sizing:border-box!important;
  padding:10px 24px calc(32px + env(safe-area-inset-bottom,0px))!important;
  min-height:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:4px!important;
  padding:0!important;margin:0!important;
  list-style:none!important;
  max-width:100%!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results>li,
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-result{
  box-sizing:border-box!important;
  min-width:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  margin:0!important;
  padding:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result){
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-height:44px!important;
  padding:var(--ek-search-space-desktop)!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:var(--ek-search-ink)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  outline:0!important;
  transition:background-color .16s ease;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result):is(:hover,:focus-visible){
  background:var(--ek-search-hover)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result):focus-visible{
  outline:2px solid var(--ek-search-focus)!important;
  outline-offset:2px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result) :is(h2,h3,h4,p,span,small,strong){
  color:inherit!important;
  text-decoration:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result) :is(h2,h3,h4,.search-hit-title){
  font:400 clamp(23px,2vw,28px)/1.22 var(--ek-font-heading,Georgia,serif)!important;
  margin:0 0 6px!important;
  letter-spacing:normal!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result) :is(p,small,.search-hit-excerpt,.search-hit-description){
  font:400 14px/1.52 var(--ek-font-body,system-ui,sans-serif)!important;
  color:var(--ek-search-muted)!important;
  margin:0!important;
  overflow-wrap:anywhere;
}
/* Drawer is one list — not a dense, multi-column card wall — at all widths.
   Header stays readable and close target never clips on a 390px screen. */
@media(max-width:700px){
 body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a){
   padding:var(--ek-search-space-mobile)!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer{
   border:0!important;
   border-radius:24px 24px 0 0!important;
   box-shadow:0 -10px 40px rgba(0,0,0,.16)!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
   position:relative!important;
   align-items:center!important;
   padding:42px 18px 15px!important;
   gap:14px!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-grab{
   top:13px!important;width:44px!important;height:5px!important;
   border-radius:999px!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
   font-size:25px!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
   padding:10px 12px calc(24px + env(safe-area-inset-bottom,0px))!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result){
   padding:var(--ek-search-space-mobile)!important;
 }
}
/* Canonical inline symptom search (Home/Problems/article entry):
   the earlier modal-only CSS never targeted this real input. Remove the
   rectangular frame and both decorative baselines without changing JS. */
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field{
 border:0!important;border-bottom:0!important;outline:0!important;
 box-shadow:none!important;background:transparent!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field::before,
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field::after{
 content:none!important;display:none!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field input{
 border:0!important;border-bottom:0!important;outline:0!important;
 box-shadow:none!important;background:transparent!important;
 background-image:none!important;border-radius:0!important;
 text-decoration:none!important;caret-color:#dc7a35!important;
}
:root[data-ek-theme="dark"] body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field input{
 caret-color:var(--ek-v1-coral,#dfa089)!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field input:focus-visible{
 outline:0!important;border:0!important;box-shadow:none!important;
}
/* One quiet search icon, never its own underline. */
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-submit{
 border:0!important;border-bottom:0!important;
 outline-offset:3px;background:transparent!important;box-shadow:none!important;
 text-decoration:none!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-submit::after{
 content:none!important;display:none!important;
}
/* Shared search renderer: <li><a class="symptom-result">...</a></li>.
   A text underline, border or pseudo-rule must never survive hover;
   the graphite highlight remains the sole hover affordance. */
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a),
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a):is(:hover,:focus-visible,:active),
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result:is(:hover,:focus-visible,:active){
 text-decoration:none!important;text-decoration-line:none!important;
 border:0!important;border-bottom:0!important;box-shadow:none!important;
 background-image:none!important;
}
body.ek-integrated .ek-search-drawer .symptom-results>li,
body.ek-integrated .ek-search-drawer .symptom-results>li:is(:hover,:focus-within){
 border:0!important;border-top:0!important;border-bottom:0!important;
 box-shadow:none!important;background-image:none!important;
}
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result :is(.symptom-result__heading,strong,small,span,mark),
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result:is(:hover,:focus-visible,:active) *{
 text-decoration:none!important;text-decoration-line:none!important;
 border:0!important;border-bottom:0!important;box-shadow:none!important;
 background-image:none!important;
}
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result::before,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result::after,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result .symptom-result__heading::before,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result .symptom-result__heading::after,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result strong::before,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result strong::after{
 content:none!important;display:none!important;border:0!important;box-shadow:none!important;
}
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a):is(:hover,:focus-visible){
 background:var(--ek-v1-graphite-mid,#35393a)!important;
 color:var(--ek-v1-cream,#f5f1eb)!important;
}
/* ATO-545 · La raya bajo el título NO era un borde ni un text-decoration:
   era un gradiente de 1px en el `background` del <strong>, desplegado por el
   hover con `background-size:100% 1px`. `background-image:none` no lo borra,
   porque en un gradiente la imagen ES la propia propiedad `background`.
   Aquí se anula el relleno del título en el resultado real del drawer
   (`.search-hit > a > strong`) y en el renderer compartido
   (`a.symptom-result`): la superficie grafito queda como único realce. */
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a) strong,
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a):is(:hover,:focus-visible,:active) strong,
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a) :is(strong,b,em,mark,small,span,p){
 background:none!important;
 background-image:none!important;
 background-size:0 0!important;
 box-shadow:none!important;
 border:0!important;border-bottom:0!important;
 text-decoration:none!important;text-decoration-line:none!important;
}
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a) strong{
 transition:color .2s!important;
}
@media(prefers-reduced-motion:reduce){
 body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a),
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results a{
   transition:none!important;
 }
}


/* Compact, aligned drawer heading — visual QA feedback 07/11/2026.
   Heading is metadata, not a second result card. The header text baseline
   aligns with result card text: desktop 24+20=44px; mobile 12+16=28px.
   Existing X remains a 44px touch target and mobile grab stays visible. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:20px 28px 8px 44px!important;
  gap:16px!important;
  min-height:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head>div{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-eyebrow{
  display:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
  font-size:20px!important;
  line-height:1.24!important;
  font-weight:400!important;
  margin:0 0 4px!important;
  text-align:left!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-status{
  display:block!important;
  margin:0!important;
  padding:0!important;
  font-size:12px!important;
  line-height:1.45!important;
  text-align:left!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
  padding-top:12px!important;
}
@media(max-width:700px){
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
   padding:38px 16px 8px 28px!important;
   align-items:center!important;
   gap:10px!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
   font-size:19px!important;
   line-height:1.25!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-status{
   font-size:12px!important;
 }
 body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
   padding-top:12px!important;
 }
}