/**
 * suraSelect.css
 * Estilos para suraSelect.js
 * Requiere Bootstrap 5+ como base.
 * Version: 2.4.0
 */

/* ── Variables CSS ──────────────────────────────────────────────────────── */
:root {
  --sura-select-bg-wrapper: #dcf3d1;
  --sura-select-border-color: #ced4da;
  --sura-select-border-radius: 0.375rem;
  --sura-select-focus-border-color: lightgrey;
  --sura-select-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --sura-select-placeholder-color: #6c757d;
  --sura-select-tag-bg: #0d6efd;
  --sura-select-tag-color: #fff;
  --sura-select-option-hover-bg: #e9ecef;
  --sura-select-option-selected-bg: #0d6efd;
  --sura-select-option-selected-color: #fff;
  --sura-select-dropdown-bg: #fff;
  --sura-select-dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --sura-select-option-highlight-bg: #e2e6ea;
  /* Elementos específicos */
  --sura-select-display-bg: #fff;
  --sura-select-display-color: #212529;
  --sura-select-arrow-color: #495057;
  --sura-select-scrollbar-color: lightgrey;
  --sura-select-search-bg: #fff;
  --sura-select-search-color: #212529;
  --sura-select-option-color: #212529;
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.sura-select-wrapper {
  position: relative;
  width: 100%;
  padding: 4px;
  background-color: var(--sura-select-bg-wrapper);
  border-radius: var(--sura-select-border-radius);
  box-sizing: border-box;
}

/* ── Wrapper dentro de input-group (previene saltos de línea) ───────────── */
.select-sura-wrapper {
  flex: 1 1 0%;
  min-width: 0;
}

/* ── Display (select simulado) ──────────────────────────────────────────── */
.sura-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  background-color: var(--sura-select-display-bg);
  color: var(--sura-select-display-color);
  border: 1px solid var(--sura-select-border-color);
  border-radius: var(--sura-select-border-radius);
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.sura-select-display:focus {
  border-color: var(--sura-select-focus-border-color);
  box-shadow: var(--sura-select-focus-shadow);
}

.sura-select-display[aria-expanded="true"] {
  border-color: var(--sura-select-focus-border-color);
  box-shadow: var(--sura-select-focus-shadow);
}

/* ── Contenido del display ──────────────────────────────────────────────── */
.sura-select-display-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}

/* ── Placeholder ────────────────────────────────────────────────────────── */
.sura-select-placeholder {
  color: var(--sura-select-placeholder-color);
  font-style: italic;
}

/* ── Texto seleccionado (modo single) ───────────────────────────────────── */
.sura-select-selected-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tags (modo multiple) ───────────────────────────────────────────────── */
.sura-select-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background-color: var(--sura-select-tag-bg);
  color: var(--sura-select-tag-color);
  border-radius: 0.25rem;
  font-size: 0.85em;
  line-height: 1.4;
  white-space: nowrap;
}

.sura-select-tag-remove {
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  margin-left: 2px;
  color: #fff;
}

.sura-select-tag-remove:hover {
  background-color: #ffff00 !important;
  color: #f00 !important;
  font-weight: 700;
}

/* ── Flecha ─────────────────────────────────────────────────────────────── */
.sura-select-arrow {
  display: flex;
  align-items: center;
  margin-left: 8px;
  color: var(--sura-select-arrow-color);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sura-select-display[aria-expanded="true"] .sura-select-arrow {
  transform: rotate(180deg);
}

/* ── Dropdown ──────────────────────────────────────────────────────────── */
.sura-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background-color: var(--sura-select-dropdown-bg);
  border: 1px solid var(--sura-select-border-color);
  border-radius: var(--sura-select-border-radius);
  box-shadow: var(--sura-select-dropdown-shadow);
  margin-top: 4px;
  overflow: hidden;
}

/* ── Buscador ──────────────────────────────────────────────────────────── */
.sura-select-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--sura-select-border-color);
}

.sura-select-search {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--sura-select-search-bg);
  color: var(--sura-select-search-color);
}

/* ── Lista de opciones ─────────────────────────────────────────────────── */
.sura-select-options {
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sura-select-scrollbar-color) transparent;
}

/* ── Opción individual ─────────────────────────────────────────────────── */
.sura-select-option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.1s;
  outline: none;
  user-select: none;
  color: var(--sura-select-option-color);
}

.sura-select-option:hover {
  background-color: var(--sura-select-option-hover-bg);
}

.sura-select-option-highlighted {
  background-color: var(--sura-select-option-highlight-bg);
}

.sura-select-option-selected {
  background-color: var(--sura-select-option-selected-bg);
  color: var(--sura-select-option-selected-color);
}

.sura-select-option-selected:hover {
  background-color: var(--sura-select-option-selected-bg);
  opacity: 0.9;
}

.sura-select-option-selected.sura-select-option-highlighted {
  opacity: 0.9;
}

/* ── Sin resultados ────────────────────────────────────────────────────── */
.sura-select-no-results {
  padding: 0.75rem;
  text-align: center;
  color: var(--sura-select-placeholder-color);
  font-style: italic;
}

/* ── Dark Mode: media query (preferencia del sistema) ──────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --sura-select-bg-wrapper: #1e2d45;
    --sura-select-border-color: #374151;
    --sura-select-focus-border-color: #4b6fa5;
    --sura-select-focus-shadow: 0 0 0 0.25rem rgba(93, 143, 213, 0.3);
    --sura-select-placeholder-color: #94a3b8;
    --sura-select-tag-bg: #1d4ed8;
    --sura-select-tag-color: #e2e8f0;
    --sura-select-option-hover-bg: #1e3a5f;
    --sura-select-option-selected-bg: #1d4ed8;
    --sura-select-option-selected-color: #f0f6ff;
    --sura-select-dropdown-bg: #111c34;
    --sura-select-dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --sura-select-option-highlight-bg: #1e3a5f;
    --sura-select-display-bg: #0f172a;
    --sura-select-display-color: #e2e8f0;
    --sura-select-arrow-color: #94a3b8;
    --sura-select-scrollbar-color: #374151;
    --sura-select-search-bg: #0f172a;
    --sura-select-search-color: #e2e8f0;
    --sura-select-option-color: #e2e8f0;
  }

  /* Overrides explícitos para asegurar contraste sobre estilos de Bootstrap */
  .sura-select-search {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
  }

  .sura-select-search::placeholder {
    color: #94a3b8;
  }

  .sura-select-search-wrap {
    background-color: #111c34;
  }
}

/* ── Dark Mode: clase body.sura-dark-theme (Sura UI) ───────────────────── */
body.sura-dark-theme {
  --sura-select-bg-wrapper: #1e2d45;
  --sura-select-border-color: #374151;
  --sura-select-focus-border-color: #4b6fa5;
  --sura-select-focus-shadow: 0 0 0 0.25rem rgba(93, 143, 213, 0.3);
  --sura-select-placeholder-color: #94a3b8;
  --sura-select-tag-bg: #1d4ed8;
  --sura-select-tag-color: #e2e8f0;
  --sura-select-option-hover-bg: #1e3a5f;
  --sura-select-option-selected-bg: #1d4ed8;
  --sura-select-option-selected-color: #f0f6ff;
  --sura-select-dropdown-bg: #111c34;
  --sura-select-dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --sura-select-option-highlight-bg: #1e3a5f;
  --sura-select-display-bg: #0f172a;
  --sura-select-display-color: #e2e8f0;
  --sura-select-arrow-color: #94a3b8;
  --sura-select-scrollbar-color: #374151;
  --sura-select-search-bg: #0f172a;
  --sura-select-search-color: #e2e8f0;
  --sura-select-option-color: #e2e8f0;
}

/* Overrides explícitos para asegurar contraste sobre estilos de Bootstrap */
body.sura-dark-theme .sura-select-search {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #374151 !important;
}

body.sura-dark-theme .sura-select-search::placeholder {
  color: #94a3b8;
}

body.sura-dark-theme .sura-select-search-wrap {
  background-color: #111c34;
}

body.sura-dark-theme .sura-select-tag-remove {
  color: #e2e8f0;
}