/**
 * RedFranquicias - Componente unificado de desplegables (rf-usel)
 * Estilo corporativo basado en el selector de provincias del formulario de ficha.
 */

.rf-usel {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* El select nativo se mantiene para formularios y validación, oculto visualmente */
.rf-usel .rf-usel-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

/* Botón principal */
.rf-usel-toggle {
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-left: 3px solid var(--rf-usel-accent, #CBD5E1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-size: 0.85rem;
  color: #0F1A4F;
}

.rf-usel-toggle:focus,
.rf-usel-toggle[aria-expanded="true"] {
  border-color: #2E7BAE;
  border-left-color: var(--rf-usel-accent, #2E7BAE);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(46, 123, 174, 0.15);
  outline: none;
}

.rf-usel-toggle.is-invalid {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  animation: rfUselShake 0.4s ease;
}

@keyframes rfUselShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.rf-usel-display {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 500;
}

.rf-usel-display.has-value {
  color: #0F1A4F;
  font-weight: 600;
}

.rf-usel-arrow {
  color: #64748B;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.rf-usel-toggle[aria-expanded="true"] .rf-usel-arrow {
  transform: rotate(180deg);
}

/* Panel desplegable */
.rf-usel-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 26, 79, 0.18);
  z-index: 1300;
  padding: 8px;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
}

.rf-usel.is-open .rf-usel-panel {
  display: flex;
  animation: rfUselFade 0.16s ease;
}

@keyframes rfUselFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.rf-usel-search-wrap {
  margin-bottom: 6px;
}

.rf-usel-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: 0.82rem;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  background: #F8FAFC;
  color: #0F1A4F;
  box-sizing: border-box;
  outline: none;
}

.rf-usel-search:focus {
  border-color: #2E7BAE;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(46, 123, 174, 0.12);
}

.rf-usel-list {
  overflow-y: auto;
  max-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rf-usel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 0.84rem;
  font-weight: 550;
  color: #0F1A4F;
  text-align: left;
  box-sizing: border-box;
  font-family: inherit;
}

.rf-usel-item:hover,
.rf-usel-item:focus {
  background: #EEF3FB;
  color: #0F1A4F;
  outline: none;
}

.rf-usel-item.is-selected {
  background: #E3EDF9;
  color: #0F1A4F;
}

.rf-usel-item .rf-usel-item-name {
  color: inherit;
}

.rf-usel-item input[type="checkbox"] {
  accent-color: #0F1A4F;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.rf-usel-item-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.rf-usel-item-meta {
  color: #64748B;
  font-size: 0.74rem;
  flex-shrink: 0;
}

.rf-usel-empty,
.rf-usel-loading {
  padding: 12px 8px;
  text-align: center;
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Modo bloque (pantalla completa del contenedor) */
.rf-usel--block {
  display: block;
}

/* Campos compactos dentro del CRM */
.rf-usel--compact .rf-usel-toggle {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .rf-usel-panel {
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
  .rf-usel-list {
    max-height: 200px;
  }
}

/* Integración con formularios del tema: hereda el ancho del contenedor */
.rf-form-group .rf-usel,
.rf-form-field .rf-usel,
.rf-portal-form-group .rf-usel {
  width: 100%;
}

/* El select nativo oculto no debe reservar espacio en layouts flex/grid */
.rf-usel > .rf-usel-native {
  position: absolute !important;
}