/**
 * Mi cuenta.
 *
 * La apuesta original fue usar el marcado de WooCommerce y dejar que el tema pusiera el
 * estilo. No funcionó: este tema casi no estila el área de Mi cuenta, así que la
 * navegación salía como una lista con viñetas y la tabla sin respiro.
 *
 * PALETA: la de la marca, según docs/DESIGN-SYSTEM.md §4, muestreada píxel a píxel del
 * logo. Celeste #5CB6E7 y verde #9ECB3B.
 *
 * La regla que el Design System deja escrita y que acá se respeta: **los colores exactos
 * del logo nunca se usan para texto**. Sobre blanco dan 2,28:1 y 1,90:1, muy por debajo
 * del mínimo legible. Quedan reservados para superficie y acento; el texto y los fondos
 * con texto encima usan los derivados oscuros del mismo matiz —#145E85 da 7,1:1 y
 * #5A751F da 5,3:1—.
 *
 * El azul marino del encabezado de este sitio NO es de la paleta: es uno de los que el
 * Design System da por retirados (§4, "Retirado"). Por eso el acento de acá no lo copia.
 *
 * Los valores van en variables para que se puedan ajustar desde el tema sin tocar el
 * plugin, pero los que están son los de marca.
 *
 * La navegación se estila entera —no solo la pestaña de turnos— porque el problema es de
 * toda el área: dejar Turnos lindo y Pedidos con viñetas sería peor que no hacer nada.
 */

.woocommerce-account {
	/* Celeste — matiz 201° del logo */
	--adm-sky-50: #F0F8FC;
	--adm-sky-100: #DCEEF9;
	--adm-sky-500: #5CB6E7;  /* logo exacto — nunca texto */
	--adm-sky-700: #145E85;  /* texto, links y fondos con texto blanco encima */
	--adm-sky-800: #0D3E59;  /* hover de enlaces */

	/* Verde — matiz 79° del logo */
	--adm-green-100: #EDF6D9;
	--adm-green-500: #9ECB3B; /* logo exacto — nunca texto */
	--adm-green-700: #5A751F;

	/* Neutros teñidos hacia el azul de marca, no grises puros */
	--adm-borde: #DCE7ED;
	--adm-borde-suave: #EAF2F6;
	--adm-tenue: #4A5C67;

	--adm-acento: var(--adm-sky-700);
	--adm-acento-suave: var(--adm-sky-50);
}

/* ---------- Navegación ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--adm-borde);
	border-radius: 4px;
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--adm-borde-suave);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 16px;
	text-decoration: none;
	color: inherit;
	line-height: 1.35;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--adm-acento-suave);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
	background: var(--adm-acento);
	color: #fff;
	font-weight: 600;
}

/* ---------- Contenido ---------- */

.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 1.1rem;
	margin: 26px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--adm-borde);
}
.woocommerce-account .woocommerce-MyAccount-content h3:first-child {
	margin-top: 0;
}
.adm-cuenta-zona {
	font-size: .88rem;
	color: var(--adm-tenue);
	margin: 0 0 18px;
}

/* ---------- Enlaces ---------- */
/* El tema pinta los enlaces de un magenta que no está en la paleta ni deriva del logo.
   Acá se corrigen los del área de Mi cuenta al azul que el Design System le asigna a los
   links (§4: --adm-sky-700, "texto, links, botón primario").

   Se excluyen los .button: WooCommerce los marca como <a> y ya tienen fondo propio.

   Esto es una corrección local y no la de fondo. El magenta sigue en el resto de
   calendario/ porque lo pone el tema, y arreglarlo de verdad es aplicar
   adm-design-system.php a esta instalación —hoy solo corre en el sitio principal—, no
   parchar desde el plugin de turnos. */

.woocommerce-account .woocommerce-MyAccount-content a:not(.button),
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):visited {
	color: var(--adm-acento);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover,
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):focus-visible {
	color: var(--adm-sky-800);
}

/* ---------- Tabla de turnos ---------- */

.adm-turnos-tabla {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}
.adm-turnos-tabla th {
	text-align: left;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	color: var(--adm-tenue);
	padding: 8px 12px;
	border-bottom: 2px solid var(--adm-sky-500);
	white-space: nowrap;
}
.adm-turnos-tabla td {
	padding: 13px 12px;
	border-bottom: 1px solid var(--adm-borde-suave);
	vertical-align: top;
	line-height: 1.4;
}
.adm-turnos-tabla tr:last-child td {
	border-bottom: 0;
}
.adm-turnos-tabla small {
	display: inline-block;
	color: var(--adm-tenue);
	font-size: .82rem;
	margin-top: 2px;
}
.adm-turnos-tabla .adm-cuando {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------- Estado ---------- */
/* Confirmado toma el celeste de marca y realizado el verde: son los dos estados buenos y
   la marca tiene exactamente dos matices. Pendiente, cancelado y ausente usan colores
   semánticos fuera de la paleta a propósito —con solo dos matices no se distinguen cinco
   estados de un vistazo, y acá el color tiene que informar antes que combinar—. */

.adm-cuenta-estado {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 11px;
	font-size: .78rem;
	line-height: 1.5;
	white-space: nowrap;
	background: var(--adm-borde-suave);
	color: var(--adm-tenue);
}
.adm-cuenta-estado.adm-estado-confirmed { background: var(--adm-sky-100);   color: var(--adm-sky-700); }
.adm-cuenta-estado.adm-estado-completed { background: var(--adm-green-100); color: var(--adm-green-700); }
.adm-cuenta-estado.adm-estado-pending   { background: #FDF3DC; color: #8A5A00; }
.adm-cuenta-estado.adm-estado-no_show   { background: #FBEAE5; color: #97331F; }
.adm-cuenta-estado.adm-estado-cancelled {
	background: #F2F5F7;
	color: var(--adm-tenue);
	text-decoration: line-through;
}

/* ---------- Acciones ---------- */

.adm-cuenta-form {
	display: inline-block;
	margin: 0;
}
.adm-turnos-tabla .button,
.adm-cuenta-horas .button {
	font-size: .82rem;
	padding: 7px 14px;
	line-height: 1.3;
	margin: 2px 4px 2px 0;
}
.adm-cuenta-vacio {
	color: var(--adm-tenue);
	padding: 14px 0 4px;
}

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

.adm-cuenta-horarios h4 {
	font-size: .95rem;
	margin: 18px 0 8px;
	text-transform: capitalize;
}
.adm-cuenta-horas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

/* ---------- Móvil ---------- */
/* La tabla pasa a fichas: en un teléfono, cuatro columnas se vuelven ilegibles.
   Los data-title ya están en el marcado, así que cada dato dice qué es. */

@media (max-width: 600px) {
	.adm-turnos-tabla thead { display: none; }
	.adm-turnos-tabla,
	.adm-turnos-tabla tbody,
	.adm-turnos-tabla tr,
	.adm-turnos-tabla td { display: block; width: 100%; }
	.adm-turnos-tabla tr {
		border: 1px solid var(--adm-borde);
		border-radius: 4px;
		margin-bottom: 12px;
		padding: 4px 0;
	}
	.adm-turnos-tabla td {
		border-bottom: 0;
		padding: 7px 14px;
		display: flex;
		justify-content: space-between;
		gap: 14px;
	}
	.adm-turnos-tabla td::before {
		content: attr(data-title);
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--adm-tenue);
		flex: 0 0 auto;
		padding-top: 3px;
	}
}

/* ---------- Foco ---------- */
/* El foco visible también en el acento de marca, para que teclado y mouse vean el mismo
   sistema de color. */

.woocommerce-account a:focus-visible,
.woocommerce-account button:focus-visible,
.woocommerce-account .button:focus-visible {
	outline: 2px solid var(--adm-sky-700);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-account * { transition: none !important; }
}