/* =========================================================
 * plugin-overrides.css — Tema JP 2026
 *
 * Estilos que repintar los selectores que pinten los plugins
 * existentes SIN tocar su PHP/JS. Estos selectores son los IDs
 * y clases que los plugins generan o esperan:
 *
 *   - #jp-contact-modal / .jp-modal / .jp-form  (plugin contacto)
 *   - .txcv-modal / .txcv-dialog / .txcv-btn    (plugin txcv-pro-aligned CV)
 *   - .jp-mini-case / .jp-proj-head / .jp-proj-logo (plugin proyectos)
 *   - .txux-exp-logo / .jp-edu-logo            (experiencia/estudios)
 *
 * IMPORTANTE: no se renombran clases ni se cambia el HTML que pintan
 * los plugins. Sólo se "repintan" desde aquí para unificar el sistema
 * de diseño.
 * ========================================================= */

/* ---------- Modal de contacto (plugin "Contacto — Tema Jesús Pérez") ----------
 * El plugin genera <div id="jp-contact-modal" class="jp-modal" hidden>
 * con <div class="jp-modal__dialog">, <form class="jp-form">, etc.
 * Compatibilizamos con la clase .jp-modal del tema (mismas reglas base).
 */
#jp-contact-modal[hidden] { display: none !important; }
#jp-contact-modal:not([hidden]) { display: flex; }
#jp-contact-modal .jp-form { padding: var(--pm-space-2) 0; }
#jp-contact-modal #jp-contact-website {
	/* Honeypot: invisible visualmente pero presente para bots. */
	position: absolute !important; left: -10000px !important; top: auto !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ---------- Modal de CV (plugin "txcv-pro-aligned") ----------
 * No tocamos su HTML/JS. Re-pintamos sólo a tonos del sistema.
 */
.txcv-modal { background: rgba(28,27,27,0.65); }
.txcv-dialog {
	background: var(--pm-surface-card);
	border-radius: var(--pm-radius-xl);
	box-shadow: var(--pm-shadow-3);
	overflow: hidden;
}
.txcv-header {
	background: var(--pm-surface-low);
	color: var(--pm-ink);
	border-bottom: 1px solid var(--pm-warm-grey-border);
	padding: var(--pm-space-3) var(--pm-space-5);
}
.txcv-title {
	font-weight: var(--pm-weight-bold);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	font-size: var(--pm-fs-label);
	color: var(--pm-primary);
}
.txcv-btn {
	background: var(--pm-surface-card);
	color: var(--pm-ink);
	border: 1px solid var(--pm-warm-grey-border) !important;
	border-radius: var(--pm-radius-md) !important;
	padding: 8px 14px !important;
	font-weight: var(--pm-weight-semibold);
	font-size: var(--pm-fs-body-sm);
	transition: background var(--pm-dur-fast) var(--pm-ease), color var(--pm-dur-fast) var(--pm-ease);
}
.txcv-btn:hover { background: var(--pm-primary); color: var(--pm-on-primary); }
.txcv-btn.primary { background: var(--pm-primary) !important; color: var(--pm-on-primary) !important; border-color: var(--pm-primary) !important; }
.txcv-btn.primary:hover { background: var(--pm-primary-hover) !important; }
#txcv-iframe { background: var(--pm-surface-card); }

/* ---------- Proyectos: enriquecidos por projects-cases.js ----------
 * El plugin inyecta dentro de cada .project:
 *   <div class="jp-proj-head"><img class="jp-proj-logo"></div>
 *   <div class="jp-mini-case line1"><span class="lbl">Rol:</span> ...</div>
 *   etc.
 */
.jp-proj-head {
	display: flex; align-items: center; gap: var(--pm-space-3);
	margin-bottom: var(--pm-space-3);
}
.jp-proj-logo {
	width: 44px; height: 44px;
	object-fit: contain;
	background: var(--pm-surface-card);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: var(--pm-radius-sm);
	padding: 4px;
}
.jp-mini-case {
	display: block;
	font-size: var(--pm-fs-body-sm);
	color: var(--pm-ink-2);
	line-height: 1.5;
	margin: 4px 0;
}
.jp-mini-case .lbl {
	font-size: 11px;
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	color: var(--pm-outline);
	font-weight: var(--pm-weight-bold);
	margin-right: 4px;
}
.jp-mini-case .val { color: var(--pm-ink); }
.jp-mini-case.line2 {
	background: var(--pm-tech-accent-soft);
	color: var(--pm-primary);
	padding: var(--pm-space-2) var(--pm-space-3);
	border-radius: var(--pm-radius-sm);
	margin-top: var(--pm-space-3);
	font-weight: var(--pm-weight-semibold);
}
.jp-mini-case.line2 a { color: inherit; text-decoration: underline; margin-left: 4px; }

/* ---------- Logos en timeline de experiencia / estudios ----------
 * Los plugins respectivos inyectan <img class="txux-exp-logo"> y
 * <img class="jp-edu-logo">. Forzamos un tratamiento uniforme.
 */
.txux-exp-logo,
.jp-edu-logo {
	width: 40px; height: 40px;
	object-fit: contain;
	background: var(--pm-surface-card);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: var(--pm-radius-sm);
	padding: 4px;
	margin: 0 0 var(--pm-space-2);
}

/* ---------- Ocultar pagination dots residual de citas en home ---------- */
.jp2026-home #dots,
.jp2026-home #dots .dot { display: none !important; }

/* ---------- Ocultar pie "Caso de éxito → Ver más" en cards de proyectos ----------
 * El pie lo puede pintar el tema (spa-render.js) o el plugin externo
 * (projects-cases.js). Cubrimos ambos casos con selectores defensivos.
 */
#projects-grid .jp-project__footer,
#projects-grid .jp-project__cta,
#projects-grid .jp-project__impact,
#projects-grid .project .jp-project__footer,
#projects-grid .project .jp-project__cta,
#projects-grid .project .jp-project__impact {
	display: none !important;
}

/* ---------- Ocultar el título "Casos de éxito" de la sección proyectos ----------
 * El h2 se imprime en template-parts/section-proyectos.php. Lo ocultamos
 * por CSS para no tocar el PHP y poder restaurarlo fácilmente.
 */
#proyectos .jp-section__header { display: none !important; }

/* ---------- Plugins flotantes (jp-cert-logos + boton-rrss) ----------
 * En desktop los dejamos pero garantizamos que no se monten sobre el
 * contenedor central (1120px). Si se quedan a la derecha del container,
 * que mantengan un margen mínimo y un look coherente con el sistema.
 */
.jpcl-badges {
	z-index: 30;
	gap: 12px;
}
.jpcl-badges img,
.jpcl-badges a {
	width: 44px; height: 44px;
	background: var(--pm-surface-card);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: 50%;
	padding: 4px;
	box-shadow: 0 4px 10px rgba(28,27,27,0.06);
	transition: transform var(--pm-dur-fast) var(--pm-ease);
}
.jpcl-badges img:hover,
.jpcl-badges a:hover { transform: translateY(-2px); }

.jp-rrss-fab {
	z-index: 30;
	background: var(--pm-primary) !important;
	transition: transform var(--pm-dur-fast) var(--pm-ease), box-shadow var(--pm-dur-fast) var(--pm-ease);
}
.jp-rrss-fab:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(28,27,27,0.18);
}

/* En tablet (768–1024) bajamos los badges un poco para que no choquen con
 * el contenido del container. */
@media (min-width: 768px) and (max-width: 1024px) {
	.jpcl-badges { transform: scale(0.85); transform-origin: right center; }
}