/**
 * Contratos: el documento y su editor.
 *
 * Un contrato se lee como un documento, no como un campo de formulario. Todo
 * lo que hay aquí sirve a esa idea: una hoja blanca con márgenes de verdad,
 * el mismo tipo de letra del resto de la plataforma, y los huecos dibujados
 * dentro del texto para que el cliente escriba sobre el papel.
 */

/* ============================================================
   La hoja
   ============================================================ */

.cgm-ctSheet {
	--ct-ink: #1b2137;
	--ct-soft: #5b6480;
	--ct-line: #e4e8f2;
	--ct-accent: #7c3aed;
	background: #fff;
	border: 1px solid var(--ct-line);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(20, 28, 56, .04), 0 18px 44px -28px rgba(20, 28, 56, .35);
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 68px) clamp(22px, 6vw, 76px);
	box-sizing: border-box;
}

.cgm-ctSheet--flush {
	max-width: none;
	margin: 0;
}

/* Tipografía del documento: la de la plataforma, con aire de papel. */
.cgm-ctDoc {
	color: var(--ct-ink);
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	text-align: left;
	overflow-wrap: break-word;
}

.cgm-ctDoc > *:first-child { margin-top: 0; }
.cgm-ctDoc > *:last-child { margin-bottom: 0; }

.cgm-ctDoc p {
	margin: 0 0 1.05em;
}

.cgm-ctDoc h1,
.cgm-ctDoc h2,
.cgm-ctDoc h3,
.cgm-ctDoc h4 {
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	color: var(--ct-ink);
	line-height: 1.28;
	margin: 1.7em 0 .6em;
	font-weight: 600;
}

.cgm-ctDoc h1 { font-size: 24px; letter-spacing: -.01em; }
.cgm-ctDoc h2 { font-size: 19px; }
.cgm-ctDoc h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.cgm-ctDoc h4 { font-size: 15px; }

.cgm-ctDoc ul,
.cgm-ctDoc ol {
	margin: 0 0 1.05em;
	padding-left: 1.5em;
}

.cgm-ctDoc li { margin: 0 0 .35em; }

.cgm-ctDoc blockquote {
	margin: 0 0 1.05em;
	padding: .1em 0 .1em 1.1em;
	border-left: 3px solid var(--ct-line);
	color: var(--ct-soft);
}

.cgm-ctDoc hr {
	border: 0;
	border-top: 1px solid var(--ct-line);
	margin: 2em 0;
}

.cgm-ctDoc a { color: var(--ct-accent); }

.cgm-ctDoc table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.05em;
	font-size: 14px;
}

.cgm-ctDoc th,
.cgm-ctDoc td {
	border: 1px solid var(--ct-line);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.cgm-ctDoc th { background: #f7f8fc; font-weight: 540; }

/* ============================================================
   Los huecos dentro del texto
   ============================================================ */

/* Vista de la agencia: se ve el nombre del campo. */
.cgm-ctDoc__chip {
	display: inline-block;
	background: #f3ecff;
	color: #6d28d9;
	border: 1px solid #e3d5ff;
	border-radius: 5px;
	padding: 0 .45em;
	font-size: .88em;
	font-weight: 540;
	line-height: 1.5;
	white-space: nowrap;
}

/* Documento firmado: el dato queda subrayado como si se hubiera escrito. */
.cgm-ctDoc__val {
	border-bottom: 1px solid #b9c0d4;
	padding: 0 .18em;
	font-weight: 540;
}

/* Hueco sin rellenar: se ve que falta, no pasa desapercibido. */
.cgm-ctDoc__blank {
	display: inline-block;
	min-width: 8em;
	border-bottom: 1px solid #b9c0d4;
}

/* El cliente escribe encima del documento. */
.cgm-ctDoc__slot { display: inline; }

.cgm-ctDoc__in {
	font: inherit;
	color: #4c1d95;
	font-weight: 540;
	background: #faf7ff;
	border: 0;
	border-bottom: 1.5px solid #c9b6f5;
	border-radius: 4px 4px 0 0;
	padding: 0 .4em;
	margin: 0 .12em;
	min-width: 7em;
	max-width: 100%;
	line-height: 1.5;
	transition: background .15s ease, border-color .15s ease;
}

.cgm-ctDoc__in::placeholder {
	color: #a7add0;
	font-weight: 400;
	font-style: italic;
}

.cgm-ctDoc__in:hover { background: #f5efff; }

.cgm-ctDoc__in:focus {
	outline: 0;
	background: #f3ecff;
	border-bottom-color: var(--ct-accent);
	box-shadow: 0 1px 0 0 var(--ct-accent);
}

.cgm-ctDoc__in.is-missing {
	background: #fff5f5;
	border-bottom-color: #e88;
}

/* ============================================================
   Barra sobre el documento (contador de campos, imprimir)
   ============================================================ */

.cgm-ctBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 860px;
	margin: 0 auto 14px;
}

.cgm-ctBar__left {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #5b6480;
	font-weight: 540;
}

.cgm-ctBar__count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f3ecff;
	color: #6d28d9;
	border-radius: 999px;
	padding: 4px 11px;
	font-size: 12px;
}

.cgm-ctBar__count.is-done {
	background: #e6f8f0;
	color: #12805a;
}

.cgm-ctBar__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid #dfe4f0;
	color: #2b3350;
	border-radius: 9px;
	padding: 8px 13px;
	font: inherit;
	font-size: 13px;
	font-weight: 540;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.cgm-ctBar__btn:hover { border-color: #c3cade; background: #fafbff; }
.cgm-ctBar__btn svg { width: 15px; height: 15px; }

/* ============================================================
   Editor enriquecido
   ============================================================ */

.cgm-ctEd {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 268px;
	gap: 18px;
	align-items: start;
}

@media (max-width: 1000px) {
	.cgm-ctEd { grid-template-columns: minmax(0, 1fr); }
}

.cgm-ctEd__main {
	min-width: 0;
	border: 1px solid #e2e7f2;
	border-radius: 12px;
	background: #f6f7fb;
	overflow: hidden;
}

/* Barra de herramientas */
.cgm-ctEd__bar {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
	padding: 7px 9px;
	background: #fff;
	border-bottom: 1px solid #e6eaf4;
	position: sticky;
	top: 0;
	z-index: 3;
}

.cgm-ctEd__sep {
	width: 1px;
	height: 20px;
	background: #e6eaf4;
	margin: 0 5px;
	flex: none;
}

.cgm-ctEd__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 30px;
	height: 30px;
	padding: 0 7px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: #454e6b;
	font: inherit;
	font-size: 13px;
	font-weight: 540;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.cgm-ctEd__tool:hover { background: #f1f3fa; color: #1b2137; }
.cgm-ctEd__tool.is-on { background: #f3ecff; color: #6d28d9; }
.cgm-ctEd__tool svg { width: 16px; height: 16px; }
.cgm-ctEd__tool--wide { padding: 0 10px; }

/* El lienzo: la misma hoja que verá el cliente. */
.cgm-ctEd__canvas {
	padding: 20px;
	max-height: 62vh;
	overflow: auto;
}

.cgm-ctEd__area {
	outline: 0;
	min-height: 320px;
}

.cgm-ctEd__area:empty::before {
	content: attr(data-placeholder);
	color: #a7add0;
	font-style: italic;
}

/* El hueco, dentro del editor, es una pieza que se arrastra y se borra entera. */
.cgm-ctEd__ph {
	display: inline-block;
	background: #f3ecff;
	color: #6d28d9;
	border: 1px solid #e3d5ff;
	border-radius: 5px;
	padding: 0 .45em;
	font-size: .88em;
	font-weight: 540;
	line-height: 1.55;
	white-space: nowrap;
	cursor: default;
	user-select: none;
}

.cgm-ctEd__area:focus .cgm-ctEd__ph { border-color: #d5c2ff; }

/* Panel lateral de campos */
.cgm-ctEd__side {
	border: 1px solid #e2e7f2;
	border-radius: 12px;
	background: #fff;
	padding: 14px;
	position: sticky;
	top: 12px;
}

.cgm-ctEd__sideTtl {
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #1b2137;
	margin: 0 0 3px;
}

.cgm-ctEd__sideSub {
	font-size: 12px;
	line-height: 1.5;
	color: #79829a;
	margin: 0 0 11px;
}

.cgm-ctEd__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.cgm-ctEd__chipBtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #f6f4ff;
	border: 1px solid #e6ddff;
	color: #6d28d9;
	border-radius: 7px;
	padding: 5px 9px;
	font: inherit;
	font-size: 12px;
	font-weight: 540;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}

.cgm-ctEd__chipBtn:hover { background: #efe9ff; border-color: #d5c2ff; }
.cgm-ctEd__chipBtn::before { content: '+'; font-weight: 600; opacity: .65; }

.cgm-ctEd__empty {
	font-size: 12px;
	color: #97a0b8;
	font-style: italic;
	margin: 0 0 12px;
}

.cgm-ctEd__new {
	border-top: 1px solid #eef1f8;
	padding-top: 12px;
}

.cgm-ctEd__newRow {
	display: flex;
	gap: 6px;
}

.cgm-ctEd__newIn {
	flex: 1;
	min-width: 0;
	border: 1px solid #dfe4f0;
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	color: #1b2137;
	background: #fbfcff;
}

.cgm-ctEd__newIn:focus {
	outline: 0;
	border-color: #b9a3f5;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}

.cgm-ctEd__newBtn {
	flex: none;
	border: 0;
	border-radius: 8px;
	background: #7c3aed;
	color: #fff;
	padding: 0 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cgm-ctEd__newBtn:hover { background: #6d28d9; }

.cgm-ctEd__hint {
	font-size: 11.5px;
	line-height: 1.5;
	color: #97a0b8;
	margin: 9px 0 0;
}

/* ============================================================
   Impresión: solo el documento, sin nada de la aplicación
   ============================================================ */

@media print {
	body.cgm-ct-printing * { visibility: hidden !important; }

	body.cgm-ct-printing .cgm-ctSheet,
	body.cgm-ct-printing .cgm-ctSheet * { visibility: visible !important; }

	body.cgm-ct-printing .cgm-ctSheet {
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.cgm-ctDoc__in {
		background: transparent;
		border-bottom: 1px solid #333;
		box-shadow: none;
		color: #000;
	}

	.cgm-ctDoc h1,
	.cgm-ctDoc h2,
	.cgm-ctDoc h3 { break-after: avoid-page; }

	.cgm-ctDoc p,
	.cgm-ctDoc li { break-inside: avoid; }

	@page { margin: 18mm 16mm; }
}

/* ============================================================
   Enganches con las pantallas donde vive el editor
   ============================================================ */

/* La etiqueta «Texto del contrato» ya no envuelve a un textarea: el editor es
   un bloque aparte, así que la etiqueta se pone sola encima. */
.cgm-lg__f--block,
.cgm-onb__fLbl {
	display: block;
	margin: 14px 0 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: #3d4a68;
}

.cgm-lg__f--block > span { display: block; }

/* Campo ya usado en el documento: se sigue pudiendo insertar otra vez, pero
   se distingue del que todavía no está puesto en ninguna parte. */
.cgm-ctEd__chipBtn.is-used {
	background: #fff;
	border-color: #e6eaf4;
	color: #79829a;
}

/* El panel del contrato aceptado no necesita el marco de tarjeta: la hoja ya
   es el marco. */
.cgm-lg__panel--doc {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}