/* Pipeline: mismo estilo visual que pm_setup (fondo #ebf0f2, paneles blancos, bordes #e0dfe1, redondeado) */
.pm-pipeline-wrap { max-width: 100%; margin: 1rem 0; background-color: #ebf0f2; padding: 1rem; border-radius: 12px; font-family: 'Inter', system-ui, sans-serif; }
.pm-pipeline-header {
	display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; gap: 1rem;
	padding: 1rem; background: #fff; border: 1px solid #e0dfe1; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pm-pipeline-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 1; min-width: 0; }
.pm-pipeline-title-block { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; min-width: 0; }
.pm-pipeline-title { margin: 0; font-size: 1.25rem; font-weight: 700; flex-shrink: 0; }
/* Icono calendario y popover */
.pm-pipeline-date-picker-wrap { position: relative; flex-shrink: 0; }
.pm-pipeline-calendar-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
	padding: 0; border: 1px solid #e0dfe1; border-radius: 12px; background: #fff; color: #1d2327;
	cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pm-pipeline-calendar-btn:hover { background: #DBEAFE; border-color: #1E40AF; color: #1E40AF; }
.pm-pipeline-calendar-btn:focus { outline: none; border-color: #1E40AF; }
.pm-pipeline-calendar-btn[aria-expanded="true"] { background: #DBEAFE; border-color: #1E40AF; color: #1E40AF; }
.pm-pipeline-calendar-icon { display: block; }
.pm-pipeline-date-picker-popover {
	position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 100;
	padding: 12px; background: #fff; border: 1px solid #e0dfe1; border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 200px;
}
.pm-pipeline-date-picker-popover[hidden] { display: none !important; }
.pm-pipeline-date-picker-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #1d2327; }
.pm-pipeline-date-input { width: 100%; padding: 8px 10px; border: 1px solid #e0dfe1; border-radius: 12px; font-size: 14px; box-sizing: border-box; }
.pm-pipeline-date-input:focus { outline: none; border-color: #1E40AF; }
@media (max-width: 1023px) {
	.pm-pipeline-title-row { flex-wrap: wrap; }
	.pm-pipeline-title-block { flex: 1 1 100%; min-width: 0; margin-bottom: 0.5rem; }
	.pm-pipeline-title {
		flex: 1 1 auto; min-width: 0;
		word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;
		line-height: 1.35;
	}
	.pm-pipeline-nav { flex: 1 1 auto; justify-content: flex-start; }
	.pm-pipeline-indicators { flex-shrink: 0; }
	.pm-pipeline-date-picker-popover { left: 0; right: auto; }
}
.pm-pipeline-nav { display: flex; gap: 0.5rem; justify-content: center; flex: 1; min-width: 0; }
.pm-pipeline-btn {
	text-decoration: none; padding: 6px 14px; font-size: 14px; font-weight: 500;
	border: 1px solid #e0dfe1; border-radius: 12px; background: #fff; color: #1d2327;
}
.pm-pipeline-btn:hover { border-color: #1E40AF; background: #DBEAFE; color: #1E40AF; }
.pm-pipeline-btn-active { font-weight: 600; pointer-events: none; opacity: 0.9; background-color: #DBEAFE; color: #1E40AF; border-color: #e0dfe1; }
.pm-pipeline-indicators { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; gap: 0.25rem; }
.pm-pipeline-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.pm-pipeline-status-dot-active { background: #00a32a; box-shadow: 0 0 0 2px rgba(0,163,42,0.3); }
.pm-pipeline-status-dot-inactive { background: #d63638; box-shadow: 0 0 0 2px rgba(214,54,56,0.3); }
.pm-pipeline-status-ia-label { margin-left: 0.25rem; font-size: 0.85rem; color: #1d2327; font-weight: 500; }
.pm-pipeline-inbox-email { font-size: 0.9rem; color: #646970; font-weight: normal; }
.pm-pipeline-refresh-label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: normal; font-size: 14px; }
.pm-pipeline-refresh-select { min-width: 5rem; padding: 6px 10px; border: 1px solid #e0dfe1; border-radius: 12px; font-size: 14px; }
/* Columnas: Recibido 50% | Estado 10% | Clasificación IA 10% | Destino 30% (solo escritorio) */
.pm-pipeline-list { margin-top: 0.5rem; }
.pm-pipeline-item {
	display: grid; grid-template-columns: 19fr 1.5rem 6fr 1.5rem 6fr 1.5rem 19fr; align-items: center; gap: 0 0.5rem;
	padding: 1rem; margin-bottom: 1rem; background: #fff; border: 1px solid #e0dfe1; border-left: 4px solid #2271b1; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pm-pipeline-step { display: flex; flex-direction: column; min-width: 0; }
.pm-pipeline-step.pm-step-classification { text-align: center; align-items: center; }
@media (max-width: 1023px) {
	.pm-pipeline-item { display: flex; flex-wrap: wrap; grid-template-columns: unset; gap: 0.5rem; }
	.pm-pipeline-step { min-width: 120px; }
}
.pm-pipeline-step .pm-step-label { font-size: 0.75rem; color: #646970; text-transform: uppercase; font-weight: 500; }
.pm-pipeline-step .pm-step-value { font-weight: 600; font-size: 14px; }
/* Botón estado: estilo pill como pm_setup (redondeado, borde #e0dfe1, fondo según estado) */
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger {
	display: inline-block; cursor: pointer; text-decoration: none;
	padding: 6px 14px; font-size: 14px; font-weight: 500; font-family: inherit;
	border: 1px solid #e0dfe1; border-radius: 9999px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger:hover { opacity: 0.9; filter: brightness(0.97); }
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger:focus { outline: none; border-color: #1E40AF; }
/* Colores por estado (fondo claro + texto, estilo chips pm_setup) */
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-entrada {
	background-color: #E0E7FF; color: #3730A3; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-esperando_aprobacion {
	background-color: #FEF3C7; color: #92400E; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-en_revision {
	background-color: #FEF3C7; color: #92400E; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-spam,
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-virus,
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-fraude {
	background-color: #FEE2E2; color: #991B1B; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-revisado {
	background-color: #DCFCE7; color: #166534; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-por_clasificar,
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-nuevo,
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-devuelto {
	background-color: #FEE2E2; color: #991B1B; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-clasificado,
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-reenviado {
	background-color: #DCFCE7; color: #166534; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-reenviando {
	background-color: #DBEAFE; color: #1E40AF; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-para_revision,
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-revision_manual {
	background-color: #FEF3C7; color: #92400E; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-value.pm-pipeline-status-trigger.pm-status-no_reenviado {
	background-color: #FEE2E2; color: #991B1B; border-color: #e0dfe1;
}
.pm-pipeline-step .pm-step-meta { font-size: 0.85rem; color: #646970; }
.pm-pipeline-item-num { font-weight: 700; color: #2271b1; margin-right: 0.25rem; }
.pm-pipeline-arrow { color: #2271b1; font-weight: bold; }
.pm-status-por_clasificar, .pm-status-nuevo, .pm-status-devuelto, .pm-status-spam, .pm-status-virus, .pm-status-fraude { color: #d63638; }
.pm-status-entrada { color: #3730A3; }
.pm-status-esperando_aprobacion { color: #92400E; }
.pm-status-en_revision { color: #dba617; }
.pm-status-revisado, .pm-status-clasificado, .pm-status-reenviado { color: #00a32a; }
.pm-status-reenviando { color: #2271b1; }
.pm-status-para_revision, .pm-status-revision_manual { color: #dba617; }
.pm-pipeline-empty { padding: 2rem; text-align: center; color: #646970; background: #fff; border: 1px solid #e0dfe1; border-radius: 12px; }

/* Animación correo nuevo: duración por variable (1–10 s) */
.pm-pipeline-item-new { animation-duration: var(--pm-anim-duration, 3s); animation-timing-function: ease; animation-fill-mode: both; }
/* 1. Sin animación: no se añade clase .pm-pipeline-item-anim-* */
/* 2. Fondo amarillo desvanecido (amarillo → blanco → amarillo) */
@keyframes pm-anim-fade-yellow {
	0%, 100% { background-color: #fef9c3; }
	50% { background-color: #fff; }
}
.pm-pipeline-item-new.pm-pipeline-item-anim-fade-yellow { animation-name: pm-anim-fade-yellow; animation-iteration-count: 1; }
/* 3. Entrada deslizando desde la izquierda */
@keyframes pm-anim-slide-left {
	0% { opacity: 0; transform: translateX(-24px); }
	100% { opacity: 1; transform: translateX(0); }
}
.pm-pipeline-item-new.pm-pipeline-item-anim-slide-left { animation-name: pm-anim-slide-left; animation-iteration-count: 1; }
/* 4. Pulso de borde (resaltado) */
@keyframes pm-anim-pulse {
	0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left-width: 4px; border-left-color: #2271b1; }
	50% { box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.4); border-left-width: 6px; border-left-color: #135e96; }
}
.pm-pipeline-item-new.pm-pipeline-item-anim-pulse { animation-name: pm-anim-pulse; animation-iteration-count: 2; }
/* 5. Aparición suave (opacidad) */
@keyframes pm-anim-fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.pm-pipeline-item-new.pm-pipeline-item-anim-fade-in { animation-name: pm-anim-fade-in; animation-iteration-count: 1; }
/* 6. Escala suave (zoom in) */
@keyframes pm-anim-scale {
	0% { opacity: 0.6; transform: scale(0.98); }
	100% { opacity: 1; transform: scale(1); }
}
.pm-pipeline-item-new.pm-pipeline-item-anim-scale { animation-name: pm-anim-scale; animation-iteration-count: 1; }

/* 7–8. «Nuevo» con fondo de color desplazándose izq. → der. */
.pm-pipeline-item-new.pm-pipeline-item-anim-new-sweep-1,
.pm-pipeline-item-new.pm-pipeline-item-anim-new-sweep-2 { position: relative; overflow: hidden; }
.pm-pipeline-item-new.pm-pipeline-item-anim-new-sweep-1::before,
.pm-pipeline-item-new.pm-pipeline-item-anim-new-sweep-2::before {
	content: "Nuevo";
	position: absolute;
	left: -120px;
	top: 0;
	bottom: 0;
	width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #92400e;
	z-index: 2;
	animation: pm-anim-new-sweep var(--pm-anim-duration, 3s) ease forwards;
}
.pm-pipeline-item-new.pm-pipeline-item-anim-new-sweep-1::before { background: linear-gradient(90deg, #fef9c3 0%, #fef3c7 100%); }
.pm-pipeline-item-new.pm-pipeline-item-anim-new-sweep-2::before { background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; }
@keyframes pm-anim-new-sweep {
	0% { left: -120px; opacity: 1; }
	100% { left: 100%; opacity: 1; }
}

/* 9–10. Luz desvanecida desplazándose por la fila */
.pm-pipeline-item-new.pm-pipeline-item-anim-shimmer,
.pm-pipeline-item-new.pm-pipeline-item-anim-shimmer-alt { position: relative; overflow: hidden; }
.pm-pipeline-item-new.pm-pipeline-item-anim-shimmer::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(254,249,195,0.85), transparent);
	pointer-events: none;
	z-index: 1;
	animation: pm-anim-shimmer-lr var(--pm-anim-duration, 3s) ease forwards;
}
.pm-pipeline-item-new.pm-pipeline-item-anim-shimmer-alt::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	left: auto;
	right: 0;
	background: linear-gradient(90deg, transparent, rgba(209,250,229,0.85), transparent);
	pointer-events: none;
	z-index: 1;
	animation: pm-anim-shimmer-rl var(--pm-anim-duration, 3s) ease forwards;
}
@keyframes pm-anim-shimmer-lr {
	0% { left: -40%; }
	100% { left: 100%; }
}
@keyframes pm-anim-shimmer-rl {
	0% { right: -40%; }
	100% { right: 100%; }
}

.pm-pipeline-refresh { margin-top: 1rem; color: #646970; font-size: 14px; }
.pm-pipeline-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pm-pipeline-modal[hidden] { display: none; }
.pm-pipeline-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.pm-pipeline-modal-content {
	position: relative; background: #fff; max-width: 600px; width: 100%; max-height: 90vh; overflow: auto;
	padding: 24px; border: 1px solid #e0dfe1; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.pm-pipeline-modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 24px; cursor: pointer; line-height: 1; padding: 0; color: #50575e; }
.pm-pipeline-modal-close:hover { color: #1d2327; }
.pm-pipeline-modal-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; }
.pm-pipeline-modal-body pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 200px; overflow: auto; }
.pm-pipeline-modal-body pre.pm-modal-ai-json { max-height: 320px; background: #f8f9fa; padding: 0.75rem; border-radius: 6px; border: 1px solid #e0dfe1; }
.pm-modal-hint { font-style: italic; color: #646970; }
.pm-modal-log { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.pm-modal-log table tr:last-child { border-bottom: none !important; }
.pm-modal-log table tr:hover { background-color: #fff; }
.pm-pipeline-modal-title { font-size: 1.1rem; font-weight: 600; }

.pm-config-wrap { max-width: 900px; margin: 1rem 0; }
.pm-config-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #dcdcde; }
.pm-config-section h3 { margin-top: 0; }
.pm-config-table { width: 100%; border-collapse: collapse; }
.pm-config-table th, .pm-config-table td { padding: 8px; text-align: left; border-bottom: 1px solid #dcdcde; }
.pm-config-table input[type="text"], .pm-config-table input[type="email"] { width: 100%; max-width: 220px; }
.pm-config-table input.wide { max-width: 100%; min-width: 280px; }
.pm-config-table .pm-department-email { max-width: 100%; min-width: 320px; }
.pm-slug-label { color: #646970; font-size: 0.95em; }

/* Dashboard: mismo estilo visual que pm_setup (fondo #ebf0f2, paneles blancos, bordes #e0dfe1, redondeado) */
.pm-dashboard-wrap { max-width: 100%; margin: 1rem 0; background-color: #ebf0f2; padding: 1rem; border-radius: 12px; font-family: 'Inter', system-ui, sans-serif; }
.pm-dashboard-wrap h2 { margin-top: 0; font-size: 1.25rem; font-weight: 600; }
.pm-dashboard-filters {
	margin-bottom: 1.5rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
	padding: 1rem; background: #fff; border: 1px solid #e0dfe1; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pm-dashboard-filters label { margin-right: 0.25rem; font-size: 14px; font-weight: 500; }
.pm-dashboard-filters input[type="date"] { padding: 6px 12px; border: 1px solid #e0dfe1; border-radius: 12px; font-size: 14px; font-weight: 500; }
.pm-dashboard-filters .button { padding: 6px 14px; border: 1px solid #e0dfe1; border-radius: 12px; font-size: 14px; font-weight: 500; background-color: #DBEAFE; color: #1E40AF; }
.pm-dashboard-filters .button:hover, .pm-dashboard-filters .button:focus { background-color: #BFDBFE; border-color: #1E40AF; outline: none; }
.pm-dashboard-filters a.pm-dashboard-btn-today { display: inline-block; text-decoration: none; margin-left: 0.25rem; }
.pm-dashboard-filters a.pm-dashboard-btn-today:hover, .pm-dashboard-filters a.pm-dashboard-btn-today:focus { color: #1E40AF; }
.pm-dashboard-cards { display: flex; gap: 1rem; margin-bottom: 2rem; }
.pm-dash-card {
	background: #fff; padding: 1.5rem; min-width: 160px;
	border: 1px solid #e0dfe1; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pm-dash-card h3 { font-size: 0.95rem; font-weight: 500; margin: 0 0 0.5rem; }
.pm-dash-number { font-size: 2rem; font-weight: 600; margin: 0.25rem 0 0; }
.pm-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 782px) { .pm-dashboard-grid { grid-template-columns: 1fr; } }
.pm-dash-section {
	background: #fff; padding: 1rem; border: 1px solid #e0dfe1; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pm-dash-section h3 { margin-top: 0; margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 500; }
.pm-dash-table { width: 100%; border-collapse: collapse; }
.pm-dash-table th { padding: 0.6rem 0.5rem; text-align: left; background: #f6f7f7; border-bottom: 1px solid #e0dfe1; font-size: 14px; font-weight: 500; box-sizing: border-box; }
.pm-dash-table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 1px solid #e0dfe1; font-size: 14px; box-sizing: border-box; }
.pm-dash-table tr:last-child td { border-bottom: none; }
.pm-dash-full { grid-column: 1 / -1; }