/**
 * Estilos responsivos (Mobile-First Refactor) del Wedding Planner.
 *
 * Se encola con prioridad tardía (999) en `wp_enqueue_scripts` para cargarse
 * DESPUÉS de los CSS base y de cada módulo, y así poder sobrescribir sus
 * reglas en pantallas pequeñas sin editar cada módulo individualmente.
 *
 * Cubre dos familias de selectores:
 *   1. Nombres genéricos solicitados en la especificación
 *      (.planner-navbar, .nav-tabs-container, .module-header,
 *       .guests-header-actions, .dashboard-stats-grid, .planner-table,
 *       .table-responsive-wrapper, .modal-card, .wedding-modal-card...).
 *   2. Nombres reales presentes en las plantillas del plugin (prefijo .ppwp-*),
 *      imprescindibles para que las reglas tengan efecto real.
 *
 * Punto de ruptura principal: 768px (tablets verticales y móviles).
 *
 * @package PabloPonceWeddingPlanner
 * @since   1.5.0
 */

/* =========================================================================
   1. NAVEGACIÓN Y MENÚ DE MÓDULOS (scroll horizontal de pestañas)
   - La barra superior de módulos se desliza con el dedo, sin barra visible.
   ========================================================================= */
@media ( max-width: 768px ) {

	/* Contenedores desplazables: genéricos + reales. */
	.planner-navbar,
	.nav-tabs-container,
	.ppwp-main-nav,
	.ppwp-nav-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;          /* Firefox */
		-ms-overflow-style: none;       /* IE / Edge legacy */
		padding: 8px 12px !important;
		gap: 8px !important;
		min-width: 0 !important;
	}

	/* Ocultar la barra de scroll visual (WebKit / Blink). */
	.planner-navbar::-webkit-scrollbar,
	.nav-tabs-container::-webkit-scrollbar,
	.ppwp-main-nav::-webkit-scrollbar,
	.ppwp-nav-tabs::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* La lista interna no se comprime: el contenedor padre actúa como
	   único viewport de scroll horizontal, evitando pestañas aplastadas. */
	.ppwp-nav-tabs {
		flex: 0 0 auto !important;
	}

	/* Pestañas en columna (icono arriba, texto abajo), sin comprimirse ni
	   amontonarse: ancho mínimo táctil y el texto permanece en una línea. */
	.nav-tab-item,
	.ppwp-nav-tabs__item {
		display: flex !important;
		flex: 0 0 auto !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 65px !important;
		height: auto !important;
		min-height: 44px;               /* Área táctil cómoda */
		padding: 8px 10px !important;
		font-size: 11px !important;
		line-height: 1.2 !important;
		text-align: center !important;
		white-space: nowrap !important;
	}

	.ppwp-nav-tabs__item .ppwp-icon {
		width: 15px !important;
		height: 15px !important;
		font-size: 0.95rem !important;
	}

	/* La barra superior crece en alto para alojar el padding de la nav. */
	.ppwp-header-bar {
		height: auto !important;
		min-height: var(--ppwp-header-height, 56px);
		padding: 4px 8px !important;
		gap: 6px !important;
		flex-wrap: nowrap !important;
	}

	/* Marca compacta: en móvil se oculta el texto de marca ("Mi Evento Bolivia")
	   para que no choque con el menú de módulos, liberando ancho útil. */
	.planner-brand-title,
	.ppwp-brand__title {
		display: none !important;
	}

	.ppwp-brand {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		margin-right: 4px !important;
	}
}

/* =========================================================================
   2. CABECERAS Y BOTONES DE ACCIÓN (apilado vertical en móvil)
   - Los botones ("+ Agregar", "RSVP", "Check-in", etc.) ocupan todo el ancho.
   ========================================================================= */
@media ( max-width: 768px ) {

	/* Encabezados de módulo en columna. */
	.module-header,
	.guests-header-actions,
	.ppwp-guests__header,
	.ppwp-advances__header,
	.ppwp-vendors__header,
	.ppwp-schedule__header,
	.ppwp-notes__header,
	.ppwp-post-wedding__header,
	.ppwp-seating__header,
	.ppwp-tasks-header {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 10px !important;
	}

	/* Contenedor de acciones de cabecera a ancho completo y en columna. */
	.guests-header-actions,
	.ppwp-guests__actions {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100% !important;
		gap: 10px !important;
	}

	/* Botones/enlaces de acción: ancho completo y contenido centrado. */
	.module-header button,
	.module-header a,
	.guests-header-actions button,
	.guests-header-actions a,
	.ppwp-guests__actions .ppwp-btn,
	.ppwp-guests__actions a.ppwp-btn,
	.ppwp-advances__add,
	.ppwp-vendors__header .ppwp-btn,
	.ppwp-vendors__header a.ppwp-btn,
	.ppwp-tasks-add-btn,
	.ppwp-notes__header .ppwp-btn {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
	}

	/* Las acciones de tarjeta de proveedor se envuelven sin desbordar. */
	.ppwp-vendor-card__actions,
	.ppwp-vendor-card__footer,
	.ppwp-vendor-detail__actions,
	.ppwp-notes__actions,
	.ppwp-note-card__actions {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	/* Barra de botones de los módulos (Plan de Mesas y similares): los
	   botones bajan a una segunda línea en lugar de montarse entre sí. */
	.module-toolbar,
	.tables-action-bar,
	.ppwp-seating__toolbar {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		margin-top: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	/* Botones de esa barra: tamaño táctil uniforme, texto en una sola línea
	   y reparto flexible del ancho disponible (nunca se montan). */
	.ppwp-seating__toolbar .ppwp-btn,
	.ppwp-seating__toolbar .ppwp-btn--small,
	.ppwp-seating__toolbar .ppwp-btn--primary,
	.ppwp-seating__toolbar a.ppwp-btn,
	.ppwp-seating__toolbar .ppwp-seating__switch-btn,
	.module-toolbar button,
	.module-toolbar a,
	.tables-action-bar button,
	.tables-action-bar a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		padding: 8px 12px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		height: auto !important;
		white-space: nowrap !important;
		flex: 1 1 auto !important;
	}

	/* El conmutador Plano/Lista se mantiene agrupado y también se envuelve. */
	.ppwp-seating__toolbar .ppwp-seating__switch {
		display: inline-flex !important;
		flex: 1 1 auto !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
	}

	/* Botones con icono + texto (patrón .btn-with-icon): alineados en línea. */
	.btn-with-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		white-space: nowrap !important;
	}
}

/* =========================================================================
   3. TARJETAS Y TABLAS RESPONSIVAS
   - Dashboard: grilla de 6 tarjetas -> 2 columnas (1 columna en muy angosto).
   - Tablas: contenedor con scroll táctil, sin aplastar las columnas.
   ========================================================================= */
@media ( max-width: 768px ) {

	/* Grilla del Escritorio: 2 columnas. */
	.dashboard-stats-grid,
	.ppwp-dashboard__widgets {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Neutraliza el flex-basis de escritorio de las tarjetas. */
	.ppwp-dashboard__widget {
		flex: initial !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 16px 12px !important;
	}

	.ppwp-dashboard,
	.ppwp-guests,
	.ppwp-advances {
		padding: 14px !important;
	}

	.ppwp-dashboard__title {
		font-size: 2rem !important;
	}

	.ppwp-dashboard__widget-value {
		font-size: 22px !important;
	}

	.ppwp-dashboard__summary {
		padding: 18px 14px !important;
	}

	/* Métricas de Invitados: una sola columna. */
	.ppwp-guests__metrics {
		grid-template-columns: 1fr !important;
	}

	/* Contenedores de tabla desplazables suavemente (scroll táctil). */
	.table-responsive-wrapper,
	.planner-table-wrapper,
	.ppwp-guests__content,
	.ppwp-advances__panel,
	.ppwp-budget__table-wrap {
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.table-responsive-wrapper::-webkit-scrollbar,
	.planner-table-wrapper::-webkit-scrollbar,
	.ppwp-guests__content::-webkit-scrollbar,
	.ppwp-advances__panel::-webkit-scrollbar,
	.ppwp-budget__table-wrap::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* Ancho mínimo legible: las columnas conservan tamaño y hacen scroll. */
	.planner-table,
	.ppwp-guests__table,
	.ppwp-advances__table,
	.ppwp-budget__items-table,
	.ppwp-budget__payments-table {
		min-width: 620px !important;
	}
}

/* =========================================================================
   4. MODALES ADAPTADOS A PANTALLAS TÁCTILES
   - Ocupan ~95% del ancho del viewport, con padding cómodo para escribir.
   ========================================================================= */
@media ( max-width: 768px ) {

	/* Modales centrados estándar.
	   Se excluyen `.ppwp-checkin-modal-dialog` (web-app de check-in con ancho
	   propio) y `.ppwp-fav-panel__dialog` (panel lateral deslizante), que ya
	   cuentan con su propia adaptación móvil. */
	.modal-card,
	.wedding-modal-card,
	.ppwp-modal,
	.ppwp-tasks-modal,
	.ppwp-guest-modal-dialog,
	.ppwp-vendor-modal__dialog,
	.ppwp-vendor-detail__dialog,
	.ppwp-schedule__modal,
	.ppwp-projects-modal__dialog {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 90vh !important;
		margin: 10px auto !important;
		padding: 16px !important;
		border-radius: 12px !important;
		box-sizing: border-box !important;
		overflow-y: auto !important;
	}

	/* Modales tipo "hoja inferior" (bottom sheet): conservan su geometría
	   inferior animada, pero se adaptan al ancho y alto del móvil. */
	.ppwp-advances-modal__dialog,
	.ppwp-budget__modal,
	.ppwp-seating__modal {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 90vh !important;
		padding: 16px !important;
		box-sizing: border-box !important;
		overflow-y: auto !important;
	}

	/* Formularios internos de los modales: una sola columna. */
	.ppwp-field-grid,
	.ppwp-advances-form__grid,
	.ppwp-vendor-modal__grid,
	.ppwp-budget__form-row,
	.ppwp-form-row {
		grid-template-columns: 1fr !important;
		flex-direction: column !important;
	}
}

/* =========================================================================
   5. PANTALLAS MUY ESTRECHAS ( <= 480px )
   - Dashboard a 1 columna y cabecera aún más compacta.
   ========================================================================= */
@media ( max-width: 480px ) {

	.dashboard-stats-grid,
	.ppwp-dashboard__widgets {
		grid-template-columns: 1fr !important;
	}

	.ppwp-dashboard__title {
		font-size: 1.7rem !important;
	}

	/* Libera espacio horizontal en la barra superior. */
	.ppwp-brand__subtitle {
		display: none !important;
	}

	.nav-tab-item,
	.ppwp-nav-tabs__item {
		min-width: 58px !important;
		padding: 8px 8px !important;
		font-size: 10px !important;
	}

	.module-header button,
	.guests-header-actions button,
	.ppwp-guests__actions .ppwp-btn {
		font-size: 13px !important;
	}
}

/* =========================================================================
   6. ORIENTACIÓN HORIZONTAL EN MÓVILES (alturas reducidas)
   ========================================================================= */
@media ( max-width: 768px ) and ( orientation: landscape ) {

	.modal-card,
	.wedding-modal-card,
	.ppwp-modal,
	.ppwp-guest-modal-dialog,
	.ppwp-checkin-modal-dialog,
	.ppwp-vendor-modal__dialog,
	.ppwp-budget__modal,
	.ppwp-advances-modal__dialog {
		max-height: 92vh !important;
	}
}

/* =========================================================================
   7. MENÚ HAMBURGUESA MÓVIL (colapsar / expandir módulos)
   - En móvil (< 768px) la lista de módulos se colapsa tras un botón (☰) y
     se despliega como menú vertical a ancho completo.
   - Se combinan los nombres genéricos de la especificación
     (.planner-header-mobile, .mobile-menu-btn, .planner-navbar,
      .nav-tab-item, .current-module-title) con las clases reales del plugin
     (.ppwp-*) para que las reglas tengan efecto real.
   ========================================================================= */

/* En escritorio ni la cabecera móvil ni el botón hamburguesa se muestran. */
.planner-header-mobile,
.mobile-menu-btn,
#mobile-menu-toggle {
	display: none;
}

@media ( max-width: 768px ) {

	/* La barra superior permite apilar la cabecera móvil y el menú. */
	.ppwp-header-bar {
		flex-wrap: wrap !important;
	}

	/* La marca se oculta: la identidad la aporta el botón del módulo actual. */
	.ppwp-brand {
		display: none !important;
	}

	/* Cabecera móvil (ocupa el ancho disponible, primera fila). */
	.planner-header-mobile {
		display: flex !important;
		align-items: center !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		order: 1 !important;
	}

	.planner-header-mobile .mobile-header-right {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin-left: auto !important;
	}

	/* Botón hamburguesa visible y táctil. */
	.mobile-menu-btn,
	#mobile-menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		background: #ffffff !important;
		border: 1px solid #e0e0e0 !important;
		padding: 8px 12px !important;
		border-radius: 8px !important;
		font-weight: 600 !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
		color: var(--ppwp-text-primary, #2c2c2c) !important;
		cursor: pointer !important;
		text-align: left !important;
	}

	.mobile-menu-btn .hamburger-icon {
		font-size: 18px !important;
		line-height: 1 !important;
		flex: 0 0 auto !important;
	}

	.mobile-menu-btn .current-module-title {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* Acciones de cabecera (proyecto + pantalla completa) al extremo derecho. */
	.ppwp-header-bar .ppwp-header-actions {
		order: 2 !important;
		margin-left: 8px !important;
	}

	/* Menú de módulos oculto por defecto en móvil. */
	.ppwp-main-nav.mobile-collapsed,
	.planner-navbar.mobile-collapsed {
		display: none !important;
	}

	/* Menú desplegado: lista vertical a ancho completo (segunda fila). */
	.ppwp-main-nav.mobile-expanded,
	.planner-navbar.mobile-expanded {
		display: flex !important;
		flex-direction: column !important;
		flex-basis: 100% !important;
		order: 3 !important;
		width: 100% !important;
		max-width: 100% !important;
		background: #ffffff !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
		border-radius: 12px !important;
		padding: 12px !important;
		margin-top: 8px !important;
		gap: 4px !important;
		overflow: visible !important;
	}

	/* La lista interna ocupa todo el ancho dentro del menú desplegado. */
	.ppwp-main-nav.mobile-expanded .ppwp-nav-tabs,
	.planner-navbar.mobile-expanded .ppwp-nav-tabs {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		gap: 4px !important;
		overflow: visible !important;
	}

	/* Cada pestaña como fila completa dentro del menú desplegado. */
	.ppwp-main-nav.mobile-expanded .ppwp-nav-tabs__item,
	.ppwp-main-nav.mobile-expanded .nav-tab-item,
	.planner-navbar.mobile-expanded .nav-tab-item {
		width: 100% !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 10px 14px !important;
		border-radius: 6px !important;
		font-size: 14px !important;
		line-height: 1.3 !important;
		text-align: left !important;
		gap: 10px !important;
		white-space: normal !important;
		height: auto !important;
		min-height: 44px !important;
	}

	.ppwp-main-nav.mobile-expanded .ppwp-nav-tabs__item .ppwp-icon,
	.planner-navbar.mobile-expanded .nav-tab-item .ppwp-icon {
		margin-bottom: 0 !important;
		flex: 0 0 auto !important;
	}
}

/* =========================================================================
	  8. MÓDULO INVITADOS EN MÓVIL — CORRECCIÓN DEL RECORTE VERTICAL
	  - El borde inferior de las métricas ("Totales Globales") y las últimas
	    filas del listado de invitados quedaban cortados en pantallas pequeñas
	    porque el layout combinaba `.ppwp-wrapper { min-height: 100vh }` con
	    `.ppwp-content-area { flex: 1; overflow-y: auto }`, creando una región
	    de scroll interna más baja que su contenido.
	  - Solución: anular alturas fijas, liberar el desbordamiento y reservar
	    espacio inferior (60px) para que el scroll alcance el final del módulo.
	  - Mapeo de los selectores de la especificación a los reales del plugin:
	      .guest-stats-card        -> .ppwp-metric-card
	      .guests-summary-wrapper  -> .ppwp-guests__metrics
	      .guests-stats-grid       -> .ppwp-guests__metrics
	      .guests-container        -> .ppwp-guests
	      .guests-module-wrap      -> .ppwp-guests
	      #guests-tab-content      -> #ppwp-content-guests
	  ========================================================================= */
@media ( max-width: 768px ) {

	/* 8.1 El contenedor raíz deja de recortar altura: el documento hace scroll. */
	.ppwp-wrapper {
		height: auto !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		overflow: visible !important;
	}

	/* 8.2 Sin alturas fijas ni recortes en tarjetas de métricas y contenedores.
	   Cubre: .guest-stats-card, .guests-summary-wrapper, .guests-container.
	   NOTA: no se incluye .ppwp-guests__content porque su overflow-x debe
	   permanecer en "auto" para no romper el scroll horizontal de la tabla. */
	.ppwp-metric-card,
	.guest-stats-card,
	.ppwp-guests__metrics,
	.guests-summary-wrapper,
	.guests-stats-grid,
	.ppwp-guests,
	.guests-container,
	.ppwp-tab-content--active,
	#ppwp-content-guests {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	/* 8.3 El área de contenido principal desplaza el contenido verticalmente. */
	.ppwp-content-area {
		height: auto !important;
		max-height: none !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
	}

	/* 8.4 El contenedor padre del módulo reserva 60px al final y permite scroll.
	   Cubre: .guests-module-wrap, #guests-tab-content. */
	.ppwp-guests,
	.ppwp-module-wrap,
	.guests-module-wrap,
	.guests-container,
	#ppwp-content-guests,
	#guests-tab-content {
		padding-bottom: 60px !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* 8.5 Métricas ("Totales Globales") apiladas en una columna, sin alto fijo.
	   Cubre: .guests-stats-grid. */
	.ppwp-guests__metrics,
	.guests-stats-grid,
	.guests-summary-wrapper,
	.guest-stats-grid {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 16px !important;
		height: auto !important;
		max-height: none !important;
	}

	/* 8.6 Las tarjetas de métricas ocupan el ancho completo y crecen con su texto. */
	.ppwp-guests__metrics > .ppwp-metric-card,
	.guests-stats-grid > .guest-stats-card {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}
}

/* =========================================================================
	  9. TABLA DE INVITADOS EN MÓVIL — VISTA DE TARJETAS (Opción B)
	  - La tabla tenía 7 columnas (Nombre, Lado, Grupo, Pases, RSVP, Mesa,
	    Acciones) y se recortaba a la derecha, ocultando "Mesa" y "Acciones".
	  - Se transforma cada fila en una tarjeta vertical: la cabecera se oculta y
	    cada celda muestra su etiqueta vía `content: attr(data-label)`
	    (los atributos data-label se generan en modules/guests/js/guests.js).
	  - Como respaldo (Opción A) el contenedor conserva desplazamiento
	    horizontal táctil si algún contenido excediera el ancho.
	  - Mapeo de selectores de la especificación a los reales:
	      .guests-table        -> .ppwp-guests__table
	      .guests-table-wrapper -> .ppwp-guests__content
	  ========================================================================= */
@media ( max-width: 768px ) {

	/* 9.1 En móvil la tabla de 7 columnas se OCULTA y se muestra el acordeón
	   desplegable (.ppwp-guests__accordion), definido íntegramente en
	   modules/guests/css/guests.css. Aquí solo se controla la visibilidad
	   para que esta hoja (que carga al final) no reactive la tabla. */
	.ppwp-guests__content {
		display: none !important;
	}

	.ppwp-guests__accordion {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Contenedor genérico con scroll táctil (por compatibilidad). */
	.table-responsive,
	.guests-table-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 20px !important;
		box-sizing: border-box !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* 9.2 Ancho mínimo de la tabla en el modo scroll (respaldo Opción A).
	   Solo se aplica al contenedor genérico; la tabla real recibe min-width:0
	   en 9.3 para permitir la vista de tarjetas sin scroll horizontal. */
	.guests-table-wrapper table {
		min-width: 650px !important;
		width: 100% !important;
	}

	/* 9.3 Modo tarjetas: se neutraliza el scroll horizontal y el ancho mínimo. */
	.ppwp-guests__table,
	.guests-table {
		min-width: 0 !important;
		width: 100% !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	/* 9.4 Las filas dejan de ser celdas de tabla y pasan a bloques apilados. */
	.ppwp-guests__table,
	.ppwp-guests__table tbody,
	.ppwp-guests__table tr,
	.ppwp-guests__table td,
	.guests-table,
	.guests-table tbody,
	.guests-table tr,
	.guests-table td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 9.5 Se oculta la cabecera original de la tabla. */
	.ppwp-guests__table thead,
	.guests-table thead {
		display: none !important;
	}

	/* 9.6 Cada fila es una tarjeta de invitado. */
	.ppwp-guests__table tbody tr,
	.guests-table tbody tr {
		background: #ffffff !important;
		margin-bottom: 12px !important;
		padding: 14px !important;
		border: 1px solid var(--ppwp-border-color, #e4e4e7) !important;
		border-radius: 12px !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	}

	/* Las filas de estado (cargando / sin datos) conservan estilo plano. */
	.ppwp-guests__table tbody tr.ppwp-guests__loading,
	.ppwp-guests__table tbody tr.ppwp-guests__empty-row {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 8px !important;
	}

	/* 9.7 Cada celda: etiqueta a la izquierda, valor a la derecha. */
	.ppwp-guests__table td,
	.guests-table td {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 8px 0 !important;
		border-bottom: 1px dashed #f0f0f0 !important;
		white-space: normal !important;
		text-align: right !important;
	}

	/* 9.8 Etiqueta del campo generada desde data-label. */
	.ppwp-guests__table td[data-label]::before,
	.guests-table td[data-label]::before {
		content: attr(data-label) !important;
		flex: 0 0 auto !important;
		margin-right: 12px !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		color: var(--ppwp-text-muted, #71717a) !important;
		text-align: left !important;
	}

	/* 9.9 La primera celda (Nombre) actúa como título de la tarjeta. */
	.ppwp-guests__table td:first-child,
	.guests-table td:first-child {
		justify-content: flex-start !important;
		text-align: left !important;
		font-size: 16px !important;
		padding-bottom: 10px !important;
		border-bottom: 1px solid var(--ppwp-border-color, #e4e4e7) !important;
	}
	.ppwp-guests__table td:first-child::before,
	.guests-table td:first-child::before {
		display: none !important;
	}

	/* 9.10 La última celda (Acciones) ocupa el ancho y apila sus botones. */
	.ppwp-guests__table td:last-child,
	.guests-table td:last-child {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
		border-bottom: none !important;
		margin-top: 8px !important;
	}
	.ppwp-guests__table td:last-child::before,
	.guests-table td:last-child::before {
		align-self: flex-start !important;
		text-align: left !important;
	}

	/* 9.11 Botones (Editar/Eliminar y RSVP rápido) cómodos al tacto. */
	.ppwp-guests__table .ppwp-guests__row-actions,
	.guests-table .ppwp-guests__row-actions,
	.ppwp-guests__table .ppwp-rsvp-actions,
	.guests-table .ppwp-rsvp-actions {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px !important;
		width: 100% !important;
	}
	.ppwp-guests__table .ppwp-guests__row-actions .ppwp-btn,
	.guests-table .ppwp-guests__row-actions .ppwp-btn {
		flex: 1 1 auto !important;
		min-height: 40px !important;
	}
}