/**
 * Lugares para comer (ver comer.php): estado "Abierto ahora", encabezado de la
 * ficha, "Qué pedir", horarios, panel para reservar o pedir, hoja del celular
 * y visor de la carta. Misma estética que la ficha y los listados.
 *
 * En el celular la letra chica va un punto más grande (bloque del final),
 * como en el resto del plugin.
 */

/* ---------------------------------------------------------------------------
 * Estado: "Abierto · cierra a las 23", "Abre a las 20 · en 20 min", "Cerrado · …"
 * ------------------------------------------------------------------------ */

.areco-estado {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.areco-estado[hidden] {
	display: none;
}

.areco-estado::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a3a8a0;
}

.areco-estado--abierto {
	color: #3d6f33;
}

.areco-estado--abierto::before {
	background: #4f9a43;
}

.areco-estado--pronto {
	color: #a8431f;
}

.areco-estado--pronto::before {
	background: #e86238;
}

.areco-estado--cerrado {
	color: #5d6359;
	font-weight: 500;
}

.areco-estado--pildora {
	padding: 7px 14px;
	border-radius: 999px;
	background: #f0f1ee;
}

.areco-estado--pildora.areco-estado--abierto {
	background: #eef3ea;
}

.areco-estado--pildora.areco-estado--pronto {
	background: #fdf0ea;
}

/* En la tarjeta del listado, debajo de la calle. */
.areco-tarjeta .areco-tarjeta__estado {
	margin: -4px 0 0;
	font-size: 14px;
}

/* Filtro "Abierto ahora": el punto verde. */
.areco-chip__punto {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 2px;
	border-radius: 50%;
	background: #4f9a43;
}

/* ---------------------------------------------------------------------------
 * Ficha: debajo del lugar, estado, modo y "Ver la carta"
 * ------------------------------------------------------------------------ */

.areco-comer-encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #eef0ec;
}

.areco-comer-encabezado a.areco-comer-encabezado__horarios {
	color: #3d6133;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.areco-comer-encabezado__modo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	background: #eef3ea;
	color: #3d6133;
	font-size: 14px;
	font-weight: 500;
}

.areco-comer-encabezado__modo--solo_reserva {
	background: #fdf0ea;
	color: #a8431f;
}

.areco-comer-encabezado__modo--sin_reservas {
	background: #f0f1ee;
	color: #5d6359;
}

.areco-comer-encabezado__modo .areco-icono {
	width: 16px;
	height: 16px;
}

.areco-ficha .areco-comer-encabezado__carta,
.areco-ficha button.areco-comer-encabezado__carta:hover,
.areco-ficha button.areco-comer-encabezado__carta:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	margin: 0 0 0 auto;
	padding: 0 18px;
	border: 1.5px solid #4f7a43;
	border-radius: 999px;
	background: #fff;
	color: #3d6133;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.areco-ficha .areco-comer-encabezado__carta:hover {
	background: #eef3ea;
}

.areco-comer-encabezado__carta .areco-icono,
.areco-comer-platos__carta .areco-icono {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------------------
 * Qué pedir
 * ------------------------------------------------------------------------ */

.areco-comer-platos__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.areco-comer-platos__plato {
	margin: 0;
	padding: 0;
}

.areco-comer-platos .areco-comer-platos__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 5px;
	object-fit: cover;
}

.areco-comer-platos .areco-comer-platos__nombre {
	margin: 10px 0 0;
	color: #24301f;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
}

.areco-comer-platos .areco-comer-platos__detalle {
	margin: 2px 0 0;
	color: #6f746c;
	font-size: 13.5px;
}

.areco-comer-platos__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #eef0ec;
}

.areco-comer-platos__lista:empty + .areco-comer-platos__pie,
.areco-ficha__titulo + .areco-comer-platos__pie {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.areco-ficha .areco-comer-platos__carta,
.areco-ficha button.areco-comer-platos__carta:hover,
.areco-ficha button.areco-comer-platos__carta:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: #4f7a43;
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.areco-ficha .areco-comer-platos__carta:hover {
	background: #3d6133;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Horarios
 * ------------------------------------------------------------------------ */

.areco-comer-horarios__tabla {
	margin: 0;
}

.areco-comer-horarios__fila {
	display: grid;
	grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
	gap: 4px 16px;
	padding: 11px 0;
	border-bottom: 1px solid #eef0ec;
	font-size: 15.5px;
}

.areco-comer-horarios__fila[hidden] {
	display: none;
}

.areco-comer-horarios__fila:last-child {
	border-bottom: 0;
}

.areco-comer-horarios__fila dt {
	color: #24301f;
	font-weight: 500;
}

.areco-comer-horarios__fila dd {
	margin: 0;
	color: #535a50;
}

.areco-comer-horarios__fila--hoy dt,
.areco-comer-horarios__fila--hoy dd {
	color: #24301f;
	font-weight: 600;
}

.areco-comer-horarios__fila--hoy .areco-estado {
	margin-left: 12px;
	font-size: 14.5px;
	vertical-align: 1px;
}

.areco-comer-horarios__nota {
	margin: 14px 0 0;
	color: #6f746c;
	font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
 * Panel para reservar o pedir (tarjeta de contacto y hoja del celular)
 * ------------------------------------------------------------------------ */

.areco-contacto [hidden],
.areco-contacto-barra [hidden] {
	display: none !important;
}

.areco-reserva {
	margin-top: 16px;
}

.areco-reserva__grupo + .areco-reserva__grupo {
	margin-top: 16px;
}

.areco-reserva .areco-reserva__rotulo {
	display: block;
	margin: 0 0 8px;
	color: #24301f;
	font-size: 13.5px;
	font-weight: 600;
}

.areco-reserva__opcional {
	color: #6f746c;
	font-weight: 400;
}

.areco-reserva__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.areco-reserva__opciones--turnos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* En la tarjeta de escritorio, los siete días en dos filas parejas. */
.areco-contacto--tarjeta .areco-reserva__opciones--dias {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.areco-contacto--tarjeta .areco-reserva button.areco-reserva__chip--dia {
	min-width: 0;
	padding: 6px 4px;
}

.areco-reserva button.areco-reserva__chip,
.areco-reserva button.areco-reserva__chip:hover,
.areco-reserva button.areco-reserva__chip:focus {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	min-height: 44px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid #d9ddd5;
	border-radius: 10px;
	background: #fff;
	color: #24301f;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

.areco-reserva button.areco-reserva__chip:hover {
	border-color: #4f7a43;
}

.areco-reserva button.areco-reserva__chip:focus-visible {
	outline: 2px solid #4f7a43;
	outline-offset: 2px;
}

.areco-reserva button.areco-reserva__chip.es-elegido {
	border-color: #4f7a43;
	background: #4f7a43;
	color: #fff;
	font-weight: 600;
}

.areco-reserva button.areco-reserva__chip[disabled] {
	border-style: dashed;
	background: #f6f7f4;
	color: #6f746c;
	cursor: not-allowed;
}

.areco-reserva__chip-sub {
	color: #6f746c;
	font-size: 12.5px;
	font-weight: 400;
}

.areco-reserva__chip.es-elegido .areco-reserva__chip-sub {
	color: #fff;
}

.areco-reserva button.areco-reserva__chip--hora {
	min-width: 70px;
	border-radius: 999px;
}

.areco-reserva__personas {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px;
	border: 1px solid #d9ddd5;
	border-radius: 999px;
}

.areco-reserva button.areco-reserva__paso,
.areco-reserva button.areco-reserva__paso:hover,
.areco-reserva button.areco-reserva__paso:focus {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f6f7f4;
	color: #24301f;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.areco-reserva button.areco-reserva__paso[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.areco-reserva__cantidad {
	min-width: 104px;
	color: #24301f;
	font-size: 15.5px;
	font-weight: 600;
	text-align: center;
}

.areco-reserva .areco-reserva__pedido {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #d9ddd5;
	border-radius: 5px;
	color: #24301f;
	font-family: inherit;
	font-size: 15px;
	resize: vertical;
}

.areco-reserva__vista {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 5px;
	background: #f6f7f4;
}

.areco-reserva .areco-reserva__vista-rotulo {
	margin: 0 0 4px;
	color: #6f746c;
	font-size: 12.5px;
	font-weight: 600;
}

.areco-reserva .areco-reserva__mensaje {
	margin: 0;
	color: #24301f;
	font-size: 14.5px;
	line-height: 1.45;
}

.areco-reserva a.areco-reserva__enviar,
.areco-reserva a.areco-reserva__enviar:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 52px;
	margin-top: 16px;
	border-radius: 999px;
	background: #bf4b27;
	box-shadow: 0 4px 14px rgba(232, 98, 56, 0.28);
	color: #fff;
	font-size: 16.5px;
	font-weight: 600;
	text-decoration: none;
}

.areco-reserva a.areco-reserva__enviar:hover {
	background: #a8431f;
	color: #fff;
}

.areco-reserva a.areco-reserva__enviar .areco-icono {
	width: 21px;
	height: 21px;
}

.areco-reserva .areco-reserva__nota {
	margin: 12px 0 0;
	color: #6f746c;
	font-size: 13.5px;
}

/*
 * "Reservar" / "Pedir" de la barra y la banda: es un <button> (abre la hoja),
 * con el mismo aspecto que el WhatsApp principal, que es un enlace.
 */
.areco-contacto button.areco-contacto__boton--reservar,
.areco-contacto button.areco-contacto__boton--reservar:hover,
.areco-contacto button.areco-contacto__boton--reservar:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #bf4b27;
	border-radius: 999px;
	background: #bf4b27;
	box-shadow: 0 4px 14px rgba(232, 98, 56, 0.28);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	cursor: pointer;
}

.areco-contacto button.areco-contacto__boton--reservar:hover {
	border-color: #a8431f;
	background: #a8431f;
}

.areco-contacto button.areco-contacto__boton--reservar .areco-icono {
	width: 19px;
	height: 19px;
}

.areco-contacto--fila > button.areco-contacto__boton--reservar {
	flex: 3 1 auto;
}

.areco-contacto--banda .areco-contacto__botones > button.areco-contacto__boton--reservar {
	flex: 1 1 180px;
}

/* "Cómo llegar" (no toman reservas): el botón principal, en verde. */
.areco-contacto a.areco-contacto__boton.areco-contacto__boton--llegar,
.areco-contacto a.areco-contacto__boton.areco-contacto__boton--llegar:focus {
	border-color: #4f7a43;
	background: #4f7a43;
	color: #fff;
}

.areco-contacto a.areco-contacto__boton.areco-contacto__boton--llegar:hover {
	border-color: #3d6133;
	background: #3d6133;
	color: #fff;
}

.areco-contacto--fila > a.areco-contacto__boton--llegar {
	flex-grow: 3;
}

/* Tarjeta de contacto con panel: teléfono y mail, dos botones debajo. */
.areco-contacto .areco-contacto__botones--dos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.areco-contacto--sin-reservas .areco-estado--pildora {
	margin-top: 14px;
}

/* ---------------------------------------------------------------------------
 * Hoja del celular (y, en escritorio, una ventana centrada)
 * ------------------------------------------------------------------------ */

.areco-reserva-hoja {
	position: fixed;
	inset: auto 0 0 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: 92vh;
	margin: 0;
	padding: 12px 20px 20px;
	overflow: auto;
	border: 0;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: #535a50;
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
}

.areco-reserva-hoja::backdrop {
	background: rgba(20, 26, 18, 0.5);
}

.areco-reserva-hoja__cabeza {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.areco-reserva-hoja .areco-reserva-hoja__titulo {
	margin: 4px 0 0;
	color: #24301f;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

.areco-reserva-hoja .areco-reserva-hoja__lugar {
	margin: 2px 0 0;
	color: #6f746c;
	font-size: 15px;
}

.areco-reserva-hoja button.areco-reserva-hoja__cerrar,
.areco-carta button.areco-carta__cerrar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f6f7f4;
	color: #24301f;
	cursor: pointer;
}

.areco-reserva-hoja .areco-reserva {
	margin-top: 12px;
}

.areco-reserva-hoja .areco-reserva__opciones--dias {
	flex-wrap: nowrap;
	margin: 0 -20px;
	padding: 0 20px 2px;
	overflow-x: auto;
}

.areco-reserva-hoja .areco-reserva__opciones--dias .areco-reserva__chip {
	flex: none;
}

@media (min-width: 768px) {
	.areco-reserva-hoja {
		inset: 0;
		width: min(440px, calc(100% - 32px));
		max-height: 90vh;
		margin: auto;
		border-radius: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * Visor de la carta en fotos
 * ------------------------------------------------------------------------ */

.areco-carta {
	box-sizing: border-box;
	width: min(900px, 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: auto;
	padding: 0;
	border: 0;
	background: #fff;
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.areco-carta::backdrop {
	background: rgba(20, 26, 18, 0.7);
}

.areco-carta__cabeza {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #eef0ec;
	background: #fff;
}

.areco-carta .areco-carta__titulo {
	margin: 0;
	color: #24301f;
	font-size: 18px;
	font-weight: 600;
}

.areco-carta__paginas {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}

.areco-carta .areco-carta__pagina {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Tablet y celular
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.areco-comer-platos__lista {
		display: flex;
		gap: 12px;
		margin: 0 -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.areco-comer-platos__plato {
		flex: 0 0 196px;
		scroll-snap-align: start;
	}

	.areco-ficha .areco-comer-encabezado__carta {
		margin-left: 0;
	}

	.areco-comer-platos__pie .areco-comer-platos__carta {
		justify-content: center;
		width: 100%;
	}

	.areco-comer-horarios__fila {
		grid-template-columns: minmax(0, 1fr);
	}

	.areco-comer-horarios__fila--hoy .areco-estado {
		display: flex;
		margin: 4px 0 0;
	}
}

/* ---------------------------------------------------------------------------
 * Celular: letra un punto más grande (como en el resto del plugin).
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.areco-estado,
	.areco-comer-encabezado a.areco-comer-encabezado__horarios,
	.areco-reserva .areco-reserva__mensaje,
	.areco-comer-horarios__fila--hoy .areco-estado {
		font-size: 15.5px;
	}

	.areco-tarjeta .areco-tarjeta__estado,
	.areco-comer-encabezado__modo,
	.areco-reserva button.areco-reserva__chip,
	.areco-reserva button.areco-reserva__chip:hover,
	.areco-reserva button.areco-reserva__chip:focus {
		font-size: 15px;
	}

	.areco-comer-platos .areco-comer-platos__detalle,
	.areco-comer-horarios__nota,
	.areco-reserva .areco-reserva__rotulo,
	.areco-reserva .areco-reserva__nota {
		font-size: 14.5px;
	}

	.areco-reserva__chip-sub,
	.areco-reserva .areco-reserva__vista-rotulo {
		font-size: 13.5px;
	}

	.areco-comer-platos .areco-comer-platos__nombre,
	.areco-comer-horarios__fila,
	.areco-reserva__cantidad,
	.areco-ficha .areco-comer-encabezado__carta {
		font-size: 16.5px;
	}

	.areco-reserva .areco-reserva__pedido {
		font-size: 16px;
	}
}