#citaprevia-map-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px auto;
    max-width: 1200px;
}

#citaprevia-search {
    flex: 1 1 35%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 🔹 evita doble scroll */
}

#citaprevia-search-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0; /* 🔹 evita que se reduzca */
    background: #fff;
    z-index: 2;
}

#results-list {
    flex: 1; /* 🔹 ocupa el resto del espacio */
    overflow-y: auto; /* 🔹 solo esta parte hace scroll */
    padding: 15px 0px;
    list-style: none;
    margin: 0;
}

#results-list li {
    border-bottom: 1px solid #eee;
    padding: 8px 20px;
    cursor: pointer;
}

#results-list li:hover {
    background: #f5f5f5;
}

#search-input, #filter-marca {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
	height: 40px;
}

#citaprevia-map {
    flex: 1 1 60%;
    height: 600px;
    border: 1px solid #ddd;
    border-radius: 8px;
}


/* CITA */

.citaprevia-form-container {
            /*border: 1px solid #ddd;
            border-radius: 8px;
			box-shadow: 0 3px 8px rgba(0,0,0,0.05);*/
            padding: 20px;
            max-width: 1140px;
            margin: 0px auto;
            background: #fff;
        }
        #citaprevia-form-steps .citaprevia-step { text-align: center; }
        #citaprevia-form-steps select, #citaprevia-form-steps input { width: 100%; padding: 8px; margin: 0px 0 10px 0; }
        #citaprevia-form-steps input[type=checkbox] { width: auto; padding: 8px; margin: 8px 0; }
        #citaprevia-form-steps button { margin: 10px; padding: 8px 16px; }
		
		#citaprevia-form-steps .steptitle{
			display: flex;
    		align-items: center;
			font-weight: bold;
    		width: fit-content;
			gap: 8px;
			color: #000;
		}
		#citaprevia-form-steps .numstep{
			background-color: #00064E;
			width: fit-content;
			font-weight: bold;
			border-radius: 32px;
			padding: 8px 16px;
			font-size: 18px;
			margin: 0;
			z-index: 2;
			color:#fff;
		}
		#citaprevia-form-steps .titlestep{
			border: 1px solid #1e2340;
			border-radius: 0px 30px 30px 0;
			padding: 6px 23px 6px 32px;
			margin-left: -28px;
		}
		#citaprevia-form-steps .titlesteptext{
			margin: 0;
			padding:0;
		}
		#citaprevia-form-steps .content-step{
			margin-top:23px;
			padding-left:46px;
		}
		@media (min-width:767.98px){
			#citaprevia-form-steps .content-step{
			width:30%;
			}
		}
		#citaprevia-form-steps .content-step-makes{
			margin-top:23px;
			padding-left:46px;
			padding-right:46px;
		}
@media (max-width:767.98px){
#citaprevia-form-steps .content-step-makes {
    padding-left: 0px;
    padding-right: 0px;
}
}
		
		/*BARRA INFERIOR*/
		.stepsf{
			justify-content:center;
			gap:0;
			padding: 23px 10%;
			background:#00064E;
			align-items: center;
			color:#fff;
		}
		.contsteps{
			display:flex;
			margin:auto;
			max-width:1140px;
			justify-content: center;
		}
		.stepsnum{
			flex: 1;
			justify-items: center;
		}
		@media (max-width: 1024px){
			.stepsnum{
				display:none;
			}
		}
		.line{
			height: 2px;
			background: grey;
			width: 100%;
			margin-top: 20px;
		}
		.cnum{
			background: grey;
			font-weight: bold;
			border-radius: 32px;
			padding: 8px 16px;
    		font-size: 18px;
			margin-top: -20px;
		}
		.stepsnum p {
			padding:8px 0 0 0;
			margin:0;
			text-align: center;
		}
		.stepsf button{
			background:none;
			border: none;
			color:#FFF;
		}
		.stepsf button:hover{
			transform:scale(1);
			color:#FFF;
			line-height: normal;
			border-color: none;
			background-color: transparent;
			color: #FFF;
			-webkit-transform: scale(1);
		}
		/*.stepsf button:disabled{
			color:grey;
		}*/
		.stepsf .button-next, .stepsf .button-confirm{
			margin-left:23px;
			white-space: nowrap;
		}
		.stepsf .button-prev{
			margin-right:23px;
		}
		
		.progress-container {
			width: 100%;
			height: 3px;
			background: #00064E; /* Fondo de la barra */
			position: relative;
		}

		.linemov {
			background: #0BD0FF;
			height: 100%;
			width: 0%; /* inicial */
			transition: width 0.3s ease;
		}
		
		@media (min-width:1025px){
			.progress-container {
				display:none;
			}
		}
		
/* CHECKBOXES */

/* Cada label con su checkbox */
.citaprevia-step label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  user-select: none;
}

/* Ocultamos el checkbox original */
.citaprevia-step input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 20px;
  border: 1px solid #00064E;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.citaprevia-step input[type="checkbox"].error {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 20px;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto al pasar el ratón */
.citaprevia-step input[type="checkbox"]:hover {
  background-color: rgba(0, 6, 78, 0.1);
}

/* Estado checked */
.citaprevia-step input[type="checkbox"]:checked {
  background-color: #00064E;
  border-color: #00064E;
}

/* Icono de check personalizado */
input[type="checkbox"]:checked::after {
  content: '✓';
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: -2px;
  left: 2px;
}

		/*MARCAS*/
		/*#citaprevia-form-steps #marca-options {
    display: flex;
    flex-wrap: wrap;
}*/
#citaprevia-form-steps #marca-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/*#citaprevia-form-steps .marca-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
	width: 100px;
    height: 100px;
    border: 1px solid #E4E4E4;
    justify-content: center;
}*/
#citaprevia-form-steps .marca-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid #E4E4E4;
    justify-content: center;
	padding: 0 8px;
}
#citaprevia-form-steps .marca-option span{
	width: 100px;
	height: 100px;
	align-content: center;
    text-align: center;
}
#citaprevia-form-steps .marca-option img {
    width: 100px;
	height: 100px;
    object-fit: contain;
}

#citaprevia-form-steps .marca-option input[type="radio"] {
    display: none;
}

/*.marca-option input[type="radio"]:checked + img,
.marca-option input[type="radio"]:checked + span {
    border: 1px solid #00064E;
}*/
#citaprevia-form-steps .marca-option:has(input[type="radio"]:checked) {
  	background: #00064E;
	color:#fff;
	border: 1px solid #00064E;
}
		
#citaprevia-form-steps .marca-option input[type="radio"]:checked + img {
	filter: brightness(0) saturate(100%) invert(1);
}

		/*LOCALES*/
		#citaprevia-form-steps .locales-container {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			/*justify-content: center;*/
			max-height: 450px;
			overflow: auto;
			margin-top:23px;
			padding-left:46px;
			padding-right:46px;
		}

		#citaprevia-form-steps .local-card {
			border: 2px solid #E3E3E3;
			/*border-radius: 8px;*/
			overflow: hidden;
			display: flex;
			align-items: center;
			background: #fff;
			cursor: pointer;
			/*width: 400px;*/
			width: calc(50% - 8px);
			transition: all 0.2s ease;
		}

		#citaprevia-form-steps .local-card:hover {
			border-color: #0BD0FF;
		}

		#citaprevia-form-steps .local-card input[type="radio"] {
			display: none;
		}

		#citaprevia-form-steps .local-card img {
			width: 300px;
			height: 150px;
			object-fit: cover;
		}
		#citaprevia-form-steps .local-info{
			display: flex;
		}
		#citaprevia-form-steps .local-details {
			padding: 10px 10px 10px 23px;
			text-align: left;
			align-content: center;
			width: 50%;
		}
@media (max-width: 768px){
	#citaprevia-form-steps .local-details {
		width: 100%;
	}
}
		#citaprevia-form-steps .local-details p{
			margin:0;
			padding:0
		}
		#citaprevia-form-steps .local-details .det-address{
			margin-bottom:10px;
		}
		#citaprevia-form-steps .local-details strong {
			display: block;
			font-size: 18px;
			margin-bottom: 10px;
		}
		#citaprevia-form-steps .local-card:has(input[type="radio"]:checked) {
			border: 2px solid #00064E;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
		}
		
		@media (max-width:1023.98px){
			#citaprevia-form-steps .local-card {
				 width: 100%;
			}
		}
		@media (max-width:767.98px){
			#citaprevia-form-steps .local-card {
				 width: 100%;
			}
			#citaprevia-form-steps .local-card img {
				width: 100%;
			}
			#citaprevia-form-steps .local-info{
				display: block;
				width: 100%;
			}
		}
/*.local-card input[type="radio"]:checked + .local-info,
.local-card:has(input[type="radio"]:checked) {
    border: 2px solid #00205b;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}*/
		
		#citaprevia-form-steps input[type="text"], #citaprevia-form-steps input[type="email"], #citaprevia-form-steps input[type="url"], #citaprevia-form-steps input[type="password"], #citaprevia-form-steps input[type="search"], #citaprevia-form-steps input[type="number"], #citaprevia-form-steps input[type="tel"], #citaprevia-form-steps input[type="range"], #citaprevia-form-steps input[type="date"], #citaprevia-form-steps input[type="month"], #citaprevia-form-steps input[type="week"], #citaprevia-form-steps input[type="time"], #citaprevia-form-steps input[type="datetime"], #citaprevia-form-steps input[type="datetime-local"], #citaprevia-form-steps input[type="color"], #citaprevia-form-steps textarea, #citaprevia-form-steps select{
			border:none;
			border-bottom: 1px solid #00064E;
		}
		#citaprevia-form-steps input[type="text"]:focus-visible, #citaprevia-form-steps input[type="email"]:focus-visible, #citaprevia-form-steps input[type="url"]:focus-visible, #citaprevia-form-steps input[type="password"]:focus-visible, #citaprevia-form-steps input[type="search"]:focus-visible, #citaprevia-form-steps input[type="number"]:focus-visible, #citaprevia-form-steps input[type="tel"]:focus-visible, #citaprevia-form-steps input[type="range"]:focus-visible, #citaprevia-form-steps input[type="date"]:focus-visible, #citaprevia-form-steps input[type="month"]:focus-visible, #citaprevia-form-steps input[type="week"]:focus-visible, #citaprevia-form-steps input[type="time"]:focus-visible, #citaprevia-form-steps input[type="datetime"]:focus-visible, #citaprevia-form-steps input[type="datetime-local"]:focus-visible, #citaprevia-form-steps input[type="color"]:focus-visible, #citaprevia-form-steps textarea:focus-visible, #citaprevia-form-steps select:focus-visible{
			outline: none;
			border-bottom: 1px solid #00064E;
		}
button:focus{
			outline: none;
			 border-color: transparent !important;
    		background-color: transparent !important;
		}

#citaprevia-form-steps input[type="text"].error, #citaprevia-form-steps input[type="email"].error, #citaprevia-form-steps input[type="url"].error, #citaprevia-form-steps input[type="password"].error, #citaprevia-form-steps input[type="search"].error, #citaprevia-form-steps input[type="number"].error, #citaprevia-form-steps input[type="tel"].error, #citaprevia-form-steps input[type="range"].error, #citaprevia-form-steps input[type="date"].error, #citaprevia-form-steps input[type="month"].error, #citaprevia-form-steps input[type="week"].error, #citaprevia-form-steps input[type="time"].error, #citaprevia-form-steps input[type="datetime"].error, #citaprevia-form-steps input[type="datetime-local"].error, #citaprevia-form-steps input[type="color"].error, #citaprevia-form-steps textarea.error, #citaprevia-form-steps select.error {
  border-bottom: 1px solid #e74c3c;
}


.cnum.cnumactive {
		background: #fff;
		color: #00064E;
		cursor:pointer;
	}
	
	#step-7 .content-step-calendar {
  display: flex;
  gap: 20px;
		margin-top: 23px;
    padding-left: 46px;
    padding-right: 46px;
}

#calendar-container {
  flex: 1;
  max-width: 50%;
}

#hours-container {
  flex: 1;
  max-width: 50%;
  border-left: 1px solid #ccc;
  padding-left: 20px;
	margin-top: 0px;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  margin-top: 10px;
}

.calendar div {
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
}

/* Días sin disponibilidad */
.calendar div.disabled {
  color: #ccc;
  cursor: not-allowed;
  background: #f7f7f7;
}

/* Días disponibles (pero no seleccionados) */
.calendar div.active {
  background-color: #fff;
  border: 2px solid #00064E;
  color: #00064E;
}

/* Hover sobre días activos */
.calendar div.active:hover {
  background-color: #e8ecff;
}

/* Día seleccionado */
.calendar div.active.selected {
  background-color: #00064E;
  color: #fff;
  border-color: #00064E;
}
.calendar-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
	
.calendar-header{
	display:flex;
	align-items: center;
}
.calendar-header h4{
	width:100%;
	text-align:start;
	padding: 0;
}
#citaprevia-form-steps .calendar-header button {
    border-radius: 46px;
    margin: 6px;
    padding: 8px 12px;
    transform: scale(1);
    border-color: #00064E;
    background-color: #FFFFFF;
    color: #00064E;
    line-height: 1;
}
#citaprevia-form-steps .calendar-header button:hover {
    background-color: #00064E;
    color: #FFFFFF;
}
#citaprevia-form-steps .calendar-header button:focus, #citaprevia-form-steps .calendar-header button:focus{
    border-radius: 46px;
    margin: 6px;
    padding: 8px 12px;
    transform: scale(1);
    border-color: #00064E !important;
    background-color: #FFFFFF !important;
    color: #00064E;
    line-height: 1;
}

	/* Contenedor de las horas */
.hours-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  
  /* 👇 Crea tantas columnas de mínimo 100px como quepan */
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
}

/* Ocultar el radio real */
.hours-list input[type="radio"] {
  display: none;
}

/* Estilo visual del "botón" */
.hours-list label {
  background-color: #fff;
  border: 2px solid #ccc;
  color: #00064E; /* azul oscuro */
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  user-select: none;
	/*min-width: 88px;*/
    text-align: center;
	
	flex: 1 1 calc(25% - 10px); /* 4 por fila, ajusta el número según prefieras */
  box-sizing: border-box;
}

/* Hover */
.hours-list label:hover {
  border-color: #00064E;
  color: #00064E;
}

/* Estado seleccionado (cuando el radio está checked) */
.hours-list input[type="radio"]:checked + label {
  background-color: #00064E;
  border-color: #00064E;
  color: #fff;
}

/* Opcional: efecto "pulsado" */
.hours-list label:active {
  transform: scale(0.97);
}
	
@media(max-width:991.98px){
#step-7 .content-step-calendar {
    display: block;
    margin-top: 23px;
    padding-left: 0px;
    padding-right: 0px;
}
#calendar-container {
    max-width: 100%;
}
#hours-container {
    max-width: 100%;
    border-left: none;
    padding-left: 0px;
    margin-top: 23px;
}
#calendar-container .calendar strong{
	font-size:14px;
}
}