/* ==========================================================================
   EL MARCO DE LA APP

   Se carga SOLO en las paginas del plugin, donde el tema no interviene. Por
   eso aca no hace falta pelear especificidad ni usar !important: no hay con
   quien competir. Esa es justamente la ventaja de la plantilla propia.

   El aspecto sigue el de la app que la academia ya usaba: barra lateral
   blanca con el logo arriba, seccion activa en rojo, y el contenido en
   tarjetas sobre un fondo muy claro.
   ========================================================================== */

.rr-own-template {
	margin: 0;
	background: #F4F6F8;
	color: var(--rr-ink, #2A3547);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.rr-shell {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px;
}

/* --- Barra lateral ------------------------------------------------------ */

.rr-shell__side {
	flex: 0 0 250px;
	position: sticky;
	top: 24px;
	background: #fff;
	border: 1px solid #EEF2F6;
	border-radius: 16px;
	box-shadow: rgba(145, 158, 171, .30) 0 0 2px 0,
	            rgba(145, 158, 171, .12) 0 12px 24px -4px;
	padding: 22px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: calc(100vh - 48px);
}

.rr-shell__brand {
	text-align: center;
	padding: 6px 8px 20px;
	border-bottom: 1px solid #EEF2F6;
	margin-bottom: 14px;
}

.rr-shell__brand img {
	max-width: 100%;
	max-height: 96px;
	height: auto;
}

.rr-shell__name {
	font-size: 18px;
	font-weight: 700;
	color: var(--rr-brand, #8E1813);
}

.rr-shell__switch { margin: 0 0 14px; }
.rr-shell__label {
	display: block;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #90A0B7;
	margin-bottom: 4px;
}
.rr-shell__switch select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #EEF2F6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
}

.rr-shell__nav { display: flex; flex-direction: column; gap: 2px; }

.rr-shell__link {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: #5A6A85;
	text-decoration: none;
	font-size: 15px;
	transition: background .12s ease, color .12s ease;
}

.rr-shell__link:hover { background: #F4F6F8; color: var(--rr-ink, #2A3547); }

.rr-shell__link.is-active {
	background: var(--rr-brand, #8E1813);
	color: #fff;
	font-weight: 600;
}

.rr-shell__foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #EEF2F6;
}

.rr-shell__link--quiet { font-size: 14px; color: #90A0B7; }

/* --- Contenido ---------------------------------------------------------- */

.rr-shell__main {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid #EEF2F6;
	border-radius: 16px;
	box-shadow: rgba(145, 158, 171, .30) 0 0 2px 0,
	            rgba(145, 158, 171, .12) 0 12px 24px -4px;
	padding: 32px 36px;
}

/* La app ya no necesita su propia barra de pestañas: la reemplaza el menu
   lateral. Dejarlas seria la misma navegacion dos veces. */
.rr-own-template .rr-tabs { display: none; }

/* Ni su titulo repetido: el logo del panel ya dice donde estamos. */
.rr-own-template .rr-app > h1:first-child { display: none; }

.rr-shell__toggle { display: none; }

/* --- Telefono ----------------------------------------------------------- */

@media (max-width: 900px) {
	.rr-shell { display: block; padding: 14px; }

	.rr-shell__toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		justify-content: flex-start;
		padding: 12px 16px;
		margin-bottom: 14px;
		background: #fff;
		border: 1px solid #EEF2F6;
		border-radius: 12px;
		font: inherit;
		cursor: pointer;
	}

	.rr-shell__bars,
	.rr-shell__bars::before,
	.rr-shell__bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: var(--rr-ink, #2A3547);
		position: relative;
	}
	.rr-shell__bars::before { content: ""; position: absolute; top: -6px; }
	.rr-shell__bars::after  { content: ""; position: absolute; top: 6px; }

	.rr-shell__side {
		display: none;
		position: static;
		min-height: 0;
		margin-bottom: 14px;
	}

	.rr-nav-open .rr-shell__side { display: flex; }

	.rr-shell__main { padding: 20px 18px; }
}

/* --- Papel -------------------------------------------------------------- */

@media print {
	.rr-shell__side,
	.rr-shell__toggle { display: none !important; }

	.rr-shell { display: block; padding: 0; max-width: 100%; }

	.rr-shell__main {
		border: 0;
		box-shadow: none;
		padding: 0;
		border-radius: 0;
	}

	.rr-own-template { background: #fff; }
}

/* ==========================================================================
   ACCESO Y MI CUENTA

   Sin sesion no hay barra lateral: la pagina va sola y centrada. Es la primera
   pantalla que ve alguien que llega, asi que no tiene que parecer el interior
   de una aplicacion todavia.
   ========================================================================== */

.rr-shell--bare { display: block; max-width: 980px; }
.rr-shell--bare .rr-shell__main { padding: 36px; }

.rr-access {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	align-items: start;
}

.rr-access--single { grid-template-columns: minmax(0, 520px); justify-content: center; }

.rr-access__box {
	background: #fff;
	border: 1px solid #EEF2F6;
	border-radius: 16px;
	padding: 26px 28px;
}

.rr-access__box h2 {
	margin: 0 0 18px;
	font-size: 21px;
	font-weight: 700;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--rr-brand, #8E1813);
	display: table;
}

.rr-access__field { margin: 0 0 16px; }

.rr-access__field label {
	display: block;
	font-size: .93em;
	font-weight: 600;
	margin-bottom: 5px;
}

.rr-access__field input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #EEF2F6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
}

.rr-access__field input:focus {
	outline: 2px solid var(--rr-brand, #8E1813);
	outline-offset: 1px;
}

.rr-access__label { font-weight: 600; margin: 20px 0 8px; }
.rr-access__hint  { color: #90A0B7; font-size: .92em; margin: 18px 0 8px; }
.rr-access__quiet { color: #90A0B7; font-size: .92em; }

.rr-access__lost { margin-top: 18px; }
.rr-access__lost summary { cursor: pointer; color: #5A6A85; font-size: .93em; }
.rr-access__lost form { margin-top: 14px; }

.rr-access__msg {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 4px solid;
}

.rr-access__msg--ok    { background: #F1F8F3; border-color: #1F7A3A; }
.rr-access__msg--error { background: #FDF3F2; border-color: var(--rr-brand, #8E1813); }

.rr-btn {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid #EEF2F6;
	border-radius: 8px;
	background: #fff;
	color: var(--rr-ink, #2A3547);
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.rr-btn--primary {
	background: var(--rr-brand, #8E1813);
	border-color: var(--rr-brand, #8E1813);
	color: #fff;
	font-weight: 600;
}

.rr-btn:hover { filter: brightness(1.06); }

/* --- Plan y pagos -------------------------------------------------------- */

.rr-billing__estado { margin-bottom: 28px; }
.rr-billing__plan { font-size: 26px; font-weight: 700; margin: 4px 0 8px; }

.rr-billing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.rr-billing__card {
	border: 1px solid #EEF2F6;
	border-radius: 16px;
	padding: 22px;
	background: #fff;
}

.rr-billing__card.is-current { border-color: var(--rr-brand, #8E1813); }
.rr-billing__card h3 { margin: 0 0 8px; font-size: 18px; }
.rr-billing__precio { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
.rr-billing__precio span { font-size: 14px; font-weight: 400; color: #90A0B7; }
.rr-billing__nota { color: #90A0B7; font-size: .9em; }
.rr-billing__actual { color: var(--rr-brand, #8E1813); font-weight: 600; }
.rr-billing__card form { margin: 10px 0 0; }

.rr-billing__aviso {
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 4px solid #72aee6;
	background: #F7F9FB;
	margin: 0 0 18px;
}
.rr-billing__aviso--ok    { border-color: #1F7A3A; background: #F1F8F3; }
.rr-billing__aviso--warn  { border-color: #dba617; background: #FDF8EC; }
.rr-billing__aviso--error { border-color: var(--rr-brand, #8E1813); background: #FDF3F2; }

.rr-billing__tabla { width: 100%; border-collapse: collapse; margin-top: 10px; }
.rr-billing__tabla td { padding: 9px 0; border-bottom: 1px solid #EEF2F6; }
.rr-billing__historial { margin-top: 32px; }

/* --- Informe express (compra sin registro) ------------------------------- */

.rr-guest { max-width: 620px; margin: 0 auto; }
.rr-guest h2 { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.rr-guest__lead { color: #5A6A85; margin-bottom: 26px; }
.rr-guest__hint { display: block; color: #90A0B7; font-size: .88em; margin-top: 5px; }
.rr-guest__form { margin-top: 8px; }

.rr-guest__resumen {
	list-style: none;
	margin: 0 0 22px;
	padding: 20px 22px;
	background: #F7F9FB;
	border: 1px solid #EEF2F6;
	border-radius: 12px;
}
.rr-guest__resumen li { padding: 5px 0; }
.rr-guest__resumen strong { font-size: 1.15em; }

.rr-guest__precio { font-size: 30px; font-weight: 700; margin: 0 0 14px; }
.rr-guest__pago { display: inline-block; margin: 0 10px 10px 0; }

/* --- Página pública de planes -------------------------------------------- */

.rr-precios { max-width: 1080px; margin: 0 auto; }
.rr-precios__bloque { margin-bottom: 48px; }
.rr-precios__bloque h2 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.rr-precios__lead { color: #5A6A85; max-width: 70ch; margin-bottom: 24px; }

.rr-precios__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

.rr-precios__card {
	background: #fff;
	border: 1px solid #EEF2F6;
	border-radius: 16px;
	box-shadow: rgba(145, 158, 171, .30) 0 0 2px 0,
	            rgba(145, 158, 171, .12) 0 12px 24px -4px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
}

.rr-precios__card h3 { margin: 0 0 6px; font-size: 19px; }

.rr-precios__precio { font-size: 30px; font-weight: 700; margin: 0 0 16px; }
.rr-precios__precio span { font-size: 14px; font-weight: 400; color: #90A0B7; }

.rr-precios__lista { list-style: none; margin: 0 0 18px; padding: 0; }
.rr-precios__lista li {
	padding: 7px 0 7px 22px;
	position: relative;
	border-bottom: 1px solid #F4F6F8;
}
.rr-precios__lista li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rr-brand, #8E1813);
}
.rr-precios__lista li:last-child { border-bottom: 0; }

.rr-precios__nota { color: #90A0B7; font-size: .9em; }
.rr-precios__card p:last-child { margin-top: auto; margin-bottom: 0; }

.rr-precios__faq { margin-bottom: 18px; max-width: 75ch; }
.rr-precios__faq h3 { font-size: 17px; margin: 0 0 4px; }
.rr-precios__faq p { margin: 0; color: #5A6A85; }

.rr-precios__aviso {
	background: #FDF8EC;
	border: 1px solid #F0E2C0;
	border-left: 4px solid #dba617;
	border-radius: 10px;
	padding: 18px 22px;
	margin-bottom: 32px;
	max-width: 75ch;
}
.rr-precios__aviso p { margin: 0 0 10px; }
.rr-precios__aviso p:last-child { margin-bottom: 0; }