/* Premium UI — preview, avatares, bulk, dark, print, 2FA, PWA-friendly */

/* Tipografía marca (system stack, sin CDN externo) */
#rl-app.rl-started {
	font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* Banner mantenimiento */
.tn-maintenance {
	flex-shrink: 0;
	padding: 10px 14px;
	background: #fef3c7;
	border-bottom: 2px solid #f59e0b;
	color: #92400e;
	font-size: 0.84rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: center;
}

.tn-maintenance a {
	color: #b45309;
	font-weight: 700;
}

.tn-maintenance-dismiss {
	margin-left: 12px;
	border: none;
	background: transparent;
	color: #92400e;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

/* Preview en lista */
.messageListItem .subjectParent {
	display: block;
}

.tn-msg-preview {
	display: block;
	margin-top: 3px;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--tn-text-muted, #475569);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.messageListItem.unseen .tn-msg-preview {
	color: var(--tn-text-secondary, #1e293b);
	font-weight: 500;
}

/* Avatares */
.tn-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
	margin-right: 8px;
	vertical-align: middle;
	text-transform: uppercase;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.tn-avatar-h0 { background: #2980b9; }
.tn-avatar-h1 { background: #1e6f5c; }
.tn-avatar-h2 { background: #6b4c9a; }
.tn-avatar-h3 { background: #c05621; }
.tn-avatar-h4 { background: #475569; }
.tn-avatar-external { background: #64748b; }

.messageListItem .senderParent {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
}

.messageView .tn-sender-card {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	padding: 10px 12px;
	background: var(--tn-surface-subtle, #f1f5f9);
	border-radius: var(--tn-radius-sm, 8px);
	border: 1px solid var(--tn-border, #cbd5e1);
}

.messageView .tn-sender-card .tn-avatar {
	width: 40px;
	height: 40px;
	font-size: 0.95rem;
	margin-right: 0;
}

.messageView .tn-sender-card-meta strong {
	display: block;
	color: var(--tn-text-secondary, #1e293b);
	font-size: 0.95rem;
}

.messageView .tn-sender-card-meta span {
	font-size: 0.82rem;
	color: var(--tn-text-muted, #475569);
}

/* Iconos SVG carpetas (reemplaza emojis) */
#rl-left .b-folders-system .folder-name::before {
	content: "" !important;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	background: center / contain no-repeat;
	opacity: 0.95;
}

#rl-left .b-folders-system li:nth-child(1) .folder-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

#rl-left .b-folders-system li:nth-child(2) .folder-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

#rl-left .b-folders-system li:nth-child(3) .folder-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

#rl-left .b-folders-system li:nth-child(4) .folder-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* Iconos carpetas de usuario */
#rl-left .b-folders-user .folder-name::before {
	content: "" !important;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	background: center / contain no-repeat;
	opacity: 0.9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

/* Búsqueda avanzada panel */
.tn-search-extras {
	width: 100%;
}

.tn-search-advanced-panel {
	flex-basis: 100%;
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	gap: 10px 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--tn-border, #cbd5e1);
	border-radius: var(--tn-radius-sm, 8px);
	margin-top: 4px;
	align-items: end;
}

.tn-search-advanced-panel label.tn-sa-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--tn-text-muted, #475569);
	min-width: 0;
}

.tn-sa-field-from {
	grid-column: 1;
	grid-row: 1;
}

.tn-sa-field-to {
	grid-column: 2;
	grid-row: 1;
}

.tn-sa-field-subject {
	grid-column: 3;
	grid-row: 1;
}

.tn-search-advanced-panel input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid var(--tn-border, #cbd5e1);
	border-radius: 6px;
	font-size: 0.82rem;
}

.tn-sa-check {
	grid-column: 1;
	grid-row: 2;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding-top: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--tn-text-secondary, #1e293b);
	white-space: nowrap;
}

.tn-sa-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
}

.tn-sa-actions {
	grid-column: 2 / 4;
	grid-row: 2;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

@media (max-width: 900px) {
	.tn-search-advanced-panel {
		grid-template-columns: 1fr 1fr;
	}

	.tn-sa-field-subject {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.tn-sa-check {
		grid-column: 1;
		grid-row: 3;
	}

	.tn-sa-actions {
		grid-column: 2;
		grid-row: 3;
	}
}

@media (max-width: 520px) {
	.tn-search-advanced-panel {
		grid-template-columns: 1fr;
	}

	.tn-sa-field-from,
	.tn-sa-field-to,
	.tn-sa-field-subject,
	.tn-sa-check,
	.tn-sa-actions {
		grid-column: 1;
		grid-row: auto;
	}

	.tn-sa-actions {
		justify-content: stretch;
	}

	.tn-sa-actions button {
		flex: 1;
	}
}

.tn-sa-actions button {
	border: none;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
}

.tn-sa-run {
	background: var(--tn-primary, #2980b9);
	color: #fff;
}

.tn-sa-clear {
	background: var(--tn-surface-subtle, #f1f5f9);
	color: var(--tn-text-secondary, #1e293b);
}

/* Adjuntos tarjetas */
.messageView .attachmentList,
#V-PopupsCompose .attachmentList {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tn-attach-card {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	background: var(--tn-surface-subtle, #f1f5f9) !important;
	border: 1px solid var(--tn-border, #cbd5e1) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: var(--tn-text-secondary, #1e293b) !important;
}

.tn-attach-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--tn-primary, #2980b9);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
}

/* Lectura legible */
.messageView .b-message.tn-readable {
	max-width: 720px;
	line-height: 1.65 !important;
	font-size: 0.95rem !important;
	padding: 16px 20px !important;
}

.messageView .messageItemHeader.tn-header-polish {
	border-left: 4px solid var(--tn-primary, #2980b9);
}

/* Compose */
#V-PopupsCompose.tn-compose-polish {
	max-width: min(920px, 96vw) !important;
}

#V-PopupsCompose .button-save.tn-send-primary {
	background: linear-gradient(135deg, var(--tn-primary-bright, #3498db), var(--tn-primary, #2980b9)) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 8px 18px !important;
	border-radius: 8px !important;
}

/* Modo oscuro completo */
body.tn-theme-dark #rl-left,
body.tn-theme-dark #rl-app.rl-started {
	background: #0f172a !important;
}

body.tn-theme-dark #rl-left {
	background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}

body.tn-theme-dark #V-PopupsCompose,
body.tn-theme-dark #V-PopupsCompose .modal-content,
body.tn-theme-dark .tn-account-menu {
	background: #1e293b !important;
	color: #e2e8f0 !important;
	border-color: #334155 !important;
}

body.tn-theme-dark .tn-account-menu a,
body.tn-theme-dark .tn-account-menu button {
	color: #e2e8f0 !important;
}

body.tn-theme-dark .tn-search-advanced-panel {
	background: #334155;
	border-color: #475569;
}

body.tn-theme-dark .tn-search-advanced-panel input {
	background: #1e293b;
	border-color: #475569;
	color: #f1f5f9;
}

body.tn-theme-dark .tn-attach-card {
	background: #334155 !important;
	border-color: #475569 !important;
	color: #f1f5f9 !important;
}

body.tn-theme-dark .tn-account-chip {
	background: #334155;
	border-color: #475569;
}

body.tn-theme-dark .messageListItem.tn-date-start::before {
	background: #334155;
	border-color: #475569;
	color: #94a3b8;
}

/* Cuota buzón */
.tn-quota-bar {
	margin: 4px 10px 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.tn-quota-label {
	font-size: 0.72rem;
	color: var(--tn-sidebar-muted, #e2e8f0);
	margin-bottom: 6px;
	font-weight: 600;
}

.tn-quota-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.tn-quota-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #3498db, #2980b9);
	transition: width 0.3s ease;
}

.tn-quota-fill.is-warn {
	background: linear-gradient(90deg, #f59e0b, #d97706);
}

.tn-quota-fill.is-critical {
	background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Barra selección múltiple */
.tn-bulk-bar {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9500;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--tn-text-secondary, #1e293b);
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35);
	animation: tn-toast-in 0.2s ease;
}

.tn-bulk-count {
	font-size: 0.82rem;
	font-weight: 700;
	padding-right: 10px;
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	white-space: nowrap;
}

.tn-bulk-bar .btn,
.tn-bulk-bar button {
	border: none;
	background: rgba(255, 255, 255, 0.14);
	color: #fff !important;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	min-height: 36px;
}

.tn-bulk-bar .btn:hover,
.tn-bulk-bar button:hover {
	background: rgba(255, 255, 255, 0.24);
}

/* Búsqueda avanzada + historial */
.tn-search-extras {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 0 10px 8px;
	background: var(--tn-surface-subtle, #f1f5f9);
	border-bottom: 1px solid var(--tn-border, #cbd5e1);
}

.tn-search-advanced-btn {
	border: 1px solid var(--tn-border-strong, #94a3b8);
	background: #fff;
	color: var(--tn-text-secondary, #1e293b);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
}

.tn-search-history {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.tn-search-history button {
	border: 1px dashed var(--tn-border-strong, #94a3b8);
	background: #fff;
	color: var(--tn-text-muted, #475569);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 0.72rem;
	cursor: pointer;
}

/* Toggle tema oscuro parcial */
.tn-theme-toggle {
	border: 1px solid var(--tn-border-strong, #94a3b8);
	background: #fff;
	color: var(--tn-text-muted, #475569);
	border-radius: var(--tn-radius-sm, 8px);
	padding: 6px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	min-height: 32px;
}

body.tn-theme-dark #rl-right,
body.tn-theme-dark #V-MailMessageList,
body.tn-theme-dark #V-MailMessageView,
body.tn-theme-dark #V-SettingsPane,
body.tn-theme-dark .messageView .messageItemHeader,
body.tn-theme-dark .tn-list-extras,
body.tn-theme-dark .tn-search-extras,
body.tn-theme-dark .thm-message-list-top-toolbar,
body.tn-theme-dark #V-SystemDropDown {
	background: #1e293b !important;
	color: #e2e8f0 !important;
}

body.tn-theme-dark .messageListItem {
	background: #0f172a !important;
	color: #e2e8f0 !important;
	border-color: #334155 !important;
}

body.tn-theme-dark .messageListItem.unseen {
	background: #172554 !important;
}

body.tn-theme-dark .messageListItem .subjectParent,
body.tn-theme-dark .messageListItem .senderParent,
body.tn-theme-dark .tn-folder-crumb,
body.tn-theme-dark .tn-account-email,
body.tn-theme-dark .accountPlace {
	color: #f1f5f9 !important;
}

body.tn-theme-dark .tn-msg-preview {
	color: #94a3b8 !important;
}

body.tn-theme-dark .messageView .b-message,
body.tn-theme-dark .messageView .b-message *:not(a):not(.btn) {
	color: #e2e8f0 !important;
}

body.tn-theme-dark .tn-filter-chip,
body.tn-theme-dark .tn-density-toggle,
body.tn-theme-dark .tn-theme-toggle {
	background: #334155;
	border-color: #475569;
	color: #f1f5f9;
}

/* Atajos teclado */
.tn-shortcuts-panel {
	max-width: 520px;
	width: 100%;
	max-height: 80vh;
	overflow: auto;
}

.tn-shortcuts-panel table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.tn-shortcuts-panel td {
	padding: 8px 6px;
	border-bottom: 1px solid var(--tn-border, #cbd5e1);
}

.tn-shortcuts-panel kbd {
	background: var(--tn-surface-subtle, #f1f5f9);
	border: 1px solid var(--tn-border-strong, #94a3b8);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 0.78rem;
	font-family: inherit;
}

/* 2FA / errores login */
.LoginView .alert,
.LoginView .error-desc,
#V-Login .alert,
#V-Login .error-desc {
	border-radius: 8px !important;
	padding: 10px 12px !important;
	margin-bottom: 12px !important;
	font-size: 0.88rem !important;
	line-height: 1.45 !important;
}

.LoginView .alert-error,
.LoginView .error-desc,
#V-Login .alert-error {
	background: #fee2e2 !important;
	border: 1px solid #fca5a5 !important;
	color: #991b1b !important;
}

.tn-login-status {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #e0f2fe;
	border: 1px solid #7dd3fc;
	color: #0c4a6e;
	font-size: 0.84rem;
}

/* Móvil compose */
@media (max-width: 768px) {
	#V-PopupsCompose {
		max-height: 100dvh !important;
	}

	#V-PopupsCompose .modal-body {
		padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
	}

	body.tn-message-open .tn-fab-compose {
		display: none !important;
	}

	.tn-bulk-bar {
		bottom: max(16px, env(safe-area-inset-bottom));
		left: 12px;
		right: 12px;
		transform: none;
		border-radius: 14px;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Impresión */
@media print {
	#rl-left,
	.tn-fab-compose,
	.tn-bulk-bar,
	.tn-mobile-topbar,
	.tn-maintenance,
	.tn-onboarding,
	.tn-toast-host,
	.tn-account-wrap,
	.thm-message-list-top-toolbar,
	.thm-message-list-bottom-toolbar,
	.messageView .message-fixed-button-toolbar,
	.tn-list-extras,
	.tn-search-extras {
		display: none !important;
	}

	body::before {
		content: "Correo TecnoNube";
		display: block;
		font-size: 11pt;
		font-weight: 700;
		color: #2980b9;
		margin-bottom: 12px;
		padding-bottom: 8px;
		border-bottom: 2px solid #2980b9;
	}

	#rl-right,
	.messageView .b-message {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.messageView .messageItemHeader {
		background: #fff !important;
		border: none !important;
		border-left: 4px solid #2980b9 !important;
		padding: 12px 0 !important;
	}

	.messageView .b-message.tn-readable {
		max-width: none;
		font-size: 11pt !important;
		line-height: 1.5 !important;
	}

	.tn-attach-card {
		border: 1px solid #ccc !important;
		page-break-inside: avoid;
	}
}