/* Escuela Infantil PWA — estilos del panel de familias y de la agenda de educadores.
   Inspirado en el estilo de referencia: blanco protagonista, un único color de
   acento (verde menta configurable), tarjetas limpias con sombra suave e
   iconos redondos por tipo de dato (comida, pañal, siesta, biberón...). */
:root{
	--ei-primario: #3DCB94;    /* verde menta — barra de acento y elementos activos */
	--ei-secundario: #EAF2EE;  /* gris-verde muy claro para fondos de icono */
	--ei-fondo: #F7F8FA;       /* gris casi blanco */
	--ei-texto: #4A4A4A;
	--ei-radio: 16px;
	--ei-sombra: 0 2px 12px rgba(20,20,20,0.06);
	--ei-borde: #ECEDEF;
}

*{ box-sizing: border-box; }

.ei-app{
	max-width: 480px;
	margin: 0 auto;
	background: #fff;
	color: var(--ei-texto);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	border-radius: var(--ei-radio);
	overflow: hidden;
	box-shadow: var(--ei-sombra);
	border: 1px solid var(--ei-borde);
}

.ei-topbar{
	background: var(--ei-primario);
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ei-topbar h1{ font-size: 17px; margin: 0; font-weight: 600; }
.ei-topbar .ei-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:#fff3; border:2px solid #fff; }

.ei-tabs{
	display: flex;
	overflow-x: auto;
	background: #fff;
	border-bottom: 1px solid var(--ei-borde);
}
.ei-tab{
	flex: 0 0 auto;
	padding: 12px 15px;
	font-size: 13px;
	color: #aaa;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.ei-tab.activo{ color: var(--ei-texto); border-color: var(--ei-primario); font-weight:600; }

.ei-content{ padding: 16px; min-height: 320px; background: var(--ei-fondo); }

.ei-card{
	background: #fff;
	border: 1px solid var(--ei-borde);
	border-radius: var(--ei-radio);
	box-shadow: var(--ei-sombra);
	padding: 14px 16px;
	margin-bottom: 12px;
}
.ei-card h3{ margin: 0 0 6px; font-size: 15px; }
.ei-card p{ margin: 0; font-size: 14px; color: #888; }

/* Tarjeta destacada "Hoy en clase" — como el ejemplo con foto de referencia */
.ei-card.destacada{ text-align: center; padding: 22px 16px; }
.ei-card.destacada .ei-aula-badge{
	display:inline-block; background: var(--ei-secundario); color: var(--ei-primario);
	font-size:12px; font-weight:600; padding:3px 12px; border-radius:999px; margin-bottom:8px;
}
.ei-card.destacada h2{ margin: 4px 0 2px; font-size: 20px; }
.ei-card.destacada .ei-subtitulo{ font-size:12px; color:#999; margin-bottom:14px; }
.ei-card.destacada .ei-nota-dia{ background: var(--ei-fondo); border-radius: 12px; padding: 12px 14px; font-size: 13px; text-align:left; margin-bottom: 14px; }

.ei-icono-circulo{
	width:46px; height:46px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background: var(--ei-secundario); font-size:20px; margin: 0 auto 8px;
}

.ei-badge{
	display:inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
}
.ei-badge.ok{ background: #E4F8EF; color: #22A06B; }
.ei-badge.pendiente{ background: #FDF3DC; color: #C79225; }
.ei-badge.info{ background: var(--ei-secundario); color: var(--ei-primario); }

.ei-boton{
	display:inline-block;
	background: var(--ei-primario);
	color:#fff;
	border:none;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor:pointer;
}
.ei-boton.secundario{ background: var(--ei-secundario); color: var(--ei-primario); }
.ei-boton:disabled{ opacity:.5; cursor:default; }

.ei-loading{ text-align:center; padding: 40px 0; color:#bbb; font-size:14px; }

.ei-install-banner{
	position: fixed;
	left: 12px; right: 12px; bottom: 12px;
	background: #fff;
	border-radius: var(--ei-radio);
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	z-index: 9999;
	border: 1px solid var(--ei-borde);
}
.ei-install-banner span{ font-size: 13px; }

.ei-login-box{
	max-width: 380px;
	margin: 40px auto;
	background: #fff;
	border-radius: var(--ei-radio);
	box-shadow: var(--ei-sombra);
	padding: 24px;
	text-align: center;
}

/* Registro diario: fila de icono + texto + hora */
.ei-registro-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--ei-borde); }
.ei-registro-item:last-child{ border-bottom:none; }
.ei-registro-item .icono{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--ei-secundario); font-size:16px; flex-shrink:0; }
.ei-registro-item .texto{ font-size: 13px; line-height:1.4; }
.ei-registro-item .hora{ margin-left:auto; font-size:11px; color:#bbb; flex-shrink:0; }

/* ---------------------------------------------------------------- */
/* Agenda de educadores: tarjeta por alumno con contadores "stepper" */
/* (misma idea que la vista de tablet de referencia)                 */
/* ---------------------------------------------------------------- */
.ei-agenda-alumno{
	background:#fff; border:1px solid var(--ei-borde); border-radius: var(--ei-radio);
	box-shadow: var(--ei-sombra); padding: 14px 16px; margin-bottom: 12px;
}
.ei-agenda-cabecera{ display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.ei-agenda-cabecera img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.ei-agenda-cabecera .nombre{ font-weight:700; font-size:14px; }
.ei-agenda-cabecera .aula{ font-size:11px; color:#999; }
.ei-agenda-cabecera .ei-badge{ margin-left:auto; }

.ei-stepper-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(84px,1fr)); gap:8px; }
.ei-stepper{
	background: var(--ei-fondo); border-radius:12px; padding:8px; text-align:center;
}
.ei-stepper .icono{ font-size:18px; margin-bottom:2px; }
.ei-stepper .etiqueta{ font-size:10px; color:#999; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.ei-stepper .controles{ display:flex; align-items:center; justify-content:center; gap:6px; }
.ei-stepper button{
	width:24px; height:24px; border-radius:50%; border:1px solid var(--ei-borde); background:#fff;
	font-size:14px; line-height:1; cursor:pointer; color: var(--ei-primario); font-weight:700;
}
.ei-stepper .valor{ font-size:15px; font-weight:700; min-width:18px; }

@media (min-width: 540px){
	.ei-app{ margin-top: 24px; margin-bottom: 24px; }
}