.formulario-comun {
    max-width: 100%; /* Para asegurarse de que el formulario no supere el ancho del contenedor */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    overflow: hidden; /* Asegura que no haya elementos que sobresalgan */

    padding-top: 25px;

}

.formulario-comun .grupo {
    width: 100%;
    position: relative;
    margin-bottom: 30px; /* Añadir un margen para una separación más estética */
    box-sizing: border-box; /* Para que el padding no haga que el input se salga del contenedor */
}
.formulario-comun .grupo:last-of-type {
  margin-bottom: 0;
}


.formulario-comun .grupo input {
    font-size: 18px;
    padding: 10px;
    background: none;
    display: block;
    width: 100%;
    border: 2.5px solid var(--color-secundario);
    border-radius: 13px;
    outline: none;
    padding-left: 10px;
    box-sizing: border-box;
}
.formulario-comun .grupo select {
    font-size: 18px;
    padding: 10px;
    width: 100%; /* ✅ Esta línea es clave */
    background-color: transparent;
    border: 2.5px solid var(--color-secundario);
    border-radius: 13px;
    outline: none;
    box-sizing: border-box;
    

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: none;
}

.formulario-comun .grupo label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px; /* Tamaño por defecto */
    transition: 0.2s ease-in-out all;
    pointer-events: none;
    color: var(--color-secundario);
}

/* Animación del label cuando hay contenido o foco */

.formulario-comun .grupo input:focus ~ label,
.formulario-comun .grupo input.not-empty ~ label,
.formulario-comun .grupo select:focus ~ label,
.formulario-comun .grupo select.not-empty ~ label,
.formulario-comun .grupo textarea:focus ~ label,
.formulario-comun .grupo textarea.not-empty ~ label {
  top: -21px;
  font-size: 14px;
}

















.grupo-doble:last-of-type {
  margin-bottom: 0;
}

.grupo-doble {
  display: flex;
  gap: 10px; /* Espacio entre los campos */
  margin-bottom: 30px; /* Separación del botón */
}

.grupo-doble .grupo.mitad {
  width: 50%;
  margin-bottom: 0; /* Ya se gestiona en el padre */
}






/*EJEMPLO -METODO DE PAGO- SELECCIONAR METODO*/
.btn-seleccionar-metodo {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease;
  border: 3px solid transparent;
}

.btn-seleccionar-metodo[data-seleccionado="true"] {
  opacity: 1;
  transform: scale(1.05);
  border-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.btn-seleccionar-metodo:not([data-seleccionado="true"]) {
  opacity: 0.6;
  transform: scale(0.98);
}





/*SELECCION IMAGEN */
.grupo-icono-limpio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Ocultar el input real */
.input-icono-limpio {
  display: none;
}

/* Botón visual personalizado */
.btn-subir-icono {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #f0f0f0;
  color: #333;
  font-weight: 600;
  border: 2px solid #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
}

.btn-subir-icono:hover {
  background-color: #e5e5e5;
  border-color: #888;
}

.nota-icono {
  font-size: 14px;
  color: #666;
  margin: 0;
}










/*COLORES*/


.contenedor-paleta-flex {
  position: relative;
  width: 260px;
  height: 80px;
  margin: 1.5rem auto 0;
}

.cuadro-color {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.color-principal {
  background-color: var(--color-primario);;
  z-index: 2;
  opacity: 1; /* Siempre visible */
}

.color-oscuro {
  background-color: #1e40af;
  z-index: 1;
}

.color-claro {
  background-color: #f4faff;
  z-index: 1;
}

/* Cuando se activa la animación */
.contenedor-paleta-flex.mostrar-paleta .color-oscuro {
  transform: translateX(-130%);
  opacity: 1;
}

.contenedor-paleta-flex.mostrar-paleta .color-claro {
  transform: translateX(30%);
  opacity: 1;
}

.input-color-oculto {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}












/* Botones de opción genéricos */
.btn-opcion {
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  background-color: var(--color-primario);
  color: var(--color-secundario);
  opacity: 0.7; /* 🔸 Atenuado por defecto */
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

.btn-opcion strong {
  font-size: 1.1rem;
}

.btn-opcion span {
  display: inline-block;
  margin-top: 0.25rem;
}

/* Contenedor genérico de opciones */
.contenedor-opciones {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Estado activo del botón */
.btn-opcion.activo {
  color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  opacity: 1; /* 🔹 Totalmente visible */
  transform: scale(1.04); /* 🔹 Ligeramente más grande */
  z-index: 1; /* 🔹 Por si hay solapamiento */
}








/* Solo aplica el tema cuando venga de cliente-alta y el tema esté activo */
.contenedor-modal[data-boton-original-tipo="cliente-alta"][data-tema-activo="true"] {
  --color-primario: var(--modal-primario);   /* sin fallback autorreferente */
  --color-secundario: var(--modal-secundario);
  --color-acento: var(--modal-acento);
}