/* ==========================================================================
   Python Básico — estilos del índice del curso
   --------------------------------------------------------------------------
   Reutiliza los mismos tokens (colores, fuentes, radios) que las 14 sesiones
   para que el índice y las sesiones se perciban como un solo curso.
   El tema oscuro solo redefine variables (html[data-tema="oscuro"]).
   ========================================================================== */

:root {
	--fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--fuente-titulos: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--mono: "Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

	--ancho: 78rem;
	--alto-barra: 3.5rem;
	--radio: 14px;
	--radio-peque: 8px;
	--transicion: 180ms ease;

	--fondo: #f7f8fc;
	--fondo-portada: #eef1fb;
	--superficie: #ffffff;
	--superficie-2: #f2f4fa;
	--texto: #1d2333;
	--texto-suave: #4d566b;
	--texto-tenue: #5a6377;
	--borde: #e0e4ef;
	--borde-fuerte: #cbd2e1;
	--acento: #3651c9;
	--acento-fuerte: #2a3fa3;
	--acento-suave: #e7ebfb;
	--acento-texto: #ffffff;
	--sombra: 0 1px 2px rgba(22, 30, 60, 0.05), 0 4px 16px rgba(22, 30, 60, 0.06);
	--sombra-alta: 0 10px 30px rgba(22, 30, 60, 0.14);

	/* Colores de Python, usados con moderación */
	--py-azul: #3776ab;
	--py-amarillo: #ffd43b;
	--proyecto: #8a4b00;
	--proyecto-fondo: #fff4df;

	/* Ventana de código decorativa */
	--cod-fondo: #fbfbfe;
	--cod-barra: #f1f3f9;
	--cod-texto: #1f2540;
	--cod-comentario: #5b6477;
	--cod-palabra: #7b1fa2;
	--cod-cadena: #17753a;
	--cod-numero: #a0460b;
	--cod-funcion: #0b57b0;

	color-scheme: light;
}

html[data-tema="oscuro"] {
	--fondo: #0f131c;
	--fondo-portada: #151b2a;
	--superficie: #171d2a;
	--superficie-2: #1d2433;
	--texto: #e7eaf2;
	--texto-suave: #b4bccd;
	--texto-tenue: #939cb0;
	--borde: #29324a;
	--borde-fuerte: #36405c;
	--acento: #93a6ff;
	--acento-fuerte: #b3c0ff;
	--acento-suave: #1f2848;
	--acento-texto: #0f131c;
	--sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
	--sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.45);

	--py-azul: #7cb4e6;
	--proyecto: #ffc56b;
	--proyecto-fondo: #33260f;

	--cod-fondo: #131826;
	--cod-barra: #0f1420;
	--cod-texto: #e4e7f0;
	--cod-comentario: #9aa3b8;
	--cod-palabra: #d2a8ff;
	--cod-cadena: #9be09b;
	--cod-numero: #ffb77a;
	--cod-funcion: #7cc4ff;

	color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--fuente);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }

code {
	padding: 0.1em 0.35em;
	border-radius: 5px;
	background: var(--superficie-2);
	color: var(--acento-fuerte);
	font-family: var(--mono);
	font-size: 0.88em;
}

:focus-visible {
	outline: 3px solid var(--acento);
	outline-offset: 2px;
	border-radius: 4px;
}

.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.saltar {
	position: absolute;
	top: -3rem;
	left: 1rem;
	z-index: 50;
	padding: 0.5rem 1rem;
	border-radius: var(--radio-peque);
	background: var(--acento);
	color: var(--acento-texto);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--transicion);
}
.saltar:focus { top: 0.5rem; }

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px) { .contenedor { padding: 0 1.5rem; } }

/* ---------- Barra superior ---------- */

.barra {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--fondo) 85%, transparent);
	border-bottom: 1px solid var(--borde);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

.barra .contenedor {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: var(--alto-barra);
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-right: auto;
	color: var(--texto);
	font-family: var(--fuente-titulos);
	font-weight: 700;
	text-decoration: none;
}

.marca-logo { flex: none; width: 1.9rem; height: 1.9rem; }

/* Botones con la misma forma que los de las sesiones */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--superficie);
	color: var(--texto);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	transition: border-color var(--transicion), background-color var(--transicion), color var(--transicion);
}
.boton:hover { border-color: var(--acento); }
.boton[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-fuerte); }

.grupo {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--superficie);
}
.grupo .boton { min-height: 1.9rem; border-color: transparent; background: none; }
.grupo .boton[aria-pressed="true"] { background: var(--acento-suave); border-color: transparent; }

@media (max-width: 520px) {
	.boton-texto { display: none; }
	.grupo .boton { padding: 0.3rem 0.55rem; }
}

/* ---------- Portada ---------- */

.portada {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
	background:
		radial-gradient(60rem 22rem at 100% 0%, color-mix(in srgb, var(--py-amarillo) 14%, transparent), transparent 70%),
		radial-gradient(50rem 24rem at 0% 100%, color-mix(in srgb, var(--py-azul) 14%, transparent), transparent 70%),
		var(--fondo-portada);
	border-bottom: 1px solid var(--borde);
}

.portada-rejilla {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 900px) {
	.portada-rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; }
}

.antetitulo {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	color: var(--texto-suave);
	font-size: 0.875rem;
	font-weight: 600;
}
.antetitulo li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--superficie);
}
.punto { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--py-azul); }
.punto-amarillo { background: var(--py-amarillo); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

.portada h1 {
	margin: 0 0 1rem;
	font-family: var(--fuente-titulos);
	font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
	font-weight: 780;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.portada h1 span { color: var(--acento); }

.entradilla {
	max-width: 38rem;
	margin: 0 0 1.75rem;
	color: var(--texto-suave);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	text-wrap: pretty;
}

.cifras {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}
.cifras li {
	display: flex;
	flex-direction: column;
	min-width: 7.5rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--superficie);
	box-shadow: var(--sombra);
}
.cifras strong { font-family: var(--fuente-titulos); font-size: 1.5rem; line-height: 1.2; }
.cifras span { color: var(--texto-tenue); font-size: 0.85rem; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.boton-primario,
.boton-secundario {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.9rem;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	font-weight: 650;
	text-decoration: none;
	transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton-primario {
	border: 1px solid var(--acento);
	background: var(--acento);
	color: var(--acento-texto);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--acento) 30%, transparent);
}
.boton-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); transform: translateY(-1px); }
.boton-secundario {
	border: 1px solid var(--borde-fuerte);
	background: var(--superficie);
	color: var(--texto);
}
.boton-secundario:hover { border-color: var(--acento); color: var(--acento-fuerte); }
.boton-primario svg, .boton-secundario svg { width: 1.1rem; height: 1.1rem; flex: none; }

/* Ventana de código decorativa */
.ventana {
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--cod-fondo);
	box-shadow: var(--sombra-alta);
	overflow: hidden;
}
.ventana-barra {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--borde);
	background: var(--cod-barra);
	color: var(--texto-tenue);
	font-family: var(--mono);
	font-size: 0.8rem;
}
.ventana-barra i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--borde-fuerte); }
.ventana-barra i:nth-child(1) { background: #ff5f57; }
.ventana-barra i:nth-child(2) { background: #febc2e; }
.ventana-barra i:nth-child(3) { background: #28c840; }
.ventana-barra span { margin-left: 0.5rem; }
.ventana pre {
	margin: 0;
	padding: 1.1rem 1.25rem 1.3rem;
	overflow-x: auto;
	color: var(--cod-texto);
	font-family: var(--mono);
	font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.92rem);
	line-height: 1.75;
}
.c-com { color: var(--cod-comentario); font-style: italic; }
.c-pal { color: var(--cod-palabra); }
.c-cad { color: var(--cod-cadena); }
.c-num { color: var(--cod-numero); }
.c-fun { color: var(--cod-funcion); }
.ventana-salida { color: var(--texto-tenue); }

@media (max-width: 899.98px) {
	.ventana { display: none; }
}

/* ---------- Continuar ---------- */

.continuar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
	border-left: 4px solid var(--acento);
	border-radius: var(--radio);
	background: var(--superficie);
	box-shadow: var(--sombra);
}
.continuar[hidden] { display: none; }
.continuar p { flex: 1 1 16rem; margin: 0; color: var(--texto-suave); }
.continuar strong { color: var(--texto); }

/* ---------- Sesiones ---------- */

.sesiones { padding: clamp(2.5rem, 5vw, 4rem) 0 4rem; }

.sesiones-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-bottom: 1.5rem;
}
.sesiones-cabecera h2 {
	margin: 0 0 0.25rem;
	font-family: var(--fuente-titulos);
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
	font-weight: 740;
	letter-spacing: -0.01em;
}
.sesiones-cabecera p { margin: 0; color: var(--texto-suave); }

.herramientas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.buscador { position: relative; flex: 1 1 16rem; }
.buscador svg {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--texto-tenue);
	transform: translateY(-50%);
	pointer-events: none;
}
.buscador input {
	width: 100%;
	min-width: 0;
	min-height: 2.6rem;
	padding: 0.5rem 1rem 0.5rem 2.55rem;
	border: 1px solid var(--borde-fuerte);
	border-radius: 999px;
	background: var(--superficie);
	color: var(--texto);
	font: inherit;
	font-size: 0.95rem;
	transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador input::placeholder { color: var(--texto-tenue); opacity: 1; }
.buscador input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }

.filtros .boton { min-height: 2.1rem; padding: 0.3rem 0.9rem; }

.resultado {
	margin: 0 0 1.25rem;
	color: var(--texto-tenue);
	font-size: 0.9rem;
}

.rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.35rem 1.35rem 1.2rem;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--superficie);
	box-shadow: var(--sombra);
	transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	border-radius: var(--radio) var(--radio) 0 0;
	background: linear-gradient(90deg, var(--py-azul), var(--py-amarillo));
	opacity: 0;
	transition: opacity var(--transicion);
}
.tarjeta:hover,
.tarjeta:focus-within {
	border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
	box-shadow: var(--sombra-alta);
	transform: translateY(-3px);
}
.tarjeta:hover::before,
.tarjeta:focus-within::before,
.tarjeta.es-ultima::before { opacity: 1; }
.tarjeta.es-ultima { border-color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
	.tarjeta, .boton-primario { transition: none; }
	.tarjeta:hover, .tarjeta:focus-within, .boton-primario:hover { transform: none; }
}

.tarjeta-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
}

.num {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radio-peque);
	background: var(--acento-suave);
	color: var(--acento-fuerte);
	font-family: var(--mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.insignia {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--proyecto-fondo);
	color: var(--proyecto);
	font-size: 0.75rem;
	font-weight: 700;
}
.insignia-ultima { background: var(--acento); color: var(--acento-texto); }
.insignia-ultima[hidden] { display: none; }

.duracion {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: auto;
	color: var(--texto-tenue);
	font-size: 0.8rem;
	white-space: nowrap;
}
.duracion svg { width: 0.95rem; height: 0.95rem; }

.tarjeta h3 {
	margin: 0 0 0.5rem;
	font-family: var(--fuente-titulos);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

.tarjeta p {
	margin: 0 0 0.9rem;
	color: var(--texto-suave);
	font-size: 0.93rem;
	line-height: 1.55;
}

.temas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
}
.temas li {
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--borde);
	border-radius: 6px;
	background: var(--superficie-2);
	color: var(--texto-suave);
	font-family: var(--mono);
	font-size: 0.75rem;
}

.proyecto-dia {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: auto 0 1.1rem;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--borde-fuerte);
	color: var(--texto-suave);
	font-size: 0.87rem;
}
.proyecto-dia strong { color: var(--texto); }

.ver {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--acento);
	border-radius: 999px;
	color: var(--acento-fuerte);
	font-size: 0.9rem;
	font-weight: 650;
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion);
}
.ver svg { width: 1rem; height: 1rem; transition: transform var(--transicion); }
/* Toda la tarjeta es clicable, pero el enlace sigue siendo único */
.ver::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.tarjeta:hover .ver,
.ver:focus-visible { background: var(--acento); color: var(--acento-texto); }
.tarjeta:hover .ver svg { transform: translateX(3px); }

.vacio {
	padding: 2.5rem 1rem;
	border: 1px dashed var(--borde-fuerte);
	border-radius: var(--radio);
	color: var(--texto-suave);
	text-align: center;
}
.vacio[hidden] { display: none; }
.vacio p { margin: 0 0 1rem; }

/* ---------- Pie ---------- */

.pie {
	padding: 2rem 0 3rem;
	border-top: 1px solid var(--borde);
	color: var(--texto-tenue);
	font-size: 0.875rem;
	text-align: center;
}
.pie p { margin: 0.25rem 0; }

@media print {
	.barra, .herramientas, .ventana, .continuar, .acciones { display: none !important; }
	.tarjeta { box-shadow: none; break-inside: avoid; }
}