/* ====== Estilos aislados (prefijo ukx-) ====== */

:root {
  --ukx-bg: #ffffff;
  --ukx-fg: #0b0b0c;
  --ukx-muted: #6b7280;
  --ukx-border: #e5e7eb;
  --ukx-ring: #0a84ff;
  --ukx-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);
  --ukx-radius: 16px;
  --ukx-ctl-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ukx-bg: #0b0b0c;
    --ukx-fg: #f5f5f7;
    --ukx-muted: #9ca3af;
    --ukx-border: #262628;
    --ukx-shadow: 0 8px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  }
}

/* contenedor (80% y centrado) */

.ukx-block {
  width: 90%;
  /*max-width: 680px;*/
  margin-inline: auto;
  text-align: center;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial;
  color: var(--ukx-fg);
}

/* título igual para ambos */

.ukx-title {
  color: var(--ukx-muted);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  margin: 0 0 12px 0;
  letter-spacing: .2px;
}

/* caja base (idéntica para select y date) */

.ukx-control {
  -webkit-appearance: none;
  appearance: none;
  width: 110%;
  min-height: var(--ukx-ctl-h);
  font-size: 1.05rem;
  padding: 0 48px 0 16px;
  background: var(--ukx-bg);
  color: var(--ukx-fg);
  border: 1px solid var(--ukx-border);
  border-radius: var(--ukx-radius);
  box-shadow: var(--ukx-shadow);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  cursor: pointer;
  line-height: var(--ukx-ctl-h);
}

.ukx-control:focus-visible {
  border-color: var(--ukx-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ukx-ring) 18%, transparent), var(--ukx-shadow);
}

.ukx-control:active {
  transform: scale(.997);
}

/* SELECT (flecha) */

.ukx-select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%239aa3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px 22px;
  padding-top: 0;
  padding-bottom: 0;
}

.ukx-placeholder {
  color: var(--ukx-muted);
}

/* DATE (icono calendario) */

.ukx-date {
  text-align: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%239aa3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px 22px;
  padding-top: 0px;
  padding-right: 100px!important;
  padding-bottom: 0;
}

/* Botón blanco SIEMPRE (sin invertir al hover) */

.ukx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ukx-ctl-h);
  padding: 0 16px;
  margin-top: 12px;
  background: #fff;
  color: #000;
  border: 1px solid var(--ukx-border);
  border-radius: 12px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: var(--ukx-shadow);
  transition: transform .06s ease, box-shadow .15s ease;
}

.ukx-button:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
}

.ukx-button:active {
  transform: scale(.985);
}

.ukx-button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ukx-ring) 22%, transparent), var(--ukx-shadow);
}

.ukx-hint {
  margin-top: 10px;
  color: var(--ukx-muted);
  font-size: .95rem;
  min-height: 1.2em;
}

/* Calendario con botón interno */

.ukx-date-wrap {
  position: relative;
  width: 80%;
}

.ukx-date {
  padding-right: 120px;
}

.ukx-date-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  height: calc(var(--ukx-ctl-h) - 8px);
  padding: 0 14px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--ukx-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ukx-date-btn:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
}

.ukx-date-btn:active {
  transform: scale(.985);
}

/* Calendario con botón interno */

.ukx-date-wrap {
  position: relative;
  width: 80%;
}

.ukx-date {
  padding-right: 120px;
}

.ukx-date-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  height: calc(var(--ukx-ctl-h) - 8px);
  padding: 0 14px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--ukx-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ukx-date-btn:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
}

.ukx-date-btn:active {
  transform: scale(.985);
}

.ukx-date-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  height: calc(var(--ukx-ctl-h) - 8px - (var(--ukx-ctl-h) * 0.1));
  padding: 0 12px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  box-shadow: var(--ukx-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ukx-date-btn svg {
  width: 16px;
  height: 16px;
}

.ukx-date-btn:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
}

.ukx-date-btn:active {
  transform: scale(.985);
}

/* ====== Ajustes mobile-friendly ====== */

/* En desktop sigue como lo tienes (80% / 680px).   En móvil ocupa casi todo el ancho: 100% - 20px (10px por lado). */

@media (max-width: 768px) {
  .ukx-block {
    width: calc(92% - 20px) !important;
    max-width: none !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* Un poco menos alta la caja en móvil para verse más compacta */

@media (max-width: 768px) {
  :root {
  }
}

/* Asegura altura y centrado vertical del contenido dentro de la caja */

.ukx-control {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* --- Fecha con botón interno --- */

.ukx-date-wrap {
  position: relative;
  width: 100%;
}

.ukx-date {
  padding-right: 130px;
  text-align: center;
}

/* Botón dentro del campo: centrado vertical, siempre visible.   (Mantiene el estilo blanco / texto negro que pediste) */

.ukx-date-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 12px);
  padding: 0 12px;
  background: #fff;
  color: #000;
  border: 1px solid var(--ukx-border);
  border-radius: 10px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--ukx-shadow);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

/* Ajustes finos en pantallas muy pequeñas */

@media (max-width: 420px) {
  .ukx-date {
    padding-right: 116px;
  }
}

@media (max-width: 420px) {
  .ukx-date-btn {
    font-size: .85rem;
    padding: 0 10px;
  }
}

/* (Opcional) igualar radio/sombra si algo los sobreescribe */

.ukx-select, .ukx-date {
  border-radius: var(--ukx-radius);
  box-shadow: var(--ukx-shadow);
}