/* Alma Reservas · sitio público
   Colores de la represa + franja de zócalos. Todo con prefijo .alma- para no chocar con el tema. */
:root {
	--alma-lago: #0f3b3c;
	--alma-lago-2: #1d5f5f;
	--alma-lago-oscuro: #0b2c2d;
	--alma-niebla: #f3f6f4;
	--alma-linea: #dfe7e3;
	--alma-tinta: #142221;
	--alma-gris: #4d5f5c;
	--alma-morado: #6a3d8f;
	--alma-amarillo: #f2a93b;
	--alma-rojo: #b23a32;
	--alma-wa: #25a85a;
	--alma-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--alma-texto: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--alma-radio: 18px;
}

.alma-sitio [hidden] { display: none !important; }

/* ---------- Botones ---------- */
.alma-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer;
	font: 700 16px/1.2 var(--alma-texto); text-decoration: none !important;
	transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.alma-btn:hover { transform: translateY(-1px); }
.alma-btn:focus-visible, .alma-icono-btn:focus-visible, .alma-carrito-btn:focus-visible { outline: 3px solid var(--alma-amarillo); outline-offset: 2px; }
.alma-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.alma-btn--lago { background: var(--alma-lago); color: #fff !important; }
.alma-btn--lago:hover { background: var(--alma-lago-2); }
.alma-btn--wa { background: var(--alma-wa); color: #fff !important; }
.alma-btn--borde { background: #fff; color: var(--alma-lago) !important; border: 1.5px solid var(--alma-lago); }
.alma-btn--punteado { background: #fff; color: var(--alma-lago); border: 1.5px dashed var(--alma-lago); }
.alma-btn--ancho { width: 100%; }
.alma-btn--chico { padding: 10px 16px; font-size: 14px; }

.alma-icono-btn {
	width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--alma-linea);
	background: #fff; color: var(--alma-tinta); display: inline-flex; align-items: center; justify-content: center;
	font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.alma-icono-btn:hover { background: var(--alma-niebla); }

/* ---------- Tarjetas de planes ---------- */
.alma-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; font-family: var(--alma-texto); color: var(--alma-tinta); }
.alma-plan { position: relative; background: #fff; border: 1px solid var(--alma-linea); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.alma-plan--destacado { border: 2px solid var(--alma-lago); }
.alma-plan__sello { position: absolute; top: 16px; left: 16px; background: var(--alma-amarillo); color: var(--alma-lago); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; z-index: 1; }
.alma-plan__img { display: block; width: 100%; height: 240px; object-fit: cover; }
.alma-plan__cuerpo { padding: 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.alma-plan__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--alma-gris); }
.alma-plan__etiqueta { color: var(--alma-morado); text-transform: uppercase; letter-spacing: .1em; }
.alma-plan__titulo { margin: 0 !important; font: 700 30px/1.05 var(--alma-display) !important; letter-spacing: -.02em; color: var(--alma-tinta) !important; }
.alma-plan__incluye { margin: 0 !important; padding: 0 0 0 18px !important; color: var(--alma-gris); font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.alma-plan__pie { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--alma-linea); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alma-precio { display: flex; flex-direction: column; }
.alma-precio s { font-size: 14px; color: var(--alma-rojo); }
.alma-precio strong { font: 700 32px/1.1 var(--alma-display); color: var(--alma-morado); }
.alma-precio small { font-size: 14px; color: var(--alma-gris); }
.alma-vacio { color: var(--alma-gris); }

/* ---------- Buscador ---------- */
.alma-buscador { background: #fff; color: var(--alma-tinta); border-radius: 16px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--alma-texto); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.alma-buscador__campo { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 10px; background: var(--alma-niebla); margin: 0; }
.alma-buscador__campo--corto { flex: 0 1 110px; }
.alma-buscador__campo span { font-size: 12px; font-weight: 600; color: var(--alma-gris); text-transform: uppercase; letter-spacing: .08em; }
.alma-buscador__campo select, .alma-buscador__campo input { border: 0 !important; background: transparent !important; font: 600 16px var(--alma-texto); padding: 0 !important; margin: 0; width: 100%; color: var(--alma-tinta); box-shadow: none !important; min-height: 26px; }
.alma-buscador .alma-btn { flex: 1 1 170px; border-radius: 10px; }

/* ---------- Botón del carrito (encabezado) ---------- */
.alma-carrito-btn { display: inline-flex; align-items: center; gap: 8px; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 999px; padding: 9px 14px; font: 600 15px var(--alma-texto); cursor: pointer; opacity: .95; }
.alma-carrito-btn__n { background: var(--alma-amarillo); color: var(--alma-lago); border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 700; }

/* ---------- Capa, modal y cajón ---------- */
.alma-capa { position: fixed; inset: 0; background: rgba(8,30,31,.6); z-index: 99990; }
.alma-modal, .alma-cajon { font-family: var(--alma-texto); color: var(--alma-tinta); font-size: 16px; line-height: 1.5; }
.alma-modal *, .alma-cajon * { box-sizing: border-box; }
.alma-modal {
	position: fixed; z-index: 99995; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
	background: #fff; border-radius: 24px; display: flex; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.alma-modal__plan { width: 360px; flex: none; background: var(--alma-niebla); display: flex; flex-direction: column; }
.alma-modal__plan img { display: block; width: 100%; height: 210px; object-fit: cover; }
.alma-modal__plan-cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.alma-modal__capacidad { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--alma-morado); }
.alma-modal h2 { margin: 0 !important; font: 700 30px/1.05 var(--alma-display) !important; letter-spacing: -.02em; color: var(--alma-tinta) !important; }
.alma-modal__plan ul { margin: 0; padding-left: 18px; color: var(--alma-gris); font-size: 15px; }
.alma-modal__resumen { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed #cfdad5; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.alma-modal__resumen div { display: flex; justify-content: space-between; gap: 10px; }
.alma-modal__resumen dt { color: var(--alma-gris); }
.alma-modal__resumen dd { margin: 0; font-weight: 700; }
.alma-modal__cal { flex: 1; padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.alma-modal__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.alma-modal__cabeza h3 { margin: 0 !important; font: 700 24px/1.1 var(--alma-display) !important; color: var(--alma-tinta) !important; }
.alma-cal-nav { display: flex; align-items: center; justify-content: space-between; }
.alma-cal-nav strong { font-size: 18px; text-transform: capitalize; }
.alma-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
.alma-cal__ds { font-size: 12px; font-weight: 600; color: var(--alma-gris); text-transform: uppercase; padding-bottom: 2px; }
.alma-cal__dia { height: 44px; border-radius: 10px; border: 1px solid #cfdad5; background: #fff; font: 600 15px var(--alma-texto); color: var(--alma-tinta); cursor: pointer; padding: 0; }
.alma-cal__dia:hover:not([disabled]) { border-color: var(--alma-lago); }
.alma-cal__dia[disabled] { cursor: not-allowed; }
.alma-cal__dia--pasado { border-color: transparent; color: #a9b6b2; background: transparent; }
.alma-cal__dia--ocupado { border-color: transparent; background: #f6dcda; color: var(--alma-rojo); text-decoration: line-through; }
.alma-cal__dia--sel { background: var(--alma-lago); border-color: var(--alma-lago); color: #fff; }
.alma-cal__dia--rango { background: #d8e8e4; border-color: #d8e8e4; }
.alma-cal__dia--hoy { box-shadow: inset 0 0 0 2px var(--alma-amarillo); }
.alma-cal__vacio { height: 44px; }
.alma-cal-leyenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--alma-gris); }
.alma-cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.alma-cal-leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.alma-l-sel { background: var(--alma-lago); }
.alma-l-libre { background: #fff; border: 1px solid #cfdad5; }
.alma-l-ocupado { background: #f6dcda; }
.alma-noches { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--alma-niebla); border-radius: 14px; flex-wrap: wrap; }
.alma-noches > span:first-child { font-weight: 600; }
.alma-contador { display: flex; align-items: center; gap: 10px; }
.alma-contador strong { width: 24px; text-align: center; font-size: 18px; }
.alma-noches__total { margin-left: auto; font-size: 14px; color: var(--alma-gris); }
.alma-noches__total strong { font: 700 24px var(--alma-display); color: var(--alma-morado); margin-left: 6px; }

.alma-cajon {
	position: fixed; z-index: 99995; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
	background: #fff; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.3);
}
.alma-cajon__cabeza { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--alma-linea); }
.alma-cajon__cabeza h2 { margin: 0 !important; font: 700 26px var(--alma-display) !important; color: var(--alma-tinta) !important; }
.alma-cajon__cuerpo { flex: 1; overflow: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.alma-cajon__vacio { color: var(--alma-gris); margin: 0; }
.alma-item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--alma-linea); border-radius: 14px; }
.alma-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.alma-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alma-item__txt span { font-size: 14px; color: var(--alma-gris); }
.alma-item__der { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.alma-item__quitar { background: none; border: 0; color: var(--alma-rojo); text-decoration: underline; font-size: 13px; cursor: pointer; padding: 0; }
.alma-datos { display: flex; flex-direction: column; gap: 10px; }
.alma-datos__titulo { font-size: 15px; }
.alma-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.alma-fila > label { flex: 1 1 150px; }
.alma-fila > label.alma-corto { flex: 0 1 100px; }
.alma-datos label, .alma-consultar label, .alma-registro label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--alma-gris); margin: 0; min-width: 0; }
.alma-datos input, .alma-datos select, .alma-datos textarea,
.alma-consultar input, .alma-registro input, .alma-registro select {
	font: 500 16px var(--alma-texto); color: var(--alma-tinta); padding: 11px 12px; border: 1px solid #cfdad5; border-radius: 10px; background: #fff; width: 100%; box-sizing: border-box; margin: 0; min-height: 46px;
}
.alma-datos input:focus, .alma-datos select:focus, .alma-datos textarea:focus, .alma-registro input:focus, .alma-registro select:focus, .alma-consultar input:focus { outline: 2px solid var(--alma-lago); outline-offset: 0; border-color: var(--alma-lago); }
.alma-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; font-size: 14px !important; }
.alma-check input { width: 20px !important; height: 20px; min-height: 0 !important; flex: none; margin-top: 1px !important; accent-color: var(--alma-lago); }
.alma-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.alma-cajon__pie { padding: 18px 24px 24px; border-top: 1px solid var(--alma-linea); background: var(--alma-niebla); display: flex; flex-direction: column; gap: 10px; }
.alma-cajon__total { display: flex; justify-content: space-between; align-items: baseline; }
.alma-cajon__total span { color: var(--alma-gris); }
.alma-cajon__total strong { font: 700 30px var(--alma-display); color: var(--alma-lago); }
.alma-medios { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.alma-medios span { font-size: 12px; font-weight: 600; color: var(--alma-gris); padding: 4px 10px; border: 1px solid #cfdad5; border-radius: 6px; background: #fff; }
.alma-nota { margin: 0; text-align: center; font-size: 13px; color: var(--alma-gris); }
.alma-error { margin: 0; background: #fbe3e1; color: #8f2a24; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.alma-exito { margin: 0; background: #ddf3e6; color: #1e6b40; border-radius: 10px; padding: 10px 12px; font-size: 14px; }

/* ---------- WhatsApp flotante ---------- */
.alma-wa-flotante { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 99980; display: flex; align-items: center; gap: 12px; text-decoration: none !important; font-family: var(--alma-texto); }
.alma-wa-flotante__texto { background: #fff; color: var(--alma-tinta); font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.alma-wa-flotante__boton { position: relative; width: 62px; height: 62px; border-radius: 50%; background: var(--alma-wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.alma-wa-flotante__boton i { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #45e07f; border: 2px solid #fff; }
.alma-wa-flotante:hover .alma-wa-flotante__boton { transform: scale(1.05); }
body.alma-abierto .alma-wa-flotante { display: none; }
body.alma-abierto { overflow: hidden; }

/* ---------- Página "Tu reserva" ---------- */
.alma-estado { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; font-family: var(--alma-texto); color: var(--alma-tinta); margin: 24px 0 40px; }
.alma-estado__principal { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.alma-estado h2 { margin: 0 !important; font: 800 46px/1.02 var(--alma-display) !important; letter-spacing: -.03em; color: var(--alma-tinta) !important; }
.alma-estado__texto { font-size: 18px; color: var(--alma-gris); margin: 0; }
.alma-estado__icono { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 30px var(--alma-display); }
.alma-estado__icono--ok { background: #3bb273; }
.alma-estado__icono--espera { background: var(--alma-amarillo); color: var(--alma-lago); }
.alma-estado__icono--mal { background: var(--alma-rojo); }
.alma-estado__resumen { flex: 0 1 380px; background: #fff; border: 1px solid var(--alma-linea); border-radius: 20px; padding: 24px; }
.alma-estado__resumen h3 { margin: 0 0 12px !important; font: 700 20px var(--alma-display) !important; }
.alma-estado__resumen dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.alma-estado__resumen dl div { display: flex; justify-content: space-between; gap: 12px; }
.alma-estado__resumen dt { color: var(--alma-gris); }
.alma-estado__resumen dd { margin: 0; font-weight: 700; text-align: right; }
.alma-estado__resumen .alma-total { padding-top: 10px; border-top: 1px dashed #cfdad5; }
.alma-estado__resumen .alma-total dd { color: var(--alma-lago); font-size: 20px; }
.alma-aviso { border-radius: 14px; padding: 16px 18px; font-size: 15px; }
.alma-aviso p { margin: 6px 0 0; }
.alma-aviso--amarillo { background: #fff4e0; color: #5a3d0c; }
.alma-cuenta { font-weight: 600; }
.alma-estado--vacio h2 { font-size: 34px !important; margin-bottom: 12px !important; }
.alma-consultar { display: flex; flex-direction: column; gap: 12px; max-width: 460px; font-family: var(--alma-texto); }

/* ---------- Registro de huéspedes ---------- */
.alma-registro { font-family: var(--alma-texto); color: var(--alma-tinta); margin: 20px 0 60px; scroll-margin-top: 100px; }
.alma-registro__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.alma-registro__cabeza h2 { margin: 0 0 6px !important; font: 700 38px/1 var(--alma-display) !important; letter-spacing: -.02em; color: var(--alma-tinta) !important; }
.alma-registro__cabeza p { margin: 0; color: var(--alma-gris); }
.alma-registro__conteo { color: var(--alma-morado); }
.alma-progreso { height: 8px; background: var(--alma-linea); border-radius: 999px; overflow: hidden; margin: 14px 0 18px; }
.alma-progreso span { display: block; height: 100%; background: var(--alma-morado); transition: width .3s ease; }
.alma-registro__cuerpo { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.alma-registro__form { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.alma-registro__lado { flex: 0 1 340px; display: flex; flex-direction: column; gap: 14px; }
.alma-caja { background: #fff; border: 1px solid var(--alma-linea); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.alma-caja h3 { margin: 0 !important; font: 700 19px var(--alma-display) !important; }
.alma-caja p { margin: 0; color: var(--alma-gris); }
.alma-huesped { background: #fff; border: 1px solid var(--alma-linea); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.alma-huesped--menor { border: 2px solid var(--alma-morado); }
.alma-huesped__cabeza { display: flex; align-items: center; gap: 12px; }
.alma-huesped__n { width: 32px; height: 32px; border-radius: 50%; background: var(--alma-lago); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.alma-huesped--menor .alma-huesped__n { background: var(--alma-morado); }
.alma-huesped__quitar { margin-left: auto; background: none; border: 0; color: var(--alma-rojo); text-decoration: underline; cursor: pointer; font-size: 13px; }
.alma-sello-menor { background: #efe6f6; color: var(--alma-morado); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.alma-responsable { background: #f6f1fa; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.alma-responsable strong { font-size: 14px; color: #4a2a66; }
.alma-responsable p { margin: 0; font-size: 13px; color: #4a2a66; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.alma-modal { left: 0; top: auto; bottom: 0; transform: none; width: 100vw; max-height: 92vh; border-radius: 22px 22px 0 0; flex-direction: column; }
	.alma-modal__plan { width: auto; flex-direction: row; }
	.alma-modal__plan img { width: 96px; height: auto; min-height: 96px; }
	.alma-modal__plan ul, .alma-modal__capacidad { display: none; }
	.alma-modal__plan-cuerpo { padding: 14px 16px; gap: 6px; }
	.alma-modal h2 { font-size: 22px !important; }
	.alma-modal__resumen { margin-top: 4px; padding-top: 6px; font-size: 14px; }
	.alma-modal__cal { padding: 16px; gap: 12px; }
	.alma-modal__cabeza h3 { font-size: 19px !important; }
	.alma-cal__dia { height: 40px; }
	.alma-wa-flotante { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.alma-wa-flotante__texto { display: none; }
	.alma-wa-flotante__boton { width: 56px; height: 56px; }
	.alma-estado h2 { font-size: 34px !important; }
	.alma-registro__cabeza h2 { font-size: 30px !important; }
	.alma-carrito-btn__texto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.alma-btn, .alma-progreso span { transition: none; }
}
@media (max-width: 520px) {
	.alma-buscador__campo:first-child { flex-basis: 100%; }
	.alma-buscador .alma-btn { flex-basis: 100%; }
}