/**
 * Estilos mínimos de las pantallas públicas de familias (registro, acceso, mi cuenta).
 */

.acres-formulario {
	max-width: 480px;
	margin: 1em 0;
}

.acres-formulario p {
	margin-bottom: 1em;
}

.acres-formulario label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 600;
}

.acres-formulario input[type="email"],
.acres-formulario input[type="password"],
.acres-formulario input[type="text"],
.acres-formulario input[type="number"] {
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
}

.acres-mensaje {
	padding: 0.75em 1em;
	margin-bottom: 1em;
	border-radius: 4px;
}

.acres-mensaje-exito,
.acres-mensaje-info {
	background: #eaf7ea;
	color: #1e5b1e;
}

.acres-mensaje-error {
	background: #fbeaea;
	color: #7a1f1f;
}

/* Campo honeypot: oculto visualmente y para lectores de pantalla, pero
   presente en el DOM para que un bot automatizado lo rellene por error. */
.acres-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.acres-boton {
	display: inline-block;
	padding: 0.5em 1em;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

.acres-boton:hover,
.acres-boton:focus {
	background: #135e96;
	color: #fff;
}

.acres-boton-secundario {
	background: #f0f0f1;
	color: #3c434a;
	border: 1px solid #c3c4c7;
}

.acres-boton-secundario:hover,
.acres-boton-secundario:focus {
	background: #dcdcde;
	color: #3c434a;
}

.acres-acceso-acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
}

.acres-saldo-actual {
	display: inline-block;
	padding: 0.5em 0.75em;
	margin: 0.5em 0 1em;
	background: #f0f6fc;
	border-radius: 4px;
	font-size: 1.1em;
	font-weight: 600;
}

.acres-saldo-negativo {
	background: #fbeaea;
	color: #7a1f1f;
}

.acres-franja-reservada {
	background: #eaf3fc;
	border-left: 4px solid #2271b1;
	padding-left: 0.5em;
}

.acres-etiqueta-reservado {
	display: inline-block;
	padding: 0.15em 0.5em;
	margin-right: 0.4em;
	background: #2271b1;
	color: #fff;
	border-radius: 3px;
	font-size: 0.85em;
}

/* Tira semanal navegable (mobile-first), reutilizada por [acres_horario] y
   [acres_mis_reservas]. */
.acres-tira-semanal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin: 0.75em 0;
}

.acres-tira-semanal-nav button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.acres-aviso-limite-semana {
	margin: 0 0 0.75em;
	font-size: 0.9em;
	color: #50575e;
}

/* Los 7 días caben siempre a la vez, sin scroll horizontal: rejilla de 7
   columnas iguales que se comprime en pantallas estrechas en vez de
   desbordar. */
.acres-tira-semanal {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 0.3em;
	margin-bottom: 1em;
}

.acres-dia-tira {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15em;
	padding: 0.4em 0.2em;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	font-size: 0.8em;
	min-width: 0;
}

.acres-dia-tira-nombre {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.acres-dia-tira-fecha {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

@media ( max-width: 480px ) {
	.acres-dia-tira {
		font-size: 0.68em;
		padding: 0.3em 0.1em;
	}

	.acres-dia-tira-nombre {
		font-size: 0.9em;
	}
}

.acres-dia-tira-activo {
	background: #2271b1;
	color: #fff;
	border-color: #135e96;
}

.acres-dia-tira-cierre {
	background: #f0f0f1;
	color: #757575;
	text-decoration: line-through;
}

/* Marca visualmente los días que ya tienen una clase reservada (p. ej. por
   una plaza preferente fijada por el administrador), para que la familia no
   tenga que adivinar en qué día mirar. */
.acres-dia-tira-con-reserva:not(.acres-dia-tira-activo) {
	border-color: #1e5b1e;
	box-shadow: inset 0 0 0 2px #1e5b1e;
}

/* Lista de clases del día seleccionado. */
.acres-lista-clases {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acres-franja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.6em 0.75em;
	margin-bottom: 0.5em;
	border: 1px solid #e2e4e7;
	border-radius: 6px;
}

.acres-franja-reservable {
	border-left: 4px solid #2271b1;
}

.acres-franja-completa {
	border-left: 4px solid #b32d2e;
	color: #757575;
}

.acres-franja-reservada {
	background: #eaf3fc;
	border-left: 4px solid #1e5b1e;
}

.acres-dia-cierre-aviso {
	padding: 0.75em;
	background: #f0f0f1;
	border-radius: 4px;
}

/* Catálogo agrupado por día para la selección de plaza preferente. */
.acres-dia-catalogo {
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	margin-bottom: 0.75em;
	padding: 0.5em 0.75em;
}

.acres-franja-catalogo {
	display: block;
	padding: 0.35em 0;
}

/* Historial de "mis reservas": distingue visualmente cada estado. */
.acres-etiqueta-estado {
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: 3px;
	font-size: 0.8em;
}

.acres-reserva-estado-activa .acres-etiqueta-estado {
	background: #2271b1;
	color: #fff;
}

.acres-reserva-estado-cancelada_a_tiempo .acres-etiqueta-estado {
	background: #eaf7ea;
	color: #1e5b1e;
}

.acres-reserva-estado-cancelada_fuera_plazo .acres-etiqueta-estado,
.acres-reserva-estado-no_presentado .acres-etiqueta-estado {
	background: #fbeaea;
	color: #7a1f1f;
}

.acres-reserva-estado-cancelada_por_cierre .acres-etiqueta-estado {
	background: #f0f0f1;
	color: #50575e;
}

#acres-lista-mis-reservas {
	list-style: none;
	margin: 0;
	padding: 0;
}

#acres-lista-mis-reservas li {
	padding: 0.6em 0.75em;
	margin-bottom: 0.5em;
	border: 1px solid #e2e4e7;
	border-radius: 6px;
}

/* Modal de confirmación vanilla, sin dependencias externas. */
.acres-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	z-index: 100000;
}

.acres-modal {
	background: #fff;
	border-radius: 6px;
	padding: 1.25em;
	max-width: 24em;
	width: 100%;
}

.acres-modal-acciones {
	display: flex;
	justify-content: flex-end;
	gap: 0.5em;
	margin-top: 1em;
}

/* Página de instalación de la app ([acres_instalar_app]). */
.acres-instalar {
	max-width: 560px;
	margin: 1em auto;
	text-align: center;
}

.acres-instalar-icono {
	width: 96px;
	height: 96px;
	border-radius: 20px;
	margin-bottom: 0.5em;
}

.acres-instalar-nombre {
	font-size: 1.4em;
	font-weight: 700;
	margin: 0 0 1em;
}

.acres-instalar-pasos {
	text-align: left;
	background: #f6f7f7;
	border-radius: 8px;
	padding: 1em 1.25em;
	margin-bottom: 1.25em;
}

.acres-instalar-pasos h2 {
	margin-top: 0;
}

.acres-instalar-pasos ol {
	margin: 0.5em 0 0;
	padding-left: 1.25em;
}

.acres-instalar-boton-nativo {
	display: none;
	width: 100%;
	padding: 0.75em 1em;
	margin: 0.75em 0 0;
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	background: #2c3e91;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.acres-instalar-boton-nativo.acres-visible {
	display: block;
}

.acres-instalar-continuar {
	display: inline-block;
	padding: 0.75em 1.5em;
	background: #2c3e91;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
}

/* Pantalla propia de "sin conexión" (offline.php), cacheada por el service worker. */
.acres-offline {
	max-width: 480px;
	margin: 2em auto;
	text-align: center;
}

.acres-offline-icono {
	font-size: 3em;
	margin-bottom: 0.25em;
}

.acres-offline p {
	margin: 0.5em 0;
}