/* Shared dropdown (<select>) styling — one canonical look sitewide, loaded via
   <link rel="stylesheet" href="/shared-select.css">. Added 2026-08-01 (see docs/BACKLOG.md's
   dropdown-consolidation entry) to replace 8 hand-copied, drifted variants — none of which had
   a custom arrow, all fell back to the browser's native chevron.

   Targets every existing per-page class name directly so no <select class="..."> markup has to
   change anywhere on the site — only each page's own inline <style> rule for that class gets
   deleted, replaced by this one <link>. Uses var(--x, fallback) throughout rather than assuming
   a full custom-property set exists on every page — only --teal is safe to assume everywhere
   (confirmed by audit; --border/--card are missing from some pages' own :root, e.g.
   seo-pages.css's).

   color-scheme: dark below only themes the closed box's own background/border (that part is
   real CSS on the element). The *expanded* option list is drawn by the OS/browser as a native
   popup outside the page's paint layer — CSS can't set its exact colors, but color-scheme: dark
   tells the browser to use its native dark palette for that popup instead of the light default,
   which is a much closer match to this site's dark theme than doing nothing.

   That native-popup gap is why /shared-dropdown.js exists (added 2026-08-01, same day): it
   replaces every <select>'s expanded list with a custom dark/teal panel (.kreer-dd-panel below)
   built from real DOM, sitewide, no per-page opt-in needed. This file still owns the closed box's
   look — the JS's trigger <button> reuses the exact same classes, so .kreer-dd-trigger below
   duplicates this file's box styling as an unconditional (non-:where) rule only because a
   <button> can never match the `:where(select)` tag selector above, not because the look itself
   is meant to differ. */
.sp-select,
.builder-select,
.edit-select,
.reservas-filter-select,
.message-modal select,
.sort-select,
.calc-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  color-scheme: dark;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9BB5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 36px 10px 14px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: var(--white, #F4F8FF);
  cursor: pointer;
}
.sp-select:focus,
.builder-select:focus,
.edit-select:focus,
.reservas-filter-select:focus,
.message-modal select:focus,
.sort-select:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--teal, #16B8A6);
}
.sp-select:disabled,
.builder-select:disabled,
.edit-select:disabled,
.reservas-filter-select:disabled,
.message-modal select:disabled,
.sort-select:disabled,
.calc-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sitewide default — any <select> anywhere, present or future, gets this look even without one
   of the classes above, so no page has to be revisited just to "join" the shared style. Written
   with :where() (zero specificity) so it never wins a fight: any real page-specific rule, even a
   plain `select { ... }`, still overrides it cleanly. This is what makes the pattern a permanent
   site rule (see CLAUDE.md's "Menús desplegables (<select>)" section) rather than an opt-in list —
   new pages only need the <link> below, no new class or selector to remember. */
:where(select) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9BB5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 36px 10px 14px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: var(--white, #F4F8FF);
  cursor: pointer;
}
:where(select):focus {
  outline: none;
  border-color: var(--teal, #16B8A6);
}
:where(select):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* admin/nuevo-servicio.html + en/admin/new-service.html — the only page pair styling <select>
   via a bare element selector shared with input/textarea (`input, select, textarea { ... }`,
   left untouched there — this file only adds the arrow on top via the higher-specificity #id,
   deliberately additive rather than replacing that page's existing box styling). The :where()
   default above doesn't touch this page's other selects since its local `input, select,
   textarea` rule has real specificity and wins over :where() automatically. */
#currency {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9BB5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ── /shared-dropdown.js support — the original <select> stays in the DOM (source of truth for
   .value) but hidden; a sibling <button class="kreer-dd-trigger"> takes over the visible box. ── */
.kreer-dd-native { display: none !important; }

/* Full baseline box styling here (not just relying on .sp-select/.builder-select/etc., which the
   trigger also gets via its copied class list) because the trigger needs to look right even for a
   select with no shared class at all — e.g. #currency in admin/nuevo-servicio.html, which the
   :where(select) sitewide default above covers for a real <select> but can never match once the
   interactive element is a <button>. */
.kreer-dd-trigger {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9BB5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 36px 10px 14px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: var(--white, #F4F8FF);
  cursor: pointer;
}
.kreer-dd-trigger:focus,
.kreer-dd-trigger.is-open {
  outline: none;
  border-color: var(--teal, #16B8A6);
}
.kreer-dd-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Panel colors match the .location-dropdown/.location-option pattern already proven on
   seeker/editar.html's location-autocomplete field — same dark navy + teal, reused instead of
   inventing a second look. position:fixed + JS-computed coordinates (not position:absolute),
   same reason seeker/certificaciones.html's #cert-row-menu needed it: an absolutely-positioned
   panel gets clipped by any ancestor with overflow:hidden/auto, which several pages have (cards,
   modals, horizontally-scrolling tables). */
.kreer-dd-panel {
  display: none;
  position: fixed;
  z-index: 300;
  background: #17274A;
  border: 1px solid rgba(22, 184, 166, 0.3);
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.kreer-dd-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: 'Sora', sans-serif;
  color: var(--white, #F4F8FF);
  cursor: pointer;
}
/* Set only when a page opts a <select> into per-option icons (data-icon-svg on each <option>,
   see shared-dropdown.js) — e.g. seeker/editar.html's "Tipo de resultado" picker, which already
   had real SVGs per option (window.KREER_ICONS.resultTypes) for the public-profile badge, just
   never used for the dropdown itself before this. Badge look matches the teal-tinted icon
   treatment already used elsewhere on the site (nav/toolbar icons, KREER_ICONS' own callers). */
.kreer-dd-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(22, 184, 166, 0.12);
  color: var(--teal, #16B8A6);
}
.kreer-dd-option-icon svg { width: 14px; height: 14px; }
.kreer-dd-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kreer-dd-option:hover,
.kreer-dd-option.is-kbd-active {
  background: rgba(22, 184, 166, 0.14);
  color: var(--teal, #16B8A6);
}
.kreer-dd-option.is-active {
  color: var(--teal, #16B8A6);
  font-weight: 700;
}
.kreer-dd-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}