/* Club Asistencia — shortcode [instalador]
 *
 * Estilos de la home/landing con hero + escudo + CTA + banner de instalación
 * PWA. Se pinta desde el shortcode [instalador] renderizado por
 * CA_Shortcodes::render_instalador() (ver includes/class-ca-shortcodes.php).
 *
 * Mobile-first. Comparte la paleta y radios del resto del plugin
 * (assets/css/frontend.css) para que un profesor que toca "Ingresar" no sienta
 * que salta a otra app. Se duplican las variables acá a propósito (no @import
 * del CSS del app-shell): la page con [instalador] solo encola este archivo,
 * no todo frontend.css que trae 3400+ líneas de estilos de la app.
 *
 * Historia: hasta v2.21.27 este CSS vivía en el theme como
 * theme/assets/home.css, cargado por el propio front-page.php del theme. En
 * v2.21.28 se movió al plugin junto con el shortcode: el theme solo aporta
 * el <head>/<body> mínimos, y el markup + estilo del hero viven todos del
 * lado del plugin para que el instalador funcione con cualquier theme
 * (no solo con club-asistencia-theme).
 */

:root {
	--ca-bg:        #f8fafc;
	--ca-surface:   #ffffff;
	--ca-surface-2: #f1f5f9;
	--ca-border:    #e2e8f0;
	--ca-text:      #0f172a;
	--ca-text-dim:  #64748b;
	--ca-text-dimmer: #94a3b8;
	--ca-primary:   #0284c7;
	--ca-primary-d: #0277b3;
	--ca-primary-l: #e0f2fe;
	--ca-radius:    16px;
	--ca-radius-lg: 22px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--ca-bg);
	color: var(--ca-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
	line-height: 1.5;
}

body.ca-home-body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

/* La admin bar de WP se oculta en la page con [instalador] vía filtro
 * show_admin_bar en CA_Shortcodes (antes vivía en el theme). La home es un
 * "app shell" tipo card centrada, no una página de contenido, y la barra
 * gris de WP arriba (+ el margin-top: 32px que mete el propio core al body)
 * rompe esa sensación de app — sobre todo en mobile, donde le come una
 * franja entera al viewport. El acceso a wp-admin para quien puede
 * administrar sigue disponible por el link "Administrador" del footer de
 * esta misma página. */

.ca-home {
	flex: 1;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 20px 16px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------- Card contenedora ---------- */
.ca-home__card {
	background: var(--ca-surface);
	border: 1px solid var(--ca-border);
	border-radius: var(--ca-radius-lg);
	padding: 28px 22px 24px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ca-home__card--small { max-width: 420px; margin: 0 auto; text-align: center; align-items: center; }

/* ---------- Hero (escudo + nombre + lead) ---------- */
.ca-home__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	margin-bottom: 4px;
}

.ca-home__escudo-wrap {
	width: 128px;
	height: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	/* Sin fondo cuando hay escudo real (el escudo del club ya trae su propio
	 * fondo/colores); con placeholder default (--placeholder) sí ponemos un
	 * marco tenue para que no se vea "desnudo" contra el card. */
}
.ca-home__escudo-wrap--placeholder {
	background: var(--ca-surface-2);
	border: 1px dashed var(--ca-border);
	border-radius: 24px;
}
.ca-home__escudo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.ca-home__escudo--md {
	/* Variante para vistas secundarias (index.php / 404). */
	width: 72px;
	height: 72px;
}

.ca-home__title {
	font-size: 26px;
	font-weight: 800;
	margin: 0;
	color: var(--ca-text);
	letter-spacing: -0.01em;
}

/* Código grande arriba del título en 404.php — mismo tratamiento visual que
 * un "estado vacío", solo para dar contexto inmediato de qué pasó antes de
 * leer el texto. */
.ca-home__error-codigo {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ca-text-dim);
}

.ca-home__lead {
	margin: 0;
	color: var(--ca-text-dim);
	font-size: 15px;
	max-width: 360px;
}

/* ---------- Botones CTA ---------- */
.ca-home__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 18px;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
	line-height: 1.2;
}
.ca-home__btn:active { transform: scale(0.985); }
.ca-home__btn:focus-visible {
	outline: 2px solid var(--ca-primary);
	outline-offset: 2px;
}

.ca-home__btn--primary {
	background: var(--ca-primary-d);
	color: #fff;
	box-shadow: 0 4px 12px rgba(2, 119, 179, 0.24);
}
.ca-home__btn--primary:hover { background: #026a9d; }

.ca-home__btn--ghost {
	background: var(--ca-surface-2);
	color: var(--ca-text);
}
.ca-home__btn--ghost:hover { background: #e6ebf1; }

.ca-home__btn--install {
	background: var(--ca-primary-d);
	color: #fff;
	padding: 10px 16px;
	font-size: 14px;
	border-radius: 10px;
	width: auto;
	flex-shrink: 0;
	white-space: nowrap;
}
.ca-home__btn--install:hover { background: #026a9d; }

.ca-home__sub {
	text-align: center;
	color: var(--ca-text-dim);
	font-size: 11px;
	margin: -4px 0 0;
}

/* Bloque "Sesión iniciada como X" + logout. Antes el botón de logout vivía
   inline dentro del mismo <p> que el texto de sesión (y de paso, un <form>
   metido dentro de un <p> es HTML inválido — <form> no es contenido de
   fraseo). Ahora son dos líneas propias en flex-column: el texto de sesión
   arriba, el botón de logout abajo con más aire alrededor para que sea fácil
   de tocar en el celular sin quedar pegado a "Ir a Asistencia". */
.ca-home__session {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: -2px 0 0;
}
.ca-home__session-txt {
	text-align: center;
	color: var(--ca-text-dim);
	font-size: 11px;
}

/* El logout es <button type="submit"> dentro de un <form method="post">
   (ver front-page.php) en vez de <a href> — así el navegador no lo puede
   disparar solo con el prefetch especulativo al pasar el mouse cerca, que
   terminaba cerrando la sesión antes del clic real. Se le da forma de
   chip/pill propio (antes era texto suelto de 11px sin padding: fácil de
   leer de pasada, pero un blanco de toque mínimo en mobile) para que se
   note que es una acción, no solo un link informativo más. */
.ca-home__logout {
	background: none;
	border: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ca-text-dim);
	padding: 7px 14px;
	margin: 2px 0 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ca-home__logout:hover {
	background: #fee2e2;
	color: #b91c1c;
}
.ca-home__logout:focus-visible {
	outline: 2px solid var(--ca-primary);
	outline-offset: 2px;
}

/* ---------- Banner de instalación ---------- */
.ca-home__install {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--ca-primary-l);
	border: 1px solid #bae6fd;
	border-radius: 14px;
	padding: 14px 16px;
	margin-top: 6px;
}
/* IMPORTANTE: [hidden] y .ca-home__install tienen la MISMA especificidad
   (0-1-0 los dos: un atributo y una clase). Sin esta regla, el "display:flex"
   de arriba le gana al "display:none" que el navegador aplica por [hidden]
   (el CSS del sitio siempre prioriza sobre la hoja de estilos por defecto del
   navegador en un empate de especificidad), así que el atributo hidden que
   pone home.js queda sin efecto visual y los tres banners (Instalar/iOS/Ya
   instalada) terminan viéndose todos juntos sin importar el estado real.
   Esta regla combina clase + atributo (0-2-0), le gana al de arriba y hace
   que hidden vuelva a funcionar. */
.ca-home__install[hidden] { display: none; }
.ca-home__install--ios {
	/* iOS: sin botón, más aire para que la instrucción se lea sin problemas. */
	background: var(--ca-surface-2);
	border-color: var(--ca-border);
	align-items: flex-start;
}
.ca-home__install--ok {
	background: #dcfce7;
	border-color: #86efac;
}

.ca-home__install-icono {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--ca-primary-d) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M12 3v12m0 0 4-4m-4 4-4-4M5 21h14'/></svg>") center/22px no-repeat;
}
.ca-home__install--ok .ca-home__install-icono {
	background: #16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7'/></svg>") center/22px no-repeat;
}

.ca-home__install-txt {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ca-home__install-titulo {
	font-size: 14px;
	font-weight: 700;
	color: var(--ca-text);
}
.ca-home__install-desc {
	font-size: 12.5px;
	color: var(--ca-text-dim);
	line-height: 1.45;
}
.ca-home__ios-glyph {
	display: inline-block;
	background: var(--ca-surface);
	border: 1px solid var(--ca-border);
	border-radius: 5px;
	padding: 0 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

/* ---------- Banners informativos ---------- */
.ca-home__banner {
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
}
.ca-home__banner--warn {
	background: #fef3c7;
	border: 1px solid #fde68a;
	color: #78350f;
}
.ca-home__banner--info {
	background: var(--ca-primary-l);
	border: 1px solid #bae6fd;
	color: #075985;
}

/* ---------- Footer ---------- */
.ca-home__footer {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--ca-border);
	text-align: center;
	font-size: 13px;
	color: var(--ca-text-dim);
}
.ca-home__link {
	color: var(--ca-text-dim);
	text-decoration: none;
}
.ca-home__link:hover { color: var(--ca-primary); text-decoration: underline; }
.ca-home__dot { margin: 0 6px; color: var(--ca-text-dimmer); }

/* ---------- Responsive: bien angosto (iPhone SE, 375px) ---------- */
@media (max-width: 380px) {
	.ca-home { padding: 16px 12px 24px; }
	.ca-home__card { padding: 22px 16px 20px; border-radius: 18px; }
	.ca-home__escudo-wrap { width: 104px; height: 104px; }
	.ca-home__title { font-size: 22px; }
	.ca-home__lead { font-size: 14px; }
	.ca-home__install { flex-wrap: wrap; row-gap: 10px; }
	.ca-home__install-txt { flex-basis: calc(100% - 52px); }
	.ca-home__btn--install { flex-basis: 100%; }
}