/* ═══════════════════════════════════════════
   AF App Presupuestos — Layout
   Wrappers, cards, flow panels, tabs, summary, empty state.
   Depende de: af-app-plugins, variables.css
   ═══════════════════════════════════════════ */

/* ── Layout ── */
.af-presupuestos-wrapper {
	width: 100%;
}

.af-presupuestos--embedded .af-app-usuario-shell {
	display: block;
}

.af-presupuestos-content {
	padding: clamp(12px, 2vw + 6px, 24px);
	width: 100%;
}

.af-presupuestos-flow,
.af-presupuestos-historial,
.af-presupuestos-detail {
	width: 100%;
	max-width: 100%;
}

#af-presupuestos-form {
	width: 100%;
}

/* ── Tabs (usa af-app-tabs del tema) ── */
.af-presupuestos-tabs {
	margin-bottom: clamp(16px, 2vw + 8px, 28px);
}

/* ── Flow panels ── */
.af-presupuestos-flow-panel {
	display: none;
}

.af-presupuestos-flow-panel.is-active {
	display: block;
}

/* ── Flow title (h2 principal) ── */
.af-presupuestos-flow__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: clamp(12px, 1.5vw + 6px, 20px);
	color: var(--af-gray-800, #2d3748);
}

/* ── Card container (envuelve cada paso y secciones) ── */
.af-presupuestos-card {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 0;
	padding: clamp(16px, 2vw + 8px, 24px);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.af-presupuestos-card__header {
	margin-bottom: clamp(14px, 1.5vw + 6px, 22px);
}

.af-presupuestos-card__header h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--af-gray-800, #2d3748);
	margin: 0 0 4px 0;
}

.af-presupuestos-card__header p {
	font-size: 14px;
	color: var(--af-gray-500, #718096);
	margin: 0;
}

/* ── Last reference info ── */
.af-presupuestos-last-ref-info {
	padding: 10px 14px;
	background: rgba(248, 250, 252, 0.9);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 0;
	margin-bottom: clamp(12px, 1.5vw, 18px);
	font-size: 0.875rem;
	color: var(--af-gray-700, #4a5568);
}

.af-presupuestos-last-ref-info__label {
	color: var(--af-gray-500, #718096);
	margin-right: 4px;
}

.af-presupuestos-last-ref-info__date {
	color: var(--af-gray-500, #718096);
	font-size: 0.8125rem;
}

.af-presupuestos-last-ref-info--first {
	background: rgba(9, 174, 184, 0.08);
	border-color: rgba(9, 174, 184, 0.2);
	color: var(--af-primary-dark, #078a92);
}

/* ── Flow actions (botones inferiores de cada paso) ── */
.af-presupuestos-flow-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: clamp(16px, 2vw + 4px, 24px);
	padding-top: clamp(12px, 1.5vw + 4px, 18px);
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.af-presupuestos-flow-actions .af-btn {
	width: 100%;
}

/* ── Summary (paso 4: revisar antes de finalizar) ── */
.af-presupuestos-summary {
	background: rgba(248, 250, 252, 0.9);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 0;
	padding: clamp(16px, 2vw + 4px, 24px);
}

.af-presupuestos-summary h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--af-gray-500, #718096);
	margin: 0 0 8px 0;
}

/* ── Empty state ── */
.af-presupuestos-empty {
	text-align: center;
	color: var(--af-gray-500, #718096);
	padding: clamp(24px, 3vw, 48px);
	font-size: 15px;
}

/* ── Menu toggle (mobile) ── */
.af-presupuestos-menu-toggle {
	display: block;
}