/**
 * Estilos del módulo Presupuesto - Interfaz de 2 columnas.
 *
 * @package PabloPonceWeddingPlanner
 * @since   1.0.0
 */

/* ===================================================================
   CONTENEDOR PRINCIPAL
   =================================================================== */
.ppwp-budget {
	position: relative;
	display: flex;
	gap: 0;
	height: calc(100vh - 160px);
	min-height: 550px;
	background: #f8f9fb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ===================================================================
   COLUMNA IZQUIERDA: SIDEBAR DE CATEGORÍAS
   =================================================================== */
.ppwp-budget__sidebar {
	width: 280px;
	min-width: 280px;
	background: #fff;
	border-right: 1px solid #e8ecf0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ppwp-budget__sidebar-header {
	padding: 20px 18px 14px;
	border-bottom: 1px solid #f0f2f5;
}

.ppwp-budget__sidebar-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8b95a1;
	margin: 0 0 14px;
}

.ppwp-budget__btn-add-category {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	border: 1.5px dashed #c8cfd8;
	border-radius: 10px;
	background: #fafbfc;
	color: #5a6570;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ppwp-budget__btn-add-category:hover {
	border-color: #a0b4c8;
	background: #f0f4f8;
	color: #3a4a5c;
}

.ppwp-budget__btn-add-category .ppwp-icon {
	color: #7c8fa0;
}

/* ── Lista de Categorías ─────────────────────────────────────────── */
.ppwp-budget__category-list {
	list-style: none;
	margin: 0;
	padding: 8px 10px;
	overflow-y: auto;
	flex: 1;
}

.ppwp-budget__category-list-loading {
	padding: 24px 14px;
	text-align: center;
	color: #aab4be;
	font-size: 13px;
	font-style: italic;
}

.ppwp-budget__category-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
	margin-bottom: 2px;
	position: relative;
}

.ppwp-budget__category-item:hover {
	background: #f3f6fa;
}

.ppwp-budget__category-item--active {
	background: #eef3ff;
	box-shadow: inset 3px 0 0 #5b8def;
}

.ppwp-budget__category-item--active .ppwp-budget__category-name {
	color: #2d4b8e;
	font-weight: 700;
}

.ppwp-budget__category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #f0f4fa;
	color: #5b7fa5;
	flex-shrink: 0;
}

.ppwp-budget__category-item--active .ppwp-budget__category-icon {
	background: #dce6f8;
	color: #3e6bce;
}

.ppwp-budget__category-info {
	flex: 1;
	min-width: 0;
}

.ppwp-budget__category-name {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: #3a4a5c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ppwp-budget__category-amount {
	display: block;
	font-size: 12px;
	color: #8b95a1;
	margin-top: 2px;
	font-weight: 500;
}

.ppwp-budget__category-arrow {
	color: #c0c8d2;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.ppwp-budget__category-item--active .ppwp-budget__category-arrow {
	color: #5b8def;
	transform: translateX(2px);
}

/* Badge de conteo de items */
.ppwp-budget__category-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #e8ecf2;
	color: #6b7885;
	font-size: 10.5px;
	font-weight: 700;
	margin-left: 4px;
}

.ppwp-budget__category-item--active .ppwp-budget__category-badge {
	background: #d0ddf5;
	color: #3e6bce;
}

/* ===================================================================
   COLUMNA DERECHA: PANEL DINÁMICO
   =================================================================== */
.ppwp-budget__panel {
	flex: 1;
	overflow-y: auto;
	padding: 28px 32px;
	background: #f8f9fb;
}

/* ===================================================================
   VISTA GENERAL (OVERVIEW)
   =================================================================== */
.ppwp-budget__overview {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ── Bloque Dividido: Coste Estimado / Coste Final ─────────────────── */
.ppwp-budget__budget-split {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 14px;
	border: 1px solid #eef1f5;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	overflow: hidden;
}

.ppwp-budget__split-side {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 24px;
	text-align: center;
	gap: 8px;
}

.ppwp-budget__split-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #f0f4fa;
	color: #5b7fa5;
	margin-bottom: 4px;
}

.ppwp-budget__split-side--right .ppwp-budget__split-icon {
	background: #edf8f3;
	color: #2e8b57;
}

.ppwp-budget__split-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8b95a1;
}

.ppwp-budget__split-value {
	font-size: 32px;
	font-weight: 800;
	color: #2c3e50;
	line-height: 1.2;
}

.ppwp-budget__split-value--final {
	color: #1e6f5c;
}

.ppwp-budget__split-action {
	background: none;
	border: 1.5px solid #d0ddf5;
	border-radius: 8px;
	color: #3e6bce;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 18px;
	margin-top: 6px;
	transition: all 0.15s;
}

.ppwp-budget__split-action:hover {
	background: #eef3ff;
	border-color: #b8ccef;
}

/* ── Divisor Vertical ──────────────────────────────────────────────── */
.ppwp-budget__split-divider {
	display: flex;
	align-items: stretch;
	padding: 20px 0;
}

.ppwp-budget__split-divider-line {
	display: block;
	width: 1px;
	background: #e8ecf0;
	border-radius: 1px;
}

/* ── Breakdown Pagado/Pendiente ────────────────────────────────────── */
.ppwp-budget__split-breakdown {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #6b7885;
	margin-top: 4px;
}

.ppwp-budget__breakdown {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ppwp-budget__breakdown--paid {
	color: #27ae60;
}

.ppwp-budget__breakdown--pending {
	color: #e67e22;
}

/* Presupuesto restante (Presupuesto Estimado - Gastos asignados) */
.ppwp-budget__breakdown--remaining {
	color: #3e6bce;
}

.ppwp-budget__breakdown--remaining.ppwp-budget__breakdown--negative {
	color: #d64545;
}

.ppwp-budget__separator {
	color: #d0d8e0;
	font-weight: 300;
}

/* ── Sección Gráfico Donut ─────────────────────────────────────────── */
.ppwp-budget__chart-section {
	background: #fff;
	border-radius: 14px;
	padding: 24px 28px;
	border: 1px solid #eef1f5;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ppwp-budget__chart-heading {
	font-size: 15px;
	font-weight: 700;
	color: #3a4a5c;
	margin: 0 0 20px;
	text-align: center;
}

.ppwp-budget__chart-body {
	display: flex;
	align-items: center;
	gap: 32px;
}

.ppwp-budget__chart-canvas-wrap {
	flex-shrink: 0;
	width: 220px;
	height: 220px;
	overflow: visible !important;
}

.ppwp-budget__chart-canvas-wrap canvas {
	overflow: visible !important;
}

.ppwp-budget__chart-legend {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-content: center;
}

.ppwp-budget__chart-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #5a6570;
	width: calc(50% - 8px);
	min-width: 130px;
}

.ppwp-budget__chart-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex-shrink: 0;
}

.ppwp-budget__chart-empty {
	text-align: center;
	padding: 40px 20px;
	color: #a0aab4;
	font-size: 13.5px;
}

/* ── Input Grande (modal global) ───────────────────────────────────── */
.ppwp-budget__input--lg {
	font-size: 20px;
	font-weight: 700;
	padding: 12px 16px;
	text-align: center;
}

/* ===================================================================
   VISTA DETALLE DE CATEGORÍA
   =================================================================== */
.ppwp-budget__detail {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ── Encabezado ───────────────────────────────────────────────────── */
.ppwp-budget__detail-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}

.ppwp-budget__detail-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ppwp-budget__detail-title-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ppwp-budget__detail-title {
	font-size: 20px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0;
	cursor: pointer;
	border-bottom: 1.5px dashed transparent;
	transition: border-color 0.2s;
}

.ppwp-budget__detail-title:hover {
	border-bottom-color: #c0c8d2;
}

.ppwp-budget__btn-edit-title {
	background: none;
	border: none;
	color: #a0aab4;
	cursor: pointer;
	padding: 3px;
	border-radius: 4px;
	transition: all 0.15s;
}

.ppwp-budget__btn-edit-title:hover {
	color: #5b8def;
	background: #eef3ff;
}

.ppwp-budget__detail-header-right {
	display: flex;
	gap: 8px;
}

.ppwp-budget__btn-delete-category {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border: 1px solid #fdd;
	border-radius: 8px;
	background: #fff5f5;
	color: #d14343;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.ppwp-budget__btn-delete-category:hover {
	background: #fee;
	border-color: #fcc;
	color: #b03030;
}

/* ── Totales + Progress Bar ───────────────────────────────────────── */
.ppwp-budget__detail-totals {
	background: #fff;
	border-radius: 12px;
	padding: 20px 24px;
	border: 1px solid #eef1f5;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.ppwp-budget__detail-total-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ppwp-budget__detail-total-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8b95a1;
}

.ppwp-budget__detail-total-value {
	font-size: 20px;
	font-weight: 800;
	color: #2c3e50;
}

.ppwp-budget__progress-wrapper {
	flex: 1;
	min-width: 200px;
}

.ppwp-budget__progress-info {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #6b7885;
	margin-bottom: 6px;
}

.ppwp-budget__progress-bar-bg {
	width: 100%;
	height: 8px;
	background: #e8ecf2;
	border-radius: 4px;
	overflow: hidden;
}

.ppwp-budget__progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #43c99b, #27ae60);
	border-radius: 4px;
	transition: width 0.4s ease;
}

/* ── Tabla de Gastos ──────────────────────────────────────────────── */
.ppwp-budget__items-section {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eef1f5;
	overflow: hidden;
}

.ppwp-budget__items-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #f0f2f5;
}

.ppwp-budget__items-title {
	font-size: 14px;
	font-weight: 700;
	color: #3a4a5c;
	margin: 0;
}

.ppwp-budget__btn-add-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border: 1px solid #d0ddf5;
	border-radius: 8px;
	background: #eef3ff;
	color: #3e6bce;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.ppwp-budget__btn-add-item:hover {
	background: #dce6f8;
	border-color: #b8ccef;
}

.ppwp-budget__table-wrap {
	overflow-x: auto;
}

.ppwp-budget__items-table {
	width: 100%;
	border-collapse: collapse;
}

.ppwp-budget__items-table th {
	padding: 11px 16px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8b95a1;
	background: #fafbfc;
	border-bottom: 1px solid #eef1f5;
}

.ppwp-budget__items-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f4f6f8;
	font-size: 13.5px;
	color: #3a4a5c;
}

.ppwp-budget__items-table tbody tr:hover {
	background: #fafcfd;
}

.ppwp-budget__items-table tfoot td {
	padding: 12px 16px;
	background: #fafbfc;
	border-top: 2px solid #e8ecf0;
	font-size: 13.5px;
}

.ppwp-budget__col-concept { width: auto; }
.ppwp-budget__col-estimated { width: 130px; text-align: right; }
.ppwp-budget__col-final { width: 120px; text-align: right; }
.ppwp-budget__col-paid { width: 110px; text-align: right; }
.ppwp-budget__col-actions { width: 90px; text-align: center; }

.ppwp-budget__items-table .ppwp-budget__col-estimated,
.ppwp-budget__items-table .ppwp-budget__col-final,
.ppwp-budget__items-table .ppwp-budget__col-paid {
	text-align: right;
}

.ppwp-budget__empty-row td {
	text-align: center !important;
	padding: 32px 16px;
	color: #aab4be;
	font-size: 13px;
	font-style: italic;
}

/* ── Botones de acción inline (lápiz y papelera) ──────────────────── */
.ppwp-budget__row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.ppwp-budget__btn-action {
	background: transparent;
	border: none;
	padding: 6px;
	border-radius: 6px;
	cursor: pointer;
	color: #71717a;
	font-size: 1rem;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ppwp-budget__btn-action--edit:hover {
	background-color: #f4f4f5;
	color: #2563eb;
}

.ppwp-budget__btn-action--delete:hover {
	background-color: #fef2f2;
	color: #dc2626;
}

/* ── Botón Volver ─────────────────────────────────────────────────── */
.ppwp-budget__btn-back {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid #dde3ea;
	border-radius: 8px;
	background: #fff;
	color: #5a6570;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	align-self: flex-start;
}

.ppwp-budget__btn-back:hover {
	background: #f3f6fa;
	border-color: #c0c8d2;
}

/* En móvil mostramos el botón volver */
@media (max-width: 768px) {
	.ppwp-budget__btn-back {
		display: flex;
	}
}

/* ===================================================================
   MODALES
   =================================================================== */
.ppwp-budget__modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 20, 30, 0.45);
	backdrop-filter: blur(2px);
}

.ppwp-budget__modal {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.15);
	width: 90%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	animation: ppwpBudgetFadeIn 0.2s ease;
}

.ppwp-budget__modal--small {
	max-width: 380px;
}

@keyframes ppwpBudgetFadeIn {
	from { opacity: 0; transform: translateY(-12px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ppwp-budget__modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	border-bottom: 1px solid #eef1f5;
}

.ppwp-budget__modal-header h3 {
	font-size: 16px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0;
}

.ppwp-budget__modal-close {
	background: none;
	border: none;
	color: #a0aab4;
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: all 0.15s;
}

.ppwp-budget__modal-close:hover {
	color: #5a6570;
	background: #f0f2f5;
}

.ppwp-budget__modal-body {
	padding: 20px 22px;
}

.ppwp-budget__modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 22px;
	border-top: 1px solid #f0f2f5;
}

/* ── Formularios ──────────────────────────────────────────────────── */
.ppwp-budget__form-group {
	margin-bottom: 16px;
}

.ppwp-budget__form-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #5a6570;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ppwp-budget__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ppwp-budget__input {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid #dde3ea;
	border-radius: 8px;
	font-size: 13.5px;
	color: #2c3e50;
	background: #fff;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.ppwp-budget__input:focus {
	outline: none;
	border-color: #5b8def;
	box-shadow: 0 0 0 3px rgba(91,141,239,0.12);
}

.ppwp-budget__input::placeholder {
	color: #bcc5cf;
}

/* ── Botones del modal ────────────────────────────────────────────── */
.ppwp-budget__btn {
	padding: 9px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	border: none;
}

.ppwp-budget__btn--primary {
	background: #5b8def;
	color: #fff;
}

.ppwp-budget__btn--primary:hover {
	background: #4a7de0;
}

.ppwp-budget__btn--secondary {
	background: #f0f2f5;
	color: #5a6570;
}

.ppwp-budget__btn--secondary:hover {
	background: #e4e8ed;
}

.ppwp-budget__btn--danger {
	background: #e74c3c;
	color: #fff;
}

.ppwp-budget__btn--danger:hover {
	background: #c0392b;
}

/* ===================================================================
   CABECERA CENTRADA: TITULO + SUB-NAVEGACION (PRESUPUESTO | PAGOS)
   =================================================================== */
.ppwp-budget-header-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	gap: 12px;
	text-align: center;
}

.ppwp-budget-main-title {
	font-size: 22px;
	font-weight: 800;
	color: #2c3e50;
	margin: 0;
}

/* Segmented Toggle */
.ppwp-subnav-toggle {
	display: inline-flex;
	background-color: #f1f1f4;
	padding: 4px;
	border-radius: 8px;
	border: 1px solid var(--ppwp-border-color, #e4e4e7);
}

.ppwp-subnav-btn {
	padding: 6px 20px;
	border: none;
	background: transparent;
	border-radius: 6px;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--ppwp-text-muted, #71717a);
	cursor: pointer;
	transition: all 0.2s ease;
}

.ppwp-subnav-btn.active {
	background-color: #ffffff;
	color: var(--ppwp-text-primary, #1a1a1a);
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Botones de accion flotantes (descargar, imprimir) */
.ppwp-budget__top-actions {
	position: absolute;
	top: 12px;
	right: 18px;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 5;
}

.ppwp-budget__btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	background: #f8f9fb;
	border-radius: 8px;
	color: #6b7885;
	cursor: pointer;
	transition: all 0.15s;
}

.ppwp-budget__btn-icon:hover {
	background: #eef3ff;
	color: #5b8def;
}

/* Contenedor de vistas */
.ppwp-budget__views {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.ppwp-budget__view {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.ppwp-budget__view--active {
	display: flex;
}

/* Vista Pagos: full-width */
.ppwp-budget--pagos-active .ppwp-budget__view#ppwp-budget-view-pagos {
	display: flex;
	flex: 1;
	overflow-y: auto;
}

/* ===================================================================
   VISTA PAGOS: TABLA DE HISTORIAL
   =================================================================== */
.ppwp-budget__payments-section {
	padding: 28px 32px;
	flex: 1;
	background: #f8f9fb;
}

.ppwp-budget__payments-title {
	font-size: 20px;
	font-weight: 800;
	color: #2c3e50;
	margin: 0 0 20px;
}

.ppwp-budget__payments-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eef1f5;
	overflow: hidden;
}

.ppwp-budget__payments-table th {
	padding: 11px 16px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8b95a1;
	background: #fafbfc;
	border-bottom: 1px solid #eef1f5;
}

.ppwp-budget__payments-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #f4f6f8;
	font-size: 13.5px;
	color: #3a4a5c;
	vertical-align: middle;
}

.ppwp-budget__payments-table tbody tr:hover {
	background: #fafcfd;
}

/* Columnas */
.ppwp-budget__col-pay-status { width: 110px; }
.ppwp-budget__col-pay-expense { width: auto; }
.ppwp-budget__col-pay-details { width: 140px; }
.ppwp-budget__col-pay-amount { width: 130px; text-align: right; }
.ppwp-budget__col-pay-actions { width: 50px; text-align: center; }

/* Badge PAGADO */
.ppwp-budget__pay-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 20px;
	background: #e6f7ee;
	color: #1e7e4a;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.ppwp-budget__pay-badge .ppwp-icon {
	color: #27ae60;
}

/* Concepto + Categoría */
.ppwp-budget__pay-concept {
	display: block;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 2px;
}

.ppwp-budget__pay-category {
	display: block;
	font-size: 12px;
	color: #8b95a1;
}

/* Fecha */
.ppwp-budget__pay-date {
	font-size: 13px;
	color: #6b7885;
}

/* Columna importe */
.ppwp-budget__col-pay-amount {
	text-align: right;
	font-weight: 700;
}

/* Botón editar pago */
.ppwp-budget__btn-edit-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #a0aab4;
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.15s;
}

.ppwp-budget__btn-edit-pay:hover {
	background: #eef3ff;
	color: #5b8def;
}

/* El contenedor ppwp-budget necesita ser flex-col ahora */
.ppwp-budget {
	display: flex;
	flex-direction: column;
}

/* La vista de presupuesto mantiene su layout interno */
.ppwp-budget__view#ppwp-budget-view-presupuesto {
	display: flex;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 768px) {
	.ppwp-budget {
		flex-direction: column;
		height: auto;
		min-height: auto;
	}

	.ppwp-budget__sidebar {
		display: none !important;
	}

	.ppwp-budget__sidebar.active {
		display: block !important;
		width: 100%;
		min-width: auto;
		max-height: 50vh;
		border-right: none;
		border-bottom: 1px solid #e8ecf0;
	}

	.ppwp-budget__category-list {
		max-height: 35vh;
	}

	.ppwp-budget__panel {
		padding: 20px 14px;
	}

	.ppwp-budget__budget-split {
		flex-direction: column;
	}

	.ppwp-budget__split-divider {
		padding: 10px 20px;
		justify-content: center;
	}

	.ppwp-budget__split-divider-line {
		width: auto;
		height: 1px;
	}

	.ppwp-budget__chart-body {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
	}

	.ppwp-budget__chart-canvas-wrap {
		width: 100%;
		max-width: 300px;
		height: 260px;
		margin: 0 auto;
	}

	.ppwp-budget__chart-legend-item {
		width: 100%;
	}

	.ppwp-budget__panel {
		overflow-x: hidden;
	}

	.ppwp-budget__detail-totals {
		flex-direction: column;
		align-items: flex-start;
	}

	.ppwp-budget__progress-wrapper {
		width: 100%;
	}

	.ppwp-budget__form-row {
		grid-template-columns: 1fr;
	}

	/* Ocultar panel overview cuando hay detail activo en móvil */
	.ppwp-budget--detail-active .ppwp-budget__sidebar,
	.ppwp-budget--detail-active .ppwp-budget__overview {
		display: none;
	}

	.ppwp-budget--detail-active .ppwp-budget__detail {
		display: flex !important;
	}

	.ppwp-budget__btn-back {
		display: flex;
	}
}

@media (max-width: 480px) {
	.ppwp-budget__modal {
		width: 92%;
		max-width: 450px;
		border-radius: 16px;
		margin: 0 auto;
		max-height: 85vh;
	}

	.ppwp-budget__modal-overlay {
		align-items: center;
		justify-content: center;
	}

	.ppwp-budget__detail-header {
		flex-direction: column;
	}

	.ppwp-budget__detail-header-right {
		width: 100%;
	}

	.ppwp-budget__btn-delete-category {
		width: 100%;
		justify-content: center;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
	  CENTRADO ABSOLUTO DEL MODAL – Fix "Modificar Presupuesto" (móvil)
	  Los alias .budget-modal-overlay / .budget-modal-card / #edit-budget-modal
	  y .modal-content se incluyen como puente junto a las clases reales
	  del módulo (.ppwp-budget__modal-overlay / .ppwp-budget__modal).
	  ═══════════════════════════════════════════════════════════════════════ */

/* Overlay: capa fija que centra su contenido en el viewport */
.ppwp-budget__modal-overlay,
.budget-modal-overlay,
.modal-budget-backdrop,
#edit-budget-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999 !important;
}

/* Alias sin reglas previas: garantizar el contenedor flex centrado.
	  La clase real NO lleva display con !important porque jQuery controla
	  su visibilidad con el estilo inline (display: none / flex). */
.budget-modal-overlay,
.modal-budget-backdrop,
#edit-budget-modal {
	display: flex !important;
}

/* Tarjeta: flotando en el centro exacto (vertical + horizontal) */
.ppwp-budget__modal-overlay > .ppwp-budget__modal,
.budget-modal-card,
#edit-budget-modal .modal-content {
	margin: auto !important;
	width: 90% !important;
	max-width: 450px !important;
	border-radius: 16px !important;
	position: relative !important;
	align-self: center !important;
	max-height: 90vh !important;
	box-sizing: border-box !important;
}

/* Sin transform residual en los alias de la especificación
	  (las clases reales conservan su animación de entrada) */
.budget-modal-card,
#edit-budget-modal .modal-content {
	transform: none !important;
}

/* La variante compacta (--small) conserva su ancho reducido */
.ppwp-budget__modal-overlay > .ppwp-budget__modal.ppwp-budget__modal--small {
	max-width: 400px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   VISTA PAGOS: HISTORIAL 100% RESPONSIVO (móvil < 768px)
   Alias puente de la especificación (.payments-table-container /
   .budget-payments-wrapper) aplicados al div .ppwp-budget__table-wrap
   que envuelve #ppwp-budget-payments-table.

   Causa raíz del recorte: .ppwp-budget__view es un contenedor flex en
   fila y .ppwp-budget__payments-section tenía min-width:auto, por lo que
   el wrapper crecía hasta el ancho min-content de la tabla (620px +
   padding). Al no desbordar, su overflow-x:auto nunca se activaba y las
   columnas de la derecha quedaban recortadas por el overflow:hidden del
   contenedor de vistas.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	/* 1. Cadena flex: permitir que la sección se encoja para que el scroll
	      horizontal ocurra DENTRO de .ppwp-budget__table-wrap */
	.ppwp-budget__views,
	.ppwp-budget__view,
	#ppwp-budget-view-pagos,
	.ppwp-budget__payments-section {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 2. Contenedor desplazable táctil de la tabla de historial de pagos */
	.payments-table-container,
	.budget-payments-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		box-sizing: border-box !important;
		padding-bottom: 8px !important;
	}

	/* 3. Menos padding lateral: más ancho útil para la tabla */
	.ppwp-budget__payments-section {
		padding: 18px 12px !important;
	}

	/* 4. La tabla conserva 550px mínimos sin apretar textos
	      (vence el min-width:620px de ppwp-responsive.css §3) */
	.payments-table-container table,
	.budget-payments-wrapper table {
		min-width: 550px !important;
		width: 100% !important;
	}

	/* 5. Textos largos: nunca cortar palabras al deslizar */
	.ppwp-budget__payments-table th,
	.ppwp-budget__payments-table td {
		white-space: normal !important;
		overflow-wrap: break-word !important;
	}

	.ppwp-budget__col-pay-status { min-width: 92px !important; }
	.ppwp-budget__col-pay-details { min-width: 130px !important; }
	.ppwp-budget__col-pay-amount { min-width: 110px !important; }

	/* 6. Mensaje "No hay pagos registrados" / estado vacío centrado */
	.ppwp-budget__empty-row td,
	.payments-table-container .no-records,
	.budget-payments-wrapper .empty-state {
		text-align: center !important;
		width: 100% !important;
		padding: 20px 10px !important;
		white-space: normal !important;
	}
}

/* ── Scrollbar Invisible ─────────────────────────────────────────────── */
.ppwp-budget__sidebar,
.ppwp-budget__table-wrap {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ppwp-budget__sidebar::-webkit-scrollbar,
.ppwp-budget__table-wrap::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PESTAÑA FLOTANTE + DRAWER "Categorías" (Móvil) – Estilo Claro del Sitio
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pestaña flotante ────────────────────────────────────────────────── */
.ppwp-budget__float-tab {
	display: none; /* Oculto en desktop */
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1050;
	background: #F8F9FA;
	color: #3a4a5c;
	border: 1.5px solid #dde1e6;
	border-right: none;
	border-radius: 8px 0 0 8px;
	padding: 12px 10px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	box-shadow: -2px 0 10px rgba(0,0,0,0.08);
	transition: all 0.25s ease;
}

.ppwp-budget__float-tab:hover {
	background: #fff;
	color: #2563eb;
	border-color: #2563eb;
	box-shadow: -2px 0 14px rgba(37, 99, 235, 0.15);
	padding-right: 14px;
}

.ppwp-budget__float-tab-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* ── Drawer (panel deslizante desde la derecha) ──────────────────────── */
.ppwp-budget__drawer {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1100;
	width: 85vw;
	max-width: 340px;
	height: 100vh;
	height: 100dvh;
	background: #fff;
	border-left: 1px solid #e8ecf0;
	box-shadow: -4px 0 24px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.ppwp-budget__drawer--open {
	transform: translateX(0);
}

/* ── Cabecera del drawer ─────────────────────────────────────────────── */
.ppwp-budget__drawer-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 18px 14px;
	border-bottom: 1px solid #eef1f5;
	flex-shrink: 0;
	background: #fff;
}

.ppwp-budget__drawer-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ppwp-budget__drawer-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #3a4a5c;
}

.ppwp-budget__drawer-btn-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #71717a;
	padding: 4px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.ppwp-budget__drawer-btn-close:hover {
	background: #f4f4f5;
	color: #3a4a5c;
}

.ppwp-budget__drawer-btn-new {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #2563eb;
	border: none;
	color: #fff;
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ppwp-budget__drawer-btn-new:hover {
	background: #1d4ed8;
}

/* ── Buscador ────────────────────────────────────────────────────────── */
.ppwp-budget__drawer-search-wrap {
	position: relative;
	padding: 14px 18px;
	flex-shrink: 0;
	background: #fff;
}

.ppwp-budget__drawer-search-icon {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	color: #a0aab4;
	pointer-events: none;
}

.ppwp-budget__drawer-search {
	width: 100%;
	padding: 10px 14px 10px 38px;
	background: #f4f6f8;
	border: 1px solid #e2e6ea;
	border-radius: 8px;
	color: #3a4a5c;
	font-size: 13px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ppwp-budget__drawer-search::placeholder {
	color: #a0aab4;
}

.ppwp-budget__drawer-search:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* ── Lista de categorías ─────────────────────────────────────────────── */
.ppwp-budget__drawer-list {
	list-style: none;
	margin: 0;
	padding: 0 12px 12px;
	flex: 1;
	overflow-y: auto;
	background: #fff;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ppwp-budget__drawer-list::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.ppwp-budget__drawer-list-loading {
	padding: 24px 12px;
	text-align: center;
	color: #a0aab4;
	font-size: 13px;
}

/* ── Item de categoría ───────────────────────────────────────────────── */
.ppwp-budget__drawer-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
	color: #3a4a5c;
	font-size: 13.5px;
	margin-bottom: 2px;
	background: #fff;
}

.ppwp-budget__drawer-item:hover {
	background: #f4f6f8;
}

.ppwp-budget__drawer-item:active {
	background: #e8ecf0;
}

.ppwp-budget__drawer-item--active {
	background: #ecf3fe;
	border-left: 3px solid #2563eb;
	padding-left: 11px;
}

.ppwp-budget__drawer-item-icon {
	flex-shrink: 0;
	color: #5a6570;
}

.ppwp-budget__drawer-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ppwp-budget__drawer-item-name {
	font-weight: 600;
	color: #3a4a5c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ppwp-budget__drawer-item-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	color: #71717a;
}

.ppwp-budget__drawer-item-badge {
	background: #e0e9f5;
	color: #2563eb;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 10px;
}

/* ── Item filtrado (oculto) ──────────────────────────────────────────── */
.ppwp-budget__drawer-item--hidden {
	display: none;
}

/* ── Mostrar solo en móvil ───────────────────────────────────────────── */
@media (min-width: 769px) {
	.ppwp-budget__float-tab {
		display: none !important;
	}

	.ppwp-budget__drawer {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.ppwp-budget__float-tab {
		display: flex;
	}

	.ppwp-budget__drawer {
		display: flex;
	}
}