/* =========================================================
   Zulema UI — controles de nucleo (tema + idioma)

   El componente NO conoce la paleta de cada web. Usa variables neutras
   --zui-*  que cada proyecto mapea a sus colores en UN solo sitio
   (ver ZULEMA-UI-CONTROLS.md, seccion "Mapeo de variables").

   Valores por defecto pensados para un footer oscuro; sobrescribelos
   en tu :root si tu footer es claro.
   ========================================================= */
:root {
  --zui-control-text:     rgba(255, 255, 255, .85);
  --zui-control-text-2:   #ffffff;
  --zui-control-border:   rgba(255, 255, 255, .22);
  --zui-control-border-2: rgba(255, 255, 255, .45);
  --zui-menu-bg:          #ffffff;
  --zui-menu-text:        #1a1a1a;
  --zui-menu-hover:       #eef2f4;
  --zui-menu-active:      #0f4951;
  --zui-radius:           8px;
  --zui-shadow:           0 8px 30px rgba(0, 0, 0, .25);
  --zui-ease:             cubic-bezier(.4, 0, .2, 1);
}

/* ---- Contenedor de los controles (colocalo en el footer) ---- */
.zui-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ============ Toggle dia/noche ============ */
.zui-theme {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--zui-control-border);
  border-radius: var(--zui-radius);
  background: transparent;
  color: var(--zui-control-text);
  cursor: pointer;
  transition: color .2s var(--zui-ease), border-color .2s var(--zui-ease);
}
.zui-theme:hover { color: var(--zui-control-text-2); border-color: var(--zui-control-border-2); }
.zui-theme:focus-visible { outline: 2px solid var(--zui-control-border-2); outline-offset: 2px; }
.zui-theme svg { width: 20px; height: 20px; }
.zui-theme__sun { display: none; }
html[data-theme="dark"] .zui-theme__sun  { display: block; }
html[data-theme="dark"] .zui-theme__moon { display: none; }

/* ============ Selector de idioma (<details> nativo) ============ */
.zui-lang { position: relative; }
.zui-lang summary { list-style: none; cursor: pointer; }
.zui-lang summary::-webkit-details-marker { display: none; }

.zui-lang__current {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .7rem; min-height: 40px;
  background: transparent;
  color: var(--zui-control-text);
  border: 1px solid var(--zui-control-border);
  border-radius: var(--zui-radius);
  font: inherit; font-size: .85rem; font-weight: 500;
  transition: color .2s var(--zui-ease), border-color .2s var(--zui-ease);
}
.zui-lang__current:hover { color: var(--zui-control-text-2); border-color: var(--zui-control-border-2); }
.zui-lang summary:focus-visible .zui-lang__current,
.zui-lang__current:focus-visible { outline: 2px solid var(--zui-control-border-2); outline-offset: 2px; }

.zui-flag {
  width: 22px; height: 15px; object-fit: cover;
  border-radius: 2px; display: block; flex: 0 0 auto;
}
.zui-lang__caret { width: 14px; height: 14px; transition: transform .2s var(--zui-ease); }
.zui-lang[open] .zui-lang__caret { transform: rotate(180deg); }

/* Menu anclado al control y abriendo hacia arriba (footer). Sin numeros magicos:
   se posiciona respecto a .zui-lang (position:relative). Si el contenedor del
   footer recorta con overflow:hidden, dale overflow:visible en tu web. */
.zui-lang__menu {
  position: absolute;
  bottom: calc(100% + .5rem);
  right: 0;
  min-width: 180px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--zui-menu-bg);
  border-radius: var(--zui-radius);
  box-shadow: var(--zui-shadow);
  padding: 6px;
  z-index: 1000;
}
.zui-lang:not([open]) .zui-lang__menu { display: none; }

.zui-lang__option {
  display: flex; align-items: center; gap: .6rem;
  padding: 10px; border-radius: 6px;
  color: var(--zui-menu-text); text-decoration: none;
  font: inherit; font-size: .9rem; white-space: nowrap;
  transition: background .15s var(--zui-ease);
}
.zui-lang__option:hover,
.zui-lang__option:focus-visible { background: var(--zui-menu-hover); outline: none; }
.zui-lang__option.is-active { font-weight: 700; color: var(--zui-menu-active); }