/* Several 10/11/2026 — Buscador AJAX de la cabecera TUNAP (widget TunapHeader).
   JS: views/js/tunap-search.js · Endpoint: controllers/front/search.php */

.tsr-host{position:relative}
.tsr-form{position:relative}

/* Campo: foco azul marino suave en lugar del anillo azul del navegador */
.tsr-host .th-search-input{height:42px;padding-right:36px!important;font-size:14px!important;border-radius:999px!important;transition:border-color .2s,box-shadow .2s,background-color .2s}
.tsr-host .th-search-input:focus,.tsr-host .th-search-input:focus-visible{outline:none!important;border-color:#17355f!important;background:#fff!important;box-shadow:0 0 0 3px rgba(23,53,95,.14)}
.tsr-host input[type=search]::-webkit-search-cancel-button,.tsr-host input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.tsr-host input[type=search]{-webkit-appearance:none;appearance:none}
.tsr-host .th-search-icon{color:#17355f!important}
.tsr-host--mob .th-mob-search-input{padding-right:40px!important}
.tsr-host--mob .th-mob-search-input:focus{border-color:rgba(255,255,255,.6)!important;background:rgba(255,255,255,.14)!important}

/* Botón de borrar / indicador de carga (a la derecha del campo) */
.tsr-clear{position:absolute;right:8px;top:50%;width:26px;height:26px;margin-top:-13px;display:none;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:#e8edf3;color:#17355f;cursor:pointer;z-index:2}
.tsr-clear:hover{background:#d7e0ea}
.tsr-clear:focus-visible{outline:2px solid #17355f;outline-offset:2px}
.tsr-has-value .tsr-clear{display:flex}
.tsr-host--overlay .tsr-clear{position:static;margin:0 2px 0 6px;flex-shrink:0}
.tsr-host--mob .tsr-clear{background:rgba(255,255,255,.18);color:#fff}
.tsr-loading .tsr-clear svg{display:none}
.tsr-loading .tsr-clear{display:flex;background:transparent}
.tsr-loading .tsr-clear::after{content:"";width:16px;height:16px;border:2px solid #c9d3df;border-top-color:#17355f;border-radius:50%;animation:tsrSpin .7s linear infinite}
.tsr-host--mob.tsr-loading .tsr-clear::after{border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes tsrSpin{to{transform:rotate(360deg)}}

/* Panel */
.tsr-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:10050;width:max(100%,460px);max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d3df transparent;padding:8px;background:#fff;border-radius:18px;box-shadow:0 16px 48px rgba(23,53,95,.18),0 2px 6px rgba(23,53,95,.08);color:#17355f;text-align:left;font-size:14px;line-height:1.35;animation:tsrIn .16s ease-out}
.tsr-panel[hidden]{display:none}
@keyframes tsrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tsr-host--overlay .tsr-panel{position:relative;top:auto;right:auto;width:100%;margin-top:10px;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
.tsr-host--mob .tsr-panel{position:relative;top:auto;right:auto;width:100%;margin-top:10px;max-height:none;box-shadow:none}

.tsr-sec+.tsr-sec,.tsr-empty+.tsr-sec{margin-top:6px;padding-top:6px;border-top:1px solid #edf1f5}
.tsr-h{display:flex;justify-content:space-between;align-items:baseline;padding:8px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b6675}
.tsr-h span{font-weight:600;letter-spacing:0;text-transform:none;font-size:12px}

.tsr-panel a.tsr-opt{color:#17355f!important;text-decoration:none!important;background:transparent}
.tsr-prod{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px}
.tsr-prod.is-active,.tsr-prod:hover{background:#f2f5f9!important}
.tsr-img{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#fff;border:1px solid #edf1f5;overflow:hidden}
.tsr-img img{width:44px;height:44px;object-fit:contain}
.tsr-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.tsr-name{font-weight:600;font-size:14px;line-height:1.25;color:#17355f}
.tsr-name mark,.tsr-chip mark{background:transparent;color:inherit;font-weight:800;padding:0;box-shadow:inset 0 -.38em 0 rgba(120,180,42,.35)}
.tsr-cat{font-size:12px;color:#5b6675;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsr-price{flex-shrink:0;font-weight:700;font-size:14px;color:#17355f;white-space:nowrap}
.tsr-pro{flex-shrink:0;padding:3px 9px;border-radius:999px;background:#78b42a;color:#17355f;font-size:11px;font-weight:700;white-space:nowrap}

.tsr-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 10px 10px}
.tsr-panel a.tsr-chip{display:inline-block;padding:7px 14px;border-radius:999px;background:#f2f5f9;font-size:13px;font-weight:600;line-height:1.2;white-space:normal}
.tsr-panel a.tsr-chip.is-active,.tsr-panel a.tsr-chip:hover{background:#17355f;color:#fff!important}
.tsr-panel a.tsr-chip.is-active mark,.tsr-panel a.tsr-chip:hover mark{box-shadow:none;text-decoration:underline}

.tsr-note{padding:10px 10px 4px;font-size:13px;color:#5b6675}
.tsr-note strong{color:#17355f}
.tsr-empty{display:flex;flex-direction:column;gap:4px;padding:12px 10px 10px}
.tsr-empty strong{font-size:14px}
.tsr-empty span{font-size:13px;color:#5b6675}

.tsr-foot{position:sticky;bottom:-8px;z-index:1;margin:6px -8px -8px;padding:8px;background:#fff;border-top:1px solid #edf1f5;border-radius:0 0 18px 18px}
.tsr-panel a.tsr-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:999px;background:#17355f;color:#fff!important;font-weight:700;font-size:14px}
.tsr-panel a.tsr-all.is-active,.tsr-panel a.tsr-all:hover{background:#0f233e!important;color:#fff!important}

.tsr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:480px){
  .tsr-prod{gap:10px;padding:8px}
  .tsr-name{font-size:13px}
  .tsr-price{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .tsr-panel{animation:none}
  .tsr-loading .tsr-clear::after{animation-duration:2s}
}