/* MRP Gaming · modal «Versión ahorro» y botón que lo abre. Solo variables --mrp-* (tokens.css). */

/* Botón «Versión ahorro» dentro del bloque de precios (tarjetas y ficha) */
.mrp-version__btn {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%;
	margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
	min-height: 32px;
}
.mrp-version--ahorro { position: relative; border-style: dashed; }
.mrp-version--ahorro:hover, .mrp-version--ahorro:focus-within { border-color: var(--mrp-accent); border-style: solid; }
.mrp-version__btn:focus-visible { outline: 3px solid var(--mrp-focus); outline-offset: 4px; border-radius: 4px; }
.mrp-version__ver { flex-basis: 100%; font-size: var(--mrp-fs-xs); font-weight: 600; color: var(--mrp-link); text-decoration: underline; text-underline-offset: 2px; }
.mrp-version__btn .mrp-version__nota { flex-basis: auto; }

/* Botón del asistente (mrp-asistente pinta .mrp-asis__ahorro-btn con data-mrp-ahorro) */
.mrp-asis__btn.mrp-asis__ahorro-btn { display: block; width: 100%; height: auto; text-align: left; line-height: 1.4; white-space: normal; border-style: dashed; }
.mrp-asis__btn.mrp-asis__ahorro-btn strong { display: block; }

/* Modal */
.mrp-ahorro-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mrp-ahorro-modal[hidden] { display: none; }
.mrp-ahorro-modal__fondo { position: absolute; inset: 0; background: rgba(5, 8, 6, .72); }
.mrp-ahorro-modal__panel {
	position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
	background: var(--mrp-surface); color: var(--mrp-text); border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius);
	box-shadow: var(--mrp-shadow); padding: 0 20px 20px; overscroll-behavior: contain;
}
.mrp-ahorro-modal__panel:focus { outline: none; }
.mrp-ahorro-modal__cab {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 -20px 12px; padding: 14px 12px 12px 20px; background: var(--mrp-surface); border-bottom: 1px solid var(--mrp-border);
}
.mrp-ahorro-modal__titulo { margin: 0; font-family: var(--mrp-font-display); font-size: var(--mrp-fs-lg); line-height: 1.3; }
.mrp-ahorro-modal__cerrar {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius-pill); background: transparent; color: var(--mrp-text); cursor: pointer;
}
.mrp-ahorro-modal__cerrar:hover { border-color: var(--mrp-accent); }
.mrp-ahorro-modal__cerrar:focus-visible, .mrp-ahorro-modal .mrp-btn:focus-visible { outline: 3px solid var(--mrp-focus); outline-offset: 2px; }
.mrp-ahorro-modal__h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 8px; font-size: var(--mrp-fs-md); }
.mrp-ahorro-modal__nota { margin: 8px 0 0; font-size: var(--mrp-fs-xs); color: var(--mrp-text-muted); }
.mrp-ahorro-modal__cargando, .mrp-ahorro-modal__error { margin: 16px 0; }
.mrp-ahorro-modal__error { color: var(--mrp-danger); }
html.mrp-ahorro-abierto body { overflow: hidden; }

/* Resumen */
.mrp-ahorro-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mrp-ahorro-resumen__col { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius-sm); background: var(--mrp-bg-soft); }
.mrp-ahorro-resumen__col--ahorro { border-color: var(--mrp-accent); }
.mrp-ahorro-resumen__et { font-size: var(--mrp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mrp-text-muted); }
.mrp-ahorro-resumen__precio { font-family: var(--mrp-font-display); font-size: var(--mrp-fs-xl); line-height: 1.2; }
.mrp-ahorro-resumen__cuota { font-size: var(--mrp-fs-xs); color: var(--mrp-text-muted); }
.mrp-ahorro-resumen__ahorras { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: var(--mrp-radius-sm); background: var(--mrp-green); color: var(--mrp-ink-on-green); font-weight: 800; text-align: center; }

/* Tabla */
.mrp-ahorro-tabla-wrap { overflow-x: auto; }
.mrp-ahorro-tabla { width: 100%; border-collapse: collapse; font-size: var(--mrp-fs-sm); }
.mrp-ahorro-tabla th, .mrp-ahorro-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--mrp-border); text-align: left; vertical-align: top; }
.mrp-ahorro-tabla thead th { font-size: var(--mrp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--mrp-text-muted); }
.mrp-ahorro-tabla tbody th { font-weight: 700; white-space: nowrap; }
.mrp-ahorro-tabla__dif { white-space: nowrap; text-align: right !important; font-weight: 700; }
.mrp-ahorro-tabla tr.is-cambia { background: color-mix(in srgb, var(--mrp-accent) 12%, transparent); }
.mrp-ahorro-tabla tr.is-cambia .mrp-ahorro-tabla__ahorro { font-weight: 700; }
.mrp-ahorro-tabla tr.is-cambia th { box-shadow: inset 4px 0 0 var(--mrp-accent); }
.mrp-ahorro-tabla .is-menos { color: var(--mrp-ok); }
.mrp-ahorro-tabla tr.is-igual td, .mrp-ahorro-tabla tr.is-igual th { color: var(--mrp-text-muted); font-weight: 400; }

/* Impacto */
.mrp-ahorro-fps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mrp-ahorro-fps li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius-sm); font-size: var(--mrp-fs-sm); }
.mrp-ahorro-fps__juego { font-weight: 700; }
.mrp-ahorro-perdidas { margin: 10px 0 0; padding-left: 1.2em; font-size: var(--mrp-fs-sm); }
.mrp-ahorro-perdidas li { margin: 2px 0; }

/* Acciones */
.mrp-ahorro-modal__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mrp-ahorro-modal__acciones .mrp-btn { flex: 1 1 220px; justify-content: center; text-align: center; min-height: 44px; }

/* Móvil: tabla en tarjetas apiladas, modal a pantalla casi completa */
@media (max-width: 640px) {
	.mrp-ahorro-modal { padding: 0; align-items: flex-end; }
	.mrp-ahorro-modal__panel { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: var(--mrp-radius) var(--mrp-radius) 0 0; padding: 0 14px 16px; }
	.mrp-ahorro-modal__cab { margin: 0 -14px 10px; padding-left: 14px; }
	.mrp-ahorro-resumen__precio { font-size: var(--mrp-fs-lg); }
	.mrp-ahorro-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mrp-ahorro-tabla, .mrp-ahorro-tabla tbody, .mrp-ahorro-tabla tr, .mrp-ahorro-tabla th, .mrp-ahorro-tabla td { display: block; width: 100%; }
	.mrp-ahorro-tabla tr { margin-bottom: 8px; border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius-sm); overflow: hidden; }
	.mrp-ahorro-tabla th, .mrp-ahorro-tabla td { border-bottom: 0; padding: 4px 12px; }
	.mrp-ahorro-tabla tbody th { padding-top: 8px; white-space: normal; }
	.mrp-ahorro-tabla td::before { content: attr(data-et) ": "; font-weight: 600; color: var(--mrp-text-muted); }
	.mrp-ahorro-tabla__dif { text-align: left !important; padding-bottom: 8px !important; }
	.mrp-ahorro-tabla tr.is-igual td.mrp-ahorro-tabla__ahorro { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.mrp-ahorro-modal:not([hidden]) .mrp-ahorro-modal__panel { animation: mrp-ahorro-in .18s var(--mrp-ease); }
	@keyframes mrp-ahorro-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}