/* Selectores públicos compartidos. El control nativo conserva teclado,
   validación, eventos change y envío del formulario, sin duplicar campos. */
:is(.sitio-reservas, .rp) select {
  min-width: 0;
  max-width: 100%;
  font-weight: 400;
  cursor: pointer;
}

.rp .rp-field { min-width: 0; }
.rp .rp-field select { width: 100%; }

:is(.sitio-reservas, .rp) select:focus-visible {
  outline: 2px solid #3c5a43;
  outline-offset: 3px;
}

.rp .rp-form-card select:focus-visible {
  outline-color: #c0964e;
}

:is(.sitio-reservas, .rp) select:disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Mejora progresiva: donde no existe base-select se mantiene el selector
   del dispositivo, con todas sus opciones y funciones disponibles. */
@supports (appearance: base-select) {
  :is(.sitio-reservas, .rp) select:not([multiple]):not([size]),
  :is(.sitio-reservas, .rp) select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  :is(.sitio-reservas, .rp) select:not([multiple]):not([size]) {
    align-items: center;
    gap: 10px;
    text-align: start;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :is(.sitio-reservas, .rp) select > button {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
  }

  :is(.sitio-reservas, .rp) selectedcontent {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :is(.sitio-reservas, .rp) select::picker-icon {
    color: #3c5a43;
    flex: none;
    margin-inline-start: auto;
    transition: rotate .18s ease;
  }

  .rp .rp-form-card select::picker-icon { color: #e6ede4; }

  :is(.sitio-reservas, .rp) select:open::picker-icon { rotate: 180deg; }

  :is(.sitio-reservas, .rp) select::picker(select) {
    box-sizing: border-box;
    color: #24211b;
    background: #fbf8f1;
    border: 1px solid rgba(36, 33, 27, .16);
    border-radius: 14px;
    padding: 6px;
    margin-block: 6px;
    max-width: calc(100vw - 24px);
    /* Cabe por encima o por debajo incluso con el campo a media pantalla. */
    max-height: min(340px, calc(50dvh - 48px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b4c1b1 #fbf8f1;
    box-shadow: 0 12px 32px rgba(36, 33, 27, .16);
    font: inherit;
  }

  :is(.sitio-reservas, .rp) select option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #24211b;
    font: inherit;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  :is(.sitio-reservas, .rp) select option:checked {
    color: #2f4835;
    background: #e6ede4;
    font-weight: 600;
  }

  :is(.sitio-reservas, .rp) select option:not(:disabled):is(:hover, :focus-visible) {
    color: #fff;
    background: #3c5a43;
    outline: none;
  }

  :is(.sitio-reservas, .rp) select option:disabled {
    color: #6e665a;
    background: transparent;
    cursor: default;
    font-weight: 400;
  }

  :is(.sitio-reservas, .rp) select option:disabled::checkmark { visibility: hidden; }

  :is(.sitio-reservas, .rp) select option::checkmark {
    color: currentColor;
    order: 1;
    margin-inline-start: auto;
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.sitio-reservas, .rp) select::picker-icon { transition: none; }
}