@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Public+Sans:wght@400;500;600;700&display=swap');

/* El tema mostra el títol de la pàgina en blanc (pensat per anar sobre una
   imatge de capçalera). A les pàgines que usen aquest formulari no hi ha
   imatge de fons, així que el títol quedava blanc sobre blanc. Com que
   aquest full d'estils només es carrega a les pàgines del formulari i a
   les pàgines "standalone" definides a maybe_enqueue(), aquest ajust no
   afecta la resta del lloc. */
.entry-title {
	color: #16211d !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* El tema fa servir una mida de lletra fixa (100px) per al títol, sense cap
   ajust per a mòbil, cosa que fa que a pantalles petites el títol es vegi
   desmesurat i, amb paraules llargues, arribi a sortir-se de la pantalla.
   Reduïm la mida progressivament per sota dels 782px. */
@media (max-width: 782px) {
	.entry-title {
		font-size: 2.75rem !important;
		line-height: 1.15 !important;
	}
}
@media (max-width: 480px) {
	.entry-title {
		font-size: 2rem !important;
		line-height: 1.15 !important;
	}
}

.mlm-card {
	--mlm-ink: #16211d;
	--mlm-paper: #faf8f4;
	--mlm-paper-2: #f1ede5;
	--mlm-line: rgba(22, 33, 29, 0.14);
	--mlm-muted: #46534d;
	--mlm-accent: #c1662e;
	--mlm-accent-ink: #fff7ef;
	--mlm-good: #2f7a52;
	--mlm-bad: #b3412b;

	box-sizing: border-box;
	max-width: 480px;
	margin: 2rem auto;
	padding: 2rem 1.75rem 1.75rem;
	background: var(--mlm-paper);
	border: 1px solid var(--mlm-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(22, 33, 29, 0.05), 0 12px 32px -18px rgba(22, 33, 29, 0.35);
	color: var(--mlm-ink);
	font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.mlm-card *, .mlm-card *::before, .mlm-card *::after { box-sizing: inherit; }

.mlm-lang-switch {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 1.1rem;
}
.mlm-lang-btn {
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--mlm-line);
	background: transparent;
	color: var(--mlm-muted);
	cursor: pointer;
}
.mlm-lang-btn.is-active {
	background: var(--mlm-ink);
	border-color: var(--mlm-ink);
	color: var(--mlm-paper);
}

.mlm-card h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 1.65rem;
	line-height: 1.2;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}
.mlm-sub {
	margin: 0 0 1.4rem;
	color: var(--mlm-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.mlm-field { margin-bottom: 1rem; }
.mlm-field label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--mlm-muted);
	margin-bottom: 0.35rem;
}
.mlm-field input, .mlm-field select {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.8rem;
	border-radius: 10px;
	border: 1px solid var(--mlm-line);
	background: #fff;
	color: var(--mlm-ink);
}
.mlm-field input:focus, .mlm-field select:focus {
	outline: 2px solid var(--mlm-accent);
	outline-offset: 1px;
}

.mlm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mlm-field-check { margin-top: -0.3rem; }
.mlm-check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--mlm-muted);
	cursor: pointer;
}
.mlm-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 0.1rem;
	accent-color: var(--mlm-accent);
}
.mlm-check a { color: var(--mlm-accent); font-weight: 600; }

.mlm-hint {
	font-size: 0.8rem;
	color: var(--mlm-muted);
	margin: -0.3rem 0 1.1rem;
}

.mlm-submit {
	width: 100%;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.85rem 1rem;
	border: none;
	border-radius: 10px;
	background: var(--mlm-accent);
	color: var(--mlm-accent-ink);
	cursor: pointer;
	transition: filter 0.15s ease;
}
.mlm-submit:hover { filter: brightness(1.06); }
.mlm-submit:active { filter: brightness(0.96); }
.mlm-submit:disabled { opacity: 0.6; cursor: default; }

.mlm-success {
	text-align: center;
	padding: 1.5rem 0.5rem 0.5rem;
	color: var(--mlm-good);
}
.mlm-success-icon { width: 44px; height: 44px; margin-bottom: 0.75rem; }
.mlm-success p { color: var(--mlm-ink); font-size: 1.05rem; margin: 0; }

.mlm-error {
	margin-top: 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	background: rgba(179, 65, 43, 0.1);
	color: var(--mlm-bad);
	font-size: 0.88rem;
}

@media (prefers-color-scheme: dark) {
	.mlm-card:not([data-theme="light"]) {
		--mlm-ink: #f1efe9;
		--mlm-paper: #1b211d;
		--mlm-paper-2: #232a25;
		--mlm-line: rgba(241, 239, 233, 0.14);
		--mlm-muted: #9fb0a8;
		--mlm-accent: #d97e42;
		--mlm-accent-ink: #201107;
	}
	.mlm-card:not([data-theme="light"]) .mlm-field input,
	.mlm-card:not([data-theme="light"]) .mlm-field select {
		background: #222a25;
		color: var(--mlm-ink);
	}
}

/* ---------- Portal comercial ---------- */

.mlm-portal { max-width: 640px; }
.mlm-portal-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.2rem;
}
.mlm-portal-header h2 { font-size: 1.3rem; margin: 0; }
.mlm-logout {
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	background: none;
	border: 1px solid var(--mlm-line);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
	color: var(--mlm-muted);
	cursor: pointer;
}

.mlm-lead-list { display: flex; flex-direction: column; gap: 0.85rem; }

.mlm-lead-card {
	border: 1px solid var(--mlm-line);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	background: var(--mlm-paper-2);
}
.mlm-lead-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.mlm-lead-name { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; font-weight: 600; }
.mlm-lead-meta { font-size: 0.85rem; color: var(--mlm-muted); margin: 0.15rem 0 0; }
.mlm-lead-contact { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 0.7rem; font-size: 0.88rem; }
.mlm-lead-contact a { color: var(--mlm-accent); text-decoration: none; font-weight: 600; }

.mlm-lead-card select, .mlm-lead-card textarea {
	width: 100%;
	font: inherit;
	font-size: 0.92rem;
	padding: 0.5rem 0.65rem;
	border-radius: 8px;
	border: 1px solid var(--mlm-line);
	background: #fff;
	color: var(--mlm-ink);
	margin-top: 0.4rem;
}
.mlm-lead-card textarea { min-height: 3.2rem; resize: vertical; }

.mlm-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: var(--mlm-paper);
	border: 1px solid var(--mlm-line);
	color: var(--mlm-muted);
}
.mlm-badge[data-estado="nuevo"] { color: #1d5fae; border-color: rgba(29,95,174,0.35); }
.mlm-badge[data-estado="contactado"] { color: #a3711b; border-color: rgba(163,113,27,0.35); }
.mlm-badge[data-estado="seguimiento"] { color: #7a4ec7; border-color: rgba(122,78,199,0.35); }
.mlm-badge[data-estado="ganado"] { color: var(--mlm-good); border-color: rgba(47,122,82,0.35); }
.mlm-badge[data-estado="perdido"] { color: var(--mlm-bad); border-color: rgba(179,65,43,0.35); }

.mlm-empty { color: var(--mlm-muted); text-align: center; padding: 2rem 0; }

/* ---------- Panell de leads sense login ---------- */

.mlm-panel { max-width: 900px; }

.mlm-panel-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.4rem;
}
.mlm-panel-toolbar input,
.mlm-panel-toolbar select {
	font: inherit;
	font-size: 0.88rem;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	border: 1px solid var(--mlm-line);
	background: #fff;
	color: var(--mlm-ink);
}
.mlm-panel-toolbar input[type="search"] {
	flex: 1 1 220px;
	min-width: 200px;
}

.mlm-panel-row {
	display: flex;
	gap: 0.6rem;
	margin: 0.6rem 0;
}
.mlm-panel-row select { flex: 1 1 0; min-width: 0; }

.mlm-panel-autor { margin: 0 0 1.2rem; }
.mlm-panel-autor label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--mlm-muted);
	margin-bottom: 0.3rem;
}
.mlm-panel-autor input {
	font: inherit;
	font-size: 0.88rem;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	border: 1px solid var(--mlm-line);
	background: #fff;
	color: var(--mlm-ink);
	width: 100%;
	max-width: 280px;
}

/* ---------- Historial de seguiment (CRM) ---------- */

.mlm-crm { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px dashed var(--mlm-line); }

.mlm-crm-proximo {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.7rem;
	font-size: 0.85rem;
	color: var(--mlm-muted);
}
.mlm-crm-proximo label { font-weight: 600; }
.mlm-crm-proximo input[type="date"] {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.35rem 0.5rem;
	border-radius: 8px;
	border: 1px solid var(--mlm-line);
	background: #fff;
	color: var(--mlm-ink);
}
.mlm-crm-proximo input.is-overdue {
	border-color: var(--mlm-bad);
	color: var(--mlm-bad);
	font-weight: 600;
}

.mlm-crm-toggle {
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	background: none;
	border: 1px solid var(--mlm-line);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
	color: var(--mlm-muted);
	cursor: pointer;
}
.mlm-crm-toggle:hover { border-color: var(--mlm-ink); color: var(--mlm-ink); }

.mlm-crm-body { margin-top: 0.8rem; }

.mlm-crm-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
	max-height: 280px;
	overflow-y: auto;
}
.mlm-crm-entry {
	background: var(--mlm-paper-2);
	border-radius: 8px;
	padding: 0.55rem 0.7rem;
}
.mlm-crm-entry-head {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.72rem;
	margin-bottom: 0.25rem;
}
.mlm-crm-tipo {
	font-weight: 700;
	color: var(--mlm-accent);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.mlm-crm-meta { color: var(--mlm-muted); white-space: nowrap; }
.mlm-crm-entry p { margin: 0; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; }
.mlm-crm-empty { color: var(--mlm-muted); font-size: 0.85rem; margin: 0; }

.mlm-crm-form { display: flex; flex-direction: column; gap: 0.5rem; }
.mlm-crm-form select,
.mlm-crm-form textarea {
	font: inherit;
	font-size: 0.88rem;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	border: 1px solid var(--mlm-line);
	background: #fff;
	color: var(--mlm-ink);
}
.mlm-crm-form textarea { min-height: 2.4em; resize: vertical; }
.mlm-crm-form button {
	align-self: flex-start;
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.5rem 1.1rem;
	border: none;
	border-radius: 8px;
	background: var(--mlm-accent);
	color: var(--mlm-accent-ink);
	cursor: pointer;
}
.mlm-crm-form button:disabled { opacity: 0.6; cursor: default; }