/*
 * Hoja de estilos de Seguimiento Cunicula.
 *
 * Escrita movil primero: lo que hay aqui arriba es lo que ve un telefono, y las
 * media queries van anadiendo espacio segun crece la pantalla. Se hace en este
 * orden porque el veterinario usa la aplicacion en la nave, con el movil y a
 * menudo con una mano; el ordenador es el caso comodo.
 */

:root {
	--fondo: #f7f6f2;
	--superficie: #ffffff;
	--texto: #23291f;
	--tenue: #6b7360;
	--acento: #3f6b35;
	--acento-claro: #eaf1e7;
	--borde: #dcdccf;
	--error: #a3342a;
	--error-fondo: #fbeceb;
	--exito: #2f6b3f;
	--exito-fondo: #e9f3ec;

	--radio: 0.5rem;
	--espacio: 1rem;

	/*
	 * Minimo para que un dedo acierte sin pelearse. Las guias de Apple y Google
	 * hablan de 44 px; se aplica a botones, enlaces de navegacion y campos.
	 */
	--tactil: 2.75rem;
}

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

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	background: var(--fondo);
	color: var(--texto);
	/* Respeta la barra de estado y el notch en moviles. */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
		env(safe-area-inset-left);
}

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

/* Visible para lectores de pantalla, invisible en pantalla. */
.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Estructura ---------- */

.contenedor {
	width: 100%;
	max-width: 62rem;
	margin: 0 auto;
	padding: 0 var(--espacio);
}

.cabecera {
	background: var(--superficie);
	border-bottom: 1px solid var(--borde);
}

.cabecera__marca {
	display: block;
	padding: 0.9rem 0 0.6rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--acento);
	text-decoration: none;
}

/*
 * La navegacion envuelve en varias lineas en pantallas estrechas. Se descarta a
 * proposito el carrusel horizontal: esconde secciones fuera de vista y en un
 * movil nadie las encuentra.
 */
.navegacion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding-bottom: 0.5rem;
}

.navegacion a {
	display: flex;
	align-items: center;
	min-height: var(--tactil);
	padding: 0 0.85rem;
	border-radius: var(--radio);
	color: var(--tenue);
	font-weight: 500;
	text-decoration: none;
}

.navegacion a:hover {
	background: var(--acento-claro);
	color: var(--acento);
}

.navegacion a[aria-current="page"] {
	background: var(--acento-claro);
	color: var(--acento);
}

main {
	padding: 1.5rem 0 3rem;
}

.titulo-pagina {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.titulo-pagina h1 {
	margin: 0;
	font-size: 1.5rem;
}

.sub {
	margin: 0.2rem 0 0;
	color: var(--tenue);
	font-size: 0.9rem;
}

.tarjeta {
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: var(--espacio);
}

/* ---------- Sesion en la cabecera ---------- */

.sesion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	font-size: 0.9rem;
}

.sesion__nombre {
	font-weight: 600;
}

.sesion__rol {
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--acento-claro);
	color: var(--acento);
	font-size: 0.8rem;
}

.sesion form {
	margin: 0;
}

.boton--sutil {
	min-height: 2.25rem;
	padding: 0 0.7rem;
	font-size: 0.9rem;
	color: var(--tenue);
}

/* ---------- Pantalla de acceso ---------- */

.pantalla-acceso {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	/* En movil la barra del navegador se come parte de 100vh; dvh mide lo visible. */
	min-height: 100dvh;
}

.acceso {
	width: 100%;
	max-width: 26rem;
	padding: var(--espacio);
	margin: 0 auto;
}

.acceso h1 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--acento);
}

.acceso .sub {
	margin: 0.2rem 0 1.5rem;
}

/* En la pantalla de acceso el boton ocupa el ancho tambien en escritorio. */
.acceso .acciones .boton {
	flex: 1 1 100%;
}

/* ---------- Migas de pan ---------- */

/*
 * La jerarquia es cunicultor > granja > banda, y en movil no cabe la
 * navegacion lateral: las migas son lo que dice donde estas y como subir.
 */
.migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	color: var(--tenue);
}

.migas a {
	text-decoration: none;
}

.migas a:hover {
	text-decoration: underline;
}

.migas span[aria-hidden] {
	color: var(--borde);
}

/* ---------- Datos en dos columnas ---------- */

.datos {
	display: grid;
	gap: 0.75rem var(--espacio);
	grid-template-columns: 1fr;
	margin: 0;
}

.datos div {
	display: flex;
	justify-content: space-between;
	gap: var(--espacio);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--borde);
}

.datos dt {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tenue);
}

.datos dd {
	margin: 0;
	text-align: right;
}

/* ---------- Indicadores ---------- */

.indicadores {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 1.25rem;
}

.indicador {
	padding: 0.75rem;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	text-align: center;
}

.indicador__valor {
	display: block;
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--acento);
}

.indicador__etiqueta {
	display: block;
	font-size: 0.75rem;
	color: var(--tenue);
}

.indicador--vacio .indicador__valor {
	color: var(--borde);
}

/* ---------- Etiquetas de estado ---------- */

.etiqueta {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--acento-claro);
	color: var(--acento);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

.etiqueta--apagada {
	background: var(--borde);
	color: var(--texto);
}

.etiqueta--alerta {
	background: var(--error-fondo);
	color: var(--error);
}

/* ---------- Bloques de un formulario largo ---------- */

.bloque {
	margin-bottom: 1.5rem;
}

.bloque > h2 {
	margin: 0 0 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--borde);
	font-size: 1.05rem;
}

/* ---------- Botones ---------- */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--tactil);
	padding: 0 1.1rem;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--superficie);
	color: var(--texto);
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.boton:hover {
	border-color: var(--acento);
	color: var(--acento);
}

.boton--primario {
	background: var(--acento);
	border-color: var(--acento);
	color: #fff;
}

.boton--primario:hover {
	background: #35592c;
	color: #fff;
}

.acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

/*
 * En movil los botones ocupan toda la linea: son mas faciles de acertar y dejan
 * clara la accion principal. A partir de tableta se ajustan a su contenido.
 */
.acciones .boton {
	flex: 1 1 100%;
}

/* ---------- Avisos ---------- */

.aviso {
	margin-bottom: 1.25rem;
	padding: 0.75rem var(--espacio);
	border-radius: var(--radio);
	border: 1px solid;
}

.aviso--exito {
	background: var(--exito-fondo);
	border-color: var(--exito);
	color: var(--exito);
}

.aviso--error {
	background: var(--error-fondo);
	border-color: var(--error);
	color: var(--error);
}

/* ---------- Formularios ---------- */

.campos {
	display: grid;
	gap: var(--espacio);
	grid-template-columns: 1fr;
}

.campo {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.campo--ancho {
	grid-column: 1 / -1;
}

.campo label {
	font-size: 0.9rem;
	font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	min-height: var(--tactil);
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--superficie);
	color: var(--texto);
	font-family: inherit;
	/*
	 * No bajar de 16px: Safari en iOS hace zoom automatico sobre cualquier campo
	 * con letra mas pequena al enfocarlo, y deja la pagina descuadrada.
	 */
	font-size: 1rem;
}

.campo textarea {
	min-height: 6rem;
	resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	outline: 2px solid var(--acento);
	outline-offset: 1px;
}

.campo--erroneo input,
.campo--erroneo select,
.campo--erroneo textarea {
	border-color: var(--error);
}

.error-campo {
	color: var(--error);
	font-size: 0.85rem;
}

.ayuda {
	color: var(--tenue);
	font-size: 0.85rem;
}

/* ---------- Buscador ---------- */

.buscador {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.buscador input {
	flex: 1;
	min-height: var(--tactil);
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	font-family: inherit;
	font-size: 1rem;
}

/* ---------- Tablas que se vuelven fichas ---------- */

.tabla {
	width: 100%;
	border-collapse: collapse;
	background: var(--superficie);
}

.tabla th,
.tabla td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--borde);
}

.tabla th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--tenue);
}

/*
 * En movil una tabla no cabe: o se corta o se navega en horizontal, y las dos
 * cosas son malas con una mano. Cada fila pasa a ser una ficha y cada celda
 * lleva delante su etiqueta, que sale del atributo data-etiqueta del HTML.
 */
@media (max-width: 47.999em) {
	.tabla thead {
		/* Oculta la cabecera sin sacarla del arbol de accesibilidad. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.tabla,
	.tabla tbody,
	.tabla tr,
	.tabla td {
		display: block;
		width: 100%;
	}

	.tabla tr {
		margin-bottom: 0.75rem;
		border: 1px solid var(--borde);
		border-radius: var(--radio);
		overflow: hidden;
	}

	.tabla td {
		display: flex;
		gap: var(--espacio);
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 1px solid var(--borde);
	}

	.tabla td:last-child {
		border-bottom: 0;
	}

	.tabla td::before {
		content: attr(data-etiqueta);
		flex: 0 0 8rem;
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--tenue);
	}

	/* La celda vacia no aporta nada en formato ficha. */
	.tabla td:empty {
		display: none;
	}

	/*
	 * La celda es un flex, asi que cada hijo suyo es un item. Sin esto un item
	 * no encoge por debajo de su contenido, y como la tarjeta lleva el
	 * desbordamiento oculto, el texto largo se cortaba a media palabra en vez
	 * de pasar a la linea siguiente.
	 */
	.tabla td > * {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

.vacio {
	padding: 2rem var(--espacio);
	text-align: center;
	color: var(--tenue);
	background: var(--superficie);
	border: 1px dashed var(--borde);
	border-radius: var(--radio);
}

/* ---------- Paginacion ---------- */

.paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.paginacion span {
	color: var(--tenue);
	font-size: 0.9rem;
}

/* ---------- Pantallas grandes ---------- */

@media (min-width: 48em) {
	.cabecera .contenedor {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--espacio);
	}

	.cabecera__marca {
		padding: 0.9rem 0;
	}

	.navegacion {
		padding-bottom: 0;
		/* Ocupa el hueco entre la marca y el bloque de sesion. */
		margin-right: auto;
		margin-left: 1.5rem;
	}

	.sesion {
		padding-bottom: 0;
	}

	.titulo-pagina h1 {
		font-size: 1.8rem;
	}

	.campos {
		grid-template-columns: repeat(2, 1fr);
	}

	.datos {
		grid-template-columns: repeat(2, 1fr);
	}

	.indicadores {
		grid-template-columns: repeat(4, 1fr);
	}

	.acciones .boton {
		flex: 0 0 auto;
	}
}

@media (min-width: 62em) {
	main {
		padding-top: 2rem;
	}
}

/* ---------- Impresion ---------- */

@media print {
	.cabecera,
	.acciones,
	.paginacion,
	.buscador {
		display: none;
	}
}

/*
 * Galeria de fotos de la visita.
 *
 * auto-fill con minmax deja que sea el propio ancho el que decida cuantas
 * caben: una por fila en el movil, tres o cuatro en el ordenador, sin una sola
 * media query. El minimo de 9rem es lo que necesita una foto de nave para
 * distinguirse; por debajo no se ve nada util.
 */
.galeria {
	list-style: none;
	margin: 0 0 var(--espacio);
	padding: 0;
	display: grid;
	gap: var(--espacio);
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.galeria li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.galeria a {
	display: block;
	border-radius: var(--radio);
	overflow: hidden;
	border: 1px solid var(--borde);
	background: var(--fondo);
}

/*
 * Las fotos de nave vienen en cualquier proporcion y muchas apaisadas. Un alto
 * fijo con object-fit: cover las iguala recortando, que en una miniatura es
 * preferible a dejar la cuadricula con escalones.
 */
.galeria img {
	display: block;
	width: 100%;
	height: 9rem;
	object-fit: cover;
}

.galeria__pie {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tenue);
	/* Un nombre de camara no lleva espacios donde cortar. */
	overflow-wrap: anywhere;
}

/* Separa el formulario de subida de la lista que tiene encima. */
.subida {
	border-top: 1px solid var(--borde);
	padding-top: var(--espacio);
	margin-top: var(--espacio);
}

/*
 * El selector de archivo del movil es un boton del sistema y llega pequeno.
 * Aqui se le da el alto tactil y se deja que el nombre del archivo se parta en
 * varias lineas en vez de desbordar la tarjeta.
 */
.subida input[type="file"] {
	width: 100%;
	min-height: var(--tactil);
	padding: 0.5rem;
	border: 1px dashed var(--borde);
	border-radius: var(--radio);
	background: var(--fondo);
	font-size: 1rem;
}

/* El nombre del archivo con su descripcion debajo, como una sola pieza. */
.archivo {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

/*
 * Cabecera de bloque con su boton a la derecha. En el movil el boton se cae
 * debajo del titulo en vez de estrujarlo.
 */
.titulo-bloque {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.titulo-bloque h2 {
	margin: 0;
}

/*
 * Botones en fila. Cada uno va en su propio formulario, que por defecto es un
 * bloque, asi que hace falta el flex para que no se apilen.
 */
.acciones-fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.acciones-fila form {
	margin: 0;
}

/*
 * Cada solicitud de analisis es una ficha propia y no una fila de tabla: lleva
 * un texto libre de conclusiones que no cabe en una celda.
 */
.solicitud {
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: var(--espacio);
	margin-bottom: 0.75rem;
}

.solicitud__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}