/*
Theme Name: Fénix — hijo de Hello Biz
Description: Tema hijo para la capa PWA de Academia Bomberos Fénix. Contiene la capa de tokens y el CSS de modo app. No modifica la web pública.
Author: Biotza
Template: hello-biz
Version: 1.3.0
Text Domain: fenix-hijo
*/

/* Intencionadamente sin reglas.
   Los tokens viven en assets/css/tokens.css y el modo app en assets/css/app-mode.css.
   Este archivo existe porque WordPress lo exige para reconocer el tema hijo. */

/* ==========================================================================
   Boton de llamada a la accion
   --------------------------------------------------------------------------
   Un unico patron para los botones que empujan al alumno a hacer algo:
   «Apúntate», «Hacer un examen», «Generar examen», «Empezar el aprendizaje» y
   el aviso de anuncio nuevo. Pastilla roja con borde de tinta, como el boton
   de la cabecera.

   Los colores salen de los tokens --fx-cta-*, asi que en modo oscuro el
   relleno deja de ser rojo por su cuenta: #E53828 no llega al contraste
   minimo como fondo y se cambia por piedra clara.

   Sobre la especificidad: estos selectores llevan mas peso del estrictamente
   necesario a proposito. Compiten con reglas que llegan DESPUES en el orden
   de carga (app-historico.css del tema, fenix.css del plugin y el CSS de
   Tutor); con un solo nombre de clase perderian.
   ========================================================================== */

.fxa-boton:not(.fxa-boton--suave):not(.fxa-boton--peligro),
.fx button.fx-btn,
.fx a.fx-btn,
.tutor-btn.tutor-btn-primary,
.fxavi a.fxavi__btn--si,
.fxavi button.fxavi__btn--si {
	background: var(--fx-cta-fondo, #BB0F0F);
	color: var(--fx-cta-tinta, #FFFFFF);
	border: 1.6px solid var(--fx-cta-borde, #171717);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .3s, color .3s, border-color .3s;
}

/* El relleno interior solo se impone donde el boton es nuestro. En los de
   Tutor se respeta el suyo: hay tamanos pequenos y botones de bloque que se
   descuadrarian si se les fuerza un padding fijo. */
.fxa-boton:not(.fxa-boton--suave):not(.fxa-boton--peligro),
.fx button.fx-btn,
.fx a.fx-btn,
.fxavi a.fxavi__btn--si,
.fxavi button.fxavi__btn--si {
	padding: .75em 2em;
	font-weight: 400;
	line-height: 1;
}

.fxa-boton:not(.fxa-boton--suave):not(.fxa-boton--peligro):hover,
.fx button.fx-btn:hover,
.fx a.fx-btn:hover,
.tutor-btn.tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:focus,
.fxavi a.fxavi__btn--si:hover,
.fxavi button.fxavi__btn--si:hover {
	background: var(--fx-cta-fondo-hover, #272727);
	color: var(--fx-cta-tinta, #FFFFFF);
	border-color: var(--fx-cta-fondo-hover, #272727);
}

/* Foco visible CON separacion: el anillo se dibuja sobre la superficie de la
   pagina y no sobre el relleno del boton, que no daria contraste suficiente. */
.fxa-boton:focus-visible,
.fx button.fx-btn:focus-visible,
.fx a.fx-btn:focus-visible,
.tutor-btn.tutor-btn-primary:focus-visible,
.fxavi .fxavi__btn:focus-visible {
	outline: var(--fx-foco-ancho, 2px) solid var(--fx-foco, #BB0F0F);
	outline-offset: var(--fx-foco-sep, 2px);
}

/* ==========================================================================
   «Explorar cursos» del pie de la barra lateral del escritorio
   --------------------------------------------------------------------------
   Tutor lo pinta solo en la vista de alumno (User::is_student_view) y lleva
   al catalogo publico de cursos, que aqui no pinta nada: todo el contenido
   entra con la suscripcion. Se oculta por CSS y no se toca la plantilla del
   plugin, que se perderia en la siguiente actualizacion.
   ========================================================================== */

.tutor-see-all-courses { display: none !important; }

/* ==========================================================================
   Pagina «Instalar la app»
   --------------------------------------------------------------------------
   La pagina esta hecha con bloques normales de WordPress para que se pueda
   editar y meterle capturas sin tocar codigo. Estos estilos son los que le dan
   aire de infografia: tarjetas por plataforma, numeros en circulo y las
   capturas enmarcadas.

   Los huecos de imagen vacios no pintan nada hasta que se les sube un archivo,
   asi que la pagina se entiende igual antes y despues de ilustrarla.
   ========================================================================== */

.fx-inst-titulo { margin-bottom: .2em; }

.fx-inst-entradilla {
	font-size: 1.15em;
	line-height: 1.55;
	color: var(--fx-tinta-2, #585755);
	max-width: 42rem;
	margin-bottom: 2rem;
}

.fx-inst-portada img { border-radius: 12px; }

.fx-inst-columnas { gap: 1.5rem; margin-bottom: 2.5rem; }

.fx-inst-plataforma {
	border: 1px solid var(--fx-borde, #D3CDC6);
	border-top: 4px solid var(--fx-acento, #BB0F0F);
	border-radius: 12px;
	padding: 1.5rem;
	background: var(--fx-superficie-alt, #EDE9E5);
}

.fx-inst-plat-titulo { margin: 0 0 .1em; }

.fx-inst-plat-apoyo {
	margin: 0 0 1.5rem;
	font-size: .8em;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fx-acento, #BB0F0F);
}

.fx-inst-paso { margin-bottom: 1.4rem; }
.fx-inst-paso:last-child { margin-bottom: 0; }

.fx-inst-paso-texto {
	margin: 0;
	line-height: 1.5;
	padding-left: 2.6rem;
	position: relative;
}

/* El numero va posicionado y no como marcador de lista para que el texto de
   varias lineas quede alineado bajo si mismo, no bajo el circulo. */
.fx-inst-num {
	position: absolute;
	left: 0;
	top: -.1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--fx-acento, #BB0F0F);
	color: #FFFFFF;
	font-size: .85em;
	font-weight: 700;
	line-height: 1;
}

.fx-inst-captura { margin: .8rem 0 0 2.6rem; }
.fx-inst-captura img {
	border: 1px solid var(--fx-borde, #D3CDC6);
	border-radius: 10px;
	max-width: 100%;
	height: auto;
}

.fx-inst-notas { line-height: 1.6; }
.fx-inst-notas li { margin-bottom: .6rem; }

.fx-inst-ayuda {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fx-borde, #D3CDC6);
	color: var(--fx-tinta-2, #585755);
}

@media (max-width: 640px) {
	.fx-inst-plataforma { padding: 1.1rem; }
	.fx-inst-captura { margin-left: 0; }
}