/*
 * Estilos base.
 *
 * Acá vive solo lo transversal: tipografía, colores, y que la app se vea bien
 * instalada en un celular. Los estilos de cada pantalla van con su pantalla.
 */

:root {
	/* Rojo bombero, apagado lo suficiente para leerse bien en pantalla. */
	--color-marca: #8c1d18;
	--color-marca-suave: #f7e9e8;

	--color-fondo: #ffffff;
	--color-superficie: #f6f6f7;
	--color-texto: #1a1a1a;
	--color-texto-suave: #5c5c5c;
	--color-borde: #d8d8db;

	--color-ok: #1b6b3a;
	--color-error: #a3231c;

	--radio: 8px;
	--espacio: 1rem;

	/* Ancho cómodo de lectura en escritorio, sin estirarse de punta a punta. */
	--ancho-maximo: 46rem;

	--tipografia: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-fondo: #141416;
		--color-superficie: #1e1e21;
		--color-texto: #f2f2f3;
		--color-texto-suave: #a8a8ad;
		--color-borde: #35353a;
		--color-marca: #e8635c;
		--color-marca-suave: #2a1817;
	}
}

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

body {
	margin: 0;
	font-family: var(--tipografia);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-texto);
	background: var(--color-fondo);

	/* Respeta la muesca y la barra inferior del iPhone cuando está instalada. */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
		env(safe-area-inset-left);

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

h1,
h2,
h3 {
	line-height: 1.2;
	text-wrap: balance;
}

/* Enlace para saltar la navegación con el teclado. Solo se ve al enfocarlo. */
.salto-al-contenido {
	position: absolute;
	left: -9999px;
	padding: 0.5rem 1rem;
	background: var(--color-marca);
	color: #fff;
	border-radius: 0 0 var(--radio) 0;
	z-index: 100;
}

.salto-al-contenido:focus {
	left: 0;
	top: 0;
}

/* Foco visible en todo lo interactivo: se navega con teclado en las PC del cuartel. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--color-marca);
	outline-offset: 2px;
}

.cargando,
.arranque {
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: calc(var(--espacio) * 2) var(--espacio);
}

.version {
	color: var(--color-texto-suave);
	font-size: 0.875rem;
	margin-top: -0.5rem;
}

.chequeos {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	overflow: hidden;
}

.chequeos li {
	padding: 0.625rem var(--espacio);
	background: var(--color-superficie);
	font-variant-numeric: tabular-nums;
}

.chequeos li + li {
	border-top: 1px solid var(--color-borde);
}

.nota {
	color: var(--color-texto-suave);
	font-size: 0.9375rem;
}

/* Aviso de falta de conexión, anclado abajo para no tapar el contenido. */
.aviso-sin-conexion {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem var(--espacio);
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--color-marca-suave);
	color: var(--color-texto);
	border-top: 1px solid var(--color-marca);
	text-align: center;
	font-size: 0.9375rem;
}

.aviso-sin-conexion[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===========================================================================
 * Armazón de la aplicación
 * ======================================================================== */

.barra {
	display: flex;
	align-items: center;
	gap: var(--espacio);
	flex-wrap: wrap;
	padding: 0.75rem var(--espacio);
	background: var(--color-marca);
	color: #fff;
}

.barra .marca {
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	margin-right: auto;
}

.barra nav {
	display: flex;
	gap: var(--espacio);
	flex-wrap: wrap;
}

.barra nav a {
	color: #fff;
	text-decoration: none;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
}

.barra nav a:hover,
.barra nav a:focus-visible {
	border-bottom-color: #fff;
}

.pantalla {
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: calc(var(--espacio) * 1.5) var(--espacio) calc(var(--espacio) * 5);
}

.pantalla--angosta {
	max-width: 26rem;
}

.pantalla-encabezado {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--espacio);
	flex-wrap: wrap;
}

/* ===========================================================================
 * Piezas
 * ======================================================================== */

.boton {
	display: inline-block;
	padding: 0.625rem 1rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-superficie);
	color: var(--color-texto);
	font: inherit;
	cursor: pointer;
	/* Tamaño mínimo cómodo para un dedo, que es como se va a usar. */
	min-height: 44px;
}

.boton:hover { border-color: var(--color-marca); }
.boton[disabled] { opacity: 0.6; cursor: progress; }

.boton--principal,
.boton--google {
	width: 100%;
	background: var(--color-marca);
	border-color: var(--color-marca);
	color: #fff;
	font-weight: 600;
}

.boton--chico {
	min-height: 36px;
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
}

.formulario { margin-top: var(--espacio); }

.campo {
	margin-bottom: var(--espacio);
}

.campo label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.campo input,
.campo select {
	width: 100%;
	padding: 0.625rem;
	min-height: 44px;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-fondo);
	color: var(--color-texto);
	/* 16px o más: por debajo, Safari en iPhone hace zoom al enfocar el campo. */
	font-size: 1rem;
}

.separador {
	text-align: center;
	color: var(--color-texto-suave);
	margin: var(--espacio) 0;
}

.aviso {
	padding: 0.75rem var(--espacio);
	border-radius: var(--radio);
	border: 1px solid var(--color-borde);
	background: var(--color-superficie);
	margin: var(--espacio) 0;
}

.aviso--error { border-color: var(--color-error); }
.aviso--exito { border-color: var(--color-ok); }
.aviso--info  { border-color: var(--color-marca); }

.vacio {
	padding: calc(var(--espacio) * 2) var(--espacio);
	text-align: center;
	color: var(--color-texto-suave);
}

.accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--espacio);
	margin-top: calc(var(--espacio) * 1.5);
}

.acceso {
	display: block;
	padding: var(--espacio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-superficie);
	color: var(--color-texto);
	text-decoration: none;
	font-weight: 600;
	text-align: center;
}

.acceso:hover { border-color: var(--color-marca); }

.lista {
	list-style: none;
	padding: 0;
	margin: var(--espacio) 0;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	overflow: hidden;
}

.lista li {
	display: flex;
	align-items: center;
	gap: var(--espacio);
	flex-wrap: wrap;
	padding: 0.75rem var(--espacio);
	background: var(--color-superficie);
}

.lista li + li { border-top: 1px solid var(--color-borde); }

.motivo {
	color: var(--color-error);
	font-size: 0.9375rem;
	margin-right: auto;
}

/* ===========================================================================
 * Organigrama, listados y fichas
 * ======================================================================== */

.arbol {
	list-style: none;
	padding: 0;
	margin: var(--espacio) 0;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	overflow: hidden;
}

.arbol-nodo {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.5rem var(--espacio);
	/* La sangría muestra la jerarquía sin necesidad de dibujar líneas. */
	padding-left: calc(var(--espacio) + var(--profundidad, 0) * 1.25rem);
	background: var(--color-superficie);
}

.arbol-nodo + .arbol-nodo { border-top: 1px solid var(--color-borde); }

.arbol-nodo--inactiva { opacity: 0.55; }

.arbol-nombre { font-weight: 600; }

.arbol-tipo {
	color: var(--color-texto-suave);
	font-size: 0.875rem;
}

.etiqueta {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--color-borde);
	border-radius: 999px;
	font-size: 0.75rem;
	color: var(--color-texto-suave);
	white-space: nowrap;
}

.etiqueta--aviso {
	border-color: var(--color-marca);
	color: var(--color-marca);
}

.filtros {
	display: flex;
	gap: var(--espacio);
	flex-wrap: wrap;
	margin: var(--espacio) 0;
}

.filtros input { flex: 1 1 12rem; }

.filtros input,
.filtros select {
	padding: 0.625rem;
	min-height: 44px;
	font-size: 1rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-fondo);
	color: var(--color-texto);
}

.lista-principal {
	font-weight: 600;
	margin-right: auto;
	color: var(--color-texto);
}

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

.ficha dt { color: var(--color-texto-suave); }
.ficha dd { margin: 0; font-weight: 600; }

.lista-simple {
	margin: var(--espacio) 0;
	padding-left: 1.25rem;
}

.lista-simple li { margin-bottom: 0.375rem; }

.agregar {
	margin-top: calc(var(--espacio) * 1.5);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	padding: var(--espacio);
	background: var(--color-superficie);
}

.agregar summary {
	cursor: pointer;
	font-weight: 600;
}

/* ===========================================================================
 * Fichaje
 * ======================================================================== */

.fichaje {
	margin: calc(var(--espacio) * 1.5) 0;
	padding: calc(var(--espacio) * 1.5);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-superficie);
	text-align: center;
}

.fichaje--adentro { border-color: var(--color-ok); }

.fichaje-estado {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.fichaje-desde {
	color: var(--color-texto-suave);
	margin: 0 0 var(--espacio);
}

/* El botón que va a usar todo el mundo desde el celular, muchas veces con
 * guantes puestos o apurado. Grande. */
.boton--fichaje {
	width: 100%;
	min-height: 64px;
	font-size: 1.125rem;
	font-weight: 700;
	background: var(--color-marca);
	border-color: var(--color-marca);
	color: #fff;
}

.boton--salir {
	background: var(--color-ok);
	border-color: var(--color-ok);
}

/* ===========================================================================
 * Tareas
 * ======================================================================== */

.tarea {
	display: block;
}

.tarea-acciones {
	margin-top: 0.5rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	padding: 0.5rem 0.75rem;
	background: var(--color-fondo);
}

.tarea-acciones summary {
	cursor: pointer;
	min-height: 32px;
	display: flex;
	align-items: center;
}

.opciones {
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	padding: 0.75rem;
	margin: 0 0 var(--espacio);
}

.opciones legend {
	font-weight: 600;
	padding: 0 0.375rem;
}

/* Toda la fila es tocable, no solo el círculo del radio: se usa con una mano
 * y a veces con guantes. */
.opcion {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
}

.opcion input { width: 22px; height: 22px; }
.opcion label { flex: 1; cursor: pointer; }

.campo textarea {
	width: 100%;
	padding: 0.625rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-fondo);
	color: var(--color-texto);
}

.campo[hidden] { display: none; }