/**
 * Pantalla pública del turnero.
 *
 * Todo cuelga de .bt y todo color sale de una variable: el plugin es de Búho
 * y se reusa en otros clientes, así que la piel se cambia redefiniendo el
 * bloque de variables desde el tema, sin tocar este archivo.
 *
 * Los valores de abajo son la identidad de Zafyro.
 */

.bt {
	--bt-fondo:   #EDE5DA;
	--bt-panel:   #ffffff;
	--bt-tinta:   #16224D;
	--bt-tenue:   rgba(22,34,77,.6);
	--bt-linea:   rgba(22,34,77,.14);
	--bt-acento:  #1F3A93;
	--bt-oro:     #C9A227;
	--bt-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
	--bt-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	max-width: 980px;
	margin: 0 auto;
	padding: 34px 22px 44px;
	background: var(--bt-fondo);
	border-radius: 20px;
	color: var(--bt-tinta);
	font-family: var(--bt-sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.bt *,
.bt *::before,
.bt *::after { box-sizing: border-box; }

/* El atributo hidden lo pisa cualquier regla que declare un display, y acá
   hay varias (flex, grid). Sin esto, esconder algo desde el JS no hace nada:
   los chips de paso seguian a la vista en el modo fila. */
.bt [hidden] { display: none !important; }

/* Los temas suelen meter font-weight propio en los botones.
   Ojo con lo que se pone aca: ".bt button" es clase + tipo y le gana a
   cualquier ".bt-loquesea" de una sola clase. El color y la alineacion van
   en cada componente, no aca, o terminan pisados al reves. */
.bt button {
	font: inherit;
	cursor: pointer;
}

.bt h2, .bt h3, .bt h4 {
	font-family: var(--bt-serif);
	font-weight: 400;
	margin: 0;
	line-height: 1.15;
}

/* .bt .bt-tit y no .bt-tit: el reset de arriba es ".bt h2", que tiene una
   clase y un tipo, y le gana a una clase sola. Escrito corto, el margen del
   titulo se perdia y la bajada se le montaba encima. */
.bt .bt-tit { font-size: 30px; margin-bottom: 22px; }
/* El aire lo pone el titulo. Cuando hay bajada, sube y se pega al titulo:
   asi el mismo titulo sirve con bajada y sin ella, sin reglas por paso. */
.bt .bt-sub { font-size: 13.5px; color: var(--bt-tenue); margin: -16px 0 22px; }

/* ---------- pasos ---------- */
.bt-pasos {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	flex-wrap: wrap;
}
.bt-pasos li {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bt-tenue);
	border: 1px solid var(--bt-linea);
	border-radius: 999px;
	padding: 7px 14px;
	background: transparent;
}
.bt-pasos li.on    { background: var(--bt-tinta); border-color: var(--bt-tinta); color: #fff; }
.bt-pasos li.hecho { border-color: var(--bt-acento); color: var(--bt-acento); }

/* Solo se ve el paso activo. */
.bt-paso { display: none; }
.bt-paso.on { display: block; animation: bt-entra .28s ease both; }

@keyframes bt-entra {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bt-paso.on { animation: none; }
}

.bt-volver {
	background: none;
	border: none;
	padding: 8px 0;
	margin-bottom: 8px;
	font-size: 12.5px;
	color: var(--bt-tenue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bt-volver:hover { color: var(--bt-acento); }

/* ---------- paso 0: por dónde empezar ---------- */
.bt-vias { display: grid; gap: 10px; }

.bt-via {
	display: grid;
	gap: 4px;
	width: 100%;
	min-height: 78px;
	padding: 20px 22px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 15px;
	color: var(--bt-tinta);
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
}
.bt-via:hover {
	border-color: var(--bt-acento);
	box-shadow: 0 6px 20px rgba(22,34,77,.08);
}
.bt-via-n { font-family: var(--bt-serif); font-size: 21px; }
.bt-via-d { font-size: 13px; color: var(--bt-tenue); }

/* ---------- el equipo ---------- */
.bt-staff { display: grid; gap: 8px; }

.bt-persona {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 72px;
	padding: 13px 18px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 14px;
	color: var(--bt-tinta);
	text-align: left;
	transition: border-color .15s;
}
.bt-persona:hover { border-color: var(--bt-acento); }
.bt-persona.on { border-color: var(--bt-acento); box-shadow: inset 0 0 0 1px var(--bt-acento); }

/* El círculo con la inicial. Cuando haya fotos, se reemplaza el fondo por
   la imagen y el resto de la fila no se toca. */
.bt-avatar {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--bt-acento);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--bt-serif);
	font-size: 21px;
	line-height: 1;
	background-size: cover;
	background-position: center;
}
.bt-persona-txt { display: grid; gap: 2px; min-width: 0; }
.bt-persona-txt .n { font-size: 16px; font-weight: 600; }
.bt-persona-txt .d {
	font-size: 12.5px;
	color: var(--bt-tenue);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- paso 1: áreas plegables ---------- */
.bt-areas { display: grid; gap: 8px; }
.bt-area  { background: var(--bt-panel); border: 1px solid var(--bt-linea); border-radius: 14px; }
.bt-area.abierta { border-color: rgba(31,58,147,.35); }

.bt-area-cab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 62px;
	padding: 16px 20px;
	color: var(--bt-tinta);
	text-align: left;
}
.bt-area-n {
	flex: 1;
	font-family: var(--bt-serif);
	font-size: 20px;
	line-height: 1.1;
}
.bt-area-c {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--bt-tenue);
	background: rgba(22,34,77,.06);
	border-radius: 999px;
	padding: 3px 10px;
}
/* La flecha, dibujada con bordes: un carácter tipográfico se ve distinto en
   cada sistema y a veces ni existe. */
.bt-area-f {
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--bt-acento);
	border-bottom: 2px solid var(--bt-acento);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s;
}
.bt-area.abierta .bt-area-f { transform: rotate(-135deg) translate(-3px, -3px); }

.bt-area-cuerpo { padding: 0 10px 10px; }

/* ---------- la card de servicio ---------- */
.bt-serv {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	/* 44px es el mínimo tocable; con este padding la card queda en 60. */
	min-height: 60px;
	padding: 13px 14px;
	background: transparent;
	border: none;
	border-radius: 11px;
	color: var(--bt-tinta);
	text-align: left;
	transition: background .12s;
}
.bt-serv + .bt-serv { border-top: 1px solid var(--bt-linea); border-radius: 0; }
.bt-serv:hover { background: rgba(31,58,147,.05); }
.bt-serv.on    { background: var(--bt-acento); color: #fff; }

.bt-serv-txt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.bt-serv .n  { font-size: 15.5px; font-weight: 600; }
.bt-serv .d  { font-size: 12.5px; color: var(--bt-tenue); }
.bt-serv .p  {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--bt-acento);
	text-align: right;
	white-space: nowrap;
}
.bt-serv.on .d,
.bt-serv.on .p { color: #fff; }

.bt-sin-area { font-size: 13.5px; color: var(--bt-tenue); padding: 14px 0; margin: 0; }

/* ---------- adicionales ---------- */
.bt-extras {
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 14px;
	padding: 20px;
	margin-top: 4px;
}
.bt-extras h3 { font-size: 20px; margin-bottom: 12px; }
.bt-extras-lista { display: grid; gap: 8px; margin-bottom: 18px; }

.bt-extra {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--bt-linea);
	border-radius: 11px;
	cursor: pointer;
}
.bt-extra:has(input:checked) { border-color: var(--bt-acento); background: rgba(31,58,147,.05); }
.bt-extra input { width: 18px; height: 18px; accent-color: var(--bt-acento); margin: 0; }
.bt-extra span  { font-size: 14.5px; font-weight: 600; }
.bt-extra em    { font-size: 12px; color: var(--bt-tenue); font-style: normal; white-space: nowrap; }

/* ---------- botón ---------- */
.bt-btn {
	display: inline-block;
	appearance: none;
	width: 100%;
	min-height: 52px;
	background: var(--bt-acento);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 15px 24px;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	/* .bt-btn tambien se usa en un <a>, y el tema le mete subrayado. */
	text-decoration: none;
}
.bt-btn:hover    { background: var(--bt-tinta); color: #fff; text-decoration: none; }
.bt-btn:disabled { opacity: .55; cursor: default; }

/* ---------- paso 2: días y horas ---------- */
.bt-dias {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 14px;
	/* Que el día elegido no quede cortado al costado al hacer scroll. */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.bt-dias::-webkit-scrollbar { height: 5px; }
.bt-dias::-webkit-scrollbar-thumb { background: var(--bt-linea); border-radius: 9px; }

.bt-dia {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 62px;
	min-height: 76px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 13px;
	padding: 10px 4px;
	text-align: center;
}
.bt-dia small    { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bt-tenue); }
.bt-dia b        { font-family: var(--bt-serif); font-size: 23px; font-weight: 400; }
.bt-dia .mes     { font-size: 9.5px; }
.bt-dia.on       { background: var(--bt-tinta); border-color: var(--bt-tinta); color: #fff; }
.bt-dia.on small { color: rgba(255,255,255,.72); }

.bt-horas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
	margin-top: 16px;
}
.bt-hora {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 11px;
	font-size: 15.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.bt-hora:hover { border-color: var(--bt-acento); color: var(--bt-acento); }
.bt-hora.on    { background: var(--bt-acento); border-color: var(--bt-acento); color: #fff; }

.bt-cargando, .bt-vacio {
	grid-column: 1 / -1;
	font-size: 13.5px;
	color: var(--bt-tenue);
	padding: 18px 0;
	margin: 0;
}

/* ---------- paso 3: datos ---------- */
.bt-form { display: grid; gap: 16px; max-width: 520px; }
.bt-form label {
	display: block;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bt-tenue);
}
.bt-form .op { text-transform: none; letter-spacing: 0; font-weight: 400; }

.bt-form input,
.bt-form textarea {
	display: block;
	width: 100%;
	min-height: 50px;
	margin-top: 7px;
	padding: 13px 15px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 11px;
	font-family: var(--bt-sans);
	/* 16px a propósito: abajo de eso iOS hace zoom al enfocar el campo y
	   deja la pantalla corrida. */
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bt-tinta);
}
.bt-form textarea { min-height: 76px; resize: vertical; }
.bt-form input:focus,
.bt-form textarea:focus { outline: 2px solid var(--bt-acento); outline-offset: 1px; border-color: transparent; }

.bt-form small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bt-tenue);
}

.bt-resumen {
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 14px;
	padding: 18px 20px;
}
.bt-resumen h4 { font-size: 21px; margin-bottom: 12px; }

.bt-linea {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--bt-linea);
	font-size: 14px;
}
.bt-linea:last-child { border-bottom: none; }
.bt-linea span:last-child { color: var(--bt-tenue); white-space: nowrap; }

.bt-aviso {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bt-tenue);
	border-left: 2px solid var(--bt-oro);
	padding-left: 12px;
}

.bt-error {
	margin: 0;
	padding: 13px 16px;
	background: #FBE9E7;
	border: 1px solid #E0A99F;
	border-radius: 11px;
	color: #7A2E20;
	font-size: 14px;
}

/* ---------- confirmado ---------- */
.bt-ok { text-align: center; padding: 20px 0 8px; }
.bt-tilde {
	width: 62px;
	height: 62px;
	margin: 0 auto 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bt-acento);
	color: #fff;
	font-size: 30px;
	line-height: 1;
}
.bt-ok h2 { font-size: 34px; margin-bottom: 6px; }
.bt-cuando {
	font-size: 15px;
	color: var(--bt-acento);
	font-weight: 700;
	margin: 0 0 22px;
}
.bt-detalle {
	max-width: 440px;
	margin: 0 auto;
	text-align: left;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 14px;
	padding: 6px 20px;
}
.bt-nota {
	max-width: 440px;
	margin: 20px auto 0;
	font-size: 13px;
	color: var(--bt-tenue);
	line-height: 1.6;
}
.bt-nota a { color: var(--bt-acento); font-weight: 700; }

/* ---------- mobile ---------- */
@media (max-width: 600px) {
	.bt          { padding: 24px 16px 34px; border-radius: 0; }
	.bt .bt-tit  { font-size: 25px; }
	.bt-ok h2    { font-size: 28px; }
	.bt-pasos li { font-size: 10px; padding: 6px 11px; }
	.bt-horas    { grid-template-columns: repeat(3, 1fr); }
	.bt-area-n   { font-size: 18px; }
	.bt-via-n    { font-size: 19px; }
	/* El carrusel de días llega al borde de la pantalla, así se nota que
	   sigue hacia la derecha. */
	.bt-dias     { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}

/* ---------- elegir con quién (modo "elegir") ---------- */
.bt-equipo { display: grid; gap: 8px; }

.bt-quien-btn {
	display: grid;
	gap: 2px;
	width: 100%;
	min-height: 64px;
	padding: 15px 18px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 13px;
	color: var(--bt-tinta);
	text-align: left;
	transition: border-color .15s;
}
.bt-quien-btn:hover { border-color: rgba(31,58,147,.45); }
.bt-quien-btn .n { font-size: 15.5px; font-weight: 600; }
.bt-quien-btn .d { font-size: 12.5px; color: var(--bt-tenue); }
/* "Me da igual" va destacada: es la que deja repartir la carga. */
.bt-quien-any { background: rgba(31,58,147,.06); border-color: rgba(31,58,147,.3); }

/* ---------- la fila (modo "fila") ---------- */
.bt-fila-estado {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 14px;
}
.bt-fila-num {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bt-acento);
	color: #fff;
	font-family: var(--bt-serif);
	font-size: 26px;
	line-height: 1;
}
.bt-fila-txt { display: grid; gap: 3px; }
.bt-fila-txt strong { font-size: 16px; font-weight: 600; }
.bt-fila-txt span   { font-size: 13px; color: var(--bt-tenue); }

.bt-form-fila { margin-top: 20px; }

@media (max-width: 600px) {
	.bt-fila-estado { gap: 14px; padding: 15px 16px; }
	.bt-fila-num    { width: 50px; height: 50px; font-size: 22px; }
}

/* ---------- falta cargar algo (solo lo ve quien administra) ---------- */
.bt-pasos-falta { display: grid; gap: 8px; }

.bt-falta {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 13px;
	padding: 15px 18px;
}
.bt-falta-tilde {
	flex: 0 0 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--bt-linea);
	color: var(--bt-tenue);
	font-size: 13px;
}
.bt-falta .bt-linea-q b { display: block; font-weight: 600; font-size: 15px; }
.bt-falta .bt-linea-q span { font-size: 12.5px; color: var(--bt-tenue); }

/* Lo ya hecho se ve, pero apagado: sirve para saber por dónde vas. */
.bt-falta-ok { opacity: .5; }
.bt-falta-ok .bt-falta-tilde {
	background: var(--bt-acento);
	border-color: var(--bt-acento);
	color: #fff;
}

.bt-falta-ir {
	flex: 0 0 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	background: var(--bt-acento);
	color: #fff;
	border-radius: 999px;
	padding: 0 22px;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
}
.bt-falta-ir:hover { background: var(--bt-tinta); color: #fff; }

@media (max-width: 600px) {
	.bt-falta { flex-wrap: wrap; }
	.bt-falta-ir { flex: 1 1 100%; justify-content: center; margin-top: 6px; }
}

/* ---------- sumar otro servicio al mismo turno ---------- */
.bt-sumar {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0 0 14px;
	padding: 13px 18px;
	background: transparent;
	border: 1px dashed rgba(31,58,147,.45);
	border-radius: 11px;
	color: var(--bt-acento);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}
.bt-sumar:hover { background: rgba(31,58,147,.05); border-style: solid; }

.bt-sumados:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.bt-chip-serv {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(31,58,147,.08);
	border: 1px solid rgba(31,58,147,.25);
	border-radius: 999px;
	padding: 6px 6px 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bt-acento);
}
.bt-chip-serv button {
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: rgba(31,58,147,.15);
	color: var(--bt-acento);
	font-size: 15px;
	line-height: 1;
	display: grid;
	place-items: center;
	padding: 0;
}
.bt-chip-serv button:hover { background: var(--bt-acento); color: #fff; }

/* Lo que no se puede combinar con lo ya elegido. No se esconde: que se vea
   que existe, y que no se puede junto, es más claro que hacerlo desaparecer. */
.bt-serv-no {
	opacity: .35;
	cursor: not-allowed;
}
.bt-serv-no:hover { background: transparent; }

.bt-serv-ya { opacity: .45; cursor: default; }
.bt-serv-ya:hover { background: transparent; }
.bt-serv-ya .n::after {
	content: ' · ya elegido';
	font-weight: 400;
	font-size: 12px;
	color: var(--bt-tenue);
}

.bt-area-no { opacity: .5; }

/* ---------- cómo armamos la visita (varios servicios) ---------- */
.bt-combis { display: grid; gap: 10px; }

.bt-combi {
	display: grid;
	gap: 8px;
	width: 100%;
	padding: 18px 20px;
	background: var(--bt-panel);
	border: 1px solid var(--bt-linea);
	border-radius: 15px;
	color: var(--bt-tinta);
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
}
.bt-combi:hover { border-color: var(--bt-acento); box-shadow: 0 6px 20px rgba(22,34,77,.08); }

/* La de una sola persona va destacada: es la que casi todas eligen. */
.bt-combi-uno { border-color: rgba(31,58,147,.35); background: rgba(31,58,147,.04); }

.bt-combi-tit { font-family: var(--bt-serif); font-size: 20px; line-height: 1.15; }

.bt-combi-tramo {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
	padding: 5px 0;
	border-top: 1px solid var(--bt-linea);
}
.bt-combi-tramo .h {
	flex: 0 0 46px;
	font-weight: 700;
	color: var(--bt-acento);
	font-variant-numeric: tabular-nums;
}
.bt-combi-tramo .s { flex: 1; font-weight: 600; min-width: 0; }
.bt-combi-tramo .q { font-size: 12.5px; color: var(--bt-tenue); white-space: nowrap; }

.bt-combi-pie { font-size: 12.5px; color: var(--bt-tenue); }

@media (max-width: 600px) {
	.bt-combi-tramo { flex-wrap: wrap; gap: 4px 10px; }
	.bt-combi-tramo .q { flex: 1 1 100%; padding-left: 56px; }
}