.wpcrm-app { max-width: 1100px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.wpcrm-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; }
.wpcrm-tab-btn { background: none; border: none; padding: 10px 18px; font-size: 15px; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.wpcrm-tab-btn:hover { color: #1d4ed8; }
.wpcrm-tab-btn.wpcrm-tab-activo { color: #1d4ed8; border-bottom-color: #1d4ed8; }
/* Pestaña "Seguimiento" (v1.26.0): contador de pendientes junto al nombre
   de la pestaña, para que se note sin tener que entrar a mirar. */
.wpcrm-tab-badge { color: #b91c1c; font-weight: 700; }

/* Cada fila de la pestaña "Seguimiento" abre la ficha al hacer clic (igual
   que "Editar"), así que se marca con cursor de mano; los botones de
   dentro llevan su propio e.stopPropagation() en wpcrm.js para no
   disparar también la apertura de la ficha. */
.wpcrm-tabla-seguimiento tbody tr { cursor: pointer; }
.wpcrm-seguimiento-acciones { white-space: normal; vertical-align: middle; line-height: 1.5; }

/* v1.29.0: "Estado del seguimiento" — color fijo por fila, solo Contactos
   (decisión explícita de David: para Clientes no aplica), más el propio
   desplegable teñido según el valor elegido, para que se vea de un
   vistazo sin tener que leer la columna "Estado" una por una. Los 5
   colores están fijados aquí (no vienen del servidor) porque
   wpcrm_get_estados_seguimiento() define las claves/etiquetas, pero el
   color es presentación pura.
   Desde v1.29.1 (a petición de David) el color se aplica a la fila
   entera (fondo suave, pastel, para no dificultar la lectura del resto
   de columnas) en vez de solo a una franja a la izquierda; se conserva
   además el borde izquierdo, más saturado, como refuerzo visual. */
.wpcrm-tabla-seguimiento tbody tr[data-estado-seg] { border-left: 4px solid transparent; }
.wpcrm-tabla-seguimiento tbody tr[data-estado-seg="verde"] { border-left-color: #16a34a; background-color: #f0fdf4; }
.wpcrm-tabla-seguimiento tbody tr[data-estado-seg="rojo"] { border-left-color: #dc2626; background-color: #fef2f2; }
.wpcrm-tabla-seguimiento tbody tr[data-estado-seg="naranja"] { border-left-color: #ea580c; background-color: #fff7ed; }
.wpcrm-tabla-seguimiento tbody tr[data-estado-seg="amarillo"] { border-left-color: #eab308; background-color: #fefce8; }
.wpcrm-tabla-seguimiento tbody tr[data-estado-seg="gris"] { border-left-color: #9ca3af; background-color: #f9fafb; }

.wpcrm-seg-estado-select { font-size: 13px; padding: 3px 6px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; max-width: 100%; }
.wpcrm-seg-estado-select[data-color="verde"] { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.wpcrm-seg-estado-select[data-color="rojo"] { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.wpcrm-seg-estado-select[data-color="naranja"] { background: #ffedd5; border-color: #ea580c; color: #7c2d12; }
.wpcrm-seg-estado-select[data-color="amarillo"] { background: #fef9c3; border-color: #eab308; color: #713f12; }
.wpcrm-seg-estado-select[data-color="gris"] { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
/* v1.26.3: "Editar"/"Hecho"/"Nueva fecha" son tres botones dentro de un
   contenedor flex sin margen de maniobra — si la columna se queda sin
   espacio, el texto de un botón (normalmente "Nueva fecha", el más largo)
   partía la palabra en dos líneas ("Nueva" / "fecha"), apretando también
   a los botones de al lado y dando el aspecto "cortado" que señaló David.
   white-space:nowrap en cada botón evita que una palabra se parta a
   medias, y flex-wrap:wrap deja que "Nueva fecha" baje entero a una
   segunda línea (en vez de partirse) cuando de verdad no cabe. */
.wpcrm-seg-acciones-links { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 4px; column-gap: 12px; }
.wpcrm-seg-acciones-links .wpcrm-link { white-space: nowrap; }
.wpcrm-link.wpcrm-seg-hecho { color: #15803d; font-weight: 600; }
/* v1.26.2: arreglo de un fallo real (no solo un retoque visual) — esta
   regla, tal cual estaba, imponía "display: inline-flex" siempre, sin
   condición, así que ganaba a la regla nativa del navegador para
   [hidden] (que pone display:none) y la cajita de "Nueva fecha" se veía
   permanentemente abierta en TODAS las filas en vez de solo tras pulsar
   el botón — de ahí el aspecto amontonado que señaló David. Ahora el
   estilo de caja solo se aplica cuando de verdad está visible
   (":not([hidden])"), y de paso se le da aspecto de cajita propia
   (fondo, borde, esquinas redondeadas) en vez de quedar suelta pegada al
   resto de los enlaces. */
.wpcrm-seg-nueva-fecha-caja:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 10px;
	padding: 5px 10px;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 6px;
}
.wpcrm-seg-nueva-fecha-caja input[type="date"] { font-size: 13px; padding: 3px 6px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; }
.wpcrm-seg-nueva-fecha-caja .wpcrm-seg-nueva-fecha-guardar { color: #1d4ed8; font-weight: 600; }
.wpcrm-seg-nueva-fecha-caja .wpcrm-seg-nueva-fecha-cancelar { color: #6b7280; }

.wpcrm-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.wpcrm-header h2 { margin: 0; font-size: 1.4em; }
/* Agrupa el enlace de "Descargar calendario de citas (CSV)" (v1.20.0) junto
   al botón de "+ Nuevo..." en el lado derecho de la cabecera, en vez de
   quedar repartidos por separado por el justify-content:space-between. */
.wpcrm-header-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.wpcrm-btn { border: none; border-radius: 6px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
.wpcrm-btn-primary { background: #1d4ed8; color: #fff; }
.wpcrm-btn-primary:hover { background: #1e40af; }
.wpcrm-btn-secundario { display: inline-block; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.wpcrm-btn-secundario:hover { background: #e5e7eb; }

.wpcrm-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.wpcrm-filtros input, .wpcrm-filtros select { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.wpcrm-filtros input { flex: 1; min-width: 220px; }
.wpcrm-filtro-checkbox { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #374151; white-space: nowrap; }
.wpcrm-filtro-checkbox input { width: auto; }

/* La tabla tiene muchas columnas y en muchas pantallas no cabe entera. El
   div .wpcrm-tabla-wrap ya envolvía la tabla en el HTML, pero le faltaba
   esta regla: sin overflow-x, el navegador no le da ninguna barra de
   desplazamiento propia y el contenido queda cortado sin forma de verlo
   (v1.11.3). min-width en la tabla evita que las columnas se aplasten en
   vez de forzar el scroll. */
.wpcrm-tabla-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.wpcrm-tabla { width: 100%; min-width: 1250px; border-collapse: collapse; background: #fff; }
.wpcrm-tabla th, .wpcrm-tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.wpcrm-tabla th { background: #f9fafb; font-weight: 600; }

/* Columna "Notas": el texto se recorta a 12 palabras para no deformar la
   tabla (v1.12.0). Desde v1.14.0 es un botón (antes un <span> con title) —
   al hacer clic se abre un popup con el texto completo y seleccionable
   (ver wpcrm.js), en vez del tooltip nativo de antes, que no se podía
   seleccionar ni copiar. El estilo se reinicia para que siga pareciendo
   texto normal, solo con el subrayado de puntos como pista de que es
   interactivo. */
.wpcrm-notas-celda {
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	border-bottom: 1px dotted #9ca3af;
}
.wpcrm-notas-celda:hover {
	color: #1d4ed8;
	border-bottom-color: #1d4ed8;
}

/* Popup de "nota completa" (v1.14.0). Mismo patrón de "sacar a <body>" +
   !important de refuerzo que .wpcrm-modal, por si algún tema con
   contenedores "transform" intenta romper el position: fixed. */
.wpcrm-nota-popup-fondo {
	display: none;
	position: fixed !important;
	inset: 0;
	background: rgba(17,24,39,0.5);
	align-items: center;
	justify-content: center;
	z-index: 999999 !important;
	padding: 16px;
}
.wpcrm-nota-popup-fondo.wpcrm-nota-popup-visible { display: flex; }
.wpcrm-nota-popup-caja {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
	box-sizing: border-box;
}
.wpcrm-nota-popup-caja h3 { margin: 0 0 12px; font-size: 15px; }
.wpcrm-nota-popup-texto {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 14px;
	color: #1d2327;
	user-select: text;
}
.wpcrm-nota-popup-cerrar {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
}
.wpcrm-nota-popup-acciones { text-align: right; margin-top: 16px; }

.wpcrm-link { background: none; border: none; color: #1d4ed8; cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline; }
.wpcrm-link.wpcrm-borrar { color: #b91c1c; }
.wpcrm-link.wpcrm-convertir { color: #15803d; font-weight: 600; }

.wpcrm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e5e7eb; color: #374151; }
.wpcrm-badge-nuevo { background: #dbeafe; color: #1e40af; }
.wpcrm-badge-en_proceso { background: #fef3c7; color: #92400e; }
.wpcrm-badge-completado { background: #dcfce7; color: #166534; }
.wpcrm-badge-cancelado { background: #fee2e2; color: #991b1b; }
.wpcrm-badge-consentimiento-si { background: #dcfce7; color: #166534; }
.wpcrm-badge-consentimiento-no { background: #fee2e2; color: #991b1b; }
.wpcrm-badge-consentimiento-vacio { background: #e5e7eb; color: #4b5563; }

/* position/z-index reforzados con !important: el JS mueve el modal a ser
   hijo directo de <body> (ver wpcrm.js) para evitar que un contenedor del
   tema con CSS "transform" rompa el "position: fixed", pero mantenemos
   estos !important como red de seguridad extra por si algún estilo del
   tema intentase pisar estas propiedades. */
.wpcrm-modal { position: fixed !important; inset: 0; background: rgba(17,24,39,0.5); display: flex; align-items: center; justify-content: center; z-index: 999999 !important; padding: 16px; }
.wpcrm-modal-contenido { background: #fff; border-radius: 10px; padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; }
.wpcrm-modal-cerrar { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; line-height: 1; }

.wpcrm-form label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #374151; }
.wpcrm-form input, .wpcrm-form select, .wpcrm-form textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-weight: normal; box-sizing: border-box; }
.wpcrm-modal-acciones { text-align: right; margin-top: 8px; }

.wpcrm-login-wrap { max-width: 340px; margin: 0 auto; }
.wpcrm-aviso { padding: 14px; background: #fef3c7; border-radius: 8px; color: #92400e; }

.wpcrm-whatsapp-link { color: #15803d; font-weight: 600; text-decoration: none; }
.wpcrm-whatsapp-link:hover { text-decoration: underline; }

.wpcrm-etiqueta { display: inline-block; padding: 2px 8px; margin: 1px 2px 1px 0; border-radius: 999px; font-size: 12px; background: #ede9fe; color: #5b21b6; }

.wpcrm-fecha-vencida { color: #b91c1c; font-weight: 600; }

.wpcrm-fotos-seccion, .wpcrm-historial-seccion, .wpcrm-compras-seccion { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.wpcrm-fotos-seccion h4, .wpcrm-historial-seccion h4, .wpcrm-compras-seccion h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }

.wpcrm-compras-seccion .description { margin: 0 0 10px; font-size: 12px; color: #6b7280; }
.wpcrm-compras-lista { list-style: none; margin: 0 0 12px; padding: 0; max-height: 220px; overflow-y: auto; }
.wpcrm-compras-lista li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; }
.wpcrm-compras-lista li:last-child { border-bottom: none; }
.wpcrm-compra-meta { color: #9ca3af; font-size: 12px; }
.wpcrm-compras-vacio { color: #9ca3af; }
.wpcrm-compra-borrar { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 4px; }
.wpcrm-compra-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wpcrm-compra-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #374151; }
.wpcrm-compra-form input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }

.wpcrm-fotos-galeria { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.wpcrm-fotos-vacio { font-size: 13px; color: #9ca3af; margin: 0 0 12px; }
.wpcrm-foto-item { position: relative; width: 84px; height: 84px; border-radius: 6px; overflow: hidden; border: 1px solid #e5e7eb; }
.wpcrm-foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpcrm-foto-borrar { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px; text-align: center; padding: 0; border-radius: 50%; background: rgba(17,24,39,0.7); color: #fff; border: none; cursor: pointer; font-size: 14px; }
.wpcrm-fotos-subir-btn { cursor: pointer; }

.wpcrm-historial-lista { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.wpcrm-historial-lista li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; }
.wpcrm-historial-lista li:last-child { border-bottom: none; }
.wpcrm-historial-fecha { color: #6b7280; margin-right: 6px; }
.wpcrm-historial-usuario { font-weight: 600; }
.wpcrm-historial-vacio { color: #9ca3af; }

/* ===================================================================
   v1.32.0 — Rediseño de la página de colaboradores ([wpcrm_colaborador]).
   David pidió un aspecto "más moderno" para la ficha de pagos de los
   colaboradores y para su pantalla de acceso (la calificó de "un poco
   cutre"). Todo lo de aquí abajo va deliberadamente bajo los selectores
   .wpcrm-colaborador-app / .wpcrm-colaborador-login(-page) — las dos
   clases que solo pone esa pantalla — para no tocar ni un pixel del
   panel de empleados ([wpcrm_panel]), que comparte buena parte de las
   clases base (.wpcrm-app, .wpcrm-header, .wpcrm-aviso, .wpcrm-tabla,
   .wpcrm-login-wrap) pero no pidió ningún cambio de diseño esta vez.
   No se ha tocado ninguna lógica PHP: todo lo nuevo es presentación.
   =================================================================== */

/* -- Pantalla de acceso (no autenticado) -------------------------- */
.wpcrm-colaborador-login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 24px 16px;
}
.wpcrm-colaborador-login {
	width: 100%;
	max-width: 360px;
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 12px 32px rgba(17,24,39,0.08);
	box-sizing: border-box;
}
.wpcrm-colaborador-login-badge {
	width: 48px;
	height: 48px;
	margin: 0 auto 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, #1d4ed8, #4f46e5);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wpcrm-colaborador-login h2 {
	margin: 0 0 6px;
	font-size: 1.25em;
	text-align: center;
	color: #111827;
}
.wpcrm-colaborador-login-sub {
	margin: 0 0 26px;
	text-align: center;
	font-size: 13px;
	color: #6b7280;
}
.wpcrm-colaborador-login form#loginform p { margin: 0 0 14px; }
.wpcrm-colaborador-login form#loginform label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}
.wpcrm-colaborador-login form#loginform input[type="text"],
.wpcrm-colaborador-login form#loginform input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
}
.wpcrm-colaborador-login form#loginform input[type="text"]:focus,
.wpcrm-colaborador-login form#loginform input[type="password"]:focus {
	outline: none;
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}
.wpcrm-colaborador-login form#loginform p.login-remember {
	display: flex;
	align-items: center;
}
.wpcrm-colaborador-login form#loginform p.login-remember label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: #6b7280;
}
.wpcrm-colaborador-login form#loginform p.login-remember input { width: auto; margin: 0; }
.wpcrm-colaborador-login form#loginform p.login-submit { margin-top: 6px; }
.wpcrm-colaborador-login form#loginform input#wp-submit {
	width: 100%;
	background: #1d4ed8;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.wpcrm-colaborador-login form#loginform input#wp-submit:hover { background: #1e40af; }

/* -- Ficha de pagos (ya autenticado) ------------------------------- */
.wpcrm-colaborador-app .wpcrm-header h2 { font-size: 1.3em; color: #111827; }

.wpcrm-colab-admin-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	padding: 10px 14px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	color: #1e3a8a;
	font-size: 13px;
}
.wpcrm-colab-admin-bar form { margin: 0; }
.wpcrm-colab-admin-bar select { padding: 6px 8px; border: 1px solid #93c5fd; border-radius: 6px; font-size: 13px; background: #fff; }

.wpcrm-colab-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}
.wpcrm-colab-stat {
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 1px 2px rgba(17,24,39,0.04);
}
.wpcrm-colab-stat-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 6px;
}
.wpcrm-colab-stat-value {
	display: block;
	font-size: 1.6em;
	font-weight: 700;
	color: #111827;
	line-height: 1.15;
}
.wpcrm-colab-stat-nota {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	color: #9ca3af;
	line-height: 1.4;
}
.wpcrm-colab-stat-destacado {
	background: linear-gradient(135deg, #1d4ed8, #4338ca);
	border-color: transparent;
}
.wpcrm-colab-stat-destacado .wpcrm-colab-stat-label { color: rgba(255,255,255,0.75); }
.wpcrm-colab-stat-destacado .wpcrm-colab-stat-value { color: #fff; }

.wpcrm-colab-filtro-card {
	display: flex;
	align-items: center;
	margin-bottom: 18px;
	padding: 10px 14px;
	background: #f9fafb;
	border: 1px solid #eef0f3;
	border-radius: 10px;
}
.wpcrm-colab-filtro-card form { margin: 0; }
.wpcrm-colab-filtro-card label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #374151; }
.wpcrm-colab-filtro-card select { padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; background: #fff; }

.wpcrm-colab-vacio {
	padding: 28px 16px;
	text-align: center;
	color: #9ca3af;
	background: #f9fafb;
	border: 1px dashed #e5e7eb;
	border-radius: 12px;
}

/* Tabla de pagos: misma base .wpcrm-tabla del resto del plugin, con un
   acabado algo más cuidado (esquinas redondeadas, cabecera algo más
   marcada, zebra sutil, fila de total destacada) solo para esta tabla
   en concreto (.wpcrm-tabla-colaborador), sin afectar a ninguna otra. */
.wpcrm-colaborador-app .wpcrm-tabla-wrap {
	border: 1px solid #eef0f3;
	border-radius: 12px;
	overflow: hidden;
}
.wpcrm-tabla-colaborador { min-width: 900px; }
.wpcrm-tabla-colaborador thead th {
	background: #f9fafb;
	color: #374151;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.wpcrm-tabla-colaborador tbody tr:nth-child(even) { background: #fafafa; }
.wpcrm-tabla-colaborador tbody tr:hover { background: #eff6ff; }
.wpcrm-tabla-colaborador .wpcrm-colab-total-celda { color: #1d4ed8; }
.wpcrm-tabla-colaborador tfoot th { background: #f3f4f6; color: #111827; }

/* Pantallas estrechas: la tabla de 8 columnas no cabe ni con scroll
   horizontal cómodo en un móvil, así que cada fila se convierte en una
   pequeña tarjeta con "etiqueta: valor" (usando los atributos
   data-label que ya trae cada <td>), en vez de forzar al colaborador a
   desplazarse de lado para ver su propio total a cobrar. */
@media (max-width: 720px) {
	.wpcrm-colab-stats { grid-template-columns: 1fr; }
	.wpcrm-tabla-colaborador { min-width: 0; }
	.wpcrm-tabla-colaborador thead { display: none; }
	.wpcrm-tabla-colaborador tbody tr {
		display: block;
		margin-bottom: 10px;
		border: 1px solid #eef0f3;
		border-radius: 10px;
		padding: 4px 12px;
	}
	.wpcrm-tabla-colaborador tbody tr:nth-child(even) { background: #fff; }
	.wpcrm-tabla-colaborador td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid #f3f4f6;
		font-size: 13px;
	}
	.wpcrm-tabla-colaborador td:last-child { border-bottom: none; }
	.wpcrm-tabla-colaborador td::before {
		content: attr(data-label);
		font-size: 11.5px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: #9ca3af;
	}
	.wpcrm-tabla-colaborador tfoot,
	.wpcrm-tabla-colaborador thead { }
	.wpcrm-tabla-colaborador tfoot tr { display: block; border: 1px solid #eef0f3; border-radius: 10px; padding: 4px 12px; background: #f3f4f6; }
	.wpcrm-tabla-colaborador tfoot th {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid #e5e7eb;
		font-size: 13px;
		background: transparent;
		text-align: left;
	}
	.wpcrm-tabla-colaborador tfoot th:last-child { border-bottom: none; }
	.wpcrm-tabla-colaborador tfoot th[data-label]::before {
		content: attr(data-label);
		font-size: 11.5px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: #6b7280;
	}
}