/* ===============================
   Formularios Globales Reutilizables
==================================*/

.formulario-base {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

.formulario-base label {
  font-weight: 200;
  color: var(--color-gris-claro);
  font-size: 12px;
  margin-bottom: 6px;
  margin-top: 0px;
  transition: all 0.2s ease;
  left: 14px;
  top: -14px;
  pointer-events: none;
}

.formulario-base input[type="text"],
.formulario-base input[type="password"],
.formulario-base input[type="number"],
.formulario-base input[type="email"],
.formulario-base select,
.formulario-base textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-gris-claro);
  border-radius: var(--radio-bordes);
  margin-bottom: 14px;
  font-size: 14px;
  font-family: var(--fuente-principal);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.formulario-base textarea {
  resize: vertical;
  min-height: 100px;
}
/* ===============================
   Spinner de cargas reutilizables
==================================*/

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ===============================
   Dropzone Reutilizable
==================================*/

.input-dropzone {
  border: 2px dashed var(--color-gris-claro);
  border-radius: var(--radio-bordes);
  padding: 30px;
  text-align: center;
  background-color: #fafafa;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
  color: var(--color-gris-claro);
  position: relative;
}

.input-dropzone:hover {
  background-color: #f0f0f0;
}

.input-dropzone input[type="file"] {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  cursor: pointer;
}

/* ===============================
   Vista previa de portada (9:16)
==================================*/
.preview-portada img {
  width: 100%;
  max-width: 270px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radio-bordes);
  box-shadow: var(--sombra-suave);
}

/* ===============================
   Quill Editor
==================================*/
.ql-container {
  border-radius: var(--radio-bordes) !important;
  border: 1px solid var(--color-gris-claro);
  font-family: var(--fuente-principal);
  min-height: 150px;
}

/* ===============================
   Grupo doble de inputs
==================================*/
.grupo-doble {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.grupo-doble > div {
  flex: 1;
  min-width: 240px;
}

/* ===============================
   Botones Generales
==================================*/
.btn,
button.primary {
  background-color: var(--color-secundario);
  color: white;
  font-weight: 600;
  border: none;
  padding: 14px 24px;
  border-radius: var(--radio-bordes);
  cursor: pointer;
  font-family: var(--fuente-principal);
  transition: var(--transition-general);
}

.btn:hover,
button.primary:hover {
  background-color: var(--color-primario);
}

.btn.secundario {
  background-color: var(--color-blanco-puro);
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
}

.btn.secundario:hover {
  background-color: #f3f3f3;
}

/* ===============================
   Popups
==================================*/
.popup-content .formulario-base {
  width: 100%;
  margin: 0 auto;
  position: relative;
}


/* ===============================
   BOTONES VER / GENERAR CONTRASEÑA
==================================*/
.input-password .password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-password input[type="password"],
.input-password input[type="text"] {
  width: 100%;
  padding-right: 80px; /* espacio para los botones */
  box-sizing: border-box;
}

.password-wrapper button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gris-claro);
  font-size: 16px;
  padding: 6px;
}

.password-wrapper .toggle-password {
  right: 44px;
  z-index: 1000;
}

.password-wrapper .generar-password {
  right: 8px;
  z-index: 1000;
}

/* ============================================
   DEFAULT Choices.js Estilo base (catálogo público, etc.)
============================================ */
.choices {
  z-index: 1001;
  width: 100%;
  margin-bottom: 14px;
}

.choices__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px !important;
  border: 1px solid var(--color-gris-claro);
  border-radius: var(--radio-bordes);
  font-family: var(--fuente-principal);
  background-color: var(--color-blanco-puro);
  color: var(--color-gris-claro);
  width: 100%;
}

.choices__item.choices__item--selectable {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* height: 100%; */
  /* font-size: 13px; */
  /* font-weight: 500; */
  /* padding: 0; */
  /* margin: 0; */
  /* transform: translateY(8px); */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choices__list--dropdown {
  position: absolute !important;
  top: calc(100% + 4px);
  left: 0;
  width: 100% !important;
  max-width: 100vw;
  background-color: var(--color-blanco-puro);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radio-bordes);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  z-index: 9999;
  box-sizing: border-box;
}

/* Opción básica */
.choices__list--dropdown .choices__item {
  font-size: 13px;
  color: var(--color-primario);
  padding: 8px 12px;
}

/* Hover */
.choices__item--selectable.is-highlighted {
  background-color: var(--color-blanco-fondo);
  color: var(--color-primario);
  cursor: pointer;
}

/* Bandera por defecto */
.choices__list--dropdown .fi,
.choices__item .fi {
  font-size: 15px;
  margin-right: 6px;
}

/* ============================================
   PERSONALIZACIÓN solo para USUARIOS
============================================ */
.usuarios-wrapper .choices__list--dropdown .choices__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-principal);
  font-size: 13px;
  color: var(--color-primario);
  padding: 10px 16px;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}

.usuarios-wrapper .choices.is-open .choices__list--dropdown {
  border: 1px solid var(--color-gris-claro);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
}

/* Bandera circular SOLO en usuarios */
.usuarios-wrapper .choices__list--dropdown .fi,
.usuarios-wrapper .choices__item .fi {
  background-size: cover;
  background-position: center;
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Grupo de código país + número (teléfono) */
.usuarios-wrapper .grupo-telefono {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.usuarios-wrapper .grupo-telefono .choices {
  width: 35%;
  margin-bottom: 0;
}

.usuarios-wrapper .grupo-telefono input[type="text"] {
  width: 65%;
  margin-bottom: 0;
}

/* ===============================
   Ajustes visuales para filtros de catálogo público
==================================*/

.catalogo-publico-wrapper .choices {
  height: 30px;
  border-radius: var(--radio-bordes);
  border: 1px solid var(--color-input-border);
  background-color: var(--color-blanco-puro);
  color: var(--color-primario);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0; /* igual al botón reset */
}

.catalogo-publico-wrapper .choices__inner {
  border: none;
  background-color: transparent;
  padding: 0 10px !important;
  font-weight: 500;
  color: var(--color-primario);
  height: 36px;
}

.catalogo-publico-wrapper .choices__item.choices__item--selectable {
  transform: none;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.catalogo-publico-wrapper .choices__list--single {
  padding: 0;
}

/* Dropdown visual en catálogo */
.catalogo-publico-wrapper .choices__list--dropdown {
  font-size: 12px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radio-bordes);
  padding: 6px 0;
}

.catalogo-subfiltros .filtro-icono {
  display: flex;
  align-items: rigt;
  gap: 6px;
  border-radius: var(--radio-bordes);
  border: 1px solid var(--color-input-border);
  background-color: var(--color-blanco-puro);
  padding: 0 10px;
  color: var(--color-primario);
  font-size: 13px;
  flex-shrink: 0;
}

.catalogo-subfiltros .filtro-icono i.icono-filtro-select {
  font-size: 14px;
  color: var(--color-primario);
}

.catalogo-subfiltros .filtro-icono .choices {
  border: none;
  margin-bottom: 0;
  background-color: transparent;
  padding: 0;
}

/* ============================================
   CHOICES.js personalizado para selector múltiple de colores
============================================ */

/* Ocultar el input de búsqueda */
#color.choices__input {
  display: none !important;
}

/* Contenedor interior del select */
.choices[data-type*="select-multiple"] .choices__inner {
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--color-gris-claro);
  border-radius: var(--radio-bordes);
  background-color: var(--color-blanco-puro);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Espaciado entre etiquetas */
  box-sizing: border-box;
  outline: none !important;
  box-shadow: none !important;
}

/* Estilo de cada etiqueta de color seleccionada */
.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item {
  background-color: var(--color-secundario);
  /* color: white; */
  padding: 8px 16px;
  /* border-radius: 6px; */
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-width: 90px;
  display: inline-flex;
  border: none;
  /* outline: none !important; */
  /* gap: 6px; */
}

/* Mostrar la X y centrarla */
.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item .choices__button {
  /* display: inline-block; */
  /* background: transparent; */
  /* border: none; */
  /* font-size: 16px; */
  /* line-height: 1; */
  /* margin-left: 6px; */
  /* color: white; */
  /* cursor: pointer; */
  /* padding: 0; */
  /* outline: none; */
}

.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item .choices__button:focus {
  outline: none;
}

/* Evita borde azul */
.choices[data-type*="select-multiple"].is-focused .choices__inner {
  border-color: var(--color-gris-claro);
  box-shadow: none;
}

/* Oculta placeholder */
.choices__placeholder {
  display: none !important;
}

/* Oculta el input de texto de Choices para múltiples */
.choices[data-type*="select-multiple"] .choices__input {
  display: none !important;
}

/* Caja principal del select múltiple */
.choices[data-type*="select-multiple"] .choices__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--color-gris-claro);
  border-radius: var(--radio-bordes);
  background-color: var(--color-blanco-puro);
  font-size: 14px;
  font-family: var(--fuente-principal);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  outline: none !important;
  box-shadow: none !important;
}

/* Estilo de cada color seleccionado */
.choices__list--multiple .choices__item {
  /* background-color: var(--color-secundario); */
  /* color: white; */
  /* padding: 6px 12px; */
  border-radius: 4px;
  /* font-size: 13px; */
  /* font-weight: 500; */
  /* display: inline-flex; */
  /* align-items: center; */
  /* justify-content: center; */
  gap: 6px;
  /* min-width: auto; */
  /* border: none; */
}

/* Botón X (visible y estilizado) */
.choices__list--multiple .choices__item .choices__button {
  /* display: inline-block; */
  /* font-size: 14px; */
  /* background: transparent; */
  border: none;
  /* color: white; */
  cursor: pointer;
  margin-left: 6px;
  line-height: 1;
}

/* Elimina el texto 'Selecciona colores' */
.choices__placeholder {
  display: none !important;
}

/* Elimina cualquier efecto de focus feo */
.choices.is-focused .choices__inner {
  border-color: var(--color-gris-claro);
  box-shadow: none;
}