/**
 * TASK-069 — Estilos visuales para el formulario de publicación de proveedor
 * (/add-service/, tabs Service y Rental). Solo CSS: no toca Listeo, no toca
 * el tema padre, no cambia ningún comportamiento funcional.
 *
 * Selectores confirmados por inspección real del DOM en LocalWP (ver
 * docs/tasks/TASK-069-estilos-frontend-formulario-publicacion.md):
 *   body.add-listing-dashboard-template  -> body class real de /add-service/
 *   .submit-page / .type-service / .type-rental -> raíz del formulario
 *   .add-listing-section                  -> cada sección (Basic Information, Location, ...)
 *   .add-listing-headline                 -> encabezado de sección (contiene <h3>)
 *   .form-field-container-type-*          -> contenedor de cada campo
 *   label i.tip                           -> icono de ayuda (tooltip)
 *   label > i (sin clase)                 -> asterisco de campo requerido
 *   .switch .slider                       -> switches on/off (Booking, etc.)
 *   .dropzone._gallery                    -> zona de subida de fotos
 *   .listing-type-container / a.listing-type -> tarjetas Service/Rental
 *
 * Paleta: adaptada del logo real de Roots & Routes Costa Rica Vacations
 * (crema tropical + verde selva + naranja atardecer + turquesa océano),
 * no genérica — ver la nota de diseño en TASK-069 para el detalle de cada tono.
 */

body.add-listing-dashboard-template,
body.page-template-template-dashboard-php {
	--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-danger: #c0392b;
	--rr-radius: 12px;
	--rr-radius-sm: 8px;
}

/* ---------- Fondo general del área de publicación ---------- */
/*
 * TASK-069D: el desarrollador pidió explícitamente quitar el crema tropical
 * de "los espacios" en general — lo encontraba pesado para la vista y pidió
 * "un por defecto como lo hacen otras plataformas". Se cambia a un gris
 * neutro muy claro (el mismo patrón que Airbnb/Booking: fondo de página
 * neutro + tarjetas blancas), en vez de blanco puro, para que las tarjetas
 * (--rr-card-bg, blancas) sigan destacando con contraste sutil.
 *
 * TASK-069I: el selector original (`.add-listing-dashboard-template`) solo
 * está presente en `/add-service/` — `/my-services/` y el resto de páginas
 * del panel de proveedor usan la misma `template-dashboard.php` pero sin
 * esa clase extra, así que se quedaban con el blanco plano de siempre. Se
 * amplía a `.page-template-template-dashboard-php` (la clase que el propio
 * tema agrega a TODAS las páginas con esa plantilla, confirmado en
 * `_wp_page_template` de varias páginas reales), para que el fondo se vea
 * igual en todo el panel, no solo en el formulario de publicación. También
 * se amplió el enqueue de esta hoja de estilos en `ProviderFormAssets.php`
 * para que cargue en esas páginas.
 */
body.add-listing-dashboard-template .dashboard-content,
body.page-template-template-dashboard-php .dashboard-content {
	background: var(--rr-bg-page);
}

/* ---------- Selector Service / Rental ---------- */
/*
 * TASK-069H: tres intentos de "arreglar" esta sección con una regla propia
 * (TASK-069: transparente/sin padding; TASK-069B/069C: padding especial de
 * 24px para compensar el margen negativo de Bootstrap y el recorte de
 * texto; TASK-069G: le devolvió fondo/borde pero mantuvo el padding
 * especial) terminaron generando efectos secundarios distintos cada vez —
 * el más reciente, un desbordamiento horizontal real (la tarjeta "Rental"
 * quedaba cortada fuera del contenedor en ciertos anchos), reportado por
 * el desarrollador con captura real y comparado contra el estilo de "Mis
 * servicios" (`/my-services/`), que nunca tuvo este problema porque usa la
 * regla genérica de `.add-listing-section` sin ningún override.
 *
 * Solución definitiva: eliminar el override por completo. `.type-selection`
 * ahora usa exactamente la misma regla que cualquier otra sección del
 * formulario (ver más abajo, `.add-listing-section` a secas) — mismo
 * padding (28px 32px de escritorio, 20px 18px en móvil), sin ninguna
 * excepción. Ese padding (32px/18px) es MAYOR al 24px que ya se había
 * confirmado suficiente para el margen negativo de Bootstrap y el recorte
 * de texto, así que ambos bugs originales de TASK-069B/069C siguen
 * resueltos sin necesidad de una regla especial que siga generando
 * regresiones cada vez que algo más en la hoja de estilos cambia.
 */

body.add-listing-dashboard-template .listing-type-container {
	padding: 6px;
}

body.add-listing-dashboard-template a.listing-type {
	display: block;
	background: var(--rr-card-bg);
	border: 2px solid var(--rr-border);
	border-radius: var(--rr-radius);
	padding: 32px 16px;
	text-align: center;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 1px 3px rgba(43, 36, 32, 0.06);
}

body.add-listing-dashboard-template a.listing-type:hover,
body.add-listing-dashboard-template a.listing-type:focus {
	border-color: var(--rr-teal);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(27, 75, 74, 0.12);
}

/*
 * BUG REAL reportado en TASK-069B: el tema (`listeo/style.css`) trae
 * `.listing-type:hover { background-color: #66676b }` + `.listing-type:hover h3
 * { color: #fff }`, pensado para un hover oscuro. Como la tarjeta de esta
 * tarea siempre tiene fondo claro (nunca se oscurece — nuestra regla de
 * fondo tiene más especificidad que la del tema), el texto quedaba blanco
 * sobre blanco/crema = invisible. Se fija el color del texto explícitamente
 * en hover/focus para que nunca dependa del fondo oscuro del tema.
 */
body.add-listing-dashboard-template a.listing-type:hover h3,
body.add-listing-dashboard-template a.listing-type:focus h3 {
	color: var(--rr-teal-deep);
}

body.add-listing-dashboard-template a.listing-type i,
body.add-listing-dashboard-template a.listing-type .fa,
body.add-listing-dashboard-template a.listing-type svg {
	color: var(--rr-orange);
}

/* Diferenciar visualmente Service (naranja atardecer) de Rental (turquesa),
   coherente con la paleta del logo real de Roots & Routes. */
body.add-listing-dashboard-template a.listing-type[data-type="service"] .listing-type-icon {
	background-color: var(--rr-orange);
}

body.add-listing-dashboard-template a.listing-type[data-type="rental"] .listing-type-icon {
	background-color: var(--rr-teal);
}

/* ---------- Secciones del formulario (Basic Information, Location, ...) ---------- */
body.add-listing-dashboard-template .add-listing-section {
	background: var(--rr-card-bg);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	box-shadow: 0 1px 4px rgba(43, 36, 32, 0.05);
	padding: 28px 32px;
	margin-bottom: 28px;
}

body.add-listing-dashboard-template .add-listing-headline {
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--rr-border);
	padding: 0 0 16px 0;
	margin-bottom: 24px;
}

body.add-listing-dashboard-template .add-listing-headline h3 {
	color: var(--rr-teal-deep);
	font-weight: 700;
	letter-spacing: 0.01em;
}

body.add-listing-dashboard-template .add-listing-headline i,
body.add-listing-dashboard-template .add-listing-headline svg {
	color: var(--rr-orange);
}

/* Campos requeridos y ayudas (tooltip) más cómodos de leer */
body.add-listing-dashboard-template .submit-page label {
	color: var(--rr-ink);
	font-weight: 600;
	margin-bottom: 8px;
	display: inline-block;
}

body.add-listing-dashboard-template .submit-page label > i:not(.tip) {
	color: var(--rr-orange);
	font-style: normal;
	margin-left: 2px;
}

/*
 * TASK-069E: el desarrollador pidió "darle color" a los íconos de ayuda
 * ("?") — se veían como un círculo gris apagado, casi invisible. Causa
 * real (confirmada con CSSOM): el propio tema trae la regla
 * `.tip:not(.tip.listeo-ad-badge):not(.inside-switch) { color: #fff }`
 * en `style.css`, con MÁS especificidad que la nuestra de abajo (el doble
 * `:not()` cuenta como 2 clases extra), así que ganaba ella y dejaba el
 * ícono en blanco sobre un fondo casi transparente (12% de opacidad).
 * Se sube la especificidad repitiendo `.tip` y se fuerza el color con
 * `!important` para no depender de que el tema no cambie ese selector
 * mañana. También se amplía el selector a cualquier `.tip` dentro del
 * formulario (no solo dentro de `label`) — los tooltips de encabezado de
 * sección ("Reservas y disponibilidad", "Precios", etc.) usan la misma
 * clase pero no están dentro de un `<label>`.
 */
body.add-listing-dashboard-template .submit-page i.tip.tip {
	color: #fff !important;
	background: var(--rr-teal) !important;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	cursor: help;
}

body.add-listing-dashboard-template .submit-page i.tip.tip:hover {
	background: var(--rr-teal-deep) !important;
}

/* ---------- Campos de entrada ---------- */
/*
 * TASK-069D: el desarrollador pidió explícitamente que los inputs NO usen
 * el crema tropical — "mantenerlo sencillo... para que no generen malestar
 * en la vista". Fondo blanco liso (igual que las tarjetas de sección),
 * como hacen la mayoría de plataformas (Airbnb incluido) — el crema queda
 * solo como fondo general de la página, no dentro de los campos.
 */
body.add-listing-dashboard-template .submit-page input[type="text"],
body.add-listing-dashboard-template .submit-page input[type="number"],
body.add-listing-dashboard-template .submit-page input[type="email"],
body.add-listing-dashboard-template .submit-page input[type="url"],
body.add-listing-dashboard-template .submit-page textarea,
body.add-listing-dashboard-template .submit-page select {
	width: 100%;
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius-sm);
	padding: 11px 14px;
	color: var(--rr-ink);
	background: var(--rr-card-bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.add-listing-dashboard-template .submit-page input[type="text"]:focus,
body.add-listing-dashboard-template .submit-page input[type="number"]:focus,
body.add-listing-dashboard-template .submit-page input[type="email"]:focus,
body.add-listing-dashboard-template .submit-page input[type="url"]:focus,
body.add-listing-dashboard-template .submit-page textarea:focus,
body.add-listing-dashboard-template .submit-page select:focus {
	border-color: var(--rr-orange);
	box-shadow: 0 0 0 3px rgba(232, 89, 46, 0.15);
	outline: none;
	background: var(--rr-card-bg);
}

body.add-listing-dashboard-template .submit-page ::placeholder {
	color: var(--rr-ink-soft);
	opacity: 0.85;
}

/* Espaciado entre campos dentro de una sección */
body.add-listing-dashboard-template .submit-page [class*="form-field-container"] {
	margin-bottom: 22px;
}

/* ---------- Galería / fotos ---------- */
/* TASK-069D: mismo cambio que en los inputs — blanco liso, no crema. */
body.add-listing-dashboard-template .dropzone._gallery {
	background: var(--rr-card-bg);
	border: 2px dashed var(--rr-teal);
	border-radius: var(--rr-radius);
}

body.add-listing-dashboard-template .dropzone._gallery:hover {
	border-color: var(--rr-orange);
	background: #fff;
}

/* ---------- Switches (Booking, Instant Booking, etc.) ---------- */
body.add-listing-dashboard-template .switch .slider {
	background-color: #d8cfba;
}

body.add-listing-dashboard-template .switch input:checked + .slider {
	background-color: var(--rr-teal);
}

body.add-listing-dashboard-template .add-listing-section.has-switcher .add-listing-headline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

/* Cargos obligatorios: separar visualmente cada fila repetible
   (selector real confirmado: .listeo-fee-row, no un genérico "repeatable-row") */
body.add-listing-dashboard-template .listeo-fee-row {
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius-sm);
	padding: 12px;
	margin-bottom: 10px;
	background: var(--rr-card-bg);
}

/*
 * TASK-069E: micro-etiquetas de los servicios/add-ons ("TÍTULO",
 * "DESCRIPCIÓN", "PRECIO", "TIPO DE COBRO", "CANTIDAD MÁXIMA") — el
 * desarrollador las reportó como "muy grises y apagadas". Causa real
 * (confirmada con getComputedStyle): el color ya es el correcto
 * (--rr-ink), el problema es que el propio tema les aplica
 * `opacity: 0.4` a todo `.fm-input-label`, pensado para una jerarquía muy
 * sutil que aquí se ve como texto deshabilitado. Se sube a un valor que
 * sigue diferenciándolas del valor del campo pero ya es legible.
 */
body.add-listing-dashboard-template .submit-page .fm-input-label {
	opacity: 0.75;
}

/*
 * TASK-069E: encabezados de día (Lunes a Domingo) del widget de horarios
 * ("Default Disponibilidad" / Horarios de atención) — venían en un rojo
 * de alarma sólido (`#F30C0C`, `.day-slot-headline`, propio del tema/
 * Booking Plus), que no es un estado de error, solo un divisor de día.
 * Se cambia a un tono de marca (turquesa oscuro) para que no se lea como
 * una advertencia.
 */
body.add-listing-dashboard-template .day-slot-headline {
	background: var(--rr-teal-deep) !important;
}

/* ---------- Botones principales ---------- */
/*
 * TASK-069C: contraste real medido (fórmula WCAG de luminancia relativa).
 * Texto blanco sobre --rr-orange (#E8592E) da 3.56:1 — pasa el mínimo de UI
 * de WCAG (3:1) pero no el de texto normal (4.5:1). Texto blanco sobre
 * --rr-orange-dark (#C94A24) da 4.68:1 — sí pasa AA de texto normal. Se usa
 * el tono oscuro como fondo por defecto del botón (no solo en hover) para
 * que el texto sea legible de forma consistente; --rr-orange se reserva
 * para acentos no textuales (bordes, asterisco, íconos) donde el umbral es
 * más bajo.
 */
body.add-listing-dashboard-template .submit-page .button,
body.add-listing-dashboard-template .submit-page button[type="submit"] {
	background: var(--rr-orange-dark);
	border: none;
	color: #fff;
	font-weight: 700;
	border-radius: var(--rr-radius-sm);
	padding: 13px 28px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

body.add-listing-dashboard-template .submit-page .button:hover,
body.add-listing-dashboard-template .submit-page button[type="submit"]:hover {
	background: #ab3f1f;
	transform: translateY(-1px);
}

body.add-listing-dashboard-template .submit-page .button:focus-visible,
body.add-listing-dashboard-template .submit-page button[type="submit"]:focus-visible {
	outline: 3px solid var(--rr-teal);
	outline-offset: 2px;
}

/*
 * TASK-069D: "los tonos rojos de los availability me parecen mal".
 * Causa real (confirmada por JS/getComputedStyle en vivo): el calendario de
 * disponibilidad lo dibuja FullCalendar.js, y sus botones de navegación
 * (prev / next / today) también traen la clase genérica ".button" — la
 * regla de arriba, pensada para el botón principal Enviar/Vista previa, se
 * les aplicaba también, dejándolos en el mismo naranja oscuro sólido de un
 * botón de acción principal. Un control secundario de navegación de un
 * calendario no debería competir visualmente con el CTA principal, así que
 * aquí se le da un tratamiento "ghost" (borde, sin relleno sólido) en vez de
 * desactivar el selector genérico (que sigue sirviendo a otros botones
 * secundarios del formulario).
 */
body.add-listing-dashboard-template .fullcalendar-container .button,
body.add-listing-dashboard-template .fullcalendar-container button[type="submit"],
body.add-listing-dashboard-template .fullcalendar-container .fc-button {
	background: var(--rr-card-bg);
	border: 1px solid var(--rr-border);
	color: var(--rr-ink);
	font-weight: 600;
	box-shadow: none;
}

body.add-listing-dashboard-template .fullcalendar-container .button:hover,
body.add-listing-dashboard-template .fullcalendar-container button[type="submit"]:hover,
body.add-listing-dashboard-template .fullcalendar-container .fc-button:hover {
	background: var(--rr-bg-page);
	border-color: var(--rr-teal);
	color: var(--rr-teal-deep);
	transform: none;
}

body.add-listing-dashboard-template .fullcalendar-container .fc-button-active,
body.add-listing-dashboard-template .fullcalendar-container .fc-state-active {
	background: var(--rr-teal);
	border-color: var(--rr-teal);
	color: #fff;
}

/* Mensajes de validación nativos/propios, para que resalten sin ser agresivos */
body.add-listing-dashboard-template .submit-page .error,
body.add-listing-dashboard-template .submit-page .notification.error {
	border-left: 4px solid var(--rr-danger);
	background: #fbeaea;
	color: var(--rr-danger);
	border-radius: var(--rr-radius-sm);
	padding: 12px 16px;
}

/* ---------- Responsive / móvil y tablet ---------- */
/*
 * 991px, no 782px: es el breakpoint real donde el propio tema colapsa el
 * sidebar del dashboard (`.dashboard-content { margin-left: 0 }`, confirmado
 * en `listeo/style.css`). Usar un breakpoint distinto al del tema dejaba una
 * franja de ancho (783-991px) donde el sidebar ya se había ido pero estas
 * reglas de espaciado móvil todavía no aplicaban.
 */
@media (max-width: 991px) {
	/*
	 * TASK-215: `.add-listing-section` also carries Listeo's own `.row`
	 * class (confirmed via DOM inspection in LocalWP:
	 * `<div class="add-listing-section row basic_info">`), and Bootstrap's
	 * `.row { margin-left: -15px; margin-right: -15px; }` (theme's own
	 * `css/bootstrap-grid.css`) is never gated by a media query — it pulls
	 * the section 15px past its own container on both sides at every
	 * width. On desktop the surrounding layout has enough gutter to absorb
	 * that bleed invisibly; at phone widths, combined with this block's
	 * own reduced 18px padding, it pushes real form fields off the right
	 * edge of the viewport with no way to scroll to them — reported by the
	 * developer editing a Rental listing on an iPhone
	 * (`/add-service/?action=edit&listing_id=...`, "se corta la
	 * pantalla"). These sections are never used as an actual nested
	 * Bootstrap grid at this level (only their `.col-md-6` children are),
	 * so zeroing the row's own margin here is safe.
	 */
	body.add-listing-dashboard-template .add-listing-section {
		padding: 20px 18px;
		margin-bottom: 20px;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	body.add-listing-dashboard-template a.listing-type {
		padding: 24px 12px;
	}

	body.add-listing-dashboard-template .submit-page .button,
	body.add-listing-dashboard-template .submit-page button[type="submit"] {
		width: 100%;
		padding: 14px 20px;
		font-size: 16px;
	}

	body.add-listing-dashboard-template .switch {
		transform: scale(1.1);
	}

	/* Mapa y galería no deben forzar overflow horizontal en pantallas angostas */
	body.add-listing-dashboard-template .submit-page .leaflet-container,
	body.add-listing-dashboard-template .dropzone._gallery {
		max-width: 100%;
	}
}

/*
 * ---------- Calendario de reservas (/booking-calendar/) en móvil (TASK-220) ----------
 * Bug real reportado ("las ventanas de edición de calendario etc también
 * deben adaptarse a móvil") y confirmado con Playwright a 390px de ancho:
 * la grilla mensual de FullCalendar (7 columnas de días + su cabecera
 * "Sun...Sat") nunca se achica de verdad para caber en un teléfono — el
 * contenedor `.dashboard-list-box.dashboard-calendar-view` terminaba con
 * `scrollWidth` mayor que su `clientWidth`, y como nada en la cadena de
 * contenedores tenía `overflow-x: auto`, el resultado era contenido
 * simplemente invisible/inalcanzable (la columna "Sat" y parte de la
 * leyenda de colores quedaban recortadas, no con scroll disponible) —
 * mismo patrón que TASK-218 en la tabla de Reservas, aplicado aquí al
 * propio calendario nativo de Listeo, sin tocar ningún archivo suyo.
 *
 * Selector amplio (`.page-template-template-dashboard-php`, no solo
 * `.add-listing-dashboard-template`) porque /booking-calendar/ comparte la
 * misma plantilla que /add-service/ pero no esa clase extra — mismo
 * criterio que TASK-069I ya documentó arriba en este archivo. Breakpoint
 * propio (800px, no 991px): la grilla de FullCalendar necesita más aire
 * que un formulario normal antes de volverse ilegible.
 */
@media (max-width: 991px) {
	/*
	 * Causa real (rastreada con Playwright, no solo por inspección): en
	 * esta plantilla `.dashboard-content` es un hijo flex de su propio
	 * wrapper, y el `min-width: auto` por defecto de todo flex item hace
	 * que se niegue a encogerse por debajo del ancho natural de su
	 * contenido — cualquier cosa adentro con un ancho "rígido" (como la
	 * grilla de FullCalendar) empuja a `.dashboard-content` entero (y a
	 * `.row`/`.col-lg-12` dentro) a ~800px aunque el viewport sea de
	 * 390px. Confirmado: sin esta línea, `.dashboard-calendar-view` de
	 * abajo terminaba midiendo "100% de un padre que ya media 790px" — el
	 * `overflow-x: auto` nunca llegaba a activarse porque el que se salía
	 * del viewport real era este contenedor, no el calendario. Fix de una
	 * sola línea, ampliamente recomendado para exactamente este caso de
	 * flexbox — no reduce nada que ya quepa, solo permite encogerse.
	 */
	body.page-template-template-dashboard-php .dashboard-content {
		min-width: 0;
	}
}

@media (max-width: 800px) {
	body.page-template-template-dashboard-php .dashboard-calendar-view {
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
	}

	body.page-template-template-dashboard-php .dashboard-calendar-view .fc {
		min-width: 700px;
	}
}

/*
 * ---------- Badge Servicio/Hospedaje en /my-services/ ----------
 * TASK-069I: distinción visual de cada listing en la lista del proveedor,
 * mismo lenguaje de color que el selector de /add-service/ (naranja =
 * Servicio, turquesa = Hospedaje/alquiler). Inyectado vía
 * ListingTypeBadge.php (hook listeo_core_my_listings_before_meta), nunca
 * modifica la plantilla de Listeo.
 */
body.page-template-template-dashboard-php .rrc-listing-type-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 999px;
	padding: 3px 10px;
	margin: 4px 6px 4px 0;
	color: #fff;
}

body.page-template-template-dashboard-php .rrc-listing-type-badge--service {
	background: var(--rr-orange, #e8592e);
}

body.page-template-template-dashboard-php .rrc-listing-type-badge--rental {
	background: var(--rr-teal, #2e9c8f);
}

/*
 * ---------- Barra superior redundante en el dashboard (TASK-100) ----------
 * Todas las páginas con template-dashboard.php (provider-dashboard,
 * add-service, my-services, my-bookings, provider-bookings, my-profile,
 * messages...) ya traen su propio sidebar (`.dashboard-nav`) con enlaces a
 * Dashboard/My Bookings/Add Listing/etc. El header propio del dashboard
 * (header-dashboard.php) además pinta el menú público "primary" (hoy solo
 * Home/My Bookings) como fila de pills arriba — duplicando el sidebar sin
 * aportar nada. Selector scopeado estrictamente a
 * `#header-container.dashboard`, que header.php (el header público normal)
 * nunca usa — jamás afecta la navegación pública del sitio.
 */
#header-container.dashboard #navigation {
	display: none;
}

#header-container.dashboard .mmenu-trigger {
	display: none;
}