label { display: block; font-size: 12px; color: var(--texto-tenue); margin: 14px 0 4px; }
label:first-child { margin-top: 0; }

input, select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--linea);
  color: var(--texto);
  padding: 8px 10px;
  border-radius: var(--radio);
  font-size: 14px;
  font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--ambar); }

button.primario, button.secundario {
  border: none;
  padding: 8px 16px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
button.primario { background: var(--ambar); color: #1C1F22; }
button.primario:hover { opacity: 0.9; }
button.secundario { background: none; border: 1px solid var(--linea); color: var(--texto); }
button.secundario:hover { border-color: var(--texto-tenue); }

button.icono {
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
}
button.icono:hover { color: var(--texto); }
button.icono.borrar:hover { color: var(--rojo); }

#error-login { color: var(--rojo); font-size: 13px; margin-top: 12px; display: none; }

table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 28px; }
th {
  text-align: left; color: var(--texto-tenue); font-weight: 600;
  font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--linea);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
td.num, th.num { font-family: var(--mono); text-align: right; }
td.mono { font-family: var(--mono); }

.etiqueta {
  display: inline-block; padding: 2px 7px; border-radius: var(--radio);
  font-size: 11px; font-family: var(--mono); font-weight: 600;
}
.etiqueta.ok { background: rgba(90,138,110,0.18); color: var(--verde); }
.etiqueta.alerta { background: rgba(217,142,48,0.18); color: var(--ambar); }
.etiqueta.a { background: rgba(184,84,80,0.18); color: var(--rojo); }
.etiqueta.b { background: rgba(217,142,48,0.18); color: var(--ambar); }
.etiqueta.c { background: rgba(90,138,110,0.18); color: var(--verde); }

.panel-formulario {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 24px;
  display: none;
}
.panel-formulario.abierto { display: block; }
.panel-formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.panel-formulario .acciones { margin-top: 16px; display: flex; gap: 10px; }

.formulario-en-linea {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.formulario-en-linea label { margin-top: 0; }

.filtros {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}

#mensaje-flotante {
  font-size: 13px; margin: -14px 0 20px; display: none;
}
#mensaje-flotante.ok { color: var(--verde); }
#mensaje-flotante.error { color: var(--rojo); }

.vacio { color: var(--texto-tenue); font-size: 13px; padding: 20px 0; }

.miniatura {
  width: 32px; height: 32px; border-radius: var(--radio);
  object-fit: cover; background: var(--linea); vertical-align: middle;
}

canvas#grafico-pareto { max-width: 100%; margin-bottom: 32px; }