/**
 * Roots & Routes Core — Soft UI, resto del sitio (TASK-124).
 *
 * La "pincelada" de docs/SOFT_UI_CONTAINERS_STRATEGY.md fuera de la Home:
 * misma escala de radios y elevación teal, cards por superficie en vez de
 * borde, en las pantallas de cliente (login, My Account, dashboard de
 * Listeo, /services/). Solo overrides sobre selectores existentes de
 * Listeo / WooCommerce, sin markup ni JS, salvo el bloque
 * `.rrc-account-overview` que sí es markup propio
 * (templates/account/dashboard.php, vía `woocommerce_locate_template`).
 *
 * Fuera de alcance a propósito: modal de reserva y bloque de pago Roots
 * (TASK-107/112/119), checkout, paneles /rr-admin/ (tienen su propio
 * panel-chrome.css).
 */

:root {
	--rr-cream: #faf6ec;
	--rr-bg-page: #f6f6f4;
	--rr-card-bg: #ffffff;
	--rr-border: #e8dfcc;
	--rr-ink: #2b2420;
	--rr-ink-soft: #6b6153;
	--rr-teal-deep: #1b4b4a;
	--rr-teal: #2e9c8f;
	--rr-orange: #e8592e;
	--rr-orange-dark: #c94a24;
	--rr-gold: #f0a93c;
	--rr-radius-sm: 12px;
	--rr-radius-md: 20px;
	--rr-radius-lg: 28px;
	--rr-shadow-1: 0 1px 2px rgba(27, 75, 74, 0.05), 0 6px 18px rgba(27, 75, 74, 0.07);
	--rr-shadow-2: 0 2px 4px rgba(27, 75, 74, 0.06), 0 14px 32px rgba(27, 75, 74, 0.12);
}

/* ---------------------------------------------------------------------
 * Listing cards (Listeo "nl" layout) en /services/ y cualquier listado.
 * Misma regla que en Home; sin `overflow` para no pisar TASK-120.
 * ------------------------------------------------------------------- */

.listing-card-nl {
	border-color: transparent;
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
	transition: box-shadow 0.2s ease;
}

.listing-card-nl:hover {
	box-shadow: var(--rr-shadow-2);
}

.listing-image-container-nl {
	border-radius: calc(var(--rr-radius-md) - 1px) calc(var(--rr-radius-md) - 1px) 0 0;
}

/* ---------------------------------------------------------------------
 * Dashboard de Listeo (template-dashboard.php): cajas de contenido.
 * ------------------------------------------------------------------- */

.dashboard-list-box {
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Login / registro (Listeo `.sign-in-form`, también dentro del dashboard
 * cuando no hay sesión) y formulario de login de WooCommerce.
 * ------------------------------------------------------------------- */

.sign-in-form.style-1,
.woocommerce-form-login,
.woocommerce-form-register {
	position: relative;
	background: var(--rr-card-bg);
	border: 0;
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
	padding: 32px 28px 28px;
}

/* Perezoso como acento en la esquina superior derecha, igual que la lapa
 * en el buscador de Home: nunca sobre los campos. */
/* Colgado del borde superior derecho, sobresaliendo de la card (como la
 * lapa sobre el buscador): la mayor parte queda fuera de la card para no
 * pisar las pestañas Log In / Register, que Listeo apila a ancho completo
 * en móvil. */
.sign-in-form.style-1::before {
	content: "";
	position: absolute;
	top: -50px;
	right: -6px;
	width: 68px;
	height: 68px;
	background-image: url("images/brand/rr-sloth-branch.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	pointer-events: none;
}

.sign-in-form.style-1 .tabs-nav li a {
	color: var(--rr-ink-soft);
}

.sign-in-form.style-1 .tabs-nav li.active a,
.sign-in-form.style-1 .tabs-nav li a:hover {
	color: var(--rr-teal-deep);
}

/* Listeo subraya la pestaña activa con `border-bottom` rojo en el <a>. */
.sign-in-form.style-1 .tabs-nav li.active a {
	border-bottom-color: var(--rr-teal-deep) !important;
}

.sign-in-form.style-1 .button,
.sign-in-form.style-1 input[type="submit"],
.woocommerce-form-login .button,
.woocommerce-form-register .button {
	background-color: var(--rr-orange-dark) !important;
	border-color: var(--rr-orange-dark) !important;
	color: #ffffff !important;
}

.sign-in-form.style-1 .button:hover,
.sign-in-form.style-1 input[type="submit"]:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover {
	background-color: #a93d1c !important;
	border-color: #a93d1c !important;
}

.sign-in-form.style-1 input:focus,
.woocommerce-form-login input:focus {
	border-color: var(--rr-teal) !important;
	box-shadow: 0 0 0 3px rgba(46, 156, 143, 0.18) !important;
}

@media (min-width: 768px) {
	/* ≈ un tercio del ancho de la card (301-380px), como la lapa respecto
	 * al buscador de Home (56px sobre 840px sería demasiado pequeño aquí;
	 * 88px mantiene la proporción acento/contenedor sin competir con las
	 * pestañas). */
	.sign-in-form.style-1::before {
		width: 88px;
		height: 88px;
		top: -64px;
		right: -14px;
	}
}

/* ---------------------------------------------------------------------
 * WooCommerce My Account dentro del dashboard de Listeo: la navegación
 * de WooCommerce pasa de lista con chevrones a pills horizontales; el
 * contenido ocupa todo el ancho (el sidebar de Listeo ya es la
 * navegación principal).
 * ------------------------------------------------------------------- */

.page-template-template-dashboard .woocommerce-MyAccount-navigation,
.page-template-template-dashboard .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
}

/* Listeo oculta la navegación de WooCommerce dentro del dashboard
 * (`.page-template-template-dashboard.woocommerce-account
 * .woocommerce-MyAccount-navigation { display:none }`) porque su sidebar
 * ya es la navegación. En la pestaña raíz ("Account overview") las cards
 * propias cumplen ese papel y se respeta el ocultamiento; en los demás
 * endpoints (orders, edit-account, edit-address, view-order) sí se
 * muestra, como pills, para poder moverse entre secciones. */
.page-template-template-dashboard.woocommerce-account:not(.woocommerce-dashboard) .woocommerce-MyAccount-navigation {
	display: block;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation {
	margin-bottom: 24px;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li::before,
.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li a::before {
	display: none !important;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--rr-card-bg);
	box-shadow: var(--rr-shadow-1);
	color: var(--rr-ink);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li a:hover,
.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: var(--rr-cream);
	color: var(--rr-teal-deep);
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--rr-teal-deep);
	color: #ffffff;
}

.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li a:focus-visible {
	outline: 3px solid var(--rr-teal);
	outline-offset: 2px;
}

.page-template-template-dashboard .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---------------------------------------------------------------------
 * Account overview (markup propio, templates/account/dashboard.php).
 * Mobile-first: cards apiladas; 2 columnas desde 640px, 4 desde 1024px.
 * ------------------------------------------------------------------- */

.rrc-account-overview {
	color: var(--rr-ink);
}

.rrc-account-overview-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 70% at 100% 0%, rgba(240, 169, 60, 0.18) 0%, transparent 70%),
		var(--rr-cream);
	border-radius: var(--rr-radius-md);
	padding: 28px 24px;
	margin-bottom: 20px;
}

.rrc-account-overview-hero::after {
	content: "";
	position: absolute;
	right: -8px;
	bottom: -10px;
	width: 84px;
	height: 84px;
	background-image: url("images/brand/rr-sloth-branch.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
	opacity: 0.9;
	pointer-events: none;
}

.rrc-account-overview-kicker {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--rr-ink-soft);
}

.rrc-account-overview-hero h3 {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.2;
	color: var(--rr-teal-deep);
	padding-right: 80px;
}

.rrc-account-overview-hero p {
	margin: 0;
	color: var(--rr-ink-soft);
	padding-right: 80px;
}

.rrc-account-overview-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rrc-account-overview-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--rr-card-bg);
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
	padding: 22px 20px;
	text-decoration: none !important;
	color: var(--rr-ink) !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.rrc-account-overview-card:hover,
.rrc-account-overview-card:focus-visible {
	box-shadow: var(--rr-shadow-2);
	transform: translateY(-2px);
}

.rrc-account-overview-card:focus-visible {
	outline: 3px solid var(--rr-teal);
	outline-offset: 2px;
}

.rrc-account-overview-card strong {
	font-size: 16px;
	color: var(--rr-teal-deep);
}

.rrc-account-overview-card span {
	font-size: 14px;
	color: var(--rr-ink-soft);
}

.rrc-account-overview-card em {
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	color: var(--rr-orange-dark);
	margin-top: 4px;
}

@media (min-width: 640px) {
	.rrc-account-overview-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rrc-account-overview-hero {
		padding: 32px 28px;
	}

	.rrc-account-overview-hero::after {
		width: 120px;
		height: 120px;
		right: -10px;
		bottom: -14px;
	}

	.rrc-account-overview-hero h3 {
		font-size: 24px;
		padding-right: 130px;
	}

	.rrc-account-overview-hero p {
		padding-right: 130px;
	}
}

@media (min-width: 1024px) {
	.rrc-account-overview-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------
 * Dashboard de Listeo (cliente y proveedor), TASK-126.
 *
 * 1) Fondo continuo: `.dashboard-content` solo mide lo que mide su
 *    contenido y debajo asomaba el blanco del body/#dashboard (el "corte"
 *    reportado en /provider-dashboard/). Todo el lienzo pasa a
 *    --rr-bg-page y el contenido ocupa al menos el alto del viewport.
 * 2) Sidebar: íconos del rojo por defecto de Listeo al teal profundo.
 * 3) Tiles de estadísticas (`.dashboard-stat.stat-card-v2.color-N`):
 *    misma estructura y degradado suave de Listeo, pero con los cuatro
 *    tonos de marca (teal, teal profundo, dorado oscuro, naranja) y radio
 *    de la escala. El color se define una vez por tile en `--rr-stat`.
 * 4) Enlaces dentro de cajas del dashboard en teal profundo.
 * ------------------------------------------------------------------- */

body.page-template-template-dashboard,
body.page-template-template-dashboard #wrapper,
body.page-template-template-dashboard #dashboard,
body.page-template-template-dashboard .dashboard-nav,
body.page-template-template-dashboard .dashboard-content {
	background-color: var(--rr-bg-page);
}

body.page-template-template-dashboard .dashboard-content {
	min-height: calc(100vh - 80px);
}

/* Listeo pinta los íconos con su color principal desde un <style> inline
 * generado por sus opciones, con !important y una lista larga de
 * selectores; hace falta !important y más especificidad (el id
 * #dashboard) para el teal. */
body.page-template-template-dashboard #dashboard .dashboard-nav ul li a i,
body.page-template-template-dashboard #dashboard .dashboard-nav ul li a svg,
body.page-template-template-dashboard #dashboard .dashboard-nav ul li.active a i {
	color: var(--rr-teal-deep) !important;
}

/* TASK-149: the rule above only ever recolored the icon — the link TEXT
 * kept Listeo's native near-white (`#eee`, meant for its own dark sidebar
 * background) over the light background this file already gives
 * `.dashboard-nav` a few lines up, making every label unreadable except
 * the couple of items that happened to get a hover/active state during
 * testing. Same !important + #dashboard specificity fight as the icon
 * rule, for the same reason (Listeo's own inline <style>). */
body.page-template-template-dashboard #dashboard .dashboard-nav ul li a {
	color: var(--rr-ink) !important;
}

body.page-template-template-dashboard #dashboard .dashboard-nav ul li.active a {
	color: var(--rr-teal-deep) !important;
}

body.page-template-template-dashboard .dashboard-nav ul li a:hover {
	color: var(--rr-teal-deep);
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2 {
	--rr-stat: 46, 156, 143; /* teal */
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
	background: linear-gradient(45deg, rgba(var(--rr-stat), 0.11), rgba(var(--rr-stat), 0.03)) !important;
	color: rgb(var(--rr-stat)) !important;
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2.color-2 {
	--rr-stat: 27, 75, 74; /* teal profundo */
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2.color-3 {
	--rr-stat: 168, 108, 10; /* dorado oscuro: legible sobre crema (--rr-gold puro no cumple AA) */
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2.color-4 {
	--rr-stat: 201, 74, 36; /* naranja oscuro */
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-head,
body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-badge,
body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-label,
body.page-template-template-dashboard .dashboard-stat.stat-card-v2 h4,
body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-meta,
body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-meta strong,
body.page-template-template-dashboard .dashboard-stat.stat-card-v2 svg {
	color: rgb(var(--rr-stat)) !important;
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-meta-text {
	color: rgba(var(--rr-stat), 0.8) !important;
}

body.page-template-template-dashboard .dashboard-stat.stat-card-v2 .stat-trend-circle {
	background-color: rgba(var(--rr-stat), 0.12) !important;
}

/* Botones de acción del dashboard (Mis servicios, Reservas recibidas,
 * Mensajes, Reseñas): del rojo por defecto de Listeo al teal profundo;
 * los secundarios (`.gray`, `.border`) quedan con borde. Se excluye la
 * página de Agregar servicio, que ya tiene su paleta propia (TASK-069,
 * body.add-listing-dashboard-template). */
body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content .button:not(.gray):not(.border):not(.border-with-icon),
body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content button.button:not(.gray):not(.border) {
	background-color: var(--rr-teal-deep) !important;
	border-color: var(--rr-teal-deep) !important;
	color: #ffffff !important;
}

body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content .button:not(.gray):not(.border):not(.border-with-icon):hover,
body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content button.button:not(.gray):not(.border):hover {
	background-color: #123534 !important;
	border-color: #123534 !important;
}

body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content .button.gray,
body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content .button.border {
	background-color: transparent !important;
	border: 1px solid var(--rr-border) !important;
	color: var(--rr-ink) !important;
}

body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content .button.gray:hover,
body.page-template-template-dashboard:not(.add-listing-dashboard-template) .dashboard-content .button.border:hover {
	background-color: var(--rr-cream) !important;
	border-color: var(--rr-teal-deep) !important;
	color: var(--rr-teal-deep) !important;
}

/* Listado moderno de reservas de Listeo ("lstb"): botones propios. */
body.page-template-template-dashboard .dashboard-content .lstb-btn-primary,
body.page-template-template-dashboard .dashboard-content a.lstb-btn-primary {
	background-color: var(--rr-teal-deep) !important;
	border-color: var(--rr-teal-deep) !important;
	color: #ffffff !important;
}

body.page-template-template-dashboard .dashboard-content .lstb-btn-primary:hover {
	background-color: #123534 !important;
	border-color: #123534 !important;
}

/* Acciones destructivas ("Eliminar"): contorno naranja oscuro, relleno
 * solo al pasar el cursor, para que no compitan con la acción principal. */
body.page-template-template-dashboard .dashboard-content .lstb-btn.lstb-btn-danger {
	background-color: transparent !important;
	border-color: rgba(201, 74, 36, 0.5) !important;
	color: var(--rr-orange-dark) !important;
}

body.page-template-template-dashboard .dashboard-content .lstb-btn.lstb-btn-danger:hover {
	background-color: var(--rr-orange-dark) !important;
	border-color: var(--rr-orange-dark) !important;
	color: #ffffff !important;
}

body.page-template-template-dashboard .dashboard-content .lstb-btn:not(.lstb-btn-primary):not(.lstb-btn-danger) {
	border-color: var(--rr-border) !important;
	color: var(--rr-ink) !important;
}

body.page-template-template-dashboard .dashboard-content .lstb-btn:not(.lstb-btn-primary):not(.lstb-btn-danger):hover {
	background-color: var(--rr-cream) !important;
	border-color: var(--rr-teal-deep) !important;
	color: var(--rr-teal-deep) !important;
}

/* Badge/enlace "Agregar recursos" de Booking Plus en Mis servicios. */
body.page-template-template-dashboard .dashboard-content .lbp-resources-badge {
	background-color: var(--rr-cream) !important;
	color: var(--rr-teal-deep) !important;
	border: 1px solid rgba(27, 75, 74, 0.25) !important;
}

body.page-template-template-dashboard .dashboard-content .lbp-resources-badge:hover {
	background-color: var(--rr-teal-deep) !important;
	color: #ffffff !important;
}

/* Hilo de mensajes: la burbuja propia dejaba de ser roja de Listeo. */
body.page-template-template-dashboard .message-bubble.me .message-text {
	background-color: var(--rr-cream) !important;
	color: var(--rr-ink) !important;
}

body.page-template-template-dashboard .message-bubble.me .message-text::before {
	border-color: transparent var(--rr-cream) !important;
}

body.page-template-template-dashboard .dashboard-list-box a:not(.button):not(.dashboard-logo) {
	color: var(--rr-teal-deep);
}

body.page-template-template-dashboard .dashboard-list-box a:not(.button):not(.dashboard-logo):hover {
	color: var(--rr-orange-dark);
}

@media (prefers-reduced-motion: reduce) {
	.listing-card-nl,
	.rrc-account-overview-card,
	.page-template-template-dashboard .woocommerce-MyAccount-navigation ul li a {
		transition: none;
	}
}