/* matrix-search.css */
:root{
  --bg: #f6f6f6 ;
  --panel:#ffffff;
  --text:#232323;
  --text-reset:#a03636;  
  --title:#298df0;  
  --muted:#ffffff;
  --border:#298df0;
  --select-bg:#f2f2f2;
  --select-disabled:#298df0;
  --primary:#66CC00;
  --primary-hover:#02A60F;
  --accent:#288cef;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}


.ymm-wrap{max-width:1200px;margin:28px auto;padding:16px 20px}
.ymm-title{margin:0 0 14px; color:var(--title);font-size:22px;font-weight:800}

.ymm-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:2px solid var(--border);border-radius:16px;
  padding:12px 12px;box-shadow:var(--shadow)
}

/* Selects */
.ymm-select{
  appearance:none;background:var(--select-disabled);color:var(--muted);
  border:2px solid var(--border);border-radius:var(--radius);
  padding:12px 44px 12px 14px;min-width:180px;font-size:16px; font-weight:500;outline:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 22px) calc(1em + 2px),
    calc(100% - 17px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:5px 5px,5px 5px,1px 1.5em;
  background-repeat:no-repeat;
}
.ymm-select:is(:hover,:focus){border-color:#38507a}
.ymm-select.is-enabled{background:var(--select-bg);color:var(--text);border-color:#298df0}
.ymm-select.is-enabled:focus{border-color:var(--accent)}
.ymm-select.is-complete{border-color:#53A600}

/* Buttons */
.ymm-actions{display:flex;gap:10px;margin-left:auto}
.btn{appearance:none;border:0;border-radius:var(--radius);padding:12px 18px;font-weight:600;font-size:17px;cursor:pointer;transition:transform .05s ease, background .2s, opacity .2s}
.btn:active{transform:translateY(1px)}
.btn-go{background:var(--primary);color:#fff;letter-spacing:.3px}
.btn-go:hover{background:var(--primary-hover)}
.btn-go[disabled]{opacity:.5;cursor:not-allowed}
.btn-reset{background:#e4e4e4;color:var(--text-reset)}
.btn-reset:hover{background:#d8d8d8;border-color:#4b6a99}
.btn.is-loading{position:relative;pointer-events:none;opacity:.85}
.btn.is-loading::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(255,255,255,.6);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Results */
.ymm-results{margin-top:14px;padding-top:10px}
.empty{color:var(--muted)}

/* --- Layout ancho por control ------------------------------------------ */
.ymm-bar{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; padding:12px;
}

/* Todos los selects comparten este comportamiento */
.ymm-select{
  flex: 1 1 var(--basis, 220px);   /* <- ancho objetivo configurable */
  min-width: var(--min, 160px);    /* <- nunca más pequeño que esto */
  max-width: var(--max, 100%);     /* <- opcional: límite superior  */
}

/* Tokens de anchura por tipo de control */
.w-brand   { --basis: 220px; --min: 160px; }   /* Marca */
.w-model   { --basis: 280px; --min: 200px; }   /* Modelo */
.w-year    { --basis: 120px; --min: 100px; --max: 160px; } /* Año */
.w-category{ --basis: 360px; --min: 240px; }   /* Categoría */

/* Botonera: no crecer, mantener compacta */
.ymm-actions{ flex: 0 0 auto; display:flex; gap:10px; }

/* Botones un poco más compactos visualmente */
.btn{ padding:10px 29px; font-weight:700; }
.btn-go{ min-width: 110px; }  /* “Buscar / Buscar todo”  */
.btn-reset{ min-width: 110px; }

/* --- Responsivo --------------------------------------------------------- */
/* Tablets: reduce un punto los targets */
@media (max-width: 1024px){
  .w-model   { --basis: 240px; }
  .w-category{ --basis: 300px; }
}

/* Móvil: cada control a línea completa para tocar cómodo */
@media (max-width: 640px){
  .ymm-bar{ gap:10px; }
  .ymm-select{ flex: 1 1 100%; min-width: 100%; max-width: 100%; }
  .ymm-actions{ width:100%; justify-content: flex-end; }
  .btn-go, .btn-reset{ width: auto; }
}

/* Comments */
.ymm-comment{
  margin-top:12px;
  padding:12px 14px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text);
}
.ymm-comment strong{ color:#53A600; }

/* Respeta saltos de línea (si no están ya) */
.ymm-comment,
.ymm-comment .cmt,
.ymm-comment .note {
  white-space: pre-line;
}

/* Separación entre comentario y nota */
.ymm-comment .cmt + .note {
  margin-top: 8px;   /* 8–12px queda bien */
}

/* (opcional) si algún día añades más bloques dentro, separa cualquier hermano consecutivo */
.ymm-comment > * + * {
  margin-top: 10px;
}

/* Enlaces de resultados */
.result-link{
  display:block;
  padding:10px 10px;
  border:2px solid var(--border, #288cef);
  border-radius:12px;
  text-decoration:none;
  margin:8px 0;
  transition:background-color .15s ease, border-color .15s ease;
}
.result-link:hover{
  background:var(--hover, #DFE3EC);
  border-color:var(--accent, #3b82f6);
}

/* El “código” del producto (píldora monoespaciada) */
.result-code{
  display:inline-block;
  font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  padding:4px 8px;
  border-radius:999px;
  background:var(--code-bg, #eef2ff);
  color:var(--code-fg, #1e3a8a);
  border:2px solid var(--code-border, #288cef);
  margin-right:6px;
  vertical-align:middle;
}

/* El nombre de la categoría al lado */
.result-name{
  font-size:15px;
  color:var(--text, #192132);
  vertical-align:middle;
}

/* Oculta botón  [Buscar todo para ese año] hasta que no se seleccione el año*/
.is-hidden { display: none !important; }