:root {
	--fondo: #f4f5f7;
	--panel: #ffffff;
	--texto: #1b1d22;
	--suave: #5f6673;
	--borde: #dde0e6;
	--acento: #d4202a;
	--acento-texto: #ffffff;
	--fila-hover: #f0f2f5;
	--fila-abierta: #fff5f5;
	--seco: #2c7a3f;
	--mojado: #1f5fae;
	--error: #b3261e;
	--radio: 8px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fondo: #121418;
		--panel: #1b1e24;
		--texto: #e7e9ee;
		--suave: #9aa1ad;
		--borde: #2d323b;
		--acento: #ef3b45;
		--fila-hover: #22262e;
		--fila-abierta: #2a1f22;
		--seco: #6cc483;
		--mojado: #7fb2f0;
		--error: #ff8a80;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--fondo);
	color: var(--texto);
}

h1, h2 { margin: 0; font-weight: 650; }
h1 { font-size: 1.2rem; }
h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.marca { color: var(--acento); font-weight: 800; letter-spacing: .02em; margin-right: .3em; }

button, a.boton {
	display: inline-block;
	text-decoration: none;
	font: inherit;
	border: 0;
	border-radius: var(--radio);
	padding: .5rem 1rem;
	background: var(--acento);
	color: var(--acento-texto);
	cursor: pointer;
	font-weight: 600;
}
button:disabled { opacity: .45; cursor: default; }
button.secundario, a.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
button.enlace { background: none; color: var(--suave); padding: .25rem .5rem; font-weight: 500; }
button.enlace:hover { color: var(--texto); }
button.pequeno { padding: .2rem .55rem; font-size: .85rem; }

input, select {
	font: inherit;
	color: inherit;
	background: var(--panel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: .45rem .6rem;
	min-width: 0;
	width: 100%;
}
input[type=checkbox] { width: auto; accent-color: var(--acento); }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--suave); }
label.casilla { flex-direction: row; align-items: center; gap: .4rem; font-size: .9rem; color: var(--texto); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.tarjeta {
	background: var(--panel);
	border: 1px solid var(--borde);
	border-radius: 12px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	width: min(380px, 100%);
}
.tarjeta.ancha { width: min(720px, 100%); }
.error { color: var(--error); margin: 0; min-height: 1em; font-size: .9rem; }
.error:empty { display: none; }
.aviso { background: var(--fila-abierta); border-radius: var(--radio); padding: .6rem .8rem; margin: 0; }
.aviso code { font-size: 1.05rem; user-select: all; }
.botones { display: flex; justify-content: flex-end; gap: .5rem; }

/* Entrar */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }

/* Biblioteca */
.cabecera {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
	padding: .8rem 16px; background: var(--panel); border-bottom: 1px solid var(--borde);
}
.cabecera nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
#yo { color: var(--suave); font-size: .9rem; margin-right: .5rem; }

.filtros {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .6rem;
	padding: 1rem 16px .5rem;
}
.filtros .ancho { grid-column: span 2; }

.barra {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
	padding: .5rem 16px;
}
#total { color: var(--suave); }
.seleccion { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.tabla-envoltorio { padding: 0 16px; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla th, .tabla td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .col-check { width: 2rem; }
.tabla tbody tr.pack { cursor: pointer; }
.tabla tbody tr.pack:hover { background: var(--fila-hover); }
.tabla tbody tr.abierto { background: var(--fila-abierta); }
.tabla.compacta td, .tabla.compacta th { padding: .4rem .5rem; }
.tiempo { font-weight: 650; }
.sub { display: block; color: var(--suave); font-size: .82rem; }
.seco { color: var(--seco); font-weight: 600; }
.mojado { color: var(--mojado); font-weight: 600; }
.vacio { text-align: center; color: var(--suave); padding: 2rem !important; }

.detalle td { background: var(--fila-abierta); }
.detalle-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.detalle dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; }
.detalle dt { color: var(--suave); }
.detalle dd { margin: 0; }
.archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.archivos a { color: var(--texto); overflow-wrap: anywhere; }
.archivos .tipo { color: var(--suave); font-size: .8rem; margin-left: .4rem; }
.detalle .botones { justify-content: flex-start; margin-top: .6rem; }

.mas { text-align: center; }
.estado { color: var(--suave); font-size: .82rem; padding: 1rem 16px 2rem; }

.explica { margin: 0; color: var(--suave); font-size: .9rem; }
code { font-size: .85em; overflow-wrap: anywhere; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
legend { font-size: .85rem; color: var(--suave); padding: 0 .3rem; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .2rem .8rem; }
.casillas.lista { max-height: 240px; overflow-y: auto; }
.desfasado { color: var(--error); }

dialog { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); }
dialog .tarjeta { max-height: calc(100vh - 32px); overflow-y: auto; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.en-linea { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.en-linea input:not([type=checkbox]) { width: auto; flex: 1 1 140px; }

@media (max-width: 720px) {
	.ocultable { display: none; }
	.filtros .ancho { grid-column: 1 / -1; }
}