/* =========================================================
   Pestañas superiores Seinto Product Finder
   ========================================================= */
.spf-wrapper{
  --green:#144633;
  --yellow:#ffd700;
  --bg:#0f3a2a;
  display:block;
  max-width:100%;
  margin-top: 40px;
}

.spf-tabs{
  display:flex;
  gap:28px;
  align-items:flex-end;
}

.spf-tab{
  background:none;
  border:0;
  padding:0 0 8px;
  font-weight:700;
  font-size:16px;
  color:#fff;
  cursor:pointer;
  position:relative;
  font-family:'Open Sans',sans-serif;
  letter-spacing:-0.2px;
}
.spf-tab::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:transparent;
  border-radius:999px 999px 0 0;
}
.spf-tab.is-active{
  color:#fff;
}
.spf-tab.is-active::after{
  background:#fff;
}

.spf-subtitle{
  margin:12px 0 0;
  color:#fff;
  font-size:14px;
  line-height:1.3;
  font-weight:400;
}

/* Contenido de las pestañas */
.spf-pane{
  display:none;
  margin-top:30px;
}
.spf-pane.is-active{
  display:block;
}

/* =========================================================
   Formulario de referencia – versión ajustada (alineación exacta)
   ========================================================= */
.spf-ref-form {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: none;
}

.spf-ref-label {
  font-size: 13px;
  font-weight: 600;
  color: #144633;
  display: none; /* accesible pero oculto */
}

.spf-ref-group {
  --height: 82px; /* controla la altura total */
  display: flex;
  align-items: stretch;
  width: 100%;
}

.spf-ref-input {
  flex: 1 1 auto;
  height: var(--height);
  border: none;
  border-radius: 12px 0 0 12px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1; /* evita que se desplace */
  outline: none;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  font-family:'Open Sans',sans-serif;
  color: var(--green);
}

.spf-ref-input::placeholder {
  color: #b3b3b3;
  font-weight: 400;
}

.spf-ref-input:focus {
  box-shadow: 0 0 0 2px rgba(20,70,51,.25);
}

.spf-ref-btn {
  height: 100%;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  width: auto;
  background: var(--yellow);
  color: var(--green);
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  transition: filter .15s ease, transform .08s ease;
  letter-spacing: -0.6px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 0 12px 12px 0;
}

.spf-ref-btn:hover { filter: brightness(.98); }
.spf-ref-btn:active { transform: translateY(1px); }

.spf-ref-ico {
  width: 30px;
  height: 30px;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath fill='%23144633' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.49 21.49 20l-5.99-6zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.spf-ref-txt {
  text-transform: uppercase;
  letter-spacing: -0.6px;
}

/* Subtítulo bajo el buscador */
.spf-subtitle {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
}

/* Responsive referencia */
@media (min-width: 641px) {}
	
@media (max-width: 640px) {
  .spf-ref-group { flex-direction: column; }
  .spf-ref-input {
    border-radius: 12px;
    height: 56px;
  }
  .spf-ref-btn {
    border-radius: 12px;
    margin-top: 8px;
	min-height: 56px;
    width: 100%;
  }
}

/* =========================================================
   Seinto Finder – Adrián “tabs” (16px, selects en panel inferior en grid)
   ========================================================= */
.js-seinto-finder.adrian-tabs{
  --green:#144633;
  --yellow:#ffd700;
  --sep:#e6e6e6;
  --muted:#b3b3b3;
  --white:#ffffff;
  --radius:12px;
  --height:52px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  overflow:hidden;
  /*padding: 20px;*/
  margin-top: 30px;

  /* CONTENEDOR COMO GRID: 4 columnas de filtros + 1 del botón */
  display:grid;
  grid-template-columns:repeat(4,1fr) auto;
}

/* ====== Fila superior (tabs) ====== */
/* Usamos display:contents para que las .sf-col se coloquen en el grid del contenedor */
.js-seinto-finder.adrian-tabs .sf-head{
  display:contents;
}

.js-seinto-finder.adrian-tabs .sf-col{
  position:relative;
  min-width:0;
  padding: 30px;
  border-right:1px solid var(--sep);
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer; /* indica que se puede abrir el panel */
}
.js-seinto-finder.adrian-tabs .sf-col.sf-col--action{
  display: grid;          /* más fiable que flex para estirar en grid */
  align-items: stretch;
  padding: 0;
  border-right: 0;
}

/* Flechita sólida alineada a la derecha de cada columna */
.js-seinto-finder.adrian-tabs .sf-col::after{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b3b3b3' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  pointer-events:none;
}
.js-seinto-finder.adrian-tabs .sf-col.is-active::after,
.js-seinto-finder.adrian-tabs .sf-col.is-filled::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23144633' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
}

/* Label-tab (16px) con círculo (22px) */
.js-seinto-finder.adrian-tabs label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.6px;
}
/* Anulamos cualquier flecha previa en el label */
.js-seinto-finder.adrian-tabs label::after{ display:none !important; }

/* Números 1–4 (aplican a las 4 primeras .sf-col del grid) */
.js-seinto-finder.adrian-tabs .sf-col:nth-of-type(1) label::before{ content:"1"; }
.js-seinto-finder.adrian-tabs .sf-col:nth-of-type(2) label::before{ content:"2"; }
.js-seinto-finder.adrian-tabs .sf-col:nth-of-type(3) label::before{ content:"3"; }
.js-seinto-finder.adrian-tabs .sf-col:nth-of-type(4) label::before{ content:"4"; }

.js-seinto-finder.adrian-tabs label::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  min-width:22px;
  border-radius:50%;
  background:var(--muted);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

/* Estados activo/lleno → verde (solo color del tab) */
.js-seinto-finder.adrian-tabs .sf-col.is-active label,
.js-seinto-finder.adrian-tabs .sf-col.is-filled label{
  color:var(--green);
}
.js-seinto-finder.adrian-tabs .sf-col.is-active label::before,
.js-seinto-finder.adrian-tabs .sf-col.is-filled label::before{
  background:var(--green);
  color:#fff;
}

/* ====== Panel inferior (grid, 4 columnas, bajo los 4 filtros) ====== */
/* Span solo las 4 primeras columnas del contenedor (no ocupa la del botón) */
.js-seinto-finder.adrian-tabs .sf-panel{
  grid-column:1 / span 4;
  display:grid;
  grid-template-columns:repeat(4,1fr); /* Marca, Modelo, Familia, Pieza */
  gap:12px 16px;
  /*border-top:1px solid var(--sep);*/
  padding:12px 16px;
  background:#fff;
}

/* Colocar cada pane bajo su columna correspondiente */
.js-seinto-finder.adrian-tabs .sf-pane{ grid-row:1; }
.js-seinto-finder.adrian-tabs .sf-pane--brand{ grid-column:1; }
.js-seinto-finder.adrian-tabs .sf-pane--model{ grid-column:2; }
.js-seinto-finder.adrian-tabs .sf-pane--family{ grid-column:3; }
.js-seinto-finder.adrian-tabs .sf-pane--part{ grid-column:4; }

/* Oculto por defecto */
.js-seinto-finder.adrian-tabs .sf-pane[hidden]{ display:none !important; }

/* Colapsar visual cuando no hay ningún pane abierto */
.js-seinto-finder.adrian-tabs .sf-panel:not(.has-open){
  border-top-color:transparent;
  padding-top:0;
  padding-bottom:0;
}

/* Estilo del select (ocupa 100% de su columna, no de todo el bloque) */
.js-seinto-finder.adrian-tabs .sf-panel select{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:var(--height);
  padding:0 12px;
  font-size:16px;
  font-weight:700;
  color:#111827;
  background:#fff;
  border:1px solid var(--sep);
  border-radius:10px;
}

/* ====== Estado visual de los selects cuando ya tienen valor ====== */
.js-seinto-finder.adrian-tabs .sf-panel select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(20,70,51,.25); /* verde suave */
  border-color: var(--green);
}
.js-seinto-finder.adrian-tabs .sf-panel select.filled{
  border-color: var(--green);
  background-color: #f4faf8;   /* verde muy suave */
  color: var(--green);
  box-shadow: 0 0 0 2px rgba(20,70,51,.08) inset;
}
.js-seinto-finder.adrian-tabs .sf-panel select.filled:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(20,70,51,.16) inset;
}

/* Animación suave del panel (opcional) */
@media (prefers-reduced-motion: no-preference){
  .js-seinto-finder.adrian-tabs .sf-panel{
    transition: padding .18s ease, border-top-color .18s ease;
  }
}

/* ====== Botón BUSCAR (fix borde 1px) ====== */
.js-seinto-finder.adrian-tabs{
  position: relative;
  contain: paint;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  /* IMPORTANTE: overflow:hidden mantiene el radio; la faja va por DENTRO */
}

/* Faja blanca de 2px por DENTRO del borde inferior del contenedor */
.js-seinto-finder.adrian-tabs::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;                 /* ahora no sale fuera, no la recorta */
  height:2px;               /* cubre cualquier subpíxel */
  background:#fff;
  pointer-events:none;
  z-index:1;                /* por encima del fondo, por debajo del contenido */
}

/* Celda del botón: relleno amarillo completo bajo el botón */
.js-seinto-finder.adrian-tabs .sf-col--action{
  display:flex;
  align-items:stretch;
  padding:0;
  border-right:0;
  position:relative;        /* para ::before */
  z-index:2;                /* por encima de la faja blanca del contenedor */
}

/* Fondo amarillo que ocupa toda la celda (incluye esquina redondeada) */
.js-seinto-finder.adrian-tabs .sf-col--action::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--yellow);
  /* respetamos la esquina redondeada derecha del contenedor */
  border-bottom-right-radius: var(--radius);
  z-index:0;
}

/* Botón: ocupa todo y NO pinta su propio fondo (lo pone ::before) */
.js-seinto-finder.adrian-tabs .sf-search-btn{
  inline-size:100%;
  block-size:100%;
  min-block-size:var(--height);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 22px;
  background:transparent;
  color:var(--green);
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.6px;
  font-family:'Open Sans', sans-serif;
  position:relative;
  z-index:1;
}

.js-seinto-finder.adrian-tabs .sf-search-btn:hover{ filter:brightness(.98); }
.js-seinto-finder.adrian-tabs .sf-search-btn:active{ transform:translateY(1px); }

.js-seinto-finder.adrian-tabs .sf-ico{
  width:30px; height:30px;
  background-size:30px; background-position:center; background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath fill='%23144633' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.49 21.49 20l-5.99-6zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

/* No mostrar flecha en la columna del botón */
.js-seinto-finder.adrian-tabs .sf-col--action::after{ display:none !important; }

/* ====== Responsive ====== */
@media (max-width:992px){
  /* El contenedor deja de ser tarjeta blanca: fondo transparente */
  .js-seinto-finder.adrian-tabs{
    grid-template-columns:repeat(2,1fr);
    --height:52px;
    background:transparent;
    box-shadow:none;
  }

  .js-seinto-finder.adrian-tabs .sf-col:nth-of-type(2n){ border-right:0; }

  /* Cada filtro sigue siendo “bloque” blanco */
  .js-seinto-finder.adrian-tabs .sf-col{
    background:#fff;
  }

  /* Columna del botón: SIN fondo blanco, separada 8px como Referencia */
  .js-seinto-finder.adrian-tabs .sf-col.sf-col--action{
    grid-column:1 / -1;
    border-top:0;
    padding:0;
    margin-top:8px;          /* separación igual al buscador por referencia */
    background:transparent;  /* aquí ya no hay blanco */
    position:relative;
  }

  /* Fondo amarillo ocupa TODO el contenedor del botón */
  .js-seinto-finder.adrian-tabs .sf-col.sf-col--action::before{
    content:"";
    position:absolute;
    inset:0;                 /* sin huecos: nada de blanco alrededor */
    background:var(--yellow);
    border-radius:12px;      /* pill completo */
    z-index:0;
  }

  /* Botón BUSCAR: llena la celda y no pinta blanco */
  .js-seinto-finder.adrian-tabs .sf-search-btn{
    inline-size:100%;
    block-size:100%;
    min-block-size:56px;
    border-radius:12px;
    background:transparent;  /* el amarillo lo pone ::before */
    position:relative;
    z-index:1;
  }

  .js-seinto-finder.adrian-tabs .sf-panel{
    grid-column:1 / -1;
    grid-template-columns:repeat(2,1fr);
  }
  .js-seinto-finder.adrian-tabs .sf-pane--brand,
  .js-seinto-finder.adrian-tabs .sf-pane--model,
  .js-seinto-finder.adrian-tabs .sf-pane--family,
  .js-seinto-finder.adrian-tabs .sf-pane--part{ grid-column:auto; }

  /* DOCKING: panes bajo cada tab */
  .js-seinto-finder.adrian-tabs.is-docked .sf-panel{
    display:none !important;
  }
  .js-seinto-finder.adrian-tabs .sf-col .sf-pane{
    display:block;
    margin-top:10px;
  }
  .js-seinto-finder.adrian-tabs .sf-col .sf-pane[hidden]{
    display:none !important;
  }
  .js-seinto-finder.adrian-tabs .sf-col .sf-pane select{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:100%;
    height:var(--height);
    padding:0 12px;
    font-size:16px;
    font-weight:700;
    color:#111827;
    background:#fff;
    border:1px solid var(--sep);
    border-radius:10px;
  }

  /* Flecha estable en el label */
  .js-seinto-finder.adrian-tabs .sf-col::after{ 
    display:none !important;
  }
  .js-seinto-finder.adrian-tabs .sf-col > label{
    position:relative;
    padding-right:28px;
  }
  .js-seinto-finder.adrian-tabs .sf-col > label::after{
    content:"";
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px;
    display:block !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b3b3b3' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  }
  .js-seinto-finder.adrian-tabs .sf-col.is-active > label::after,
  .js-seinto-finder.adrian-tabs .sf-col.is-filled > label::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23144633' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  }
}

/* === <576px — todo en una columna, mismo comportamiento visual === */
@media (max-width:575.98px){
  .js-seinto-finder.adrian-tabs{
    grid-template-columns:1fr;
    --height:48px;
  }

  .js-seinto-finder.adrian-tabs .sf-head{ display:contents; }
  .js-seinto-finder.adrian-tabs .sf-col{
    border-right:0;
    border-bottom:1px solid var(--sep);
    padding:16px;
    background:#fff;
  }

  .js-seinto-finder.adrian-tabs .sf-col.sf-col--action{
    grid-column:1 / -1;
    border-bottom:0;
    border-top:0;
    padding:0;
    margin-top:8px;
    background:transparent;
    position:relative;
  }
  .js-seinto-finder.adrian-tabs .sf-col.sf-col--action::before{
    inset:0;
    border-radius:12px;
  }

  .js-seinto-finder.adrian-tabs .sf-search-btn{
    inline-size:100%;
    min-block-size:56px;
    border-radius:12px;
    background:transparent;
  }

  .js-seinto-finder.adrian-tabs.is-docked .sf-panel{
    display:none !important;
  }
  .js-seinto-finder.adrian-tabs .sf-col .sf-pane{
    display:block;
    margin-top:10px;
  }
  .js-seinto-finder.adrian-tabs .sf-col .sf-pane[hidden]{
    display:none !important;
  }
  .js-seinto-finder.adrian-tabs .sf-col .sf-pane select{
    display:block;
    width:100%;
    height:var(--height);
    padding:0 12px;
    border-radius:10px;
  }

  .js-seinto-finder.adrian-tabs .sf-col::after{ display:none !important; }
  .js-seinto-finder.adrian-tabs .sf-col > label{
    position:relative;
    padding-right:28px;
  }
  .js-seinto-finder.adrian-tabs .sf-col > label::after{
    content:"";
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    display:block !important;
    background-size:16px;
    background-position:center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b3b3b3' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  }
  .js-seinto-finder.adrian-tabs .sf-col.is-active > label::after,
  .js-seinto-finder.adrian-tabs .sf-col.is-filled > label::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23144633' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  }
}

/* (existente) */
@media (max-width:560px){
  .js-seinto-finder.adrian-tabs{ --height:48px; }
}