/*
 * katfin/manage-booking — "Gestionar mi cita"
 * (diseño docs/diseno/gestionar-cita).
 * El calendario de reprogramar usa las clases de katfin-booking.css.
 */

.katfin-manage {
	--katfin-manage-line: var(--wp--preset--color--gray);
	--katfin-manage-error: var(--wp--custom--color--error);
	box-sizing: content-box;
	max-width: 48rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
}

.katfin-manage [hidden] {
	display: none !important;
}

.katfin-manage button {
	cursor: pointer;
}

.katfin-manage button:not(.wp-element-button) {
	font: inherit;
}

/* ---- Cabecera ---- */

.katfin-manage__header {
	margin-block-end: var(--wp--preset--spacing--50);
	text-align: center;
}

.katfin-manage__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gold-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.katfin-manage__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
}

.katfin-manage__intro {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--gray-dark);
}

.katfin-manage__loading {
	text-align: center;
}

/* ---- Tarjeta ---- */

.katfin-manage__card {
	padding: var(--wp--preset--spacing--50);
	border-radius: 8px;
	background: var(--wp--preset--color--gold-subtle);
}

.katfin-manage__card--message {
	text-align: center;
}

.katfin-manage__card--message p {
	margin: 0;
}

.katfin-manage__card-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: space-between;
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--katfin-manage-line);
}

.katfin-manage__card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.katfin-manage__status {
	margin: 0;
	padding: 0.35rem 0.875rem;
	border: 1px solid var(--katfin-manage-line);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.katfin-manage__status::before {
	margin-inline-end: 0.4em;
	color: var(--wp--preset--color--green);
	content: "✓";
}

.katfin-manage__status.is-cancelled {
	color: var(--katfin-manage-error);
}

.katfin-manage__status.is-cancelled::before {
	color: inherit;
	content: "✕";
}

.katfin-manage__notice {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--white);
}

.katfin-manage__rows {
	margin: 0;
}

.katfin-manage__rows > div {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--katfin-manage-line);
}

.katfin-manage__rows dt {
	flex: none;
	color: var(--wp--preset--color--gray-dark);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.katfin-manage__rows dd {
	margin: 0;
	text-align: end;
}

.katfin-manage__address {
	display: block;
	color: var(--wp--preset--color--gray-dark);
	font-size: var(--wp--preset--font-size--small);
}

.katfin-manage__address a {
	margin-inline-start: 0.4em;
}

.katfin-manage__code {
	color: var(--wp--preset--color--gold-dark);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.katfin-manage__policy {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0.6rem var(--wp--preset--spacing--30);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--gray-dark);
	font-size: var(--wp--preset--font-size--small);
}

.katfin-manage__policy.is-late {
	border-inline-start: 3px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.katfin-manage__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.katfin-manage__cancel,
.katfin-manage__confirm-cancel,
.katfin-manage__back-button {
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--katfin-manage-error);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--katfin-manage-error);
	font-size: var(--wp--preset--font-size--button) !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.katfin-manage__cancel:hover {
	background: var(--katfin-manage-error);
	color: var(--wp--preset--color--white);
}

.katfin-manage__back {
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.katfin-manage .wp-element-button:disabled {
	opacity: 0.5;
}

.katfin-manage__calendar {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.katfin-manage a {
	color: var(--wp--preset--color--gold-dark);
}

/* ---- Reprogramar ---- */

.katfin-manage__resched {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--katfin-manage-line);
}

.katfin-manage__resched-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: none;
}

.katfin-manage__resched .katfin-booking__period {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---- Ayuda ---- */

.katfin-manage__help {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--katfin-manage-line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
}

.katfin-manage__help-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.katfin-manage__help-text {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--gray-dark);
	font-size: var(--wp--preset--font-size--small);
}

.katfin-manage__help-actions {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.katfin-manage .katfin-manage__call,
.katfin-manage .katfin-manage__whatsapp {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.katfin-manage .katfin-manage__call {
	background: var(--wp--preset--color--gray);
	color: var(--wp--preset--color--ink);
}

.katfin-manage .katfin-manage__whatsapp {
	background: var(--wp--preset--color--green-dark);
	color: var(--wp--preset--color--white);
}

/* ---- Popup de cancelar ---- */

.katfin-manage__dialog {
	box-sizing: border-box;
	width: min(32rem, calc(100% - 2rem));
	padding: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	text-align: center;
}

.katfin-manage__dialog::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}

.katfin-manage__dialog-mark {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	border: 1px solid var(--katfin-manage-error);
	border-radius: 50%;
	color: var(--katfin-manage-error);
	font-size: 1.5rem;
	font-weight: 700;
}

.katfin-manage__dialog-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.katfin-manage__dialog p {
	color: var(--wp--preset--color--gray-dark);
	font-size: var(--wp--preset--font-size--small);
}

.katfin-manage__dialog-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.katfin-manage__back-button {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-dark);
}

.katfin-manage__confirm-cancel {
	background: var(--katfin-manage-error);
	color: var(--wp--preset--color--white);
}

.katfin-manage__confirm-cancel:disabled {
	opacity: 0.6;
}

/* ---- Móvil ---- */

@media (width <= 600px) {

	.katfin-manage__card {
		padding: var(--wp--preset--spacing--40);
	}

	.katfin-manage__rows > div {
		flex-direction: column;
		gap: 0.15rem;
	}

	.katfin-manage__rows dd {
		text-align: start;
	}

	.katfin-manage__actions,
	.katfin-manage__dialog-actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.katfin-manage__help-actions {
		width: 100%;
	}

	.katfin-manage__help-actions > a {
		flex: 1;
		justify-content: center;
	}
}