/*
 * buscador.css — estilos del combo-buscador (.buscador-*) y del modal (.modal-*)
 * Extraído de un proyecto PHP + JS vanilla el 2026-07-18, para usar junto a buscador.js.
 *
 * ============================================================================
 * VARIABLES DE TEMA
 * ============================================================================
 * Este archivo usa variables CSS (--bg3, --bg4, --border, --border2, --text,
 * --text2, --accent2, --accent-dim, --red, --radius, --radius-lg) en vez de
 * colores fijos, para que el proyecto que lo consuma pueda pisarlas con su
 * propia paleta. Más abajo hay un bloque :root de EJEMPLO con valores por
 * defecto razonables (tema oscuro) — si tu proyecto ya define un :root con
 * estos mismos nombres, el tuyo gana simplemente por especificidad/orden de
 * carga (cargá tu :root propio después de este archivo, o borrá el bloque
 * de ejemplo de acá). Si preferís no lidiar con variables, reemplazá cada
 * var(--nombre) de este archivo por un valor fijo y borrá el bloque :root.
 *
 * Referencia rápida de qué representa cada variable:
 *   --bg2         fondo del modal (un tono distinto del fondo de página)
 *   --bg3         fondo de inputs / filas de dropdown / chips
 *   --bg4         fondo on-hover de ítems del dropdown / chip-quitar
 *   --border      borde sutil (separadores, inputs)
 *   --border2     borde más marcado (dropdown, dividers de foco)
 *   --text        color de texto principal
 *   --text2       color de texto secundario (subtítulos, placeholders)
 *   --accent2     color de acento (resaltado de match, borde activo)
 *   --accent-dim  fondo del resaltado <mark>
 *   --red         color de "peligro" (botón quitar, on-hover)
 *   --radius      radio de borde chico (dropdown, chips)
 *   --radius-lg   radio de borde grande (modal)
 * ============================================================================
 */

:root {
  --bg2: #161b27;
  --bg3: #1e2535;
  --bg4: #252d40;
  --border: #2a3350;
  --border2: #3a4a6a;
  --text: #e8ecf5;
  --text2: #8b96b5;
  --accent2: #6fa3ff;
  --accent-dim: #1a2f5a;
  --red: #f87171;
  --radius: 10px;
  --radius-lg: 16px;
}

/* Dependencia mínima: el markup de buscador.js usa la clase "form-input" en el
   <input> principal y en los inputs editables de cada chip. Si tu proyecto ya
   tiene su propia clase de input, borrá este bloque (o renombrala en buscador.js). */
.form-input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border .15s;
  width: 100%;
  box-sizing: border-box;
}

/* ===== Combo-buscador (.buscador-*) ===== */

.buscador-wrap { position: relative; }

.buscador-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 12px 32px #0009;
  display: none;
}
.buscador-dropdown.show { display: block; }

.buscador-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.buscador-item:last-child { border-bottom: none; }
.buscador-item:hover { background: var(--bg4); }
.buscador-item.active { background: var(--bg4); box-shadow: inset 3px 0 0 var(--accent2); }
.buscador-item .b-nombre { font-size: 13px; color: var(--text); font-weight: 500; }
.buscador-item .b-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.buscador-item mark { background: var(--accent-dim); color: var(--accent2); border-radius: 3px; padding: 0 2px; }

.buscador-empty { padding: 12px; color: var(--text2); font-size: 13px; }

.buscador-asociar {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--accent2);
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.buscador-asociar:hover { background: var(--bg4); }

.buscador-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }

.buscador-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.buscador-chip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.buscador-chip .b-nombre { font-size: 13px; color: var(--text); font-weight: 500; }
.buscador-chip .b-sub { font-size: 12px; color: var(--text2); }
.buscador-chip .b-quitar {
  cursor: pointer;
  color: var(--text2);
  background: none;
  border: none;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 6px;
}
.buscador-chip .b-quitar:hover { background: var(--bg4); color: var(--red); }

.buscador-campos { display: flex; gap: 8px; flex-wrap: wrap; }
.buscador-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text2);
  flex: 1;
  min-width: 120px;
}
.buscador-campo .form-input { padding: 6px 10px; font-size: 12px; }

/* ===== Modal genérico (.modal-*) ===== */
/* No lo usan moverResaltado/crearAutocompleteSimple/crearBuscadorMedicamentos
   directamente, pero suele acompañar al buscador (p.ej. para mostrar un
   detalle o un alta rápida dentro de un popup) — se incluye para el mismo
   paquete exportable. Requiere el markup:
     <div id="modal-overlay" class="modal-overlay">
       <div class="modal">
         <div class="modal-head">
           <div>
             <div class="modal-title"></div>
             <div class="modal-sub"></div>
           </div>
           <button class="modal-close">&times;</button>
         </div>
         <div class="modal-body"></div>
       </div>
     </div>
   Mostrar/ocultar alternando la clase "show" en #modal-overlay. */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: #0008;
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px #000a;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--text); }
.modal-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.modal-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
}
.modal-close:hover { background: var(--bg4); color: var(--text); }
.modal-body { padding: 16px 20px; overflow-y: auto; }