/* ═══════════════════════════════════════════════
   TRANSACCIONES BANCARIAS
═══════════════════════════════════════════════ */

:root {
	--trans-primary: #052767;
	--trans-blue:    #1565c0;
	--trans-border:  #dce6f0;
	--trans-shadow:  0 1px 5px rgba(5,39,103,.07);
	--trans-radius:  6px;
}

/* ── Barra de estado ─────────────────────────── */
.trans-status-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0.35rem 0 0.6rem;
	border-bottom: 1px solid var(--trans-border);
	margin-bottom: 0.75rem;
}

.trans-status-left {
	display: flex;
	align-items: center;
}

.trans-status-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 700;
	color: #052767;
	letter-spacing: .04em;
	border: 1.5px solid #c5d4e8;
	border-radius: 6px;
	background: #f0f5fb;
	white-space: nowrap;
}

.trans-status-num--pendiente {
	color: #1d4ed8;
	background: #eff6ff;
	border-color: #bfdbfe;
}

.trans-status-fecha {
	margin-left: 0.5rem;
}

.trans-status-fecha .rz-inputwrapper,
.trans-status-fecha .rz-datepicker-input,
.trans-status-fecha input {
	height: 26px !important;
	min-height: 26px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #052767 !important;
	border: 1.5px solid #c5d4e8 !important;
	border-radius: 6px !important;
	background: #f0f5fb !important;
	box-shadow: none !important;
	padding: 0 8px !important;
	line-height: 26px !important;
}

.trans-status-fecha .rz-inputwrapper {
	padding: 0 !important;
}

.trans-status-fecha button.rz-datepicker-trigger {
	height: 26px !important;
	width: 26px !important;
	border: none !important;
	border-left: 1.5px solid #c5d4e8 !important;
	background: #e8f0fb !important;
	border-radius: 0 6px 6px 0 !important;
	color: #052767 !important;
}

/* ── Cabecera: grid de dos columnas con gutter ── */
.trans-cabecera-grid {
	display: grid;
	grid-template-columns: minmax(340px, 500px) 1fr minmax(270px, 360px);
	row-gap: 1rem;
	align-items: start;
}

.trans-cg-l { grid-column: 1; }
.trans-cg-r { grid-column: 3; }

.trans-cab-subrow {
	display: flex;
	gap: 0.5rem;
	align-items: flex-end;
}

/* ── Bottom row: tabs + totales ─────────────── */
.trans-bottom-row {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
	height: 260px;
	margin-top: 0.5rem;
}

.trans-bottom-row .rz-tabview {
	display: flex;
	flex-direction: column;
	height: 100%;
	--rz-tabs-border: none;
	--rz-tabs-shadow: none;
	--rz-tabs-background-color: transparent;
	--rz-tabs-tab-background-color: transparent;
	--rz-tabs-tab-hover-background-color: transparent;
	--rz-tabs-tab-selected-background-color: transparent;
	--rz-tabs-tab-color: #94a3b8;
	--rz-tabs-tab-hover-color: #64748b;
	--rz-tabs-tab-selected-color: #1a3d6b;
	--rz-tabs-tab-selected-top-border-color: transparent;
	--rz-tabs-tab-font-weight: 400;
	--rz-tabs-tab-font-size: 13px;
}

.trans-bottom-row .rz-tabview-panels {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.trans-bottom-row .rz-tabview-nav li {
	border: none !important;
	margin-bottom: 0 !important;
}

.trans-bottom-row .rz-tabview-nav .rz-tabview-selected {
	position: relative !important;
}

.trans-bottom-row .rz-tabview-nav .rz-tabview-selected::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: #1a3d6b;
}

.trans-bottom-row .rz-tabview-nav .rz-tabview-selected a {
	font-weight: 600 !important;
}

.trans-bottom-row .rz-tabview-panel {
	padding: 4px !important;
	padding-top: 8px !important;
	border: 1px solid rgb(236,236,236);
}

/* ── Totales ─────────────────────────────────── */
.trans-totales {
	background: #fff;
	border: 1px solid var(--trans-border);
	border-radius: var(--trans-radius);
	overflow: hidden;
	box-shadow: var(--trans-shadow);
	width: 320px;
	flex-shrink: 0;
}

.trans-tot-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: linear-gradient(90deg, #eef3f9, #f8fafc);
	border-bottom: 1px solid var(--trans-border);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--trans-primary);
}

.trans-tot-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.7rem 1rem;
	background: var(--trans-primary);
}

.trans-tot-total-lbl {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.trans-tot-total .rz-numeric input,
.trans-tot-total .rz-numeric {
	color: #fff !important;
	background: transparent !important;
	border-color: rgba(255,255,255,0.4) !important;
	font-size: 1.2rem;
	font-weight: 800;
	text-align: right;
	width: 180px;
}