/**
 * Cotización — estilos compartidos web + PDF (mPDF).
 *
 * Layout v2 — Slim header + footer en TODAS las páginas:
 * - PDF: el header/footer los pinta mPDF (SetHTMLHeader/Footer). Aquí solo
 *   estilamos el body de cada página.
 * - Web: cada section.page incluye divs .page-chrome-header / -footer que
 *   simulan visualmente lo que mPDF genera en el PDF.
 *
 * Reglas para compatibilidad con mPDF:
 * - Sin var(--xxx) (valores literales)
 * - Sin flexbox/grid (layout con tablas)
 */

/* Web: carga Montserrat de Google Fonts. mPDF ignora @import y usa los
   TTFs locales declarados en gw_cot_make_mpdf() bajo el alias 'montserrat'. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ====== TOKENS LITERALES ====== */
/* dark bar:    #2C3539
   ink:         #3E4349   ← Neutral/500 (Figma)
   muted:       #939FAC   ← Neutral/300 (Figma)
   rule:        #E5E7EB
   accent cyan: #00B4BD
*/

/* ====== BARE BODY (vista web) ====== */
html {
	margin: 0;
	padding: 0;
}
body.cot-bare {
	background: #ECEFF1;
	margin: 0;
	padding: 0;
	font-family: 'montserrat', Montserrat, system-ui, -apple-system, Arial, sans-serif;
	color: #3E4349;
}
body.cot-bare .cot-doc {
	max-width: 210mm;
	margin: 0 auto;
	padding: 24px 0 48px;
}
body.cot-bare .cot-pwd-wrap {
	max-width: 480px;
	margin: 80px auto;
	padding: 32px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* ====== BASE ====== */
.cot-doc, .cot-doc * {
	box-sizing: border-box;
}

.cot-doc {
	color: #3E4349;
	font-family: 'montserrat', Montserrat, system-ui, -apple-system, Arial, sans-serif;
	font-size: 10pt;
	line-height: 1.6;
}

/* ====== PAGE WRAPPER ====== */
.cot-doc .page {
	width: 210mm;
	min-height: 297mm;
	background: #FFFFFF;
	position: relative;
	page-break-after: always;
	overflow: hidden;
}
.cot-doc .page-last {
	page-break-after: auto;
}

/* ====== PAGE CHROME — solo en web (PDF lo hace mPDF) ============= */
.cot-doc .page-chrome {
	position: absolute;
	left: 0; right: 0;
	display: table;
	width: 100%;
}
.cot-doc .page-chrome > div {
	display: table-cell;
	vertical-align: middle;
}
/* Web emula los mismos tamaños/paddings que el PDF para que el preview
   sea fiel: header 17mm (4+9+4), footer 13mm. vertical-align:middle viene
   heredado de `.page-chrome > div`. */
.cot-doc .page-chrome-header {
	top: 0;
	height: 17mm;
	background: #FFFFFF;
	border-bottom: 0.5mm solid #00B4BD;
	color: #3E4349;
}
.cot-doc .page-chrome-header-left {
	padding-left: 20mm;
}
.cot-doc .page-chrome-logo {
	height: 9mm;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}
.cot-doc .page-chrome-header-right {
	padding-right: 20mm;
	text-align: right;
	font-size: 8pt;
	color: #939FAC;
	letter-spacing: 1pt;
}

.cot-doc .page-chrome-footer {
	bottom: 0;
	height: 13mm;
	border-top: 0.3mm solid #E5E7EB;
}
.cot-doc .page-chrome-footer-left {
	padding-left: 20mm;
	font-size: 7.5pt;
	color: #939FAC;
}
.cot-doc .page-chrome-footer-right {
	padding-right: 20mm;
	text-align: right;
	font-size: 7.5pt;
	color: #939FAC;
}

/* ====== PAGE 1 — PORTADA ====== */
.cot-doc .cover-body {
	padding: 90mm 20mm 30mm 20mm;
	text-align: center;
}
.cot-doc .cover-eyebrow {
	font-size: 9pt;
	font-weight: 700;
	color: #00B4BD;
	letter-spacing: 2.5pt;
	margin: 0 0 0 0;
}
.cot-doc .cover-accent {
	width: 13mm;
	height: 0.5mm;
	background: #00B4BD;
	margin: 4mm auto 6mm auto;
}
.cot-doc .cover-title {
	font-size: 26pt;
	font-weight: 700;
	color: #3E4349;
	margin: 0 0 4mm 0;
	letter-spacing: 0.4pt;
	text-transform: uppercase;
	line-height: 1.2;
}
.cot-doc .cover-subtitle {
	font-size: 11pt;
	font-weight: 400;
	color: #939FAC;
	margin: 0 0 14mm 0;
	letter-spacing: 2pt;
	text-transform: uppercase;
}
.cot-doc .cover-icons {
	margin: 0 auto 16mm auto;
}
.cot-doc .cover-icon-img {
	width: 13mm;
	height: 13mm;
}
.cot-doc .cover-icon-spacer {
	width: 9mm;
}
.cot-doc .cover-meta-label {
	font-size: 7.5pt;
	font-weight: 700;
	color: #939FAC;
	letter-spacing: 2pt;
	margin: 6mm 0 1mm 0;
}
.cot-doc .cover-meta-value {
	font-size: 11pt;
	color: #3E4349;
	margin: 0;
}

/* ====== PAGE 2 — CONTENIDO ====== */
.cot-doc .content-body {
	padding: 22mm 20mm 22mm 20mm;
}
.cot-doc .cot-section {
	margin-bottom: 9mm;
}
.cot-doc .cot-section-title {
	font-size: 16pt;
	font-weight: 700;
	color: #3E4349;
	margin: 0 0 2mm 0;
	letter-spacing: -0.1pt;
}
.cot-doc .cot-rule {
	border-bottom: 0.3mm solid #E5E7EB;
	margin: 0 0 4mm 0;
	height: 0;
}
.cot-doc .cot-text {
	font-size: 10pt;
	color: #3E4349;
	margin: 0 0 3mm 0;
	line-height: 1.6;
}
.cot-doc .cot-text-bold {
	font-weight: 700;
	margin-top: 4mm;
}
.cot-doc .cot-muted {
	color: #939FAC;
}

.cot-doc .cot-bullets {
	margin: 0 0 0 4mm;
	padding: 0;
	list-style-type: disc;
}
.cot-doc .cot-bullets li {
	margin: 0 0 1mm 0;
	font-size: 10pt;
	color: #3E4349;
	line-height: 1.55;
}
.cot-doc .cot-bullets-sub {
	margin-left: 6mm;
}

.cot-doc .cot-phase {
	margin-bottom: 5mm;
}
.cot-doc .cot-phase-head {
	margin: 0 0 1.5mm 0;
	font-size: 11pt;
}
.cot-doc .cot-cost-line,
.cot-doc .cot-tiempo-line {
	margin: 0 0 3mm 0;
	font-size: 12pt;
	font-weight: 700;
	color: #3E4349;
}

/* ====== PAGE 3 — TÉRMINOS Y CONDICIONES ====== */
.cot-doc .cot-terms-intro {
	margin-bottom: 6mm;
}
.cot-doc .cot-term {
	margin-bottom: 4mm;
}
.cot-doc .cot-term-title {
	margin: 0 0 1mm 0;
	font-size: 10pt;
}
.cot-doc .cot-footer-msg {
	margin-top: 8mm;
	text-align: center;
}
.cot-doc .cot-footer-lead {
	font-size: 11pt;
	margin: 0 0 2mm 0;
}
.cot-doc .cot-footer-contact {
	font-size: 9.5pt;
	color: #939FAC;
	margin: 0;
}

/* ====== WEB-ONLY ============================================== */
@media screen {
	.cot-doc .page {
		margin: 0 auto 24px auto;
		box-shadow: 0 6px 24px rgba(0,0,0,0.08);
		border-radius: 4px;
	}
	.cot-doc .page-last {
		margin-bottom: 0;
	}
}

/* ====== MOBILE (≤ 640px) ======================================
   El layout en mm de A4 se desborda en pantallas chicas. Acá hacemos
   las hojas fluidas (100% del viewport), reducimos paddings a px,
   ajustamos tamaños de fuente y bajamos la altura del chrome.
   Mantenemos el "look" de documento — header con logo, footer con
   contacto + paginación — pero adaptado a mobile. */
@media screen and (max-width: 640px) {
	body.cot-bare .cot-doc {
		max-width: 100%;
		padding: 0;
	}
	.cot-doc .page {
		width: 100%;
		min-height: 0;
		margin: 0 0 16px 0;
		border-radius: 0;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	}

	/* Chrome header/footer — reducimos alto y paddings horizontales */
	.cot-doc .page-chrome-header {
		height: 48px;
	}
	.cot-doc .page-chrome-header-left {
		padding-left: 16px;
	}
	.cot-doc .page-chrome-logo {
		height: 24px;
	}
	.cot-doc .page-chrome-header-right {
		padding-right: 16px;
		font-size: 9px;
		letter-spacing: 0.5pt;
	}
	.cot-doc .page-chrome-footer {
		height: 38px;
	}
	.cot-doc .page-chrome-footer-left {
		padding-left: 16px;
		font-size: 9px;
	}
	.cot-doc .page-chrome-footer-right {
		padding-right: 16px;
		font-size: 9px;
	}

	/* Cover — menos espacio arriba, título más chico */
	.cot-doc .cover-body {
		padding: 48px 20px 32px 20px;
	}
	.cot-doc .cover-eyebrow {
		font-size: 8pt;
		letter-spacing: 1.5pt;
	}
	.cot-doc .cover-title {
		font-size: 20pt;
		letter-spacing: 0.2pt;
		line-height: 1.15;
	}
	.cot-doc .cover-subtitle {
		font-size: 9pt;
		letter-spacing: 1.5pt;
		margin-bottom: 24px;
	}
	.cot-doc .cover-icons {
		margin-bottom: 24px;
	}
	.cot-doc .cover-icon-img {
		width: 36px;
		height: 36px;
	}
	.cot-doc .cover-icon-spacer {
		width: 16px;
	}
	.cot-doc .cover-meta-label {
		font-size: 7pt;
		margin-top: 16px;
	}
	.cot-doc .cover-meta-value {
		font-size: 10pt;
	}

	/* Contenido y T&C — paddings en px, tamaños suaves */
	.cot-doc .content-body {
		padding: 20px 20px;
	}
	.cot-doc .cot-section {
		margin-bottom: 24px;
	}
	.cot-doc .cot-section-title {
		font-size: 15pt;
	}
	.cot-doc .cot-text,
	.cot-doc .cot-bullets li {
		font-size: 10pt;
		line-height: 1.55;
	}
	.cot-doc .cot-rule {
		margin-bottom: 12px;
	}
	.cot-doc .cot-bullets {
		margin-left: 18px;
	}
	.cot-doc .cot-bullets-sub {
		margin-left: 18px;
	}
	.cot-doc .cot-phase {
		margin-bottom: 14px;
	}
	.cot-doc .cot-phase-head,
	.cot-doc .cot-cost-line,
	.cot-doc .cot-tiempo-line {
		font-size: 11pt;
	}
	.cot-doc .cot-term {
		margin-bottom: 12px;
	}
	.cot-doc .cot-footer-msg {
		margin-top: 24px;
	}
	.cot-doc .cot-footer-lead {
		font-size: 10pt;
	}
	.cot-doc .cot-footer-contact {
		font-size: 9pt;
	}
}

/* Pantallas muy pequeñas (iPhone SE, ~375px): ocultá la fecha en el
   header derecho para evitar que el logo se apriete */
@media screen and (max-width: 380px) {
	.cot-doc .page-chrome-header-right {
		display: none;
	}
	.cot-doc .page-chrome-header-left {
		display: table-cell;
		width: 100%;
	}
	.cot-doc .cover-title {
		font-size: 18pt;
	}
}