/* Catálogo de Horarios — Washington Academy.
   Brand colours sampled from the logo: red #D53B21, navy #002C6A. */

:root {
	--rojo: #D53B21;
	--azul: #002C6A;
	--azulSuave: #EAF0F8;
	--texto: #1B2430;
	--tenue: #6B7787;
	--linea: #E2E7EE;
	--fondo: #F4F6FA;
	--blanco: #FFFFFF;
	--radio: 10px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

/* ---- login ---- */

body.login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.loginCard {
	background: var(--blanco);
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 44, 106, .12);
	padding: 40px 36px;
	max-width: 420px;
	width: 100%;
	text-align: center;
}

.loginLogo { width: 190px; max-width: 70%; height: auto; }

.loginCard h1 {
	margin: 18px 0 6px;
	font-size: 22px;
	color: var(--azul);
	letter-spacing: .2px;
}

.loginLead { margin: 0 0 22px; color: var(--tenue); font-size: 14px; }
.loginHint { margin: 14px 0 0; color: var(--tenue); font-size: 13px; }

.loginError {
	background: #FDECEA;
	border: 1px solid #F5C6C0;
	color: #96271A;
	border-radius: var(--radio);
	padding: 10px 12px;
	font-size: 14px;
	margin: 0 0 18px;
	text-align: left;
}

/* ---- buttons ---- */

.btn {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	background: none;
	font-family: inherit;
}

.btnPrimary { background: var(--rojo); color: var(--blanco); padding: 12px 28px; }
.btnPrimary:hover { background: #BE3119; }

/* The copy button lives in the filter bar, so it matches the pills around it. */
.btnCopy { padding: 9px 18px; min-width: 112px; }
.btnCopy:disabled { background: #D9DEE6; color: #8A93A0; cursor: default; }

.btnGhost { border-color: var(--linea); background: var(--blanco); color: var(--texto); white-space: nowrap; }
.btnGhost:hover { border-color: var(--azul); color: var(--azul); }

/* ---- top bar ---- */

.topBar {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--blanco);
	border-bottom: 3px solid var(--rojo);
	padding: 10px 20px;
}

.topLogo { height: 30px; width: auto; }
.topTitle { font-weight: 700; color: var(--azul); font-size: 16px; }
.topSpacer { flex: 1; }
.topUser { color: var(--tenue); font-size: 13px; }
.topLink { color: var(--azul); font-size: 13px; text-decoration: none; font-weight: 600; }
.topLink:hover { text-decoration: underline; }

#app { max-width: 1120px; margin: 0 auto; padding: 24px 16px 56px; }
.centerNote { text-align: center; color: var(--tenue); padding: 60px 0; }

/* ---- step 1: plantel ---- */

.stepTitle { margin: 16px 0 4px; font-size: 24px; color: var(--azul); text-align: center; }
.stepLead { margin: 0 0 26px; color: var(--tenue); text-align: center; font-size: 14px; }

.campusGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.campusCard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-left: 5px solid var(--azul);
	border-radius: var(--radio);
	padding: 20px;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: border-color .12s, box-shadow .12s, transform .12s;
}

.campusCard:hover {
	border-left-color: var(--rojo);
	box-shadow: 0 6px 18px rgba(0, 44, 106, .10);
	transform: translateY(-1px);
}

.campusName { font-size: 18px; font-weight: 700; color: var(--azul); }
.campusCount { font-size: 13px; color: var(--tenue); }

/* ---- filters ---- */

.filterBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; }

.search {
	flex: 1 1 220px;
	min-width: 180px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14px;
	font-family: inherit;
	background: var(--blanco);
}

.search:focus, .dropBtn:focus { outline: 2px solid var(--azulSuave); outline-offset: 1px; }

.dropdown { position: relative; }

.dropBtn {
	border: 1px solid var(--linea);
	background: var(--blanco);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: var(--texto);
	cursor: pointer;
	white-space: nowrap;
}

.dropBtn:hover { border-color: var(--azul); }
.dropBtnOn { background: var(--azul); border-color: var(--azul); color: var(--blanco); }

.dropPanel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 230px;
	max-height: 320px;
	overflow: auto;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: 0 10px 30px rgba(0, 44, 106, .14);
	padding: 8px;
}

.dropFind {
	width: 100%;
	border: 1px solid var(--linea);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 14px;
	font-family: inherit;
	margin-bottom: 6px;
}

.dropItem {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
}

.dropItem:hover { background: var(--azulSuave); }

.dropClear {
	width: 100%;
	margin-top: 6px;
	border: none;
	border-top: 1px solid var(--linea);
	background: none;
	color: var(--rojo);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	padding: 8px 0 2px;
	cursor: pointer;
}

/* Aviso del botón Copiar: va fuera de la hoja para que no salga en la captura. */
.copyNote {
	margin: -6px 0 14px;
	padding: 10px 14px;
	border-radius: var(--radio);
	font-size: 14px;
	border: 1px solid transparent;
}

.copyNoteOk  { background: #E9F7EF; border-color: #BFE6CD; color: #1D6B3E; }
.copyNoteMal { background: #FDECEA; border-color: #F5C6C0; color: #96271A; }

/* ---- the sheet: this is what ends up in the screenshot ---- */

.sheet {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: 14px;
	overflow: hidden;
}

.sheetHead {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 3px solid var(--rojo);
}

.sheetLogo { height: 58px; width: auto; }
.sheetHeadText { min-width: 0; }
.sheetHeadText h2 { margin: 0; font-size: 20px; color: var(--azul); }
.sheetSummary { margin: 2px 0 0; color: var(--tenue); font-size: 13px; }

/* Between phone and laptop the five columns can be wider than the screen:
   the table scrolls inside the sheet instead of the whole page scrolling. */
#tableWrap { overflow-x: auto; }

.grid { width: 100%; min-width: 820px; border-collapse: collapse; }

.grid thead th {
	background: var(--azulSuave);
	color: var(--azul);
	text-align: left;
	font-size: 12px;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 10px 14px;
	white-space: nowrap;
}

.grid tbody td {
	padding: 9px 14px;
	border-top: 1px solid var(--linea);
	vertical-align: top;
	font-size: 14px;
}

.grid tbody tr:nth-child(even) { background: #FAFBFD; }

.cellCourse { min-width: 170px; }
.cellPeriod { white-space: nowrap; }
.cellSchedule .sesion { display: block; white-space: nowrap; }
.cellCampus { white-space: nowrap; font-weight: 600; }
.cellTeacher { min-width: 170px; }
.cellSeats { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.courseName { display: block; font-weight: 700; color: var(--azul); }
.cellDate { white-space: nowrap; }

/* Debajo de la fecha, no al lado: si va al lado la columna se ensancha de más. */
.badge {
	display: block;
	width: fit-content;
	margin-top: 4px;
	background: var(--azul);
	color: var(--blanco);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
}

/* La × de quitar: discreta, solo aparece al pasar el cursor por la fila. */
.cellDrop { width: 34px; padding-left: 0 !important; padding-right: 8px !important; }

.dropRow {
	border: none;
	background: none;
	color: var(--tenue);
	font-size: 18px;
	line-height: 1;
	padding: 0 6px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s, color .12s;
}

.grid tbody tr:hover .dropRow { opacity: 1; }
.dropRow:hover { color: var(--rojo); }
.dropRow:focus { opacity: 1; outline: 2px solid var(--azulSuave); }

body.clean .cellDrop { display: none; }

.empty { padding: 40px 20px; text-align: center; color: var(--tenue); }

.sheetFoot {
	margin: 0;
	padding: 12px 22px;
	border-top: 1px solid var(--linea);
	color: var(--tenue);
	font-size: 12px;
	background: #FBFCFE;
}

/* "Vista limpia": hide the chrome so the screenshot is only the sheet. */
body.clean .topBar,
body.clean .filters,
body.clean .search,
body.clean #backToCampus,
body.clean #copyList,
body.clean .copyNote,
body.clean #clearFilters { display: none; }

body.clean #cleanView {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 30;
	box-shadow: 0 6px 18px rgba(0, 44, 106, .18);
}

/* ---- phones ---- */

@media (max-width: 720px) {
	.topUser { display: none; }
	.sheetLogo { height: 40px; }
	.sheetHeadText h2 { font-size: 17px; }

	.grid { min-width: 0; }
	.grid thead { display: none; }
	.grid tbody td { display: block; border-top: none; padding: 2px 16px; }
	.grid tbody tr { display: block; border-top: 1px solid var(--linea); padding: 12px 0; }
	.grid tbody tr:first-child { border-top: none; }
	.cellCourse { padding-bottom: 4px; }
	.grid tbody td:not(.cellCourse)::before {
		content: attr(data-label);
		color: var(--tenue);
		font-size: 12px;
	}
}