/* Maccam Client Reports — v1.4.0 */

/*
   Paleta de énfasis (colores cálidos y sutiles):
   Verde  #4a7a52 · fondo #eef6f1  → correcto / buena puntuación
   Ámbar  #c47d0e · fondo #fdf9ec  → revisar / puntuación media
   Rojo   #b04038 · fondo #fdf1f0  → crítico / puntuación baja
*/

/* ── Sección principal ───────────────────────────────────────────────────── */
.mcr-section {
	padding: 80px 20px 160px;
	margin-top: -125px;
	background: #ffffff;
	font-family: Oswald, sans-serif;
	text-align: center;
}

.mcr-inner {
	max-width: 860px;
	margin: 0 auto;
}

/* ── Encabezado ──────────────────────────────────────────────────────────── */
.mcr-page-title {
	font-family: Oswald, sans-serif;
	font-size: 60px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000000;
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0 0 18px;
}

.mcr-page-subtitle {
	font-family: Oswald, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #666666;
	margin: 0 auto 36px;
	max-width: 520px;
	line-height: 1.5;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.mcr-card {
	background: #ffffff;
	border: 1px solid #dcdcdc;
	max-width: 540px;
	margin: 0 auto;
	padding: 36px 44px 40px;
	text-align: left;
	box-shadow: none;
}

.mcr-card-brand {
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: #000000;
	text-align: center;
	margin: 0 0 20px;
}

.mcr-card-divider {
	border: none;
	border-top: 1px solid #e8e8e8;
	margin: 0 -44px 28px;
}

/* ── Alerta ──────────────────────────────────────────────────────────────── */
.mcr-alert {
	border-left: 3px solid #000000;
	background: #f5f5f5;
	color: #000000;
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 400;
	padding: 11px 14px;
	margin-bottom: 20px;
	text-align: left;
}

/* ── Campo ───────────────────────────────────────────────────────────────── */
.mcr-field { margin-bottom: 16px; }

.mcr-label {
	display: block;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #303030;
	margin-bottom: 9px;
}

.mcr-input {
	display: block;
	width: 100%;
	border: 1px solid #303030;
	background: #ffffff;
	color: #000000;
	font-family: Oswald, sans-serif;
	font-size: 15px;
	padding: 14px 16px;
	outline: none;
	box-sizing: border-box;
	border-radius: 0;
	-webkit-appearance: none;
	transition: border-color 0.15s;
}

.mcr-input::placeholder { color: #c0c0c0; }
.mcr-input:focus        { border-color: #000000; }

/* ── Botón ───────────────────────────────────────────────────────────────── */
.mcr-btn {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 0 20px;
	height: 52px;
	line-height: 48px;
	border: 2px solid #303030;
	background: #ffffff;
	color: #303030;
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	text-align: center;
	border-radius: 0;
	-webkit-appearance: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	box-sizing: border-box;
}

.mcr-btn:hover {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

/* ── Nota de contacto ────────────────────────────────────────────────────── */
.mcr-contact-note {
	font-family: Oswald, sans-serif;
	font-size: 14px;
	color: #666666;
	margin: 28px 0 0;
	text-align: center;
}

.mcr-contact-note a { color: #000000; text-decoration: underline; }
.mcr-contact-note a:hover { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   REPORT VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.mcr-report-section {
	padding: 64px 20px 120px;
	margin-top: -125px;
	background: #ffffff;
}

.mcr-report-inner {
	max-width: 860px;
	margin: 0 auto;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.mcr-report-topbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 2px solid #000000;
	margin-bottom: 48px;
}

.mcr-report-title {
	font-family: Oswald, sans-serif;
	font-size: 38px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000000;
	margin: 0;
	line-height: 1.1;
}

.mcr-report-client {
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #666666;
	margin: 6px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mcr-signout-btn {
	display: inline-block;
	height: 36px;
	line-height: 32px;
	padding: 0 18px;
	border: 2px solid #303030;
	background: #ffffff;
	color: #303030;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 0;
	flex-shrink: 0;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.mcr-signout-btn:hover {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
	text-decoration: none;
}

/* ── Cuerpo del reporte ──────────────────────────────────────────────────── */
.mcr-report-body {
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mcr-report-body h2 {
	font-family: Oswald, sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000000;
	letter-spacing: 0.06em;
	margin: 64px 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #000000;
}

.mcr-report-body h2:first-child { margin-top: 0; }

.mcr-report-body h3 {
	font-family: Oswald, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #303030;
	letter-spacing: 0.08em;
	margin: 36px 0 12px;
}

.mcr-report-body p {
	margin: 0 0 18px;
	color: #333333;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.mcr-report-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 32px;
	font-size: 14px;
}

.mcr-report-body th {
	background: #000000;
	color: #ffffff;
	padding: 11px 16px;
	text-align: left;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.mcr-report-body td {
	padding: 11px 16px;
	border-bottom: 1px solid #eeeeee;
	color: #333333;
	vertical-align: top;
	text-align: left;
}

.mcr-report-body tr:last-child td { border-bottom: none; }
.mcr-report-body tr:nth-child(even) td { background: #fafafa; }

/* Filas con fondo de énfasis según severidad */
.mcr-fila-critico td { background-color: #fdf1f0 !important; }
.mcr-fila-alto    td { background-color: #fdf9ed !important; }
.mcr-fila-ok      td { background-color: #eef6f1 !important; }

/* ── Métricas ────────────────────────────────────────────────────────────── */
.mcr-metric {
	display: inline-block;
	border: 1px solid #dcdcdc;
	padding: 16px 24px;
	margin: 6px 8px 6px 0;
	text-align: center;
	min-width: 120px;
	vertical-align: top;
}

.mcr-metric strong {
	display: block;
	font-family: Oswald, sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #000000;
	line-height: 1;
}

.mcr-metric span {
	display: block;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #888888;
	margin-top: 6px;
}

/* ── Indicadores de estado — chip de fondo suave, sin borde ─────────────── */
.mcr-report-body td.mcr-status-ok,
.mcr-report-body td.mcr-status-warn,
.mcr-report-body td.mcr-status-error {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.mcr-ok, .mcr-status-ok {
	display: inline-block;
	padding: 5px 12px;
	background: #eef6f1;
	color: #2d6a3f;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
}

.mcr-warn, .mcr-status-warn {
	display: inline-block;
	padding: 5px 12px;
	background: #fdf9ec;
	color: #7a5000;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
}

.mcr-error, .mcr-status-error {
	display: inline-block;
	padding: 5px 12px;
	background: #fdf1f0;
	color: #7a2020;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
}

/* ── Barras de puntuación ────────────────────────────────────────────────── */
.mcr-bar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid #f2f2f2;
}

.mcr-bar-row:last-child { border-bottom: none; }

.mcr-bar-name {
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #303030;
	min-width: 200px;
}

.mcr-bar-track {
	flex: 1;
	height: 7px;
	background: #eeeeee;
}

.mcr-bar-fill         { height: 7px; background: #000000; }
.mcr-bar-fill--verde  { background: #4a7a52; }
.mcr-bar-fill--ambar  { background: #c47d0e; }
.mcr-bar-fill--rojo   { background: #b04038; }

.mcr-bar-score              { font-family: Oswald, sans-serif; font-size: 13px; font-weight: 700; color: #000000; min-width: 44px; text-align: right; }
.mcr-bar-score--verde { color: #4a7a52; }
.mcr-bar-score--ambar { color: #c47d0e; }
.mcr-bar-score--rojo  { color: #b04038; }

/* ── Badges de severidad — colores de énfasis ────────────────────────────── */
.mcr-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	font-family: Oswald, sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 1px solid;
	vertical-align: middle;
	white-space: nowrap;
}

.mcr-badge--critico,
.mcr-badge--critical { background: #b04038; color: #ffffff; border-color: #b04038; }

.mcr-badge--alto,
.mcr-badge--high     { background: #fdf9ed; color: #c47d0e; border-color: #c47d0e; }

.mcr-badge--medio,
.mcr-badge--medium   { background: transparent; color: #666666; border-color: #aaaaaa; }

.mcr-badge--bajo,
.mcr-badge--low      { background: transparent; color: #999999; border-color: #cccccc; }

/* ── Callout ─────────────────────────────────────────────────────────────── */
.mcr-callout {
	border-left: 3px solid #000000;
	padding: 16px 20px;
	background: #f8f8f8;
	margin: 24px 0;
}

.mcr-callout--verde { border-left-color: #4a7a52; background: #eef6f1; }
.mcr-callout--ambar { border-left-color: #c47d0e; background: #fdf9ec; }
.mcr-callout--rojo  { border-left-color: #b04038; background: #fdf1f0; }

.mcr-callout-label {
	font-family: Oswald, sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #999999;
	margin-bottom: 8px;
}

.mcr-callout p { font-size: 14px; color: #303030; margin: 0; line-height: 1.6; }

/* ── Overview hero ───────────────────────────────────────────────────────── */
.mcr-overview-bar {
	background: #000000;
	color: #ffffff;
	padding: 24px 32px;
	margin: 0 0 40px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}

.mcr-overview-score {
	font-family: Oswald, sans-serif;
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
	color: #c47d0e;
	animation: mcr-score-hero 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mcr-overview-score span { font-size: 22px; font-weight: 300; color: #666666; }

@keyframes mcr-score-hero {
	from { opacity: 0; transform: translateY(12px); letter-spacing: 0.08em; }
	to   { opacity: 1; transform: translateY(0);    letter-spacing: normal; }
}

.mcr-overview-label {
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #666666;
}

.mcr-overview-verdict {
	font-family: Oswald, sans-serif;
	font-size: 15px;
	color: #888888;
	margin-top: 4px;
}

.mcr-overview-meta { display: flex; gap: 32px; flex-wrap: wrap; }
.mcr-overview-meta-item { text-align: left; }

/* ── Gráfico de dona ─────────────────────────────────────────────────────── */
.mcr-donut-wrap {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 28px 0 36px;
	flex-wrap: wrap;
}

.mcr-donut {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 57/80 = 71.25% */
.mcr-donut--57 {
	background: conic-gradient( #c47d0e 0% 71.25%, #e4e4e4 71.25% 100% );
}

.mcr-donut::before {
	content: '';
	position: absolute;
	width: 112px;
	height: 112px;
	background: #ffffff;
	border-radius: 50%;
}

.mcr-donut-center {
	position: relative;
	z-index: 1;
	text-align: center;
}

.mcr-donut-num {
	font-family: Oswald, sans-serif;
	font-size: 40px;
	font-weight: 700;
	color: #000000;
	line-height: 1;
	animation: mcr-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

@keyframes mcr-pop-in {
	from { opacity: 0; transform: scale(0.5); }
	80%  { transform: scale(1.08); }
	to   { opacity: 1; transform: scale(1); }
}

.mcr-donut-denom {
	font-family: Oswald, sans-serif;
	font-size: 13px;
	color: #888888;
	margin-top: 2px;
}

.mcr-donut-info { flex: 1; min-width: 180px; }

.mcr-donut-verdict {
	font-family: Oswald, sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000000;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}

.mcr-donut-desc {
	font-size: 14px;
	color: #444444;
	line-height: 1.6;
	margin: 0 0 16px;
}

.mcr-donut-leyenda { display: flex; flex-wrap: wrap; gap: 16px; }

.mcr-leyenda-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	color: #555555;
}

.mcr-leyenda-punto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mcr-leyenda-punto--verde { background: #4a7a52; }
.mcr-leyenda-punto--ambar { background: #c47d0e; }
.mcr-leyenda-punto--rojo  { background: #b04038; }

/* ── Resumen de hallazgos por severidad ──────────────────────────────────── */
.mcr-severity-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #e0e0e0;
	border: 1px solid #e0e0e0;
	margin: 16px 0 28px;
}

.mcr-severity-card { padding: 20px 16px; text-align: center; }

.mcr-severity-num {
	font-family: Oswald, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 6px;
}

.mcr-severity-lbl {
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.mcr-severity-critico                    { background: #fdf1f0; }
.mcr-severity-critico .mcr-severity-num  { color: #b04038; }
.mcr-severity-critico .mcr-severity-lbl  { color: #b04038; }

.mcr-severity-alto                       { background: #fdf9ed; }
.mcr-severity-alto .mcr-severity-num     { color: #c47d0e; }
.mcr-severity-alto .mcr-severity-lbl     { color: #c47d0e; }

.mcr-severity-medio                      { background: #f8f8f8; }
.mcr-severity-medio .mcr-severity-num    { color: #555555; }
.mcr-severity-medio .mcr-severity-lbl    { color: #666666; }

.mcr-severity-bajo                       { background: #fafafa; }
.mcr-severity-bajo .mcr-severity-num     { color: #888888; }
.mcr-severity-bajo .mcr-severity-lbl     { color: #999999; }

/* ── Gráfico de barras horizontal (palabras clave) ───────────────────────── */
.mcr-kw-hbars { margin: 16px 0 28px; }

.mcr-kw-hbar-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid #f2f2f2;
}

.mcr-kw-hbar-row:last-child { border-bottom: none; }

.mcr-kw-hbar-label {
	font-size: 13px;
	color: #333333;
	min-width: 220px;
	max-width: 220px;
	line-height: 1.35;
}

.mcr-kw-hbar-track { flex: 1; height: 10px; background: #f0f0f0; }

.mcr-kw-hbar-fill         { height: 10px; background: #4a7a52; }
.mcr-kw-hbar-fill--ambar  { background: #c47d0e; }
.mcr-kw-hbar-fill--gris   { background: #bbbbbb; }

.mcr-kw-hbar-val {
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #555555;
	min-width: 72px;
	text-align: right;
}

/* ── Roadmap 30/60/90 ────────────────────────────────────────────────────── */
.mcr-roadmap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #e0e0e0;
	border: 1px solid #e0e0e0;
	margin: 24px 0;
}

.mcr-roadmap-col { background: #ffffff; padding: 24px 20px; }

.mcr-roadmap-period {
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000000;
	padding-bottom: 12px;
	border-bottom: 2px solid #000000;
	margin-bottom: 16px;
}

.mcr-roadmap-list { list-style: none; padding: 0; margin: 0; }

.mcr-roadmap-list li {
	font-size: 13px;
	color: #444444;
	padding: 7px 0;
	border-bottom: 1px solid #f2f2f2;
	display: flex;
	gap: 8px;
	line-height: 1.45;
}

.mcr-roadmap-list li:last-child { border-bottom: none; }
.mcr-roadmap-list li::before { content: '→'; color: #bbbbbb; flex-shrink: 0; font-size: 12px; }

/* ── Grid E-E-A-T ────────────────────────────────────────────────────────── */
.mcr-eeat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: #e0e0e0;
	border: 1px solid #e0e0e0;
	margin: 16px 0 32px;
}

.mcr-eeat-card { background: #ffffff; padding: 20px 22px; }

.mcr-eeat-label {
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000000;
	margin-bottom: 8px;
}

.mcr-eeat-card p { font-size: 13px; color: #555555; line-height: 1.5; margin: 0; }

/* ── Footer del reporte ──────────────────────────────────────────────────── */
.mcr-report-footer {
	margin-top: 80px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
	font-family: Oswald, sans-serif;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #aaaaaa;
	text-align: center;
}

.mcr-report-footer a { color: #000000; text-decoration: none; }
.mcr-report-footer a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.mcr-page-title { font-size: 38px; }
	.mcr-section { padding: 56px 20px 120px; }
	.mcr-card { padding: 28px 24px 32px; }
	.mcr-card-divider { margin: 0 -24px 24px; }

	.mcr-report-title { font-size: 26px; }
	.mcr-report-topbar { flex-direction: column; align-items: flex-start; gap: 12px; }

	.mcr-bar-name { min-width: 130px; font-size: 11px; }
	.mcr-roadmap { grid-template-columns: 1fr; }
	.mcr-eeat-grid { grid-template-columns: 1fr; }
	.mcr-severity-grid { grid-template-columns: repeat(2, 1fr); }
	.mcr-donut-wrap { flex-direction: column; gap: 24px; }
	.mcr-overview-bar { flex-direction: column; gap: 16px; }
	.mcr-overview-score { font-size: 40px; }
	.mcr-metric { min-width: 90px; padding: 12px 14px; }
	.mcr-metric strong { font-size: 22px; }
	.mcr-kw-hbar-label { min-width: 130px; max-width: 130px; font-size: 12px; }
}