/* Club Asistencia — theme: home
 * Mobile-first. Comparte la paleta y radios del plugin (ver
 * assets/css/frontend.css de club-asistencia-core) para que un profesor que
 * toca "Ingresar" no sienta que salta a otra app cuando llega a /login.
 * Se duplican las variables acá a propósito (no @import del CSS del plugin):
 * el theme tiene que poder pintar la home aunque el plugin esté desactivado
 * (con el warning correspondiente) y no queremos un GET extra que ni siquiera
 * es del mismo dominio de carpeta.
 */

: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 (cuando el user está logueado) empuja el contenido con
 * un margin-top: 32px del propio WP; nada que hacer acá, solo dejar que fluya.
 */

.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;
}

.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: 13px;
	margin: -4px 0 0;
}
.ca-home__link-mini {
	color: var(--ca-primary);
	text-decoration: none;
	margin-left: 6px;
}
.ca-home__link-mini:hover { text-decoration: underline; }

/* ---------- 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;
}
.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%; }
}