/* ============================================================
   Sistema de Gestión Escolar — hoja de estilos base
   Paleta: tinta (#1F3A54), pizarra (#F6F4EF), mostaza (#C98A3E)
   Tipografía: "Source Serif 4" para títulos, "Inter" para UI
   ============================================================ */

:root {
	--tinta:        #1F3A54;
	--tinta-suave:  #2C4E6E;
	--pizarra:      #F6F4EF;
	--papel:        #FFFFFF;
	--mostaza:      #C98A3E;
	--texto:        #232323;
	--texto-suave:  #5B6570;
	--linea:        #E1DDD3;
	--exito:        #2F7A4D;
	--peligro:      #A6383A;
	--radio: 3px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: var(--pizarra);
	color: var(--texto);
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3, .marca {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	color: var(--tinta);
	margin: 0 0 .4em;
}

a { color: var(--tinta-suave); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Pantalla de login ---------- */
.login-pantalla {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 860px) {
	.login-pantalla { grid-template-columns: 1fr; }
	.login-marca { display: none; }
}
.login-marca {
	background: linear-gradient(160deg, var(--tinta) 0%, #14283B 100%);
	color: #F1EEE6;
	padding: 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.2rem;
}
.login-marca .escudo {
	width: 56px; height: 56px;
	border: 2px solid var(--mostaza);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Source Serif 4', serif;
	font-size: 1.5rem;
	color: var(--mostaza);
}
.login-marca h1 { color: #fff; font-size: 2.1rem; max-width: 14ch; }
.login-marca p { color: #C9D2DA; max-width: 34ch; font-size: 0.98rem; }

.login-formulario {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.tarjeta-login {
	width: 100%;
	max-width: 380px;
}
.tarjeta-login h2 { font-size: 1.5rem; }
.tarjeta-login .subtitulo { color: var(--texto-suave); margin-bottom: 1.8rem; font-size: .92rem; }

.campo { margin-bottom: 1.1rem; }
.campo label {
	display: block;
	font-size: .82rem;
	color: var(--texto-suave);
	margin-bottom: .35rem;
}
.campo input {
	width: 100%;
	padding: .65rem .75rem;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	font-size: .95rem;
	background: var(--papel);
}
.campo input:focus {
	outline: none;
	border-color: var(--tinta-suave);
	box-shadow: 0 0 0 3px rgba(44,78,110,.12);
}

.boton {
	display: inline-block;
	width: 100%;
	padding: .7rem 1rem;
	background: var(--tinta);
	color: #fff;
	border: none;
	border-radius: var(--radio);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}
.boton:hover { background: var(--tinta-suave); text-decoration: none; }

.alerta {
	padding: .75rem 1rem;
	border-radius: var(--radio);
	font-size: .88rem;
	margin-bottom: 1.1rem;
}
.alerta-error { background: #FBEAEA; color: var(--peligro); border: 1px solid #F0C9CA; }
.alerta-exito { background: #EAF4EE; color: var(--exito); border: 1px solid #C9E3D3; }

/* ---------- Estructura interna (dashboard) ---------- */
.app-layout { display: flex; min-height: 100vh; }

.app-sidebar {
	width: 240px;
	flex-shrink: 0;
	background: var(--tinta);
	color: #EDEFF1;
	display: flex;
	flex-direction: column;
}
.app-sidebar .marca-lateral {
	padding: 1.4rem 1.2rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
	font-family: 'Source Serif 4', serif;
	font-size: 1.15rem;
	color: #fff;
}
.app-sidebar nav { flex: 1; overflow-y: auto; padding: .75rem 0; }
.app-sidebar a.item-menu {
	display: flex; align-items: center; gap: .6rem;
	padding: .6rem 1.2rem;
	color: #C9D2DA;
	font-size: .9rem;
}
.app-sidebar a.item-menu:hover,
.app-sidebar a.item-menu.activo {
	background: rgba(255,255,255,.08);
	color: #fff;
	text-decoration: none;
	border-left: 3px solid var(--mostaza);
	padding-left: calc(1.2rem - 3px);
}

.app-contenido { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
	padding: .9rem 1.6rem;
	display: flex; align-items: center; justify-content: space-between;
}
.app-topbar .usuario-info { font-size: .88rem; color: var(--texto-suave); }
.app-topbar .usuario-info strong { color: var(--texto); }
.app-topbar .cerrar-sesion { font-size: .85rem; color: var(--peligro); }

.app-main { padding: 1.8rem; flex: 1; }

.panel {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	padding: 1.4rem;
}

.rejilla-resumen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.6rem;
}
.rejilla-resumen .dato {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-left: 3px solid var(--mostaza);
	border-radius: var(--radio);
	padding: 1rem 1.2rem;
}
.rejilla-resumen .dato .valor {
	font-family: 'Source Serif 4', serif;
	font-size: 1.7rem;
	color: var(--tinta);
	display: block;
}
.rejilla-resumen .dato .etiqueta { font-size: .82rem; color: var(--texto-suave); }