/*!
 * Album Familiar - Estilos del menu del header como <select>.
 * Modulo "menu-select". Solo estiliza el desplegable; el ocultado del menu
 * original y los toggles lo hace el JS (inline) para no depender de la
 * estructura exacta de Astra.
 */

.mj-menu-select-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.mj-menu-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0.5em 2.2em 0.5em 0.9em;
  max-width: 100%;
  cursor: pointer;
  /* Flecha del desplegable (SVG inline, sin peticiones externas). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 0.7em auto;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mj-menu-select:hover {
  border-color: rgba(0, 0, 0, 0.4);
}

.mj-menu-select:focus {
  outline: none;
  border-color: currentColor;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Cabeceras oscuras: adaptar contraste. */
@media (prefers-color-scheme: dark) {
  .mj-menu-select {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ccc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  }
}

/* En pantallas pequenas, que ocupe comodo sin desbordar. */
@media (max-width: 600px) {
  .mj-menu-select {
    font-size: 1.05rem;
    padding: 0.55em 2.2em 0.55em 0.9em;
  }
}